From 85a042b18ad05898f6557e4eb57ffc8d48dda56e Mon Sep 17 00:00:00 2001
From: glovetleong <glovetleong@gmail.com>
Date: Wed, 7 Jul 2021 17:19:22 +0800
Subject: [PATCH] contract template UI

---
 .../User/Api/ContractTemplateController.php   |   7 +
 .../Modules/User/ContractTemplateModule.php   |  10 +
 resources/js/user/langs/en.js                 |  23 +--
 .../user/pages/contract-templates/Create.vue  |  58 ++++++
 .../Edit.vue}                                 |   6 +-
 .../user/pages/contract-templates/Filter.vue  |  75 +++++++
 .../js/user/pages/contract-templates/Form.vue | 107 ++++++++++
 .../js/user/pages/contract-templates/List.vue |  51 +++++
 .../user/pages/contract-templates/Table.vue   | 195 ++++++++++++++++++
 resources/js/user/pages/contracts/List.vue    |  14 +-
 resources/js/user/pages/contracts/Table.vue   |  86 +++-----
 resources/js/user/router.js                   |  30 +++
 resources/js/user/utilities/constants.js      |  24 ++-
 .../js/user/utilities/navigationAccess.js     |  15 ++
 routes/user/api.php                           |   6 +
 routes/user/web.php                           |   6 +
 16 files changed, 624 insertions(+), 89 deletions(-)
 create mode 100644 resources/js/user/pages/contract-templates/Create.vue
 rename resources/js/user/pages/{contracts/Profile.vue => contract-templates/Edit.vue} (92%)
 create mode 100644 resources/js/user/pages/contract-templates/Filter.vue
 create mode 100644 resources/js/user/pages/contract-templates/Form.vue
 create mode 100644 resources/js/user/pages/contract-templates/List.vue
 create mode 100644 resources/js/user/pages/contract-templates/Table.vue

diff --git a/app/Http/Controllers/User/Api/ContractTemplateController.php b/app/Http/Controllers/User/Api/ContractTemplateController.php
index bf0e7bb..1c9407f 100644
--- a/app/Http/Controllers/User/Api/ContractTemplateController.php
+++ b/app/Http/Controllers/User/Api/ContractTemplateController.php
@@ -45,4 +45,11 @@ class ContractTemplateController extends BaseController
         $contract_template = ContractTemplateModule::delete($request, $hash_id);
         return $contract_template;
     }
+
+    public function validCheck(Request $request, $hash_id = '')
+    {
+        $method = empty($hash_id) ? 'POST' :'PUT';
+        $valid = ContractTemplateModule::validCheck($request, $hash_id, $method);
+        return $valid;
+    }
 }
diff --git a/app/Http/Modules/User/ContractTemplateModule.php b/app/Http/Modules/User/ContractTemplateModule.php
index 30b44f5..f782693 100644
--- a/app/Http/Modules/User/ContractTemplateModule.php
+++ b/app/Http/Modules/User/ContractTemplateModule.php
@@ -70,6 +70,8 @@ class ContractTemplateModule extends BaseController
     public static function show(Request $request, $hash_id)
     {
         $id = Hasher::decode('contract_templates', $hash_id);
+        $user_id = Auth::guard('user-api')->user()->id;
+        
         $contract_template = ContractTemplate::
             where('id', $id)
             ->where('user_id', $user_id)
@@ -166,6 +168,14 @@ class ContractTemplateModule extends BaseController
         return response()->json($data);
     }
 
