From 1d77e7b000419fe0cbf2cf9ffe60f812c53d1920 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Wed, 9 Apr 2025 12:58:52 +0330
Subject: [PATCH] fix : items & package & barcode modal & show-modal

---
 src/components/modal/barcode/Barcode.vue |  10 +-
 src/components/modal/cycle/Show.vue      |   7 +
 src/components/modal/item/show.vue       |   9 +-
 src/components/modal/label/Show.vue      |  11 +-
 src/components/modal/package/Show.vue    |  19 +-
 src/components/modal/testresult/Show.vue | 230 ++++++++++-----------
 src/router/paths.js                      |   2 +-
 src/views/Cycle/List.vue                 |   6 +-
 src/views/Item/List.vue                  | 149 +++++++-------
 src/views/Label/List.vue                 |   6 +-
 src/views/MedicalCenter/List.vue         |  29 +--
 src/views/MyItem/List.vue                | 181 ++++++++++++----
 src/views/MyPackage/List.vue             | 107 +++++-----
 src/views/Package/List.vue               | 118 ++++++-----
 src/views/TestResult/List.vue            | 250 ++++++++++-------------
 src/views/TestResult/Show.vue            |   4 +-
 src/views/TestType/List.vue              |  31 +--
 src/views/User/List.vue                  |   2 +-
 18 files changed, 627 insertions(+), 544 deletions(-)

diff --git a/src/components/modal/barcode/Barcode.vue b/src/components/modal/barcode/Barcode.vue
index 2ac4cb3..78dab78 100644
--- a/src/components/modal/barcode/Barcode.vue
+++ b/src/components/modal/barcode/Barcode.vue
@@ -22,6 +22,13 @@
                 </v-layout>
             </v-layout>
             <v-layout row wrap align-center justify-center>
+                <v-flex xs12 sm6 md6 lg3 class="text-center">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
+                           @click="closeModal">
+                        <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+                        <span class="black--text">Close</span>
+                    </v-btn>
+                </v-flex>
                 <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>
@@ -33,7 +40,7 @@
     </v-container>
 </template>
 <script>
