diff --git a/.drone.yml b/.drone.yml
index 0dc5bb65..321785c2 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -8,13 +8,12 @@ clone:
 # npm config set _auth token add command
 steps:
   - name: clone
-    image: docker.willaspace.com/repository/docker-hosted/alpine/git
+    image: docker-proxy.willaspace.com/alpine/git
     commands:
       - git clone $DRONE_GIT_HTTP_URL .
       - git checkout $DRONE_COMMIT
   - name: Build docker image
-    image: plugins/docker
-    mirror: https://docker.willaspace.com/repository/docker-hosted/
+    image: docker-proxy.willaspace.com/plugins/docker
     environment:
       REGISTRY_USER_NAME:
         from_secret: registry_username
@@ -41,8 +40,7 @@ steps:
         - push
 
   - name: Build docker nginx image
-    image: plugins/docker
-    mirror: https://docker.willaspace.com/repository/docker-hosted/
+    image: docker-proxy.willaspace.com/plugins/docker
     settings:
       tags:
         - nginx-latest
@@ -61,7 +59,7 @@ steps:
         - push
 
   - name: deploy
-    image: docker.willaspace.com/repository/docker-hosted/pelotech/drone-helm3:latest
+    image: docker-proxy.willaspace.com/pelotech/drone-helm3:latest
     environment:
       USERNAME:
         from_secret: registry_username
diff --git a/.values.yaml b/.values.yaml
index 3557c9a5..980336fd 100644
--- a/.values.yaml
+++ b/.values.yaml
@@ -392,13 +392,15 @@ ingress:
 
   # List of host addresses to be exposed by this Ingress
   hosts:
-    - host: cssd-doc.ir
-    - host: cssd-doc.com
+    - host: www.cssd-doc.ir
+    - host: www.cssd-doc.com
   # Additional labels for this Ingress
   additionalLabels:
 
   # Add annotations to this Ingress
   annotations:
+    ingress.kubernetes.io/force-ssl-redirect: "true"
+    nginx.ingress.kubernetes.io/from-to-www-redirect: "true"
   # kubernetes.io/ingress.class: external-ingress
   # ingress.kubernetes.io/rewrite-target: /
   # ingress.kubernetes.io/force-ssl-redirect: true
@@ -408,10 +410,10 @@ ingress:
     # Secrets must be manually created in the namespace.
     - secretName: cssd-doc-ir-certificate
       hosts:
-        - cssd-doc.ir
+        - www.cssd-doc.ir
     - secretName: cssd-doc-com-certificate
       hosts:
-        - cssd-doc.com
+        - www.cssd-doc.com
 
 ##########################################################
 # Route object for exposing services (OpenShift)
@@ -574,13 +576,19 @@ configMap:
                 listen 80;
                 server_name cssd-doc.ir www.cssd-doc.ir;
 
-                return 301 https://cssd-doc.com$request_uri;
+                return 301 https://www.cssd-doc.com$request_uri;
             }
 