+    public static function validCheck(Request $request, $hash_id = '', $method = 'POST')
+    {
+        $id = $hash_id ? Hasher::decode('contract_templates', $hash_id) : '';
+        $validation = ContractTemplateModule::validation($request, $id, $method);
+        if (!$validation->status) {
+            return response()->json($validation, 422);
+        }
+    }
 
     private static function validation(Request $request, $id = '', $method = 'POST')
     {
diff --git a/resources/js/user/langs/en.js b/resources/js/user/langs/en.js
index 41b096a..d92642d 100644
--- a/resources/js/user/langs/en.js
+++ b/resources/js/user/langs/en.js
@@ -4,28 +4,7 @@ const En = {
 	'username': 'username',
 	'email': 'email',
 	'password': 'password',
-	'role_id': 'role',
-	'permission_id': 'permission',
-	'phone_code': 'phone code',
-	'code': 'code',
-	'currency_id': 'currency',
-	'language_id': 'language',
-	'symbol': 'symbol',
-	'sell': 'sell',
-	'buy': 'buy',
-	'description': 'description',
-	'min_file_size': 'min file size',
-	'max_file_size': 'max file size',
-	'credit_amount': 'credit amount',
-	'media_property_type_id': 'media property type',
-	'type': 'type',
-	'mime_type_id': 'mime type',
-	'trending_count': 'trending count',
-	'bank_name': 'bank name',
-	'holder_name': 'holder name',
-	'holder_no': 'holder no',
-	'country_id': 'country',
-
+	'complete_day_range': 'complete day range',
 
 	
 	// Error 
diff --git a/resources/js/user/pages/contract-templates/Create.vue b/resources/js/user/pages/contract-templates/Create.vue
new file mode 100644
index 0000000..e756355
--- /dev/null
+++ b/resources/js/user/pages/contract-templates/Create.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <page-title
+      :heading="heading" 
+      :icon="icon"
+      :add="true"
+    ></page-title>
+    <breadcrumb  
+      :menu_item_list="menu_item_list"
+    ></breadcrumb>
+    <contract-template-form
+      :mode="'create'"
+    ></contract-template-form>
+  </div>
+</template>
+<script>
+  import PageTitle from "../../components/titles/PageTitle";
+  import Breadcrumb from "../../layouts/parts/Breadcrumb";
+  import ContractTemplateForm from "./Form";
+
+  export default {
+    metaInfo() {
+        let vm = this;
+        return {
+            title: Constants.site.title,
+            titleTemplate: '%s | ' + vm.$router.currentRoute.name
+        }
+    },
+    components: {
+      PageTitle,
+      Breadcrumb,
+      ContractTemplateForm
+    },
+    data() {
+      return {
+        heading: 'Create Contract Template',
+        icon: 'fa fa-plus',
+        menu_item_list: [
+          {
+            title: 'Dashboard',
+            active: false,
+            path: '/'
+          },
+          {
+            title: 'Contract Template List',
+            active: false,
+            path: '/contract-template/list'
+          },
+          {
+            title: 'Create Contract Template',
+            active: true,
+            path: '/contract-template/create'
+          },
+        ],
+      }
+    }
+  }
+</script>
diff --git a/resources/js/user/pages/contracts/Profile.vue b/resources/js/user/pages/contract-templates/Edit.vue
similarity index 92%
rename from resources/js/user/pages/contracts/Profile.vue
rename to resources/js/user/pages/contract-templates/Edit.vue
index a549586..1d2fc82 100644
--- a/resources/js/user/pages/contracts/Profile.vue
+++ b/resources/js/user/pages/contract-templates/Edit.vue
@@ -9,7 +9,7 @@
       :menu_item_list="menu_item_list"
     ></breadcrumb>
     <admin-form
-      :mode="'profile'"
+      :mode="'edit'"
     ></admin-form>
   </div>
 </template>
@@ -34,7 +34,7 @@
     data() {
       let vm = this;
       return {
-        heading: 'Edit Profile',
+        heading: 'Edit Admin',
         icon: 'fa fa-edit',
         menu_item_list: [
           {
@@ -48,7 +48,7 @@
             path: '/admin/list'
           },
           {
-            title: 'Edit Profile',
+            title: 'Edit Admin',
             active: true,
             path: '/admin/edit/' + vm.$route.params.hash_id
           },
diff --git a/resources/js/user/pages/contract-templates/Filter.vue b/resources/js/user/pages/contract-templates/Filter.vue
new file mode 100644
index 0000000..cf03288
--- /dev/null
+++ b/resources/js/user/pages/contract-templates/Filter.vue
@@ -0,0 +1,75 @@
+<template>
+	<b-col md="12">
+        <form @submit.prevent="$emit('clicked')" @keydown="form.errors.clear($event.target.name)">
+        	<text-input
+                :input_name="'name'"
+                :form="form"
+                :label="'Name'"
+            >
+        	</text-input>
+        	<select-option-auto-complete-input
+	        	:input_name="'status'"
+	        	:form="form"
+			    :exist_data="exist_contract_template_status"
+	        	:placeholder="''"
+	        	:label="'Status'"
+	        	:data_set="contract_template_status"
+	        	:array="true"
+	        ></select-option-auto-complete-input>
+	        <v-btn
+	        	depressed
+	        	small
+				type="submit"
+				color="primary"
+				class="m-0"
+			>
+				Submit
+			</v-btn>
+			<v-btn
+	        	depressed
+	        	small
+				type="button"
+				color="warning"
+				class="m-0"
+				@click="$emit('reset')"
+			>
+				Reset
+			</v-btn>
+        </form>
+	</b-col>
+</template>
+
+<script>
+    import TextInput from '../../components/inputs/TextInput';
+    import SelectOptionAutoCompleteInput from '../../components/inputs/SelectOptionAutoCompleteInput';
+
+	export default {
+		props: {
+			form: Object
+		},
+		components: {
+			TextInput,
+			SelectOptionAutoCompleteInput
+		},
+		data() {
+            let vm = this;
+            return {
+            	exist_contract_template_status: [],
+            	contract_template_status: General.autoCompleteKeyConvert(Constants.contract_template_status)
+            }
+        },
+        methods: {
+			initForm() {
+            	let vm = this;
+        		if (vm.form.status[0]) {
+        			let status_list = [];
+        			vm.exist_contract_template_status = General.initFormArray(vm.contract_template_status, vm.form.status);
+        		}
+        	}
+        },
+        created() {
+        	let vm = this;
+        	vm.initForm();
+        }
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-templates/Form.vue b/resources/js/user/pages/contract-templates/Form.vue
new file mode 100644
index 0000000..25a09fd
--- /dev/null
+++ b/resources/js/user/pages/contract-templates/Form.vue
@@ -0,0 +1,107 @@
+  <template>
+    <b-card class="main-card mb-3">
+      <div v-if="!this_contract_template.data && mode == 'edit'" class="text-center">
+        <vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
+      </div>
+      <div v-if="this_contract_template.data || mode == 'create'">
+        <form-wizard 
+          @on-complete="onComplete"
+          title="" 
+          subtitle=""
+          finish-button-text="Submit"
+          @keydown="form.errors.clear($event.target.name)"
+          color="var(--primary)"
+        >
+          <tab-content 
+            title="Details"
+            :before-change="validOne"
+            ref="valid_one"
+            icon="fa fa-info-circle"
+          >
+            <!-- ///////////////////////////////////////////////////// -->
+            <text-input
+              :input_name="'name'"
+              :form="form"
+              :label="'Name*'"
+            ></text-input>
+            <!-- ///////////////////////////////////////////////////// -->
+            <number-input
+              :input_name="'complete_day_range'"
+              :form="form"
+              :label="'Complete Day Range*'"
+            ></number-input>
+            <!-- ///////////////////////////////////////////////////// -->
+          </tab-content>
+        </form-wizard>
+      </div>
+    </b-card>
+  </template>
+
+  <script>
+    import TextInput from '../../components/inputs/TextInput';
+    import NumberInput from '../../components/inputs/NumberInput';
+
+    export default {
+      props: {
+        mode: String
+      },
+      components: {
+        TextInput,
+        NumberInput,
+      },
+      data() {
+        return {
+          form: new Form({
+            name: '',
+            complete_day_range: '',
+          }),
+          this_contract_template: [],
+        }
+      },
+      methods: {
+        validOne() {
+          let vm = this;
+          let ref_inputs = ['name', 'complete_day_range'];
+          let url = vm.mode == 'create' ? 'contract-template/valid-check' : 'contract-template/valid-check/' + vm.this_contract_template.data.hash_id;
+          return General.validCheck(url, vm.form, ref_inputs);
+        },
+        onComplete() {
+          let vm = this;
+          let method = vm.mode == 'create' ? 'post' : 'put';
+          let url = vm.mode == 'create' ? 'contract-template/store' : 'contract-template/update/' + vm.this_contract_template.data.hash_id;
+
+          return General.onComplete(url, vm.form, method)
+            .then(data => {
+              if (vm.mode != 'profile') {
+                  let pervious_query = data.pervious_query ? '?' + data.pervious_query : '';
+                  vm.$router.push('/contract-template/list' + pervious_query);
+              }
+            
+              if (vm.mode == 'create') {
+                General.toastedMessage('create', 'Admin', data.data.name);
+              }
+              else {
+                General.toastedMessage('edit', 'Admin', data.data.name);
+              }
+            });
+        },
+        loadThisContractTemplate() {
+          let vm = this;
+          let url = vm.mode == 'edit' ? 'contract-template/show/' + vm.$route.params.hash_id : 'contract-template/self';
+          let form = new Form({});
+          General.getCall(url, form).then(data => {
+            vm.this_contract_template = data;
+            vm.form.name = vm.this_contract_template.data.name;
+            vm.form.complete_day_range = vm.this_contract_template.data.complete_day_range;
+            vm.form.status = vm.this_contract_template.data.status;
+          });
+        }
+      },
+      created() {
+        let vm = this;
+        if (vm.mode == 'edit' || vm.mode == 'profile') {
+          vm.loadThisContractTemplate();
+        }
+      }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/user/pages/contract-templates/List.vue b/resources/js/user/pages/contract-templates/List.vue
new file mode 100644
index 0000000..1b66351
--- /dev/null
+++ b/resources/js/user/pages/contract-templates/List.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <page-title
+      :heading="heading" 
+      :icon="icon"
+      :add="true"
+    ></page-title>
+    <breadcrumb  
+      :menu_item_list=menu_item_list
+    ></breadcrumb>
+    <contract-template-table></contract-template-table>
+  </div>
+</template>
+<script>
+  import PageTitle from "../../components/titles/PageTitle";
+  import Breadcrumb from "../../layouts/parts/Breadcrumb";
+  import ContractTemplateTable from "./Table";
+
+  export default {
+    metaInfo() {
+        let vm = this;
+        return {
+          title: Constants.site.title,
+          titleTemplate: '%s | ' + vm.$router.currentRoute.name
+        }
+    },
+    components: {
+      PageTitle,
+      Breadcrumb,
+      ContractTemplateTable
+    },
+    data() {
+      return {
+        heading: 'Contract Template List',
+        icon: 'fa fa-list',
+        menu_item_list: [
+          {
+            title: 'Dashboard',
+            active: false,
+            path: '/'
+          },
+          {
+            title: 'Contract Template List',
+            active: true,
+            path: 'list'
+          },
+        ],
+      }
+    }
+  }
+</script>
diff --git a/resources/js/user/pages/contract-templates/Table.vue b/resources/js/user/pages/contract-templates/Table.vue
new file mode 100644
index 0000000..4e72124
--- /dev/null
+++ b/resources/js/user/pages/contract-templates/Table.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <b-card class="main-card mb-4">
+      <b-row class="mb-2" no-gutters>
+        <b-col md="6">
+            <button type="button" class="btn btn-primary" @click="filterToggle">
+              <i class="fa fa-filter"></i>
+            </button>
+            <div v-if="filter_status" class="filter dropdown-menu show">
+              <contract-template-filter
+                :form="form"
+                @clicked="filterSubmit"
+                @reset="FilterReset"
+              ></contract-template-filter>
+            </div>
+        </b-col>
+        <b-col md="6"  v-if="permission_list.includes('add contract')" class="text-right">
+          <router-link 
+            class="btn btn-primary" 
+            to="create" 
+            tag="button"
+          >
+            <i class="fa fa-plus"></i>
+          </router-link>
+        </b-col>
+      </b-row>
+      <table class="table table-striped">
+        <thead>
+          <paginate-nav
+            v-if="contract_template_list.page"
+            :colspan="colspan"
+            :pervious_page="contract_template_list.page.pervious_page"
+            :next_page="contract_template_list.page.next_page"
+            @clicked="dataHandler"
+          ></paginate-nav>
+          <tr>
+              <th>#</th>
+              <th style="width: 25%">Details</th>
+              <th>Obligation</th>
+              <th>Status</th>
+              <th>Created</th>
+              <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="contract_template_list.data" v-for="(contract, $index) in contract_template_list.data" :key="$index">
+            <td>{{ $index + 1 }}</td>
+            <td>
+              <div><b>Name</b>: {{ contract.name }}</div>
+              <div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
+            </td>
+            <td>
+              <div v-if="contract.contract_template_obligation_list" v-for="(obligation, $index) in contract.contract_template_obligation_list" :key="$index">
+                <div>-{{ obligation.name }}</div>
+              </div>
+              <div v-if="!contract.contract_template_obligation_list[0]">
+                -
+              </div>
+            </td>
+            <td>
+                <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
+            </td>
+            <td>
+              {{ contract.created_at }}
+            </td>
+            <td>
+              <router-link  
+                  v-if="permission_list.includes('edit contract')"
+                  :to="'edit/' + contract.hash_id" 
+                  class="btn btn-xs btn-light" 
+                  title="Edit"
+                >
+                  <i class="fa fa-edit"></i>
+              </router-link>
+            </td>
+          </tr>
+          <tr v-if="!contract_template_list.data || !contract_template_list.data[0]">
+            <td class="text-center" :colspan="colspan">
+              <vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
+              <span v-if="!loading">Empty</span>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot v-if="contract_template_list.page">
+          <paginate-nav
+            :colspan="colspan"
+            :pervious_page="contract_template_list.page.pervious_page"
+            :next_page="contract_template_list.page.next_page"
+            @clicked="dataHandler"
+          >
+          </paginate-nav>
+          <tr>
+            <td class="text-right" :colspan="colspan">
+              <small>Total: {{ contract_template_list.total }}</small>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </b-card>
+  </div>
+</template>
+
+<script>
+  import ContractTemplateFilter from "./Filter";
+  import PaginateNav from '../../components/paginations/NextPerviousPagination';
+
+  export default {
+    components: {
+      ContractTemplateFilter,
+      PaginateNav
+    },
+    data() {
+      return {
+        form: new Form({
+            name: General.getURLParam('name'),
+            email: General.getURLParam('email'),
+            status: General.returnAray(General.getURLParam('status[]')),
+            page: General.getURLParam('page')
+        }),
+        colspan: 7,
+        filter_status: false,
+        loading: true,
+        contract_template_list: [],
+        permission_list: []
+      }
+    },
+    methods: {
+      getPermissionList() {
+        let vm = this;
+        let url = 'user/self';
+        let form = new Form({});
+        General.getCall(url, form).then(response => {
+            vm.permission_list = response.data.permission_list;
+        });
+      },
+      getContractTemplateList() {
+        let vm = this;
+        let url = 'contract-template/list';
+        vm.tableCall(url);
+      },
+      tableCall(url) {
+        let vm = this;
+        vm.loading = true;
+        General.tableCall(url, vm.form).then(response => {
+          vm.loading = false;
+          vm.contract_template_list = response;
+          vm.form.page = General.getURLParam('page');
+          vm.convertStatus();
+        });
+      },
+      convertStatus() {
+        let vm = this;  
+        vm.contract_template_list.data.forEach(function(element, index) {
+          element.status = General.initFormArray(Constants.contract_template_status, [element.status]);
+        });
+      },
+      dataHandler(url) {
+        let vm = this;
+        vm.form.page = General.getStringParam('page', url);
+        vm.tableCall('contract-template/list');
+      },
+      filterToggle() {
+        let vm = this;
+        vm.filter_status = !vm.filter_status;
+      },
+      filterCloseClick(e) {
+        let vm = this;
+        if (!vm.$el.contains(e.target) && !e.target.classList.contains('filter')) {
+          vm.filter_status = false;
+        }
+      },
+      filterSubmit() {
+        let vm = this;
+        let url = 'contract-template/list';
+        vm.form.page = '';
+        vm.tableCall(url);
+        vm.filterToggle();
+      },
+      FilterReset() {
+        let vm = this;
+        vm.form.reset();
+        vm.filterSubmit();
+      }
+    },
+    mounted() {
+      let vm = this;
+      document.addEventListener('click', vm.filterCloseClick);
+    },
+    created() {
+      let vm = this;
+      vm.getPermissionList();
+      vm.getContractTemplateList();
+    }
+  }
+</script>
diff --git a/resources/js/user/pages/contracts/List.vue b/resources/js/user/pages/contracts/List.vue
index deecb09..f289ab2 100644
--- a/resources/js/user/pages/contracts/List.vue
+++ b/resources/js/user/pages/contracts/List.vue
@@ -8,30 +8,30 @@
     <breadcrumb  
       :menu_item_list=menu_item_list
     ></breadcrumb>
-    <admin-table></admin-table>
+    <contract-table></contract-table>
   </div>
 </template>
 <script>
   import PageTitle from "../../components/titles/PageTitle";
   import Breadcrumb from "../../layouts/parts/Breadcrumb";
-  import AdminTable from "./Table";
+  import ContractTable from "./Table";
 
   export default {
     metaInfo() {
         let vm = this;
         return {
-            title: Constants.site.title,
-            titleTemplate: '%s | ' + vm.$router.currentRoute.name
+          title: Constants.site.title,
+          titleTemplate: '%s | ' + vm.$router.currentRoute.name
         }
     },
     components: {
       PageTitle,
       Breadcrumb,
-      AdminTable
+      ContractTable
     },
     data() {
       return {
-        heading: 'Admin List',
+        heading: 'Contract List',
         icon: 'fa fa-list',
         menu_item_list: [
           {
@@ -40,7 +40,7 @@
             path: '/'
           },
           {
-            title: 'Admin List',
+            title: 'Contract List',
             active: true,
             path: 'list'
           },
diff --git a/resources/js/user/pages/contracts/Table.vue b/resources/js/user/pages/contracts/Table.vue
index 1d13a19..ad38ef1 100644
--- a/resources/js/user/pages/contracts/Table.vue
+++ b/resources/js/user/pages/contracts/Table.vue
@@ -7,14 +7,14 @@
               <i class="fa fa-filter"></i>
             </button>
             <div v-if="filter_status" class="filter dropdown-menu show">
-              <admin-filter
+              <contract-filter
                 :form="form"
                 @clicked="filterSubmit"
                 @reset="FilterReset"
-              ></admin-filter>
+              ></contract-filter>
             </div>
         </b-col>
-        <b-col md="6"  v-if="permission_list.includes('add admin')" class="text-right">
+        <b-col md="6"  v-if="permission_list.includes('add contract')" class="text-right">
           <router-link 
             class="btn btn-primary" 
             to="create" 
@@ -27,49 +27,37 @@
       <table class="table table-striped">
         <thead>
           <paginate-nav
-            v-if="admin_list.page"
+            v-if="contract_list.page"
             :colspan="colspan"
-            :pervious_page="admin_list.page.pervious_page"
-            :next_page="admin_list.page.next_page"
+            :pervious_page="contract_list.page.pervious_page"
+            :next_page="contract_list.page.next_page"
             @clicked="dataHandler"
           ></paginate-nav>
           <tr>
               <th>#</th>
-              <th>Profile</th>
               <th style="width: 25%">Details</th>
-              <th>Role</th>
               <th>Status</th>
               <th>Created</th>
               <th>Actions</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-if="admin_list.data" v-for="(admin, $index) in admin_list.data" :key="$index">
+          <tr v-if="contract_list.data" v-for="(contract, $index) in contract_list.data" :key="$index">
             <td>{{ $index + 1 }}</td>
             <td>
-              <img class="img-fluid pointer-cursor" 
-                :src="admin.img[0].file_info.original.file" width="60px" height="60px"
-                @click="ImgPopModalToggle(admin.img)"
-              >
+              <div><b>Name</b>: {{ contract.name }}</div>
+              <div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
             </td>
             <td>
-              <div><b>Name</b>: {{ admin.name }}</div>
-              <div><b>Email</b>: {{ admin.email }}</div>
-              <div><b>Country</b>: {{ admin.country_list[0].name }}</div>
+                <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
             </td>
             <td>
-              {{ admin.role_list[0].name }}
-            </td>
-            <td>
-                <span :class="'badge badge-' + admin.status[0].color">{{ admin.status[0].name }}</span>
-            </td>
-            <td>
-              {{ admin.created_at }}
+              {{ contract.created_at }}
             </td>
             <td>
               <router-link  
-                  v-if="permission_list.includes('edit admin')"
-                  :to="'edit/' + admin.hash_id" 
+                  v-if="permission_list.includes('edit contract')"
+                  :to="'edit/' + contract.hash_id" 
                   class="btn btn-xs btn-light" 
                   title="Edit"
                 >
@@ -77,81 +65,67 @@
               </router-link>
             </td>
           </tr>
-          <tr v-if="!admin_list.data || !admin_list.data[0]">
+          <tr v-if="!contract_list.data || !contract_list.data[0]">
             <td class="text-center" :colspan="colspan">
               <vue-element-loading v-if="loading" :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
               <span v-if="!loading">Empty</span>
             </td>
           </tr>
         </tbody>
-        <tfoot v-if="admin_list.page">
+        <tfoot v-if="contract_list.page">
           <paginate-nav
             :colspan="colspan"
-            :pervious_page="admin_list.page.pervious_page"
-            :next_page="admin_list.page.next_page"
+            :pervious_page="contract_list.page.pervious_page"
+            :next_page="contract_list.page.next_page"
             @clicked="dataHandler"
           >
           </paginate-nav>
           <tr>
             <td class="text-right" :colspan="colspan">
-              <small>Total: {{ admin_list.total }}</small>
+              <small>Total: {{ contract_list.total }}</small>
             </td>
           </tr>
         </tfoot>
       </table>
     </b-card>
-    <img-pop-modal
-      :label="'Profile'"
-      :img="selected_img"
-    >
-    </img-pop-modal>
   </div>
 </template>
 
 <script>
-  import AdminFilter from "./Filter";
-  import ImgPopModal from "../../components/modals/ImgPopModal";
+  import ContractFilter from "./Filter";
   import PaginateNav from '../../components/paginations/NextPerviousPagination';
 
   export default {
     components: {
-      AdminFilter,
-      ImgPopModal,
+      ContractFilter,
       PaginateNav
     },
     data() {
       return {
         form: new Form({
             name: General.getURLParam('name'),
-            email: General.getURLParam('email'),
             status: General.returnAray(General.getURLParam('status[]')),
             page: General.getURLParam('page')
         }),
         colspan: 7,
         filter_status: false,
         loading: true,
-        admin_list: [],
-        selected_img: [],
+        contract_list: [],
         permission_list: []
       }
     },
     methods: {
-      ImgPopModalToggle(img) {
-        let vm = this;
-        vm.selected_img = img;
-        vm.$bvModal.show('img-pop-modal');
-      },
       getPermissionList() {
         let vm = this;
-        let url = 'admin/self';
+        let url = 'user/self';
         let form = new Form({});
         General.getCall(url, form).then(response => {
             vm.permission_list = response.data.permission_list;
         });
       },
-      getAdminList() {
+      getContractList() {
         let vm = this;
-        let url = 'admin/list';
+        let url = 'contract/list';
         vm.tableCall(url);
       },
       tableCall(url) {
@@ -159,21 +133,21 @@
         vm.loading = true;
         General.tableCall(url, vm.form).then(response => {
           vm.loading = false;
-          vm.admin_list = response;
+          vm.contract_list = response;
           vm.form.page = General.getURLParam('page');
           vm.convertStatus();
         });
       },
       convertStatus() {
         let vm = this;  
-        vm.admin_list.data.forEach(function(element, index) {
-            element.status = General.initFormArray(Constants.admin_status, [element.status]);
+        vm.contract_list.data.forEach(function(element, index) {
+            element.status = General.initFormArray(Constants.contract_status, [element.status]);
         });
       },
       dataHandler(url) {
         let vm = this;
         vm.form.page = General.getStringParam('page', url);
-        vm.tableCall('admin/list');
+        vm.tableCall('contract/list');
       },
       filterToggle() {
         let vm = this;
@@ -187,7 +161,7 @@
       },
       filterSubmit() {
         let vm = this;
-        let url = 'admin/list';
+        let url = 'contract/list';
         vm.form.page = '';
         vm.tableCall(url);
         vm.filterToggle();
@@ -205,7 +179,7 @@
     created() {
       let vm = this;
       vm.getPermissionList();
-      vm.getAdminList();
+      vm.getContractList();
     }
   }
 </script>
diff --git a/resources/js/user/router.js b/resources/js/user/router.js
index 70d003a..4ceedab 100644
--- a/resources/js/user/router.js
+++ b/resources/js/user/router.js
@@ -6,6 +6,10 @@ import Logins from './pages/logins/Index';
 import Dashboards from './pages/dashboards/Index';
 import UserProfile from './pages/users/Profile';
 
+import ContractTemplateList from './pages/contract-templates/List';
+import ContractTemplateCreate from './pages/contract-templates/Create';
+import ContractTemplateEdit from './pages/contract-templates/Edit';
+
 import ContractList from './pages/contracts/List';
 import ContractCreate from './pages/contracts/Create';
 import ContractEdit from './pages/contracts/Edit';
@@ -41,6 +45,32 @@ let router = new Router({
             component: Dashboards
         },
         /////////////////////////////////////////////////////
+        // Contract Template
+        {
+            path: '/contract-template/list',
+            name: 'Contract Template List',
+            meta: {
+                auth: true
+            },
+            component: ContractTemplateList
+        },
+        {
+            path: '/contract-template/create',
+            name: 'Contract Template Create',
+            meta: {
+                auth: true
+            },
+            component: ContractTemplateCreate
+        },
+        {
+            path: '/contract-template/edit/:hash_id',
+            name: 'Contract Template Edit',
+            meta: {
+                auth: true
+            },
+            component: ContractTemplateEdit
+        },
+        /////////////////////////////////////////////////////
         // Contract
         {
             path: '/contract/list',
diff --git a/resources/js/user/utilities/constants.js b/resources/js/user/utilities/constants.js
index 7da0d27..f304a68 100644
--- a/resources/js/user/utilities/constants.js
+++ b/resources/js/user/utilities/constants.js
@@ -28,7 +28,7 @@ const Constant = {
          'color': 'danger'
       },
    ],
-   'role_status': [
+   'contract_template_status': [
       {
          'id': 1,
          'name': 'Active',
@@ -39,6 +39,28 @@ const Constant = {
          'name': 'De-active',
          'color': 'danger'
       },
+      {
+         'id': 9,
+         'name': 'Pending',
+         'color': 'warning'
+      },
+   ],
+   'contract_status': [
+      {
+         'id': 1,
+         'name': 'Active',
+         'color': 'primary'
+      },
+      {
+         'id': 2,
+         'name': 'De-active',
+         'color': 'danger'
+      },
+      {
+         'id': 9,
+         'name': 'Pending',
+         'color': 'warning'
+      },
    ],
 };
 export default Constant;
\ No newline at end of file
diff --git a/resources/js/user/utilities/navigationAccess.js b/resources/js/user/utilities/navigationAccess.js
index de63c9e..6bf948c 100644
--- a/resources/js/user/utilities/navigationAccess.js
+++ b/resources/js/user/utilities/navigationAccess.js
@@ -17,6 +17,21 @@ module.exports.menuDefine = function(permission = []) {
         ]
     });
   
+    /////////////////////////////////////////////////////
+    if (permission.includes('view contract_template')) {
+            let admin_access_menu = {};
+            admin_access_menu = {
+                title: 'Contract Template',
+                icon: 'fa fa-copy',
+                child: [
+                    {
+                        href: '/contract-template/list',
+                        title: 'List',
+                    },
+                ]
+            };
+            menu.push(admin_access_menu);
+    }
     /////////////////////////////////////////////////////
     if (permission.includes('view contract')) {
             let admin_access_menu = {};
diff --git a/routes/user/api.php b/routes/user/api.php
index 1f2451c..2cc454c 100644
--- a/routes/user/api.php
+++ b/routes/user/api.php
@@ -140,6 +140,12 @@ Route::group(['namespace' => 'User', 'prefix' => 'user-backsys/api'], function (
 					'middleware' => ['permission:delete contract_template']
 	    		]
 	    	);
+	    	Route::post('valid-check/{hash_id?}', 
+	    		[
+					'as' => 'api.contract-template.valid-check', 
+					'uses' => 'ContractTemplateController@validCheck', 
+	    		]
+	    	);
 		});
 
 		// Contract Templete Obligation
diff --git a/routes/user/web.php b/routes/user/web.php
index 4264452..c40e46a 100644
--- a/routes/user/web.php
+++ b/routes/user/web.php
@@ -4,7 +4,13 @@ Route::group(['namespace' => 'User'], function () {
 	Route::group(['namespace' => 'Web'], function () {
 		Route::get('/login', ['as' => 'user.app.login', 'uses' => 'AppController@index'])->where('any', '.*');
 		Route::get('/user/profile/update', ['as' => 'user.app.profile.update', 'uses' => 'AppController@index'])->where('any', '.*');
+		Route::get('/contract-template/list', ['as' => 'user.app.contract-template.list', 'uses' => 'AppController@index'])->where('any', '.*');
+		Route::get('/contract-template/create', ['as' => 'user.app.contract-template.create', 'uses' => 'AppController@index'])->where('any', '.*');
+		Route::get('/contract-template/edit/{hash_id}', ['as' => 'user.app.contract-template.create', 'uses' => 'AppController@index'])->where('any', '.*');
+
+
 		Route::get('/contract/list', ['as' => 'user.app.contract.list', 'uses' => 'AppController@index'])->where('any', '.*');
+		Route::get('/contract/create', ['as' => 'user.app.contract.create', 'uses' => 'AppController@index'])->where('any', '.*');
 		Route::get('/', ['as' => 'user.app', 'uses' => 'AppController@index'])->where('any', '.*');
 	});
 });
\ No newline at end of file