diff --git a/.gitignore b/.gitignore
index 001e8e83..14be84d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /public
+/node_modules
 /storage
 /tests
 /vendor
diff --git a/Laravel_CSSD.rar b/Laravel_CSSD.rar
deleted file mode 100644
index 6e42d220..00000000
Binary files a/Laravel_CSSD.rar and /dev/null differ
diff --git a/public/js/vue/app.js b/public/js/vue/app.js
index 5d630c72..a4862b41 100644
--- a/public/js/vue/app.js
+++ b/public/js/vue/app.js
@@ -43,7 +43,7 @@
 /******/
 /******/ 	// script path function
 /******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"2e3cea1e2ee220bcd12d","7":"9ef0114b3eb1b40652cd","8":"8e259fe897cde698bfc3","9":"5059ce6d2ab207088c31","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"ea55482413b70efcb3f7","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"45e250b6a4deec80f3f9","23":"700cf55012ee90e7a0ba","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d"}[chunkId] + ".js"
+/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"69bcd2ede72cd73c9641","7":"f650eb3451c4fda7fd36","8":"8e259fe897cde698bfc3","9":"5059ce6d2ab207088c31","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"ea55482413b70efcb3f7","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"fe932b8a08410d22e341","23":"f3007a2471055701da84","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d","26":"6e22d603717ae274cade","27":"761ae3a587940d12282a"}[chunkId] + ".js"
 /******/ 	}
 /******/
 /******/ 	// The require function