-
             server {
                 listen 80;
-                server_name cssd-doc.com www.cssd-doc.com;
+                server_name cssd-doc.com;
+
+                return 301 https://www.cssd-doc.com$request_uri;
+            }
+
+            server {
+                listen 80;
+                server_name www.cssd-doc.com;
 
                 access_log /var/log/nginx/access.log main;
                 error_log /var/log/nginx/error.log;
diff --git a/docker-compose.yml b/docker-compose.yml
deleted file mode 100644
index 44330d0b..00000000
--- a/docker-compose.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-version: '2'
-
-services:
-
-  app:
-    container_name: cssd
-    image: registry.willaspace.com/willaspace/cssd
-    #build:
-    #  context: ./
-    volumes:
-      - /home/administrator/apps/nginx/www/cssd/storage:/var/www/storage
-      - /home/administrator/apps/nginx/www/cssd/public:/var/www/public
-    env_file: '.env'
-    environment:
-      - "DB_HOST=mysql_database"
-      - "REDIS_HOST=cache"
-
-networks:
-  default:
-    external:
-      name: willaengine_default
diff --git a/resources/js/vue/components/modal/barcode/Barcode.vue b/resources/js/vue/components/modal/barcode/Barcode.vue
index debf9b23..218df677 100644
--- a/resources/js/vue/components/modal/barcode/Barcode.vue
+++ b/resources/js/vue/components/modal/barcode/Barcode.vue
@@ -9,19 +9,20 @@
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6 v-if="barcodeimg">
                         <img :src="barcodeimg" class="WM-Width-350"><br />
-                        <span v-if = "Type != 'TestType'">{{ Type+ ' ID :' + ID }}</span>
-                        <span v-else>{{ Type+ ':' + ID }}</span>
+                        <span v-if="Type != 'TestType'">{{ `${Type} ${item.udi ? 'UDI :' : 'ID :'} ${ID}` }}</span>
+                        <span v-else>{{ Type + ':' + ID }}</span>
                     </v-flex>
                 </v-layout>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6 v-if="QRCodeimg">
-                        <a v-if = "Type != 'TestType'":href="ShowLink" target="_blank"><img :src="QRCodeimg" class="WM-Width-150"></a>
+                        <a v-if="Type != 'TestType'" :href="ShowLink" target="_blank"><img :src="QRCodeimg"
+                                class="WM-Width-150"></a>
                         <img v-else :src="QRCodeimg" class="WM-Width-150">
                     </v-flex>
                 </v-layout>
             </v-layout>
             <v-layout row wrap align-center justify-center>
-                <v-flex class xs12 md2 sm2 @click="print" >
+                <v-flex class xs12 md2 sm2 @click="print">
                     <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
                         <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
                         <span class="white--text">Print</span>
@@ -35,15 +36,17 @@
 import { mapGetters } from "vuex";
 export default {
     data: () => ({
-        barcodeimg : null,
-        QRCodeimg : null,
-        ShowLink : '',
-        Type : '',
-        ID : ''
+        barcodeimg: null,
+        QRCodeimg: null,
+        ShowLink: '',
+        Type: '',
+        ID: '',
+        item: {}
     }),
     created() {
+        this.item = this.getModalProperties.item ? this.getModalProperties.item : {};
         this.barcodeimg = this.getModalProperties.result.data.data.Barcode ? this.getModalProperties.result.data.data.Barcode : null;
-        this.QRCodeimg  = this.getModalProperties.result.data.data.QRCode ? this.getModalProperties.result.data.data.QRCode : null;
+        this.QRCodeimg = this.getModalProperties.result.data.data.QRCode ? this.getModalProperties.result.data.data.QRCode : null;
         this.ShowLink = this.getModalProperties.result.data.data.ShowLink ? this.getModalProperties.result.data.data.ShowLink : '#';
         this.Type = this.ShowLink.split('/')[1];
         this.ID = this.ShowLink.split('/')[2];
diff --git a/resources/js/vue/config/urls.js b/resources/js/vue/config/urls.js
index acc7193b..4f25b7ac 100644
--- a/resources/js/vue/config/urls.js
+++ b/resources/js/vue/config/urls.js
@@ -182,6 +182,9 @@ const urls = {
     },
     packageQRCode: function(code) {
         return `/Package/QRCode/${code}`;
+    },
+    changeItemStatus: function(id) {
+        return `/Items/ChangeStatus/${id}`;
     }
 };
 export { urls };
diff --git a/resources/js/vue/styles/css/Assets/Main.scss b/resources/js/vue/styles/css/Assets/Main.scss
index c934f12d..d1f544d7 100644
--- a/resources/js/vue/styles/css/Assets/Main.scss
+++ b/resources/js/vue/styles/css/Assets/Main.scss
@@ -4,12 +4,14 @@
   font-weight: 100;
   src: url('../../fonts/Montserrat-Regular.ttf') format('truetype');
 }
+
 @font-face {
   font-family: 'Montserrat-Medium';
   font-style: normal;
   font-weight: medium;
   src: url('../../fonts/Montserrat-Medium.ttf') format('truetype');
 }
+
 @font-face {
   font-family: 'Montserrat-Bold';
   font-style: normal;
@@ -17,12 +19,28 @@
   src: url('../../fonts/Montserrat-Bold.ttf') format('truetype');
 }
 
-body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.title,.display-1 {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.title,
+.display-1 {
   font-family: 'Montserrat-Regular' !important;
 }
-.CSSD-font, .headline.CSSD-font, h3.CSSD-font {
+
+.CSSD-font,
+.headline.CSSD-font,
+h3.CSSD-font {
   font-family: 'Montserrat-Regular' !important;
 }
+
 .application {
   font-family: 'Montserrat-Regular';
 }
@@ -33,100 +51,130 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.title,.display-1 {
   border-color: transparent !important;
   box-shadow: none !important;
 }
+
 .WM-InlineFlex {
   display: inline-flex;
 }
+
 .WM-FlexCenter {
   display: inline-flex;
   align-items: center;
 }
+
 .WM-FlexWrap {
   display: flex;
   flex-wrap: wrap;
 }
+
 .WM-BorderRadius-5 {
   border-radius: 5px;
 }
+
 .WM-Margin-B-8 {
   margin-bottom: 8px;
 }
+
 .material-icons {
   font-size: 20px !important;
   vertical-align: sub !important;
 }
-.fa, .fas {
+
+.fa,
+.fas {
   font-size: 20px;
 }
+
 .headline {
   // letter-spacing : 7px;
 }
+
 .WM-NoLetterSpacing-7 {
   letter-spacing: 7px !important;
 }
+
 .WM-NoLetterSpacing {
   letter-spacing: 0;
 }
+
 .WM-Border-L-3x {
-    border-left: 3px solid;
+  border-left: 3px solid;
 }
+
 .WM-OrangeGradient-BG {
-    background: linear-gradient(-245.99599235188236deg, rgba(252, 184, 162,1) -0.3020833333333286%,rgba(255, 236, 210,1) 93.03125%);
+  background: linear-gradient(-245.99599235188236deg, rgba(252, 184, 162, 1) -0.3020833333333286%, rgba(255, 236, 210, 1) 93.03125%);
 }
+
 .WM-BlueGradient-BG {
-    background: linear-gradient(-246.25375448810587deg, rgba(213, 245, 253,1) 0.4518229166666856%,rgba(233, 255, 247,1) 92.79557291666667%)
+  background: linear-gradient(-246.25375448810587deg, rgba(213, 245, 253, 1) 0.4518229166666856%, rgba(233, 255, 247, 1) 92.79557291666667%)
 }
+
 .WM-CoffeeGradient-BG {
-    background : linear-gradient(-246.25375448810587deg, rgba(226, 210, 196,1) 0.2955729166666856%,rgba(250, 247, 245,1) 92.63932291666667%);
+  background: linear-gradient(-246.25375448810587deg, rgba(226, 210, 196, 1) 0.2955729166666856%, rgba(250, 247, 245, 1) 92.63932291666667%);
 }
+
 .WM-MuskGradient-BG {
-    background : linear-gradient(113.58893008880955deg, rgba(167, 204, 225,1) 4.927083333333334%,rgba(236, 246, 237,1) 97.84374999999999%);
+  background: linear-gradient(113.58893008880955deg, rgba(167, 204, 225, 1) 4.927083333333334%, rgba(236, 246, 237, 1) 97.84374999999999%);
 }
+
 .WM-CyanBlueGradient-BG {
-    background:linear-gradient(90deg, rgba(29,200,230,1) 20.5625%,rgba(29,200,229,1) 20.5625%,rgba(29,230,184,1) 80.5625%);
+  background: linear-gradient(90deg, rgba(29, 200, 230, 1) 20.5625%, rgba(29, 200, 229, 1) 20.5625%, rgba(29, 230, 184, 1) 80.5625%);
 }
+
 .WM-GreyGradient-BG {
-  background :linear-gradient(-248.2097473199551deg, rgba(220, 220, 220,1) 0.71484375%,rgba(246, 245, 245,1) 92.95442708333334%)
+  background: linear-gradient(-248.2097473199551deg, rgba(220, 220, 220, 1) 0.71484375%, rgba(246, 245, 245, 1) 92.95442708333334%)
 }
+
 .WM-GreenGradient-BG {
-  background : linear-gradient(112.72013189013455deg, rgba(98, 185, 183,1) 4.927083333333334%,rgba(236, 246, 237,1) 97.84374999999999%)
+  background: linear-gradient(112.72013189013455deg, rgba(98, 185, 183, 1) 4.927083333333334%, rgba(236, 246, 237, 1) 97.84374999999999%)
 }
+
 .WM-YellowPinkGradient-BG {
-  background : linear-gradient(111.36820033167237deg, rgba(249, 231, 148,1) 4.927083333333334%,rgba(246, 190, 212,1) 97.84374999999999%)
+  background: linear-gradient(111.36820033167237deg, rgba(249, 231, 148, 1) 4.927083333333334%, rgba(246, 190, 212, 1) 97.84374999999999%)
 }
+
 .WM-YellowGradient-BG {
-  background : linear-gradient(111.36820033167237deg, #f8c369 4.927083333333334%,#ffe8c1 97.84374999999999%)
+  background: linear-gradient(111.36820033167237deg, #f8c369 4.927083333333334%, #ffe8c1 97.84374999999999%)
 }
+
 .WM-LightGreenGradient-BG {
-  background : linear-gradient(111.36820033167237deg, #90f7ec 4.927083333333334%,#32ccbc 97.84374999999999%)
+  background: linear-gradient(111.36820033167237deg, #90f7ec 4.927083333333334%, #32ccbc 97.84374999999999%)
 }
+
 .WM-PinkGradient-BG {
   background: linear-gradient(to right, #ee9ca7, #ffdde1);
 }
+
 .WM-LightGray-color {
-  color: rgba(33,33,33,.7)
+  color: rgba(33, 33, 33, .7)
 }
+
 .WM-Outline-Btn {
   padding: 8px;
-  background:transparent !important;
+  background: transparent !important;
 }
+
 .container.grid-list-xl :not(:only-child) .layout:last-child {
-    margin : 0 !important;
+  margin: 0 !important;
 }
+
 .v-navigation-drawer .v-list .v-list-item .v-list__tile.v-list__tile--active {
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
 }
+
 .v-btn.WM-NoShadow:not(.v-btn--depressed):not(.v-btn--flat) {
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
   padding: 8px 30px;
 }
+
 .inputfile {
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
 }
-.inputfile + label {
+
+.inputfile+label {
   font-size: 16px;
   display: inline-block;
   font-weight: 400;
@@ -139,56 +187,68 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,.title,.display-1 {
   border-radius: 5px;
 }
 
-.inputfile:focus + label,
-.inputfile + label:hover {
+.inputfile:focus+label,
+.inputfile+label:hover {
   border: 1px solid #000;
   color: #000;
 
 }
+
 .inputfile:focus .IconHover,
 .inputfile .IconHover:hover {
   color: #000 !important;
 }
-.v-pagination>li:focus {
 
-}
+.v-pagination>li:focus {}
+
 .theme--light.v-pagination .v-pagination__item:focus {
   outline: 0 !important;
 }
+
 table.v-table tbody td.Height-MD-60 {
   height: 60px;
 }
+
 table.v-table tbody td.Height-MD-80 {
   height: 80px;
 }
+
 .FlexBtn {
   display: flex;
   flex-wrap: nowrap;
   padding: 10px 8px !important;
   justify-content: flex-start;
 }
+
 td.FlexBtn .theme--light.v-btn {
   padding: 21px 20px;
 }
-td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+
+td.FlexBtn a.LinkBtn .theme--light.v-btn {
   padding: 12px 10px;
 }
+
 .ResultMsg {
   font-size: 10px;
   color: #fff;
   padding: 3px 10px;
   border-radius: 5px;
-} 
-.ResultMsg.Reject{
+}
+
+.ResultMsg.Reject {
   background: #ee3552;
 }
-.ResultMsg.Accept{
-  background: #1DE6B8;;
+
+.ResultMsg.Accept {
+  background: #1DE6B8;
+  ;
 }
+
 .theme--light.v-icon.Verified {
   font-size: 15px !important;
   color: #1DE6B8;
 }
+
 .theme--light.v-icon.NotVerified {
   font-size: 15px !important;
   color: #ee3552;
@@ -198,37 +258,47 @@ td.FlexBtn a.LinkBtn .theme--light.v-btn  {
 table.v-table tbody td.FlexBtn:not(:first-child) {
   padding: 12px 8px;
 }
+
 td.FlexBtn .v-btn {
   margin-top: 5px;
 }
+
 .WM-WidthScreen-SM {
-  flex-basis:35% !important;
+  flex-basis: 35% !important;
   max-width: 35% !important;
 }
+
 table.v-table tbody td.Height-SM-48 {
   height: 48px;
 }
+
 .v-card .title {
   font-size: .9rem !important;
 }
+
 .headline {
   font-size: .9rem !important;
 }
+
 .FlexBtn {
   padding: 10px 8px !important;
 }
+
 td.FlexBtn span {
   display: none;
 }
+
 td.FlexBtn .theme--light.v-btn {
   min-width: 30px;
   padding: 15px 10px;
   margin-right: 1 !important;
-  
-} 
-td.FlexBtn a.LinkBtn .theme--light.v-btn  {
+
+}
+
+td.FlexBtn a.LinkBtn .theme--light.v-btn {
   padding: 9px 10px;
 }
+
 td.FlexBtn .theme--light.v-icon {
   margin-right: 0 !important;
 }
@@ -237,8 +307,9 @@ td.FlexBtn .theme--light.v-icon {
   .WM-XL-Align-L {
     text-align: left !important;
   }
-}
-@media screen and(max-width : 1536px) {
+}   
+
+@media screen and (max-width : 1536px) {
   // table.v-table tbody td.FlexBtn:not(:first-child) {
   //   padding: 12px 8px;
   // }
@@ -254,47 +325,56 @@ td.FlexBtn .theme--light.v-icon {
 
 
 
-table.v-table tbody td.Height-SM-48 {
-  height: 48px;
-}
-.v-card .title {
-  font-size: .9rem !important;
-}
-.headline {
-  font-size: .9rem !important;
-}
-.FlexBtn {
-  padding: 10px 8px !important;
-}
-td.FlexBtn span {
-  display: none;
-}
-td.FlexBtn .theme--light.v-btn {
-  min-width: 30px;
-  padding: 15px 10px;
-  margin-right: 1 !important;
-} 
-td.FlexBtn a.LinkBtn .theme--light.v-btn  {
-  padding: 9px 10px;
-}
-td.FlexBtn .theme--light.v-icon {
-  margin-right: 0 !important;
-}
+  table.v-table tbody td.Height-SM-48 {
+    height: 48px;
+  }
+
+  .v-card .title {
+    font-size: .9rem !important;
+  }
+
+  .headline {
+    font-size: .9rem !important;
+  }
+
+  .FlexBtn {
+    padding: 10px 8px !important;
+  }
+
+  td.FlexBtn span {
+    display: none;
+  }
+
+  td.FlexBtn .theme--light.v-btn {
+    min-width: 30px;
+    padding: 15px 10px;
+    margin-right: 1 !important;
+  }
+
+  td.FlexBtn a.LinkBtn .theme--light.v-btn {
+    padding: 9px 10px;
+  }
+
+  td.FlexBtn .theme--light.v-icon {
+    margin-right: 0 !important;
+  }
 
 }
-@media screen and(max-width : 1366px) {
+
+@media screen and (max-width : 1366px) {
   .FlexBtn {
     // padding: 10px 8px !important;
     padding: 20px 8px !important;
   }
+
   td.FlexBtn .v-btn {
     margin-top: -5px;
   }
 }
 
-@media screen and(max-width : 1024px) {
+@media screen and (max-width : 1024px) {
   .WM-WidthScreen-XS {
-    flex-basis:60% !important;
+    flex-basis: 60% !important;
     max-width: 60% !important;
   }
-}
+}
\ No newline at end of file
diff --git a/resources/js/vue/views/Item/AddEdit.vue b/resources/js/vue/views/Item/AddEdit.vue
index 51b56033..7764e629 100644
--- a/resources/js/vue/views/Item/AddEdit.vue
+++ b/resources/js/vue/views/Item/AddEdit.vue
@@ -5,14 +5,8 @@
         <v-layout align-center justify-center wrap class="px-5 my-3">
           <v-flex xs12 md4 sm4 class="WM-FlexCenter">
             <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="name"
-              label="Name"
-              color="black"
-              v-model="formData.name"
-              :rules="[rules.required]"
-              class="py-3 pr-3"
-            ></v-text-field>
+            <v-text-field name="name" label="Name" color="black" v-model="formData.name" :rules="[rules.required]"
+              class="py-3 pr-3"></v-text-field>
           </v-flex>
           <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
             <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
@@ -27,33 +21,28 @@
           </v-flex> -->
           <v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3">
             <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="size"
-              label="Size"
-              color="black"
-              v-model="formData.size"
-              class="py-3 pr-3"
-            ></v-text-field>
+            <v-text-field name="size" label="Size" color="black" v-model="formData.size" class="py-3 pr-3"></v-text-field>
           </v-flex>
           <v-flex xs12 md4 sm4 class="WM-FlexCenter pl-3">
             <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-            <v-text-field
-              name="specific"
-              label="Specific"
-              color="black"
-              v-model="formData.specific"
-              class="py-3 pr-3"
-            ></v-text-field>
+            <v-text-field name="specific" label="Specific" color="black" v-model="formData.specific"
+              class="py-3 pr-3"></v-text-field>
           </v-flex>
         </v-layout>
-        <v-layout align-center justify-center wrap class="px-5 mb-3">
+        <v-layout class="px-5 mb-3">
+          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
+            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+            <v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]"
+              class="py-3 pr-3"></v-text-field>
+          </v-flex>
+          <v-flex xs12 md8 sm8 class="WM-FlexCenter" v-if="galleryDataLoaded">
+            <wm-Dropzone class="w-100" :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.Item"
+              ModelType="Item"></wm-Dropzone>
+          </v-flex>
+        </v-layout>
+        <v-layout align-center wrap class="px-5 mb-3">
           <v-flex xs12 sm12 md12>
-            <v-textarea
-              color="black"
-              v-model="formData.note"
-              class="pa-2"
-              name="address"
-            >
+            <v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
               <template v-slot:label>
                 <div>description</div>
               </template>
@@ -68,7 +57,7 @@
             </v-btn>
           </v-flex>
           <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
-            <router-link :to="{name: 'AllItem'}">
+            <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>
@@ -85,9 +74,17 @@
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 import { mapMutations } from 'vuex';
+import Dropzone from '@/components/core/Dropzone'
+
 export default {
+  components: {
+    'wm-Dropzone': Dropzone,
+  },
   data() {
     return {
+      galleries: [],
+      galleryDataLoaded: false,
+      file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
       formData: {
         name: "",
         unique_id: "",
@@ -105,27 +102,37 @@ export default {
   created() {
     if (this.$route.params.Item) {
       this.load(this.$route.params.Item);
+    } else {
+      this.galleryDataLoaded = true;
     }
   },
   methods: {
     async load(id) {
       const result = await ApiService.get(urls.editItem(id));
       if (result.status == 200) {
+        this.galleries = result.data.data.filesPath;
+        this.galleryDataLoaded = true;  
         this.formData = result.data.data;
       }
     },
-     async submitForm() {
+    async submitForm() {
       let result;
+      this.formData['file_batch_id'] = this.file_batch_id;
       if (this.$route.params.Item) {
-         result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
+        result = await ApiService.put(urls.updateItem(this.$route.params.Item), this.formData);
       } else {
-         result = await ApiService.post(urls.storeItem, this.formData);
+        result = await ApiService.post(urls.storeItem, this.formData);
       }
 
       if (result && result.status == 200) {
-        this.$router.push({name: 'AllItem'})
+        this.$router.push({ name: 'AllItem' })
       }
     },
   }
 };
 </script>
+<style>
+.w-100 {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
index 645875cd..9dcf8ec1 100644
--- a/resources/js/vue/views/Item/List.vue
+++ b/resources/js/vue/views/Item/List.vue
@@ -5,43 +5,22 @@
                 <v-layout align-center wrap class="my-3 px-5">
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.item_id"
-                            label="Item ID"
-                            color="black"
-                        ></v-text-field>
+                        <v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID"
+                            color="black"></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.name"
-                            label="Name"
-                            color="black"
-                        ></v-text-field>
+                        <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
-          						<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
-          						<v-autocomplete
-          							class="py-3 pr-3"
-          							v-model="filter.medical_center_id"
-          							item-text="name"
-          							item-value="id"
-          							label="Hospital"
-          							color="black"
-          							:items="medicalCenters"
-                        :clearable="true"
-          						></v-autocomplete>
-          					</v-flex>
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                        <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
+                            item-value="id" label="Hospital" color="black" :items="medicalCenters"
+                            :clearable="true"></v-autocomplete>
+                    </v-flex>
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.size"
-                            label="Size"
-                            color="black"
-                        ></v-text-field>
+                        <v-text-field class="py-3 pr-3" v-model="filter.size" label="Size" 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()">
@@ -51,7 +30,7 @@
                     </v-flex>
                     <v-spacer></v-spacer>
                     <v-flex xs12 md2 sm2 class="text-xs-right">
-                        <router-link :to="{name: 'AddItem'}">
+                        <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 CSSD-font">Add</span>
@@ -66,66 +45,71 @@
                     <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"
-                                />
+                                <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
                             </template>
                             <template slot="items" slot-scope="{ item }">
                                 <td class="title font-weight-light">{{ item.id }}</td>
                                 <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
                                 <td class="title font-weight-light">{{ item.name }}</td>
-                                <td
-                									class="title font-weight-light"
-                								>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td>
+                                <td class="title font-weight-light">{{ (item.user && item.user.medical_center) ?
+                                    item.user.medical_center.name : '' }}</td>
+                                <td class="title font-weight-light">{{ item.udi }}</td>
                                 <td class="title font-weight-light">{{ item.size }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60">
+                                    <v-tooltip bottom open-on-hover v-if="$hasRole('Supervisor|Admin')">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn :color="item.status ? 'red' : 'green'" class="mr-2"
+                                                @click="changeStatus(item.id)" v-bind="attrs" v-on="on">
+                                                <v-icon class="white--text mr-1 caption">fas {{ item.status ? 'fa-close' :
+                                                    'fa-check' }}</v-icon>
+                                                <span>{{ item.status ? 'reject' : 'approve' }}</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>{{ item.status ? 'reject' : 'approve' }}</span>
+                                    </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
-                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" 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>
+                                        </template>
                                         <span>Show</span>
-                                    </v-btn>
-                                    </template>
-                                    <span>Show</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <router-link class="LinkBtn"
-                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-                                        :to="{name: 'EditItem', params: {Item: item.id}}"
-                                    >
-                                        <v-btn v-bind="attrs" v-on="on" 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>
-                                    </template>
-                                    <span>Edit</span>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <router-link class="LinkBtn"
+                                                v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                                :to="{ name: 'EditItem', params: { Item: item.id } }">
+                                                <v-btn v-bind="attrs" v-on="on" 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>
+                                        </template>
+                                        <span>Edit</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <v-btn
-                                        v-bind="attrs" v-on="on"
-                                        color="pink"
-                                        class="WM-ActionButton mr-2"
-                                        @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>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2"
+                                                @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-trash</v-icon>
+                                                <span>Remove</span>
+                                            </v-btn>
+                                        </template>
                                         <span>Remove</span>
-                                    </v-btn>
-                                    </template>
-                                    <span>Remove</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1" @click="generateBarcode(item.id, 'Item')">
-                                        <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
-                                        <span class="CSSD-font">Generate Barcode</span>
-                                    </v-btn>
-                                    </template>
-                                    <span>Generate Barcode</span>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
+                                                @click="generateBarcode(item, 'Item')">
+                                                <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
+                                                <span class="CSSD-font">Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Generate Barcode</span>
                                     </v-tooltip>
                                 </td>
                             </template>
@@ -172,10 +156,15 @@ export default {
                 value: "name"
             },
             {
-      				sortable: true,
-      				text: "Hospital",
-      				value: "Hospital"
-      			},
+                sortable: true,
+                text: "Hospital",
+                value: "Hospital"
+            },
+            {
+                sortable: false,
+                text: "UDI",
+                value: "udi"
+            },
             {
                 sortable: false,
                 text: "Size",
@@ -191,8 +180,8 @@ export default {
         filter: {
             name: '',
             size: '',
-            item_id : '',
-            medical_center_id : ''
+            item_id: '',
+            medical_center_id: ''
         },
         items: [],
         currentPage: 1,
@@ -223,12 +212,13 @@ export default {
             }
             this.loadMedicalCenters();
         },
-        async generateBarcode(code, type = null) {
+        async generateBarcode(item, type = null) {
+            let code = item.udi ? item.udi : item.id;
             const result = await ApiService.post(urls.Barcode(code, type));
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-barcode-barcode",
-                    properties: { result },
+                    properties: { result, item },
                 });
             }
         },
@@ -258,12 +248,28 @@ export default {
                 }
             }
         },
+        async changeStatus(id) {
+            const result = await ApiService.post(
+                urls.changeItemStatus(id)
+            );
+            if (result) {
+                for (const key in this.items) {
+                    if (
+                        this.items.hasOwnProperty(key) &&
+                        this.items[key].id == id
+                    ) {
+                        this.items[key].status = result.data.data.status;
+                    }
+                }
+            }
+        },
+
         async loadMedicalCenters() {
-    			const result = await ApiService.get(urls.listFilterItemsTestResult);
-    			if (result && result.status == 200) {
-    				this.medicalCenters = result.data.data.MedicalCenters;
-    			}
-    		},
+            const result = await ApiService.get(urls.listFilterItemsTestResult);
+            if (result && result.status == 200) {
+                this.medicalCenters = result.data.data.MedicalCenters;
+            }
+        },
     },
     watch: {
         currentPage(page) {
@@ -274,12 +280,15 @@ export default {
 </script>
 <style>
 .v-btn--floating {
-    padding: 0!important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-    color: rgba(0,0,0,.87)!important;
+    color: rgba(0, 0, 0, .87) !important;
 }
-.v-btn--floating, .v-btn--icon:before {
-    border-radius: 50%!important;
+
+.v-btn--floating,
+.v-btn--icon:before {
+    border-radius: 50% !important;
 }
 </style>
diff --git a/resources/js/vue/views/MedicalCenter/OperatorList.vue b/resources/js/vue/views/MedicalCenter/OperatorList.vue
index 8e44e04d..9d9dfe0c 100644
--- a/resources/js/vue/views/MedicalCenter/OperatorList.vue
+++ b/resources/js/vue/views/MedicalCenter/OperatorList.vue
@@ -51,7 +51,7 @@
                 >
                   <template v-if="item.status == 'Active'">
                     <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
-                    <span v-if="item.status == 'Active'">Susspended</span>
+                    <span v-if="item.status == 'Active'">Suspended</span>
                   </template>
                   <template v-else>
                     <v-icon class="white--text mr-2 caption">fas fa-user-tag</v-icon>
diff --git a/resources/js/vue/views/Package/AddEdit.vue b/resources/js/vue/views/Package/AddEdit.vue
index b33b6ef9..a4163641 100644
--- a/resources/js/vue/views/Package/AddEdit.vue
+++ b/resources/js/vue/views/Package/AddEdit.vue
@@ -4,15 +4,14 @@
 			<material-card color="black" title="Add Package">
 				<v-layout wrap class="px-5 my-3">
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
-							<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-							<v-text-field
-								name="name"
-								label="Name"
-								color="black"
-								v-model="formData.name"
-								:rules="[rules.required, rules.counter]"
-								class="py-3 pr-3"
-							></v-text-field>
+						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+						<v-text-field name="name" label="Name" color="black" v-model="formData.name"
+							:rules="[rules.required, rules.counter]" class="py-3 pr-3"></v-text-field>
+					</v-flex>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
+						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+						<v-text-field name="UDI" label="UDI" color="black" v-model="formData.udi" :rules="[rules.required]"
+							class="py-3 pr-3"></v-text-field>
 					</v-flex>
 					<!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter">
 							<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
@@ -27,46 +26,25 @@
 					</v-flex> -->
 					<v-flex xs12 md12 sm12></v-flex>
 					<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
-						<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput" style="position: relative" v-for="(item, key) in formData.items" :key="key">
-							<div class="Inner">
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput" style="position: relative"
+						v-for="(item, key) in formData.items" :key="key">
+						<div class="Inner">
 							<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
-							<v-autocomplete
+							<v-autocomplete class="py-3 pr-3" :items="items" item-text="name" v-model="item.id"
+								item-value="id" label="Select Items For Package" color="black"></v-autocomplete>
 
-							class="py-3 pr-3"
-							:items="items"
-							item-text="name"
-							v-model="item.id"
-							item-value="id"
-							label="Select Items For Package"
-							color="black"
-							></v-autocomplete>
-
-							<v-btn
-							absolute
-							small
-							right
-							bottom
-							color="cyan"
-							@click="duplicateForm(key)"
-							>
-							<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
-						</v-btn>
-							<v-btn v-if="key > 0"
-							absolute
-							small
-							right
-							top
-							color="pink"
-							@click="removeForm(key)"
-							>
-							<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
-						</v-btn>
+							<v-btn absolute small right bottom color="cyan" @click="duplicateForm(key)">
+								<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
+							</v-btn>
+							<v-btn v-if="key > 0" absolute small right top color="pink" @click="removeForm(key)">
+								<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
+							</v-btn>
 						</div>
-						</v-flex>
+					</v-flex>
 					<!-- </v-row> -->
 					<v-spacer></v-spacer>
 					<v-flex xs12>
-							<hr class="v-divider theme--light" style="margin-top:30px !important">
+						<hr class="v-divider theme--light" style="margin-top:30px !important">
 					</v-flex>
 				</v-layout>
 				<v-layout align-center justify-center wrap class="px-5 mb-3">
@@ -86,7 +64,7 @@
 						</v-btn>
 					</v-flex>
 					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
-						<router-link :to="{name: 'AllPackage'}">
+						<router-link :to="{ name: 'AllPackage' }">
 							<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>
@@ -112,7 +90,7 @@ export default {
 				note: "",
 				items: [
 					{
-						name:''
+						name: ''
 					}
 				]
 			},
@@ -182,10 +160,11 @@ export default {
 .WM-DuplicateInput {
 	margin: 15px 0;
 }
+
 .WM-DuplicateInput .Inner {
 	padding: 15px 20px !important;
 	margin: 0 10px 0 0;
 	width: 100%;
-	border: 1px solid rgba(0,0,0,.2);
+	border: 1px solid rgba(0, 0, 0, .2);
 }
 </style>
diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue
index 20cd7f8d..35cc1378 100644
--- a/resources/js/vue/views/Package/List.vue
+++ b/resources/js/vue/views/Package/List.vue
@@ -5,34 +5,18 @@
                 <v-layout align-center wrap class="mt-3 px-5">
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.package_id"
-                            label="Package ID"
-                            color="black"
-                        ></v-text-field>
+                        <v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID"
+                            color="black"></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.name"
-                            label="Name"
-                            color="black"
-                        ></v-text-field>
+                        <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
-                      <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
-                      <v-autocomplete
-                        class="py-3 pr-3"
-                        v-model="filter.medical_center_id"
-                        item-text="name"
-                        item-value="id"
-                        label="Hospital"
-                        color="black"
-                        :items="medicalCenters"
-                        :clearable="true"
-                      ></v-autocomplete>
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                        <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
+                            item-value="id" label="Hospital" color="black" :items="medicalCenters"
+                            :clearable="true"></v-autocomplete>
                     </v-flex>
                     <!-- <v-flex class xs12 md2 sm3>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
@@ -53,7 +37,7 @@
                     </v-flex>
                     <v-spacer></v-spacer>
                     <v-flex xs12 md2 sm2 class="text-xs-right ml-3">
-                        <router-link :to="{name: 'AddPackage'}">
+                        <router-link :to="{ name: 'AddPackage' }">
                             <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>
@@ -68,68 +52,61 @@
                     <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"
-                                />
+                                <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
                             </template>
                             <template slot="items" slot-scope="{ item }">
                                 <td class="title font-weight-light">{{ item.id }}</td>
                                 <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
                                 <td class="title font-weight-light">{{ item.name }}</td>
-                                <td
-                									class="title font-weight-light"
-                								>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td>
+                                <td class="title font-weight-light">{{ (item.user && item.user.medical_center) ?
+                                    item.user.medical_center.name : '' }}</td>
                                 <td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
+                                <td class="title font-weight-light">{{ item.udi }}</td>
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60">
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2" @click="show(item.id)">
-                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" 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>
+                                        </template>
                                         <span>Show</span>
-                                    </v-btn>
-                                    </template>
-                                    <span>Show</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <router-link
-                                        class="LinkBtn"
-                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-                                        :to="{name: 'EditPackage', params: {package: item.id}}"
-                                    >
-                                        <v-btn v-bind="attrs" v-on="on" 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>
-                                    </template>
-                                    <span>Edit</span>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <router-link class="LinkBtn"
+                                                v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                                :to="{ name: 'EditPackage', params: { package: item.id } }">
+                                                <v-btn v-bind="attrs" v-on="on" 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>
+                                        </template>
+                                        <span>Edit</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <v-btn
-                                        v-bind="attrs" v-on="on"
-                                        color="pink"
-                                        class="WM-ActionButton mr-2"
-                                        @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>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="pink" class="WM-ActionButton mr-2"
+                                                @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>
+                                        </template>
                                         <span>Remove</span>
-                                    </v-btn>
-                                    </template>
-                                    <span>Remove</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
-                                    <template v-slot:activator="{ on, attrs }">
-                                    <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1" @click="generateBarcode(item.id, 'Package')">
-                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
+                                                @click="generateBarcode(item.id, 'Package')">
+                                                <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
                                         <span>Generate Barcode</span>
-                                    </v-btn>
-                                    </template>
-                                    <span>Generate Barcode</span>
                                     </v-tooltip>
                                 </td>
                             </template>
@@ -176,15 +153,19 @@ export default {
                 value: "name"
             },
             {
-      				sortable: true,
-      				text: "Hospital",
-      				value: "Hospital"
-      			},
+                sortable: true,
+                text: "Hospital",
+                value: "Hospital"
+            },
             {
                 sortable: true,
                 text: "User",
                 value: "User"
             },
+            {
+                text: "UDI",
+                value: "udi"
+            },
             {
                 sortable: true,
                 text: "Description",
@@ -199,8 +180,8 @@ export default {
         ],
         filter: {
             name: '',
-            package_id : '',
-            medical_center_id : ''
+            package_id: '',
+            medical_center_id: ''
         },
         result: ['Pass', 'Fail'],
         items: [],
@@ -267,10 +248,10 @@ export default {
             }
         },
         async loadMedicalCenters() {
-          const result = await ApiService.get(urls.listFilterItemsTestResult);
-          if (result && result.status == 200) {
-            this.medicalCenters = result.data.data.MedicalCenters;
-          }
+            const result = await ApiService.get(urls.listFilterItemsTestResult);
+            if (result && result.status == 200) {
+                this.medicalCenters = result.data.data.MedicalCenters;
+            }
         },
     },
     computed: {
@@ -295,12 +276,15 @@ export default {
 </script>
 <style>
 .v-btn--floating {
-    padding: 0!important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-    color: rgba(0,0,0,.87)!important;
+    color: rgba(0, 0, 0, .87) !important;
 }
-.v-btn--floating, .v-btn--icon:before {
-    border-radius: 50%!important;
+
+.v-btn--floating,
+.v-btn--icon:before {
+    border-radius: 50% !important;
 }
 </style>
diff --git a/resources/js/vue/views/TestResult/List.vue b/resources/js/vue/views/TestResult/List.vue
index 7332c091..4a52446e 100644
--- a/resources/js/vue/views/TestResult/List.vue
+++ b/resources/js/vue/views/TestResult/List.vue
@@ -1,132 +1,60 @@
 <template>
-    <div class>
-        <v-container fluid>
-            <material-card class color="black" title="All Test Result" text>
-                <v-layout align-center wrap class="px-5 mb-3 my-3">
-                  <v-flex xs12 md2 sm3 class="WM-FlexCenter">
-                      <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.device_id"
-                            label="ID"
-                            color="black"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
-                        <v-autocomplete
-                            :items="deviceLabels"
-                            item-text="name"
-                            item-value="id"
-                            v-model="filter.device_label"
-                            label="ID Label"
-                            color="black"
-                            class="py-3 pr-3"
-                            :clearable="true"
-                        ></v-autocomplete>
-                    </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-                        <v-autocomplete
-                            class="py-3 pr-3"
-                            v-model="filter.testType_id"
-                            label="TestType Name"
-                            color="black"
-                            :items="testTypes"
-                            item-text="name"
-                            item-value="id"
-                        ></v-autocomplete>
-                    </v-flex>
-                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-          						<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
-                        <v-autocomplete
-                            class="py-3 pr-3"
-                            v-model="filter.medicalCenter_id"
-                            label="Hospital"
-                            color="black"
-                            :items="medicalCenters"
-                            item-text="name"
-                            item-value="id"
-                            :clearable="true"
-                        ></v-autocomplete>
-                    </v-flex>
-                    <v-flex xs12 md2 sm3 class="WM-FlexCenter">
-                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-                        <v-text-field
-                            class="py-3 pr-3"
-                            v-model="filter.user_name"
-                            label="User Name"
-                            color="black"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter">
-                        <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-                        <v-menu
-                            lazy
-                            :close-on-content-click="true"
-                            transition="v-scale-transition"
-                            offset-y
-                            v-model="fromMenu"
-                        >
-                            <v-text-field
-                                class="py-3 pr-3"
-                                required
-                                slot="activator"
-                                label="FromDate"
-                                v-model="filter.fromPicker"
-                                color="black"
-                            ></v-text-field>
-                            <v-date-picker
-                                color="pink"
-                                no-title
-                                v-model="filter.fromPicker"
-                                :date-format="date => new Date(date).toDateString()"
-                            ></v-date-picker>
-                        </v-menu>
-                    </v-flex>
-                    <v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;">
-                        <v-icon class="far fa-calendar-alt mr-2"></v-icon>
-                        <v-menu
-                            lazy
-                            :close-on-content-click="true"
-                            transition="v-scale-transition"
-                            offset-y
-                            v-model="upToMenu"
-                        >
-                            <v-text-field
-                                class="py-3 pr-3"
-                                required
-                                slot="activator"
-                                label="UpToDate"
-                                color="black"
-                                v-model="filter.upToPicker"
-                            ></v-text-field>
-                            <v-date-picker
-                                color="pink"
-                                no-title
-                                v-model="filter.upToPicker"
-                                :date-format="date => new Date(date).toDateString()"
-                            ></v-date-picker>
-                        </v-menu>
-                    </v-flex>
-                    <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
+<div class>
+    <v-container fluid>
+        <material-card class color="black" title="All Test Result" text>
+            <v-layout align-center wrap class="px-5 mb-3 my-3">
+                <v-flex xs12 md2 sm3 class="WM-FlexCenter">
+                    <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                    <v-text-field class="py-3 pr-3" v-model="filter.device_id" label="ID" color="black"></v-text-field>
+                </v-flex>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                    <v-autocomplete :items="deviceLabels" item-text="name" item-value="id" v-model="filter.device_label" label="ID Label" color="black" class="py-3 pr-3" :clearable="true"></v-autocomplete>
+                </v-flex>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-autocomplete class="py-3 pr-3" v-model="filter.testType_id" label="TestType Name" color="black" :items="testTypes" item-text="name" item-value="id"></v-autocomplete>
+                </v-flex>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
+                    <v-autocomplete class="py-3 pr-3" v-model="filter.medicalCenter_id" label="Hospital" color="black" :items="medicalCenters" item-text="name" item-value="id" :clearable="true"></v-autocomplete>
+                </v-flex>
+                <v-flex xs12 md2 sm3 class="WM-FlexCenter">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-text-field class="py-3 pr-3" v-model="filter.user_name" label="User Name" color="black"></v-text-field>
+                </v-flex>
+                <v-flex xs12 sm6 md2 pl-3 class="WM-FlexCenter">
+                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                    <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y v-model="fromMenu">
+                        <v-text-field class="py-3 pr-3" required slot="activator" label="FromDate" v-model="filter.fromPicker" color="black"></v-text-field>
+                        <v-date-picker color="pink" no-title v-model="filter.fromPicker" :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs12 sm6 md2 pl-3 style="display: flex;align-items: center;">
+                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
+                    <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y v-model="upToMenu">
+                        <v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black" v-model="filter.upToPicker"></v-text-field>
+                        <v-date-picker color="pink" no-title v-model="filter.upToPicker" :date-format="date => new Date(date).toDateString()"></v-date-picker>
+                    </v-menu>
+                </v-flex>
+                <v-flex xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
+                        <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 wrap xs12 md2 sm2 class="WM-Align-R">
+                    <router-link :to="{name: 'SubmitTestResult'}">
+                        <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>
-                    </v-flex>
-                    <v-spacer></v-spacer>
-                    <v-flex wrap xs12 md2 sm2 class="WM-Align-R">
-                        <router-link :to="{name: 'SubmitTestResult'}">
-                            <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-layout wrap class="px-5 mb-3 my-3">
-                    <!-- <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
+                    </router-link>
+                </v-flex>
+            </v-layout>
+            <v-layout wrap class="px-5 mb-3 my-3">
+                <!-- <v-flex class xs12 md3 sm3 class="WM-XL-Align-L text-lg-left">
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load(null, null)">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
@@ -141,131 +69,116 @@
                             </v-btn>
                         </router-link>
                     </v-flex> -->
-                </v-layout>
-                <v-layout class="px-4 my-3">
-                    <v-divider></v-divider>
-                </v-layout>
-                <v-layout align-center wrap class="px-5 my-2">
-                    <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.id }}</td>
-                                <td
-                                    class="title font-weight-light"
-                                >{{ item.test_type ? item.test_type.name : 'Archived Test' }}</td>
-                                <td
-                                    class="title font-weight-light"
-                                >{{ item.user.medical_center.name }}</td>
-                                <td class="title font-weight-light">{{ item.user.name }}</td>
-                                <td class="title font-weight-light">
-                                    <span v-if="item.result == 'Reject'" class="ResultMsg Reject">
+            </v-layout>
+            <v-layout class="px-4 my-3">
+                <v-divider></v-divider>
+            </v-layout>
+            <v-layout align-center wrap class="px-5 my-2">
+                <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.id }}</td>
+                            <td class="title font-weight-light">{{ item.test_type ? item.test_type.name : 'Archived Test' }}</td>
+                            <td class="title font-weight-light">{{ item.user.medical_center.name }}</td>
+                            <td class="title font-weight-light">{{ item.user.name }}</td>
+                            <td class="title font-weight-light">
+                                <span v-if="item.result == 'Reject'" class="ResultMsg Reject">
                                     {{ item.result }}
-                                    </span>
-                                    <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
+                                </span>
+                                <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
                                     {{ item.result }}
-                                    </span>
-                                </td>
-                                <td class="title font-weight-light">{{ item.created_at }}</td>
-                                <td class="title font-weight-light">
-                                    <span v-if="item.verified == 'NotVerified'" class="NotVerified">
-                                        <v-icon class="caption fa fa-times NotVerified"></v-icon>
-                                    </span>
-                                    <span v-if="item.verified == 'Verified'" class="">
-                                        <v-icon class="caption fa fa-check Verified"></v-icon>
-                                    </span>
-                                    <!-- {{ item.verified }} -->
-                                </td>
-                                <td class="text-xs-right FlexBtn">
-                                    <v-tooltip bottom open-on-hover>
+                                </span>
+                            </td>
+                            <td class="title font-weight-light">{{ item.created_at }}</td>
+                            <td class="title font-weight-light">
+                                <span v-if="item.verified == 'NotVerified'" class="NotVerified">
+                                    <v-icon class="caption fa fa-times NotVerified"></v-icon>
+                                </span>
+                                <span v-if="item.verified == 'Verified'" class="">
+                                    <v-icon class="caption fa fa-check Verified"></v-icon>
+                                </span>
+                                <!-- {{ item.verified }} -->
+                            </td>
+                            <td class="text-xs-right FlexBtn">
+                                <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
-                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs"
-                                        v-on="on">
-                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
-                                        <span>Show</span>
-                                    </v-btn>
+                                        <v-btn color="cyan" class="mr-2" @click="show(item.id)" v-bind="attrs" v-on="on">
+                                            <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                            <span>Show</span>
+                                        </v-btn>
                                     </template>
                                     <span>Show</span>
-                                    </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
-                                    <v-btn color="orange" class="mr-2" @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs"
-                                        v-on="on">
-                                        <v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
-                                        <span>generate Barcode</span>
-                                    </v-btn>
+                                        <v-btn color="orange" class="mr-2" @click="generateBarcode(item.id, 'TestResult')" v-bind="attrs" v-on="on">
+                                            <v-icon class="white--text mr-1 caption">fa fa-bars</v-icon>
+                                            <span>generate Barcode</span>
+                                        </v-btn>
                                     </template>
                                     <span>generate Barcode</span>
-                                    </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
                                         <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
-                                    <router-link class="LinkBtn"
-                                        v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
-
-                                        :to="{name: 'EditTestResult', params: {testResult: item.id}}"
-                                    >
-                                        <v-btn color="orange" class="mr-2" v-bind="attrs"
-                                        v-on="on">
-                                            <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
-                                            <span>Edit</span>
-                                        </v-btn>
-                                    </router-link>
+                                        <router-link class="LinkBtn" v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')" :to="{name: 'EditTestResult', params: {testResult: item.id}}">
+                                            <v-btn color="orange" class="mr-2" v-bind="attrs" v-on="on">
+                                                <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                                                <span>Edit</span>
+                                            </v-btn>
+                                        </router-link>
                                     </template>
                                     <span>Edit</span>
-                                    </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
+                                </v-tooltip>
+                                <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
-                                      <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
-                                    <v-btn
-                                        color="pink"
-                                        class="WM-ActionButton"
-                                        @click="remove(item.id)"
-                                        v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')"
-                                        v-bind="attrs"
-                                        v-on="on"
-                                    >
-                                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                                        <span>Remove</span>
-                                    </v-btn>
+                                        <!-- v-if="$hasRole('Admin') || item.user_id == $store.state.user.id" -->
+                                        <v-btn color="pink" class="WM-ActionButton" @click="remove(item.id)" v-if="$hasRole('Admin') || (item.user_id == $store.state.user.id && item.verified == 'None')" v-bind="attrs" v-on="on">
+                                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                            <span>Remove</span>
+                                        </v-btn>
                                     </template>
                                     <span>Remove</span>
-                                    </v-tooltip>
-                                </td>
-                            </template>
-                        </v-data-table>
-                    </v-flex>
-                </v-layout>
-                <v-divider></v-divider>
-                <div class="text-xs-center mt-2" v-if="lastPage > 1">
-                    <v-pagination color="black" 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>
+                                </v-tooltip>
+                            </td>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+            <v-divider></v-divider>
+            <div class="text-xs-center mt-2" v-if="lastPage > 1">
+                <v-pagination color="black" 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";
+import {
+    ApiService
+} from "@/services";
+import {
+    urls
+} from "@/config/urls";
+import {
+    mapMutations,
+    mapGetters
+} from "vuex";
 export default {
     data: () => ({
-        headers: [
-            {
+        headers: [{
                 sortable: false,
                 text: "ID",
                 value: "name"
@@ -308,13 +221,13 @@ export default {
             }
         ],
         filter: {
-            device_id:'',
+            device_id: '',
             testType_id: '',
             medicalCenter_id: '',
             user_name: '',
             fromPicker: '',
             upToPicker: '',
-            device_label:''
+            device_label: ''
         },
         fromMenu: '',
         upToMenu: '',
@@ -323,19 +236,54 @@ export default {
         lastPage: 1,
         testTypes: [],
         medicalCenters: [],
-        deviceLabels: [
-          { name: "Washer ID", id: "Washer ID" },
-          { name: "Autoclave ID", id: "Autoclave ID" },
-          { name: "Sterilizer ID", id: "Sterilizer ID" },
-          { name: "Seal Machine ID", id: "Seal Machine ID" },
-          { name: "Patiant ID", id: "Patiant ID" },
-          { name: "Set/Pack ID", id: "Set/Pack ID" },
-          { name: "Medical Device ID", id: "Medical Device ID" },
-          { name: "OR ID", id: "OR ID" },
-          { name: "Personal ID", id: "Personal ID" },
-          { name: "Instrument ID", id: "Instrument ID" },
-          { name: "Basket ID", id: "Basket ID" },
-          { name: "Implant ID", id: "Implant ID" },
+        deviceLabels: [{
+                name: "Washer ID",
+                id: "Washer ID"
+            },
+            {
+                name: "Autoclave ID",
+                id: "Autoclave ID"
+            },
+            {
+                name: "Sterilizer ID",
+                id: "Sterilizer ID"
+            },
+            {
+                name: "Seal Machine ID",
+                id: "Seal Machine ID"
+            },
+            {
+                name: "Patiant ID",
+                id: "Patiant ID"
+            },
+            {
+                name: "Set/Pack ID",
+                id: "Set/Pack ID"
+            },
+            {
+                name: "Medical Device ID",
+                id: "Medical Device ID"
+            },
+            {
+                name: "OR ID",
+                id: "OR ID"
+            },
+            {
+                name: "Personal ID",
+                id: "Personal ID"
+            },
+            {
+                name: "Instrument ID",
+                id: "Instrument ID"
+            },
+            {
+                name: "Basket ID",
+                id: "Basket ID"
+            },
+            {
+                name: "Implant ID",
+                id: "Implant ID"
+            },
         ]
     }),
     created() {
@@ -375,7 +323,9 @@ export default {
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-testresult-show",
-                    properties: { result }
+                    properties: {
+                        result
+                    }
                 });
             }
         },
@@ -402,11 +352,13 @@ export default {
             }
         },
         async generateBarcode(id, type) {
-             const result = await ApiService.post(urls.Barcode(id, type));
+            const result = await ApiService.post(urls.Barcode(id, type));
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-barcode-barcode",
-                    properties: { result }
+                    properties: {
+                        result
+                    }
                 });
             }
         }
@@ -416,7 +368,12 @@ export default {
     },
     watch: {
         currentPage(page) {
-            this.load(page);
+            if (this.$route.name == "NotVerifyTestResult") {
+                this.load(page, "NotVerified,None");
+            } else {
+                this.load(page);
+            }
+
         },
         getModalResult(testResult) {
             for (const key in this.items) {
@@ -424,32 +381,38 @@ export default {
                     this.items.hasOwnProperty(key) &&
                     this.items[key].id == testResult.id
                 ) {
-                    this.items[key] = testResult;
+                    this.items[key].verified = testResult.verified;
                 }
             }
         }
     }
 };
 </script>
+
 <style>
 .v-btn--floating {
-    padding: 0!important;
+    padding: 0 !important;
 }
+
 .theme--light.v-btn.v-btn--flat {
-    color: rgba(0,0,0,.87)!important;
+    color: rgba(0, 0, 0, .87) !important;
 }
-.v-btn--floating, .v-btn--icon:before {
-    border-radius: 50%!important;
+
+.v-btn--floating,
+.v-btn--icon:before {
+    border-radius: 50% !important;
 }
+
 /* --------------------------------------------------------
                         Tables :: Begin
 -------------------------------------------------------- */
 @media screen and (max-width: 1536px) {
-  .v-card .title {
-    font-size: 0.9rem !important;
-}
+    .v-card .title {
+        font-size: 0.9rem !important;
+    }
 
 }
+
 /* .FlexBtn {
     display: flex;
     flex-wrap: nowrap;
@@ -481,5 +444,4 @@ td.FlexBtn .theme--light.v-icon {
     margin-right: 0 !important;
 }
 } */
-
 </style>
diff --git a/resources/js/vue/views/User/List.vue b/resources/js/vue/views/User/List.vue
index dc6473d4..13f9fdd0 100644
--- a/resources/js/vue/views/User/List.vue
+++ b/resources/js/vue/views/User/List.vue
@@ -137,14 +137,14 @@
                                 <template v-slot:activator="{ on, attrs }">
                                     <v-btn
                                         v-bind="attrs" v-on="on"
-                                        :color="item.status == 'Active' ? 'red' : 'green'"
+                                        :color="item.status == 'Active' ? 'green' : 'red'"
                                         @click="changeStatus(item.id)"
                                         class="mr-2 WM-ActionButton"
                                         v-if="$hasRole('Admin|Supervisor')"
                                     >
                                         <template v-if="item.status == 'Active'">
                                             <v-icon class="white--text mr-2 caption">fa fa-pause</v-icon>
-                                            <span v-if="item.status == 'Active'">Susspended</span>
+                                            <span v-if="item.status == 'Active'">Suspended</span>
                                         </template>
                                         <template v-else>
                                             <v-icon class="white--text mr-2 caption">fa fa-pause</v-icon>
@@ -152,7 +152,7 @@
                                         </template>
                                     </v-btn>
                                 </template>
-                                <span v-if="item.status == 'Active'">Susspended</span>
+                                <span v-if="item.status == 'Active'">Suspended</span>
                                 <span v-else>Active</span>
                                 </v-tooltip>
                                 <v-tooltip bottom open-on-hover>