From 8e4b78d23dbfe7a52ce38ad3477e5d6f45502087 Mon Sep 17 00:00:00 2001
From: "f.shokouhi" <fhshokouhi@gmail.com>
Date: Thu, 19 Sep 2019 14:35:52 +0430
Subject: [PATCH] icon

---
 .../vue/components/modal/testresult/Show.vue  |   4 +-
 resources/js/vue/styles/css/Assets/Main.scss  |  21 +
 resources/js/vue/views/Cycle/AddEdit.vue      |  27 +-
 resources/js/vue/views/Cycle/List.vue         |  25 +-
 resources/js/vue/views/Item/AddEdit.vue       |  20 +-
 resources/js/vue/views/Item/List.vue          |  10 +-
 resources/js/vue/views/MedicalCenter/List.vue |   4 +-
 resources/js/vue/views/Pack/AddEdit.vue       |  42 +-
 resources/js/vue/views/Pack/List.vue          |  27 +-
 resources/js/vue/views/Package/AddEdit.vue    |  26 +-
 resources/js/vue/views/Package/List.vue       |  12 +-
 resources/js/vue/views/Statistics/Chart.vue   |  36 +-
 resources/js/vue/views/TestResult/AddEdit.vue | 507 +++++++++++-------
 resources/js/vue/views/TestResult/List.vue    |  26 +-
 resources/js/vue/views/TestType/AddEdit.vue   |  49 +-
 resources/js/vue/views/TestType/List.vue      |  27 +-
 resources/js/vue/views/User/List.vue          |  29 +-
 resources/js/vue/views/User/MyInfo.vue        |  16 +-
 18 files changed, 543 insertions(+), 365 deletions(-)

diff --git a/resources/js/vue/components/modal/testresult/Show.vue b/resources/js/vue/components/modal/testresult/Show.vue
index 4c75f272..71234a83 100644
--- a/resources/js/vue/components/modal/testresult/Show.vue
+++ b/resources/js/vue/components/modal/testresult/Show.vue
@@ -105,7 +105,7 @@
                         </v-flex>
                     </template>
                     <template v-if="data.children">
-                        <v-flex
+                        <v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
                             xs12
                             md12
                             sm12
