From 0d9a6f2ae40f618f81d6a51607f5899d5e45e740 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Thu, 13 Mar 2025 12:57:07 +0330
Subject: [PATCH] fix : style

---
 src/components/core/Drawer.vue             | 355 ++++++------
 src/components/modal/item/show.vue         |  20 +-
 src/components/modal/user/Confirmation.vue |  23 +-
 src/components/modal/user/List.vue         |   4 +-
 src/components/modal/user/Role.vue         | 101 ++--
 src/services/global/api.service.js         |  12 +-
 src/styles/css/Assets/Main.scss            |   2 +-
 src/views/Cycle/List.vue                   |   9 +-
 src/views/Item/List.vue                    |   4 +-
 src/views/Label/List.vue                   |   4 +-
 src/views/MedicalCenter/AddEdit.vue        | 217 ++++----
 src/views/MedicalCenter/List.vue           |   8 +-
 src/views/MedicalCenter/OperatorList.vue   |   4 +-
 src/views/MyItem/Tabs/MyItems.vue          |   2 +-
 src/views/MyItem/Tabs/MyRequests.vue       |   2 +-
 src/views/Package/List.vue                 |  11 +-
 src/views/TestResult/List.vue              |   6 +-
 src/views/TestType/AddEdit.vue             | 607 +++++++++------------
 src/views/TestType/List.vue                |   4 +-
 src/views/Tickets/List.vue                 |   6 +-
 src/views/User/List.vue                    |   6 +-
 21 files changed, 668 insertions(+), 739 deletions(-)

diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
index 2badfb6..3d52570 100644
--- a/src/components/core/Drawer.vue
+++ b/src/components/core/Drawer.vue
@@ -1,192 +1,209 @@
 <template>
-  <v-navigation-drawer id="app-drawer" v-model="inputValue" app absolute dark floating persistent mobile-break-point="991"
-    width="260">
-    <v-img :src="image" height="100%">
-      <v-layout class="fill-height" tag="v-list" column>
-        <v-list-tile avatar>
-          <v-list-tile-avatar color="white">
-            <!-- <v-img
-              :src="logo"
-              height="34"
-              contain
-            /> -->
-          </v-list-tile-avatar>
-          <v-list-tile-title class="title">
-            {{ $store.state.user.name }}
-            <br />
-            {{ $store.state.user.medical_center?.name }}
-          </v-list-tile-title>
+    <v-navigation-drawer id="app-drawer" v-model="inputValue" app absolute dark floating persistent
+                         mobile-break-point="991"
+                         width="260">
+        <v-img :src="image" height="100%">
+            <v-layout class="fill-height" tag="v-list" column>
+                <v-list-tile avatar>
+                    <v-list-tile-avatar color="white">
+                        <!-- <v-img
+                          :src="logo"
+                          height="34"
+                          contain
+                        /> -->
+                    </v-list-tile-avatar>
+                    <v-list-tile-title class="title">
+                        {{ $store.state.user.name }}
+                        <br/>
+                        {{ $store.state.user.medical_center?.name }}
+                        <v-chip small class="user-role" color="#3a3a3a" text-color="#c3c3c3">
+                            {{ $store.state.roles[0] }}
+                        </v-chip>
+                    </v-list-tile-title>
 
-        </v-list-tile>
-        <v-divider />
-        <v-list-tile v-if="responsive">
-          <v-text-field class="purple-input search-input" label="Search..." color="purple" />
-        </v-list-tile>
-        <template v-for="(link, i) in links">
-          <v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :to="link.to" :active-class="color" avatar
-            class="v-list-item">
-            <v-list-tile-action>
-              <v-icon>{{ link.icon }}</v-icon>
-            </v-list-tile-action>
-            <v-list-tile-title v-text="link.text" />
-          </v-list-tile>
-        </template>
-        <!-- <v-list-tile
-          disabled
-          active-class="primary"
-          class="v-list-item v-list__tile--buy"
-          to="/upgrade"
-        >
-          <v-list-tile-action>
-            <v-icon>mdi-package-up</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-title class="font-weight-light">
-            Upgrade To PRO
-          </v-list-tile-title>
-        </v-list-tile> -->
-      </v-layout>
-    </v-img>
-  </v-navigation-drawer>
+                </v-list-tile>
+                <v-divider/>
+                <v-list-tile v-if="responsive">
+                    <v-text-field class="purple-input search-input" label="Search..." color="purple"/>
+                </v-list-tile>
+                <template v-for="(link, i) in links">
+                    <v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :to="link.to" :active-class="color"
+                                 avatar
+                                 class="v-list-item">
+                        <v-list-tile-action>
+                            <v-icon>{{ link.icon }}</v-icon>
+                        </v-list-tile-action>
+                        <v-list-tile-title v-text="link.text"/>
+                    </v-list-tile>
+                </template>
+                <!-- <v-list-tile
+                  disabled
+                  active-class="primary"
+                  class="v-list-item v-list__tile--buy"
+                  to="/upgrade"
+                >
+                  <v-list-tile-action>
+                    <v-icon>mdi-package-up</v-icon>
+                  </v-list-tile-action>
+                  <v-list-tile-title class="font-weight-light">
+                    Upgrade To PRO
+                  </v-list-tile-title>
+                </v-list-tile> -->
+            </v-layout>
+        </v-img>
+    </v-navigation-drawer>
 </template>
 
 <script>
 // Utilities
 import {
-  mapMutations,
-  mapState
+    mapMutations,
+    mapState
 } from 'vuex'
 
 export default {
-  data: () => ({
-    logo: './img/vuetifylogo.png',
-    links: [
-      {
-        to: { name: 'Dashboard' },
-        icon: 'mdi-view-dashboard',
-        text: 'Dashboard'
-      },
-      {
-        to: { name: 'MyInfo' },
-        icon: 'mdi-account',
-        text: 'My Info'
-      },
-      {
-        to: { name: 'SubmitTestResult' },
-        icon: 'fas fa-vial',
-        text: 'Add a Test Result'
-      },
-      {
-        to: { name: 'AllResultTest' },
-        icon: 'description',
-        text: 'All Test Result'
-      },
-      {
-        to: { name: 'ManageMedicalCenter' },
-        icon: 'far fa-building',
-        text: 'Manage Medical Center',
-        role: 'Admin',
-      },
-      {
-        to: { name: 'ManageUsers' },
-        icon: 'far fa-address-book',
-        text: 'Manage Users',
-        role: 'Admin',
-      },
-      {
-        to: { name: 'ListTestType' },
-        icon: 'fas fa-vial',
-        text: 'List Test Type',
-        role: 'Admin'
-      },
-      {
-        to: { name: 'AllItem' },
-        icon: 'far fa-clone',
-        text: 'Items',
-        role: 'Admin|Supervisor|User'
-      },
-      {
-        to: { name: 'AllPackage' },
-        icon: 'fas fa-archive',
-        text: 'Packages',
-        role: 'Admin|Supervisor|User'
-      },
-      {
-        to: { name: 'AllLabels' },
-        icon: 'fas fa-inbox',
-        text: 'Labels'
-      },
-      {
-        to: { name: 'AllCycle' },
-        icon: 'cached',
-        text: 'Cycles'
-      },
-      {
-        to: { name: 'Statistics' },
-        icon: 'fas fa-chart-bar',
-        text: 'Statistics',
-      },
-      {
-        to: { name: 'Tickets' },
-        icon: 'style',
-        text: 'Tickets',
-      },
-    ],
-    responsive: false
-  }),
-  computed: {
-    ...mapState('app', ['image', 'color']),
-    inputValue: {
-      get() {
-        return this.$store.state.app.drawer
-      },
-      set(val) {
-        this.setDrawer(val)
-      }
+    data: () => ({
+        logo: './img/vuetifylogo.png',
+        links: [
+            {
+                to: {name: 'Dashboard'},
+                icon: 'mdi-view-dashboard',
+                text: 'Dashboard'
+            },
+            {
+                to: {name: 'MyInfo'},
+                icon: 'mdi-account',
+                text: 'My Info'
+            },
+            {
+                to: {name: 'SubmitTestResult'},
+                icon: 'fas fa-vial',
+                text: 'Add a Test Result'
+            },
+            {
+                to: {name: 'AllResultTest'},
+                icon: 'description',
+                text: 'All Test Result'
+            },
+            {
+                to: {name: 'ManageMedicalCenter'},
+                icon: 'far fa-building',
+                text: 'Manage Medical Center',
+                role: 'Admin',
+            },
+            {
+                to: {name: 'ManageUsers'},
+                icon: 'far fa-address-book',
+                text: 'Manage Users',
+                role: 'Admin',
+            },
+            {
+                to: {name: 'ListTestType'},
+                icon: 'fas fa-vial',
+                text: 'List Test Type',
+                role: 'Admin'
+            },
+            {
+                to: {name: 'AllItem'},
+                icon: 'far fa-clone',
+                text: 'Items',
+                role: 'Admin|Supervisor|User'
+            },
+            {
+                to: {name: 'AllPackage'},
+                icon: 'fas fa-archive',
+                text: 'Packages',
+                role: 'Admin|Supervisor|User'
+            },
+            {
+                to: {name: 'AllLabels'},
+                icon: 'fas fa-inbox',
+                text: 'Labels'
+            },
+            {
+                to: {name: 'AllCycle'},
+                icon: 'cached',
+                text: 'Cycles'
+            },
+            {
+                to: {name: 'Statistics'},
+                icon: 'fas fa-chart-bar',
+                text: 'Statistics',
+            },
+            {
+                to: {name: 'Tickets'},
+                icon: 'style',
+                text: 'Tickets',
+            },
+        ],
+        responsive: false
+    }),
+    computed: {
+        ...mapState('app', ['image', 'color']),
+        inputValue: {
+            get() {
+                return this.$store.state.app.drawer
+            },
+            set(val) {
+                this.setDrawer(val)
+            }
+        },
+        items() {
+            return this.$t('Layout.View.items')
+        }
     },
-    items() {
-      return this.$t('Layout.View.items')
+    mounted() {
+        this.onResponsiveInverted()
+        window.addEventListener('resize', this.onResponsiveInverted)
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.onResponsiveInverted)
+    },
+    methods: {
+        ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
+        onResponsiveInverted() {
+            if (window.innerWidth < 991) {
+                this.responsive = true
+            } else {
+                this.responsive = false
+            }
+        }
     }
-  },
-  mounted() {
-    this.onResponsiveInverted()
-    window.addEventListener('resize', this.onResponsiveInverted)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.onResponsiveInverted)
-  },
-  methods: {
-    ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
-    onResponsiveInverted() {
-      if (window.innerWidth < 991) {
-        this.responsive = true
-      } else {
-        this.responsive = false
-      }
-    }
-  }
 }
 </script>
 
 <style lang="scss">
 #app-drawer {
