From 067148d0812d09b30efcf598600eb77aaf76aafa Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Fri, 6 Jan 2017 00:57:23 +0800
Subject: [PATCH 1/2] challenge #30056080 PREFLIGHT CHECKLIST

---
 README.md                                     |   1 +
 package.json                                  |   3 +
 src/components/AdminHeader/AdminHeader.jsx    |   1 -
 src/components/Button/Button.jsx              |   1 +
 src/components/Header/Header.jsx              | 179 +++++++++---------
 src/components/Pagination/Pagination.jsx      |  57 +++---
 src/components/Pagination/Pagination.scss     | 127 ++++++-------
 src/components/Radiobox/Radiobox.jsx          |  36 ++++
 src/components/Radiobox/Radiobox.scss         |  46 +++++
 src/components/Radiobox/index.js              |   3 +
 .../SelectPerPage/SelectPerPage.jsx           |  32 ++++
 .../SelectPerPage/SelectPerPage.scss          |  86 +++++++++
 src/components/SelectPerPage/index.js         |   3 +
 src/components/StatusLabel/StatusLabel.jsx    |  10 +-
 src/components/StatusLabel/StatusLabel.scss   |  14 ++
 src/components/Table/Table.jsx                | 140 ++++++++++++++
 src/components/Table/Table.scss               | 101 ++++++++++
 src/components/Table/index.js                 |   3 +
 .../TextareaField/TextareaField.jsx           |  18 +-
 .../TextareaField/TextareaField.scss          |  30 ++-
 src/containers/HeaderContainer.js             |   9 +-
 .../DashboardRequest/DashboardRequest.jsx     |  24 ++-
 .../DashboardRequest/DashboardRequest.scss    |  23 ++-
 .../Dashboard/components/DashboardView.jsx    |   6 +-
 src/routes/Dashboard/modules/Dashboard.js     |   2 +
 .../DronesMap/components/DronesMapView.jsx    |   2 +-
 .../components/SignupModal/SignupModal.jsx    |   1 -
 .../Home/containers/SignupModalContainer.js   |   2 +-
 .../components/MissionListView.jsx            |  95 ++++++----
 .../components/MissionListView.scss           |  38 +---
 src/routes/MissionList/modules/MissionList.js |  26 +--
 .../MyRequest/components/MyRequestView.jsx    |  25 ++-
 .../MyRequest/components/MyRequestView.scss   |  17 ++
 src/routes/MyRequest/modules/MyRequest.js     |   2 +
 .../PilotChecklistForm/PilotChecklistForm.jsx | 100 ++++++++++
 .../PilotChecklistForm.scss                   |  62 ++++++
 .../components/PilotChecklistForm/index.js    |   3 +
 .../components/PilotChecklistView.jsx         |  22 +++
 .../components/PilotChecklistView.scss        |  37 ++++
 .../containers/PilotChecklistContainer.js     |  12 ++
 .../containers/PilotChecklistFormContainer.js |  33 ++++
 src/routes/PilotChecklist/index.js            |  15 ++
 .../PilotChecklist/modules/PilotChecklist.js  |  74 ++++++++
 .../components/PilotMissionsView.jsx          |  54 ++++++
 .../components/PilotMissionsView.scss         |  52 +++++
 .../containers/PilotMissionsContainer.js      |  12 ++
 src/routes/PilotMissions/index.js             |  15 ++
 .../PilotMissions/modules/PilotMissions.js    |  39 ++++
 src/routes/index.js                           |   4 +
 src/services/APIService.js                    |  89 +++++----
 src/services/AuthService.js                   |   5 +-
 src/store/modules/global.js                   |  22 +--
 src/styles/img/icon-pagination-next.png       | Bin 0 -> 1076 bytes
 src/styles/img/icon-pagination-prev.png       | Bin 0 -> 1076 bytes
 src/styles/img/icon-select-arrow-small.png    | Bin 0 -> 1102 bytes
 55 files changed, 1444 insertions(+), 369 deletions(-)
 create mode 100644 src/components/Radiobox/Radiobox.jsx
 create mode 100644 src/components/Radiobox/Radiobox.scss
 create mode 100644 src/components/Radiobox/index.js
 create mode 100644 src/components/SelectPerPage/SelectPerPage.jsx
 create mode 100644 src/components/SelectPerPage/SelectPerPage.scss
 create mode 100644 src/components/SelectPerPage/index.js
 create mode 100644 src/components/Table/Table.jsx
 create mode 100644 src/components/Table/Table.scss
 create mode 100644 src/components/Table/index.js
 create mode 100644 src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.jsx
 create mode 100644 src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.scss
 create mode 100644 src/routes/PilotChecklist/components/PilotChecklistForm/index.js
 create mode 100644 src/routes/PilotChecklist/components/PilotChecklistView.jsx
 create mode 100644 src/routes/PilotChecklist/components/PilotChecklistView.scss
 create mode 100644 src/routes/PilotChecklist/containers/PilotChecklistContainer.js
 create mode 100644 src/routes/PilotChecklist/containers/PilotChecklistFormContainer.js
 create mode 100644 src/routes/PilotChecklist/index.js
 create mode 100644 src/routes/PilotChecklist/modules/PilotChecklist.js
 create mode 100644 src/routes/PilotMissions/components/PilotMissionsView.jsx
 create mode 100644 src/routes/PilotMissions/components/PilotMissionsView.scss
 create mode 100644 src/routes/PilotMissions/containers/PilotMissionsContainer.js
 create mode 100644 src/routes/PilotMissions/index.js
 create mode 100644 src/routes/PilotMissions/modules/PilotMissions.js
 create mode 100644 src/styles/img/icon-pagination-next.png
 create mode 100644 src/styles/img/icon-pagination-prev.png
 create mode 100644 src/styles/img/icon-select-arrow-small.png