-import { mapGetters } from "vuex";
+import {mapGetters, mapMutations} from "vuex";
 export default {
     data: () => ({
         barcodeimg: null,
@@ -56,6 +63,7 @@ export default {
         ...mapGetters("modal", ["getModalProperties", "getModalLink"])
     },
     methods: {
+        ...mapMutations("modal", ["closeModal"]),
         print() {
             const prtHtml = document.getElementById("printMe").innerHTML;
 
diff --git a/src/components/modal/cycle/Show.vue b/src/components/modal/cycle/Show.vue
index aa6567e..0bbd971 100644
--- a/src/components/modal/cycle/Show.vue
+++ b/src/components/modal/cycle/Show.vue
@@ -115,6 +115,13 @@
 
 
             <v-layout row wrap align-center justify-center>
+                <v-flex xs12 md2 sm2 class="text-center">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
+                           @click="closeModal">
+                        <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+                        <span class="black--text">Close</span>
+                    </v-btn>
+                </v-flex>
                 <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>
diff --git a/src/components/modal/item/show.vue b/src/components/modal/item/show.vue
index c76ad85..2712fe3 100644
--- a/src/components/modal/item/show.vue
+++ b/src/components/modal/item/show.vue
@@ -68,7 +68,14 @@
                 </v-layout>
             </v-layout>
             <v-layout row wrap align-center justify-center>
-                <v-flex class xs12 md2 sm2 @click="print">
+                <v-flex xs12 md2 sm2 class="text-center">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
+                           @click="closeModal">
+                        <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+                        <span class="black--text">Close</span>
+                    </v-btn>
+                </v-flex>
+                <v-flex 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> -->
                         <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
diff --git a/src/components/modal/label/Show.vue b/src/components/modal/label/Show.vue
index fc936c5..10d096a 100644
--- a/src/components/modal/label/Show.vue
+++ b/src/components/modal/label/Show.vue
@@ -123,8 +123,15 @@
           </template>
         </v-layout>
       </v-layout>
-      <v-layout row wrap align-center justify-center style="margin-left: -15%;">
-        <v-flex class xs12 md2 sm2 @click="print" >
+      <v-layout row wrap align-center justify-center>
+          <v-flex xs12 sm6 md4 class="text-center">
+              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
+                     @click="closeModal">
+                  <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+                  <span class="black--text">Close</span>
+              </v-btn>
+          </v-flex>
+        <v-flex class xs12 sm6 md4 @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>
diff --git a/src/components/modal/package/Show.vue b/src/components/modal/package/Show.vue
index b0ca596..e5c8e49 100644
--- a/src/components/modal/package/Show.vue
+++ b/src/components/modal/package/Show.vue
@@ -3,7 +3,7 @@
     <v-container grid-list-xs>
         <material-card color="black"  title="Show Package">
             <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3 CSSD-font">Package - {{ (data.user != null && data.user.medical_center != null) ? data.user.medical_center.name : ''}}</h3>
+                <h3 class="ml-3 CSSD-font">{{ data.name }} - MC {{ (data.user != null && data.user.medical_center != null) ? data.user.medical_center.name : ''}}</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
@@ -52,7 +52,7 @@
                 </v-layout>
 
             </v-layout>
-            <v-layout align-left justify-left wrap class="px-5 my-3">
+            <v-layout align-left justify-left wrap class="px-5 my-3" >
                 <h3 class="ml-3 CSSD-font">Items</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
@@ -60,9 +60,7 @@
                 <v-layout row wrap class="ml-4">
                     <template v-if="data.items.length">
                       <v-expansion-panel class="WM-Panel">
-                        <v-expansion-panel-content
-                          v-for="(item, key) in data.items" :key="key"
-                        >
+                        <v-expansion-panel-content v-for="(item, key) in data.items" :key="key">
                           <template v-slot:header>
                             <div class="CSSD-font">{{ key+1 + ": " + item.name }} <span v-if="item.pivot">({{ item.pivot.count }})</span></div>
                           </template>
@@ -73,14 +71,21 @@
                       </v-expansion-panel>
                     </template>
                     <template v-else>
-                        <p class="text-center mt-3" style="width: 100%;"> No Item Has Been Selected</p>
+                        <p class="mt-3" style="width: 100%;"> No Item Has Been Selected</p>
                     </template>
 
                 </v-layout>
             </v-layout>
 
             <v-layout row wrap align-center justify-center>
-                <v-flex class xs12 md2 sm2 @click="print" >
+                <v-flex xs12 md2 sm2 class="text-center">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
+                           @click="closeModal">
+                        <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+                        <span class="black--text">Close</span>
+                    </v-btn>
+                </v-flex>
+                <v-flex  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>
diff --git a/src/components/modal/testresult/Show.vue b/src/components/modal/testresult/Show.vue
index 3afbcb7..69d57a7 100644
--- a/src/components/modal/testresult/Show.vue
+++ b/src/components/modal/testresult/Show.vue
@@ -1,127 +1,122 @@
-
 <template>
     <v-container grid-list-xs>
         <material-card color="black" title="Show Test Result" id="printMe">
             <v-layout align-left justify-left wrap class="px-5 my-3 ShowTestResult">
                 <h4 class="ml-4 headline font-weight-bold">Test Type : {{ data.test_type.name }}</h4>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light" />
+                    <hr class="v-divider theme--light"/>
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <!-- <v-flex xs6 md6 sm6>
-                        <div class>
-                            <span class="subtitle-1">{{ data.device_label || 'AutoclaveID' }} :</span>
+                     <span class="subtitle-1">{{ data.device_label || 'AutoclaveID' }} :</span>
                             <span
                                 class="title font-weight-bold ml-2"
-                                style="letter-spacing:0 !important"
-                            >{{ data.device_id }}</span>
-                        </div>
+                                style="letter-spacing:0 !important">
+                                {{ data.device_id }}
+                                </span>
                     </v-flex> -->
-                    <v-flex xs3 md3 sm3>
-                        <div class>
-                            <span class="subtitle-1">ID :</span>
-                            <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">{{ data.id }}</span>
-                        </div>
+                    <v-flex xs12 sm12 md6 lg4 >
+                        <span class="subtitle-1">ID :</span>
+                        <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
+                            {{ data.id }}
+                        </span>
                     </v-flex>
-                    <v-flex xs3 md3 sm3>
-                        <div class>
-                            <span class="subtitle-1">Result :</span>
-                            <span v-if="data.result == 'Reject'" class="NotVerified" style="vertical-align: text-bottom;">
+                    <v-flex xs12 sm12 md6 lg4 >
+                        <span class="subtitle-1">Result :</span>
+                        <span v-if="data.result == 'Reject'" class="NotVerified" style="vertical-align: text-bottom;">
                                 <v-icon class="caption fa fa-times NotVerified"/>
                             </span>
-                            <span v-if="data.result == 'Accept'" class="">
+                        <span v-if="data.result == 'Accept'" class="">
                                 <v-icon class="caption fa fa-check Verified"/>
                             </span>
-                            <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">{{ data.result }}</span>
-                        </div>
+                        <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
+                            {{ data.result }}
+                        </span>
                     </v-flex>
-                    <v-flex xs3 md3 sm3>
-                        <div class>
-                            <span class="subtitle-1">verify :</span>
-                            <!-- <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon> -->
-                            <!-- <span
-                                class="title font-weight-bold ml-1"
-                                style="letter-spacing:0 !important"
-                            >{{ data.verified }}</span> -->
-                            <span v-if="data.verified == 'NotVerified'" class="NotVerified">
+                    <v-flex xs12 sm12 md6 lg4 >
+                        <span class="subtitle-1">verify :</span>
+                        <!-- <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon> -->
+                        <!-- <span
+                            class="title font-weight-bold ml-1"
+                            style="letter-spacing:0 !important"
+                        >{{ data.verified }}</span> -->
+                        <span v-if="data.verified == 'NotVerified'" class="NotVerified">
                                 <v-icon class="caption fa fa-times NotVerified"/>
                             </span>
-                            <span v-if="data.verified == 'Verified'" class="">
+                        <span v-if="data.verified == 'Verified'" class="">
                                 <v-icon class="caption fa fa-check Verified"/>
                             </span>
-                            <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">{{ data.verified }}</span>
-                        </div>
+                        <span class="title font-weight-bold ml-1" style="letter-spacing:0 !important">
+                            {{ data.verified }}
+                        </span>
                     </v-flex>
-                    <v-flex xs3 md3 sm3>
-                        <div class>
-                            <span class="subtitle-1">Register User :</span>
-                            <span
-                                class="title font-weight-bold ml-2"
-                                style="letter-spacing:0 !important"
-                            >{{ data.user.name }}</span>
-                        </div>
+                    <v-flex xs12 sm12 md6 lg4 >
+                        <span class="subtitle-1">Register User :</span>
+                        <span class="title font-weight-bold ml-2"
+                              style="letter-spacing:0 !important">
+                                {{ data.user.name }}
+                            </span>
                     </v-flex>
-                    <v-flex xs4 md4 sm4>
-                        <div class>
-                            <span class="subtitle-1">Date :</span>
-                            <span
-                                class="title font-weight-bold ml-2"
-                                style="letter-spacing:0 !important"
-                            >{{ $d(new Date(data.created_at), 'long') }}</span>
-                        </div>
+                    <v-flex xs12 sm12 md6 lg4 >
+                        <span class="subtitle-1">Date :</span>
+                        <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
+                                {{ $d(new Date(data.created_at), 'long') }}
+                            </span>
                     </v-flex>
-                    <v-flex xs4 md4 sm4>
-                        <div class>
-                            <span class="subtitle-1">Medical Center :</span>
-                            <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">{{ data.user.medical_center.name }}</span>
-                        </div>
+                    <v-flex xs12 sm12 md6 lg4 >
+                        <span class="subtitle-1">Medical Center :</span>
+                        <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">
+                                {{ data.user.medical_center.name }}
+                            </span>
                     </v-flex>
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h4 class="ml-4 headline CSSD-font font-weight-bold">Special Info</h4>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light" />
+                    <hr class="v-divider theme--light"/>
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <template v-if="data.inputs">
                         <v-flex xs3 md3 sm3 v-for="(inputData, keyInputs) in data.inputs" :key="keyInputs">
-                            <span class="subtitle-1">{{keyInputs}} :</span>
-                            <span class="title font-weight-bold ml-2" style="letter-spacing:0 !important">{{inputData}}</span>
+                            <span class="subtitle-1">{{ keyInputs }} :</span>
+                            <span class="title font-weight-bold ml-2"
+                                  style="letter-spacing:0 !important">{{ inputData }}</span>
                         </v-flex>
                     </template>
                     <template v-if="data.options">
                         <v-flex xs3 md3 sm3 v-for="(optionData, keyOptions) in data.options" :key="keyOptions">
-                            <span class="subtitle-1">{{keyOptions}} :</span>
+                            <span class="subtitle-1">{{ keyOptions }} :</span>
                             <span
-                                style="letter-spacing:0 !important"
-                                class="title font-weight-bold ml-2"
-                                v-for="(data, dataKey) in optionData"
-                                :key="dataKey">{{data}},</span>
+                                    style="letter-spacing:0 !important"
+                                    class="title font-weight-bold ml-2"
+                                    v-for="(data, dataKey) in optionData"
+                                    :key="dataKey">{{ data }},</span>
                         </v-flex>
                     </template>
                     <template v-if="data.children">
                         <v-layout row wrap class="WM-Width-Full">
-                        <v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd" xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm">
-                            <h4 class="ml-4 headline CSSD-font font-weight-bold">{{keyForm}}</h4>
-                            <v-layout row wrap>
-                            <v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
-                                    <v-flex xs12 md12 sm12 class="ml-4">
-                                    <span class="subtitle-1">{{keyChild}} :</span>
-                                    <template v-if="Array.isArray(childData)">
+                            <v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
+                                    xs12 md12 sm12 v-for="(formData, keyForm) in data.children" :key="keyForm">
+                                <h4 class="ml-4 headline CSSD-font font-weight-bold">{{ keyForm }}</h4>
+                                <v-layout row wrap>
+                                    <v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
+                                        <v-flex xs12 md12 sm12 class="ml-4">
+                                            <span class="subtitle-1">{{ keyChild }} :</span>
+                                            <template v-if="Array.isArray(childData)">
                                         <span
-                                            style="letter-spacing:0 !important"
-                                            class="title font-weight-bold ml-2"
-                                            v-for="(data, dataKey) in childData"
-                                            :key="dataKey">{{data}},</span>
-                                    </template>
-                                    <template v-else>
-                                        <span class="headline ml-2">{{childData}}</span>
-                                    </template>
-                                    </v-flex>
+                                                style="letter-spacing:0 !important"
+                                                class="title font-weight-bold ml-2"
+                                                v-for="(data, dataKey) in childData"
+                                                :key="dataKey">{{ data }},</span>
+                                            </template>
+                                            <template v-else>
+                                                <span class="headline ml-2">{{ childData }}</span>
+                                            </template>
+                                        </v-flex>
+                                    </v-layout>
                                 </v-layout>
-                            </v-layout>
-                        </v-flex>
+                            </v-flex>
                         </v-layout>
                     </template>
                 </v-layout>
@@ -129,34 +124,38 @@
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h4 class="ml-4 headline CSSD-font font-weight-bold">Image</h4>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light" />
+                    <hr class="v-divider theme--light"/>
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
-                    <v-flex xs6 md2 sm2  v-for="(file, key) in data.files" :key="key">
+                    <v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
                         <template v-if="file.file_type == 'document'">
-                            <a target="_blank" :href="'/'+file.path"><v-icon class="mr-2 caption">fas fa-check</v-icon>{{ file.file_name }}</a>
+                            <a target="_blank" :href="'/'+file.path">
+                                <v-icon class="mr-2 caption">fas fa-check</v-icon>
+                                {{ file.file_name }}</a>
                         </template>
 
                         <template v-else>
-                            <img :src="'/'+file.path" style="width: 100%" />
+                            <img :src="'/'+file.path" style="width: 100%"/>
                         </template>
                     </v-flex>
                 </v-layout>
             </v-layout>
-        <!-- </material-card>
-        <material-card> -->
+            <!-- </material-card>
+            <material-card> -->
             <v-layout row wrap align-center justify-center class="px-5 my-3" v-if="$hasRole('Admin|Supervisor')">
-                <v-flex class="WM-Align-R mr-1" xs12 md3 sm3
-                    v-if="data.verified == 'None' || (data.verified == 'NotVerified' && $hasRole('Admin'))"
-                    @click="verify(data.id, 'Verified')">
+                <v-flex class="WM-Align-R mr-1" xs12 sm6 md4 lg3
+                        v-if="data.verified == 'None' || (data.verified == 'NotVerified' && $hasRole('Admin'))"
+                        @click="verify(data.id, 'Verified')">
                     <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
                         <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
                         <span class="white--text">Verify</span>
                     </v-btn>
                 </v-flex>
-                <v-flex class="WM-Align-R" xs6 md3 sm3 v-if="data.verified == 'None' || (data.verified == 'Verified' && $hasRole('Admin'))">
-                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray" @click="verify(data.id, 'NotVerified')">
+                <v-flex class="WM-Align-R" xs12 sm6 md4 lg3
+                        v-if="data.verified == 'None' || (data.verified == 'Verified' && $hasRole('Admin'))">
+                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
+                           @click="verify(data.id, 'NotVerified')">
                         <v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
                         <span class="black--text">UnVerify</span>
                     </v-btn>
@@ -168,20 +167,20 @@
                             <v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
                             <span class="black--text">Go to Print Page</span>
                         </v-btn>
-                        </a>
-                    </v-flex>
+                    </a>
+                </v-flex>
+            </v-layout>
+            <v-layout row wrap align-center justify-center class="px-5 my-3">
+                <!-- <v-flex class xs6 md2 sm2>
+                    <v-btn
+                        class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
+                        @click="print"
+                    >
+                        <v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
+                        <span class="black--text">Print</span>
+                    </v-btn>
+                </v-flex> -->
             </v-layout>
-                <v-layout row wrap align-center justify-center class="px-5 my-3" >
-                    <!-- <v-flex class xs6 md2 sm2>
-                        <v-btn
-                            class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
-                            @click="print"
-                        >
-                            <v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
-                            <span class="black--text">Print</span>
-                        </v-btn>
-                    </v-flex> -->
-                </v-layout>
         </material-card>
     </v-container>
 </template>
@@ -193,9 +192,9 @@ export default {
 };
 </script>
 <script>
-import { mapGetters, mapMutations } from "vuex";
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {mapGetters, mapMutations} from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
 // import LightBox from 'vue-image-lightbox';
 // import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
 export default {
@@ -222,9 +221,9 @@ export default {
 
             // Open the print window
             const WinPrint = window.open(
-                "",
-                "",
-                "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
+                    "",
+                    "",
+                    "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
             );
 
             WinPrint.document.write(`<!DOCTYPE html>
@@ -254,15 +253,16 @@ export default {
 </script>
 <style media="screen">
 @media screen and (max-width: 1536px) {
-  .headline {
-    font-size: 1rem !important;
-  }
+    .headline {
+        font-size: 1rem !important;
+    }
 }
-@media screen and (max-width : 500px) {
-  .ShowTestResult .WM-Outline-Btn {
-    text-align: center;
 
-  }
+@media screen and (max-width: 500px) {
+    .ShowTestResult .WM-Outline-Btn {
+        text-align: center;
+
+    }
 }
 
 </style>
diff --git a/src/router/paths.js b/src/router/paths.js
index ba3ecbe..7463583 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -141,7 +141,7 @@ export default [
     },
   },
   {
-    path: '/resualt-test',
+    path: '/result-test',
     name: 'AllResultTest',
     view: 'TestResult/List',
     meta:{
diff --git a/src/views/Cycle/List.vue b/src/views/Cycle/List.vue
index 1e2b2d6..7917baf 100644
--- a/src/views/Cycle/List.vue
+++ b/src/views/Cycle/List.vue
@@ -98,7 +98,7 @@
                                             <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>
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
                                         </template>
@@ -145,12 +145,12 @@ import {mapMutations, mapGetters} from "vuex";
 export default {
     data: () => ({
         headers: [
-            {sortable: false, text: "Cycle ID", value: "Cycle ID"},
+            {sortable: false, text: "ID", value: "Cycle ID"},
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Sterilizer ID", value: "Sterilizer ID"},
             {sortable: false, text: "Cycle Number", value: "Cycle Number"},
             {sortable: false, text: "Date", value: "date"},
-            {sortable: false, text: "Action", value: "action", align: "left"}
+            {sortable: false, text: "Action", value: "action", align: "center"}
         ],
         filter: {},
         Menu: false,
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index 508c0d6..98bd2af 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -6,7 +6,7 @@
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID"
-                            color="black"/>
+                                      color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
@@ -15,8 +15,8 @@
                     <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter" v-if="$hasRole('Admin')">
                         <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <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"/>
+                                        item-value="id" label="Hospital" color="black" :items="medicalCenters"
+                                        :clearable="true"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
@@ -51,38 +51,42 @@
                         <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" />
+                                      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.name : '' | text_20_letter }}</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 : '' | text_20_letter }}
+                                </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  | text_20_letter }}</td>
                                 <td class="title font-weight-light">{{ item.size }}</td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
-                                    <v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn
-                                                :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
-                                                class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
-                                                <v-icon class="white--text mr-1 caption">
-                                                    fas {{!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check' }}
-                                                </v-icon>
-                                                <span>
-                                                    {{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}
-                                                </span>
-                                            </v-btn>
-                                        </template>
-                                        <span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
-                                        }}</span>
-                                    </v-tooltip>
+                                    <template v-if="$hasRole('Admin|Supervisor')">
+                                        <v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom
+                                                   open-on-hover>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-btn :color="status.color" class="mr-2"
+                                                       @click="changeStatus(item, status.status)" v-bind="attrs"
+                                                       v-on="on">
+                                                    <v-icon class="white--text mr-1 caption">
+                                                        fas {{ status.icon }}
+                                                    </v-icon>
+                                                    <span>{{ status.label }}</span>
+                                                </v-btn>
+                                            </template>
+                                            <span>{{ status.label }}</span>
+                                        </v-tooltip>
+                                    </template>
                                     <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)">
+                                                   @click="show(item.id)">
                                                 <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                                 <span>Show</span>
                                             </v-btn>
@@ -92,8 +96,8 @@
                                     <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-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
+                                                         :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>
@@ -105,8 +109,8 @@
                                     <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">
+                                                   @click="remove(item.id)"
+                                                   v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
@@ -116,7 +120,7 @@
                                     <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, 'Item')">
+                                                   @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>
@@ -131,7 +135,7 @@
                 <v-divider/>
                 <div class="text-xs-center" v-if="lastPage > 1">
                     <v-pagination color="black" v-model="currentPage" :length="lastPage"
-                        :total-visible="6"/>
+                                  :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
@@ -147,23 +151,23 @@
 </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";
 import toast from "@/services/global/toast.service";
 
 export default {
     data: () => ({
         headers: [
             // {sortable: true,text: "ID",value: "id"},
-            {sortable: false, text: "Item ID", value: "id"},
+            {sortable: false, text: "ID", value: "id", width: '5%'},
             {sortable: false, text: "Name", value: "name"},
             {sortable: false, text: "Owner", value: "User"},
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "UDI", value: "udi"},
             {sortable: false, text: "Size", value: "size"},
-            {sortable: false, text: "Status", value: "status"},
-            {sortable: false, text: "Action", value: "action", align: "left"}
+            {sortable: false, text: "Status", value: "status", width: '10%'},
+            {sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
         ],
         filter: {
             name: '',
@@ -191,7 +195,7 @@ export default {
             }
             filter += (page) ? `page=${page}` : `page=1`;
             const result = await ApiService.get(
-                urls.listItem(filter)
+                    urls.listItem(filter)
             );
             if (result && result.status == 200) {
                 this.items = result.data.data;
@@ -201,70 +205,73 @@ export default {
             this.loadMedicalCenters();
         },
         async generateBarcode(item, type = null) {
-            let code = item.udi;
-            if (code) {
-                const result = await ApiService.post(urls.Barcode(code, type));
-                if (result && result.status == 200) {
-                    this.changeCurrentModal({
-                        modal: "modal-barcode-barcode",
-                        properties: { result, item },
-                    });
-                }
-            } else {
-                toast.error('please first set UDI');
+            const result = await ApiService.post(urls.Barcode(item.id, type));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: {result, item},
+                });
             }
         },
         async show(testResultId) {
             const result = await ApiService.get(
-                urls.showItem(testResultId)
+                    urls.showItem(testResultId)
             );
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-item-show",
-                    properties: { result },
+                    properties: {result},
                 });
             }
         },
         async remove(testResultId) {
             const result = await ApiService.delete(
-                urls.removeItem(testResultId)
+                    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.hasOwnProperty(key) &&
+                            this.items[key].id == testResultId
                     ) {
                         this.items.splice(key, 1);
                     }
                 }
             }
         },
-        async changeStatus(item) {
-            const payload = {
-                status: ['suspended', 'rejected'].includes(item.status) ? 'approved' : 'rejected',
-            }
-            const result = await ApiService.post(
-                urls.changeItemStatus(item.id),
-                payload
-            );
-            if (result) {
-                for (const key in this.items) {
-                    if (
-                        this.items.hasOwnProperty(key) &&
-                        this.items[key].id == item.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;
             }
         },
+        getStatus(item) {
+            if (item.status === 'pending') {
+                return [
+                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
+                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                ]
+            } else {
+                const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
+                return [
+                    {
+                        status: nextStatus,
+                        label: nextStatus === 'approved' ? 'approve' : 'reject',
+                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
+                    }
+                ]
+            }
+        },
+        async changeStatus(item, status) {
+            const result = await ApiService.post(urls.changeItemStatus(item.id), {status})
+
+            if (result?.data?.data?.status) {
+                const newStatus = result.data.data.status
+                const target = this.items.find(i => i.id === item.id)
+                if (target) target.status = newStatus
+            }
+        }
     },
     watch: {
         currentPage(page) {
diff --git a/src/views/Label/List.vue b/src/views/Label/List.vue
index d805c97..023c785 100644
--- a/src/views/Label/List.vue
+++ b/src/views/Label/List.vue
@@ -100,7 +100,7 @@
                                                     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>
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
                                         </template>
@@ -147,12 +147,12 @@ import {mapMutations, mapGetters} from "vuex";
 export default {
     data: () => ({
         headers: [
-            {sortable: false, text: "Label ID", value: "Label ID"},
+            {sortable: false, text: "ID", value: "Label ID"},
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Owner", value: "User"},
             {sortable: false, text: "Cycle Number", value: "Cycle Number"},
             {sortable: false, text: "SterilizerID", value: "SterilizerID"},
-            {sortable: false, text: "Action", value: "action", align: "left"}
+            {sortable: false, text: "Action", value: "action", align: "center"}
         ],
         filter: {},
         items: [],
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index b0751cb..29e1068 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -31,7 +31,7 @@
               <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 WM-NoLetterSpacing">{{ item.name }}</td>
+              <td class="title font-weight-light WM-NoLetterSpacing">{{ item.name }}</td>
               <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
               <td class="title font-weight-light">{{ item.users_count }} Operator</td>
               <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
@@ -61,7 +61,7 @@
                 <v-tooltip bottom open-on-hover>
                   <template v-slot:activator="{ on, attrs }">
                     <v-btn v-bind="attrs" v-on="on" color="pink" @click="remove(item.id)" class="WM-ActionButton">
-                      <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                      <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                       <span>Remove</span>
                     </v-btn>
                   </template>
@@ -95,27 +95,10 @@ import { mapMutations } from 'vuex'
 export default {
   data: () => ({
     headers: [
-      {
-        sortable: false,
-        text: "Hospital Name",
-        value: "name"
-      },
-      {
-        sortable: false,
-        text: "Date",
-        value: "date"
-      },
-      {
-        sortable: false,
-        text: "Operator",
-        value: "operator"
-      },
-      {
-        sortable: false,
-        text: "Action",
-        value: "action",
-        align: "right",
-      }
+      {sortable: false, text: "Hospital Name", value: "name"},
+      {sortable: false, text: "Date", value: "date"},
+      {sortable: false, text: "Operator", value: "operator"},
+      {sortable: false, text: "Action", value: "action", align: "center",}
     ],
     filter: {
       name: ''
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index bccffd2..f235470 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -5,25 +5,31 @@
                 <v-layout align-center wrap class="my-3 px-5">
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="py-3 pr-3" v-model="getFilters.item_id" @input="updateFilter('item_id', getFilters.item_id)" label="Item ID" color="black"/>
+                        <v-text-field class="py-3 pr-3" v-model="getFilters.item_id"
+                                      @input="updateFilter('item_id', getFilters.item_id)" label="Item ID"
+                                      color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="py-3 pr-3" v-model="getFilters.name" @input="updateFilter('name', getFilters.name)" label="Name" color="black"/>
+                        <v-text-field class="py-3 pr-3" v-model="getFilters.name"
+                                      @input="updateFilter('name', getFilters.name)" label="Name" color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
                         <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <v-autocomplete class="py-3 pr-3" v-model="getFilters.medical_center_id" item-text="name"
-                                        item-value="id" @input="updateFilter('medical_center_id', getFilters.medical_center_id)"
+                                        item-value="id"
+                                        @input="updateFilter('medical_center_id', getFilters.medical_center_id)"
                                         label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="py-3 pr-3" v-model="getFilters.size" @input="updateFilter('size', getFilters.size)" label="Size" color="black"/>
+                        <v-text-field class="py-3 pr-3" v-model="getFilters.size"
+                                      @input="updateFilter('size', getFilters.size)" label="Size" color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="py-3 pr-3" v-model="getFilters.udi" @input="updateFilter('udi', getFilters.udi)" label="UDI" color="black"/>
+                        <v-text-field class="py-3 pr-3" v-model="getFilters.udi"
+                                      @input="updateFilter('udi', getFilters.udi)" label="UDI" color="black"/>
                     </v-flex>
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
@@ -55,19 +61,63 @@
                                 <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.name : '' | text_20_letter }}
+                                </td>
                                 <td class="title font-weight-light">{{ item.udi }}</td>
                                 <td class="title font-weight-light">{{ item.size }}</td>
+                                <td class="title font-weight-light">{{ item.status }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
+                                    <template v-if="$hasRole('Admin|Supervisor')">
+                                        <v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom
+                                                   open-on-hover>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-btn :color="status.color" class="mr-2"
+                                                       @click="changeStatus(item, status.status)" v-bind="attrs"
+                                                       v-on="on">
+                                                    <v-icon class="white--text mr-1 caption">
+                                                        fas {{ status.icon }}
+                                                    </v-icon>
+                                                    <span>{{ status.label }}</span>
+                                                </v-btn>
+                                            </template>
+                                            <span>{{ status.label }}</span>
+                                        </v-tooltip>
+                                    </template>
                                     <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="showItem(item.id)">
+                                                   @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-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <router-link class="LinkBtn"
+                                                         v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
+                                                         :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|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                                                <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"
@@ -88,17 +138,8 @@
                                         </template>
                                         <span>Transfer</span>
                                     </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
-                                                   @click="removeItem(item.id)" v-if="$hasRole('Admin|Supervisor')">
-                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
-                                                <span>Remove</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Remove</span>
-                                    </v-tooltip>
                                 </td>
+
                             </template>
                         </v-data-table>
                     </v-flex>
@@ -129,11 +170,13 @@ export default {
     data: () => ({
         headers: [
             // {sortable: true,text: "ID",value: "id"},
-            {sortable: false, text: "Item ID", value: "id" },
+            {sortable: false, text: "ID", value: "id"},
             {sortable: false, text: "Name", value: "name"},
+            {sortable: false, text: "Owner", value: "User"},
             {sortable: false, text: "UDI", value: "udi"},
             {sortable: false, text: "Size", value: "size"},
-            {sortable: false, text: "Action", value: "action", align: "left",width:'20%'}
+            {sortable: false, text: "Status", value: "status", width: '10%'},
+            {sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
         ],
         filter: {
             name: '',
@@ -148,42 +191,100 @@ export default {
         this.loadMyItem();
     },
     computed: {
-        ...mapGetters('myItems', ["getFilters",'getMyItems','getCurrentPage','getLastPage']),
-        items(){ return this.getMyItems;},
-        currentPage(){ return this.getCurrentPage;},
-        lastPage(){ return this.getLastPage;},
+        ...mapGetters('myItems', ["getFilters", 'getMyItems', 'getCurrentPage', 'getLastPage']),
+        items() {
+            return this.getMyItems;
+        },
+        currentPage() {
+            return this.getCurrentPage;
+        },
+        lastPage() {
+            return this.getLastPage;
+        },
     },
     methods: {
-        ...mapMutations('myItems',["SET_FILTER"]),
+        ...mapMutations('myItems', ["SET_FILTER"]),
         ...mapMutations("modal", ["changeCurrentModal"]),
         ...mapActions('myItems', ['loadMyItem', 'removeItem', 'showItem', 'generateBarcode']),
         onFilterClick() {
             this.loadMyItem();
         },
-
         updateFilter(key, value) {
-            this.SET_FILTER({ key, value });
+            this.SET_FILTER({key, value});
         },
-        async generateBarcode(item, type = null) {
-            let code = item.udi;
-            if (code) {
-                const result = await ApiService.post(urls.Barcode(code, type));
-                if (result && result.status == 200) {
-                    this.changeCurrentModal({
-                        modal: "modal-barcode-barcode",
-                        properties: {result, item},
-                    });
-                }
-            } else {
-                toast.error('please first set UDI');
-            }
-        },
-
         async transfer(data) {
             this.changeCurrentModal({
                 modal: "modal-user-list",
                 properties: {data},
             });
+        },
+        async generateBarcode(item, type = null) {
+            const result = await ApiService.post(urls.Barcode(item.id, type));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: {result, item},
+                });
+            }
+        },
+        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 loadMedicalCenters() {
+            const result = await ApiService.get(urls.listFilterItemsTestResult);
+            if (result && result.status == 200) {
+                this.medicalCenters = result.data.data.MedicalCenters;
+            }
+        },
+        getStatus(item) {
+            if (item.status === 'pending') {
+                return [
+                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
+                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                ]
+            } else {
+                const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
+                return [
+                    {
+                        status: nextStatus,
+                        label: nextStatus === 'approved' ? 'approve' : 'reject',
+                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
+                    }
+                ]
+            }
+        },
+        async changeStatus(item, status) {
+            const result = await ApiService.post(urls.changeItemStatus(item.id), {status})
+
+            if (result?.data?.data?.status) {
+                const newStatus = result.data.data.status
+                const target = this.items.find(i => i.id === item.id)
+                if (target) target.status = newStatus
+            }
         }
     },
     watch: {
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
index f47686e..202733e 100644
--- a/src/views/MyPackage/List.vue
+++ b/src/views/MyPackage/List.vue
@@ -55,21 +55,18 @@
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
-                                    <v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
-                                                   class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
-                                                <v-icon class="white--text mr-1 caption">
-                                                    fas
-                                                    {{ !['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check' }}
-                                                </v-icon>
-                                                <span>
-                                                    {{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}
-                                                </span>
-                                            </v-btn>
-                                        </template>
-                                        <span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}</span>
-                                    </v-tooltip>
+                                    <template v-if="$hasRole('Admin|Supervisor')">
+                                        <v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom open-on-hover>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-btn :color="status.color" class="mr-2" @click="changeStatus(item, status.status)" v-bind="attrs" v-on="on">
+                                                    <v-icon class="white--text mr-1 caption">fas {{ status.icon }}</v-icon>
+                                                    <span>{{ status.label }}</span>
+                                                </v-btn>
+                                            </template>
+                                            <span>{{ status.label }}</span>
+                                        </v-tooltip>
+                                    </template>
+
                                     <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"
@@ -80,10 +77,11 @@
                                         </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"
+                                                         v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
                                                          :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>
@@ -93,10 +91,22 @@
                                         </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|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                                                <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, 'Package')">
+                                                   @click="generateBarcode(item.id, 'Package')">
                                                 <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
                                                 <span>Generate Barcode</span>
                                             </v-btn>
@@ -113,17 +123,8 @@
                                         </template>
                                         <span>Transfer</span>
                                     </v-tooltip>
-                                    <v-tooltip bottom open-on-hover>
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
-                                                   @click="remove(item.id)" v-if="$hasRole('Admin|Supervisor')">
-                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
-                                                <span>Remove</span>
-                                            </v-btn>
-                                        </template>
-                                        <span>Remove</span>
-                                    </v-tooltip>
                                 </td>
+
                             </template>
                         </v-data-table>
                     </v-flex>
@@ -155,12 +156,12 @@ import toast from "@/services/global/toast.service";
 export default {
     data: () => ({
         headers: [
-            {sortable: false, text: "Package ID", value: "Package ID"},
+            {sortable: false, text: "ID", value: "Package ID"},
             {sortable: false, text: "Name", value: "name"},
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Description", value: "description"},
             {sortable: false, text: "Status", value: "status"},
-            {sortable: false, text: "Action", value: "action", align: "center"}
+            {sortable: false, text: "Action", value: "action", align: "center",width:'20%'}
         ],
         filter: {
             name: '',
@@ -214,26 +215,40 @@ export default {
                 }
             }
         },
-        async generateBarcode(item, type) {
-            const code = item.udi;
-            if (code) {
-                const result = await ApiService.post(urls.Barcode(code, type));
-                if (result && result.status == 200) {
-                    this.changeCurrentModal({modal: "modal-barcode-barcode", properties: {result}});
-                }
-            } else {
-                toast.error('please first set UDI');
+        async generateBarcode(id, type) {
+            const result = await ApiService.post(urls.Barcode(id, type));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: {result}
+                });
             }
         },
-        async changeStatus(item) {
-            const payload = {status: ['suspended', 'rejected'].includes(item.status) ? 'approved' : 'rejected',}
-            const result = await ApiService.post(urls.changePackageStatus(item.id), payload);
-            if (result) {
-                for (const key in this.items) {
-                    if (this.items.hasOwnProperty(key) && this.items[key].id == item.id) {
-                        this.items[key].status = result.data.data.status;
+        getStatus(item) {
+            if (item.status === 'pending') {
+                return [
+                    { status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close' },
+                    { status: 'approved', label: 'approve', color: 'green', icon: 'fa-check' }
+                ]
+            } else {
+                const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
+                return [
+                    {
+                        status: nextStatus,
+                        label: nextStatus === 'approved' ? 'approve' : 'reject',
+                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
                     }
-                }
+                ]
+            }
+        },
+        async changeStatus(item, status) {
+            const result = await ApiService.post(urls.changePackageStatus(item.id), { status })
+
+            if (result?.data?.data?.status) {
+                const newStatus = result.data.data.status
+                const target = this.items.find(i => i.id === item.id)
+                if (target) target.status = newStatus
             }
         },
         async loadMedicalCenters() {
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index 832060d..d96b8a9 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -61,25 +61,29 @@
                                     {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
                                 </td>
                                 <td class="title font-weight-light">
-                                    {{item.user ? item.user.name : '' | text_20_letter}}
+                                    {{ item.user ? item.user.name : '' | text_20_letter }}
                                 </td>
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
                                 <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
-                                    <v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
-                                        <template v-slot:activator="{ on, attrs }">
-                                            <v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
-                                                   class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
-                                                <v-icon class="white--text mr-1 caption">
-                                                    fas {{!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'}}
-                                                </v-icon>
-                                                <span>
-                                                    {{!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'}}
-                                                </span>
-                                            </v-btn>
-                                        </template>
-                                        <span>{{!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'}}</span>
-                                    </v-tooltip>
+                                    <template v-if="$hasRole('Admin|Supervisor')">
+                                        <v-tooltip v-for="status in getStatus(item)" :key="status.label" bottom
+                                                   open-on-hover>
+                                            <template v-slot:activator="{ on, attrs }">
+                                                <v-btn :color="status.color" class="mr-2"
+                                                       @click="changeStatus(item, status.status)" v-bind="attrs"
+                                                       v-on="on">
+                                                    <v-icon class="white--text mr-1 caption">fas {{
+                                                            status.icon
+                                                        }}
+                                                    </v-icon>
+                                                    <span>{{ status.label }}</span>
+                                                </v-btn>
+                                            </template>
+                                            <span>{{ status.label }}</span>
+                                        </v-tooltip>
+                                    </template>
+
                                     <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"
@@ -90,10 +94,11 @@
                                         </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"
+                                                         v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))"
                                                          :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>
@@ -103,12 +108,13 @@
                                         </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>
+                                                   v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id && !['approved', 'rejected'].includes(item.status))">
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
                                         </template>
@@ -117,7 +123,7 @@
                                     <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, 'Package')">
+                                                   @click="generateBarcode(item.id, 'Package')">
                                                 <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
                                                 <span>Generate Barcode</span>
                                             </v-btn>
@@ -156,13 +162,13 @@ import toast from "@/services/global/toast.service";
 export default {
     data: () => ({
         headers: [
-            {sortable: false, text: "Package ID", value: "Package ID"},
+            {sortable: false, text: "ID", value: "Package ID"},
             {sortable: false, text: "Name", value: "name"},
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Owner", value: "User"},
             {sortable: false, text: "Description", value: "description"},
             {sortable: false, text: "Status", value: "status"},
-            {sortable: false, text: "Action", value: "action", align: "left"}
+            {sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
         ],
         filter: {
             name: '',
@@ -200,9 +206,7 @@ export default {
             this.loadMedicalCenters();
         },
         async show(testResultId) {
-            const result = await ApiService.get(
-                    urls.showPackage(testResultId)
-            );
+            const result = await ApiService.get(urls.showPackage(testResultId));
             if (result && result.status == 200) {
                 this.changeCurrentModal({
                     modal: "modal-package-show",
@@ -225,37 +229,13 @@ export default {
                 }
             }
         },
-        async generateBarcode(item, type) {
-            const code = item.udi;
-            if (code) {
-                const result = await ApiService.post(urls.Barcode(code, type));
-                if (result && result.status == 200) {
-                    this.changeCurrentModal({
-                        modal: "modal-barcode-barcode",
-                        properties: {result}
-                    });
-                }
-            } else {
-                toast.error('please first set UDI');
-            }
-        },
-        async changeStatus(item) {
-            const payload = {
-                status: ['suspended', 'rejected'].includes(item.status) ? 'approved' : 'rejected',
-            }
-            const result = await ApiService.post(
-                    urls.changePackageStatus(item.id),
-                    payload
-            );
-            if (result) {
-                for (const key in this.items) {
-                    if (
-                            this.items.hasOwnProperty(key) &&
-                            this.items[key].id == item.id
-                    ) {
-                        this.items[key].status = result.data.data.status;
-                    }
-                }
+        async generateBarcode(id, type) {
+            const result = await ApiService.post(urls.Barcode(id, type));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: {result}
+                });
             }
         },
         async loadMedicalCenters() {
@@ -264,6 +244,34 @@ export default {
                 this.medicalCenters = result.data.data.MedicalCenters;
             }
         },
+        getStatus(item) {
+            if (item.status === 'pending') {
+                return [
+                    {status: 'rejected', label: 'reject', color: 'red', icon: 'fa-close'},
+                    {status: 'approved', label: 'approve', color: 'green', icon: 'fa-check'}
+                ]
+            } else {
+                const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
+                return [
+                    {
+                        status: nextStatus,
+                        label: nextStatus === 'approved' ? 'approve' : 'reject',
+                        color: nextStatus === 'approved' ? 'green' : 'red',
+                        icon: nextStatus === 'approved' ? 'fa-check' : 'fa-close'
+                    }
+                ]
+            }
+        },
+
+        async changeStatus(item, status) {
+            const result = await ApiService.post(urls.changePackageStatus(item.id), {status})
+
+            if (result?.data?.data?.status) {
+                const newStatus = result.data.data.status
+                const target = this.items.find(i => i.id === item.id)
+                if (target) target.status = newStatus
+            }
+        }
     },
     computed: {
         ...mapGetters("modal", ["getModalResult"])
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index f028adc..4c43e78 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -3,57 +3,57 @@
         <v-container fluid>
             <material-card class color="black" title="All Test Result" text>
                 <v-layout align-center wrap class="px-5 my-3">
-                    <v-flex xs12 sm6 md6 lg2 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.device_id" label="ID"
-                            color="black"/>
+                                      color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <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-model="filter.device_label" label="ID Label" color="black" class="py-3 pr-3"
+                                        :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <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"/>
+                                        color="black" :items="testTypes" item-text="name" item-value="id"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
                         <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"/>
+                                        color="black" :items="medicalCenters" item-text="name" item-value="id"
+                                        :clearable="true"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <v-text-field class="py-3 pr-3" v-model="filter.user_name" label="User Name"
-                            color="black"/>
+                                      color="black"/>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 class="WM-FlexCenter pl-3">
+                    <v-flex xs12 sm4 md4 lg3 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="far fa-calendar-alt mr-2"/>
                         <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-                            v-model="fromMenu" style="width: 100%">
+                                v-model="fromMenu" style="width: 100%">
                             <v-text-field class="py-3 pr-3" required slot="activator" label="FromDate"
-                                v-model="filter.fromPicker" color="black"/>
+                                          v-model="filter.fromPicker" color="black"/>
                             <v-date-picker color="pink" no-title v-model="filter.fromPicker"
-                                :date-format="date => new Date(date).toDateString()"/>
+                                           :date-format="date => new Date(date).toDateString()"/>
                         </v-menu>
                     </v-flex>
-                    <v-flex xs12 sm6 md6 lg3 style="display: flex;align-items: center;">
+                    <v-flex xs12 sm4 md4 lg3 xl2 style="display: flex;align-items: center;">
                         <v-icon class="far fa-calendar-alt mr-2"/>
                         <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
-                            v-model="upToMenu" style="width: 100%">
+                                v-model="upToMenu" style="width: 100%">
                             <v-text-field class="py-3 pr-3" required slot="activator" label="UpToDate" color="black"
-                                v-model="filter.upToPicker"/>
+                                          v-model="filter.upToPicker"/>
                             <v-date-picker color="pink" no-title v-model="filter.upToPicker"
-                                :date-format="date => new Date(date).toDateString()"/>
+                                           :date-format="date => new Date(date).toDateString()"/>
                         </v-menu>
                     </v-flex>
                     <v-spacer/>
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px"  @click="load(null, null)">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @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>
@@ -67,23 +67,6 @@
                         </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 30px" @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>
-                       </router-link>
-                   </v-flex>
-               </v-layout>-->
                 <v-layout class="px-4 my-3">
                     <v-divider/>
                 </v-layout>
@@ -92,19 +75,25 @@
                         <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" />
+                                      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.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">{{ item.result }}</span>
+                                    <span v-if="item.result == 'Reject'" class="ResultMsg Reject">
+                                        {{item.result}}
+                                    </span>
+                                    <span v-else-if="item.result == 'Accept'" class="ResultMsg Accept">
+                                        {{item.result}}
+                                    </span>
                                 </td>
                                 <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
-                                <td class="title font-weight-light">
+                                <td class="title font-weight-light text-center">
                                     <span v-if="item.verified == 'NotVerified'" class="NotVerified">
                                         <v-icon class="caption fa fa-times NotVerified"/>
                                     </span>
@@ -117,7 +106,7 @@
                                     <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-on="on">
                                                 <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                                 <span>Show</span>
                                             </v-btn>
@@ -127,8 +116,8 @@
                                     <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">
+                                                   @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>
@@ -139,8 +128,8 @@
                                         <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-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>
@@ -153,9 +142,9 @@
                                         <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>
+                                                   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-trash</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
                                         </template>
@@ -169,7 +158,7 @@
                 <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>
+                                  :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
@@ -195,49 +184,18 @@ import {
     mapMutations,
     mapGetters
 } from "vuex";
+
 export default {
     data: () => ({
-        headers: [{
-            sortable: false,
-            text: "ID",
-            value: "name"
-        },
-        {
-            sortable: false,
-            text: "Test Type",
-            value: "TestType"
-        },
-        {
-            sortable: false,
-            text: "Hospital",
-            value: "Hospital"
-        },
-        {
-            sortable: false,
-            text: "User",
-            value: "Users"
-        },
-        {
-            sortable: false,
-            text: "Result",
-            value: "result"
-        },
-        {
-            sortable: false,
-            text: "Date",
-            value: "date"
-        },
-        {
-            sortable: false,
-            text: "Verify",
-            value: "verify"
-        },
-        {
-            sortable: false,
-            text: "Action",
-            value: "action",
-            align: "left",
-        }
+        headers: [
+            {sortable: false, text: "ID", value: "name"},
+            {sortable: false, text: "Test Type", value: "TestType"},
+            {sortable: false, text: "Hospital", value: "Hospital"},
+            {sortable: false, text: "User", value: "Users"},
+            {sortable: false, text: "Result", value: "result",width:'5%'},
+            {sortable: false, text: "Date", value: "date"},
+            {sortable: false, text: "Verify", value: "verify",width:'5%'},
+            {sortable: false, text: "Action", value: "action", align: "left",}
         ],
         filter: {
             device_id: '',
@@ -259,50 +217,50 @@ export default {
             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"
-        },
+            {
+                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() {
@@ -327,10 +285,10 @@ export default {
             }
             filter += (page) ? `page=${page}` : `page=1`;
             const result = await ApiService.get(
-                urls.listTestResult(filter)
+                    urls.listTestResult(filter)
             );
             if (result && result.status == 200) {
-                const { data, meta } = result.data;
+                const {data, meta} = result.data;
                 this.items = data;
                 this.currentPage = meta.current_page;
                 this.lastPage = meta.last_page;
@@ -338,7 +296,7 @@ export default {
         },
         async show(testResultId) {
             const result = await ApiService.get(
-                urls.showTestResult(testResultId)
+                    urls.showTestResult(testResultId)
             );
             if (result && result.status == 200) {
                 this.changeCurrentModal({
@@ -351,13 +309,13 @@ export default {
         },
         async remove(testResultId) {
             const result = await ApiService.delete(
-                urls.removeTestResult(testResultId)
+                    urls.removeTestResult(testResultId)
             );
             if (result && result.status == 200) {
                 for (const key in this.items) {
                     if (
-                        this.items.hasOwnProperty(key) &&
-                        this.items[key].id == testResultId
+                            this.items.hasOwnProperty(key) &&
+                            this.items[key].id == testResultId
                     ) {
                         this.items.splice(key, 1);
                     }
@@ -398,8 +356,8 @@ export default {
         getModalResult(testResult) {
             for (const key in this.items) {
                 if (
-                    this.items.hasOwnProperty(key) &&
-                    this.items[key].id == testResult.id
+                        this.items.hasOwnProperty(key) &&
+                        this.items[key].id == testResult.id
                 ) {
                     this.items[key].verified = testResult.verified;
                 }
diff --git a/src/views/TestResult/Show.vue b/src/views/TestResult/Show.vue
index bc508d9..19d991a 100644
--- a/src/views/TestResult/Show.vue
+++ b/src/views/TestResult/Show.vue
@@ -168,9 +168,7 @@ export default {
 			WinPrint.close();
 		},
 		async load() {
-			const result = await ApiService.get(
-				urls.showTestResult(this.$route.params.testResult)
-			);
+			const result = await ApiService.get(urls.showTestResult(this.$route.params.testResult));
 			if (result && result.status == 200) {
 				this.data = result.data.data;
 			}
diff --git a/src/views/TestType/List.vue b/src/views/TestType/List.vue
index 37427d3..fc57bdd 100644
--- a/src/views/TestType/List.vue
+++ b/src/views/TestType/List.vue
@@ -152,32 +152,11 @@ import {mapMutations, mapGetters} from "vuex";
 export default {
     data: () => ({
         headers: [
-            {
-                sortable: false,
-                text: "TestType Name",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "TestType UniqueId",
-                value: "uniqueId"
-            },
-            {
-                sortable: false,
-                text: "Register TestType",
-                value: "users"
-            },
-            {
-                sortable: false,
-                text: "Date",
-                value: "date"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "right",
-            }
+            {sortable: false, text: "TestType Name", value: "name"},
+            {sortable: false, text: "TestType UniqueId", value: "uniqueId"},
+            {sortable: false, text: "Register TestType", value: "users"},
+            {sortable: false, text: "Date", value: "date"},
+            {sortable: false, text: "Action", value: "action", align: "right",}
         ],
         items: [],
         filter: {
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index 21f723d..86c62be 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -108,7 +108,7 @@
                                     <template v-slot:activator="{ on, attrs }">
                                         <v-btn v-bind="attrs" v-on="on" color="pink" v-if="$hasRole('Admin')"
                                                class="WM-ActionButton" @click="remove(item.id)">
-                                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                            <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                             <span>Remove</span>
                                         </v-btn>
                                     </template>