-  .v-list__tile {
-    border-radius: 4px;
+    .v-list__tile {
+        border-radius: 4px;
 
-    &--buy {
-      margin-top: auto;
-      margin-bottom: 17px;
+        &--buy {
+            margin-top: auto;
+            margin-bottom: 17px;
+        }
     }
-  }
 
-  .v-image__image--contain {
-    top: 9px;
-    height: 60%;
-  }
+    .v-chip.user-role {
+        border-radius: 4px;
+        height: 20px !important;
+        line-height: 20px;
+        font-size: 11px;
+        letter-spacing: 1px;
 
-  .search-input {
-    margin-bottom: 30px !important;
-    padding-left: 15px;
-    padding-right: 15px;
-  }
+        .v-chip__content {
+            padding: 0 5px;
+        }
+    }
+
+    .v-image__image--contain {
+        top: 9px;
+        height: 60%;
+    }
+
+    .search-input {
+        margin-bottom: 30px !important;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }
 </style>
diff --git a/src/components/modal/item/show.vue b/src/components/modal/item/show.vue
index e3ea1d2..c76ad85 100644
--- a/src/components/modal/item/show.vue
+++ b/src/components/modal/item/show.vue
@@ -1,4 +1,3 @@
-
 <template>
     <v-container grid-list-xs>
         <material-card color="black" title="Show Item">
@@ -29,15 +28,15 @@
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title CSSD-font">Specific :</span>
-                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.specific
-                            }}</span>
+                            <span class="headline ml-1 CSSD-font" style="letter-spacing:0 !important">{{ data.specific}}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title CSSD-font">Register User :</span>
-                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">{{ (typeof data.user
-                                != 'undefined') ? data.user.name : '' }}</span>
+                            <span class="headline ml-2 CSSD-font" style="letter-spacing:0 !important">
+                                {{ (typeof data.user != 'undefined') ? data.user.name : '' }}
+                            </span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
@@ -61,8 +60,9 @@
                     </v-layout>
                     <v-layout row wrap class="ml-4">
                         <v-flex xs12 md6 sm6 v-if="QRCodeimg">
-                            <a :href="'/Show/Item/' + data.id + ''" target="_blank"><img :src="QRCodeimg"
-                                    class="WM-Width-150"></a>
+                            <a :href="'/Show/Item/' + data.id + ''" target="_blank">
+                                <img :src="QRCodeimg" class="WM-Width-150">
+                            </a>
                         </v-flex>
                     </v-layout>
                 </v-layout>
@@ -75,10 +75,8 @@
                         <span class="white--text CSSD-font">Print</span>
                     </v-btn>
                 </v-flex>
-                <v-flex class xs12 md2 sm2 @click="changeCurrentModal({
-                    modal: 'modal-user-list',
-                    properties: { data }
-                })">
+                <v-flex class xs12 md2 sm2
+                        @click="changeCurrentModal({modal: 'modal-user-list',  properties: { data }})">
                     <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-rocket</v-icon>
diff --git a/src/components/modal/user/Confirmation.vue b/src/components/modal/user/Confirmation.vue
index ceb7bf7..bebb7ad 100644
--- a/src/components/modal/user/Confirmation.vue
+++ b/src/components/modal/user/Confirmation.vue
@@ -5,14 +5,18 @@
                 <div class="text-center"> Are you sure?</div>
                 <v-layout row wrap>
                     <v-layout align-center justify-center wrap class="px-5 mt-2">
-                        <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-                            <span class="white--text">Confirm</span>
-                        </v-btn>
-                        <v-btn @click="closeModal" class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                            <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
-                            <span class="black--text">Close</span>
-                        </v-btn>
+                        <v-flex xs12 sm6 md6 class="text-center">
+                            <v-btn @click="closeModal" class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <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 sm6 md6 class="text-center">
+                            <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Confirm</span>
+                            </v-btn>
+                        </v-flex>
                     </v-layout>
                 </v-layout>
             </material-card>
@@ -20,7 +24,8 @@
     </v-form>
 </template>
 <script>