@@ -64820,6 +64820,7 @@ var urls = {
   statistics: "/TestResults/chart",
   storeTestType: "/TestTypes",
   storePackage: "/Packages",
+  storeItem: "/Items",
   listTestTypeName: "/TestTypes/ListNames",
   getInputs: "/GetInputs",
   forgotPassword: "/password/phone",
@@ -64916,6 +64917,27 @@ var urls = {
   verifyPackage: function verifyPackage(id) {
     return "/Package/Verify/".concat(id);
   },
+  listItem: function listItem(filter) {
+    return "/Items" + filter;
+  },
+  listAllItem: function listAllItem() {
+    return "/GetItems";
+  },
+  showItem: function showItem(id) {
+    return "/Items/".concat(id);
+  },
+  editItem: function editItem(id) {
+    return "/Items/".concat(id, "/edit");
+  },
+  updateItem: function updateItem(id) {
+    return "/Items/".concat(id);
+  },
+  removeItem: function removeItem(id) {
+    return "Items/".concat(id);
+  },
+  verifyItem: function verifyItem(id) {
+    return "/Item/Verify/".concat(id);
+  },
   Barcode: function Barcode(code) {
     return "/BarCode/".concat(code);
   }
@@ -65565,6 +65587,18 @@ __webpack_require__.r(__webpack_exports__);
   path: '/package/:package/edit',
   name: 'EditPackage',
   view: 'Package/AddEdit'
+}, {
+  path: '/add-Item',
+  name: 'AddItem',
+  view: 'Item/AddEdit'
+}, {
+  path: '/Items',
+  name: 'AllItem',
+  view: 'Item/List'
+}, {
+  path: '/Item/:Item/edit',
+  name: 'EditItem',
+  view: 'Item/AddEdit'
 }, {
   path: '/tickets',
   name: 'Tickets',
@@ -66997,6 +67031,14 @@ var map = {
 		"./resources/js/vue/views/Dashboard.vue",
 		15
 	],
+	"./Item/AddEdit.vue": [
+		"./resources/js/vue/views/Item/AddEdit.vue",
+		27
+	],
+	"./Item/List.vue": [
+		"./resources/js/vue/views/Item/List.vue",
+		26
+	],
 	"./MedicalCenter/AddEdit.vue": [
 		"./resources/js/vue/views/MedicalCenter/AddEdit.vue",
 		16
diff --git a/resources/js/vue/config/urls.js b/resources/js/vue/config/urls.js
index 5c1669e6..4ec411d1 100644
--- a/resources/js/vue/config/urls.js
+++ b/resources/js/vue/config/urls.js
@@ -1,113 +1,134 @@
 const urls = {
-    updateInfo : "/UpdateInfo",
-    getInfo : "/GetInfo",
-    login : "/login",
-    logout : "/logout",
-    storeMedicalCenter : "/MedicalCenters",
-    storeTestResult : "/TestResults",
-    listFilterItemsTestResult : `/TestResults/ListFilterItems`,
-    statistics : `/TestResults/chart`,
-    storeTestType : "/TestTypes",
-    storePackage : "/Packages",
-    listTestTypeName : "/TestTypes/ListNames",
-    getInputs : `/GetInputs`,
-    forgotPassword : `/password/phone`,
-    sendVerifyCode : `/password/verifyCode`,
-    changePassword : `/password/reset`,
-    storeMessages : `/Messages`,
-    listMessages : function(page) {
+    updateInfo: "/UpdateInfo",
+    getInfo: "/GetInfo",
+    login: "/login",
+    logout: "/logout",
+    storeMedicalCenter: "/MedicalCenters",
+    storeTestResult: "/TestResults",
+    listFilterItemsTestResult: `/TestResults/ListFilterItems`,
+    statistics: `/TestResults/chart`,
+    storeTestType: "/TestTypes",
+    storePackage: "/Packages",
+    storeItem: "/Items",
+    listTestTypeName: "/TestTypes/ListNames",
+    getInputs: `/GetInputs`,
+    forgotPassword: `/password/phone`,
+    sendVerifyCode: `/password/verifyCode`,
+    changePassword: `/password/reset`,
+    storeMessages: `/Messages`,
+    listMessages: function(page) {
         return `/Messages?page=${page}`;
     },
-    userSearch : function(val) {
+    userSearch: function(val) {
         return `/users/search?name=${val}`;
     },
-    showMessages : function(user_id) {
+    showMessages: function(user_id) {
         return "/Messages/" + user_id;
     },
-    removeUserMessage : function(user_id) {
+    removeUserMessage: function(user_id) {
         return "/Messages/User/" + user_id;
     },
-    listTestType : function(filter) {
+    listTestType: function(filter) {
         return "/TestTypes" + filter;
     },
-    TestTypeBarcode : function(id) {
-        return  `/TestTypes/Barcode/${id}`;
+    TestTypeBarcode: function(id) {
+        return `/TestTypes/Barcode/${id}`;
     },
-    deleteTestType : function(id) {
+    deleteTestType: function(id) {
         return `/TestTypes/${id}`;
     },
-    editTestType : function(id) {
+    editTestType: function(id) {
         return `/TestTypes/${id}/edit`;
     },
-    updateTestType : function(id) {
+    updateTestType: function(id) {
         return `/TestTypes/${id}`;
     },
-    listTestResult : function(filter) {
+    listTestResult: function(filter) {
         return "/TestResults" + filter;
     },
-    verifyTestResult : function(id) {
+    verifyTestResult: function(id) {
         return `/TestResults/Verify/${id}`;
     },
-    editTestResult : function(id) {
+    editTestResult: function(id) {
         return `/TestResults/${id}/edit`;
     },
-    updateTestResult : function(id) {
+    updateTestResult: function(id) {
         return `/TestResults/${id}`;
     },
-    showTestResult : function(id) {
+    showTestResult: function(id) {
         return `/TestResults/${id}`;
     },
-    removeTestResult : function(id) {
+    removeTestResult: function(id) {
         return `/TestResults/${id}`;
     },
-    listMedicalCenter : function(filter) {
+    listMedicalCenter: function(filter) {
         return "/MedicalCenters" + filter;
     },
-    updateMedicalCenter : function(id) {
+    updateMedicalCenter: function(id) {
         return `/MedicalCenters/${id}`;
     },
-    editMedicalCenter : function(id) {
+    editMedicalCenter: function(id) {
         return `/MedicalCenters/${id}/edit`;
     },
-    deleteMedicalCenter : function(id) {
+    deleteMedicalCenter: function(id) {
         return `/MedicalCenters/${id}`;
     },
     listOpertorMedicalCenter: function(medical_center_id, filter) {
-        return  `/Users/MedicalCenter/${medical_center_id}${filter}`;
+        return `/Users/MedicalCenter/${medical_center_id}${filter}`;
     },
-    listOpertor : function(filter) {
+    listOpertor: function(filter) {
         return "/Users" + filter;
     },
     changeStatusUser: function(userId) {
-        return  `Users/ChangeStatus/${userId}`;
+        return `Users/ChangeStatus/${userId}`;
     },
     changeRoleUser: function(userId) {
-        return  `Users/ChangeRole/${userId}`;
+        return `Users/ChangeRole/${userId}`;
     },
     deleteUser: function(userId) {
-        return  `Users/${userId}`;
+        return `Users/${userId}`;
     },
-    listPackage : function(filter) {
+    listPackage: function(filter) {
         return "/Packages" + filter;
     },
-    showPackage : function(id) {
-        return `/Packages/${id}` ;
+    showPackage: function(id) {
+        return `/Packages/${id}`;
     },
-    editPackage : function(id) {
+    editPackage: function(id) {
         return `/Packages/${id}/edit`;
     },
-    updatePackage : function(id) {
+    updatePackage: function(id) {
         return `/Packages/${id}`;
     },
     removePackage: function(id) {
-        return  `Packages/${id}`;
+        return `Packages/${id}`;
     },
-    verifyPackage : function(id) {
+    verifyPackage: function(id) {
         return `/Package/Verify/${id}`;
     },
-    Barcode : function(code) {
-        return `/BarCode/${code}`;
+    listItem: function(filter) {
+        return "/Items" + filter;
     },
-
+    listAllItem: function() {
+        return "/GetItems";
+    },
+    showItem: function(id) {
+        return `/Items/${id}`;
+    },
+    editItem: function(id) {
+        return `/Items/${id}/edit`;
+    },
+    updateItem: function(id) {
+        return `/Items/${id}`;
+    },
+    removeItem: function(id) {
+        return `Items/${id}`;
+    },
+    verifyItem: function(id) {
+        return `/Item/Verify/${id}`;
+    },
+    Barcode: function(code) {
+        return `/BarCode/${code}`;
+    }
 };
-export {urls};
\ No newline at end of file
+export { urls };
diff --git a/resources/js/vue/router/paths.js b/resources/js/vue/router/paths.js
index c793f71f..9d7c70f1 100644
--- a/resources/js/vue/router/paths.js
+++ b/resources/js/vue/router/paths.js
@@ -151,6 +151,21 @@ export default [
     name: 'EditPackage',
     view: 'Package/AddEdit'
   },
+  {
+    path: '/add-Item',
+    name: 'AddItem',
+    view: 'Item/AddEdit'
+  },
+  {
+    path: '/Items',
+    name: 'AllItem',
+    view: 'Item/List'
+  },
+  {
+    path: '/Item/:Item/edit',
+    name: 'EditItem',
+    view: 'Item/AddEdit'
+  },
   {
     path: '/tickets',
     name: 'Tickets',
diff --git a/resources/js/vue/views/Item/AddEdit.vue b/resources/js/vue/views/Item/AddEdit.vue
new file mode 100644
index 00000000..1df9a59f
--- /dev/null
+++ b/resources/js/vue/views/Item/AddEdit.vue
@@ -0,0 +1,112 @@
+<template>
+  <v-form ref="form">
+    <v-container grid-list-xs fluid>
+      <material-card color="black" title="Add Item">
+        <v-layout align-center justify-center wrap class="px-5 my-3">
+          <v-flex xs12 sm4 md4>
+            <v-text-field
+              name="name"
+              label="Name"
+              color="black"
+              v-model="formData.name"
+              :rules="[rules.required, rules.counter]"
+              class="pa-2"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 sm4 md4>
+            <v-select
+              :items="result"
+              label="Result"
+              name="result"
+              v-model="formData.result"
+              single-line
+              :rules="[rules.required]"
+              class="pa-2"
+              color="black"
+            ></v-select>
+          </v-flex>
+        </v-layout>
+        <v-layout align-center justify-center wrap class="px-5 mb-3">
+          <v-flex xs12 sm12 md12>
+            <v-textarea
+              color="black"
+              :rules="[rules.counter]"
+              v-model="formData.description"
+              class="pa-2"
+              name="address"
+            >
+              <template v-slot:label>
+                <div>description</div>
+              </template>
+            </v-textarea>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap justify-center align-center>
+          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
+              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+              <span class="white--text">SAVE</span>
+            </v-btn>
+          </v-flex>
+          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+            <router-link :to="{name: 'AllItem'}">
+              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                <span class="black--text">Back</span>
+              </v-btn>
+            </router-link>
+          </v-flex>
+        </v-layout>
+      </material-card>
+    </v-container>
+  </v-form>
+</template>
+
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+import { mapMutations } from 'vuex';
+export default {
+  data() {
+    return {
+      formData: {
+        name: "",
+        unique_id: "",
+        result: "",
+        description: "",
+      },
+      result: ["Pass", "Fail"],
+      rules: {
+        required: value => !!value || "Required.",
+        counter: value =>
+          !value || value.length == 0 || value.length >= 5 || "Min 5 characters",
+      }
+    };
+  },
+  created() {
+    if (this.$route.params.Item) {
+      this.load(this.$route.params.Item);
+    }
+  },
+  methods: {
+    async load(id) {
+      const result = await ApiService.get(urls.editItem(id));
+      if (result.status == 200) {
+        this.formData = result.data.data;
+      }
+    },
+     async submitForm() {
+      let result;
+      if (this.$route.params.Item) {
+         result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
+      } else {
+         result = await ApiService.post(urls.storeItem, this.formData);
+      }
+
+      if (result && result.status == 200) {
+        this.$router.push({name: 'AllItem'})
+      }
+    },
+  }
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
new file mode 100644
index 00000000..f755545e
--- /dev/null
+++ b/resources/js/vue/views/Item/List.vue
@@ -0,0 +1,243 @@
+<template>
+    <div class>
+        <v-container fluid>
+            <material-card class color="black" title="All Items" text>
+                <v-layout align-center wrap class="my-3">
+                    <v-flex xs12 md3 sm3>
+                        <v-text-field
+                            class="pa-2"
+                            v-model="filter.name"
+                            label="Name"
+                            color="black"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-autocomplete
+                            class="pa-2"
+                            v-model="filter.result"
+                            label="Result"
+                            color="black"
+                            :items="result"
+                        ></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-text-field
+                            class="pa-2"
+                            v-model="filter.unique_id"
+                            label="uniqueID"
+                            color="black"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex class xs12 md2 sm3>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                            <span class="white--text">Filter</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-spacer></v-spacer>
+                    <v-flex xs12 md2 sm2 class="text-xs-right">
+                        <router-link :to="{name: 'AddItem'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                </v-layout>
+                <v-divider></v-divider>
+                <v-layout align-center wrap class="my-3">
+                    <v-flex md12>
+                        <v-data-table :headers="headers" :items="items" hide-actions>
+                            <template slot="headerCell" slot-scope="{ header }">
+                                <span
+                                    class="subheading font-weight-light text-white text--darken-3"
+                                    v-text="header.text"
+                                />
+                            </template>
+                            <template slot="items" slot-scope="{ item }">
+                                <td class="headline font-weight-light">{{ item.unique_id }}</td>
+                                <td class="title font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">{{ item.result }}</td>
+                                <td class="title font-weight-light">{{ item.created_at }}</td>
+                                <td class="text-xs-right">
+                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                        <span>Show</span>
+                                    </v-btn>
+                                    <router-link
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                        :to="{name: 'EditItem', params: {Item: item.id}}"
+                                    >
+                                        <v-btn color="orange" class="mr-2">
+                                            <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                                            <span>Edit</span>
+                                        </v-btn>
+                                    </router-link>
+                                    <v-btn
+                                        color="pink"
+                                        class="WM-ActionButton"
+                                        @click="remove(item.id)"
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                    >
+                                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                        <span>Remove</span>
+                                    </v-btn>
+                                    <v-btn color="orange darken-1" @click="generateBarcode(item.unique_id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                        <span>Generate Barcode</span>
+                                    </v-btn>
+                                </td>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+                <v-divider></v-divider>
+                <div class="text-xs-center" v-if="lastPage > 1">
+                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                </div>
+                <v-layout row wrap align-center justify-center class="mt-3">
+                    <router-link to="/dashboard">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                            <span class="black--text">Back</span>
+                        </v-btn>
+                    </router-link>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+import { mapMutations, mapGetters } from "vuex";
+export default {
+    data: () => ({
+        headers: [
+            {
+                sortable: true,
+                text: "Unique ID",
+                value: "Unique ID"
+            },
+            {
+                sortable: true,
+                text: "Name",
+                value: "name"
+            },
+            {
+                sortable: false,
+                text: "Result",
+                value: "result"
+            },
+            {
+                sortable: false,
+                text: "Date",
+                value: "date"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "right"
+            }
+        ],
+        filter: {
+            unique_id: '',
+            name: '',
+            result: '',
+        },
+        result: ['Pass', 'Fail'],
+        items: [],
+        currentPage: 1,
+        lastPage: 1,
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = '?';
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += (page) ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(
+                urls.listItem(filter)
+            );
+            if (result && result.status == 200) {
+                this.items = result.data.data.data;
+                this.currentPage = result.data.data.current_page;
+                this.lastPage = result.data.data.last_page;
+            }
+        },
+        async show(testResultId) {
+            const result = await ApiService.get(
+                urls.showItem(testResultId)
+            );
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-item-show",
+                    properties: { result }
+                });
+            }
+        },
+        async remove(testResultId) {
+            const result = await ApiService.delete(
+                urls.removeItem(testResultId)
+            );
+            if (result && result.status == 200) {
+                for (const key in this.items) {
+                    if (
+                        this.items.hasOwnProperty(key) &&
+                        this.items[key].id == testResultId
+                    ) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async generateBarcode(code) {
+            const result = await ApiService.post(urls.Barcode(code));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: { result }
+                });
+            }
+        }
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalResult"])
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        },
+        getModalResult(testResult) {
+            for (const key in this.items) {
+                if (
+                    this.items.hasOwnProperty(key) &&
+                    this.items[key].id == testResult.id
+                ) {
+                    this.items[key] = testResult;
+                }
+            }
+        }
+    }
+};
+</script>
+<style>
+.v-btn--floating {
+    padding: 0!important;
+}
+.theme--light.v-btn.v-btn--flat {
+    color: rgba(0,0,0,.87)!important;
+}
+.v-btn--floating, .v-btn--icon:before {
+    border-radius: 50%!important;
+}
+</style>
diff --git a/resources/js/vue/views/Package/AddEdit.vue b/resources/js/vue/views/Package/AddEdit.vue
index 905f3d6f..c4988fda 100644
--- a/resources/js/vue/views/Package/AddEdit.vue
+++ b/resources/js/vue/views/Package/AddEdit.vue
@@ -13,16 +13,6 @@
               class="pa-2"
             ></v-text-field>
           </v-flex>
-          <v-flex xs12 sm4 md4>
-            <v-text-field
-              name="unique_id"
-              label="UniqueID"
-              color="black"
-              v-model="formData.unique_id"
-              :rules="[rules.required, rules.counter]"
-              class="pa-2"
-            ></v-text-field>
-          </v-flex>
           <v-flex xs12 sm4 md4>
             <v-select
               :items="result"
@@ -38,17 +28,13 @@
         </v-layout>
         <v-layout align-center justify-center wrap class="px-5 mb-3">
           <v-flex xs12 sm12 md12>
-            <v-textarea
-              color="black"
-              :rules="[rules.counter]"
-              v-model="formData.description"
-              class="pa-2"
-              name="address"
-            >
-              <template v-slot:label>
-                <div>description</div>
-              </template>
-            </v-textarea>
+             <v-autocomplete multiple
+             :items="items"
+             item-text="name"
+             item-value="id"
+             label="Select Items For Package"
+             >
+             </v-autocomplete> 
           </v-flex>
         </v-layout>
         <v-layout row wrap justify-center align-center>
@@ -81,10 +67,10 @@ export default {
     return {
       formData: {
         name: "",
-        unique_id: "",
         result: "",
         description: "",
       },
+      items:[] ,
       result: ["Pass", "Fail"],
       rules: {
         required: value => !!value || "Required.",
@@ -97,6 +83,7 @@ export default {
     if (this.$route.params.package) {
       this.load(this.$route.params.package);
     }
+      this.loadItems();
   },
   methods: {
     async load(id) {
@@ -104,6 +91,12 @@ export default {
       if (result.status == 200) {
         this.formData = result.data.data;
       }
+    },
+    async loadItems() {
+      const result = await ApiService.get(urls.listAllItem());
+      if (result.status == 200) {
+        this.items = result.data.data;
+      }
     },
      async submitForm() {
       let result;
diff --git a/resources/js/vue/views/TestResult/AddEdit.vue b/resources/js/vue/views/TestResult/AddEdit.vue
index e172bdf1..4b2ac03c 100644
--- a/resources/js/vue/views/TestResult/AddEdit.vue
+++ b/resources/js/vue/views/TestResult/AddEdit.vue
@@ -61,10 +61,7 @@
                         ></v-text-field>
                     </v-flex>
                     <v-flex xs12 sm4 md4>
-                        <v-switch
-                            v-model="formData.result"
-                            :label="'Result: ' + ((formData.result) ? 'Accept' : 'Reject')"
-                        ></v-switch>
+                        <v-switch v-model="result" :label="'Result: ' + formData.result"></v-switch>
                     </v-flex>
                     <v-flex xs12 sm12 md12>
                         <div>
@@ -258,10 +255,11 @@ export default {
             name: "",
             unique_code: ""
         },
+        result: false,
         formData: {
             device_id: "",
             device_label: "AutoClaveID or WasherID",
-            result: "",
+            result: "Reject",
             cycle_number: "",
             img: null,
             test_type_id: ""
@@ -394,6 +392,13 @@ export default {
     watch: {
         images(img) {
             this.formData.imgs = img;
+        },
+        result(value) {
+            if (value) {
+                this.formData.result = "Accept";
+            } else {
+                this.formData.result = "Reject";
+            }
         }
     }
 };
diff --git a/resources/js/vue/views/TestResult/List.vue b/resources/js/vue/views/TestResult/List.vue
index e8c84a8e..5be860d0 100644
--- a/resources/js/vue/views/TestResult/List.vue
+++ b/resources/js/vue/views/TestResult/List.vue
@@ -301,7 +301,7 @@ export default {
             }
         },
         async generateBarcode(id) {
-             const result = await ApiService.post(urls.Barcode(`Cssd-100 ${id}`));
+             const result = await ApiService.post(urls.Barcode(`110${id}64`));
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-barcode-barcode",
diff --git a/resources/js/vue/views/TestType/AddEdit.vue b/resources/js/vue/views/TestType/AddEdit.vue
index edc0801d..31df1ffa 100644
--- a/resources/js/vue/views/TestType/AddEdit.vue
+++ b/resources/js/vue/views/TestType/AddEdit.vue
@@ -23,6 +23,16 @@
                             class="pa-2"
                         ></v-text-field>
                     </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-autocomplete
+                            :rules="[rules.required]"
+                            :items="deviceLabels"
+                            v-model="form.device_label"
+                            label="ID Label"
+                            color="black"
+                            class="pa-2"
+                        ></v-autocomplete>
+                    </v-flex>
                 </v-layout>
                 <v-layout
                     row
@@ -390,7 +400,11 @@ export default {
             ],
             rules: {
                 required: value => !!value || "Required."
-            }
+            },
+            deviceLabels: [
+                'WasherID',
+                'AutoclaveID'
+            ]
         };
     },
     created() {