diff --git a/README.md b/README.md
index 6389d32..3c961f9 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 * node v6 (https://nodejs.org)
 
 ## Quick Start
+* copy `.env.example` to `.env`
 * `npm install`
 * `npm run dev`
 * Navigate browser to `http://localhost:3000`
diff --git a/package.json b/package.json
index 7ae293e..61db473 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "rc-slider": "^5.4.0",
     "rc-tooltip": "^3.4.2",
     "react": "^15.3.2",
+    "react-addons-create-fragment": "^15.4.1",
     "react-breadcrumbs": "^1.5.1",
     "react-click-outside": "^2.2.0",
     "react-count-down": "^1.0.3",
@@ -80,6 +81,7 @@
     "react-icheck": "^0.3.6",
     "react-input-range": "^0.9.3",
     "react-modal": "^1.5.2",
+    "react-paginate": "^4.1.0",
     "react-portal": "^3.0.0",
     "react-redux": "^4.0.0",
     "react-redux-toastr": "^4.2.2",
@@ -89,6 +91,7 @@
     "react-simple-dropdown": "^1.1.5",
     "react-slick": "^0.14.5",
     "react-star-rating-component": "^1.2.2",
+    "react-table": "^3.1.4",
     "react-tabs": "^0.8.2",
     "react-timeago": "^3.1.3",
     "reactable": "^0.14.1",
diff --git a/src/components/AdminHeader/AdminHeader.jsx b/src/components/AdminHeader/AdminHeader.jsx
index 32da13e..1c6bc82 100644
--- a/src/components/AdminHeader/AdminHeader.jsx
+++ b/src/components/AdminHeader/AdminHeader.jsx
@@ -3,7 +3,6 @@ import CSSModules from 'react-css-modules';
 import {Link} from 'react-router';
 import styles from './AdminHeader.scss';
 import Dropdown from '../Dropdown';
-import Notification from '../Notification';
 
 export const AdminHeader = () => (
   <nav styleName="admin-header">
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index ddba5e8..761b19d 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -19,6 +19,7 @@ Button.propTypes = {
 Button.defaultProps = {
   type: 'button',
   size: 'normal',
+  color: 'blue',
 };
 
 export default CSSModules(Button, styles, {allowMultiple: true});
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 77383d8..2466d6f 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -9,8 +9,7 @@ import Notification from '../Notification';
 import styles from './Header.scss';
 
 export const Header = ({
-  location, selectedCategory, categories, user, notifications,
-  routes, handleNotification, doLogout, toggleNotif, loggedUser,
+  location, selectedCategory, categories, user, notifications, handleNotification, doLogout, toggleNotif, loggedUser,
 }) => (
 
   <nav styleName="header">
@@ -18,112 +17,104 @@ export const Header = ({
       <li styleName="branding">
         DRONE MARKET
       </li>
-      {
-        (() => {
-          if (user.role == 'consumer') {
-            return (
-              <li styleName="pages">
+      {user.role === 'consumer' &&
+        <li styleName="pages">
+          <ul>
+            <li>
+              <Link to="/home" activeClassName="active">Home</Link>
+            </li>
+            <li>
+              <Link to="/my-request-status" activeClassName="active">My Requests</Link>
+            </li>
+            <li>
+              <Link to="/browse-provider" activeClassName="active">Browse Services</Link>
+            </li>
+            <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
+            <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
+            <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
+          </ul>
+        </li>
+      }
+      {user.role === 'provider' &&
+        <li styleName="pages">
+          <ul>
+            <li>
+              <Link to="/dashboard" activeClassName="active">Dashboard</Link>
+            </li>
+            <li>
+              <Link to="/my-request" activeClassName="active">Requests</Link>
+            </li>
+            <li>
+              <Link to="/my-drone" activeClassName="active">My Drones</Link>
+            </li>
+            <li>
+              <Link to="/my-services" activeClassName="active">My Services</Link>
+            </li>
+            <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
+            <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
+            <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
+          </ul>
+        </li>
+      }
+      {user.role === 'pilot' &&
+        <li styleName="pages">
+          <ul>
+            <li><Link to="/pilot-missions" activeClassName="active">Pilot Missions</Link></li>
+          </ul>
+        </li>
+      }
+      {!loggedUser ? (
+      [
+            (<li key="location" styleName="location">
+              <i />
+              {location}
+            </li>),
+            (<li key="search" styleName="search">
+              <SearchInput placeholder="Type your search here..." />
+            </li>),
+            (<li key="category">
+              <Dropdown title={selectedCategory}>
                 <ul>
-                  <li>
-                    <Link to="/home" activeClassName="active">Home</Link>
-                  </li>
-                  <li>
-                    <Link to="/my-request-status" activeClassName="active">My Requests</Link>
-                  </li>
-                  <li>
-                    <Link to="/browse-provider" activeClassName="active">Browse Services</Link>
-                  </li>
-                  <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
-                  <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
-                  <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
+                  {categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
                 </ul>
-              </li>
-            );
-          } else if (user.role == 'provider') {
-            return (
-              <li styleName="pages">
+              </Dropdown>
+            </li>),
+            (<li key="login" styleName="login">
+              <LogInModalContainer />
+            </li>),
+            (<li key="signup" styleName="login">
+              <SignupModalContainer />
+            </li>),
+      ]
+        ) : (
+      [
+            (<li key="notification" styleName="notifications" onClick={() => handleNotification(!toggleNotif)}>
+              {notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
+              {toggleNotif && <Notification
+                notifications={notifications} toggleNotif={toggleNotif}
+                handleNotification={handleNotification}
+              />}
+            </li>),
+            (<li key="welcome" styleName="user">
+              <Dropdown title={<span>Welcome,<br />{user.name}</span>}>
                 <ul>
                   <li>
-                    <Link to="/dashboard" activeClassName="active">Dashboard</Link>
-                  </li>
-                  <li>
-                    <Link to="/my-request" activeClassName="active">Requests</Link>
+                    <a href="javascript:">Profile</a>
                   </li>
                   <li>
-                    <Link to="/my-drone" activeClassName="active">My Drones</Link>
+                    <a href="javascript:" onClick={doLogout()}>Logout</a>
                   </li>
-                  <li>
-                    <Link to="/my-services" activeClassName="active">My Services</Link>
-                  </li>
-                  <li><Link to="javascript:;" activeClassName="active">Analytics</Link></li>
-                  <li><Link to="/drones-map" activeClassName="active">Drone Traffic</Link></li>
-                  <li><Link to="/mission-planner" activeClassName="active">MissionPlanner</Link></li>
                 </ul>
-              </li>
-            );
-          }
-        })()
-      }
-      {
-        (() => {
-          if (!loggedUser) {
-            return (
-            [
-              (<li key="location" styleName="location">
-                <i />
-                {location}
-              </li>),
-              (<li key="search" styleName="search">
-                <SearchInput placeholder="Type your search here..." />
-              </li>),
-              (<li key="category">
-                <Dropdown title={selectedCategory}>
-                  <ul>
-                    {categories.map((item, i) => <li key={i}><a href="javascript:">{item.name}</a></li>)}
-                  </ul>
-                </Dropdown>
-              </li>),
-              (<li key="login" styleName="login">
-                <LogInModalContainer />
-              </li>),
-              (<li key="signup" styleName="login">
-                <SignupModalContainer />
-              </li>),
-            ]
-            );
-          }
-          return (
-          [
-              (<li key="notification" styleName="notifications" onClick={() => handleNotification(!toggleNotif)}>
-                {notifications.length > 0 && <span styleName="counter">{notifications.length}</span>}
-                {toggleNotif && <Notification
-                  notifications={notifications} toggleNotif={toggleNotif}
-                  handleNotification={handleNotification}
-                />}
-              </li>),
-              (<li key="welcome" styleName="user">
-                <Dropdown title={<span>Welcome,<br />{user.name}</span>}>
-                  <ul>
-                    <li>
-                      <a href="javascript:">Profile</a>
-                    </li>
-                    <li>
-                      <a href="javascript:" onClick={doLogout()}>Logout</a>
-                    </li>
-                  </ul>
-                </Dropdown>
-              </li>),
-          ]
-          );
-        })()
+              </Dropdown>
+            </li>),
+      ]
+        )
       }
-
     </ul>
   </nav>
 );
 
 Header.propTypes = {
-  routes: PropTypes.any.isRequired,
   location: PropTypes.string.isRequired,
   selectedCategory: PropTypes.string.isRequired,
   categories: PropTypes.array.isRequired,
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
index 52b333c..182d659 100644
--- a/src/components/Pagination/Pagination.jsx
+++ b/src/components/Pagination/Pagination.jsx
@@ -1,43 +1,34 @@
 import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
-import _ from 'lodash';
 import styles from './Pagination.scss';
-import Select from '../Select';
+import ReactPaginate from 'react-paginate';
 
-const pageOptions = [
-  {value: 10, label: '10'},
-  {value: 30, label: '30'},
-  {value: 50, label: '50'},
-];
+export const Pagination = ({forcePage, pageCount, onPageChange}) => {
+  const props = {...{
+    previousLabel: '',
+    nextLabel: '',
+    marginPagesDisplayed: 1,
+    pageRangeDisplayed: 3,
+    containerClassName: styles.pagination,
+    pageClassName: styles.page,
+    activeClassName: styles.page_active,
+    breakClassName: styles.break,
+    nextClassName: styles.next,
+    previousClassName: styles.prev,
+    disabledClassName: styles.disabled,
+  },
+    forcePage,
+    pageCount,
+    onPageChange,
+  };
 
-
-export const Pagination = ({pages, activePageIndex}) => (
-  <div styleName="pagination">
-    <div styleName="show-per-page">
-      <span>Show</span>
-      <Select
-        styleName="pagination-select"
-        clearable={false}
-        value={10}
-        options={pageOptions}
-        {..._.pick({}, 'value', 'onChange')}
-      />
-      <span>per page</span>
-    </div>
-    <ul styleName="pageControl">
-      <li styleName="previousPage">&lt;</li>
-      {_.range(pages).map((i) => (
-        <li styleName={(activePageIndex || 0) === i ? 'active' : ''} key={i}>{i + 1}</li>
-      ))}
-      <li>...</li>
-      <li styleName="nextPage">&gt;</li>
-    </ul>
-  </div>
-);
+  return (<ReactPaginate {...props} />);
+};
 
 Pagination.propTypes = {
-  pages: PropTypes.number.isRequired,
-  activePageIndex: PropTypes.number,
+  forcePage: PropTypes.number.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
 };
 
 export default CSSModules(Pagination, styles);
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
index f4a3fd2..e4c62d8 100644
--- a/src/components/Pagination/Pagination.scss
+++ b/src/components/Pagination/Pagination.scss
@@ -1,80 +1,75 @@
 .pagination {
   display: flex;
-  flex-direction: row;
+  margin: 0;
+  padding: 0;
+}
 
-  .show-per-page {
-    width: 100%;
-    flex-direction: row;
-    display: flex;
-    align-items: center;
-    width: 157px;
+.page {
+  background-color: #e3e3e3;
+  border-radius: 5px;
+  cursor: pointer;
+  display: block;
+  height: 27px;
+  line-height: 27px;
+  list-style: none;
+  margin-left: 9px;
+  text-align: center;
+  width: 27px;
 
-    .pagination-select {
-      flex: 1;
+  &:first-child {
+    margin-left: 0;
+  }
 
-      :global {
-        .Select-control {
-          border-radius: 5px;
-          height: 20px;
-        }
-        .Select-arrow {
-          background: url("../../styles/img/icon-dropdown-caret-small.png") no-repeat;
-          margin-left: 8px;
-          padding-right: 3px;
-        }
-      }
-    }
+  > a {
+    color: #000;
+    display: block;
+    font-size: 12px;
+    height: 27px;
+    width: 27px;
+  }
+}
 
-    > span {
-      padding: 0 5px;
-      width: 100px;
-      display: block;
-      white-space: nowrap;
-    }
+.page_active {
+  background-color: #315b95;
+  color: #fff;
+  cursor: default;
 
+  > a {
+    color: #fff;
   }
-  
-  .pageControl{
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-direction: row;
-      margin-left: auto;
-      font-size: 12px;
-      font-weight: bold;
-      cursor: pointer;
+}
 
-      > li {
-       background-color: #DCDCDC;
-       height: 28px;
-       width: 28px;
-       border-radius: 5px;
-       vertical-align: middle;
-       justify-content: center;
-       padding-top: 4px;
-       display: flex;
-       margin: 0px 8px 0px 0px;
-       user-select: none;
-      }
+.break,
+.next,
+.prev {
+  @extend .page;
+}
 
-      > .active {
-       background-color: #264782;
-       color: #fff;
-      }
+.break,
+.disabled {
+  cursor: default;
+}
 
-      > .previousPage {
-        flex: 1;
-        font-weight: normal;
-        background-color: #3B3B3B;
-        color: #fff;
-      }
+.next,
+.prev {
+  background-color: #4c4c4c;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.next.disabled,
+.prev.disabled {
+  background-color: rgba(#efefef, 0.5);
 
-      > .nextPage {
-        font-weight: normal;
-        background-color: #3B3B3B;
-        color: #fff;
-        flex: 1
-      }
+  > a {
+    outline: none;
   }
 }
+
+.prev {
+  background-image: url('icon-pagination-prev.png');
+}
+
+.next {
+  background-image: url('icon-pagination-next.png');
+}
diff --git a/src/components/Radiobox/Radiobox.jsx b/src/components/Radiobox/Radiobox.jsx
new file mode 100644
index 0000000..85b1066
--- /dev/null
+++ b/src/components/Radiobox/Radiobox.jsx
@@ -0,0 +1,36 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Radiobox.scss';
+
+const Radiobox = ({children, className, radioValue, name, value, onChange, disabled}) => (
+  <div styleName="radiobox" className={className}>
+    <input
+      type="radio"
+      id={`${name}.${radioValue}`}
+      name={name}
+      value={radioValue}
+      checked={value === radioValue}
+      onChange={onChange}
+      disabled={disabled}
+    />
+    <label htmlFor={`${name}.${radioValue}`}>
+      <span /> {children}
+    </label>
+  </div>
+);
+
+Radiobox.propTypes = {
+  children: PropTypes.string,
+  className: PropTypes.string,
+  radioValue: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+Radiobox.defaultProps = {
+  disabled: false,
+};
+
+export default CSSModules(Radiobox, styles);
diff --git a/src/components/Radiobox/Radiobox.scss b/src/components/Radiobox/Radiobox.scss
new file mode 100644
index 0000000..d849723
--- /dev/null
+++ b/src/components/Radiobox/Radiobox.scss
@@ -0,0 +1,46 @@
+.radiobox {
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  input[type="radio"] {
+    display: none;
+  }
+
+  input[type="radio"] + label span {
+    flex-shrink: 0;
+    display: inline-block;
+    width: 23px;
+    height: 23px;
+    border: 1px solid #a1a1a1;
+    box-shadow: none;
+    appearance: none;
+    margin: 0 9px 0 0;
+    background-color: transparent;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  input[type="radio"]:checked + label span {
+    background: url('icon-checkbox.png') no-repeat 50% 50%;
+  }
+
+  label {
+    font-weight: normal;
+    cursor: pointer;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+  }
+
+  input[type="radio"][disabled] + label {
+    cursor: default;
+  }
+
+  input[type="radio"][disabled] + label span {
+    cursor: default;
+    background-color: #efefef;
+    border-color: #ebebeb;
+  }
+}
diff --git a/src/components/Radiobox/index.js b/src/components/Radiobox/index.js
new file mode 100644
index 0000000..223571c
--- /dev/null
+++ b/src/components/Radiobox/index.js
@@ -0,0 +1,3 @@
+import Radiobox from './Radiobox';
+
+export default Radiobox;
diff --git a/src/components/SelectPerPage/SelectPerPage.jsx b/src/components/SelectPerPage/SelectPerPage.jsx
new file mode 100644
index 0000000..bfac446
--- /dev/null
+++ b/src/components/SelectPerPage/SelectPerPage.jsx
@@ -0,0 +1,32 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import ReactSelect from 'react-select';
+import styles from './SelectPerPage.scss';
+
+const options = [
+  {value: 10, label: '10'},
+  {value: 25, label: '25'},
+  {value: 50, label: '50'},
+  {value: 100, label: '100'},
+];
+
+export const SelectPerPage = ({value, onChange}) => (
+  <div styleName="select-per-page">
+    <span styleName="text-before">Show</span>
+    <ReactSelect
+      clearable={false}
+      searchable={false}
+      options={options}
+      value={value}
+      onChange={onChange}
+    />
+    <span styleName="text-after">per page</span>
+  </div>
+);
+
+SelectPerPage.propTypes = {
+  value: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default CSSModules(SelectPerPage, styles);
diff --git a/src/components/SelectPerPage/SelectPerPage.scss b/src/components/SelectPerPage/SelectPerPage.scss
new file mode 100644
index 0000000..a0bfa9c
--- /dev/null
+++ b/src/components/SelectPerPage/SelectPerPage.scss
@@ -0,0 +1,86 @@
+.select-per-page {
+  align-items: center;
+  color: #282828;
+  display: flex;
+  font-size: 12px;;
+
+  :global {
+    .Select-control {
+      background-color: #fbfbfb;
+      border: 2px solid #e3e3e3 !important;
+      box-shadow: none !important;
+      border-radius: 5px;
+      color: #131313;
+      height: 23px;
+      width: 51px;
+    }
+
+    .Select-placeholder,
+    .Select--single > .Select-control .Select-value {
+      color: #282828;
+      font-size: 12px;
+      line-height: 23px;
+      padding-left: 0px;
+      padding-right: 17px;
+      text-align: center;
+
+      &:after {
+        content: '';
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+      }
+    }
+
+    .Select-value-label {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .Select-input {
+      height: 23px;
+    }
+
+    .Select-arrow-zone {
+      padding-right: 0;
+      width: 23px;
+    }
+
+    .Select-arrow {
+      background: url("../../styles/img/icon-select-arrow-small.png") no-repeat;
+      border: none;
+      display: block;
+      height: 5px;
+      margin-left: 6px;
+      position: relative;
+      top: 1px;
+      width: 8px;
+    }
+
+    .Select-option {
+      color: #282828;
+      font-size: 12px;
+      line-height: 23px;
+      padding: 0 10px;
+
+      &.is-selected {
+        background-color: #f3f5f9;
+      }
+
+      &.is-focused {
+        background-color: #315b95;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.text-before {
+  display: block;
+  margin-right: 9px;
+}
+
+.text-after {
+  display: block;
+  margin-left: 9px;
+}
diff --git a/src/components/SelectPerPage/index.js b/src/components/SelectPerPage/index.js
new file mode 100644
index 0000000..080e41d
--- /dev/null
+++ b/src/components/SelectPerPage/index.js
@@ -0,0 +1,3 @@
+import SelectPerPage from './SelectPerPage';
+
+export default SelectPerPage;
diff --git a/src/components/StatusLabel/StatusLabel.jsx b/src/components/StatusLabel/StatusLabel.jsx
index 08a11cc..6e13840 100644
--- a/src/components/StatusLabel/StatusLabel.jsx
+++ b/src/components/StatusLabel/StatusLabel.jsx
@@ -1,21 +1,25 @@
 import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './StatusLabel.scss';
+import _ from 'lodash';
 
 const statusLabels = {
-  inProgress: 'In Progress',
+  'in-progress': 'In Progress', // new style
+  inProgress: 'In Progress', // old style should be removed when all code is binded to backend
   cancelled: 'Cancelled',
   completed: 'Completed',
+  waiting: 'Waiting',
+  scheduled: 'Scheduled',
 };
 
 export const StatusLabel = ({value}) => (
-  <span styleName={`status-label_${value.toLowerCase()}`}>
+  <span styleName={`status-label_${value.toLowerCase().replace('-', '')}`}>
     <span>{statusLabels[value]}</span>
   </span>
 );
 
 StatusLabel.propTypes = {
-  value: PropTypes.oneOf(['inProgress', 'cancelled', 'completed']).isRequired,
+  value: PropTypes.oneOf(_.keys(statusLabels)).isRequired,
 };
 
 export default CSSModules(StatusLabel, styles);
diff --git a/src/components/StatusLabel/StatusLabel.scss b/src/components/StatusLabel/StatusLabel.scss
index 11325b2..01b2730 100644
--- a/src/components/StatusLabel/StatusLabel.scss
+++ b/src/components/StatusLabel/StatusLabel.scss
@@ -33,3 +33,17 @@
 
   @extend .status-label;
 }
+
+.status-label_waiting {
+  background-color: #e3e3e3;
+  background-image: url('icon-status-inprogress.png');
+
+  @extend .status-label;
+}
+
+.status-label_scheduled {
+  background-color: #4c4c4c;
+  background-image: url('icon-status-inprogress.png');
+
+  @extend .status-label;
+}
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
new file mode 100644
index 0000000..87bc89d
--- /dev/null
+++ b/src/components/Table/Table.jsx
@@ -0,0 +1,140 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import ReactTable from 'react-table';
+import styles from './Table.scss';
+import SelectPerPage from 'components/SelectPerPage';
+import Pagination from 'components/Pagination';
+import _ from 'lodash';
+
+/**
+ * Populate column objects with id in class name
+ * this way we can pass id to the on click handler inside ThComponent
+ * @param  {Array}  columns original columns
+ * @return {Array}          columns with id
+ */
+const prepareColumns = (columns) => (
+  _.map(columns, (column) => (
+    {...column, headerClassName: `-column-id-${column.accessor}`}
+  ))
+);
+
+/**
+ * Convert sorting parameter from backend format to ReactTable format
+ * @param  {String} sortBy in backend format
+ * @return {String}        in ReactTable format
+ */
+const prepareSorting = (sortBy) => {
+  const sorting = [];
+
+  sortBy && sorting.push({
+    id: sortBy.replace(/^-/, ''),
+    asc: sortBy[0] !== '-',
+  });
+
+  return sorting;
+};
+
+/*
+  Table header cell component
+  use custom component to implement server-side sorting
+ */
+const ThComponent = (props) => {
+  const {className, onChange} = props;
+
+  return (
+    <th
+      {..._.omit(props, 'toggleSort')}
+      onClick={() => {
+        const matchSortable = className.match(/(?:^| )-cursor-pointer(?: |$)/);
+        if (matchSortable) {
+          const matchColumnId = className.match(/(?:^| )-column-id-([^\s]+)(?: |$)/);
+          const matchSortingDir = className.match(/(?:^| )-sort-([^\s]+)(?: |$)/);
+          if (matchColumnId) {
+            let sortDir;
+            // if sorting direction is set and it's 'desc' we change it to 'asc'
+            if (matchSortingDir && matchSortingDir[1] === 'desc') {
+              sortDir = '';
+            // if sorting direction is not set, then we set to 'asc' by default
+            } else if (!matchSortingDir) {
+              sortDir = '';
+            // in this case sort direction was set to 'asc', so we change it to 'desc'
+            } else {
+              sortDir = '-';
+            }
+            onChange({sortBy: sortDir + matchColumnId[1]});
+          }
+        }
+      }}
+    >
+      {props.children}
+    </th>
+  );
+};
+
+ThComponent.propTypes = {
+  className: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.any,
+};
+
+export const Table = ({columns, offset, limit, total, sortBy, onChange, ...props}) => (
+  <div styleName="smart-table">
+    <div styleName="table-wrap">
+      <ReactTable
+        tableClassName={styles.table}
+        theadClassName={styles.thead}
+        tbodyClassName={styles.tbody}
+        trClassName={styles.tr}
+        showPageJump={false}
+        showPageSizeOptions={false}
+        showPagination={false}
+        loading={false}
+        pages={Math.ceil(total / limit)}
+        pageSize={limit}
+        minRows={0}
+        manual
+        column={{
+          sortable: false,
+        }}
+        sorting={prepareSorting(sortBy)}
+        thComponent={(prop) => <ThComponent {...{...prop, onChange}} />}
+        columns={prepareColumns(columns)}
+        {...props}
+      />
+    </div>
+
+    <div styleName="navigation">
+      <div styleName="perpage">
+        <SelectPerPage
+          value={limit}
+          onChange={({value}) => {
+            // adjust page number (offset) when change per page quantity (limit)
+            const newOffset = Math.floor(offset / value);
+            onChange({limit: value, offset: newOffset});
+          }}
+        />
+      </div>
+      <div styleName="pagination">
+        <Pagination
+          forcePage={Math.ceil(offset / limit)}
+          pageCount={Math.ceil(total / limit)}
+          onPageChange={({selected}) => {
+            onChange({offset: Math.ceil(selected * limit)});
+          }}
+        />
+      </div>
+    </div>
+
+  </div>
+);
+
+Table.propTypes = {
+  columns: PropTypes.array.isRequired,
+  offset: PropTypes.number.isRequired,
+  limit: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired,
+  sortBy: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default CSSModules(Table, styles);
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
new file mode 100644
index 0000000..32fe60a
--- /dev/null
+++ b/src/components/Table/Table.scss
@@ -0,0 +1,101 @@
+.smart-table {
+  background-color: transparent;
+}
+
+.table-wrap {
+  :global {
+    .-loading {
+      display: none;
+    }
+
+    .-padRow {
+      display: none;
+    }
+  }
+}
+
+.table {
+  width: 100%;
+}
+
+.thead {
+  background-color: #1e526c;
+
+  th {
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 14px 27px 16px;
+    text-align: left;
+  }
+
+  :global {
+    th.-cursor-pointer {
+      > div {
+        cursor: pointer;
+
+        &:after {
+          background: url('../../styles/img/icon-sort-desc.png') no-repeat;
+          content: '';
+          display: inline-block;
+          opacity: 0.5;
+          height: 7px;
+          margin-left: 8px;
+          transform: rotate(180deg);
+          width: 11px;
+        }
+      }
+    }
+
+    th.-sort-asc,
+    th.-sort-desc {
+      > div {
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+
+    th.-sort-desc {
+      > div {
+        &:after {
+          transform: none;
+        }
+      }
+    }
+  }
+}
+
+.tbody {
+  td {
+    font-size: 14px;
+    padding: 12px 23px;
+    white-space: nowrap;
+
+    > a {
+      color: #3b73b9;
+    }
+  }
+}
+
+.tr {
+  border-bottom: 1px solid #e7e8ea;
+}
+
+.navigation {
+  margin: 25px 20px;
+}
+
+.navigation:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.pagination {
+  float: right;
+}
+
+.perpage {
+  float: left;
+}
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
new file mode 100644
index 0000000..de4c7d5
--- /dev/null
+++ b/src/components/Table/index.js
@@ -0,0 +1,3 @@
+import Table from './Table';
+
+export default Table;
diff --git a/src/components/TextareaField/TextareaField.jsx b/src/components/TextareaField/TextareaField.jsx
index 1d42974..9367b63 100644
--- a/src/components/TextareaField/TextareaField.jsx
+++ b/src/components/TextareaField/TextareaField.jsx
@@ -1,16 +1,24 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import _ from 'lodash';
+import cn from 'classnames';
 import styles from './TextareaField.scss';
 
-export const TextareaField = (props) => (
-  <div styleName="text-field">
-    <textarea {..._.pick(props, 'type', 'value', 'onChange')} />
+export const TextareaField = ({size, ...props}) => (
+  <div styleName={cn('textarea-field', `readonly-${props.readOnly}`)}>
+    <textarea {..._.pick(props, 'type', 'value', 'onChange', 'id', 'readOnly')} styleName={cn(`size-${size}`)} />
   </div>
 );
 
+TextareaField.propTypes = {
+  size: PropTypes.string,
+  readOnly: PropTypes.bool,
+};
+
 TextareaField.defaultProps = {
   type: 'text',
+  size: 'big',
+  readOnly: false,
 };
 
-export default CSSModules(TextareaField, styles);
+export default CSSModules(TextareaField, styles, {allowMultiple: true});
diff --git a/src/components/TextareaField/TextareaField.scss b/src/components/TextareaField/TextareaField.scss
index aabbe17..4d0a15e 100644
--- a/src/components/TextareaField/TextareaField.scss
+++ b/src/components/TextareaField/TextareaField.scss
@@ -1,14 +1,34 @@
-.text-field {
-  width: 100%;
+.textarea-field {
   border: 1px solid #ebebeb;
-  
+  width: 100%;
+
   textarea {
+    display: block;
     width: 100%;
     padding: 10px;
     resize: none;
-    background: white;
+    background: transparent;
     color: black;
     border: none;
-    min-height: 265px;
+
+    &.size-big {
+      min-height: 265px;
+    }
+
+    &.size-small {
+      min-height: 50px;
+    }
+  }
+}
+
+.readonly-false {
+  background-color: #fff;
+}
+
+.readonly-true {
+  background-color: #efefef;
+
+  textarea {
+    outline: none;
   }
 }
diff --git a/src/containers/HeaderContainer.js b/src/containers/HeaderContainer.js
index 99ad526..cf21b26 100644
--- a/src/containers/HeaderContainer.js
+++ b/src/containers/HeaderContainer.js
@@ -1,6 +1,6 @@
 import Header from 'components/Header';
 import {asyncConnect} from 'redux-connect';
-import {actions, toggleNotification, loginAction, logoutAction, logout} from '../store/modules/global';
+import {actions, logoutAction, logout} from '../store/modules/global';
 
 const resolve = [{
   promise: () => Promise.resolve(),
@@ -8,12 +8,5 @@ const resolve = [{
 
 const mapState = (state) => ({...state.global, doLogout: logout});
 
-const mapDispatchToProps = (dispatch) => ({
-  handleNotification: (value) => {
-    dispatch(toggleNotification(value));
-  },
-  handleLogin: (userObj) => dispatch(loginAction(userObj)),
-});
-
 export default asyncConnect(resolve, mapState, {...actions, logoutAction})(Header);
 
diff --git a/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.jsx b/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.jsx
index 921af67..e16106d 100644
--- a/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.jsx
+++ b/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.jsx
@@ -2,9 +2,11 @@ import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import moment from 'moment';
 import Pagination from 'components/Pagination';
+import SelectPerPage from 'components/SelectPerPage';
 import Tabs from 'components/Tabs';
 import StatusIcon from 'components/StatusIcon';
 import styles from './DashboardRequest.scss';
+import _ from 'lodash';
 
 const tabList = [{
   name: 'New Request',
@@ -12,7 +14,7 @@ const tabList = [{
   name: 'Today\'s Mission',
 }];
 
-export const DashboardRequest = ({activeTab, dashboardRequests}) => (
+export const DashboardRequest = ({activeTab, dashboardRequests, limit, offset}) => (
   <div styleName="dashboard-request">
     <div styleName="tab-container">
       <Tabs activeTab={activeTab || 0} tabList={tabList} />
@@ -45,15 +47,31 @@ export const DashboardRequest = ({activeTab, dashboardRequests}) => (
         </tbody>
       </table>
     </div>
-    <div styleName="pagination-container">
-      <Pagination pages={4} activePageIndex={0} />
+
+    <div styleName="navigation">
+      <div styleName="perpage">
+        <SelectPerPage
+          value={limit}
+          onChange={_.noop}
+        />
+      </div>
+      <div styleName="pagination">
+        <Pagination
+          forcePage={Math.ceil(offset / limit)}
+          pageCount={Math.ceil(dashboardRequests.length / limit)}
+          onPageChange={_.noop}
+        />
+      </div>
     </div>
+
   </div>
 );
 
 DashboardRequest.propTypes = {
   activeTab: PropTypes.number,
   dashboardRequests: PropTypes.array,
+  limit: PropTypes.number,
+  offset: PropTypes.number,
 };
 
 export default CSSModules(DashboardRequest, styles);
diff --git a/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.scss b/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.scss
index d0d78b9..376ab2e 100644
--- a/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.scss
+++ b/src/routes/Dashboard/components/DashboardRequest/DashboardRequest.scss
@@ -49,7 +49,7 @@
                         max-width: 183px;
                     }
                 }
-                
+
                 tr:last-child {
                     border-bottom: 0;
                 }
@@ -58,9 +58,22 @@
             }
         }
     }
+}
 
-    .pagination-container {
-        width: 100%;
-        padding: 20px 70px 30px 30px;
-    }
+.navigation {
+  margin: 25px 20px;
+}
+
+.navigation:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.pagination {
+  float: right;
+}
+
+.perpage {
+  float: left;
 }
diff --git a/src/routes/Dashboard/components/DashboardView.jsx b/src/routes/Dashboard/components/DashboardView.jsx
index 0750f03..0da3474 100644
--- a/src/routes/Dashboard/components/DashboardView.jsx
+++ b/src/routes/Dashboard/components/DashboardView.jsx
@@ -5,7 +5,7 @@ import DashboardStatus from '../components/DashboardStatus';
 import DashboardRequest from '../components/DashboardRequest';
 import NotificationBox from '../components/NotificationBox';
 
-export const DashboardView = ({latestNotifications, recentExecutedRequests, dashboardStatus, dashboardRequests}) => (
+export const DashboardView = ({latestNotifications, recentExecutedRequests, dashboardStatus, dashboardRequests, limit, offset}) => (
   <div styleName="dashboard-view">
     <h2>Dashboard</h2>
     <div>
@@ -13,7 +13,7 @@ export const DashboardView = ({latestNotifications, recentExecutedRequests, dash
     </div>
     <div styleName="content">
       <div styleName="left-col">
-        <DashboardRequest dashboardRequests={dashboardRequests} />
+        <DashboardRequest dashboardRequests={dashboardRequests} limit={limit} offset={offset} />
       </div>
       <div styleName="right-col">
         <NotificationBox notificationType="Latest Notifications" messages={latestNotifications} />
@@ -28,6 +28,8 @@ DashboardView.propTypes = {
   recentExecutedRequests: PropTypes.array.isRequired,
   dashboardRequests: PropTypes.array.isRequired,
   dashboardStatus: PropTypes.object.isRequired,
+  limit: PropTypes.number.isRequired,
+  offset: PropTypes.number.isRequired,
 };
 
 export default CSSModules(DashboardView, styles);
diff --git a/src/routes/Dashboard/modules/Dashboard.js b/src/routes/Dashboard/modules/Dashboard.js
index de0f583..38ed4f9 100644
--- a/src/routes/Dashboard/modules/Dashboard.js
+++ b/src/routes/Dashboard/modules/Dashboard.js
@@ -21,6 +21,8 @@ export const actions = {
 // ------------------------------------
 export default handleActions({
 }, {
+  limit: 10,
+  offset: 0,
   dashboardRequests: [{
     id: '03450',
     deliveryDate: '2016-12-01T12:59:16.714Z',
diff --git a/src/routes/DronesMap/components/DronesMapView.jsx b/src/routes/DronesMap/components/DronesMapView.jsx
index 0ac1b90..ce560b9 100644
--- a/src/routes/DronesMap/components/DronesMapView.jsx
+++ b/src/routes/DronesMap/components/DronesMapView.jsx
@@ -31,7 +31,7 @@ class DronesMapView extends React.Component {
   constructor(props) {
     super(props);
 
-	// google maps objects for no fly zones
+  // google maps objects for no fly zones
     this.nfzElements = [];
     this.showHistory = this.showHistory.bind(this);
     this.hideHistory = this.hideHistory.bind(this);
diff --git a/src/routes/Home/components/SignupModal/SignupModal.jsx b/src/routes/Home/components/SignupModal/SignupModal.jsx
index 2da442a..df0cbf3 100644
--- a/src/routes/Home/components/SignupModal/SignupModal.jsx
+++ b/src/routes/Home/components/SignupModal/SignupModal.jsx
@@ -3,7 +3,6 @@ import CSSModules from 'react-css-modules';
 import {reduxForm} from 'redux-form';
 import cn from 'classnames';
 import Modal from 'react-modal';
-import Select from 'components/Select';
 import Button from 'components/Button';
 import TextField from 'components/TextField';
 import styles from './SignupModal.scss';
diff --git a/src/routes/Home/containers/SignupModalContainer.js b/src/routes/Home/containers/SignupModalContainer.js
index 1ca05cf..8640ff9 100644
--- a/src/routes/Home/containers/SignupModalContainer.js
+++ b/src/routes/Home/containers/SignupModalContainer.js
@@ -3,7 +3,7 @@ import {sendSignupRequest, signupAction} from '../../../store/modules/global';
 
 import SignupModal from '../components/SignupModal';
 
-const mapState = (state) => ({...state.global, onSubmit: sendSignupRequest,});
+const mapState = (state) => ({...state.global, onSubmit: sendSignupRequest});
 
 const mapDispatchToProps = (dispatch) => ({
   handleSigned: (value) => dispatch(signupAction(value)),
diff --git a/src/routes/MissionList/components/MissionListView.jsx b/src/routes/MissionList/components/MissionListView.jsx
index 280e495..1a8fd7e 100644
--- a/src/routes/MissionList/components/MissionListView.jsx
+++ b/src/routes/MissionList/components/MissionListView.jsx
@@ -1,52 +1,69 @@
 import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import {Link} from 'react-router';
+import Table from 'components/Table';
 import styles from './MissionListView.scss';
 
-export const MissionListView = ({missions, deleteMission}) => (
-  <div styleName="mission-list-view">
-    <div styleName="wrap">
-      <div styleName="header">
-        <h1 styleName="title">Mission List</h1>
-        <Link to="/mission-planner" styleName="create-btn">Create New Mission</Link>
-      </div>
-      <div styleName="panel">
-        {missions.length ? (
-          <table styleName="my-request-table">
-            <thead styleName="thead">
-              <tr>
-                <th styleName="th">Mission Name</th>
-                <th styleName="th" />
-                <th styleName="th" />
-                <th styleName="th" />
-              </tr>
-            </thead>
-            <tbody>
-              {missions.map((mission) => (
-                <tr styleName="tr" key={mission.id}>
-                  <td styleName="td">{mission.missionName}</td>
-                  <td styleName="td"><Link to={`/mission-planner/${mission.id}`}>Edit</Link></td>
-                  <td styleName="td"><a href={mission.downloadLink} target="_blank" rel="noopener noreferrer">Download</a></td>
-                  <td styleName="td"><a
-                    href="#" onClick={(event) => {
-                      event.preventDefault();
-                      deleteMission(mission.id);
-                    }}
-                  >Delete</a></td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        ) : (
-          <span>No missions found.</span>
-        )}
+export const MissionListView = ({missions, offset, limit, total, load, deleteMission}) => {
+  const columns = [{
+    header: 'Mission Name',
+    accessor: 'missionName',
+  }, {
+    id: 'edit',
+    header: '',
+    render: (prop) => <Link to={`/mission-planner/${prop.row.id}`}>Edit</Link>, // eslint-disable-line react/display-name
+  }, {
+    id: 'download',
+    header: '',
+    render: (prop) => <a href={prop.row.downloadLink} target="_blank" rel="noopener noreferrer">Download</a>, // eslint-disable-line react/display-name
+  }, {
+    id: 'delete',
+    header: '',
+    render: (prop) => (  // eslint-disable-line react/display-name
+      <a
+        href="#"
+        onClick={(event) => {
+          event.preventDefault();
+          deleteMission(prop.row.id);
+        }}
+      >
+        Delete
+      </a>
+    ),
+  }];
+
+  return (
+    <div styleName="mission-list-view">
+      <div styleName="wrap">
+        <div styleName="header">
+          <h1 styleName="title">Mission List</h1>
+          <Link to="/mission-planner" styleName="create-btn">Create New Mission</Link>
+        </div>
+        <div styleName="panel">
+          {missions.length ? (
+            <Table
+              columns={columns}
+              data={missions}
+              offset={offset}
+              limit={limit}
+              total={total}
+              onChange={load}
+            />
+          ) : (
+            <div>No missions found.</div>
+          )}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 MissionListView.propTypes = {
   missions: PropTypes.array.isRequired,
+  load: PropTypes.func.isRequired,
+  offset: PropTypes.number.isRequired,
+  limit: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired,
   deleteMission: PropTypes.func.isRequired,
 };
 
diff --git a/src/routes/MissionList/components/MissionListView.scss b/src/routes/MissionList/components/MissionListView.scss
index 473ffc5..889e3a6 100644
--- a/src/routes/MissionList/components/MissionListView.scss
+++ b/src/routes/MissionList/components/MissionListView.scss
@@ -32,40 +32,6 @@
   padding: 19px 24px;
 }
 
-.my-request-table {
-  width: 100%;
-}
-
-.thead {
-  background-color: #1e526c;
-}
-
-.th {
-  color: #fff;
-  font-size: 14px;
-  font-weight: 400;
-  padding: 14px 27px 16px;
-  text-align: left;
-}
-
-.tr {
-  border-top: 1px solid #e7e8ea;
-
-  &:first-child {
-    border-top: 0;
-  }
-}
-
-.td {
-  font-size: 14px;
-  padding: 12px 23px;
-  white-space: nowrap;
-
-  > a {
-    color: #3b73b9;
-  }
-}
-
 .create-btn {
   background: #315b95;
   border: none;
@@ -80,3 +46,7 @@
     color: #fff;
   }
 }
+
+.table-hidden {
+  display: none;
+}
diff --git a/src/routes/MissionList/modules/MissionList.js b/src/routes/MissionList/modules/MissionList.js
index 3e594be..d7e47fb 100644
--- a/src/routes/MissionList/modules/MissionList.js
+++ b/src/routes/MissionList/modules/MissionList.js
@@ -1,25 +1,29 @@
 import {handleActions} from 'redux-actions';
 import _ from 'lodash';
 import APIService from 'services/APIService';
+import {toastr} from 'react-redux-toastr';
 
 // ------------------------------------
 // Constants
 // ------------------------------------
 export const LOADED = 'MissionList/LOADED';
-export const DELETE_MISSION = 'MissionList/DELETE_MISSION';
 
 // ------------------------------------
 // Actions
 // ------------------------------------
-export const load = () => async(dispatch) => {
-  const missions = await APIService.fetchMissionList();
-  dispatch({type: LOADED, payload: {missions}});
+export const load = (params) => async(dispatch, getState) => {
+  const allParams = {..._.pick(getState().missionList, ['offset', 'limit']), ...params};
+
+  const respond = await APIService.fetchMissionList(allParams);
+
+  dispatch({type: LOADED, payload: {missions: respond.items, total: respond.total, ...params}});
 };
 
 export const deleteMission = (id) => async(dispatch) => {
   await APIService.deleteMission(id);
+  toastr.success('Mission deleted');
 
-  dispatch({type: DELETE_MISSION, payload: {missionId: id}});
+  dispatch(load());
 };
 
 export const actions = {
@@ -31,14 +35,10 @@ export const actions = {
 // Reducer
 // ------------------------------------
 export default handleActions({
-  [LOADED]: (state, {payload: {missions}}) => ({...state, missions}),
-  [DELETE_MISSION]: (state, {payload: {missionId}}) => {
-    const newState = _.cloneDeep(state);
-
-    newState.missions = newState.missions.filter((mission) => mission.id !== missionId);
-
-    return newState;
-  },
+  [LOADED]: (state, {payload}) => ({...state, ...payload}),
 }, {
+  offset: 0,
+  limit: 10,
+  total: 0,
   missions: [],
 });
diff --git a/src/routes/MyRequest/components/MyRequestView.jsx b/src/routes/MyRequest/components/MyRequestView.jsx
index 766a63d..a971b3a 100644
--- a/src/routes/MyRequest/components/MyRequestView.jsx
+++ b/src/routes/MyRequest/components/MyRequestView.jsx
@@ -2,9 +2,11 @@ import React, {PropTypes} from 'react';
 import CSSModules from 'react-css-modules';
 import Tabs from 'components/Tabs';
 import Pagination from 'components/Pagination';
+import SelectPerPage from 'components/SelectPerPage';
 import styles from './MyRequestView.scss';
 import MyRequestFilter from './MyRequestFilter';
 import MyRequestItemsContainer from '../containers/MyRequestItemsContainer';
+import _ from 'lodash';
 
 const tabList = [{
   name: 'New/Pending (5)',
@@ -16,7 +18,7 @@ const tabList = [{
   name: 'Completed (3)',
 }];
 
-export const MyRequestView = ({activeTab}) => (
+export const MyRequestView = ({activeTab, requestItems, limit, offset}) => (
   <div styleName="my-request-view">
     <h2>Requests</h2>
     <div styleName="content">
@@ -35,15 +37,32 @@ export const MyRequestView = ({activeTab}) => (
         }}
       />
       <MyRequestItemsContainer />
-      <div styleName="pagination-container">
-        <Pagination pages={4} activePageIndex={0} />
+
+      <div styleName="navigation">
+        <div styleName="perpage">
+          <SelectPerPage
+            value={limit}
+            onChange={_.noop}
+          />
+        </div>
+        <div styleName="pagination">
+          <Pagination
+            forcePage={Math.ceil(offset / limit)}
+            pageCount={Math.ceil(requestItems.length / limit)}
+            onPageChange={_.noop}
+          />
+        </div>
       </div>
+
     </div>
   </div>
 );
 
 MyRequestView.propTypes = {
   activeTab: PropTypes.number,
+  requestItems: PropTypes.array.isRequired,
+  limit: PropTypes.number.isRequired,
+  offset: PropTypes.number.isRequired,
 };
 
 export default CSSModules(MyRequestView, styles);
diff --git a/src/routes/MyRequest/components/MyRequestView.scss b/src/routes/MyRequest/components/MyRequestView.scss
index bf02f33..69e68e2 100644
--- a/src/routes/MyRequest/components/MyRequestView.scss
+++ b/src/routes/MyRequest/components/MyRequestView.scss
@@ -48,3 +48,20 @@
 
 }
 
+.navigation {
+  margin: 25px 20px;
+}
+
+.navigation:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.pagination {
+  float: right;
+}
+
+.perpage {
+  float: left;
+}
diff --git a/src/routes/MyRequest/modules/MyRequest.js b/src/routes/MyRequest/modules/MyRequest.js
index e178900..eb3ddb8 100644
--- a/src/routes/MyRequest/modules/MyRequest.js
+++ b/src/routes/MyRequest/modules/MyRequest.js
@@ -21,6 +21,8 @@ export const actions = {
 // ------------------------------------
 export default handleActions({
 }, {
+  limit: 10,
+  offset: 0,
   requestItems: [{
     status: 'new',
     requestId: '123ASDD',
diff --git a/src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.jsx b/src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.jsx
new file mode 100644
index 0000000..ec821f8
--- /dev/null
+++ b/src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.jsx
@@ -0,0 +1,100 @@
+import React, {PropTypes, Component} from 'react';
+import {reduxForm} from 'redux-form';
+import Button from 'components/Button';
+import Radiobox from 'components/Radiobox';
+import TextareaField from 'components/TextareaField';
+import CSSModules from 'react-css-modules';
+import styles from './PilotChecklistForm.scss';
+import _ from 'lodash';
+
+export class PilotChecklistForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onButtonClick = this.onButtonClick.bind(this);
+    PilotChecklistForm.pressedButton = null;
+  }
+
+  onButtonClick(name) {
+    PilotChecklistForm.pressedButton = name;
+    this.props.handleSubmit((values) => this.props.save({...values, pressedButton: name}))();
+  }
+
+  render() {
+    const {questions, fields, missionStatus} = this.props;
+    const isReadonly = _.includes(['completed', 'in-progress'], missionStatus);
+    const hasErrors = _.find(fields.answers, (answerRow) => answerRow.answer.error || answerRow.note.error);
+
+    return (
+      <form styleName="pilot-checklist-form">
+        <div>
+          {fields.answers.map((answerRow, index) => (
+            <div key={questions[index].id} styleName="question">
+              <h4>{questions[index].text}</h4>
+              <div styleName="radioboxes">
+                <div styleName="radiobox"><Radiobox {...answerRow.answer} radioValue="yes" disabled={isReadonly}>Yes</Radiobox></div>
+                <div styleName="radiobox"><Radiobox {...answerRow.answer} radioValue="no" disabled={isReadonly}>No</Radiobox></div>
+                <div styleName="radiobox"><Radiobox {...answerRow.answer} radioValue="note" disabled={isReadonly}>No, but proceed with caution</Radiobox></div>
+                {answerRow.answer.error && <div styleName="error">{answerRow.answer.error}</div>}
+              </div>
+              <div styleName="note">
+                <div styleName="note-label-wrap">
+                  <label htmlFor={answerRow.note.name} styleName="note-label">Note:</label>
+                  {answerRow.note.error && <div styleName="error">{answerRow.note.error}</div>}
+                </div>
+                <TextareaField id={answerRow.note.name} size="small" {...answerRow.note} readOnly={isReadonly} />
+              </div>
+            </div>
+          ))}
+        </div>
+        {!isReadonly && <div styleName="actions">
+          <div styleName="global-error">{hasErrors && <div styleName="error">To load mission, answers to all the questions has to be &quot;Yes&quot;, or &quot;No, but proceed with caution&quot; with provided &quot;Note&quot;</div>}</div>
+          <Button color="gray" onClick={() => this.onButtonClick('save')}>Save</Button>
+          <Button onClick={() => this.onButtonClick('saveload')}>Save and load mission</Button>
+        </div>}
+      </form>
+    );
+  }
+}
+
+PilotChecklistForm.propTypes = {
+  questions: PropTypes.array.isRequired,
+  fields: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  missionStatus: PropTypes.string.isRequired,
+  save: PropTypes.func.isRequired,
+};
+
+const fields = [
+  'answers[].answer',
+  'answers[].note',
+];
+
+/**
+ * Validate function for redux form
+ * @param  {Object} values values to validate
+ * @return {Object}        errors
+ */
+const validate = (values) => {
+  const errors = {};
+
+  if (PilotChecklistForm.pressedButton === 'saveload') {
+    errors.answers = _.map(values.answers, (answerRow) => {
+      let err;
+
+      if (_.isNil(answerRow.answer)) {
+        err = {answer: 'Answer is required'};
+      } else if (answerRow.answer === 'no') {
+        err = {answer: 'Answer cannot be "No"'};
+      } else if (answerRow.answer === 'note' && (!_.isString(answerRow.note) || answerRow.note.trim() === '')) {
+        err = {note: 'You have to provide a "Note", when you chose "No, but proceed with caution"'};
+      }
+
+      return err;
+    });
+  }
+
+  return errors;
+};
+
+export default reduxForm({form: 'pilotChecklist', fields, validate})(CSSModules(PilotChecklistForm, styles));
diff --git a/src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.scss b/src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.scss
new file mode 100644
index 0000000..6272302
--- /dev/null
+++ b/src/routes/PilotChecklist/components/PilotChecklistForm/PilotChecklistForm.scss
@@ -0,0 +1,62 @@
+.pilot-checklist-form {
+  margin: 0 auto;
+  max-width: 1000px;
+}
+
+.question {
+  border-bottom: 1px solid #d5d5d5;
+  margin-bottom: 30px;
+  padding-bottom: 34px;
+
+  &:last-child {
+    border-bottom: 0;
+    margin-bottom: 0;
+  }
+}
+
+.radioboxes {
+  display: flex;
+}
+
+.radiobox {
+  margin-right: 50px;
+}
+
+.note {
+  margin-top: 10px;
+}
+
+.note-label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.actions {
+  border-top: 1px solid #d5d5d5;
+  padding-bottom: 30px;
+  text-align: right;
+
+  button {
+    margin-left: 12px;
+  }
+}
+
+.error {
+  color: #f00;
+  height: 40px;
+  line-height: 40px;
+}
+
+.note-label-wrap {
+  display: flex;
+
+  .error {
+    height: auto;
+    line-height: inherit;
+    margin-left: 30px;
+  }
+}
+
+.global-error {
+  height: 40px;
+}
diff --git a/src/routes/PilotChecklist/components/PilotChecklistForm/index.js b/src/routes/PilotChecklist/components/PilotChecklistForm/index.js
new file mode 100644
index 0000000..93af7bb
--- /dev/null
+++ b/src/routes/PilotChecklist/components/PilotChecklistForm/index.js
@@ -0,0 +1,3 @@
+import PilotChecklistForm from './PilotChecklistForm';
+
+export default PilotChecklistForm;
diff --git a/src/routes/PilotChecklist/components/PilotChecklistView.jsx b/src/routes/PilotChecklist/components/PilotChecklistView.jsx
new file mode 100644
index 0000000..e977a98
--- /dev/null
+++ b/src/routes/PilotChecklist/components/PilotChecklistView.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './PilotChecklistView.scss';
+import PilotChecklistForm from '../containers/PilotChecklistFormContainer';
+
+export const PilotChecklistView = () => (
+  <div styleName="pilot-checklist-view">
+    <div styleName="wrap">
+      <div styleName="header">
+        <h1 styleName="title">Flight Checklist</h1>
+      </div>
+      <div styleName="panel">
+        <PilotChecklistForm />
+      </div>
+    </div>
+  </div>
+);
+
+PilotChecklistView.propTypes = {
+};
+
+export default CSSModules(PilotChecklistView, styles);
diff --git a/src/routes/PilotChecklist/components/PilotChecklistView.scss b/src/routes/PilotChecklist/components/PilotChecklistView.scss
new file mode 100644
index 0000000..f9be2bd
--- /dev/null
+++ b/src/routes/PilotChecklist/components/PilotChecklistView.scss
@@ -0,0 +1,37 @@
+.pilot-checklist-view {
+  background-color: transparent;
+
+  :global {
+
+  }
+}
+
+.wrap {
+  padding: 0 30px 35px;
+}
+
+.header {
+  border-bottom: 1px solid #d5d5d5;
+  display: flex;
+  margin-bottom: 19px;
+  justify-content: space-between;
+  padding-bottom: 17px;
+  padding-top: 21px;
+  position: relative;
+}
+
+.title {
+  color: #333333;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  margin: 0;
+  padding: 0;
+}
+
+.panel {
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 3px;
+  padding: 19px 24px;
+}
diff --git a/src/routes/PilotChecklist/containers/PilotChecklistContainer.js b/src/routes/PilotChecklist/containers/PilotChecklistContainer.js
new file mode 100644
index 0000000..7b65831
--- /dev/null
+++ b/src/routes/PilotChecklist/containers/PilotChecklistContainer.js
@@ -0,0 +1,12 @@
+import {asyncConnect} from 'redux-connect';
+import {actions} from '../modules/PilotChecklist';
+
+import PilotChecklistView from '../components/PilotChecklistView';
+
+const resolve = [{
+  promise: ({store, params}) => store.dispatch(actions.load(params.id)),
+}];
+
+const mapState = (state) => state.pilotChecklist;
+
+export default asyncConnect(resolve, mapState, actions)(PilotChecklistView);
diff --git a/src/routes/PilotChecklist/containers/PilotChecklistFormContainer.js b/src/routes/PilotChecklist/containers/PilotChecklistFormContainer.js
new file mode 100644
index 0000000..cb1bae3
--- /dev/null
+++ b/src/routes/PilotChecklist/containers/PilotChecklistFormContainer.js
@@ -0,0 +1,33 @@
+import {connect} from 'react-redux';
+import {actions} from '../modules/PilotChecklist';
+import _ from 'lodash';
+
+import PilotChecklistForm from '../components/PilotChecklistForm';
+
+/**
+ * Create initial values for the checklist form
+ * it takes into account that we can have not all answers,
+ * but form requires full quantity of elements, so we create empty answers when need
+ *
+ * @param  {Array} questions list of all questions
+ * @param  {Array} answers)  list of answers, could be not for all questions
+ * @return {Object}          initialValues for the form
+ */
+const answersToInitialValues = (questions, answers) => ({
+  answers: _.map(questions, (question) => (
+    {
+      ...{answer: undefined, note: undefined}, // eslint-disable-line no-undefined
+      ..._.find(answers, {question: question.id}),
+    }
+  )),
+});
+
+const mapState = (state) => ({
+  questions: state.pilotChecklist.questions,
+  initialValues: answersToInitialValues(state.pilotChecklist.questions, state.pilotChecklist.answers),
+  missionStatus: state.pilotChecklist.missionStatus,
+});
+
+export default connect(mapState, {
+  save: actions.save,
+})(PilotChecklistForm);
diff --git a/src/routes/PilotChecklist/index.js b/src/routes/PilotChecklist/index.js
new file mode 100644
index 0000000..2a41508
--- /dev/null
+++ b/src/routes/PilotChecklist/index.js
@@ -0,0 +1,15 @@
+import {injectReducer} from '../../store/reducers';
+
+export default (store) => ({
+  name: 'Pilot Checklist',
+  path: 'pilot-checklist/:id',
+  getComponent(nextState, cb) {
+    require.ensure([], (require) => {
+      const PilotChecklist = require('./containers/PilotChecklistContainer').default;
+      const reducer = require('./modules/PilotChecklist').default;
+
+      injectReducer(store, {key: 'pilotChecklist', reducer});
+      cb(null, PilotChecklist);
+    }, 'PilotChecklist');
+  },
+});
diff --git a/src/routes/PilotChecklist/modules/PilotChecklist.js b/src/routes/PilotChecklist/modules/PilotChecklist.js
new file mode 100644
index 0000000..a9aace8
--- /dev/null
+++ b/src/routes/PilotChecklist/modules/PilotChecklist.js
@@ -0,0 +1,74 @@
+import {handleActions} from 'redux-actions';
+import APIService from 'services/APIService';
+import {toastr} from 'react-redux-toastr';
+import _ from 'lodash';
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const LOADED = 'PilotChecklist/LOADED';
+export const UPDATED = 'PilotChecklist/UPDATED';
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const load = (missionId) => async(dispatch) => {
+  const response = await APIService.getPilotChecklist(missionId);
+  const answers = response.pilotChecklist ? response.pilotChecklist.answers : [];
+
+  dispatch({type: LOADED, payload: {..._.pick(response, ['missionStatus', 'questions']), answers, missionId}});
+};
+
+export const save = (values) => async (dispatch, getState) => {
+  const questions = getState().pilotChecklist.questions;
+  // send to server only not empty answers and not empty answer properties
+  const notEmptyAnswers = [];
+  _.forEach(values.answers, (answerRow, index) => {
+    const notEmptyAnswer = {};
+    const hasAnswer = !!answerRow.answer;
+    const hasNote = _.isString(answerRow.note) && answerRow.note.trim() !== '';
+
+    if (hasAnswer || hasNote) {
+      hasAnswer && (notEmptyAnswer.answer = answerRow.answer);
+      hasNote && (notEmptyAnswer.note = answerRow.note);
+      // add question id to the answer
+      notEmptyAnswer.question = questions[index].id;
+      notEmptyAnswers.push(notEmptyAnswer);
+    }
+  });
+
+  const response = await APIService.updatePilotChecklist(getState().pilotChecklist.missionId, {
+    answers: notEmptyAnswers,
+    load: values.pressedButton === 'saveload',
+  });
+  dispatch({
+    type: UPDATED,
+    payload: {
+      missionStatus: response.missionStatus,
+      answers: response.pilotChecklist.answers,
+    },
+  });
+  if (values.pressedButton === 'saveload') {
+    toastr.success('Checklist saved and mission loaded');
+  } else {
+    toastr.success('Checklist saved');
+  }
+};
+
+export const actions = {
+  load,
+  save,
+};
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default handleActions({
+  [LOADED]: (state, {payload}) => ({...state, ...payload}),
+  [UPDATED]: (state, {payload}) => ({...state, ...payload}),
+}, {
+  missionId: '',
+  missionStatus: '',
+  questions: [],
+  answers: [],
+});
diff --git a/src/routes/PilotMissions/components/PilotMissionsView.jsx b/src/routes/PilotMissions/components/PilotMissionsView.jsx
new file mode 100644
index 0000000..32a5329
--- /dev/null
+++ b/src/routes/PilotMissions/components/PilotMissionsView.jsx
@@ -0,0 +1,54 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import {Link} from 'react-router';
+import StatusLabel from 'components/StatusLabel';
+import Table from 'components/Table';
+import styles from './PilotMissionsView.scss';
+
+const columns = [{
+  header: 'Mission Name',
+  accessor: 'missionName',
+  render: (prop) => <Link to={`/pilot-checklist/${prop.row.id}`}>{prop.value}</Link>, // eslint-disable-line react/display-name
+  sortable: true,
+}, {
+  header: 'Status',
+  accessor: 'status',
+  render: (prop) => <StatusLabel value={prop.value} />, // eslint-disable-line react/display-name
+  sortable: true,
+}];
+
+export const PilotMissionsView = ({missions, load, offset, limit, total, sortBy}) => (
+  <div styleName="pilot-missions-view">
+    <div styleName="wrap">
+      <div styleName="header">
+        <h1 styleName="title">Pilot Missions</h1>
+      </div>
+      <div styleName="panel">
+        {missions.length ? (
+          <Table
+            columns={columns}
+            data={missions}
+            offset={offset}
+            limit={limit}
+            total={total}
+            sortBy={sortBy}
+            onChange={load}
+          />
+        ) : (
+          <div>No missions found.</div>
+        )}
+      </div>
+    </div>
+  </div>
+);
+
+PilotMissionsView.propTypes = {
+  missions: PropTypes.array.isRequired,
+  load: PropTypes.func.isRequired,
+  offset: PropTypes.number.isRequired,
+  limit: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired,
+  sortBy: PropTypes.string.isRequired,
+};
+
+export default CSSModules(PilotMissionsView, styles);
diff --git a/src/routes/PilotMissions/components/PilotMissionsView.scss b/src/routes/PilotMissions/components/PilotMissionsView.scss
new file mode 100644
index 0000000..52c6656
--- /dev/null
+++ b/src/routes/PilotMissions/components/PilotMissionsView.scss
@@ -0,0 +1,52 @@
+.pilot-missions-view {
+  background-color: transparent;
+
+  :global {
+
+  }
+}
+
+.wrap {
+  padding: 0 30px 35px;
+}
+
+.header {
+  border-bottom: 1px solid #d5d5d5;
+  display: flex;
+  margin-bottom: 19px;
+  justify-content: space-between;
+  padding-bottom: 17px;
+  padding-top: 21px;
+  position: relative;
+}
+
+.title {
+  color: #333333;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  margin: 0;
+  padding: 0;
+}
+
+.panel {
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 3px;
+  padding: 19px 24px;
+}
+
+.create-btn {
+  background: #315b95;
+  border: none;
+  color: white;
+  display: inline-block;
+  font-weight: bold;
+  min-width: 115px;
+  margin-left: 10px;
+  padding: 13px 10px;
+
+  &:hover {
+    color: #fff;
+  }
+}
diff --git a/src/routes/PilotMissions/containers/PilotMissionsContainer.js b/src/routes/PilotMissions/containers/PilotMissionsContainer.js
new file mode 100644
index 0000000..4fb6f8a
--- /dev/null
+++ b/src/routes/PilotMissions/containers/PilotMissionsContainer.js
@@ -0,0 +1,12 @@
+import {asyncConnect} from 'redux-connect';
+import {actions} from '../modules/PilotMissions';
+
+import PilotMissionsView from '../components/PilotMissionsView';
+
+const resolve = [{
+  promise: ({store}) => store.dispatch(actions.load()),
+}];
+
+const mapState = (state) => ({...state.pilotMissions});
+
+export default asyncConnect(resolve, mapState, actions)(PilotMissionsView);
diff --git a/src/routes/PilotMissions/index.js b/src/routes/PilotMissions/index.js
new file mode 100644
index 0000000..0da6e08
--- /dev/null
+++ b/src/routes/PilotMissions/index.js
@@ -0,0 +1,15 @@
+import {injectReducer} from '../../store/reducers';
+
+export default (store) => ({
+  name: 'Pilot Missions',
+  path: 'pilot-missions',
+  getComponent(nextState, cb) {
+    require.ensure([], (require) => {
+      const PilotMissions = require('./containers/PilotMissionsContainer').default;
+      const reducer = require('./modules/PilotMissions').default;
+
+      injectReducer(store, {key: 'pilotMissions', reducer});
+      cb(null, PilotMissions);
+    }, 'PilotMissions');
+  },
+});
diff --git a/src/routes/PilotMissions/modules/PilotMissions.js b/src/routes/PilotMissions/modules/PilotMissions.js
new file mode 100644
index 0000000..0f651b5
--- /dev/null
+++ b/src/routes/PilotMissions/modules/PilotMissions.js
@@ -0,0 +1,39 @@
+import {handleActions} from 'redux-actions';
+import APIService from 'services/APIService';
+import _ from 'lodash';
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const LOADED = 'PilotMissions/LOADED';
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export const load = (params) => async(dispatch, getState) => {
+  const allParams = {..._.pick(getState().pilotMissions, ['offset', 'limit', 'sortBy']), ...params};
+  if (!allParams.sortBy) {
+    delete allParams.sortBy;
+  }
+
+  const respond = await APIService.fetchPilotMissions(allParams);
+
+  dispatch({type: LOADED, payload: {missions: respond.items, total: respond.total, ...params}});
+};
+
+export const actions = {
+  load,
+};
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default handleActions({
+  [LOADED]: (state, {payload}) => ({...state, ...payload}),
+}, {
+  offset: 0,
+  limit: 10,
+  total: 0,
+  sortBy: 'missionName',
+  missions: [],
+});
diff --git a/src/routes/index.js b/src/routes/index.js
index 0d9e590..43976b7 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -23,6 +23,8 @@ import AdminDashboard from './Admin/AdminDashboard';
 import NoFlyZones from './Admin/NoFlyZones';
 import ProviderDetailsRoute from './ProviderDetails';
 import ResetPasswordRoute from './ResetPassword';
+import PilotMissionsRoute from './PilotMissions';
+import PilotChecklistRoute from './PilotChecklist';
 import {defaultAuth0Service} from '../services/AuthService';
 
 export const createRoutes = (store) => ({
@@ -69,6 +71,8 @@ export const createRoutes = (store) => ({
         DroneDetailsRoute(store),
         AvailablePackagesRoute(store),
         ProviderDetailsRoute(store),
+        PilotMissionsRoute(store),
+        PilotChecklistRoute(store),
       ],
     },
     ResetPasswordRoute(store),
diff --git a/src/services/APIService.js b/src/services/APIService.js
index 0be05bb..aca20be 100644
--- a/src/services/APIService.js
+++ b/src/services/APIService.js
@@ -453,39 +453,7 @@ const statusDetail = {
   },
 };
 
-/*
-  As there is no Authorization implemented in the project.
-  Here I've hardcoded automatic registering and authorization of a dumb user to make requests to the server.
-  This should be removed when real authorizatin is implemented.
- */
-const testUser = {
-  firstName: 'test',
-  lastName: 'test',
-  email: 'kj2h34jh23424h2l34h324ljh1@khj4k234hl234hjl.com',
-  phone: '42',
-  password: 'qwerty',
-};
-
-const register = () => request
-  .post(`${config.api.basePath}/api/v1/register`)
-  .send(testUser)
-  .set('Content-Type', 'application/json')
-  .end();
-
-const authorize = () => request
-  .post(`${config.api.basePath}/api/v1/login`)
-  .set('Content-Type', 'application/json')
-  .send(_.pick(testUser, 'email', 'password'))
-  .end();
-
-const regAndAuth = () => authorize().then(
-  authorize,
-  () => register().then(authorize),
-);
-
 export default class APIService {
-
-
   static fetchMyRequestStatus(filterByStatus) {
     return (new Promise((resolve) => {
       resolve();
@@ -502,17 +470,20 @@ export default class APIService {
     })).then(() => statusDetail[id]);
   }
 
-  static fetchMissionList() {
+  static fetchMissionList(params) {
     const token = this.accessToken;
     return request
       .get(`${config.api.basePath}/api/v1/missions`)
       .set('Authorization', `Bearer ${this.accessToken}`)
-      .send()
+      .query(params)
       .end()
-      .then((res) => res.body.items.map((item) => ({
-        ...item,
-        downloadLink: `${config.api.basePath}/api/v1/missions/${item.id}/download?token=${token}`,
-      })));
+      .then((res) => ({
+        total: res.body.total,
+        items: res.body.items.map((item) => ({
+          ...item,
+          downloadLink: `${config.api.basePath}/api/v1/missions/${item.id}/download?token=${token}`,
+        })),
+      }));
   }
 
   static getMission(id) {
@@ -649,4 +620,46 @@ export default class APIService {
       .send(entity)
       .end();
   }
+
+  /**
+   * Get pilot checklist by mission id
+   * @param  {String}   id    mission id
+   */
+  static getPilotChecklist(id) {
+    return request
+      .get(`${config.api.basePath}/api/v1/pilot/checklist/${id}/`)
+      .set('Authorization', `Bearer ${this.accessToken}`)
+      .end()
+      .then((res) => res.body);
+  }
+
+  /**
+   * Update pilot checklist by mission id
+   * @param  {String}   id          mission id
+   * @param  {Object}   checklist   checklist object
+   */
+  static updatePilotChecklist(id, checklist) {
+    return request
+      .put(`${config.api.basePath}/api/v1/pilot/checklist/${id}/`)
+      .set('Authorization', `Bearer ${this.accessToken}`)
+      .send(checklist)
+      .end()
+      .then((res) => res.body);
+  }
+
+  /**
+   * Fetch pilot missions
+   * @param  {Object}   params          params
+   * @param  {Number}   params.limit    the limit
+   * @param  {Number}   params.offset   the offset
+   * @param  {String}   params.sortBy   sort by property name
+   */
+  static fetchPilotMissions(params) {
+    return request
+      .get(`${config.api.basePath}/api/v1/pilot/missions`)
+      .set('Authorization', `Bearer ${this.accessToken}`)
+      .query(params)
+      .end()
+      .then((res) => res.body);
+  }
 }
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
index e9c70e9..73346eb 100644
--- a/src/services/AuthService.js
+++ b/src/services/AuthService.js
@@ -12,7 +12,6 @@
 import Auth0 from 'auth0-js';
 import config from '../config';
 import UserApi from '../api/User';
-import _ from 'lodash';
 
 
 const userApi = new UserApi(config.api.basePath);
@@ -71,8 +70,8 @@ class AuthService {
           throw error;
         } else {
           userApi.registerSocialUser(profile.name, profile.email, _self.getToken()).then(
-            (authResult) => {
-              localStorage.setItem('userInfo', JSON.stringify(authResult));
+            (authRes) => {
+              localStorage.setItem('userInfo', JSON.stringify(authRes));
             }).catch((reason) => {
             // remove the id token
               _self.removeToken();
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index 14a4798..fc49438 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -2,12 +2,18 @@ import {handleActions, createAction} from 'redux-actions';
 import {browserHistory} from 'react-router';
 import UserApi from 'api/User.js';
 import config from '../../config';
-
 import APIService from 'services/APIService';
+import _ from 'lodash';
+
 const userApi = new UserApi(config.api.basePath);
 
 const userInfoKey = 'userInfo';
 
+let isLogged = false;
+let hasError = false;
+let errorText = '';
+let userInfo = {};
+
 function loadUserInfo() {
   userInfo = localStorage.getItem(userInfoKey);
   if (userInfo) {
@@ -20,11 +26,6 @@ function loadUserInfo() {
 // ------------------------------------
 // Actions
 // ------------------------------------
-let isLogged = false;
-let hasError = false;
-let errorText = '';
-let userInfo = {};
-
 export const sendLoginRequest = (values) => new Promise((resolve) => {
   userApi.login(values.email, values.password).then((authResult) => {
     isLogged = true;
@@ -38,7 +39,7 @@ export const sendLoginRequest = (values) => new Promise((resolve) => {
     } else if (authResult.user.role === 'admin') {
       browserHistory.push('/admin');
     } else if (authResult.user.role === 'pilot') {
-      browserHistory.push('/pilot');
+      browserHistory.push('/pilot-missions');
     }
   }).catch((err) => {
     isLogged = false;
@@ -61,10 +62,9 @@ export const sendSignupRequest = (values) => new Promise((resolve) => {
   resolve();
 });
 
-export const logout = () => async(dispatch) => {
+export const logout = () => async() => {
   localStorage.removeItem(userInfoKey);
-  console.log('user info removed');
-  userInfo = undefined;
+  userInfo = null;
   isLogged = false;
 };
 
@@ -98,7 +98,7 @@ export default handleActions({
   }),
 }, {
   toggleNotif: false,
-  loggedUser: loadUserInfo() != undefined,
+  loggedUser: !_.isNil(loadUserInfo()),
   location: 'Jakarta, Indonesia',
   selectedCategory: 'Category',
   categories: [
diff --git a/src/styles/img/icon-pagination-next.png b/src/styles/img/icon-pagination-next.png
new file mode 100644
index 0000000000000000000000000000000000000000..72379641107011a9c6b26b400c9d4c1cc9339692
GIT binary patch
literal 1076
zcmaJ=&1=*^6i-o0Z7KGmMK2C1f`Zv(^0|p!+uhBsUF@!9UFaS=NoKpDO(rJO-R<5g
zz35dz58}ad@gMLYhzLRv!IS<I;;kp^WIt*TrGaGTy}aLhzxVZQt@dDc`o=WJakG^b
zyUxx_?46pLWMBA4yT^{}wA7@JNsD$-jJdo=91JP}+QfB?yxk{X@gm1v*!LSv+N`cx
zE(tOywaN5?h@m-daj6#}cMDVC;7vcw@xMQO<bm(y_;sx+Rih$q`z!qzKknBWZhy-)
zJ$~svSnOHML4YX&y<j^`tX_^E__f$QRf{|rn9!{pKP1(xu7M(nG0-x);7Ymy3^M~Y
z!%&U8K$f5;N{XmRf~;7oWT`S3Jv@sRdo8POmq)Rfl;hi!MwTdcyWLDz$&h$cgr;eV
zk}S%yz$}DhH>9X1gvr9#gN+k6_9N<(5TqWFLw0D6XH17F1W~nm;y6r3g<>TWdngiN
zMiPS{&1+zt&^rE4<4o(Mu^VBrjuWyIyR09rg)x}b?)*ThA!B1bihb4;v~3f2C%_@C
z*g2m4$#}kJ86GrrQ^kVjVo%6IwIw(zas>?;*n~RPvKWv3oP{svO9i<g7Ylm10AWeb
z7P2K1%63^bb;UNcF}4yW6ooDx$M#w55w>tH)+)vrQ4%)@*&a{9TANUkv`GYt#X;A>
z?R7u&NH@8YwrQBPjbp!qy>d(fFsQTTpTPloS;auIB$&FZ2(qbW1xGhLK~fM>92pxB
zs{9D=ovPn(PML<~5sm3siixsNGGzhjh9*FWb-`?DO!N$0mJA(BuEdLsqL_}(sZkoM
z*nFnflf_`d$!g({?NiJa=lM6e#+I&JvGa}IFX!m^`1m1sJM;N)`H=er-u+#=crfAU
zuff!O{#J*B^Q&|FFZPbaxtkl#GFQ&dyy_fW+k2y4`B~v6Cb=KqJ1;MP>0eFvxKgUw
J?+Y7G{{b}APW=D?

literal 0
HcmV?d00001

diff --git a/src/styles/img/icon-pagination-prev.png b/src/styles/img/icon-pagination-prev.png
new file mode 100644
index 0000000000000000000000000000000000000000..43275ae03253d6a390a0d8ba4e973c018d6381d6
GIT binary patch
literal 1076
zcmaJ=Pfyf96tAuj#BkDR^gxE<K@;1~^zXLpim>g<CN7d?6F4&4&aw@(Q`>=Eh|$ED
zs2{+i2^Vk1i$@M(;z7THN56n_H6}P+c98?2N&Dta-|xNO`}byP@!`byt#LsRCTa_A
zgUb>Aj*X4-FFG`4xVXu@Rklpqtcz13%muVXKrO=Sq(N}7^W-}z2}0pz*j#0+^+%3R
zBN^v5axY3aS`bRJy#)Ikgn<@W596}<YyYzd!k{d!7<E`rDx?!G?51RScd_a3ZuoW}
z&fW*5p2HnPgkjK&Hsj3cmBqeahoAFnMFf2lwow+3Nv+nGK!v6R7_uq((6oSM%gC@S
z-MR-<hztd4iUuWBb9CtFDi}N>kCp~)r{PuyvA9+iJB%fcqIA1mxvR-EU00B8+X_?_
zRh77fl<mX}_oO(R9(r&|=BHu8LK=hIBW}?xRu(za;}oK#UO#ahXM;lVk|{l$C`g7%
z6y<sKtuxjj|7o0Qoi%q7qBKZGw^E<?qdh$Y^V*#sC^zJ6oX2U%n}Ro8>Tg9PW;M4g
z@;`DA296aV%d~YO89oW5BGTJZOUJ%sV2jwuBu0^tp`Wwx^JWzq-kitfJVKs1Z+URe
z^z5o>Lk)S>5L=5ghGU-$V~0HU0PCKMbt);rjHXRWH-}TO)S--K9h!hjrQdaMXC;gS
z+Rg6fZ92}{C26=#f@(@5(66%-p1}bHMa{x0lx)-2B-Pf7Qp>ag32GQ?EtOaZ>EZw%
zoT}gPobnr<M>3@2Xf`e)XsZ%7Eki<xn3CN#xEffd3N4dBABqa6sN|z_YLtdod_MEz
z$zpKjWVJ}l_bKIz^K@VP#FwsGbLX19AFV$}N3(@%TH&w+o?X7WR`_WgP3=wIJ{b8r
zvv<)09{5st@b|{+<+Un8;NbbCE3dXcT%Vc=<!?3N!l>|julx4h^5pw`k89qd`*D8l
F#Xq`xP4EB!

literal 0
HcmV?d00001

diff --git a/src/styles/img/icon-select-arrow-small.png b/src/styles/img/icon-select-arrow-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a4c1272d4dc2a5bb08c597f3c01f36558b2314c
GIT binary patch
literal 1102
zcmaJ=O=#3W6i!<#rC3nJgFoO9l`5K_NjAwQbnVZk+Eurf?Mn9~olRzULz_%Yrf%AU
zh<K>zp&kVf9=uxgP&|l;AVNJWh}4URdJ#P7O?0x|tvwV2$;^9s-+SNtyE`>`VW9tT
zKgV$cg$cXF&OY|;>FZ_R<iXRc>^MZnD|DLFXcI-48+Az)gMyFhxP+0rczqoYaa_+G
zuUw&(;$_PrzKBvAG4Vr&=D4BZBt*^}rl5-JUXbH|ynM|A&&}~OT2U^BdED?OmLfd8
zG+B0*<{Z=IhtGkb#9|J7Oc6-@`5?BE9N+S5v3shPc+fJTb2)yCRHZlt@+87Q6LrCn
zbpsft2sOjV7-xYZLrs!ZNtFdfwKB4mQ9%3QS+vNlSta{?I~J32e1p=^lB8y{DK=G+
zM0E+8rYXsaq$mQj5aPvvqC^Pd;~ft+j-AL0sYe2kdPG&SKyy4}x|M<-7K_`CgScHN
zRx&9;p#())^8GZgmUT=^_#cg3t>f}yh@}#a$wK6?e$<Y4z^r!v50n}*HrAEMV@*Nx
zHgOhw9MFQD<Jlk4^<2wvp`n`@ENBjPg)Gd}glYykf`$xiLLF;aj5~gI!<(u)s+op4
zX2=SJ<NBzb&*p7qTvef_+A!O}7J`_fz`>o^9*f<^X8((|@)1UqL}fzeJ5w;#Ae6)n
z5`uib)pc-c#tU51j8CU++REC-k#_^T=Of~SR-G+x7Y@+Pss>VI!PFg9P|QqLsOp9*
z$SOi=Rlx>?8NQ8ochqldPML<~5q9WUs)@2tHWdNsh9*FWb-}D@Omq!hkqsToj?7Dp
zqLhx#j#28U*nFnf?Zsfi_G;mP?Nh`S=kZ2Yoh{vL!5%FqpR1qN{(QIuR_h}@0InQ8
zu=48Q@{wDQ_!EVFFT0jsJmc<`!Di3bYmeU!g5Ss9_I_O(dGxOD<D1?mde`$aA6CAM
veE+uD_;qjpdPM|l1Mh!!U%c4^x$eE(o{f|DM;;F9>4q1^C+*d-+1q~soLgM&

literal 0
HcmV?d00001


From 5295af287dd1848927a30d7f815da8fb9dd719d6 Mon Sep 17 00:00:00 2001
From: Maksym Mykhailenko <maxceem@gmail.com>
Date: Mon, 9 Jan 2017 21:37:40 +0800
Subject: [PATCH 2/2] final fixes for challenge #30056080 PREFLIGHT CHECKLIST

---
 src/components/BreadcrumbItem/BreadcrumbItem.jsx  | 15 +++++++++++++++
 src/components/BreadcrumbItem/BreadcrumbItem.scss |  7 +++++++
 src/components/BreadcrumbItem/index.js            |  3 +++
 .../containers/BreadcrumbItemContainer.js         | 11 +++++++++++
 src/routes/PilotChecklist/index.js                |  5 ++++-
 .../PilotChecklist/modules/PilotChecklist.js      |  3 ++-
 6 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/components/BreadcrumbItem/BreadcrumbItem.jsx
 create mode 100644 src/components/BreadcrumbItem/BreadcrumbItem.scss
 create mode 100644 src/components/BreadcrumbItem/index.js
 create mode 100644 src/routes/PilotChecklist/containers/BreadcrumbItemContainer.js

diff --git a/src/components/BreadcrumbItem/BreadcrumbItem.jsx b/src/components/BreadcrumbItem/BreadcrumbItem.jsx
new file mode 100644
index 0000000..b036fc6
--- /dev/null
+++ b/src/components/BreadcrumbItem/BreadcrumbItem.jsx
@@ -0,0 +1,15 @@
+import React, {PropTypes} from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './BreadcrumbItem.scss';
+
+export const BreadcrumbItem = ({title}) => (
+  <span styleName="breadcrumb-item">
+    {title}
+  </span>
+);
+
+BreadcrumbItem.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default CSSModules(BreadcrumbItem, styles);
diff --git a/src/components/BreadcrumbItem/BreadcrumbItem.scss b/src/components/BreadcrumbItem/BreadcrumbItem.scss
new file mode 100644
index 0000000..a5e8856
--- /dev/null
+++ b/src/components/BreadcrumbItem/BreadcrumbItem.scss
@@ -0,0 +1,7 @@
+.breadcrumb-item {
+  background-color: transparent;
+
+  :global {
+
+  }
+}
diff --git a/src/components/BreadcrumbItem/index.js b/src/components/BreadcrumbItem/index.js
new file mode 100644
index 0000000..28647ff
--- /dev/null
+++ b/src/components/BreadcrumbItem/index.js
@@ -0,0 +1,3 @@
+import BreadcrumbItem from './BreadcrumbItem';
+
+export default BreadcrumbItem;
diff --git a/src/routes/PilotChecklist/containers/BreadcrumbItemContainer.js b/src/routes/PilotChecklist/containers/BreadcrumbItemContainer.js
new file mode 100644
index 0000000..206227f
--- /dev/null
+++ b/src/routes/PilotChecklist/containers/BreadcrumbItemContainer.js
@@ -0,0 +1,11 @@
+import {connect} from 'react-redux';
+
+// we use global BreadcrumbItem component to display breadcrumb item,
+// just pass a title property here
+import BreadcrumbItem from 'components/BreadcrumbItem';
+
+const mapState = (state) => ({
+  title: state.pilotChecklist.missionName,
+});
+
+export default connect(mapState, {})(BreadcrumbItem);
diff --git a/src/routes/PilotChecklist/index.js b/src/routes/PilotChecklist/index.js
index 2a41508..602408e 100644
--- a/src/routes/PilotChecklist/index.js
+++ b/src/routes/PilotChecklist/index.js
@@ -1,7 +1,9 @@
 import {injectReducer} from '../../store/reducers';
+import React from 'react';
+import BreadcrumbItem from './containers/BreadcrumbItemContainer';
 
 export default (store) => ({
-  name: 'Pilot Checklist',
+  name: 'Flight Checklist',
   path: 'pilot-checklist/:id',
   getComponent(nextState, cb) {
     require.ensure([], (require) => {
@@ -12,4 +14,5 @@ export default (store) => ({
       cb(null, PilotChecklist);
     }, 'PilotChecklist');
   },
+  prettifyParam: () => React.createElement(BreadcrumbItem), // eslint-disable-line react/display-name
 });
diff --git a/src/routes/PilotChecklist/modules/PilotChecklist.js b/src/routes/PilotChecklist/modules/PilotChecklist.js
index a9aace8..9991388 100644
--- a/src/routes/PilotChecklist/modules/PilotChecklist.js
+++ b/src/routes/PilotChecklist/modules/PilotChecklist.js
@@ -16,7 +16,7 @@ export const load = (missionId) => async(dispatch) => {
   const response = await APIService.getPilotChecklist(missionId);
   const answers = response.pilotChecklist ? response.pilotChecklist.answers : [];
 
-  dispatch({type: LOADED, payload: {..._.pick(response, ['missionStatus', 'questions']), answers, missionId}});
+  dispatch({type: LOADED, payload: {..._.pick(response, ['missionStatus', 'missionName', 'questions']), answers, missionId}});
 };
 
 export const save = (values) => async (dispatch, getState) => {
@@ -69,6 +69,7 @@ export default handleActions({
 }, {
   missionId: '',
   missionStatus: '',
+  missionName: '',
   questions: [],
   answers: [],
 });