@@ -241,7 +241,7 @@ export default {
     created() {
         this.data = this.getModalProperties.result.data.data;
         console.log(this.data);
-        
+
     },
     computed: {
         ...mapGetters("modal", ["getModalProperties"])
diff --git a/resources/js/vue/styles/css/Assets/Main.scss b/resources/js/vue/styles/css/Assets/Main.scss
index c8538813..9451b6dc 100644
--- a/resources/js/vue/styles/css/Assets/Main.scss
+++ b/resources/js/vue/styles/css/Assets/Main.scss
@@ -3,6 +3,27 @@
   border-color: transparent !important;
   box-shadow: none !important;
 }
+.WM-InlineFlex {
+  display: inline-flex;
+}
+.WM-FlexCenter {
+  display: inline-flex;
+  align-items: center;
+}
+.WM-FlexWrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+.WM-BorderRadius-5 {
+  border-radius: 5px;
+}
+.WM-Margin-B-8 {
+  margin-bottom: 8px;
+}
+.material-icons {
+  font-size: 20px !important;
+  vertical-align: sub !important;
+}
 .headline {
   // letter-spacing : 7px;
 }
diff --git a/resources/js/vue/views/Cycle/AddEdit.vue b/resources/js/vue/views/Cycle/AddEdit.vue
index 581abb54..faa92e7d 100644
--- a/resources/js/vue/views/Cycle/AddEdit.vue
+++ b/resources/js/vue/views/Cycle/AddEdit.vue
@@ -3,35 +3,39 @@
         <v-container grid-list-xs fluid>
             <material-card color="black" title="Add Cycle">
                 <v-layout align-center justify-center wrap class="px-5 my-3">
-                    <v-flex xs12 sm6 md4>
+                    <v-flex xs12 sm6 md4 class="WM-FlexCenter">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             name="name"
                             label="Name"
                             color="black"
                             v-model="formData.name"
                             :rules="[rules.required, rules.counter]"
-                            class="pa-2"
+                            class="py-3 pr-3"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 sm6 md4>
+                    <v-flex xs12 sm6 md4 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             name="sterilizer_id"
                             label="Sterilizer ID"
                             color="black"
                             v-model="formData.sterilizer_id"
-                            class="pa-2"
+                            class="py-3 pr-3"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 sm6 md4>
+                    <v-flex xs12 sm6 md4 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             name="cycle_number"
                             label="Cycle Number"
                             color="black"
                             v-model="formData.cycle_number"
-                            class="pa-2"
+                            class="py-3 pr-3"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 sm6 md1>
+                    <v-flex xs12 sm6 md1 class="WM-FlexCenter">
+                      <v-icon class="far fa-calendar-alt mr-2"></v-icon>
           						<v-menu
           							lazy
           							:close-on-content-click="true"
@@ -40,7 +44,6 @@
           							v-model="fromMenuDate"
           						>
           							<v-text-field
-                        prepend-inner-icon="far fa-calendar-alt"
                         required
                         slot="activator"
                         label="Date"
@@ -56,7 +59,8 @@
           							></v-date-picker>
           						</v-menu>
           					</v-flex>
-                    <v-flex xs12 sm6 md8>
+                    <v-flex xs12 sm6 md8 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
                         <v-autocomplete
                             multiple
                             color="black"
@@ -68,8 +72,9 @@
                         ></v-autocomplete>
                     </v-flex>
                     <v-spacer></v-spacer>
-                    <v-flex xs12 sm12 md12>
-          						<v-textarea color="black" v-model="formData.note" class="pa-2" name="address">
+                    <v-flex xs12 sm12 md12 class="WM-FlexCenter">
+                      <!-- <v-icon class="fa fa-sort-amount-desc mr-2"></v-icon> -->
+          						<v-textarea color="black" v-model="formData.note" class="py-3 pr-3" name="address">
           							<template v-slot:label>
           								<div>Description</div>
           							</template>
diff --git a/resources/js/vue/views/Cycle/List.vue b/resources/js/vue/views/Cycle/List.vue
index 4a6755f5..475d8afc 100644
--- a/resources/js/vue/views/Cycle/List.vue
+++ b/resources/js/vue/views/Cycle/List.vue
@@ -3,31 +3,35 @@
         <v-container fluid>
             <material-card class color="black" title="All Cycles" text>
                 <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md2 sm3>
+                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-3"
+                            class="py-3 pr-3"
                             v-model="filter.name"
                             label="Name"
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md2 sm3>
+                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-3"
+                            class="py-3 pr-3"
                             v-model="filter.sterilizer_id"
                             label="Sterilizer ID"
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md2 sm3>
+                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-3"
+                            class="py-3 pr-3"
                             v-model="filter.cycle_number"
                             label="Cycle Number"
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 sm2 md2>
+                    <v-flex xs12 sm2 md2 class="WM-FlexCenter pl-3">
+                      <v-icon class="far fa-calendar-alt mr-2 WM-Margin-B-8"></v-icon>
           						<v-menu
           							lazy
           							:close-on-content-click="true"
@@ -37,11 +41,10 @@
           						>
           							<v-text-field style="padding-top:0 !important"
                           required
-                          prepend-inner-icon="far fa-calendar-alt"
                           slot="activator"
                           label="Date"
                           color="black"
-                          class="pl-3"
+                          class=""
                           v-model="filter.date">
                       </v-text-field>
           							<v-date-picker
@@ -112,8 +115,8 @@
                     </v-flex>
                 </v-layout>
                 <v-divider></v-divider>
-                <div class="text-xs-center" v-if="lastPage > 1">
-                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                <div class="text-xs-center mt-2" v-if="lastPage > 1">
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
diff --git a/resources/js/vue/views/Item/AddEdit.vue b/resources/js/vue/views/Item/AddEdit.vue
index 9f4292e3..7e8f5f5d 100644
--- a/resources/js/vue/views/Item/AddEdit.vue
+++ b/resources/js/vue/views/Item/AddEdit.vue
@@ -3,42 +3,46 @@
     <v-container grid-list-xs fluid>
       <material-card color="black" title="Add Instrument">
         <v-layout align-center justify-center wrap class="px-5 my-3">
-          <v-flex xs12 sm6 md3>
+          <v-flex xs12 md3 sm3 class="WM-FlexCenter">
+            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="name"
               label="Name"
               color="black"
               v-model="formData.name"
               :rules="[rules.required]"
-              class="pa-2"
+              class="py-3 pr-3"
             ></v-text-field>
           </v-flex>
-          <v-flex xs12 sm6 md3>
+          <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+            <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="unique_id"
               label="ID"
               color="black"
               v-model="formData.unique_id"
               :rules="[rules.required]"
-              class="pa-2"
+              class="py-3 pr-3"
             ></v-text-field>
           </v-flex>
-          <v-flex xs12 sm6 md3>
+          <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="size"
               label="Size"
               color="black"
               v-model="formData.size"
-              class="pa-2"
+              class="py-3 pr-3"
             ></v-text-field>
           </v-flex>
-          <v-flex xs12 sm6 md3>
+          <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="specific"
               label="Specific"
               color="black"
               v-model="formData.specific"
-              class="pa-2"
+              class="py-3 pr-3"
             ></v-text-field>
           </v-flex>
         </v-layout>
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
index 994ead48..a985d35d 100644
--- a/resources/js/vue/views/Item/List.vue
+++ b/resources/js/vue/views/Item/List.vue
@@ -3,17 +3,19 @@
         <v-container fluid>
             <material-card class color="black" title="All Instrument" text>
                 <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.name"
                             label="Name"
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.size"
                             label="Size"
                             color="black"
diff --git a/resources/js/vue/views/MedicalCenter/List.vue b/resources/js/vue/views/MedicalCenter/List.vue
index 517afdff..25a8216d 100644
--- a/resources/js/vue/views/MedicalCenter/List.vue
+++ b/resources/js/vue/views/MedicalCenter/List.vue
@@ -60,8 +60,8 @@
         </v-flex>
       </v-layout>
       <v-divider></v-divider>
-      <div class="text-xs-center" v-if="lastPage > 1">
-        <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+      <div class="text-xs-center mt-2" v-if="lastPage > 1">
+        <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
       </div>
       <v-layout row wrap align-center justify-center class="mt-3">
         <router-link :to="{name: 'Dashboard'}">
diff --git a/resources/js/vue/views/Pack/AddEdit.vue b/resources/js/vue/views/Pack/AddEdit.vue
index a2348e56..64a84d78 100644
--- a/resources/js/vue/views/Pack/AddEdit.vue
+++ b/resources/js/vue/views/Pack/AddEdit.vue
@@ -3,45 +3,50 @@
 		<v-container grid-list-xs fluid>
 			<material-card color="black" title="Add Label on Set ">
 				<v-layout  wrap class="px-5 my-3">
-					<v-flex xs12 sm6 md3>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
+						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
 							name="name"
 							label="Name"
 							color="black"
 							v-model="formData.name"
 							:rules="[rules.required, rules.counter]"
-							class="pa-2"
+							class="py-3 pr-3"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md3>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
 							name="sterilizerId"
 							label="Sterilizer ID"
 							color="black"
 							v-model="formData.sterilizer_id"
-							class="pa-2"
+							class="py-3 pr-3"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md3>
+					<v-flex xs12 sm6 md3 class="WM-FlexCenter pl-3">
+						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
 							name="cycle_number"
 							label="Cycle Number"
 							color="black"
 							v-model="formData.cycle_number"
-							class="pa-2"
+							class="py-3 pr-3"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md3>
+					<v-flex xs12 sm6 md3 class="WM-FlexCenter pl-3">
+						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
 							name="lot_number"
 							label="Lot Number"
 							color="black"
 							v-model="formData.lot_number"
-							class="pa-2"
+							class="py-3 pr-3"
 						></v-text-field>
 					</v-flex>
 					<v-spacer></v-spacer>
-					<v-flex xs12 sm6 md3>
+					<v-flex xs12 sm6 md3 class="WM-FlexCenter">
+						<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
 						<v-autocomplete
 							multiple
 							color="black"
@@ -50,19 +55,21 @@
 							v-model="formData.packages"
 							item-value="id"
 							label="Select Package For Pack"
-							class="pr-3"
+							class="py-3 pr-3"
 						></v-autocomplete>
 					</v-flex>
-					<v-flex xs12 sm6 md3>
+					<v-flex xs12 sm6 md3 class="WM-FlexCenter pl-3">
+						<v-icon class="fa fa-building mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
 							name="department"
 							label="Department"
 							color="black"
 							v-model="formData.department"
-							class="px-3"
+							class="py-3 pr-3"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md2>
+					<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+						<v-icon class="far fa-calendar-alt mr-2"></v-icon>
 						<v-menu
 							lazy
 							:close-on-content-click="true"
@@ -72,11 +79,10 @@
 						>
 							<v-text-field
 								required
-								prepend-inner-icon="far fa-calendar-alt"
 								slot="activator"
 								label="Sterile Date"
 								color="black"
-								class="px-3"
+								class="pr-3"
 								v-model="formData.sterile_date">
 							</v-text-field>
 							<v-date-picker
@@ -87,7 +93,8 @@
 							></v-date-picker>
 						</v-menu>
 					</v-flex>
-					<v-flex xs12 sm6 md2>
+					<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+						<v-icon class="far fa-calendar-alt mr-2"></v-icon>
 						<v-menu
 							lazy
 							:close-on-content-click="true"
@@ -97,11 +104,10 @@
 						>
 							<v-text-field
 								required
-								prepend-inner-icon="far fa-calendar-alt"
 								slot="activator"
 								label="Expire Date"
 								color="black"
-								class="px-3"
+								class="pr-3"
 								v-model="formData.expire_date">
 							</v-text-field>
 							<v-date-picker
diff --git a/resources/js/vue/views/Pack/List.vue b/resources/js/vue/views/Pack/List.vue
index 3ed3538f..00f3b9f1 100644
--- a/resources/js/vue/views/Pack/List.vue
+++ b/resources/js/vue/views/Pack/List.vue
@@ -3,12 +3,14 @@
 		<v-container fluid>
 			<material-card class color="black" title="All Labels" text>
 				<v-layout align-center wrap class="my-3">
-					<v-flex xs12 md3 sm3>
-						<v-text-field class="pa-2" v-model="filter.name" label="Name" color="black"></v-text-field>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+						<v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"></v-text-field>
 					</v-flex>
-					<v-flex xs12 md3 sm3>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
 						<v-autocomplete
-							class="pa-2"
+							class="py-3 pr-3"
 							v-model="filter.medical_center_id"
                             @change="fillUsers"
 							item-text="name"
@@ -18,9 +20,10 @@
 							:items="medicalCenters"
 						></v-autocomplete>
 					</v-flex>
-					<v-flex xs12 md3 sm3>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
 						<v-autocomplete
-							class="pa-2"
+							class="py-3 pr-3"
 							v-model="filter.user_id"
 							item-text="name"
 							item-value="id"
@@ -29,11 +32,13 @@
 							:items="users"
 						></v-autocomplete>
 					</v-flex>
-					<v-flex xs12 md3 sm3>
-						<v-text-field class="pa-2" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+						<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
 					</v-flex>
-					<v-flex xs12 md3 sm3>
-						<v-text-field class="pa-2" v-model="filter.department" label="Department" color="black"></v-text-field>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fa fa-building mr-2 WM-Margin-B-8"></v-icon>
+						<v-text-field class="py-3 pr-3" v-model="filter.department" label="Department" color="black"></v-text-field>
 					</v-flex>
 					<v-flex class xs12 md2 sm3>
 						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
@@ -96,7 +101,7 @@
 				</v-layout>
 				<v-divider></v-divider>
 				<div class="text-xs-center" v-if="lastPage > 1">
-					<v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+					<v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
 				</div>
 				<v-layout row wrap align-center justify-center class="mt-3">
 					<router-link to="/dashboard">
diff --git a/resources/js/vue/views/Package/AddEdit.vue b/resources/js/vue/views/Package/AddEdit.vue
index b811eda7..132db95b 100644
--- a/resources/js/vue/views/Package/AddEdit.vue
+++ b/resources/js/vue/views/Package/AddEdit.vue
@@ -2,25 +2,29 @@
 	<v-form ref="form">
 		<v-container grid-list-xs fluid>
 			<material-card color="black" title="Add Package">
-				<v-layout align-center justify-center wrap class="px-5 my-3">
-					<v-flex xs12 sm6 md4>
-						<v-text-field
-							name="name"
-							label="Name"
-							color="black"
-							v-model="formData.name"
-							:rules="[rules.required, rules.counter]"
-							class="pa-2"
-						></v-text-field>
+				<v-layout wrap class="px-5 my-3">
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
+							<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+							<v-text-field
+								name="name"
+								label="Name"
+								color="black"
+								v-model="formData.name"
+								:rules="[rules.required, rules.counter]"
+								class="py-3 pr-3"
+							></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md8>
+					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+						<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
 						<v-autocomplete
 							multiple
+							class="py-3 pr-3"
 							:items="items"
 							item-text="name"
 							v-model="formData.items"
 							item-value="id"
 							label="Select Items For Package"
+							color="black"
 						></v-autocomplete>
 					</v-flex>
 				</v-layout>
diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue
index f0028f82..c867ac6b 100644
--- a/resources/js/vue/views/Package/List.vue
+++ b/resources/js/vue/views/Package/List.vue
@@ -3,17 +3,19 @@
         <v-container fluid>
             <material-card class color="black" title="All Packages" text>
                 <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.name"
                             label="Name"
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.unique_id"
                             label="uniqueID"
                             color="black"
@@ -83,7 +85,7 @@
                 </v-layout>
                 <v-divider></v-divider>
                 <div class="text-xs-center" v-if="lastPage > 1">
-                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
diff --git a/resources/js/vue/views/Statistics/Chart.vue b/resources/js/vue/views/Statistics/Chart.vue
index 4015a7c7..3d956a92 100644
--- a/resources/js/vue/views/Statistics/Chart.vue
+++ b/resources/js/vue/views/Statistics/Chart.vue
@@ -4,25 +4,32 @@
       <v-container grid-list-xs>
         <material-card color="black" title="Search Result">
           <v-layout align-center justify-center wrap class="px-5 my-3">
-            <v-flex xs12 sm4 md4>
+            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+              <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
               <v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenterId" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
             </v-flex>
-            <v-flex xs12 sm4 md4>
-              <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId" label="User" color="black" class="pa-2"></v-autocomplete>
+            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+              <v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
+              <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId" label="User" color="black" class="py-3 pr-3"></v-autocomplete>
             </v-flex>
-            <v-flex xs12 sm4 md4>
-              <v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testTypeId" label="TestType" color="black" class="pa-2"></v-autocomplete>
+            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+              <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+              <v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testTypeId" label="TestType" color="black" class="py-3 pr-3"></v-autocomplete>
             </v-flex>
-            <v-flex xs12 sm4 md4>
-              <v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="pa-2"></v-autocomplete>
+            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+              <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
+              <v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="py-3 pr-3"></v-autocomplete>
             </v-flex>
-            <v-flex xs12 sm4 md4>
-              <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="pa-2"></v-autocomplete>
+            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+              <v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
+              <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="py-3 pr-3"></v-autocomplete>
             </v-flex>
-            <v-flex xs12 sm4 md4>
-              <v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="pa-2"></v-autocomplete>
+            <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+              <v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
+              <v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="py-3 pr-3"></v-autocomplete>
             </v-flex>
-            <v-flex xs12 sm6 md2>
+            <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+              <v-icon class="far fa-calendar-alt mr-2"></v-icon>
               <v-menu
                 lazy
                 :close-on-content-click="true"
@@ -32,7 +39,6 @@
               >
                 <v-text-field
                   required
-                  prepend-inner-icon="far fa-calendar-alt"
                   slot="activator"
                   label="FromDate"
                   color="black"
@@ -46,7 +52,8 @@
                 ></v-date-picker>
               </v-menu>
             </v-flex>
-            <v-flex xs12 sm6 md2>
+            <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+              <v-icon class="far fa-calendar-alt mr-2"></v-icon>
               <v-menu
                 lazy
                 :close-on-content-click="true"
@@ -56,7 +63,6 @@
               >
                 <v-text-field
                   required
-                  prepend-inner-icon="far fa-calendar-alt"
                   slot="activator"
                   label="UpToDate"
                   color="black"
diff --git a/resources/js/vue/views/TestResult/AddEdit.vue b/resources/js/vue/views/TestResult/AddEdit.vue
index 20f3aefd..b8904066 100644
--- a/resources/js/vue/views/TestResult/AddEdit.vue
+++ b/resources/js/vue/views/TestResult/AddEdit.vue
@@ -3,23 +3,25 @@
 		<v-container grid-list-xs>
 			<material-card color="black" title="Submit Test Result">
 				<v-layout  wrap class="px-5 my-3" v-if="!$route.params.testResult">
-					<v-flex xs12 sm4 md4>
+					<v-flex xs12 md2 sm3 class="WM-FlexCenter">
+						<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
 						<v-autocomplete
 							:search-input.sync="searchInput"
 							:items="testTypeNames"
 							v-model="filter.name"
 							label="Choose Test Type"
 							color="black"
-							class="pa-2"
+							class="py-3 pr-3"
 						></v-autocomplete>
 					</v-flex>
-					<v-flex xs12 sm3 md3 class="mr-5">
+					<v-flex xs12 md2 sm3 class="WM-FlexCenter ml-3">
+							<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
 							name="testcode"
 							v-model="filter.unique_code"
 							label="Or Enter Test Unique Code"
 							color="black"
-							class="pa-2"
+							class="py-3 pr-3"
 						></v-text-field>
 					</v-flex>
 					<!-- <v-spacer></v-spacer> -->
@@ -37,9 +39,9 @@
 				<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
 					<v-divider></v-divider>
 				</v-layout>
-				<v-layout align-center justify-center wrap class="px-5 my-3" v-if="form.length">
+				<v-layout wrap class="px-5 my-3" v-if="form.length">
 					<v-flex xs12 sm12 md12>
-						<h3>{{testTypeNameSelected}}</h3>
+						<h3 class="WM-BorderLeftTitle">{{testTypeNameSelected}}</h3>
 					</v-flex>
 					<v-flex xs12 sm3 md3>
 						<v-text-field
@@ -60,7 +62,7 @@
 							class="pa-2"
 						>
 							<v-text-field style="padding-top:0 !important"
-								prepend-inner-icon="far fa-clock"
+								prepend-inner-icon="far fa-calendar-alt"
 								required
 								slot="activator"
 								label="Date"
@@ -87,174 +89,238 @@
 							</label>
 						</div>
 					</v-flex>
-					<v-flex xs12 sm12 md12>
-					<v-layout class="mt-4">
-						<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md1>
-							<img :src="img" style="width:100%;" />
-							<!-- <v-btn fab class="black" @click.native.stop="removeImage(key)"></v-btn> -->
-							<v-btn class="mx-2" fab dark small color="primary">
-					      <v-icon dark>mdi-minus</v-icon>
+					</v-layout>
+					<v-layout wrap class="mt-4 px-5">
+						<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md1 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-Align-C WM-Relative" style="margin:15px">
+							<img :src="img" width="120px" height="auto"/>
+							<v-btn class="mx-2" absolute right top fab dark small color="pink" style="top:-28px;right:-28px" @click.native.stop="removeImage(key)">
+								<v-icon>close</v-icon>
 					    </v-btn>
 						</v-flex>
 					</v-layout>
-					</v-flex>
-					</v-layout>
 
+					<!--______________________  DynamicComponent :: Began  _______________________-->
 
-
-					<!-- start dynamic component -->
-					<v-layout align-center justify-center wrap class="px-5 my-3">
+					<v-layout wrap class="px-5 my-3">
 					<v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
-						<v-container fluid v-if="item.type == 'Temperature'">
-							<p>{{ item.name }}</p>
-							<v-flex xs12>
-								<v-slider
-									step="0.1"
-									prepend-icon="fas fa-temperature-high"
-									v-model="formData[item.name+'_'+item.id]"
-									min="0"
-									max="200"
-									thumb-label="always"
-								></v-slider>
+						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Temperature'">
+							<v-layout row wrap>
+								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+							</v-layout>
+							<v-layout row wrap>
+								<v-container fluid class="WM-Padding-LR-0">
+									<v-flex xs12>
+										<v-slider
+											step="0.1"
+											prepend-icon="fas fa-temperature-high"
+											v-model="formData[item.name+'_'+item.id]"
+											min="0"
+											max="200"
+											thumb-label="always"
+										></v-slider>
+									</v-flex>
+								</v-container>
+							</v-layout>
+						</v-container>
+						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Text'">
+							<v-layout row wrap>
+								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+							</v-layout>
+							<v-layout row wrap>
+								<v-container fluid class="WM-Padding-LR-0">
+									<v-text-field
+										v-model="formData[item.name+'_'+item.id]"
+										:label="item.name"
+										color="black"
+										prepend-inner-icon="fa fa-align-left"
+									></v-text-field>
+								</v-container>
+							</v-layout>
+						</v-container>
+						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Pressure'">
+							<v-layout row wrap>
+								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+							</v-layout>
+							<v-layout row wrap>
+								<v-container fluid class="WM-Padding-LR-0">
+									<v-flex xs12>
+										<v-slider
+											prepend-icon="fa fa-flask"
+											step="0.01"
+											v-model="formData[item.name+'_'+item.id]"
+											min="-1"
+											max="3"
+											thumb-label="always"
+										></v-slider>
+									</v-flex>
+								</v-container>
+							</v-layout>
+						</v-container>
+						<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Select'">
+							<v-layout row wrap>
+								<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+							</v-layout>
+							<v-layout row wrap>
+								<v-container fluid class="WM-Padding-LR-0">
+									<v-flex xs12>
+										<v-select
+											multiple
+											prepend-inner-icon="fa fa-check"
+											:items="item.options"
+											v-model="formData[item.name+'_'+item.id]"
+											:label="item.name"
+											color="black"
+											item-text="title"
+											item-value="id"
+										></v-select>
+								</v-flex>
+							</v-container>
+						</v-layout>
+					</v-container>
+					<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Checkbox'">
+						<v-layout row wrap>
+							<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+						</v-layout>
+						<v-layout row wrap>
+							<v-container fluid class="WM-Padding-LR-0">
+								<v-flex xs12 class="WM-FlexWrap mr-3">
+									<v-checkbox
+										v-for="(optionValue, keyOption) in item.options"
+										:key="keyOption"
+										:label="optionValue.title"
+										v-model="formData[item.name+'_'+item.id]"
+										:value="optionValue.id"
+									></v-checkbox>
 							</v-flex>
 						</v-container>
-						<v-text-field
-							v-if="item.type == 'Text'"
-							v-model="formData[item.name+'_'+item.id]"
-							:label="item.name"
-							color="black"
-						></v-text-field>
-						<!-- <v-container fluid v-if="item.type == 'Temperature'">
-							<p>{{ item.name }}</p>
-							<v-flex xs12>
-								<v-slider
-									step="0.1"
-									prepend-icon="fas fa-temperature-high"
-									v-model="formData[item.name+'_'+item.id]"
-									min="0"
-									max="200"
-									thumb-label="always"
-								></v-slider>
-							</v-flex>
-						</v-container> -->
-						<v-container fluid v-if="item.type == 'Pressure'">
-							<p>{{ item.name }}</p>
-							<v-flex xs12>
-								<v-slider
-									prepend-icon="fa fa-flask"
-									step="0.01"
-									v-model="formData[item.name+'_'+item.id]"
-									min="-1"
-									max="3"
-									thumb-label="always"
-								></v-slider>
-							</v-flex>
-						</v-container>
-						<v-select
-							multiple
-							v-if="item.type == 'Select'"
-							:items="item.options"
-							v-model="formData[item.name+'_'+item.id]"
-							:label="item.name"
-							color="black"
-							item-text="title"
-							item-value="id"
-						></v-select>
-						<v-container fluid v-if="item.type == 'Checkbox'">
-							<p>{{ item.name }}</p>
-							<v-checkbox
-								v-for="(optionValue, keyOption) in item.options"
-								:key="keyOption"
-								:label="optionValue.title"
-								v-model="formData[item.name+'_'+item.id]"
-								:value="optionValue.id"
-							></v-checkbox>
-						</v-container>
-						<v-container fluid v-if="item.type == 'Radiobutton'">
-							<p>{{ item.name }}</p>
-							<v-radio-group v-model="formData[item.name+'_'+item.id]">
-								<v-radio
-									v-for="(optionValue, keyOption) in item.options"
-									:key="keyOption"
-									:label="optionValue.title"
-									:value="optionValue.id"
-								></v-radio>
-							</v-radio-group>
-						</v-container>
-						<v-container fluid v-if="item.type == 'Switch'">
+					</v-layout>
+				</v-container>
+				<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Radiobutton'">
+					<v-layout row wrap>
+						<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+					</v-layout>
+					<v-layout row wrap>
+						<v-container fluid class="WM-Padding-LR-0">
+							<v-flex xs12 class="WM-FlexWrap">
+								<v-radio-group v-model="formData[item.name+'_'+item.id]">
+									<v-radio
+										v-for="(optionValue, keyOption) in item.options"
+										:key="keyOption"
+										:label="optionValue.title"
+										:value="optionValue.id"
+									></v-radio>
+								</v-radio-group>
+						</v-flex>
+					</v-container>
+				</v-layout>
+			</v-container>
+			<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Switch'">
+				<v-layout row wrap>
+					<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+				</v-layout>
+				<v-layout row wrap>
+					<v-container fluid class="WM-Padding-LR-0">
+						<v-flex xs12>
 							<v-switch
 								color="green"
 								v-model="formData[item.name+'_'+item.id]"
 								:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
 							></v-switch>
-						</v-container>
-						<v-container fluid v-if="item.type == 'Range'">
-							<p>{{ item.name }}</p>
-							<v-flex xs12>
-								<v-slider
-									v-model="formData[item.name+'_'+item.id]"
-									:min="item.options[0].title"
-									:max="item.options[1].title"
-									thumb-label="always"
-								></v-slider>
 							</v-flex>
 						</v-container>
-						<v-container fluid v-if="item.type == 'Time'">
-							<v-flex xs12>
-								<v-text-field
-									v-model="formData[item.name+'_'+item.id]"
-									:label="item.name"
-									class="WM-Font-30"
-									mask="##:##"
-								></v-text-field>
-							</v-flex>
-						</v-container>
-						<template v-if="item.type == 'Form'">
-							<v-container row md-12 sm-12 xs-12>
-								<v-layout row wrap>
-									<h3>{{ item.name }}</h3>
-								</v-layout>
-								<v-layout row wrap>
-									<v-flex
-										:class="['pa-2', children.size]"
-										v-for="(children, keyChildren) in item.children"
-										:key="keyChildren"
-									>
+					</v-layout>
+			</v-container>
+			<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Range'">
+				<v-layout row wrap>
+					<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+				</v-layout>
+				<v-layout row wrap>
+				<v-container fluid class="WM-Padding-LR-0">
+				<v-flex xs12>
+					<v-slider
+						v-model="formData[item.name+'_'+item.id]"
+						:min="item.options[0].title"
+						:max="item.options[1].title"
+						thumb-label="always"
+						color="black"
+					></v-slider>
+				</v-flex>
+				</v-container>
+			</v-layout>
+			</v-container>
+			<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Time'">
+				<v-layout row wrap>
+					<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+				</v-layout>
+				<v-layout row wrap>
+					<v-container fluid class="WM-Padding-LR-0">
+						<v-flex xs12>
+							<v-text-field
+								v-model="formData[item.name+'_'+item.id]"
+								:label="item.name"
+								class="WM-Font-30"
+								mask="##:##"
+								color="black"
+							></v-text-field>
+						</v-flex>
+					</v-container>
+			</v-layout>
+			</v-container>
+			<!-- <v-layout row wrap>
+			<template v-if="item.type == 'Form'"> -->
+				<v-container row md-12 sm-12 xs-12 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5" v-if="item.type == 'Form'">
+					<v-layout row wrap>
+						<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
+					</v-layout>
+					<v-layout row wrap>
+						<v-flex
+							:class="['pa-2', children.size]"
+							v-for="(children, keyChildren) in item.children"
+							:key="keyChildren"
+						>
+							<v-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+									<v-flex xs12>
 										<v-text-field
-											v-if="children.type == 'Text'"
+											prepend-inner-icon="fa fa-align-left"
 											v-model="formData[children.name+'_'+children.id]"
 											:label="children.name"
 											color="black"
 										></v-text-field>
-										<v-container fluid v-if="children.type == 'Temperature'">
-											<p>{{ children.name }}</p>
-											<v-flex xs12>
-												<v-slider
-													prepend-icon="fas fa-temperature-high"
-													step="0.1"
-													v-model="formData[children.name+'_'+children.id]"
-													min="0"
-													max="200"
-													thumb-label="always"
-												></v-slider>
-											</v-flex>
-										</v-container>
-										<v-container fluid v-if="children.type == 'Pressure'">
-											<p>{{ children.name }}</p>
-											<v-flex xs12>
-												<v-slider
-													v-model="formData[children.name+'_'+children.id]"
-													min="-1"
-													step="0.01"
-													max="3"
-													prepend-icon="fa fa-flask"
-													thumb-label="always"
-												></v-slider>
-											</v-flex>
-										</v-container>
+									</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+								<v-flex xs12>
+									<v-slider
+										prepend-icon="fas fa-temperature-high"
+										step="0.1"
+										v-model="formData[children.name+'_'+children.id]"
+										min="0"
+										max="200"
+										thumb-label="always"
+									></v-slider>
+								</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Pressure'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+								<v-flex xs12>
+									<v-slider
+										prepend-icon="fa fa-flask"
+										v-model="formData[children.name+'_'+children.id]"
+										min="-1"
+										step="0.01"
+										max="3"
+										thumb-label="always"
+									></v-slider>
+								</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+									<v-flex xs12>
 										<v-select
 											multiple
-											v-if="children.type == 'Select'"
+											prepend-inner-icon="fa fa-check"
 											:items="children.options"
 											v-model="formData[children.name+'_'+children.id]"
 											:label="children.name"
@@ -262,59 +328,70 @@
 											item-text="title"
 											item-value="id"
 										></v-select>
-										<v-container fluid v-if="children.type == 'Checkbox'">
-											<p>{{ children.name }}</p>
-											<v-checkbox
+								</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+									<v-flex xs12 class="WM-FlexWrap mr-3">
+										<v-checkbox
+											v-for="(optionValue, keyOption) in children.options"
+											:key="keyOption"
+											:label="optionValue.title"
+											v-model="formData[children.name+'_'+children.id]"
+											:value="optionValue.id"
+										></v-checkbox>
+									</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+									<v-flex xs12 class="WM-FlexWrap">
+										<v-radio-group v-model="formData[children.name+'_'+children.id]">
+											<v-radio
 												v-for="(optionValue, keyOption) in children.options"
 												:key="keyOption"
 												:label="optionValue.title"
-												v-model="formData[children.name+'_'+children.id]"
 												:value="optionValue.id"
-											></v-checkbox>
-										</v-container>
-										<v-container fluid v-if="children.type == 'Radiobutton'">
-											<p>{{ children.name }}</p>
-											<v-radio-group v-model="formData[children.name+'_'+children.id]">
-												<v-radio
-													v-for="(optionValue, keyOption) in children.options"
-													:key="keyOption"
-													:label="optionValue.title"
-													:value="optionValue.id"
-												></v-radio>
-											</v-radio-group>
-										</v-container>
-										<v-container fluid v-if="children.type == 'Switch'">
-											<v-switch
-												color="green"
-												v-model="formData[children.name+'_'+children.id]"
-												:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
-											></v-switch>
-										</v-container>
-										<v-container fluid v-if="children.type == 'Range'">
-											<p>{{ item.name }}</p>
-											<v-flex xs12>
-												<v-slider
-													v-model="formData[children.name+'_'+children.id]"
-													:min="children.options[0].title"
-													:max="children.options[1].title"
-													thumb-label="always"
-												></v-slider>
-											</v-flex>
-										</v-container>
-										<v-container fluid v-if="children.type == 'Time'">
-											<v-flex xs12>
-												<v-text-field
-													v-model="formData[children.name+'_'+children.id]"
-													:label="children.name"
-													class="WM-Font-30"
-													mask="##:##"
-												></v-text-field>
-											</v-flex>
-										</v-container>
+											></v-radio>
+										</v-radio-group>
 									</v-flex>
-								</v-layout>
 							</v-container>
-						</template>
+							<v-container fluid v-if="children.type == 'Switch'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+									<v-flex xs12>
+										<v-switch
+											color="green"
+											v-model="formData[children.name+'_'+children.id]"
+											:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
+										></v-switch>
+								</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0">
+								<p>{{ item.name }}</p>
+								<v-flex xs12>
+									<v-slider
+										v-model="formData[children.name+'_'+children.id]"
+										:min="children.options[0].title"
+										:max="children.options[1].title"
+										thumb-label="always"
+									></v-slider>
+								</v-flex>
+							</v-container>
+							<v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0">
+								<p>{{ children.name }}</p>
+									<v-flex xs12>
+										<v-text-field
+											v-model="formData[children.name+'_'+children.id]"
+											:label="children.name"
+											class="WM-Font-30"
+											mask="##:##"
+										></v-text-field>
+								</v-flex>
+							</v-container>
+						</v-flex>
+					</v-layout>
+				</v-container>
+			<!-- </template>
+			</v-layout> -->
 					</v-flex>
 				</v-layout>
 				<v-layout row wrap class="px-5 my-3">
@@ -537,11 +614,11 @@ export default {
 }
 
 .v-input--switch__track:not(.green--text) {
-	color: red !important;
+	color: #E91E63 !important;
 }
 
 .v-input--switch__thumb:not(.green--text) {
-	background-color: red !important;
+	background-color: #E91E63 !important;
 }
 .v-btn--floating {
 	padding: 0 !important;
@@ -553,4 +630,30 @@ export default {
 .v-btn--icon:before {
 	border-radius: 50% !important;
 }
+.v-input--selection-controls__input {
+	margin-right :0;
+}
+.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
+	margin-bottom : 0;
+}
+.v-input--radio-group--column .v-input--radio-group__input {
+	flex-direction: row;
+}
+.v-input--selection-controls .v-input__control {
+	margin-right: 12px;
+}
+.v-input--selection-controls__input {
+	margin-right: 7px;
+}
+.accent--text {
+	color: #E91E63 !important;
+	caret-color: #E91E63 !important;
+}
+.WM-Padding-LR-0 {
+	padding:24px 0;
+}
+.WM-BorderLeftTitle {
+	border-left: 1px solid;
+	padding-left: 5px;
+}
 </style>
diff --git a/resources/js/vue/views/TestResult/List.vue b/resources/js/vue/views/TestResult/List.vue
index 49fddf4a..b2687116 100644
--- a/resources/js/vue/views/TestResult/List.vue
+++ b/resources/js/vue/views/TestResult/List.vue
@@ -3,17 +3,19 @@
         <v-container fluid>
             <material-card class color="black" title="All Test Resualt" text>
                 <v-layout align-center wrap class="px-5 mb-3 my-3">
-                    <v-flex xs12 md2 sm3>
+                  <v-flex xs12 md2 sm3 class="WM-FlexCenter">
+                      <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.device_id"
                             label="ID"
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-autocomplete
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.testType_id"
                             label="TestType Name"
                             color="black"
@@ -22,9 +24,10 @@
                             item-value="id"
                         ></v-autocomplete>
                     </v-flex>
-                    <v-flex xs12 md2 sm3>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+          						<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
                         <v-autocomplete
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.medicalCenter_id"
                             label="Hospital"
                             color="black"
@@ -33,9 +36,10 @@
                             item-value="id"
                         ></v-autocomplete>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md2 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
-                            class="pa-2"
+                            class="py-3 pr-3"
                             v-model="filter.user_name"
                             label="User Name"
                             color="black"
@@ -52,7 +56,7 @@
                     </v-flex>
                 </v-layout>
                 <v-layout wrap class="px-5 mb-3 my-3">
-                    <v-flex xs12 sm6 md2 style="display: flex;align-items: center;">
+                    <v-flex xs12 sm6 md2 class="WM-FlexCenter">
                         <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                         <v-menu
                             lazy
@@ -165,8 +169,8 @@
                     </v-flex>
                 </v-layout>
                 <v-divider></v-divider>
-                <div class="text-xs-center" v-if="lastPage > 1">
-                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                <div class="text-xs-center mt-2" v-if="lastPage > 1">
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
diff --git a/resources/js/vue/views/TestType/AddEdit.vue b/resources/js/vue/views/TestType/AddEdit.vue
index 439fd49e..c386a852 100644
--- a/resources/js/vue/views/TestType/AddEdit.vue
+++ b/resources/js/vue/views/TestType/AddEdit.vue
@@ -3,38 +3,41 @@
         <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>
+                  <v-flex xs12 md3 sm3 class="WM-FlexCenter">
+                      <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             name="name"
                             v-model="form.name"
                             label="Name"
                             color="black"
-                            class="pa-2"
+                            class="py-3 pr-3"
                             :rules="[rules.required]"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
                         <v-text-field
                             :rules="[rules.required]"
                             name="uniquecode"
                             v-model="form.unique_code"
                             label="Unique Code"
                             color="black"
-                            class="pa-2"
+                            class="py-3 pr-3"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
-                        <v-autocomplete
-                            :rules="[rules.required]"
-                            :items="deviceLabels"
-                            item-text="name"
-                            item-value="id"
-                            v-model="form.device_label"
-                            label="ID Label"
-                            color="black"
-                            class="pa-2"
-                        ></v-autocomplete>
-                    </v-flex>
+                    <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                      <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                      <v-autocomplete
+                          :rules="[rules.required]"
+                          :items="deviceLabels"
+                          item-text="name"
+                          item-value="id"
+                          v-model="form.device_label"
+                          label="ID Label"
+                          color="black"
+                          class="py-3 pr-3"
+                      ></v-autocomplete>
+                  </v-flex>
                 </v-layout>
                 <v-layout
                     row
@@ -394,13 +397,13 @@ export default {
             ],
             size: [
                 { state: "not Selected", abbr: "" },
-                { state: "2 from 12", abbr: "md2 xs12" },
-                { state: "3 from 12", abbr: "md3 xs12" },
-                { state: "4 from 12", abbr: "md4 xs12" },
-                { state: "6 from 12", abbr: "md6 xs12" },
-                { state: "8 from 12", abbr: "md8 xs12" },
-                { state: "10 from 12", abbr: "md10 xs12" },
-                { state: "12 from 12", abbr: "md12 xs12" }
+                { 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."
diff --git a/resources/js/vue/views/TestType/List.vue b/resources/js/vue/views/TestType/List.vue
index 6af158b7..7a6b1f8a 100644
--- a/resources/js/vue/views/TestType/List.vue
+++ b/resources/js/vue/views/TestType/List.vue
@@ -2,14 +2,17 @@
     <v-container fluid>
         <material-card class color="black" title="TestType List" text>
             <v-layout wrap class="px-5 mb-3">
-                <v-flex xs12 md3 sm3 class="pr-4">
-                    <v-text-field label="Name" v-model="filter.name" color="black"></v-text-field>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-text-field class="py-3 pr-3" label="Name" v-model="filter.name" color="black"></v-text-field>
                 </v-flex>
-                <v-flex xs12 md3 sm3 class="pr-4">
-                    <v-text-field label="UniqueId" v-model="filter.unique_id" color="black"></v-text-field>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
+                    <v-text-field class="py-3 pr-3" label="UniqueId" v-model="filter.unique_id" color="black"></v-text-field>
                 </v-flex>
-                <v-flex xs12 md36 sm3 class="pr-4">
-                    <v-text-field label="UserName" v-model="filter.user_name" color="black"></v-text-field>
+                <v-flex xs12 md36 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
+                    <v-text-field class="py-3 pr-3" label="UserName" v-model="filter.user_name" color="black"></v-text-field>
                 </v-flex>
                 <v-spacer></v-spacer>
                 <v-flex xs12 md2 sm2 class="text-xs-right">
@@ -22,7 +25,8 @@
                 </v-flex>
             </v-layout>
             <v-layout wrap class="px-5 mb-3">
-                <v-flex xs12 sm6 md2>
+                <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                     <v-menu
                         lazy
                         :close-on-content-click="true"
@@ -31,7 +35,6 @@
                         v-model="fromMenu"
                     >
                         <v-text-field
-                            prepend-inner-icon="far fa-calendar-alt"
                             required
                             slot="activator"
                             label="FromDate"
@@ -46,7 +49,8 @@
                         ></v-date-picker>
                     </v-menu>
                 </v-flex>
-                <v-flex xs12 sm6 md2>
+                <v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
+                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                     <v-menu
                         lazy
                         :close-on-content-click="true"
@@ -56,7 +60,6 @@
                     >
                         <v-text-field
                             required
-                            prepend-inner-icon="far fa-calendar-alt"
                             slot="activator"
                             label="UpToDate"
                             v-model="filter.upToPicker"
@@ -119,8 +122,8 @@
                 </v-flex>
             </v-layout>
             <v-divider></v-divider>
-            <div class="text-xs-center" v-if="lastPage > 1">
-                <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+            <div class="text-xs-center mt-2" v-if="lastPage > 1">
+                <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
             </div>
             <v-layout row wrap align-center justify-center class="mt-3">
                 <router-link to="/dashboard">
diff --git a/resources/js/vue/views/User/List.vue b/resources/js/vue/views/User/List.vue
index 8c5a83b0..9624c6c6 100644
--- a/resources/js/vue/views/User/List.vue
+++ b/resources/js/vue/views/User/List.vue
@@ -2,18 +2,20 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Member List">
             <v-layout align-center justify-center wrap class="px-5 mb-3">
-                <v-flex xs12 md3 sm3>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
                     <v-text-field
-                        class="pa-2"
+                        class="py-3 pr-3"
                         color="black"
                         name="name"
                         label="Name"
                         v-model="filter.name"
                     ></v-text-field>
                 </v-flex>
-                <v-flex xs12 md3 sm3>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
                     <v-autocomplete
-                        class="pa-2"
+                        class="py-3 pr-3"
                         v-model="filter.medicalCenter_id"
                         label="Hospital"
                         color="black"
@@ -22,18 +24,20 @@
                         item-value="id"
                     ></v-autocomplete>
                 </v-flex>
-                <v-flex xs12 md3 sm3>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon>
                     <v-text-field
-                        class="pa-2"
+                        class="py-3 pr-3"
                         color="black"
                         name="CellPhone"
                         label="CellPhone"
                         v-model="filter.cell_number"
                     ></v-text-field>
                 </v-flex>
-                <v-flex xs12 md3 sm3>
+                <v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
+                    <v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
                     <v-select
-                        class="pa-2"
+                        class="py-3 pr-3"
                         color="black"
                         name="role"
                         label="Role"
@@ -43,7 +47,8 @@
                 </v-flex>
             </v-layout>
             <v-layout class="px-5 mb-3">
-                <v-flex xs12 sm12 md2 style="display: flex;align-items: center;">
+                <v-flex xs12 sm12 md2 class="WM-FlexCenter pl-3">
+                    <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                     <v-menu
                         lazy
                         :close-on-content-click="true"
@@ -54,7 +59,6 @@
                     >
                         <v-text-field
                             required
-                            prepend-inner-icon="far fa-calendar-alt"
                             slot="activator"
                             label="FromDate"
                             color="black"
@@ -68,7 +72,7 @@
                         ></v-date-picker>
                     </v-menu>
                 </v-flex>
-                <v-flex xs12 sm12 md2 style="display: flex;align-items: center;">
+                <v-flex xs12 sm12 md2 class="WM-FlexCenter pl-3">
                     <v-icon class="far fa-calendar-alt mr-2"></v-icon>
                     <v-menu
                         lazy
@@ -170,10 +174,9 @@
             <v-layout class="px-4 my-3">
                 <v-divider></v-divider>
             </v-layout>
-            <div class="text-xs-center" v-if="lastPage > 1">
+            <div class="text-xs-center mt-2" v-if="lastPage > 1">
                 <v-pagination
                     color="black"
-                    circle
                     v-model="currentPage"
                     :length="lastPage"
                     :total-visible="6"
diff --git a/resources/js/vue/views/User/MyInfo.vue b/resources/js/vue/views/User/MyInfo.vue
index 0467e2a7..f6893b1a 100644
--- a/resources/js/vue/views/User/MyInfo.vue
+++ b/resources/js/vue/views/User/MyInfo.vue
@@ -3,17 +3,19 @@
     <v-container grid-list-xs fluid>
       <material-card color="black" title="My Info">
         <v-layout align-center justify-center wrap class="px-5 my-3">
-          <v-flex xs12 sm4 md4>
+          <v-flex xs12 md4 sm4 class="WM-FlexCenter">
+            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="name"
               label="Name"
               color="black"
               v-model="user.name"
               :rules="[rules.required, rules.counter]"
-              class="pa-2"
+              class="py-3 pr-3"
             ></v-text-field>
           </v-flex>
-          <v-flex xs12 sm4 md4>
+          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+            <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
             <v-select
               :items="items"
               label="Gender"
@@ -21,11 +23,12 @@
               v-model="user.gender"
               single-line
               :rules="[rules.required]"
-              class="pa-2"
+              class="py-3 pr-3"
               color="black"
             ></v-select>
           </v-flex>
-          <v-flex xs12 sm4 md4>
+          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+            <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="cellnumber"
               label="Cell Number"
@@ -37,7 +40,8 @@
           </v-flex>
         </v-layout>
         <v-layout align-center justify-center wrap class="px-5 mb-3">
-          <v-flex xs12 sm4 md4>
+          <v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
+            <v-icon class="fa fa-phone mr-2 WM-Margin-B-8"></v-icon>
             <v-text-field
               name="emailaddress"
               label="Email Address"