-import { mapGetters, mapMutations } from "vuex";
+import {mapGetters, mapMutations} from "vuex";
+
 export default {
     methods: {
         ...mapMutations("modal", ["closeModal"]),
diff --git a/src/components/modal/user/List.vue b/src/components/modal/user/List.vue
index e31ce08..85434b5 100644
--- a/src/components/modal/user/List.vue
+++ b/src/components/modal/user/List.vue
@@ -29,10 +29,10 @@
                     </v-flex>
                 </v-layout>
                 <v-layout class="px-4 my-3">
-                    <v-divider></v-divider>
+                    <v-divider/>
                 </v-layout>
                 <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>
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center justify-strart class="mt-3">
                     <v-btn type="submit" class="WM-CyanBlueGradient-BG ml-5 px-5">
diff --git a/src/components/modal/user/Role.vue b/src/components/modal/user/Role.vue
index 06216fa..e3a4537 100644
--- a/src/components/modal/user/Role.vue
+++ b/src/components/modal/user/Role.vue
@@ -1,56 +1,59 @@
 <template>
-  <v-form>
-    <v-container grid-list-xs fluid>
-      <material-card class color="black" title="Role">
-        <v-layout row align-center justify-center wrap class="px-5 mb-3">
-          <v-flex xs12 md3 sm3>
-            <v-select :items="items" v-model="data.roles" label="Roles" color="black"></v-select>
-          </v-flex>
-        </v-layout>
-        <v-layout row wrap>
-          <v-layout align-center justify-center wrap class="px-5 mt-2">
-            <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-              <span class="white--text">Add</span>
-            </v-btn>
-            <v-btn
-              @click="closeModal"
-              class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5"
-            >
-              <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
-              <span class="black--text">Close</span>
-            </v-btn>
-          </v-layout>
-        </v-layout>
-      </material-card>
-    </v-container>
-  </v-form>
+    <v-form>
+        <v-container grid-list-xs fluid>
+            <material-card class color="black" title="Role">
+                <v-layout row align-center justify-center wrap class="px-5 mb-3">
+                    <v-flex xs12 md3 sm3>
+                        <v-select :items="items" v-model="data.roles" label="Roles" color="black"></v-select>
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap>
+                    <v-layout align-center justify-center wrap class="px-5 mt-2">
+                        <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 xs12 sm6 md6 lg3 class="text-center">
+                            <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
+                            </v-btn>
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 <script>
-import { mapGetters, mapMutations } from "vuex";
-import { ApiService } from "@/services";
-import { roles } from "@/config/utils";
-import { urls } from "@/config/urls";
+import {mapGetters, mapMutations} from "vuex";
+import {ApiService} from "@/services";
+import {roles} from "@/config/utils";
+import {urls} from "@/config/urls";
+
 export default {
-  data: () => ({
-    items: roles,
-    data: { roles: "" }
-  }),
-  methods: {
-    ...mapMutations("modal", ["closeModal", "setResultModal"]),
-    async changeRole() {
-      const result = await ApiService.post(
-        urls.changeRoleUser(this.getModalProperties.user.id),
-        this.data
-      );
-      if (result && result.status == 200) {
-        this.setResultModal(result.data.data);
-        this.closeModal();
-      }
+    data: () => ({
+        items: roles,
+        data: {roles: ""}
+    }),
+    methods: {
+        ...mapMutations("modal", ["closeModal", "setResultModal"]),
+        async changeRole() {
+            const result = await ApiService.post(
+                    urls.changeRoleUser(this.getModalProperties.user.id),
+                    this.data
+            );
+            if (result && result.status == 200) {
+                this.setResultModal(result.data.data);
+                this.closeModal();
+            }
+        }
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalProperties"])
     }
-  },
-  computed: {
-    ...mapGetters("modal", ["getModalProperties"])
-  }
 };
 </script>
\ No newline at end of file
diff --git a/src/services/global/api.service.js b/src/services/global/api.service.js
index 4e3ee67..957d6ca 100644
--- a/src/services/global/api.service.js
+++ b/src/services/global/api.service.js
@@ -100,9 +100,9 @@ export default ApiService
 export { ApiService }
 
 axios.interceptors.request.use(request => {
-    console.log("🔵 API Request:", request.method.toUpperCase(), request.url);
-    console.log("🔹 Headers:", request.headers);
-    console.log("🔹 Data:", request.data);
+    // console.log("🔵 API Request:", request.method.toUpperCase(), request.url);
+    // console.log("🔹 Headers:", request.headers);
+    // console.log("🔹 Data:", request.data);
     return request;
 }, error => {
     console.error("🔴 Request Error:", error);
@@ -110,9 +110,9 @@ axios.interceptors.request.use(request => {
 });
 
 axios.interceptors.response.use(response => {
-    console.log("🟢 API Response:", response.config.url);
-    console.log("🟢 Status:", response.status);
-    console.log("🟢 Data:", response.data);
+    // console.log("🟢 API Response:", response.config.url);
+    // console.log("🟢 Status:", response.status);
+    // console.log("🟢 Data:", response.data);
     return response;
 }, error => {
     console.error("🔴 API Error:", error.response ? error.response.data : error);
diff --git a/src/styles/css/Assets/Main.scss b/src/styles/css/Assets/Main.scss
index d1f544d..26027a4 100644
--- a/src/styles/css/Assets/Main.scss
+++ b/src/styles/css/Assets/Main.scss
@@ -165,7 +165,7 @@ h3.CSSD-font {
 .v-btn.WM-NoShadow:not(.v-btn--depressed):not(.v-btn--flat) {
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
-  padding: 8px 30px;
+  padding: 10px 30px;
 }
 
 .inputfile {
diff --git a/src/views/Cycle/List.vue b/src/views/Cycle/List.vue
index 5226f91..44da63e 100644
--- a/src/views/Cycle/List.vue
+++ b/src/views/Cycle/List.vue
@@ -37,7 +37,7 @@
                     </v-flex>
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
@@ -63,12 +63,13 @@
                             </template>
                             <template slot="items" slot-scope="{ item }">
                                 <td class="headline font-weight-light">{{ item.id }}</td>
-                                <td class="title font-weight-light">{{ (item.user && item.user.medical_center) ?
-                                    item.user.medical_center.name : '' }}</td>
+                                <td class="title font-weight-light">
+                                    {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
+                                </td>
                                 <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
                                 <td class="title font-weight-light">{{ item.cycle_number }}</td>
                                 <td class="title font-weight-light">{{ item.date }}</td>
-                                <td class="text-xs-right FlexBtn Height-MD-60">
+                                <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                                     <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"
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index 9256cea..269eb4d 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -29,7 +29,7 @@
                     <!--btn-->
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
@@ -64,7 +64,7 @@
                                 <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">
+                                <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
diff --git a/src/views/Label/List.vue b/src/views/Label/List.vue
index 6bc8be2..641b731 100644
--- a/src/views/Label/List.vue
+++ b/src/views/Label/List.vue
@@ -35,7 +35,7 @@
                     </v-flex>
                     <v-spacer/>
                     <v-flex xs12 sm6 md6 lg2 xl1 class="">
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
@@ -67,7 +67,7 @@
                                 <td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
                                 <td class="title font-weight-light">{{ item.cycle_number }}</td>
                                 <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
-                                <td class="text-xs-right FlexBtn Height-MD-60">
+                                <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                                     <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"
diff --git a/src/views/MedicalCenter/AddEdit.vue b/src/views/MedicalCenter/AddEdit.vue
index f66731e..5084ca8 100644
--- a/src/views/MedicalCenter/AddEdit.vue
+++ b/src/views/MedicalCenter/AddEdit.vue
@@ -1,118 +1,123 @@
 <template>
-  <v-form ref="form">
-    <v-container grid-list-xs>
-      <material-card class color="black" title="Add Medical Center" text>
-        <v-layout row wrap class="px-5 mb-3">
-          <v-flex xs12 md3 xs3>
-            <v-text-field
-              v-model="medicalCenter.name"
-              label="Name"
-              color="black"
-              class="pa-2"
-              :rules="[rules.required, rules.counter]"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 md3 xs3>
-              <v-select
-                :items="cities"
-                item-text="name_en"
-                item-value="id"
-                v-model="medicalCenter.city_id"
-                label="Select City"
-              ></v-select>
-          </v-flex>
-          <v-flex xs12 md3 xs3>
-            <v-text-field
-              v-model="medicalCenter.address"
-              label="Address"
-              color="black"
-              class="pa-2"
-              :rules="[rules.required]"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 md3 xs3>
-            <v-text-field
-              v-model="medicalCenter.phone_number"
-              label="Phone Number"
-              color="black"
-              class="pa-2"
-              :rules="[rules.required]"
-            ></v-text-field>
-          </v-flex>
-        </v-layout>
-        <v-layout row wrap align-center justify-center class="mt-3">
-          <v-btn class="WM-CyanBlueGradient-BG" @click="AddMedicalCenter" style="padding:10px 60px">
-            <template v-if="$route.params.medicalCenter">
-              <v-icon class="white--text mr-2 caption">fas fa-edit</v-icon>
-              <span class="white--text">Edit</span>
-            </template>
-            <template v-else>
-              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-              <span class="white--text">Add</span>
-            </template>
-          </v-btn>
-          <router-link :to="{name:'ManageMedicalCenter'}">
-            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-              <span class="black--text">Back</span>
-            </v-btn>
-          </router-link>
-        </v-layout>
-      </material-card>
-    </v-container>
-  </v-form>
+    <v-form ref="form">
+        <v-container grid-list-xs>
+            <material-card class color="black" title="Add Medical Center" text>
+                <v-layout row wrap class="px-5 mb-3">
+                    <v-flex xs12 sm6 md6 lg3>
+                        <v-text-field
+                                v-model="medicalCenter.name"
+                                label="Name"
+                                color="black"
+                                class="pa-2"
+                                :rules="[rules.required, rules.counter]"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3>
+                        <v-select
+                                :items="cities"
+                                item-text="name_en"
+                                item-value="id"
+                                v-model="medicalCenter.city_id"
+                                label="Select City"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3>
+                        <v-text-field
+                                v-model="medicalCenter.address"
+                                label="Address"
+                                color="black"
+                                class="pa-2"
+                                :rules="[rules.required]"
+                        />
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3>
+                        <v-text-field
+                                v-model="medicalCenter.phone_number"
+                                label="Phone Number"
+                                color="black"
+                                class="pa-2"
+                                :rules="[rules.required]"
+                        />
+                    </v-flex>
+                </v-layout>
+                <v-layout row wrap align-center justify-center class="mt-3">
+                    <v-flex xs12 sm6 md6 lg3 class="text-center">
+                        <router-link :to="{name:'ManageMedicalCenter'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="text-center">
+                        <v-btn class="WM-CyanBlueGradient-BG" @click="AddMedicalCenter" style="padding:10px 60px">
+                            <template v-if="$route.params.medicalCenter">
+                                <v-icon class="white--text mr-2 caption">fas fa-edit</v-icon>
+                                <span class="white--text">Edit</span>
+                            </template>
+                            <template v-else>
+                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="white--text">Add</span>
+                            </template>
+                        </v-btn>
+                    </v-flex>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+
 export default {
-  data() {
-    return {
-      medicalCenter: {
-        name: "",
-        address : "",
-        city_id : "",
-        phone_number : ""
-      },
-      rules: {
-        required: value => !!value || "Required.",
-        counter: value => value.length <= 30 || "Max 30 characters"
+    data() {
+        return {
+            medicalCenter: {
+                name: "",
+                address: "",
+                city_id: "",
+                phone_number: ""
+            },
+            rules: {
+                required: value => !!value || "Required.",
+                counter: value => value.length <= 30 || "Max 30 characters"
+            },
+            cities: []
+        };
     },
-    cities : []
-    };
-  },
-  created() {
-    if (this.$route.params.medicalCenter) {
-      this.load(this.$route.params.medicalCenter);
-      }
-      this.loadCities();
-  },
-  methods: {
-    async load(id) {
-      const result = await ApiService.get(urls.editMedicalCenter(id));
-      if (result && result.status == 200) {
-        this.medicalCenter = result.data.data;
-      }
-    },
-    async loadCities() {
-        const result = await ApiService.get(urls.allCities);
-        if (result.status == 200) {
-            this.cities = result.data.data;
-        }
-    },
-    async AddMedicalCenter() {
-      if (this.$refs.form.validate()) {
+    created() {
         if (this.$route.params.medicalCenter) {
-          var result = await ApiService.put(urls.updateMedicalCenter(this.$route.params.medicalCenter), this.medicalCenter);
-        } else {
-          var result = await ApiService.post(urls.storeMedicalCenter, this.medicalCenter);
+            this.load(this.$route.params.medicalCenter);
         }
-        if (result && result.status == 200) {
-          this.$router.push({name : "ManageMedicalCenter"});
+        this.loadCities();
+    },
+    methods: {
+        async load(id) {
+            const result = await ApiService.get(urls.editMedicalCenter(id));
+            if (result && result.status == 200) {
+                this.medicalCenter = result.data.data;
+            }
+        },
+        async loadCities() {
+            const result = await ApiService.get(urls.allCities);
+            if (result.status == 200) {
+                this.cities = result.data.data;
+            }
+        },
+        async AddMedicalCenter() {
+            if (this.$refs.form.validate()) {
+                if (this.$route.params.medicalCenter) {
+                    var result = await ApiService.put(urls.updateMedicalCenter(this.$route.params.medicalCenter), this.medicalCenter);
+                } else {
+                    var result = await ApiService.post(urls.storeMedicalCenter, this.medicalCenter);
+                }
+                if (result && result.status == 200) {
+                    this.$router.push({name: "ManageMedicalCenter"});
+                }
+            }
         }
-      }
     }
-  }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index 570e93a..bd27752 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -7,7 +7,7 @@
         </v-flex>
           <v-spacer/>
           <v-flex class xs12 sm6 md6 lg2 xl1>
-              <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+              <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                   <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                   <span class="white--text">Filter</span>
               </v-btn>
@@ -22,7 +22,7 @@
           </v-flex>
       </v-layout>
       <v-layout class="px-4 my-3">
-        <v-divider></v-divider>
+        <v-divider/>
       </v-layout>
       <v-layout align-center justify-center wrap class="px-5 mt-3">
         <v-flex md12>
@@ -34,7 +34,7 @@
               <td class="headline 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">
+              <td class="text-xs-right FlexBtn Height-MD-80 Height-SM-48 justify-self-end">
                 <v-tooltip bottom open-on-hover>
                   <template v-slot:activator="{ on, attrs }">
                     <router-link class="LinkBtn"
@@ -72,7 +72,7 @@
           </v-data-table>
         </v-flex>
       </v-layout>
-      <v-divider></v-divider>
+      <v-divider/>
       <div class="text-xs-center mt-2" v-if="lastPage > 1">
         <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
       </div>
diff --git a/src/views/MedicalCenter/OperatorList.vue b/src/views/MedicalCenter/OperatorList.vue
index 6ea6846..dc82a0c 100644
--- a/src/views/MedicalCenter/OperatorList.vue
+++ b/src/views/MedicalCenter/OperatorList.vue
@@ -12,7 +12,7 @@
           <v-select :items="roles" name="roles" v-model="filter.role"  label="Roles" class="pa-2" color="black"></v-select>
         </v-flex>
         <v-flex xs12 md2 sm2 class="text-xs-right">
-          <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:9px 30px">
+          <v-btn class="WM-CyanBlueGradient-BG" @click="load" style="padding:10px 30px">
             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
             <span class="white--text">Filter</span>
           </v-btn>
@@ -43,7 +43,7 @@
               </td>
               <td class="title font-weight-light">{{ item.cell_number }}</td>
               <td class="title font-weight-light">{{ item.status }}</td>
-              <td class="text-xs-right">
+              <td class="text-xs-right justify-self-end">
                 <v-btn
                   :color="item.status == 'Active' ? 'red' : 'green'"
                   @click="changeStatus(item.id)"
diff --git a/src/views/MyItem/Tabs/MyItems.vue b/src/views/MyItem/Tabs/MyItems.vue
index 1314ea7..3921200 100644
--- a/src/views/MyItem/Tabs/MyItems.vue
+++ b/src/views/MyItem/Tabs/MyItems.vue
@@ -56,7 +56,7 @@
                         <td class="title font-weight-light">{{ item.name }}</td>
                         <td class="title font-weight-light">{{ item.udi }}</td>
                         <td class="title font-weight-light">{{ item.size }}</td>
-                        <td class="text-xs-right FlexBtn Height-MD-60">
+                        <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                             <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)">
diff --git a/src/views/MyItem/Tabs/MyRequests.vue b/src/views/MyItem/Tabs/MyRequests.vue
index e638c8b..4131188 100644
--- a/src/views/MyItem/Tabs/MyRequests.vue
+++ b/src/views/MyItem/Tabs/MyRequests.vue
@@ -56,7 +56,7 @@
                         <td class="title font-weight-light">{{ item.name }}</td>
                         <td class="title font-weight-light">{{ item.udi }}</td>
                         <td class="title font-weight-light">{{ item.size }}</td>
-                        <td class="text-xs-right FlexBtn Height-MD-60">
+                        <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
                             <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)">
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index 9b531cd..30bcb3f 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -19,7 +19,7 @@
                                         :clearable="true"/>
                     </v-flex>
                     <!-- <v-flex class xs12 md2 sm3>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
@@ -28,7 +28,7 @@
                     <!-- <v-spacer></v-spacer> -->
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
@@ -60,14 +60,13 @@
                                 <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 class="title font-weight-light">
+                                    {{item.user ? item.user.name : '' | text_20_letter}}
                                 </td>
                                 <td class="title font-weight-light">{{ item.udi | 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">
+                                <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'"
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 04ee64e..6463dea 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -53,7 +53,7 @@
                     <v-spacer/>
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 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>
@@ -69,7 +69,7 @@
                 </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:9px 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>
@@ -113,7 +113,7 @@
                                     </span>
                                     <!-- {{ item.verified }} -->
                                 </td>
-                                <td class="text-xs-right FlexBtn">
+                                <td class="text-xs-right FlexBtn justify-self-end">
                                     <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"
diff --git a/src/views/TestType/AddEdit.vue b/src/views/TestType/AddEdit.vue
index 96adbdc..ba97448 100644
--- a/src/views/TestType/AddEdit.vue
+++ b/src/views/TestType/AddEdit.vue
@@ -3,30 +3,30 @@
         <v-container grid-list-xs>
             <material-card color="black" title="Add a New Test" class>
                 <v-layout row wrap class="ma-2">
-                  <v-flex xs12 md3 sm3 class="WM-FlexCenter">
-                      <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
                         <v-text-field
-                            name="name"
-                            v-model="form.name"
-                            label="Name"
-                            color="black"
-                            class="py-3 pr-3"
-                            :rules="[rules.required]"
-                        ></v-text-field>
+                                name="name"
+                                v-model="form.name"
+                                label="Name"
+                                color="black"
+                                class="py-3 pr-3"
+                                :rules="[rules.required]"
+                        />
                     </v-flex>
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                         <v-text-field
-                            :rules="[rules.required]"
-                            name="uniquecode"
-                            v-model="form.unique_code"
-                            label="Unique Code"
-                            color="black"
-                            class="py-3 pr-3"
-                        ></v-text-field>
+                                :rules="[rules.required]"
+                                name="uniquecode"
+                                v-model="form.unique_code"
+                                label="Unique Code"
+                                color="black"
+                                class="py-3 pr-3"
+                        />
                     </v-flex>
                     <!-- <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-                      <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                      <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                       <v-autocomplete
                           :rules="[rules.required]"
                           :items="deviceLabels"
@@ -36,341 +36,238 @@
                           label="ID Label"
                           color="black"
                           class="py-3 pr-3"
-                      ></v-autocomplete>
+                      />
                   </v-flex> -->
                 </v-layout>
-                <v-layout
-                    row
-                    wrap
-                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
-                    :key="keyForm"
-                    v-for="(info, keyForm) in form.info"
-                >
+                <v-layout row wrap class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
+                          :key="keyForm" v-for="(info, keyForm) in form.info">
                     <v-layout row wrap class="ma-2 WM-Width-Full">
                         <v-flex xs12 md3 sm3>
                             <v-text-field
-                                name="inputname"
-                                v-model="info.name"
-                                label="Input Name"
-                                color="black"
-                                class="pa-2"
-                                :rules="[rules.required]"
-                                prepend-icon="fa fa-align-left"
-                            ></v-text-field>
+                                    name="inputname"
+                                    v-model="info.name"
+                                    label="Input Name"
+                                    color="black"
+                                    class="pa-2"
+                                    :rules="[rules.required]"
+                                    prepend-icon="fa fa-align-left"
+                            />
                         </v-flex>
                         <v-flex xs12 md3 sm3>
                             <v-select
-                                :items="type"
-                                item-text="state"
-                                item-value="abbr"
-                                label="Type"
-                                v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
-                                v-model="info.type"
-                                single-line
-                                color="black"
-                                class="pa-2"
-                                prepend-icon="fa fa-filter"
-                                @change="changeType(keyForm, info.type)"
-                            ></v-select>
+                                    :items="type"
+                                    item-text="state"
+                                    item-value="abbr"
+                                    label="Type"
+                                    v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
+                                    v-model="info.type"
+                                    single-line
+                                    color="black"
+                                    class="pa-2"
+                                    prepend-icon="fa fa-filter"
+                                    @change="changeType(keyForm, info.type)"
+                            />
                         </v-flex>
                         <!-- Text Input Section -->
                         <v-flex xs12 md3 sm3>
                             <v-select
-                                :items="size"
-                                item-text="state"
-                                item-value="abbr"
-                                label="Size"
-                                v-model="info.size"
-                                v-if="info.type !== 'Form'"
-                                single-line
-                                color="black"
-                                class="pa-2"
-                                prepend-icon="fa fa-sort-numeric-asc"
-                            ></v-select>
+                                    :items="size"
+                                    item-text="state"
+                                    item-value="abbr"
+                                    label="Size"
+                                    v-model="info.size"
+                                    v-if="info.type !== 'Form'"
+                                    single-line
+                                    color="black"
+                                    class="pa-2"
+                                    prepend-icon="fa fa-sort-numeric-asc"
+                            />
                         </v-flex>
                         <v-flex xs12 md3 sm3 v-if="info.type == 'Text'">
-              						<v-layout row wrap>
-              								<v-flex xs12 class="WM-FlexWrap ml-3">
-              									<v-checkbox
-              										label="require barcode scanner"
-              										v-model="info.require_scanner"
-              									></v-checkbox>
-              							</v-flex>
-              					</v-layout>
-              				</v-flex>
+                            <v-layout row wrap>
+                                <v-flex xs12 class="WM-FlexWrap ml-3">
+                                    <v-checkbox
+                                            label="require barcode scanner"
+                                            v-model="info.require_scanner"
+                                    />
+                                </v-flex>
+                            </v-layout>
+                        </v-flex>
 
 
                     </v-layout>
                     <!-- SelectBox Section -->
-                    <v-layout
-                        class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                        row
-                        wrap
-                        v-if="info.type === 'Select' || info.type === 'Checkbox' || info.type === 'Radiobutton'"
-                    >
-                        <v-layout
-                            row
-                            wrap
-                            class="WM-Relative WM-Width-Full"
-                            v-if="info['options'].length > 0"
-                        >
-                            <v-flex
-                                xs12
-                                md3
-                                sm3
-                                v-for="(selectbox , keySelect) in info['options']"
-                                :key="keySelect"
-                                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
-                            >
+                    <v-layout class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" row wrap
+                              v-if="info.type === 'Select' || info.type === 'Checkbox' || info.type === 'Radiobutton'">
+                        <v-layout row wrap class="WM-Relative WM-Width-Full"
+                                  v-if="info['options'].length > 0">
+                            <v-flex xs12 md3 sm3 v-for="(selectbox , keySelect) in info['options']" :key="keySelect"
+                                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
                                 <v-text-field
-                                    :rules="[rules.required]"
-                                    name="title"
-                                    label="Title"
-                                    color="black"
-                                    class="pa-2 Input"
-                                    v-model="selectbox.title"
-                                    prepend-icon="fa fa-align-left"
-                                ></v-text-field>
-                                <v-btn
-                                    absolute
-                                    small
-                                    right
-                                    bottom
-                                    color="pink"
-                                    v-if="keySelect >= 1"
-                                    @click="removeSelectbox(keyForm, keySelect)"
-                                >
-                                    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                                        :rules="[rules.required]"
+                                        name="title"
+                                        label="Title"
+                                        color="black"
+                                        class="pa-2 Input"
+                                        v-model="selectbox.title"
+                                        prepend-icon="fa fa-align-left"
+                                />
+                                <v-btn absolute small right bottom color="pink" v-if="keySelect >= 1"
+                                       @click="removeSelectbox(keyForm, keySelect)">
+                                    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                    REMOVE
                                 </v-btn>
                             </v-flex>
                         </v-layout>
-                        <v-btn
-                            absolute
-                            right
-                            bottom
-                            small
-                            @click="addSelectbox(keyForm)"
-                            color="black"
-                            class="mb-2"
-                        >
+                        <v-btn absolute right bottom small @click="addSelectbox(keyForm)"
+                               color="black"
+                               class="mb-2">
                             <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                             <span class="white--text">Add</span>
                         </v-btn>
                     </v-layout>
-                    <v-layout
-                        class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                        row
-                        wrap
-                        v-if="info.type === 'Range'"
-                    >
-                        <v-layout
-                            row
-                            wrap
-                            class="WM-Relative WM-Width-Full"
-                        >
-                            <v-flex
-                                xs12
-                                md3
-                                sm3
-                                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
-                            >
+                    <v-layout class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full" row wrap
+                              v-if="info.type === 'Range'">
+                        <v-layout row wrap class="WM-Relative WM-Width-Full">
+                            <v-flex xs12 md3 sm3
+                                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
                                 <v-text-field
-                                    :rules="[rules.required]"
-                                    name="from"
-                                    label="From"
-                                    color="black"
-                                    class="pa-2 Input"
-                                    v-model="info['options'][0].title"
-                                    prepend-icon="fa fa-angle-right"
-                                ></v-text-field>
+                                        :rules="[rules.required]"
+                                        name="from"
+                                        label="From"
+                                        color="black"
+                                        class="pa-2 Input"
+                                        v-model="info['options'][0].title"
+                                        prepend-icon="fa fa-angle-right"
+                                />
                             </v-flex>
                             <v-flex
-                                xs12
-                                md3
-                                sm3
-                                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
+                                    xs12
+                                    md3
+                                    sm3
+                                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
                             >
                                 <v-text-field
-                                    :rules="[rules.required]"
-                                    name="to"
-                                    label="To"
-                                    color="black"
-                                    class="pa-2 Input"
-                                    v-model="info['options'][1].title"
-                                    prepend-icon="fa fa-angle-right"
-                                ></v-text-field>
+                                        :rules="[rules.required]"
+                                        name="to"
+                                        label="To"
+                                        color="black"
+                                        class="pa-2 Input"
+                                        v-model="info['options'][1].title"
+                                        prepend-icon="fa fa-angle-right"
+                                />
                             </v-flex>
                         </v-layout>
                     </v-layout>
                     <!-- Form Section -->
                     <v-layout
-                        row
-                        wrap
-                        v-if="info.type === 'Form'"
-                        class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                    >
-                        <v-layout
                             row
                             wrap
-                            v-for="(children , keychildren) in info.children"
-                            :key="keychildren"
-                            class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form"
-                        >
+                            v-if="info.type === 'Form'"
+                            class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
+                    >
+                        <v-layout row wrap v-for="(children , keychildren) in info.children" :key="keychildren"
+                                  class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form">
                             <v-flex xs12 md3 sm3>
                                 <v-text-field
-                                    :rules="[rules.required]"
-                                    name="name"
-                                    v-model="children.name"
-                                    label="Input Name"
-                                    color="black"
-                                    class="pa-2"
-                                    prepend-icon="fa fa-align-left"
-                                ></v-text-field>
+                                        :rules="[rules.required]"
+                                        name="name"
+                                        v-model="children.name"
+                                        label="Input Name"
+                                        color="black"
+                                        class="pa-2"
+                                        prepend-icon="fa fa-align-left"
+                                />
                             </v-flex>
                             <v-flex xs12 md3 sm3>
                                 <v-select
-                                    :items="type"
-                                    item-text="state"
-                                    item-value="abbr"
-                                    label="Type"
-                                    v-model="children.type"
-                                    v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
-                                    single-line
-                                    color="black"
-                                    class="pa-2"
-                                    @change="changeTypeForm(keyForm, children.type, keychildren)"
-                                    prepend-icon="fa fa-filter"
-                                ></v-select>
+                                        :items="type"
+                                        item-text="state"
+                                        item-value="abbr"
+                                        label="Type"
+                                        v-model="children.type"
+                                        v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
+                                        single-line
+                                        color="black"
+                                        class="pa-2"
+                                        @change="changeTypeForm(keyForm, children.type, keychildren)"
+                                        prepend-icon="fa fa-filter"
+                                />
                             </v-flex>
                             <v-flex xs12 md3 sm3>
                                 <v-select
-                                    :items="size"
-                                    item-text="state"
-                                    item-value="abbr"
-                                    label="Size"
-                                    v-if="children.type !== 'Form'"
-                                    v-model="children.size"
-                                    single-line
-                                    color="black"
-                                    class="pa-2"
-                                    prepend-icon="fa fa-sort-numeric-asc"
-                                ></v-select>
+                                        :items="size"
+                                        item-text="state"
+                                        item-value="abbr"
+                                        label="Size"
+                                        v-if="children.type !== 'Form'"
+                                        v-model="children.size"
+                                        single-line
+                                        color="black"
+                                        class="pa-2"
+                                        prepend-icon="fa fa-sort-numeric-asc"
+                                />
                             </v-flex>
                             <v-flex xs12 md3 sm3 v-if="children.type == 'Text'">
-                  						<v-layout row wrap>
-                  								<v-flex xs12 class="WM-FlexWrap ml-3">
-                  									<v-checkbox
-                  										label="require barcode scanner"
-                  										v-model="children.require_scanner"
-                  									></v-checkbox>
-                  							</v-flex>
-                  					</v-layout>
-                  				</v-flex>
+                                <v-layout row wrap>
+                                    <v-flex xs12 class="WM-FlexWrap ml-3">
+                                        <v-checkbox
+                                                label="require barcode scanner"
+                                                v-model="children.require_scanner"
+                                        />
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
                             <!-- Inner Form Selectbox Section  -->
-                            <v-layout
-                                row
-                                wrap
-                                class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                                v-if="children.type === 'Select' || children.type === 'Checkbox' || children.type === 'Radiobutton'"
-                            >
-                                <v-layout
-                                    row
-                                    wrap
-                                    class="WM-Relative WM-Width-Full"
-                                    v-if="children['options'].length > 0"
-                                >
-                                    <v-flex
-                                        xs12
-                                        md3
-                                        sm3
-                                        v-for="(selectbox , keySelect) in children['options']"
-                                        :key="keySelect"
-                                        class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
-                                    >
+                            <v-layout row wrap class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
+                                      v-if="children.type === 'Select' || children.type === 'Checkbox' || children.type === 'Radiobutton'">
+                                <v-layout row wrap class="WM-Relative WM-Width-Full"
+                                          v-if="children['options'].length > 0">
+                                    <v-flex xs12 md3 sm3 v-for="(selectbox , keySelect) in children['options']"
+                                            :key="keySelect"
+                                            class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative">
                                         <v-text-field
-                                            name="title"
-                                            label="Title"
-                                            color="black"
-                                            class="pa-2 Input"
-                                            v-model="selectbox.title"
-                                            :rules="[rules.required]"
-                                            prepend-icon="fa fa-align-left"
-                                        ></v-text-field>
-                                        <v-btn
-                                            absolute
-                                            small
-                                            right
-                                            bottom
-                                            color="pink"
-                                            @click="removeSelectboxForm(keyForm, keySelect, keychildren)"
-                                            v-if="keySelect >= 1"
-                                        >
-                                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                                                name="title"
+                                                label="Title"
+                                                color="black"
+                                                class="pa-2 Input"
+                                                v-model="selectbox.title"
+                                                :rules="[rules.required]"
+                                                prepend-icon="fa fa-align-left"
+                                        />
+                                        <v-btn absolute small right bottom color="pink"
+                                               @click="removeSelectboxForm(keyForm, keySelect, keychildren)"
+                                               v-if="keySelect >= 1">
+                                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                            REMOVE
                                         </v-btn>
                                     </v-flex>
                                 </v-layout>
-                                <v-btn
-                                    absolute
-                                    right
-                                    bottom
-                                    small
-                                    @click="addSelectboxForm(keyForm, keychildren)"
-                                    color="black"
-                                >
+                                <v-btn absolute right bottom small
+                                       @click="addSelectboxForm(keyForm, keychildren)" color="black">
                                     <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                                     <span class="white--text">Add</span>
                                 </v-btn>
                             </v-layout>
-                            <v-btn
-                                absolute
-                                small
-                                right
-                                top
-                                color="pink"
-                                @click="removeForm(keyForm, keychildren)"
-                            >
-                                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                            <v-btn absolute small right top color="pink"
+                                   @click="removeForm(keyForm, keychildren)">
+                                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                REMOVE
                             </v-btn>
                         </v-layout>
-                        <v-btn
-                            absolute
-                            small
-                            right
-                            bottom
-                            color="cyan"
-                            @click="duplicateForm(keyForm)"
-                        >
-                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
+                        <v-btn absolute small right bottom color="cyan"
+                               @click="duplicateForm(keyForm)">
+                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                            ADD
                         </v-btn>
                     </v-layout>
-                    <v-btn
-                        v-if="keyForm > 0 || form.info.length > 1"
-                        absolute
-                        small
-                        right
-                        top
-                        color="pink"
-                        @click="removeInput(keyForm)"
-                    >
-                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                    <v-btn v-if="keyForm > 0 || form.info.length > 1" absolute small right top color="pink"
+                           @click="removeInput(keyForm)">
+                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                        REMOVE
                     </v-btn>
-                    <v-layout
-                        row
-                        wrap
-                        align-center
-                        justify-center
-                        class="mt-4"
-                        v-if="(form.info.length -1)  == keyForm"
-                    >
-                        <v-btn
-                            absolute
-                            right
-                            bottom
-                            small
-                            @click="addInput"
-                            color="pink"
-                            class="mb-2"
-                        >
+                    <v-layout row wrap align-center justify-center class="mt-4" v-if="(form.info.length -1)  == keyForm">
+                        <v-btn absolute right bottom small @click="addInput" color="pink" class="mb-2">
                             <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                             <span class="white--text">Add</span>
                         </v-btn>
@@ -378,28 +275,31 @@
                 </v-layout>
 
                 <v-layout row wrap align-center justify-center class="mt-4">
-                    <v-btn
-                        class="WM-CyanBlueGradient-BG"
-                        style="padding:10px 60px"
-                        @click="registerForm"
-                    >
-                        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-                        <span class="white--text">Generate Form</span>
-                    </v-btn>
-                    <router-link :to="{name : 'ListTestType'}">
-                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-                            <span class="black--text">Back</span>
+                    <v-flex xs12 sm6 md6 lg3 class="text-center">
+                        <router-link :to="{name : 'ListTestType'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                                <span class="black--text">Back</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg3 class="text-center">
+                        <v-btn class="WM-CyanBlueGradient-BG"
+                               style="padding:10px 60px"
+                               @click="registerForm">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">Generate Form</span>
                         </v-btn>
-                    </router-link>
+                    </v-flex>
                 </v-layout>
             </material-card>
         </v-container>
     </v-form>
 </template>
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+
 export default {
     data() {
         return {
@@ -417,43 +317,43 @@ export default {
                 ]
             },
             type: [
-                { state: "Text", abbr: "Text" },
-                { state: "Checkbox", abbr: "Checkbox" },
-                { state: "Select", abbr: "Select" },
-                { state: "Radiobutton", abbr: "Radiobutton" },
-                { state: "Switch", abbr: "Switch" },
-                { state: "Range", abbr: "Range" },
-                { state: "Time", abbr: "Time" },
-                { state: "Temperature", abbr: "Temperature" },
-                { state: "Pressure", abbr: "Pressure" },
-                { state: "Form", abbr: "Form" },
+                {state: "Text", abbr: "Text"},
+                {state: "Checkbox", abbr: "Checkbox"},
+                {state: "Select", abbr: "Select"},
+                {state: "Radiobutton", abbr: "Radiobutton"},
+                {state: "Switch", abbr: "Switch"},
+                {state: "Range", abbr: "Range"},
+                {state: "Time", abbr: "Time"},
+                {state: "Temperature", abbr: "Temperature"},
+                {state: "Pressure", abbr: "Pressure"},
+                {state: "Form", abbr: "Form"},
             ],
             size: [
-                { state: "not Selected", abbr: "" },
-                { state: "2 from 12", abbr: "md2 sm4 xs12" },
-                { state: "3 from 12", abbr: "md3 sm6 xs12" },
-                { state: "4 from 12", abbr: "md4 sm4 xs12" },
-                { state: "6 from 12", abbr: "md6 sm12 xs12" },
-                { state: "8 from 12", abbr: "md8 sm8 xs12" },
-                { state: "10 from 12", abbr: "md10 sm10 xs12" },
-                { state: "12 from 12", abbr: "md12 sm12 xs12" }
+                {state: "not Selected", abbr: ""},
+                {state: "2 from 12", abbr: "md2 sm4 xs12"},
+                {state: "3 from 12", abbr: "md3 sm6 xs12"},
+                {state: "4 from 12", abbr: "md4 sm4 xs12"},
+                {state: "6 from 12", abbr: "md6 sm12 xs12"},
+                {state: "8 from 12", abbr: "md8 sm8 xs12"},
+                {state: "10 from 12", abbr: "md10 sm10 xs12"},
+                {state: "12 from 12", abbr: "md12 sm12 xs12"}
             ],
             rules: {
                 required: value => !!value || "Required."
             },
             deviceLabels: [
-                { name: "Washer ID", id: "WasherID" },
-                { name: "Autoclave ID", id: "AutoclaveID" },
-                { name: "Sterilizer ID", id: "SterilizerID" },
-                { name: "WasherMachine ID", id: "WasherMachineID" },
-                { name: "SealMachine ID", id: "SealMachineID" },
-                { name: "Patient ID", id: "PatientID" },
-                { name: "Set/Pack ID", id: "Set/PackID" },
-                { name: "MD ID", id: "MDID" },
-                { name: "OR ID", id: "ORID" },
-                { name: "Personal ID", id: "PersonalID" },
-                { name: "Instrument ID", id: "InstrumentID" },
-                { name: "ID", id: "ID" },
+                {name: "Washer ID", id: "WasherID"},
+                {name: "Autoclave ID", id: "AutoclaveID"},
+                {name: "Sterilizer ID", id: "SterilizerID"},
+                {name: "WasherMachine ID", id: "WasherMachineID"},
+                {name: "SealMachine ID", id: "SealMachineID"},
+                {name: "Patient ID", id: "PatientID"},
+                {name: "Set/Pack ID", id: "Set/PackID"},
+                {name: "MD ID", id: "MDID"},
+                {name: "OR ID", id: "ORID"},
+                {name: "Personal ID", id: "PersonalID"},
+                {name: "Instrument ID", id: "InstrumentID"},
+                {name: "ID", id: "ID"},
             ]
         };
     },
@@ -468,15 +368,15 @@ export default {
             //   //--add checkbox
             // }
             if (selectedboxType == "Select" || selectedboxType == "Checkbox" || selectedboxType == "Radiobutton") {
-                this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
-            } else if(selectedboxType == "Range") {
-                this.form.info[infoIndex]["options"] = [{ id: 0, title: ""}, { id: 0, title: ""}];
+                this.form.info[infoIndex]["options"] = [{id: 0, title: ""}];
+            } else if (selectedboxType == "Range") {
+                this.form.info[infoIndex]["options"] = [{id: 0, title: ""}, {id: 0, title: ""}];
             } else {
                 this.form.info[infoIndex]["options"] = [];
             }
             if (selectedboxType == "Form") {
                 this.form.info[infoIndex]["children"] = [
-                    { id: 0, name: "", type: "", size: "" }
+                    {id: 0, name: "", type: "", size: ""}
                 ];
             }
         },
@@ -489,26 +389,26 @@ export default {
         addSelectbox(infoIndex) {
             let form = this.form;
             this.form = [];
-            form.info[infoIndex]["options"].push({ id: 0, title: "" });
+            form.info[infoIndex]["options"].push({id: 0, title: ""});
             this.form = form;
         },
         addInput() {
-            this.form.info.push({ id: 0, name: "", type: "", size: "" });
+            this.form.info.push({id: 0, name: "", type: "", size: ""});
         },
         changeTypeForm(infoIndex, type, formLevel) {
             if (type == "Select" || type == "Checkbox" || type == "Radiobutton") {
                 let form = this.form;
                 this.form = "";
                 form.info[infoIndex]["children"][formLevel]["options"] = [
-                    { id: 0, title: "" }
+                    {id: 0, title: ""}
                 ];
                 this.form = form;
-            } else if(type == "Range") {
+            } else if (type == "Range") {
                 let form = this.form;
                 this.form = "";
                 form.info[infoIndex]["children"][formLevel]["options"] = [
-                    { id: 0, title: "" },
-                    { id: 0, title: "" },
+                    {id: 0, title: ""},
+                    {id: 0, title: ""},
                 ];
                 this.form = form;
             } else {
@@ -522,8 +422,8 @@ export default {
             let form = this.form;
             this.form = [];
             form.info[infoIndex]["children"][formLevel]["options"].splice(
-                selectboxOptions,
-                1
+                    selectboxOptions,
+                    1
             );
             this.form = form;
         },
@@ -564,13 +464,13 @@ export default {
                 let result = null;
                 if (this.$route.params.testType) {
                     result = await ApiService.put(
-                        urls.updateTestType(this.$route.params.testType),
-                        this.form
+                            urls.updateTestType(this.$route.params.testType),
+                            this.form
                     );
                 } else {
                     result = await ApiService.post(
-                        urls.storeTestType,
-                        this.form
+                            urls.storeTestType,
+                            this.form
                     );
                 }
                 // if (result && result.status == 200) {
@@ -591,12 +491,15 @@ export default {
 .WM-Border-Gray {
     border-color: #aaa !important;
 }
+
 .WM-Color-LightGrey {
     background-color: #f5f5f5;
 }
+
 .v-btn--top.v-btn--absolute.v-btn--small {
     top: -25px !important;
 }
+
 .v-btn--bottom.v-btn--absolute.v-btn--small {
     bottom: -24px !important;
 }
diff --git a/src/views/TestType/List.vue b/src/views/TestType/List.vue
index 66bf1b2..bdb64f3 100644
--- a/src/views/TestType/List.vue
+++ b/src/views/TestType/List.vue
@@ -59,7 +59,7 @@
 
                 <v-spacer/>
                 <v-flex class xs12 sm6 md6 lg2 xl1>
-                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(undefined)">
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(undefined)">
                         <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                         <span class="white--text">Filter</span>
                     </v-btn>
@@ -87,7 +87,7 @@
                             <td class="title font-weight-light">{{ item.unique_code }}</td>
                             <td class="title font-weight-light">{{ item.user.name }}</td>
                             <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
-                            <td class="text-xs-right FlexBtn">
+                            <td class="text-xs-right FlexBtn justify-self-end">
                                 <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
                                         <router-link
diff --git a/src/views/Tickets/List.vue b/src/views/Tickets/List.vue
index 62da0d0..b31509c 100644
--- a/src/views/Tickets/List.vue
+++ b/src/views/Tickets/List.vue
@@ -33,12 +33,10 @@
                             </td>
                             <td class="title font-weight-light">
                                 <span class="Chip">
-                                    <span
-                                        class="Unread Content"
-                                    >{{ item.unread_messages_count }} unread</span>
+                                    <span class="Unread Content">{{ item.unread_messages_count }} unread</span>
                                 </span>
                             </td>
-                            <td class="text-xs-left FlexBtn"> 
+                            <td class="text-xs-left FlexBtn justify-self-end">
                                 <v-tooltip bottom open-on-hover>
                                 <template v-slot:activator="{ on, attrs }">
                                 <v-btn
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index 1640551..1647ee5 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -46,7 +46,7 @@
                 </v-flex>
                  <v-spacer/>
                 <v-flex wrap xs12 sm12 class="WM-Align-R ml-4">
-                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:9px 30px" @click="load(undefined)">
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load(undefined)">
                         <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                         <span class="white--text">Filter</span>
                     </v-btn>
@@ -73,7 +73,7 @@
                                 <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
                             </td>
                             <td class="title font-weight-light">{{ item.medical_center.name }}</td>
-                            <td class="text-xs-right FlexBtn">
+                            <td class="text-xs-right FlexBtn justify-self-end">
                                 <v-tooltip bottom open-on-hover>
                                     <template v-slot:activator="{ on, attrs }">
                                         <v-btn v-bind="attrs" v-on="on"
@@ -194,6 +194,7 @@ export default {
         this.load();
     },
     methods: {
+        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         async load(page = 1) {
             let filter = "?";
             for (const key in this.filter) {
@@ -223,7 +224,6 @@ export default {
                 this.$router.push({name: `Dashboard`});
             }
         },
-        ...mapMutations("modal", ["changeCurrentModal", "closeModal"]),
         changeRoleModal(user) {
             this.changeCurrentModal({
                 modal: "modal-user-role",