Custom fields feature.

client/src/pages/Dashboard/Accounts/AccountForm.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'account-form',
+  data() {
+
+  },
+};
+</script>

client/src/pages/Dashboard/Accounts/AccountsList.vue

@@ -1,9 +1,11 @@
 <template>
+  <div>
 
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'products-list',
-}
+  name: 'accounts-list',
+};
 </script>

client/src/pages/Dashboard/Items/ItemForm.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="item-form" id="item-form">
+    <el-form ref="form" class="form-container">
+      <el-form-item :label="$t('item_name')" prop="title">
+        <el-input v-model="form.name" :maxlength="100" name="name" required />
+      </el-form-item>
+
+      <el-form-item :label="$t('SKU')" prop="title">
+        <el-input v-model="form.SKU" :maxlength="100" name="SKU" required />
+      </el-form-item>
+
+      <el-button type="primary">{{ $t('login') }}</el-button>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'item-form',
+  data() {
+    return {
+      form: {
+        name: '',
+      },
+    };
+  },
+  methods: {
+
+    onSubmit() {
+
+    },
+  },
+};
+</script>

client/src/pages/Dashboard/Items/ItemsDatatable.vue

@@ -0,0 +1,55 @@
+
+<template>
+  <el-table v-loading="isLoading" :data="items.list" border fit highlight-current-row>
+
+  </el-table>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Reloadable from '@/mixins/Reloadable';
+
+const STATE = {
+  LOADING: 1,
+};
+export default {
+  name: 'items-datatable',
+  mixins: [Reloadable],
+  data() {
+    return {
+      current_state: 0,
+      page: 1,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      items: 'getItems',
+    }),
+    isLoading() {
+      return this.current_state === STATE.LOADING;
+    },
+  },
+  created() {
+    this.current_state = STATE.LOADING;
+    this.fetchData();
+    this.current_state = 0;
+  },
+  methods: {
+    ...mapActions(['fetchItems']),
+
+    /**
+     * Handle the reload data.
+     */
+    reloadData() {
+      this.fetchData();
+    },
+
+    /**
+     * Handle the fetch data of datatable.
+     */
+    async fetchData() {
+      await this.fetchItems({ page: this.page });
+    },
+  },
+};
+</script>

client/src/pages/Dashboard/Items/ItemsList.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="User" name="first" :lazy="true">User</el-tab-pane>
+      <el-tab-pane label="Config" name="second" :lazy="true">Config</el-tab-pane>
+      <el-tab-pane label="Role" name="third" :lazy="true">Role</el-tab-pane>
+      <el-tab-pane label="Task" name="fourth" :lazy="true">Task</el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'products-list',
+  data() {
+    return {
+      activeName: 'first',
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+
+    },
+  },
+};
+</script>

client/src/pages/Dashboard/ItemsCategories/ItemCategoryForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'item-category-form',
+  data() {
+    return {
+      form: {
+
+      },
+    };
+  },
+}
+</script>

client/src/pages/Dashboard/ItemsCategories/ItemsCategories.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-table v-loading="isLoading" :data="items.list" border fit highlight-current-row>
+
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'items-categories',
+  data() {
+    return {
+      current_state: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      categories: 'getItemsCategories',
+    }),
+  },
+  methods: {
+    ...mapActions(['fetchItemsCategories']),
+
+    /**
+     * Handle the reload data of the current view.
+     */
+    async reloadData() {
+      await this.fetchData();
+    },
+
+    /**
+     * Handle the fetch data of the datatable.
+     */
+    async fetchData() {
+      await this.fetchItemsCategories();
+    },
+  },
+};
+</script>

client/src/pages/Dashboard/Products/ProductForm.vue

@@ -1,3 +0,0 @@
-<template>
-
-</template>

client/src/pages/Dashboard/Users/UsersList.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>Users List</div>
+</template>
+
+<script>
+export default {
+  name: 'users-list',
+  afterRouteEnter(to, from, next) {
+    debugger;
+    this.$store.commit('setPageTitle', this.$t('users_list'));
+    next();
+  },
+}
+</script>