diff --git a/package.json b/package.json
index 351bf5dc..3780f34b 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
+    "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
diff --git a/src/api/account.js b/src/api/account.js
index e18ab6e8..dd203895 100644
--- a/src/api/account.js
+++ b/src/api/account.js
@@ -7,6 +7,10 @@ export function fetchList(query) {
   return axios.get(`${apiUrl}/account/search`, { params: query })
 }
 
+export function fetchRelationships(query) {
+  return axios.get(`${apiUrl}/account/relationship`, { params: query })
+}
+
 export function fetchAccount(id) {
   return axios.get(`${apiUrl}/account/${id}`)
 }
@@ -14,17 +18,23 @@ export function fetchAccount(id) {
 export function createAccount(data) {
   const dto = {
     'name': data.name,
+    'fullName': data.fullName || data.name,
     'type': data.type,
     'email': data.email,
     'platform': store.state.platform,
     'phone': data.phone,
     'status': parseInt(data.status),
-    'orderConfirmationEmail': data.orderConfirmationEmail,
     'addressLine1': data.address.addressLine1,
     'addressLine2': data.address.addressLine2,
     'county': data.address.county,
     'country': data.address.country,
-    'postCode': data.address.postCode
+    'postCode': data.address.postCode,
+    'fuelRestrictions': data.restrictions.fuels,
+    'terminalRestrictions': data.restrictions.terminals,
+    'paymentTermsRestrictions': data.restrictions.paymentTerms,
+    'liftingPeriodRestrictions': data.restrictions.liftingPeriods,
+    'sendOrderCompleteAlert': data.sendOrderCompleteAlert,
+    'orderCompleteAlertText': data.orderCompleteAlertText
   }
 
   return axios.post(`${apiUrl}/account/create`, dto)
@@ -33,17 +43,23 @@ export function createAccount(data) {
 export function updateAccount(data) {
   const dto = {
     'name': data.name,
+    'fullName': data.fullName || data.name,
     'type': data.type,
     'email': data.email,
     'platform': data.platform,
     'phone': data.phone,
     'status': parseInt(data.status),
-    'orderConfirmationEmail': data.orderConfirmationEmail,
     'addressLine1': data.address.addressLine1,
     'addressLine2': data.address.addressLine2,
     'county': data.address.county,
     'country': data.address.country,
-    'postCode': data.address.postCode
+    'postCode': data.address.postCode,
+    'fuelRestrictions': data.restrictions.fuels,
+    'terminalRestrictions': data.restrictions.terminals,
+    'paymentTermsRestrictions': data.restrictions.paymentTerms,
+    'liftingPeriodRestrictions': data.restrictions.liftingPeriods,
+    'sendOrderCompleteAlert': data.sendOrderCompleteAlert,
+    'orderCompleteAlertText': data.orderCompleteAlertText
   }
 
   return axios.put(`${apiUrl}/account/${data.id}`, dto)
diff --git a/src/api/faq.js b/src/api/faq.js
new file mode 100644
index 00000000..671b593d
--- /dev/null
+++ b/src/api/faq.js
@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+const FAQEndpointUrl = 'https://metadata.service.development.therig.onlinefuelslabs.io'
+
+export function fetchList(query) {
+  return axios.get(`${FAQEndpointUrl}/faqs`, { params: query })
+}
+
+export function fetchFaq(id) {
+  return axios.get(`${FAQEndpointUrl}/faqs/${id}?platform=OLFDE`)
+}
+
+export function createFaq(data) {
+  const dto = __dataToDTO(data)
+  return axios.post(`${FAQEndpointUrl}/faqs`, dto)
+}
+
+export function updateFaq(data) {
+  const dto = __dataToDTO(data)
+  return axios.put(`${FAQEndpointUrl}/faqs/${data._id}`, dto)
+}
+
+function __dataToDTO(data) {
+  return {
+    'question': data.question,
+    'answer': data.answer,
+    'order': parseInt(data.order),
+    'status': data.status,
+    'platform': 'OLFDE'
+  }
+}
diff --git a/src/api/liftingPeriod.js b/src/api/liftingPeriod.js
new file mode 100644
index 00000000..fc01ef4a
--- /dev/null
+++ b/src/api/liftingPeriod.js
@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+const LiftingPeriodEndpointUrl = 'https://metadata.service.development.therig.onlinefuelslabs.io'
+
+export function fetchList(query) {
+  return axios.get(`${LiftingPeriodEndpointUrl}/lifting-periods`, { params: query })
+}
+
+export function fetchLiftingPeriod(id) {
+  return axios.get(`${LiftingPeriodEndpointUrl}/lifting-periods/${id}?platform=OLFDE`)
+}
+
+export function createLiftingPeriod(data) {
+  const dto = {
+    'name': data.name,
+    'days': Number(data.days),
+    'platform': data.platform || 'OLFDE'
+  }
+
+  return axios.post(`${LiftingPeriodEndpointUrl}/lifting-periods`, dto)
+}
+
+export function updateLiftingPeriod(data) {
+  const dto = {
+    'name': data.name,
+    'days': Number(data.days),
+    'platform': data.platform || 'OLFDE'
+  }
+
+  return axios.put(`${LiftingPeriodEndpointUrl}/lifting-periods/${data._id}`, dto)
+}
diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 00000000..1585e733
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+const apiUrl = 'https://orders.service.development.therig.onlinefuelslabs.io'
+
+export function fetchList(query) {
+  query.platform = 'OLFDE'
+  query.accountId = '5caf6ca5bca1f9001212b6ec'
+  return axios.get(`${apiUrl}/orders`, { params: query })
+}
+
+export function fetchOrder(id) {
+  return axios.get(`${apiUrl}/orders/${id}`)
+}
diff --git a/src/api/paymentTerm.js b/src/api/paymentTerm.js
new file mode 100644
index 00000000..ac001cb4
--- /dev/null
+++ b/src/api/paymentTerm.js
@@ -0,0 +1,31 @@
+import axios from 'axios'
+
+const PaymentTermsEndpointUrl = 'https://metadata.service.development.therig.onlinefuelslabs.io'
+
+export function fetchList(query) {
+  return axios.get(`${PaymentTermsEndpointUrl}/payment-terms`, { params: query })
+}
+
+export function fetchPaymentTerm(id) {
+  return axios.get(`${PaymentTermsEndpointUrl}/payment-terms/${id}?platform=OLFDE`)
+}
+
+export function createPaymentTerm(data) {
+  const dto = {
+    'name': data.name,
+    'days': Number(data.days),
+    'platform': data.platform || 'OLFDE'
+  }
+
+  return axios.post(`${PaymentTermsEndpointUrl}/payment-terms`, dto)
+}
+
+export function updatePaymentTerm(data) {
+  const dto = {
+    'name': data.name,
+    'days': Number(data.days),
+    'platform': data.platform || 'OLFDE'
+  }
+
+  return axios.put(`${PaymentTermsEndpointUrl}/payment-terms/${data._id}`, dto)
+}
diff --git a/src/api/terminal.js b/src/api/terminal.js
index 9d846580..c22aebe2 100644
--- a/src/api/terminal.js
+++ b/src/api/terminal.js
@@ -37,6 +37,10 @@ function __dataToDTO(data) {
     'county': data.address.county,
     'country': data.address.country,
     'postCode': data.address.postCode,
-    'identifier': data.identifier
+    'identifier': data.identifier,
+    'contactNumber': data.contactNumber,
+    'fullName': data.fullName,
+    'meta': data.meta,
+    'regionId': data.region_id
   }
 }
diff --git a/src/api/user.js b/src/api/user.js
index bd1c7a39..3f47782a 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -62,6 +62,16 @@ export function updateUser(data) {
   return axios.put(`${apiUrl}/user/${data.id}`, dto)
 }
 
+export function sendPasswordReset(email, type) {
+  const dto = {
+    email,
+    type,
+    platform: 'OLFDE'
+  }
+
+  return axios.post(`${apiUrl}/user/password/send-reset-link`, dto)
+}
+
 function __dataToDTO(data) {
   return {
     'firstName': data.firstName,
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 0c6174c4..737e2acc 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -43,7 +43,7 @@ export default {
     },
     menubar: {
       type: String,
-      default: 'file edit insert view format table'
+      default: ''
     },
     height: {
       type: [Number, String],
diff --git a/src/components/Tinymce/plugins.js b/src/components/Tinymce/plugins.js
index 058d2aef..91e6849f 100644
--- a/src/components/Tinymce/plugins.js
+++ b/src/components/Tinymce/plugins.js
@@ -2,6 +2,7 @@
 // Detail plugins list see https://www.tinymce.com/docs/plugins/
 // Custom builds see https://www.tinymce.com/download/custom-builds/
 
-const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+// const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+const plugins = []
 
 export default plugins
diff --git a/src/router/index.js b/src/router/index.js
index aaa655d6..07a507ab 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -134,6 +134,12 @@ export const asyncRoutes = [
         component: () => import('@/views/accounts/list'),
         name: 'SellerAccountList',
         meta: { title: 'Seller Account List', icon: 'list', type: 'seller' }
+      },
+      {
+        path: 'relationship-list',
+        component: () => import('@/views/accounts/relationships'),
+        name: 'RelationshipMatrix',
+        meta: { title: 'Relationships', icon: 'list' }
       }
     ]
   },
@@ -244,7 +250,7 @@ export const asyncRoutes = [
         path: 'create',
         component: () => import('@/views/products/create'),
         name: 'CreateProduct',
-        meta: { title: 'Create Products', icon: 'edit' }
+        meta: { title: 'Create Product', icon: 'edit' }
       },
       {
         path: 'edit/:id',
@@ -261,6 +267,130 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/lifting-periods',
+    component: Layout,
+    redirect: '/lifting-periods/list',
+    name: 'LiftingPeriods',
+    meta: {
+      title: 'Lifting Periods',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/liftingperiods/create'),
+        name: 'CreateLiftingPeriod',
+        meta: { title: 'Create Lifting Period', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/liftingperiods/edit'),
+        name: 'EditLiftingPeriod',
+        meta: { title: 'Edit Lifting Period', noCache: true, activeMenu: '/liftingperiods/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/liftingperiods/list'),
+        name: 'LiftingPeriodList',
+        meta: { title: 'Lifting Period List', icon: 'list' }
+      }
+    ]
+  },
+  {
+    path: '/payment-terms',
+    component: Layout,
+    redirect: '/payment-terms/list',
+    name: 'PaymentTerms',
+    meta: {
+      title: 'Payment Terms',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/paymentterms/create'),
+        name: 'CreatePaymentTerm',
+        meta: { title: 'Create Payment Terms', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/paymentterms/edit'),
+        name: 'EditPaymentTerm',
+        meta: { title: 'Edit Payment Terms', noCache: true, activeMenu: '/paymentterms/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/paymentterms/list'),
+        name: 'LiftingPaymentTerm',
+        meta: { title: 'Payment Terms List', icon: 'list' }
+      }
+    ]
+  },
+  {
+    path: '/faqs',
+    component: Layout,
+    redirect: '/faqs/list',
+    name: 'FAQs',
+    meta: {
+      title: 'FAQs',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/faqs/create'),
+        name: 'CreateFAQ',
+        meta: { title: 'Create FAQ', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/faqs/edit'),
+        name: 'EditFAQs',
+        meta: { title: 'Edit FAQ', noCache: true, activeMenu: '/faqs/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/faqs/list'),
+        name: 'FAQList',
+        meta: { title: 'FAQ List', icon: 'list' }
+      }
+    ]
+  },
+  {
+    path: '/orders',
+    component: Layout,
+    redirect: '/orders/list',
+    name: 'Orders',
+    meta: {
+      title: 'Orders',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/orders/create'),
+        name: 'CreateOrder',
+        meta: { title: 'Create Order', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/orders/edit'),
+        name: 'EditOrder',
+        meta: { title: 'Edit Order', noCache: true, activeMenu: '/orders/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/orders/list'),
+        name: 'OrderList',
+        meta: { title: 'Order List', icon: 'list' }
+      }
+    ]
+  },
   {
     path: '/permission',
     component: Layout,
diff --git a/src/views/accounts/components/AccountDetail.vue b/src/views/accounts/components/AccountDetail.vue
index e3d85cae..bafd0f20 100644
--- a/src/views/accounts/components/AccountDetail.vue
+++ b/src/views/accounts/components/AccountDetail.vue
@@ -22,8 +22,15 @@
               </el-row>
               <el-row>
                 <el-col :span="8">
-                  <el-form-item label-width="120px" label="Name" class="postInfo-container-item">
-                    <el-input v-model="postForm.name" placeholder="Account Name" />
+                  <el-form-item label-width="120px" label="Display Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.name" placeholder="Display Name" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Full Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.fullName" placeholder="Full Name" />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -86,6 +93,65 @@
                   </el-form-item>
                 </el-col>
               </el-row>
+              <el-row v-if="postForm.type === 'seller'">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Send Order Complete Alert" class="postInfo-container-item">
+                    <el-switch v-model="postForm.sendOrderCompleteAlert" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="postForm.type === 'seller' && postForm.sendOrderCompleteAlert">
+                <el-col :span="20">
+                  <el-form-item label-width="120px" label="Order Complete Email Text" class="postInfo-container-item">
+                    <tinymce v-model="postForm.orderCompleteAlertText" :height="150" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row v-if="postForm.type === 'seller'">
+                <el-col :span="12">
+                  <el-form-item label-width="120px" label="Fuel Restriction" class="postInfo-container-item">
+                    <el-transfer
+                      v-model="postForm.restrictions.fuels"
+                      :titles="['Disabled', 'Enabled']"
+                      :data="fuelsAvailable"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="postForm.type === 'seller'">
+                <el-col :span="12">
+                  <el-form-item label-width="120px" label="Terminal Restriction" class="postInfo-container-item">
+                    <el-transfer
+                      v-model="postForm.restrictions.terminals"
+                      :titles="['Disabled', 'Enabled']"
+                      :data="terminalsAvailable"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="postForm.type === 'seller'">
+                <el-col :span="12">
+                  <el-form-item label-width="120px" label="Lifting Restriction" class="postInfo-container-item">
+                    <el-transfer
+                      v-model="postForm.restrictions.liftingPeriods"
+                      :titles="['Disabled', 'Enabled']"
+                      :data="liftingPeriodsAvailable"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="postForm.type === 'seller'">
+                <el-col :span="12">
+                  <el-form-item label-width="120px" label="Payment Restriction" class="postInfo-container-item">
+                    <el-transfer
+                      v-model="postForm.restrictions.paymentTerms"
+                      :titles="['Disabled', 'Enabled']"
+                      :data="paymentTermsAvailable"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
               <el-row>
                 <el-col :span="8">
                   <el-form-item label-width="120px" label="Status" class="postInfo-container-item">
@@ -109,6 +175,11 @@
 <script>
 import Sticky from '@/components/Sticky' // 粘性header组件
 import { fetchAccount, updateAccount, createAccount } from '@/api/account'
+import Tinymce from '@/components/Tinymce'
+const fetchFuelList = require('@/api/product').fetchList
+const fetchTerminalList = require('@/api/terminal').fetchList
+const fetchLiftingPeriodsList = require('@/api/liftingPeriod').fetchList
+const fetchPaymentTermsList = require('@/api/paymentTerm').fetchList
 
 const defaultForm = {
   id: '',
@@ -116,6 +187,14 @@ const defaultForm = {
   phone: '',
   email: '',
   orderConfirmationEmail: '',
+  sendOrderCompleteAlert: false,
+  orderCompleteAlertText: '',
+  restrictions: {
+    fuels: [],
+    terminals: [],
+    liftingPeriods: [],
+    paymentTerms: []
+  },
   address: {
     addressLine1: '',
     addressLine2: '',
@@ -127,7 +206,7 @@ const defaultForm = {
 
 export default {
   name: 'AccountDetail',
-  components: { Sticky },
+  components: { Sticky, Tinymce },
   props: {
     isEdit: {
       type: Boolean,
@@ -156,7 +235,12 @@ export default {
         // content: [{ validator: validateRequire }],
         // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
       },
-      tempRoute: {}
+      tempRoute: {},
+      terminals: [],
+      fuels: [],
+      paymentTerms: [],
+      liftingPeriods: [],
+      fuelRestrictions: []
     }
   },
   computed: {
@@ -171,6 +255,58 @@ export default {
       set(val) {
         this.postForm.display_time = new Date(val)
       }
+    },
+    fuelsAvailable: {
+      get() {
+        return this.fuels.map(f => {
+          return {
+            label: f.name,
+            key: f._id
+          }
+        })
+      },
+      set(value) {
+        this.postForm.restrictions.fuels = value
+      }
+    },
+    terminalsAvailable: {
+      get() {
+        return this.terminals.map(f => {
+          return {
+            label: f.name,
+            key: f._id
+          }
+        })
+      },
+      set(value) {
+        this.postForm.restrictions.terminals = value
+      }
+    },
+    liftingPeriodsAvailable: {
+      get() {
+        return this.liftingPeriods.map(f => {
+          return {
+            label: f.name,
+            key: f._id
+          }
+        })
+      },
+      set(value) {
+        this.postForm.restrictions.liftingPeriods = value
+      }
+    },
+    paymentTermsAvailable: {
+      get() {
+        return this.paymentTerms.map(f => {
+          return {
+            label: f.name,
+            key: f._id
+          }
+        })
+      },
+      set(value) {
+        this.postForm.restrictions.paymentTerms = value
+      }
     }
   },
   created() {
@@ -181,6 +317,21 @@ export default {
       this.postForm = Object.assign({}, defaultForm)
     }
 
+    // Fetch the fuels and terminals, to be used as part of the restriction process
+    const requestPromises = [
+      fetchFuelList({ platform: 'OLFDE' }),
+      fetchTerminalList({ platform: 'OLFDE' }),
+      fetchLiftingPeriodsList({ platform: 'OLFDE' }),
+      fetchPaymentTermsList({ platform: 'OLFDE' })
+    ]
+
+    Promise.all(requestPromises).then((responses) => {
+      this.fuels = responses[0].data.fuels
+      this.terminals = responses[1].data.terminals
+      this.liftingPeriods = responses[2].data.liftingPeriods
+      this.paymentTerms = responses[3].data.paymentTerms
+    })
+
     // Why need to make a copy of this.$route here?
     // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
     // https://github.com/PanJiaChen/vue-element-admin/issues/1221
@@ -189,7 +340,35 @@ export default {
   methods: {
     fetchData(id) {
       fetchAccount(id).then(response => {
-        this.postForm = response.data
+        const account = response.data
+        console.dir(account)
+
+        if (!account.restrictions) {
+          account.restrictions = {
+            fuels: [],
+            terminals: [],
+            paymentTerms: [],
+            liftingPeriods: []
+          }
+        }
+
+        if (account.restrictions.fuels.length === 0) {
+          account.restrictions.fuels = this.fuels.map(f => f._id)
+        }
+
+        if (account.restrictions.terminals.length === 0) {
+          account.restrictions.terminals = this.terminals.map(f => f._id)
+        }
+
+        if (account.restrictions.paymentTerms != null && account.restrictions.paymentTerms.length === 0) {
+          account.restrictions.paymentTerms = this.paymentTerms.map(f => f._id)
+        }
+
+        if (account.restrictions.liftingPeriods != null && account.restrictions.liftingPeriods.length === 0) {
+          account.restrictions.liftingPeriods = this.liftingPeriods.map(f => f._id)
+        }
+
+        this.postForm = account
 
         // // set tagsview title
         this.setTagsViewTitle()
@@ -207,16 +386,19 @@ export default {
     },
     setPageTitle() {
       const title = 'Edit Account'
-      document.title = `${title} - ${this.postForm.id}`
+      document.title = `${title} - ${this.postForm.name}`
     },
     submitForm() {
       this.$refs.postForm.validate(valid => {
         if (valid) {
           this.loading = true
 
+          // Make a clone of the object
+          const accountToSave = Object.assign({}, this.postForm)
+
           // Save the account
           const methodToCall = this.isEdit ? updateAccount : createAccount
-          methodToCall(this.postForm).then((r) => {
+          methodToCall(accountToSave).then((r) => {
             this.$notify({
               title: 'Success',
               message: 'Account Saved',
diff --git a/src/views/accounts/list.vue b/src/views/accounts/list.vue
index 2f57b552..c0cba2fc 100644
--- a/src/views/accounts/list.vue
+++ b/src/views/accounts/list.vue
@@ -15,15 +15,15 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Email" width="250">
+      <el-table-column align="center" label="Full Name" width="200">
         <template slot-scope="scope">
-          <span>{{ scope.row.email }}</span>
+          <span>{{ scope.row.fullName || scope.row.name }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Order Confirmation Email" width="200">
+      <el-table-column align="center" label="Email" width="250">
         <template slot-scope="scope">
-          <span>{{ scope.row.orderConfirmationEmail }}</span>
+          <span>{{ scope.row.email }}</span>
         </template>
       </el-table-column>
 
diff --git a/src/views/accounts/relationships.vue b/src/views/accounts/relationships.vue
new file mode 100644
index 00000000..d7b55ea6
--- /dev/null
+++ b/src/views/accounts/relationships.vue
@@ -0,0 +1,97 @@
+
+<template>
+  <div class="app-container">
+
+    <el-table v-loading="listLoading" :data="buyerAccounts" border fit style="width: 100%">
+
+      <el-table-column label="X" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-for="seller in sellerAccounts" :key="seller._id" align="center" :label="seller.name">
+        <template slot-scope="scope">
+          <span v-if="relationshipMatrix[`${buyerAccounts[scope.$index].id}-${seller.id}`]">
+
+            <span style="color: green">B: Enabled<br></span>
+
+            <span v-if="relationshipMatrix[`${buyerAccounts[scope.$index].id}-${seller.id}`].other.enabled_spot" style="color: green">S: Enabled<br></span>
+            <span v-else style="color: red">S: Disabled<br></span>
+          </span>
+          <span v-else style="color: red;">
+            No Relationship
+            <br>
+            <br>
+          </span>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+import { fetchList, fetchRelationships } from '@/api/account'
+
+export default {
+  name: 'RelationshipList',
+  data() {
+    return {
+      sellerAccounts: [],
+      buyerAccounts: [],
+      relationshipMatrix: [],
+      originalList: null,
+      list: null,
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        buyerAccountId: '',
+        sellerAccountId: ''
+      }
+    }
+  },
+  created() {
+    this.listQuery.platform = 'OLFDE'
+    this.getList()
+  },
+  methods: {
+    getRemoteAccountList(query) {
+      query = {}
+      query.platform = 'OLFDE'
+      query.limit = 100
+    },
+    getList() {
+      Promise.all([fetchRelationships({ platform: 'OLFDE' }), fetchList({ platform: 'OLFDE', limit: 100 })]).then((results) => {
+        const allRelationships = results[0].data.relationships
+        this.sellerAccounts = results[1].data.docs.filter(a => a.type === 'seller').map(v => { return { name: v.name, id: v._id } })
+        this.buyerAccounts = results[1].data.docs.filter(a => a.type === 'buyer').map(v => { return { name: v.name, id: v._id } })
+
+        // Map the seller accounts
+        const relationshipData = []
+        allRelationships.forEach((a) => {
+          relationshipData[`${a.buyer.account_id}-${a.other.account_id}`] = a
+        })
+        this.relationshipMatrix = relationshipData
+      })
+    },
+    resetFilter() {
+    },
+    handleFilter() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/faqs/components/FaqDetail.vue b/src/views/faqs/components/FaqDetail.vue
new file mode 100644
index 00000000..2dbf0867
--- /dev/null
+++ b/src/views/faqs/components/FaqDetail.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="createProduct-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          Save
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+
+        <el-row>
+          <el-col :span="20">
+            <div class="postInfo-container">
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Id" class="postInfo-container-item">
+                    <el-input v-model="postForm._id" placeholder="Id" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Order" class="postInfo-container-item">
+                    <el-input v-model="postForm.order" placeholder="FAQ Order" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Status" class="postInfo-container-item">
+                    <el-radio-group v-model="postForm.status">
+                      <el-radio-button label="ENABLED">Enabled</el-radio-button>
+                      <el-radio-button label="DISABLED">Disabled</el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="16">
+                  <el-form-item label-width="120px" label="Question" class="postInfo-container-item">
+                    <el-input v-model="postForm.question" placeholder="Question" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="16">
+                  <el-form-item label-width="120px" label="Answer" class="postInfo-container-item">
+                    <markdown-editor ref="markdownEditor" v-model="postForm.answer" mode="wysiwyg" :options="{previewStyle:'tab'}" height="200px" width="600px" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky' // 粘性header组件
+import MarkdownEditor from '@/components/MarkdownEditor'
+import { fetchFaq, updateFaq, createFaq } from '@/api/faq'
+
+const defaultForm = {
+  id: '',
+  question: '',
+  answer: '',
+  status: '',
+  order: 0
+}
+
+export default {
+  name: 'FaqDetail',
+  components: { Sticky, MarkdownEditor },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + 'Epic Success brudda',
+          type: 'error'
+        })
+        callback(new Error(rule.field + ' ERRRR'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      regionListOptions: [],
+      rules: {
+        // image_uri: [{ validator: validateRequire }],
+        name: [{ validator: validateRequire }]
+        // content: [{ validator: validateRequire }],
+        // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return (+new Date(this.postForm.display_time))
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
+
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchFaq(id).then(response => {
+        const faq = response.data
+
+        this.postForm = faq
+
+        // // set tagsview title
+        this.setTagsViewTitle()
+
+        // // set page title
+        this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = 'Edit FAQ'
+      const route = Object.assign({}, this.tempRoute, { title: `${title} - ${this.postForm.question}` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit FAQ'
+      document.title = `${title} - ${this.postForm.id}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          // Save the account
+          const methodToCall = this.isEdit ? updateFaq : createFaq
+          methodToCall(this.postForm).then((r) => {
+            this.$notify({
+              title: 'Success',
+              message: 'FAQ Saved',
+              type: 'success',
+              duration: 2000
+            })
+
+            // Redirect to the edit page when we create a new one
+            if (!this.isEdit) { this.$router.push(`/faqs/edit/${r.data.createdFaq._id}`) }
+
+            this.loading = false
+          }).catch((e) => {
+            console.dir(e)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea /deep/ {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>
diff --git a/src/views/faqs/create.vue b/src/views/faqs/create.vue
new file mode 100644
index 00000000..54787aea
--- /dev/null
+++ b/src/views/faqs/create.vue
@@ -0,0 +1,13 @@
+<template>
+  <faq-detail :is-edit="false" />
+</template>
+
+<script>
+import FaqDetail from './components/FaqDetail'
+
+export default {
+  name: 'CreateForm',
+  components: { FaqDetail }
+}
+</script>
+
diff --git a/src/views/faqs/edit.vue b/src/views/faqs/edit.vue
new file mode 100644
index 00000000..109cb466
--- /dev/null
+++ b/src/views/faqs/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <faq-detail :is-edit="true" />
+</template>
+
+<script>
+import FaqDetail from './components/FaqDetail'
+
+export default {
+  name: 'EditForm',
+  components: { FaqDetail }
+}
+</script>
+
diff --git a/src/views/faqs/list.vue b/src/views/faqs/list.vue
new file mode 100644
index 00000000..fe8fad09
--- /dev/null
+++ b/src/views/faqs/list.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="app-container">
+
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="Question" width="300">
+        <template slot-scope="scope">
+          <span>{{ scope.row.question }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Order" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.order }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Status" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.status }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="120">
+        <template slot-scope="scope">
+          <router-link :to="'/faqs/edit/' + scope.row._id">
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/faq'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'FaqList',
+  components: { Pagination },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      }
+    }
+  },
+  created() {
+    this.listQuery.platform = 'OLFDE'
+
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.faqs
+        this.total = response.data.faqs.length
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/liftingperiods/components/LiftingPeriodDetail.vue b/src/views/liftingperiods/components/LiftingPeriodDetail.vue
new file mode 100644
index 00000000..3de17761
--- /dev/null
+++ b/src/views/liftingperiods/components/LiftingPeriodDetail.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="createAccount-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :z-index="10" :class-name="'sub-navbar ' + postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          Save
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+
+        <el-row>
+          <el-col :span="20">
+            <div class="postInfo-container">
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Id" class="postInfo-container-item">
+                    <el-input v-model="postForm._id" placeholder="Id" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.name" placeholder="Lifting Period Name" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Days" class="postInfo-container-item">
+                    <el-input v-model="postForm.days" placeholder="Lifting Period Days" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { fetchLiftingPeriod, updateLiftingPeriod, createLiftingPeriod } from '@/api/liftingPeriod'
+
+const defaultForm = {
+  id: '',
+  name: '',
+  days: 0
+}
+
+export default {
+  name: 'AccountDetail',
+  components: { Sticky },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + 'Epic Success brudda',
+          type: 'error'
+        })
+        callback(new Error(rule.field + ' ERRRR'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+        // image_uri: [{ validator: validateRequire }],
+        name: [{ validator: validateRequire }]
+        // content: [{ validator: validateRequire }],
+        // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return (+new Date(this.postForm.display_time))
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
+
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchLiftingPeriod(id).then(response => {
+        this.postForm = response.data.liftingPeriod
+
+        // // set tagsview title
+        this.setTagsViewTitle()
+
+        // // set page title
+        this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = 'Edit Lifting Period'
+      const route = Object.assign({}, this.tempRoute, { title: `${title} - ${this.postForm.name}` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit Lifting Period'
+      document.title = `${title} - ${this.postForm.name}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          // Save the account
+          const methodToCall = this.isEdit ? updateLiftingPeriod : createLiftingPeriod
+          methodToCall(this.postForm).then((r) => {
+            this.$notify({
+              title: 'Success',
+              message: 'Lifting Period Saved',
+              type: 'success',
+              duration: 2000
+            })
+
+            // Redirect to the edit page when we create a new one
+            if (!this.isEdit) { this.$router.push(`/lifting-periods/edit/${r.data.createdLiftingPeriod._id}`) }
+
+            this.loading = false
+          }).catch((e) => {
+            console.dir(e)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea /deep/ {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>
diff --git a/src/views/liftingperiods/create.vue b/src/views/liftingperiods/create.vue
new file mode 100644
index 00000000..f1992c2e
--- /dev/null
+++ b/src/views/liftingperiods/create.vue
@@ -0,0 +1,13 @@
+<template>
+  <lifting-period-detail :is-edit="false" />
+</template>
+
+<script>
+import LiftingPeriodDetail from './components/LiftingPeriodDetail'
+
+export default {
+  name: 'CreateForm',
+  components: { LiftingPeriodDetail }
+}
+</script>
+
diff --git a/src/views/liftingperiods/edit.vue b/src/views/liftingperiods/edit.vue
new file mode 100644
index 00000000..593fb345
--- /dev/null
+++ b/src/views/liftingperiods/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <lifting-period-detail :is-edit="true" />
+</template>
+
+<script>
+import LiftingPeriodDetail from './components/LiftingPeriodDetail'
+
+export default {
+  name: 'EditForm',
+  components: { LiftingPeriodDetail }
+}
+</script>
+
diff --git a/src/views/liftingperiods/list.vue b/src/views/liftingperiods/list.vue
new file mode 100644
index 00000000..d2394645
--- /dev/null
+++ b/src/views/liftingperiods/list.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="app-container">
+
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="Name" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Name" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.days }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="120">
+        <template slot-scope="scope">
+          <router-link :to="'/lifting-periods/edit/' + scope.row._id">
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/liftingPeriod'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'LiftingPeriodList',
+  components: { Pagination },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      }
+    }
+  },
+  created() {
+    // Set the type for the query
+    this.listQuery.platform = 'OLFDE'
+
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.liftingPeriods
+        this.total = response.data.liftingPeriods.length
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/orders/components/OrderDetail.vue b/src/views/orders/components/OrderDetail.vue
new file mode 100644
index 00000000..c7d242cc
--- /dev/null
+++ b/src/views/orders/components/OrderDetail.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="createProduct-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          Save
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+
+        <el-row>
+          <el-col :span="20">
+            <div class="postInfo-container">
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="Id" class="postInfo-container-item">
+                    <el-input v-model="postForm.orderId" placeholder="Id" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Seller" class="postInfo-container-item">
+                    <el-input v-model="postForm.offers[0].seller.name" placeholder="Seller" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Buyer" class="postInfo-container-item">
+                    <el-input v-model="postForm.buyer.name" placeholder="Buyer" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Status" class="postInfo-container-item">
+                    <el-radio-group v-model="postForm.status">
+                      <el-radio-button label="Complete">Complete</el-radio-button>
+                      <el-radio-button label="Cancelled">Cancelled</el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="18">
+                  <el-form-item label-width="120px" label="Items" class="postInfo-container-item">
+
+                    <el-table :data="postForm.offers" border style="width: 100%">
+                      <el-table-column align="center" label="Id" width="100">
+                        <template slot-scope="scope">
+                          <span>{{ postForm.orderId }}-{{ scope.$index + 1 }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Product" width="170">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.fuel.name }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Terminal" width="170">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.terminal.name }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Lifting" width="120">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row | collectionTime }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Credit" width="120">
+                        <template>
+                          <span>Wie Vereinbart</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Price" width="90">
+                        <template slot-scope="scope">
+                          <el-input v-model="scope.row.price" placeholder="0.00" />
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Volume" width="80">
+                        <template slot-scope="scope">
+                          <el-input v-model="scope.row.quantityOrdered" placeholder="0" />
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Line Total">
+                        <template slot-scope="scope">
+                          <span>{{ Number((scope.row.quantityOrdered * scope.row.price) * 10).toFixed(2) }}</span>
+                        </template>
+                      </el-table-column>
+
+                    </el-table>
+
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="Ex. VAT" class="postInfo-container-item">
+                    <el-input v-model="exVatPrice" placeholder="0" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="VAT" class="postInfo-container-item">
+                    <el-input v-model="vatPrice" placeholder="0" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="Total" class="postInfo-container-item">
+                    <el-input v-model="totalPrice" placeholder="0" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { fetchOrder } from '@/api/order'
+
+const defaultForm = {
+  id: '',
+  orderId: ''
+}
+
+export default {
+  name: 'OrderDetail',
+  components: { Sticky },
+  filters: {
+    collectionTime(offer) {
+      if (offer.collectionRange) {
+        return 'Range'
+      } else {
+        return 'Add on days'
+      }
+    },
+    credit(offer) {
+      if (offer.collectionRange) {
+        return 'Range'
+      } else {
+        return 'Add on days'
+      }
+    }
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + 'Epic Success brudda',
+          type: 'error'
+        })
+        callback(new Error(rule.field + ' ERRRR'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      regionListOptions: [],
+      rules: {
+        // image_uri: [{ validator: validateRequire }],
+        name: [{ validator: validateRequire }]
+        // content: [{ validator: validateRequire }],
+        // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return (+new Date(this.postForm.display_time))
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    },
+    exVatPrice: {
+      get() {
+        let price = 0
+        this.postForm.offers.forEach(element => {
+          price += ((element.price * 10) * element.quantityOrdered)
+        })
+        return price.toFixed(2)
+      }
+    },
+    vatPrice: {
+      get() {
+        return (Number(this.exVatPrice) * 0.19).toFixed(2)
+      }
+    },
+    totalPrice: {
+      get() {
+        return (Number(this.exVatPrice) + Number(this.vatPrice)).toFixed(2)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
+
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchOrder(id).then(response => {
+        const order = response.data.order
+
+        this.postForm = order
+
+        // // set tagsview title
+        this.setTagsViewTitle()
+
+        // // set page title
+        this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = 'Edit Order'
+      const route = Object.assign({}, this.tempRoute, { title: `${title} - ${this.postForm.orderId}` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit Order'
+      document.title = `${title} - ${this.postForm.id}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          // Save the account
+          const methodToCall = this.isEdit ? function() {} : function() {}
+          methodToCall(this.postForm).then((r) => {
+            this.$notify({
+              title: 'Success',
+              message: 'FAQ Saved',
+              type: 'success',
+              duration: 2000
+            })
+
+            // Redirect to the edit page when we create a new one
+            if (!this.isEdit) { this.$router.push(`/faqs/edit/${r.data.createdFaq._id}`) }
+
+            this.loading = false
+          }).catch((e) => {
+            console.dir(e)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea /deep/ {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>
diff --git a/src/views/orders/create.vue b/src/views/orders/create.vue
new file mode 100644
index 00000000..78935d4e
--- /dev/null
+++ b/src/views/orders/create.vue
@@ -0,0 +1,13 @@
+<template>
+  <order-detail :is-edit="false" />
+</template>
+
+<script>
+import OrderDetail from './components/OrderDetail'
+
+export default {
+  name: 'CreateForm',
+  components: { OrderDetail }
+}
+</script>
+
diff --git a/src/views/orders/edit.vue b/src/views/orders/edit.vue
new file mode 100644
index 00000000..c16bed3e
--- /dev/null
+++ b/src/views/orders/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <order-detail :is-edit="true" />
+</template>
+
+<script>
+import OrderDetail from './components/OrderDetail'
+
+export default {
+  name: 'EditForm',
+  components: { OrderDetail }
+}
+</script>
+
diff --git a/src/views/orders/list.vue b/src/views/orders/list.vue
new file mode 100644
index 00000000..c0bb3fcf
--- /dev/null
+++ b/src/views/orders/list.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="app-container">
+
+    <div class="filter-container">
+      <el-input v-model="listQuery.orderId" placeholder="Order Id" width="10%" />
+      <el-date-picker
+        v-model="listQuery.dateRange"
+        type="daterange"
+        range-separator="To"
+        start-placeholder="Start date"
+        end-placeholder="End date"
+      />
+      <el-select v-model="listQuery.sellerAccountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Seller Accounts" loading-text="Loading...">
+        <el-option v-for="(item,index) in sellerAccounts" :key="item+index" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-select v-model="listQuery.buyerAccountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Buyer Accounts" loading-text="Loading...">
+        <el-option v-for="(item,index) in buyerAccounts" :key="item+index" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        Search
+      </el-button>
+      <el-button class="filter-item" type="danger" icon="el-icon-remove" @click="resetFilter">
+        Reset
+      </el-button>
+    </div>
+
+    <el-table v-loading="listLoading" :data="list" border fit style="width: 100%" :summary-method="getSummary" show-summary>
+      <el-table-column align="center" label="Date" sortable prop="created" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.created }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" prop="orderId" sortable label="Order Id" width="100" />
+
+      <el-table-column align="center" prop="offers[0].seller.name" sortable label="Seller" width="250" />
+
+      <el-table-column align="center" prop="buyer.name" sortable label="Buyer" width="250" />
+
+      <el-table-column align="center" label="Total" width="120">
+        <template slot-scope="scope">
+          <span>{{ scope.row.offers | totalPrice }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Products" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.offers.length }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column class-name="status-col" label="Status" width="110">
+        <template slot-scope="{row}">
+          <el-tag :type="row.status | statusFilter">
+            {{ row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="120">
+        <template slot-scope="scope">
+          <router-link :to="'/orders/edit/' + scope.row._id">
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+const fetchAccountList = require('@/api/account').fetchList
+import { fetchList } from '@/api/order'
+import moment from 'moment'
+
+export default {
+  name: 'OrderList',
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        Complete: 'success',
+        Cancelled: 'danger'
+      }
+      return statusMap[status]
+    },
+    totalPrice(offers) {
+      let price = 0
+      offers.forEach(element => {
+        price += ((element.price * 10) * element.quantityOrdered)
+      })
+      return `€${(price * 1.19).toFixed(2)}`
+    }
+  },
+  data() {
+    return {
+      sellerAccounts: [],
+      buyerAccounts: [],
+      originalList: null,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        orderId: '',
+        buyerAccountId: '',
+        sellerAccountId: '',
+        dateRange: [moment().startOf('day').startOf('week').toDate(), moment().toDate()]
+      }
+    }
+  },
+  created() {
+    this.listQuery.platform = 'OLFDE'
+    this.getList()
+  },
+  methods: {
+    getRemoteAccountList(query) {
+      query = {}
+      query.platform = 'OLFDE'
+      query.limit = 100
+      fetchAccountList(query).then(response => {
+        if (!response.data.docs) return
+        this.sellerAccounts = response.data.docs.filter(a => a.type === 'seller').map(v => { return { name: v.name, id: v._id } })
+        this.buyerAccounts = response.data.docs.filter(a => a.type === 'buyer').map(v => { return { name: v.name, id: v._id } })
+      })
+    },
+    getSummary(param) {
+      const { data } = param
+      const sums = []
+
+      let totalPrice = 0
+      data.forEach(order => {
+        order.offers.forEach(element => {
+          totalPrice += ((element.price * 10) * element.quantityOrdered)
+        })
+      })
+
+      // Set the sum on the 4th column, as that's the cost one
+      sums[4] = Number(totalPrice * 1.19).toFixed(2)
+
+      return sums
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.originalList = response.data.orders
+        this.total = response.data.orders.length
+        this.listLoading = false
+
+        // Handle the filter for the initial load
+        this.handleFilter()
+      })
+    },
+    resetFilter() {
+      this.listQuery.orderId = ''
+      this.listQuery.dateRange = []
+      this.listQuery.sellerAccountId = ''
+      this.listQuery.buyerAccountId = ''
+    },
+    handleFilter() {
+      const allItems = this.originalList
+
+      // If we have an orderId, that trumps all other fields
+      if (this.listQuery.orderId && this.listQuery.orderId.length > 0) {
+        this.list = allItems.filter(o => o.orderId.indexOf(this.listQuery.orderId) > -1)
+      } else {
+        // We don't have an order id, let's check the other fields to use
+        let newResults = allItems
+
+        if (this.listQuery.dateRange.length === 2) {
+          newResults = newResults.filter(o => {
+            const created = new Date(o.created).getTime()
+            return created > this.listQuery.dateRange[0].getTime() && created < this.listQuery.dateRange[1].getTime()
+          })
+        }
+
+        if (this.listQuery.sellerAccountId.length > 0) {
+          newResults = newResults.filter(o => o.offers[0].seller._id === this.listQuery.sellerAccountId)
+        }
+
+        if (this.listQuery.buyerAccountId.length > 0) {
+          newResults = newResults.filter(o => o.buyer._id === this.listQuery.buyerAccountId)
+        }
+
+        this.list = newResults
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/paymentterms/components/PaymentTermsDetails.vue b/src/views/paymentterms/components/PaymentTermsDetails.vue
new file mode 100644
index 00000000..1fa82b98
--- /dev/null
+++ b/src/views/paymentterms/components/PaymentTermsDetails.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="createAccount-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :z-index="10" :class-name="'sub-navbar ' + postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          Save
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+
+        <el-row>
+          <el-col :span="20">
+            <div class="postInfo-container">
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Id" class="postInfo-container-item">
+                    <el-input v-model="postForm._id" placeholder="Id" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.name" placeholder="Lifting Period Name" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Days" class="postInfo-container-item">
+                    <el-input v-model="postForm.days" placeholder="Lifting Period Days" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { fetchPaymentTerm, updatePaymentTerm, createPaymentTerm } from '@/api/paymentTerm'
+
+const defaultForm = {
+  id: '',
+  name: '',
+  days: 0
+}
+
+export default {
+  name: 'AccountDetail',
+  components: { Sticky },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + 'Epic Success brudda',
+          type: 'error'
+        })
+        callback(new Error(rule.field + ' ERRRR'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      userListOptions: [],
+      rules: {
+        // image_uri: [{ validator: validateRequire }],
+        name: [{ validator: validateRequire }]
+        // content: [{ validator: validateRequire }],
+        // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return (+new Date(this.postForm.display_time))
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
+
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchPaymentTerm(id).then(response => {
+        this.postForm = response.data.paymentTerms
+
+        // // set tagsview title
+        this.setTagsViewTitle()
+
+        // // set page title
+        this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = 'Edit Payment Terms'
+      const route = Object.assign({}, this.tempRoute, { title: `${title} - ${this.postForm.name}` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit Payment Terms'
+      document.title = `${title} - ${this.postForm.name}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          // Save the account
+          const methodToCall = this.isEdit ? updatePaymentTerm : createPaymentTerm
+          methodToCall(this.postForm).then((r) => {
+            this.$notify({
+              title: 'Success',
+              message: 'Payment Terms Saved',
+              type: 'success',
+              duration: 2000
+            })
+
+            // Redirect to the edit page when we create a new one
+            if (!this.isEdit) { this.$router.push(`/payment-terms/edit/${r.data.createdPaymentTerms._id}`) }
+
+            this.loading = false
+          }).catch((e) => {
+            console.dir(e)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea /deep/ {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>
diff --git a/src/views/paymentterms/create.vue b/src/views/paymentterms/create.vue
new file mode 100644
index 00000000..02c911ef
--- /dev/null
+++ b/src/views/paymentterms/create.vue
@@ -0,0 +1,13 @@
+<template>
+  <payment-terms-details :is-edit="false" />
+</template>
+
+<script>
+import PaymentTermsDetails from './components/PaymentTermsDetails'
+
+export default {
+  name: 'CreateForm',
+  components: { PaymentTermsDetails }
+}
+</script>
+
diff --git a/src/views/paymentterms/edit.vue b/src/views/paymentterms/edit.vue
new file mode 100644
index 00000000..9e962d51
--- /dev/null
+++ b/src/views/paymentterms/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <payment-terms-details :is-edit="true" />
+</template>
+
+<script>
+import PaymentTermsDetails from './components/PaymentTermsDetails'
+
+export default {
+  name: 'EditForm',
+  components: { PaymentTermsDetails }
+}
+</script>
+
diff --git a/src/views/paymentterms/list.vue b/src/views/paymentterms/list.vue
new file mode 100644
index 00000000..07ffee7f
--- /dev/null
+++ b/src/views/paymentterms/list.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="app-container">
+
+    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+      <el-table-column align="center" label="Name" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Name" width="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.days }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Actions" width="120">
+        <template slot-scope="scope">
+          <router-link :to="'/payment-terms/edit/' + scope.row._id">
+            <el-button type="primary" size="small" icon="el-icon-edit">
+              Edit
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { fetchList } from '@/api/paymentTerm'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'PaymentTermsList',
+  components: { Pagination },
+  data() {
+    return {
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      }
+    }
+  },
+  created() {
+    // Set the type for the query
+    this.listQuery.platform = 'OLFDE'
+
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.list = response.data.paymentTerms
+        this.total = response.data.paymentTerms.length
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/terminals/components/TerminalDetail.vue b/src/views/terminals/components/TerminalDetail.vue
index 754a0c3e..4591338d 100644
--- a/src/views/terminals/components/TerminalDetail.vue
+++ b/src/views/terminals/components/TerminalDetail.vue
@@ -9,6 +9,7 @@
       </sticky>
 
       <div class="createPost-main-container">
+
         <el-row>
           <el-col :span="20">
             <div class="postInfo-container">
@@ -19,7 +20,7 @@
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-row v-if="$store.state.settings.platform === 'OLFDE'">
+              <el-row>
                 <el-col :span="8">
                   <el-form-item label-width="120px" label="Region:" class="postInfo-container-item">
                     <el-select v-model="postForm.region_id" :remote-method="getRemoteRegionList" filterable default-first-option remote placeholder="Search Regions" loading-text="Loading...">
@@ -31,14 +32,21 @@
               <el-row>
                 <el-col :span="8">
                   <el-form-item label-width="120px" label="Name" class="postInfo-container-item">
-                    <el-input v-model="postForm.name" placeholder="Terminal Name" />
+                    <el-input v-model="postForm.name" placeholder="Terminal Display Name" />
                   </el-form-item>
                 </el-col>
               </el-row>
-              <el-row v-if="$store.state.settings.platform === 'OLFUK'">
+              <el-row>
                 <el-col :span="8">
-                  <el-form-item label-width="120px" label="Identifier" class="postInfo-container-item">
-                    <el-input v-model="postForm.identifier" placeholder="DeliveredIn Identifier" />
+                  <el-form-item label-width="120px" label="Full Name" class="postInfo-container-item">
+                    <el-input v-model="postForm.fullName" placeholder="Terminal Full Name" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Contact Num" class="postInfo-container-item">
+                    <el-input v-model="postForm.contactNumber" placeholder="Terminal Contact Number" />
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -77,6 +85,13 @@
                   </el-form-item>
                 </el-col>
               </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Opening Hours" class="postInfo-container-item">
+                    <el-input v-model="postForm.meta.openingHours" type="textarea" rows="2" placeholder="Terminal Opening Hours" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
               <el-row>
                 <el-col :span="8">
                   <el-form-item label-width="120px" label="Status" class="postInfo-container-item">
@@ -105,19 +120,23 @@ const fetchRegionList = require('@/api/region').fetchList
 const defaultForm = {
   id: '',
   name: '',
+  fullName: '',
+  contactNumber: '',
   region_id: '',
-  identifier: '',
   address: {
     line1: '',
     line2: '',
     county: '',
     postCode: '',
     country: ''
+  },
+  meta: {
+    openingHours: ''
   }
 }
 
 export default {
-  name: 'TerminalDetail',
+  name: 'AccountDetail',
   components: { Sticky },
   props: {
     isEdit: {
@@ -170,7 +189,6 @@ export default {
       this.fetchData(id)
     } else {
       this.postForm = Object.assign({}, defaultForm)
-      this.postForm.address = Object.assign({}, defaultForm.address)
     }
 
     // Why need to make a copy of this.$route here?
@@ -181,7 +199,15 @@ export default {
   methods: {
     fetchData(id) {
       fetchTerminal(id).then(response => {
-        this.postForm = response.data
+        const terminal = response.data
+
+        if (!terminal.meta) {
+          terminal.meta = {
+            openingHours: ''
+          }
+        }
+
+        this.postForm = terminal
 
         // // set tagsview title
         this.setTagsViewTitle()
@@ -206,7 +232,7 @@ export default {
         if (valid) {
           this.loading = true
 
-          // Save the terminal
+          // Save the account
           const methodToCall = this.isEdit ? updateTerminal : createTerminal
           methodToCall(this.postForm).then((r) => {
             this.$notify({
@@ -217,7 +243,8 @@ export default {
             })
 
             // Redirect to the edit page when we create a new one
-            if (!this.isEdit) { this.$router.push(`/terminals/edit/${r.data.createdTerminal._id}`) }
+            if (!this.isEdit) { this.$router.push(`/terminals/edit/${r.data.id}`) }
+
             this.loading = false
           }).catch((e) => {
             console.dir(e)
@@ -230,7 +257,7 @@ export default {
     },
     getRemoteRegionList(query) {
       query = {}
-      query.platform = this.$store.state.platform
+      query.platform = 'OLFDE'
       query.limit = 100
       fetchRegionList(query).then(response => {
         if (!response.data.regions) return
diff --git a/src/views/users/list.vue b/src/views/users/list.vue
index d531bb82..758e3105 100644
--- a/src/views/users/list.vue
+++ b/src/views/users/list.vue
@@ -50,13 +50,16 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column align="center" label="Actions" width="250">
         <template slot-scope="scope">
           <router-link :to="'/users/edit/' + scope.row.id">
             <el-button type="primary" size="small" icon="el-icon-edit">
               Edit
             </el-button>
           </router-link>
+          <el-button type="primary" size="small" icon="el-icon-message" @click="sendPasswordResetConfirm(scope.row.email)">
+            Send PW Reset
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -67,7 +70,7 @@
 
 <script>
 const fetchAccountList = require('@/api/account').fetchList
-import { fetchList } from '@/api/user'
+import { fetchList, sendPasswordReset } from '@/api/user'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
@@ -124,6 +127,30 @@ export default {
     handleFilter(query) {
       this.listQuery.page = 1
       this.getList()
+    },
+    sendPasswordResetConfirm(email) {
+      this.$confirm(`This will send an email to <b>${email}</b>, prompting them to reset their password with the provided link. Are you sure you want to do this?`, 'Warning', {
+        confirmButtonText: 'Proceed',
+        cancelButtonText: 'Cancel',
+        dangerouslyUseHTMLString: true,
+        type: 'warning'
+      }).then(() => {
+        sendPasswordReset(email, 'RESET').then(() => {
+          // Send the request
+          this.$message({
+            type: 'success',
+            message: 'Password Reset Sent'
+          })
+        }).catch(() => {
+          // Send the request
+          this.$message({
+            type: 'danger',
+            message: 'Password Reset Failed'
+          })
+        })
+      }).catch(() => {
+        // Do nothing, we don't care that they clicked cancel, but if we don't catch it, we get a console error
+      })
     }
   }
 }