From c872feb4686178272ba2bb59f16ac6f0e604f376 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Thu, 27 Mar 2025 14:54:13 +0330
Subject: [PATCH] fix : items & package & style

---
 src/components/core/Drawer.vue           |  85 ++++---
 src/components/core/Dropzone.vue         |   5 +-
 src/components/core/Toolbar.vue          |  17 +-
 src/components/material/Card.vue         | 188 +++++++-------
 src/components/material/Cards.vue        | 137 +++++-----
 src/components/material/ChartCard.vue    |  16 +-
 src/components/material/Notification.vue |   3 +-
 src/components/material/StatsCard.vue    |  40 +--
 src/components/modal/package/Show.vue    |   7 +-
 src/config/urls.js                       |   3 +
 src/router/paths.js                      |   8 +
 src/styles/css/Assets/Main.scss          |   3 +
 src/views/Dashboard.vue                  | 174 ++++++++++---
 src/views/Item/List.vue                  |   4 +-
 src/views/MyItem/List.vue                | 283 +++++++++++++++++----
 src/views/MyItem/Tabs/MyItems.vue        | 250 ------------------
 src/views/MyItem/Tabs/MyRequests.vue     | 209 ---------------
 src/views/MyPackage/List.vue             | 310 +++++++++++++++++++++++
 src/views/Package/AddEdit.vue            |   6 +-
 src/views/Package/List.vue               |  12 +-
 src/views/TestResult/AddEdit.vue         |  70 +----
 21 files changed, 950 insertions(+), 880 deletions(-)
 delete mode 100644 src/views/MyItem/Tabs/MyItems.vue
 delete mode 100644 src/views/MyItem/Tabs/MyRequests.vue
 create mode 100644 src/views/MyPackage/List.vue

diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
index 0de6261..c471437 100644
--- a/src/components/core/Drawer.vue
+++ b/src/components/core/Drawer.vue
@@ -19,15 +19,15 @@
                 </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>
-                        <v-divider class="my-1" v-if="(!link.role || $hasRole(link.role)) && link.line"/>
+                    <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>
+                    <v-divider class="my-1" v-if="(!link.role || $hasRole(link.role)) && link.line"/>
                 </template>
             </v-layout>
         </v-img>
@@ -53,7 +53,7 @@ export default {
             {
                 to: {name: 'MyInfo'},
                 icon: 'mdi-account',
-                text: 'My Info'
+                text: 'My Info',
             },
             {
                 to: {name: 'SubmitTestResult'},
@@ -63,53 +63,36 @@ export default {
             {
                 to: {name: 'AllResultTest'},
                 icon: 'description',
-                text: 'All Test Result',
-                line: true
-            },
-            {
-                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',
+                text: 'Test Results',
                 line: true
             },
+
             {
                 to: {name: 'AllItem'},
                 icon: 'far fa-clone',
                 text: 'Items',
-                role: 'Admin|Supervisor|User'
             },
             {
                 to: {name: 'MyItem'},
                 icon: 'far fa-clone',
                 text: 'My Items',
-                role: 'Admin|Supervisor|User',
                 line: true
             },
             {
                 to: {name: 'AllPackage'},
                 icon: 'fas fa-archive',
                 text: 'Packages',
-                role: 'Admin|Supervisor|User',
+            },
+            {
+                to: {name: 'MyPackage'},
+                icon: 'far fa-clone',
+                text: 'My Packages',
                 line: true
             },
             {
                 to: {name: 'AllLabels'},
                 icon: 'fas fa-inbox',
                 text: 'Labels',
-                line: true
             },
             {
                 to: {name: 'AllCycle'},
@@ -117,16 +100,34 @@ export default {
                 text: 'Cycles',
                 line: true
             },
-    /*        {
-                to: {name: 'Statistics'},
-                icon: 'fas fa-chart-bar',
-                text: 'Statistics',
+            {
+                to: {name: 'ManageMedicalCenter'},
+                icon: 'far fa-building',
+                text: 'Medical Center',
+                role: 'Admin',
             },
             {
-                to: {name: 'Tickets'},
-                icon: 'style',
-                text: 'Tickets',
-            },*/
+                to: {name: 'ManageUsers'},
+                icon: 'far fa-address-book',
+                text: 'Users',
+                role: 'Admin|Supervisor',
+            },
+            {
+                to: {name: 'ListTestType'},
+                icon: 'fas fa-vial',
+                text: 'Manage Test Type',
+                role: 'Admin',
+            },
+            /*        {
+                        to: {name: 'Statistics'},
+                        icon: 'fas fa-chart-bar',
+                        text: 'Statistics',
+                    },
+                    {
+                        to: {name: 'Tickets'},
+                        icon: 'style',
+                        text: 'Tickets',
+                    },*/
         ],
         responsive: false
     }),
diff --git a/src/components/core/Dropzone.vue b/src/components/core/Dropzone.vue
index 91dc8cc..ad3ad59 100644
--- a/src/components/core/Dropzone.vue
+++ b/src/components/core/Dropzone.vue
@@ -24,7 +24,6 @@
     import { ApiService } from "@/services";
     import { urls } from "@/config/urls";
     import toast from "@/services/global/toast.service";
-    import { mapGetters } from 'vuex'
 
     export default {
         props: ['ModelID', 'Images', 'BatchID', 'ModelType'],
@@ -33,7 +32,7 @@
         },
         data: () => ({
             dropzoneOptions: {
-            url: '/api/UploadFile',
+            url: '/api/store_media',
             thumbnailWidth: 150,
             maxFilesize: 2,
             headers: { "Authorization": `Bearer ${TokenService.getToken()}` },
@@ -69,7 +68,7 @@
                 }
             },
             sending(file, xhr, form_data) {
-                form_data.append('file', file);
+                //     form_data.append('file', file);
                 form_data.append('model_id', this.ModelID);
                 form_data.append('model_type', this.ModelType);
                 form_data.append('batch_id', this.BatchID);
diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index 0868077..c2096ec 100644
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -5,7 +5,7 @@
                 <v-btn v-if="responsive" class="default v-btn--simple" dark icon @click.stop="onClickBtn">
                     <v-icon>mdi-view-list</v-icon>
                 </v-btn>
-                {{ title }}
+                <p class="pt-5 title-home"> {{ title }}</p>
             </v-toolbar-title>
         </div>
 
@@ -76,10 +76,7 @@
 </template>
 
 <script>
-
-import {
-    mapMutations, mapActions
-} from 'vuex'
+import {mapMutations, mapActions} from 'vuex'
 
 export default {
     data: () => ({
@@ -100,7 +97,7 @@ export default {
     watch: {
         '$route'(val) {
             // this.title = val.name
-            this.title = val.name.replace(/([A-Z])/g, ' $1').trim()
+            this.title = val.name.replace(/([A-Z])/g, ' $1').trim() !== 'Dashboard' ? val.name.replace(/([A-Z])/g, ' $1').trim() : 'home'
         }
     },
 
@@ -144,6 +141,14 @@ export default {
     text-decoration: none;
 }
 
+.title-home {
+    font-family: "Montserrat-Regular";
+    font-weight: 400;
+    font-size: 36px !important;
+    text-transform: uppercase;
+    letter-spacing: 1.5rem;
+}
+
 .Pointer {
     cursor: pointer;
 }
diff --git a/src/components/material/Card.vue b/src/components/material/Card.vue
index a55f530..379521b 100644
--- a/src/components/material/Card.vue
+++ b/src/components/material/Card.vue
@@ -1,118 +1,104 @@
 <template>
-  <v-card
-    v-bind="$attrs"
-    :style="styles"
-    v-on="$listeners"
-  >
-    <helper-offset
-      v-if="hasOffset"
-      :inline="inline"
-      :full-width="fullWidth"
-      :offset="offset"
-    >
-      <v-card
-        v-if="!$slots.offset"
-        :color="color"
-        :class="`elevation-${elevation}`"
-        class="v-card--material__header"
-        dark
-      >
-        <slot
-          v-if="!title && !text"
-          name="header"
-        />
-        <span v-else>
-          <h4
-            class="title font-weight-light mb-2"
-            v-text="title"
-          />
-          <p
-            class="category font-weight-thin"
-            v-text="text"
-          />
-        </span>
-      </v-card>
-      <slot
-        v-else
-        name="offset"
-      />
-    </helper-offset>
+    <v-card v-bind="$attrs" :style="styles" v-on="$listeners" class="card-container">
+        <helper-offset v-if="hasOffset" :inline="inline" :full-width="fullWidth" :offset="offset">
+            <v-card v-if="!$slots.offset" :color="color" :class="`elevation-${elevation}`"
+                    class="v-card--material__header" dark>
+                <slot v-if="!title && !text" name="header"/>
+                <div v-else>
+                  <h4 class="title font-weight-light mb-2" v-text="title"/>
+                  <p class="category font-weight-thin" v-text="text"/>
+                </div>
+            </v-card>
+            <slot v-else name="offset"/>
+        </helper-offset>
 
-    <v-card-text>
-      <slot />
-    </v-card-text>
+        <v-card-text>
+            <slot/>
+        </v-card-text>
 
-    <v-divider
-      v-if="$slots.actions"
-      class="mx-3"
-    />
+        <v-divider v-if="$slots.actions" class="mx-3"/>
 
-    <v-card-actions v-if="$slots.actions">
-      <slot name="actions" />
-    </v-card-actions>
-  </v-card>
+        <v-card-actions v-if="$slots.actions">
+            <slot name="actions"/>
+        </v-card-actions>
+    </v-card>
 </template>
 
 <script>
 export default {
-  inheritAttrs: false,
+    inheritAttrs: false,
 
-  props: {
-    color: {
-      type: String,
-      default: 'secondary'
+    props: {
+        color: {
+            type: String,
+            default: 'secondary'
+        },
+        elevation: {
+            type: [Number, String],
+            default: 10
+        },
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        fullWidth: {
+            type: Boolean,
+            default: false
+        },
+        offset: {
+            type: [Number, String],
+            default: 24
+        },
+        title: {
+            type: String,
+            default: undefined
+        },
+        text: {
+            type: String,
+            default: undefined
+        }
     },
-    elevation: {
-      type: [Number, String],
-      default: 10
-    },
-    inline: {
-      type: Boolean,
-      default: false
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false
-    },
-    offset: {
-      type: [Number, String],
-      default: 24
-    },
-    title: {
-      type: String,
-      default: undefined
-    },
-    text: {
-      type: String,
-      default: undefined
+
+    computed: {
+        hasOffset() {
+            return this.$slots.header ||
+                    this.$slots.offset ||
+                    this.title ||
+                    this.text
+        },
+        styles() {
+            if (!this.hasOffset) return null
+
+            return {
+                marginBottom: `${this.offset*3}px`,
+                marginTop: `${this.offset * 2}px`
+            }
+        }
     }
-  },
-
-  computed: {
-    hasOffset () {
-      return this.$slots.header ||
-        this.$slots.offset ||
-        this.title ||
-        this.text
-    },
-    styles () {
-      if (!this.hasOffset) return null
-
-      return {
-        marginBottom: `${this.offset}px`,
-        marginTop: `${this.offset * 2}px`
-      }
-    }
-  }
 }
 </script>
 
 <style lang="scss">
-  .v-card--material {
-    &__header {
-      &.v-card {
-        border-radius: 4px;
-      }
+.card-container{
+    border-radius: 10px !important;
+    .v-card--material {
+        &__header {
+            &.v-card {
+                border-radius: 10px;
+                padding: 12px 30px !important;
+                margin-left: 25px;
+                margin-right: 25px;
+                .title {
+                    font-size : 20px !important;
+                    font-family : 'Montserrat-Light' !important;
+
+                }
+            }
+
+        }
     }
-  }
+     > .v-card__text {
+        padding: 16px 35px !important;
+    }
+}
 </style>
diff --git a/src/components/material/Cards.vue b/src/components/material/Cards.vue
index 2d451e5..fa59e8b 100644
--- a/src/components/material/Cards.vue
+++ b/src/components/material/Cards.vue
@@ -1,83 +1,86 @@
 <template>
-   <v-card :class="color">
-     <v-container>
-       <v-layout row wrap>
-         <v-flex xs12>
-           <v-card-text primary-text :class="aligntext">
-             <div>
-               <div class="headline WM-NoLetterSpacing-7">{{title}}</div>
-               <div class="subheading WM-LightGray-color">{{text}}</div>
-               <div></div>
-             </div>
-           </v-card-text>
-         </v-flex>
-         <!-- <v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'100px'}">
-         </v-flex> -->
-       </v-layout>
-     </v-container>
-   </v-card>
+    <v-card :class="color" class="tile-section">
+        <v-container class="py-1">
+            <v-layout row wrap>
+                <v-flex xs12>
+                    <v-card-text primary-text :class="aligntext" class="d-flex align-center">
+                        <v-icon v-if="icon" size="20" class="mr-2" style="max-width: 30px;">{{ icon }}</v-icon>
+                        <v-img v-if="image" src="image"/>
+                        <div>
+                            <div class="headline WM-NoLetterSpacing-7" v-if="title" v-html="title"></div>
+                            <div class="subheading WM-LightGray-color" v-if="text">{{ text }}</div>
+                        </div>
+                    </v-card-text>
+                </v-flex>
+                <!-- <v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'100px'}">
+                </v-flex> -->
+            </v-layout>
+        </v-container>
+    </v-card>
 </template>
 
 <script>
 export default {
     props: {
-      bordercolor: {
-        type: String,
-        default: () => ''
-      },
-      title: {
-        type: String,
-        default: () => ''
-      },
-      text: {
-        type: String,
-        default: () => ''
-      },
-      icon: {
-        type: String,
-        default: () => ''
-      },
-      color : {
-        type: String,
-        default: () => ''
-      },
-      column : {
-        type: String,
-        default: () => ''
-      },
-      aligntext : {
-        type: String,
-        default: () => ''
-      },
-      alignimg : {
-        type: String,
-        default: () => ''
-      }
-  },
-    data () {
-        return {
-
+        bordercolor: {
+            type: String,
+            default: () => ''
+        },
+        title: {
+            type: String,
+            default: () => ''
+        },
+        text: {
+            type: String,
+            default: () => ''
+        },
+        icon: {
+            type: String,
+            default: () => ''
+        },
+        image: {
+            type: String,
+            default: () => ''
+        },
+        color: {
+            type: String,
+            default: () => ''
+        },
+        column: {
+            type: String,
+            default: () => ''
+        },
+        aligntext: {
+            type: String,
+            default: () => ''
+        },
+        alignimg: {
+            type: String,
+            default: () => ''
         }
     },
+    data() {
+        return {}
+    },
 
-  computed: {
-
-  }
+    computed: {}
 }
 </script>
 <style scoped>
 .headline {
-  font-size : 30px !important;
-  text-transform: uppercase !important;
-  font-family : 'Montserrat-Bold' !important;
+    font-size: 22px !important;
+    text-transform: uppercase !important;
+    font-family: 'Montserrat-Regular' !important;
 }
-@media screen and (max-width:1536px){
-  .headline {
-    font-size : 22px !important;
-    letter-spacing: 2px !important;
-   }
-  .subheading {
-    font-size : 14px !important;
-  }
+
+.subheading {
+    font-size: 14px !important;
+    color: #7b7b7b;
+    font-family: 'Montserrat-Regular' !important;
+
+}
+
+.tile-section {
+    border-radius: 10px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/material/ChartCard.vue b/src/components/material/ChartCard.vue
index 2876dd0..7909fcd 100644
--- a/src/components/material/ChartCard.vue
+++ b/src/components/material/ChartCard.vue
@@ -1,9 +1,5 @@
 <template>
-  <material-card
-    v-bind="$attrs"
-    class="v-card--material-chart"
-    v-on="$listeners"
-  >
+  <material-card v-bind="$attrs" class="v-card--material-chart" v-on="$listeners">
     <chartist
       slot="header"
       :data="data"
@@ -11,15 +7,9 @@
       :options="options"
       :ratio="ratio"
       :responsive-options="responsiveOptions"
-      :type="type"
-    />
-
+      :type="type"/>
     <slot />
-
-    <slot
-      slot="actions"
-      name="actions"
-    />
+    <slot slot="actions" name="actions"/>
   </material-card>
 </template>
 
diff --git a/src/components/material/Notification.vue b/src/components/material/Notification.vue
index d608c72..c5328d1 100644
--- a/src/components/material/Notification.vue
+++ b/src/components/material/Notification.vue
@@ -4,8 +4,7 @@
     :class="[`elevation-${elevation}`]"
     :value="value"
     class="v-alert--notification"
-    v-on="$listeners"
-  >
+    v-on="$listeners">
     <slot />
   </v-alert>
 </template>
diff --git a/src/components/material/StatsCard.vue b/src/components/material/StatsCard.vue
index a4b174d..341fa8b 100644
--- a/src/components/material/StatsCard.vue
+++ b/src/components/material/StatsCard.vue
@@ -1,46 +1,20 @@
 <template>
-  <material-card
-    v-bind="$attrs"
-    class="v-card--material-stats"
-    v-on="$listeners"
-  >
+  <material-card v-bind="$attrs" class="v-card--material-stats" v-on="$listeners">
     <v-card
       slot="offset"
       :class="`elevation-${elevation}`"
       :color="color"
       class="pa-4"
-      dark
-    >
-      <v-icon
-        size="40"
-      >
-        {{ icon }}
-      </v-icon>
+      dark>
+      <v-icon size="40">{{ icon }}</v-icon>
     </v-card>
     <div class="text-xs-right">
-      <p
-        class="category grey--text font-weight-light"
-        v-text="title"
-      />
-      <h3
-        class="title display-1 font-weight-light">
-        {{ value }} <small>{{ smallValue }}</small>
-      </h3>
+      <p class="category grey--text font-weight-light" v-text="title"/>
+      <h3 class="title display-1 font-weight-light">{{ value }} <small>{{ smallValue }}</small></h3>
     </div>
 
-    <template slot="actions">
-      <v-icon
-        :color="subIconColor"
-        size="20"
-        class="mr-2"
-      >
-        {{ subIcon }}
-      </v-icon>
-      <span
-        :class="subTextColor"
-        class="caption font-weight-light"
-        v-text="subText"
-      />
+    <template slot="actions"><v-icon :color="subIconColor" size="20" class="mr-2">{{ subIcon }}</v-icon>
+      <span :class="subTextColor" class="caption font-weight-light" v-text="subText"/>
     </template>
   </material-card>
 </template>
diff --git a/src/components/modal/package/Show.vue b/src/components/modal/package/Show.vue
index cfa73e1..b0ca596 100644
--- a/src/components/modal/package/Show.vue
+++ b/src/components/modal/package/Show.vue
@@ -58,13 +58,13 @@
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <template>
+                    <template v-if="data.items.length">
                       <v-expansion-panel class="WM-Panel">
                         <v-expansion-panel-content
                           v-for="(item, key) in data.items" :key="key"
                         >
                           <template v-slot:header>
-                            <div class="CSSD-font">{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
+                            <div class="CSSD-font">{{ key+1 + ": " + item.name }} <span v-if="item.pivot">({{ item.pivot.count }})</span></div>
                           </template>
                           <v-card>
                             <v-card-text>note : {{ item.note }}</v-card-text>
@@ -72,6 +72,9 @@
                         </v-expansion-panel-content>
                       </v-expansion-panel>
                     </template>
+                    <template v-else>
+                        <p class="text-center mt-3" style="width: 100%;"> No Item Has Been Selected</p>
+                    </template>
 
                 </v-layout>
             </v-layout>
diff --git a/src/config/urls.js b/src/config/urls.js
index c4501a2..aa31f35 100644
--- a/src/config/urls.js
+++ b/src/config/urls.js
@@ -98,6 +98,9 @@ const urls = {
     listPackage: function (filter) {
         return "/Packages" + filter;
     },
+    listMyPackage: function (filter) {
+        return "/MyPackages" + filter;
+    },
     showPackage: function (id) {
         return `/Packages/${id}`;
     },
diff --git a/src/router/paths.js b/src/router/paths.js
index 4417191..ba3ecbe 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -284,6 +284,14 @@ export default [
       title:'My Item | CSSD Dashboard',
     }
   },
+  {
+    path: '/my-Package',
+    name: 'MyPackage',
+    view: 'MyPackage/List',
+    meta:{
+      title:'My Package | CSSD Dashboard',
+    }
+  },
   {
     path: '/tickets',
     name: 'Tickets',
diff --git a/src/styles/css/Assets/Main.scss b/src/styles/css/Assets/Main.scss
index fe08e60..e68d0bd 100644
--- a/src/styles/css/Assets/Main.scss
+++ b/src/styles/css/Assets/Main.scss
@@ -106,6 +106,9 @@ h3.CSSD-font {
   border-left: 3px solid;
 }
 
+.WM-LightGray-BG {
+  background-color: #eee !important;
+}
 .WM-OrangeGradient-BG {
   background: linear-gradient(-245.99599235188236deg, rgba(252, 184, 162, 1) -0.3020833333333286%, rgba(255, 236, 210, 1) 93.03125%);
 }
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index f90e000..e3d9556 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,12 +1,12 @@
 <template>
-    <v-container fluid>
+    <v-container fluid class="dashboard">
 
-        <material-card class="" v-if="$hasRole('Admin')" color="black" title="Admin" text="">
+        <material-card class="" v-if="$hasRole('Admin')" color="black" title="Admin Dashboard" text="">
             <v-layout row wrap>
                 <template v-for="(AdminCard, Key ) in AdminCards">
                     <v-flex v-if="!AdminCard.role || $hasRole(AdminCard.role)" :class="[AdminCard.column, 'pa-2']"
                             :key="Key">
-                        <router-link :to="AdminCard.route">
+                        <router-link :to="AdminCard.route" style="height: 100%;display: grid;">
                             <material-cards :title="AdminCard.title" :icon="AdminCard.icon" :color="AdminCard.color"
                                             :text="AdminCard.text" :aligntext="AdminCard.aligntext"
                                             :alignimg="AdminCard.alignimg"/>
@@ -17,13 +17,13 @@
             </v-layout>
         </material-card>
 
-        <material-card v-if="$hasRole('Admin|Supervisor')" color="black" title="Supervisor" text="">
+        <material-card v-if="$hasRole('Admin|Supervisor')" color="black" title="Supervisor Dashboard" text="">
             <v-layout row wrap>
                 <template v-for="(SupervisorCard, Key ) in SupervisorCards">
                     <v-flex v-if="!SupervisorCard.role || $hasRole(SupervisorCard.role)"
                             :class="[SupervisorCard.column, 'pa-2']"
                             :key="Key">
-                        <router-link :to="SupervisorCard.route">
+                        <router-link :to="SupervisorCard.route" style="height: 100%;display:grid;">
                             <material-cards :title="SupervisorCard.title" :icon="SupervisorCard.icon"
                                             :color="SupervisorCard.color"
                                             :text="SupervisorCard.text" :aligntext="SupervisorCard.aligntext"
@@ -35,12 +35,12 @@
             </v-layout>
         </material-card>
 
-        <material-card v-if="$hasRole('Admin|Supervisor|User')" color="black" title="User" text="">
+        <material-card v-if="$hasRole('Admin|Supervisor|User')" color="black" title="User Dashboard" text="">
             <v-layout row wrap>
                 <template v-for="(UsersCard, Key ) in UsersCards">
                     <v-flex v-if="!UsersCard.role || $hasRole(UsersCard.role)" :class="[UsersCard.column, 'pa-2']"
                             :key="Key">
-                        <router-link :to="UsersCard.route">
+                        <router-link :to="UsersCard.route" style="height: 100%;display:grid;">
                             <material-cards :title="UsersCard.title" :icon="UsersCard.icon" :color="UsersCard.color"
                                             :text="UsersCard.text" :aligntext="UsersCard.aligntext"
                                             :alignimg="UsersCard.alignimg"/>
@@ -63,34 +63,34 @@ export default {
                 {
                     title: 'Manage Users',
                     text: 'You can Manage the users information',
-                    icon: '/img/Static/Dashboard/manageusers.png',
-                    color: 'WM-LightGreenGradient-BG',
+                    // image: '/img/Static/Dashboard/manageusers.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'ManageUsers'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-left',
-                    column: 'xs12 md12 sm12',
+                    column: 'xs12 md6 sm6',
                     role: 'Admin|Supervisor'
                 },
                 {
                     title: 'Manage Medical Center',
                     text: 'You can edit the medical center information',
-                    icon: '/img/Static/Dashboard/settings.png',
-                    color: 'WM-MuskGradient-BG',
+                    // image: '/img/Static/Dashboard/settings.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'ManageMedicalCenter'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-right',
-                    column: 'xs12 md7 sm7',
+                    column: 'xs12 md6 sm6',
                     role: 'Admin'
                 },
                 {
                     title: 'List Test Type',
                     text: 'You can simply add your test type',
-                    icon: '/img/Static/Dashboard/result.png',
-                    color: 'WM-GreyGradient-BG',
+                    // image: '/img/Static/Dashboard/result.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'ListTestType'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-ce',
-                    column: 'xs12 md5 sm5',
+                    column: 'xs12 md12 sm12',
                     role: 'Admin'
                 }
             ],
@@ -98,23 +98,23 @@ export default {
                 {
                     title: 'Manage Users',
                     text: 'You can Manage the users information',
-                    icon: '/img/Static/Dashboard/manageusers.png',
-                    color: 'WM-LightGreenGradient-BG',
+                    // image: '/img/Static/Dashboard/manageusers.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'ManageUsers'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-left',
-                    column: 'xs12 md12 sm12',
+                    column: 'xs12 md6 sm6',
                     role: 'Admin|Supervisor'
                 },
                 {
                     title: 'Test to Verify',
                     text: 'You can simply verify your own medical center test result in this section of website',
-                    icon: '/img/Static/Dashboard/verify.png',
-                    color: 'WM-PinkGradient-BG',
+                    // image: '/img/Static/Dashboard/verify.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'NotVerifyTestResult'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-left',
-                    column: 'xs12 md12 sm12',
+                    column: 'xs12 md6 sm6',
                     role: 'Admin|Supervisor'
                 },
             ],
@@ -122,34 +122,141 @@ export default {
                 {
                     title: 'My Info',
                     text: 'You can easily edit your registration information',
-                    icon: '/img/Static/Dashboard/info.png',
-                    color: 'WM-OrangeGradient-BG',
+                    // image: '/img/Static/Dashboard/info.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'MyInfo'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-right',
-                    column: 'xs12 md6 sm6',
+                    column: 'xs12 md12 sm12',
                     role: 'Admin|Supervisor|User'
                 },
                 {
                     title: 'All Test Result',
                     text: 'You can see all user tests and own tests',
-                    icon: '/img/Static/Dashboard/alltest.png',
-                    color: 'WM-GreenGradient-BG',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
                     route: {name: 'AllResultTest'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-right',
-                    column: 'xs12 md6 sm6',
+                    column: 'xs12 md8 sm8',
                     role: 'Admin|Supervisor|User'
                 },
                 {
-                    title: 'Add a Test Result',
-                    text: 'You can add the test result',
-                    icon: '/img/Static/Dashboard/addtest.png',
-                    color: 'WM-YellowGradient-BG',
+                    title: `<span>Add A </span><br/><span>Test Result</span>`,
+                    icon: 'fas fa-plus',
+                    color: 'black text-white',
                     route: {name: 'SubmitTestResult'},
                     aligntext: 'text-md-left',
                     alignimg: 'text-md-left',
-                    column: 'xs12 md12 sm12',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: 'MY Items',
+                    text: 'items that you posses',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
+                    route: {name: 'MyItem'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-right',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: 'All Items',
+                    text: 'all existing items in your medical center ',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
+                    route: {name: 'AllItem'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-right',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: `<span>Add new </span><br/><span>item</span>`,
+                    icon: 'fas fa-plus',
+                    color: 'blue text-white',
+                    route: {name: 'AddItem'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: 'MY package',
+                    text: 'packages that you posses',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
+                    route: {name: 'MyItem'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-right',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: 'All package',
+                    text: 'all existing packages in your medical center  ',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
+                    route: {name: 'AllItem'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-right',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: `<span>Add new </span><br/><span>Package</span>`,
+                    icon: 'fas fa-plus',
+                    color: 'cyan text-white',
+                    route: {name: 'AddPackage'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+
+                {
+                    title: 'All labels',
+                    text: 'All active labels in your medical center',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
+                    route: {name: 'AllResultTest'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-right',
+                    column: 'xs12 md8 sm8',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: `<span>Add new </span><br/><span> label</span>`,
+                    icon: 'fas fa-plus',
+                    color: 'purple text-white',
+                    route: {name: 'AddLabel'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md4 sm4',
+                    role: 'Admin|Supervisor|User'
+                },
+
+                {
+                    title: 'All cycles',
+                    text: 'All active cycles in your medical center',
+                    // image: '/img/Static/Dashboard/alltest.png',
+                    color: 'WM-LightGray-BG',
+                    route: {name: 'AllResultTest'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-right',
+                    column: 'xs12 md8 sm8',
+                    role: 'Admin|Supervisor|User'
+                },
+                {
+                    title: `<span>Add new </span><br/><span>cycle</span>`,
+                    icon: 'fas fa-plus',
+                    color: 'red text-white',
+                    route: {name: 'AddCycle'},
+                    aligntext: 'text-md-left',
+                    alignimg: 'text-md-left',
+                    column: 'xs12 md4 sm4',
                     role: 'Admin|Supervisor|User'
                 },
             ],
@@ -157,4 +264,3 @@ export default {
     },
 }
 </script>
-<style lang="scss"></style>
diff --git a/src/views/Item/List.vue b/src/views/Item/List.vue
index 4498fb1..11054f8 100644
--- a/src/views/Item/List.vue
+++ b/src/views/Item/List.vue
@@ -128,10 +128,10 @@
                         </v-data-table>
                     </v-flex>
                 </v-layout>
-                <v-divider></v-divider>
+                <v-divider/>
                 <div class="text-xs-center" v-if="lastPage > 1">
                     <v-pagination color="black" v-model="currentPage" :length="lastPage"
-                        :total-visible="6"></v-pagination>
+                        :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index 1773769..fbfff4f 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -2,30 +2,108 @@
     <div class>
         <v-container fluid>
             <material-card class color="black" title="My Items" text>
-                <v-tabs centered color="cyan" dark icons-and-text>
-                    <v-tabs-slider color="yellow"/>
-
-                    <v-tab href="#tab-1">
-                        My Items
-                        <v-icon>fa-clone</v-icon>
-                    </v-tab>
-
-                    <v-tab href="#tab-2">
-                        My Requests
-                        <v-icon>fa-paper-plane</v-icon>
-                    </v-tab>
-
-                    <v-tab-item value="tab-1">
-                        <v-card flat>
-                            <MyItemsList />
-                        </v-card>
-                    </v-tab-item>
-                    <v-tab-item value="tab-2">
-                        <v-card flat>
-                            <MyRequestsList />
-                        </v-card>
-                    </v-tab-item>
-                </v-tabs>
+                <v-layout align-center wrap class="my-3 px-5">
+                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID" color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
+                        <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
+                                        label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="py-3 pr-3" v-model="filter.size" label="Size" color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
+                    </v-flex>
+                    <v-spacer/>
+                    <v-flex class xs12 sm6 md6 lg2 xl1>
+                        <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>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+                        <router-link :to="{ name: 'AddItem' }">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                </v-layout>
+                <v-layout class="px-4 my-3">
+                    <v-divider/>
+                </v-layout>
+                <v-layout align-center wrap class="my-3 px-5">
+                    <v-flex md12>
+                        <v-data-table :headers="headers" :items="items" hide-actions>
+                            <template slot="headerCell" slot-scope="{ header }">
+                                <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
+                            </template>
+                            <template slot="items" slot-scope="{ item }">
+                                <td class="title font-weight-light">{{ item.id }}</td>
+                                <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
+                                <td class="title font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">{{ item.udi }}</td>
+                                <td class="title font-weight-light">{{ item.size }}</td>
+                                <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)">
+                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <span>Show</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Show</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
+                                                   @click="generateBarcode(item, 'Item')">
+                                                <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
+                                                <span class="CSSD-font">Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Generate Barcode</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="pink darken-1"
+                                                   @click="transfer(item)">
+                                                <v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <span class="CSSD-font">Transfer</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Transfer</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
+                                                   @click="remove(item.id)" v-if="$hasRole('Admin|Supervisor')">
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                                                <span>Remove</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Remove</span>
+                                    </v-tooltip>
+                                </td>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+                <v-divider/>
+                <div class="text-xs-center" v-if="lastPage > 1">
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
+                </div>
                 <v-layout row wrap align-center justify-center class="mt-3">
                     <router-link to="/dashboard">
                         <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
@@ -38,28 +116,143 @@
         </v-container>
     </div>
 </template>
-
 <script>
-import MyItemsList from "./Tabs/MyItems.vue";
-import MyRequestsList from "./Tabs/MyRequests.vue";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations, mapGetters} from "vuex";
+import toast from "@/services/global/toast.service";
+
 export default {
-    components: {
-        MyItemsList,
-        MyRequestsList,
+    data: () => ({
+        headers: [
+            // {
+            //     sortable: true,
+            //     text: "ID",
+            //     value: "id"
+            // },
+            {
+                sortable: true,
+                text: "Item ID",
+                value: "id"
+            },
+            {
+                sortable: false,
+                text: "Name",
+                value: "name"
+            },
+            {
+                sortable: false,
+                text: "UDI",
+                value: "udi"
+            },
+            {
+                sortable: false,
+                text: "Size",
+                value: "size"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "left"
+            }
+        ],
+        filter: {
+            name: '',
+            size: '',
+            item_id: '',
+            medical_center_id: ''
+        },
+        items: [],
+        currentPage: 1,
+        lastPage: 1,
+        medicalCenters: []
+
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = '?';
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += (page) ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(urls.listMyItem(filter));
+            if (result && result.status == 200) {
+                this.items = result.data.data;
+                this.currentPage = result.data.data.current_page;
+                this.lastPage = result.data.data.last_page;
+            }
+        },
+        async generateBarcode(item, type = null) {
+            let code = item.udi;
+            if (code) {
+                const result = await ApiService.post(urls.Barcode(code, type));
+                if (result && result.status == 200) {
+                    this.changeCurrentModal({
+                        modal: "modal-barcode-barcode",
+                        properties: {result, item},
+                    });
+                }
+            } else {
+                toast.error('please first set UDI');
+            }
+        },
+        async show(testResultId) {
+            const result = await ApiService.get(urls.showItem(testResultId));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-item-show",
+                    properties: {result},
+                });
+            }
+        },
+        async changeStatus(id) {
+            const result = await ApiService.post(
+                    urls.changeItemStatus(id)
+            );
+            if (result) {
+                for (const key in this.items) {
+                    if (
+                            this.items.hasOwnProperty(key) &&
+                            this.items[key].id == id
+                    ) {
+                        this.items[key].status = result.data.data.status;
+                    }
+                }
+            }
+        },
+        async remove(testResultId) {
+            const result = await ApiService.delete(
+                    urls.removeItem(testResultId)
+            );
+            if (result && result.status == 200) {
+                for (const key in this.items) {
+                    if (
+                            this.items.hasOwnProperty(key) &&
+                            this.items[key].id == testResultId
+                    ) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async transfer(data) {
+            this.changeCurrentModal({
+                modal: "modal-user-list",
+                properties: {data},
+            });
+        }
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        },
     }
 };
-</script>
-<style>
-.v-btn--floating {
-    padding: 0 !important;
-}
-
-.theme--light.v-btn.v-btn--flat {
-    color: rgba(0, 0, 0, .87) !important;
-}
-
-.v-btn--floating,
-.v-btn--icon:before {
-    border-radius: 50% !important;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/MyItem/Tabs/MyItems.vue b/src/views/MyItem/Tabs/MyItems.vue
deleted file mode 100644
index 07285e4..0000000
--- a/src/views/MyItem/Tabs/MyItems.vue
+++ /dev/null
@@ -1,250 +0,0 @@
-<template>
-    <div>
-        <v-layout align-center wrap class="my-3 px-5">
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
-                <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.item_id" label="Item ID" color="black"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
-                <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
-                <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
-                <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
-                                label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
-                <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.size" label="Size" color="black"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
-                <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
-            </v-flex>
-            <v-spacer/>
-            <v-flex class xs12 sm6 md6 lg2 xl1>
-                <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>
-            </v-flex>
-            <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
-                <router-link :to="{ name: 'AddItem' }">
-                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                        <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                        <span class="black--text">Add</span>
-                    </v-btn>
-                </router-link>
-            </v-flex>
-        </v-layout>
-        <v-layout class="px-4 my-3">
-            <v-divider/>
-        </v-layout>
-        <v-layout align-center wrap class="my-3 px-5">
-            <v-flex md12>
-                <v-data-table :headers="headers" :items="items" hide-actions>
-                    <template slot="headerCell" slot-scope="{ header }">
-                        <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
-                    </template>
-                    <template slot="items" slot-scope="{ item }">
-                        <td class="title font-weight-light">{{ item.id }}</td>
-                        <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
-                        <td class="title font-weight-light">{{ item.name }}</td>
-                        <td class="title font-weight-light">{{ item.udi }}</td>
-                        <td class="title font-weight-light">{{ item.size }}</td>
-                        <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)">
-                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
-                                        <span>Show</span>
-                                    </v-btn>
-                                </template>
-                                <span>Show</span>
-                            </v-tooltip>
-                            <v-tooltip bottom open-on-hover>
-                                <template v-slot:activator="{ on, attrs }">
-                                    <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
-                                           @click="generateBarcode(item, 'Item')">
-                                        <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
-                                        <span class="CSSD-font">Generate Barcode</span>
-                                    </v-btn>
-                                </template>
-                                <span>Generate Barcode</span>
-                            </v-tooltip>
-                            <v-tooltip bottom open-on-hover>
-                                <template v-slot:activator="{ on, attrs }">
-                                    <v-btn class="mr-2" v-bind="attrs" v-on="on" color="pink darken-1"
-                                           @click="transfer(item)">
-                                        <v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
-                                        <span class="CSSD-font">Transfer</span>
-                                    </v-btn>
-                                </template>
-                                <span>Transfer</span>
-                            </v-tooltip>
-                            <v-tooltip bottom open-on-hover>
-                                <template v-slot:activator="{ on, attrs }">
-                                    <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
-                                           @click="remove(item.id)">
-                                        <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
-                                        <span>Remove</span>
-                                    </v-btn>
-                                </template>
-                                <span>Remove</span>
-                            </v-tooltip>
-                        </td>
-                    </template>
-                </v-data-table>
-            </v-flex>
-        </v-layout>
-        <v-divider/>
-        <div class="text-xs-center" v-if="lastPage > 1">
-            <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
-        </div>
-    </div>
-</template>
-<script>
-import {ApiService} from "@/services";
-import {urls} from "@/config/urls";
-import {mapMutations, mapGetters} from "vuex";
-import toast from "@/services/global/toast.service";
-
-export default {
-    data: () => ({
-        headers: [
-            // {
-            //     sortable: true,
-            //     text: "ID",
-            //     value: "id"
-            // },
-            {
-                sortable: true,
-                text: "Item ID",
-                value: "id"
-            },
-            {
-                sortable: false,
-                text: "Name",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "UDI",
-                value: "udi"
-            },
-            {
-                sortable: false,
-                text: "Size",
-                value: "size"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "left"
-            }
-        ],
-        filter: {
-            name: '',
-            size: '',
-            item_id: '',
-            medical_center_id: ''
-        },
-        items: [],
-        currentPage: 1,
-        lastPage: 1,
-        medicalCenters: []
-
-    }),
-    created() {
-        this.load();
-    },
-    methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
-        async load(page = 1) {
-            let filter = '?';
-            for (const key in this.filter) {
-                if (this.filter.hasOwnProperty(key)) {
-                    filter += `${key}=${this.filter[key]}&`;
-                }
-            }
-            filter += (page) ? `page=${page}` : `page=1`;
-            const result = await ApiService.get(urls.listMyItem(filter));
-            if (result && result.status == 200) {
-                this.items = result.data.data;
-                this.currentPage = result.data.data.current_page;
-                this.lastPage = result.data.data.last_page;
-            }
-        },
-        async generateBarcode(item, type = null) {
-            let code = item.udi;
-            if (code) {
-                const result = await ApiService.post(urls.Barcode(code, type));
-                if (result && result.status == 200) {
-                    this.changeCurrentModal({
-                        modal: "modal-barcode-barcode",
-                        properties: {result, item},
-                    });
-                }
-            } else {
-                toast.error('please first set UDI');
-            }
-        },
-        async show(testResultId) {
-            const result = await ApiService.get(urls.showItem(testResultId));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-item-show",
-                    properties: {result},
-                });
-            }
-        },
-        async changeStatus(id) {
-            const result = await ApiService.post(
-                    urls.changeItemStatus(id)
-            );
-            if (result) {
-                for (const key in this.items) {
-                    if (
-                            this.items.hasOwnProperty(key) &&
-                            this.items[key].id == id
-                    ) {
-                        this.items[key].status = result.data.data.status;
-                    }
-                }
-            }
-        },
-        async remove(testResultId) {
-            const result = await ApiService.delete(
-                    urls.removeItem(testResultId)
-            );
-            if (result && result.status == 200) {
-                for (const key in this.items) {
-                    if (
-                            this.items.hasOwnProperty(key) &&
-                            this.items[key].id == testResultId
-                    ) {
-                        this.items.splice(key, 1);
-                    }
-                }
-            }
-        },
-        async transfer(data) {
-            this.changeCurrentModal({
-                modal: "modal-user-list",
-                properties: {data},
-            });
-            // const result = await ApiService.post(urls.transferItem(id));
-            // if (result && result.status == 200) {
-            //     console.log(result , 'transfer - result')
-            // }
-        }
-    },
-    watch: {
-        currentPage(page) {
-            this.load(page);
-        },
-    }
-};
-</script>
\ No newline at end of file
diff --git a/src/views/MyItem/Tabs/MyRequests.vue b/src/views/MyItem/Tabs/MyRequests.vue
deleted file mode 100644
index 9747a9e..0000000
--- a/src/views/MyItem/Tabs/MyRequests.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-    <div>
-        <v-layout align-center wrap class="my-3 px-5">
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter">
-                <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.request_id" label="Request ID" color="black"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
-                <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
-                <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
-                <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
-                                label="Hospital" color="black" :items="medicalCenters" :clearable="true"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
-                <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.size" label="Size" color="black"/>
-            </v-flex>
-            <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
-                <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
-            </v-flex>
-            <v-spacer/>
-            <v-flex class xs12 sm6 md6 lg2 xl1>
-                <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>
-            </v-flex>
-            <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
-                <router-link :to="{ name: 'AddItem' }">
-                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                        <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
-                        <span class="black--text">Add</span>
-                    </v-btn>
-                </router-link>
-            </v-flex>
-        </v-layout>
-        <v-layout class="px-4 my-3">
-            <v-divider/>
-        </v-layout>
-        <v-layout align-center wrap class="my-3 px-5">
-            <v-flex md12>
-                <v-data-table :headers="headers" :items="items" hide-actions>
-                    <template slot="headerCell" slot-scope="{ header }">
-                        <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
-                    </template>
-                    <template slot="items" slot-scope="{ item }">
-                        <td class="title font-weight-light">{{ item.id }}</td>
-                        <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
-                        <td class="title font-weight-light">{{ item.name }}</td>
-                        <td class="title font-weight-light">{{ item.udi }}</td>
-                        <td class="title font-weight-light">{{ item.size }}</td>
-                        <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)">
-                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
-                                        <span>Show</span>
-                                    </v-btn>
-                                </template>
-                                <span>Show</span>
-                            </v-tooltip>
-                            <v-tooltip bottom open-on-hover>
-                                <template v-slot:activator="{ on, attrs }">
-                                    <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
-                                           @click="generateBarcode(item, 'Item')">
-                                        <v-icon class="white--text mr-2 caption">fas fa-barcode</v-icon>
-                                        <span class="CSSD-font">Generate Barcode</span>
-                                    </v-btn>
-                                </template>
-                                <span>Generate Barcode</span>
-                            </v-tooltip>
-                        </td>
-                    </template>
-                </v-data-table>
-            </v-flex>
-        </v-layout>
-        <v-divider/>
-        <div class="text-xs-center" v-if="lastPage > 1">
-            <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
-        </div>
-    </div>
-</template>
-<script>
-import {ApiService} from "@/services";
-import {urls} from "@/config/urls";
-import {mapMutations, mapGetters} from "vuex";
-import toast from "@/services/global/toast.service";
-
-export default {
-    data: () => ({
-        headers: [
-            // {
-            //     sortable: true,
-            //     text: "ID",
-            //     value: "id"
-            // },
-            {
-                sortable: true,
-                text: "Item ID",
-                value: "id"
-            },
-            {
-                sortable: false,
-                text: "Name",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "UDI",
-                value: "udi"
-            },
-            {
-                sortable: false,
-                text: "Size",
-                value: "size"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "left"
-            }
-        ],
-        filter: {
-            name: '',
-            size: '',
-            request_id: '',
-            medical_center_id: ''
-        },
-        items: [],
-        currentPage: 1,
-        lastPage: 1,
-        medicalCenters: []
-
-    }),
-    created() {
-        this.load();
-    },
-    methods: {
-        ...mapMutations("modal", ["changeCurrentModal"]),
-        async load(page = 1) {
-            let filter = '?';
-            for (const key in this.filter) {
-                if (this.filter.hasOwnProperty(key)) {
-                    filter += `${key}=${this.filter[key]}&`;
-                }
-            }
-            filter += (page) ? `page=${page}` : `page=1`;
-            const result = await ApiService.get(
-                    urls.listItem(filter)
-            );
-            if (result && result.status == 200) {
-                this.items = result.data.data;
-                this.currentPage = result.data.data.current_page;
-                this.lastPage = result.data.data.last_page;
-            }
-        },
-        async generateBarcode(item, type = null) {
-            let code = item.udi;
-            if (code) {
-                const result = await ApiService.post(urls.Barcode(code, type));
-                if (result && result.status == 200) {
-                    this.changeCurrentModal({
-                        modal: "modal-barcode-barcode",
-                        properties: {result, item},
-                    });
-                }
-            } else {
-                toast.error('please first set UDI');
-            }
-        },
-        async show(testResultId) {
-            const result = await ApiService.get(
-                    urls.showItem(testResultId)
-            );
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-item-show",
-                    properties: {result},
-                });
-            }
-        },
-        async changeStatus(id) {
-            const result = await ApiService.post(
-                    urls.changeItemStatus(id)
-            );
-            if (result) {
-                for (const key in this.items) {
-                    if (
-                            this.items.hasOwnProperty(key) &&
-                            this.items[key].id == id
-                    ) {
-                        this.items[key].status = result.data.data.status;
-                    }
-                }
-            }
-        },
-    },
-    watch: {
-        currentPage(page) {
-            this.load(page);
-        },
-    }
-};
-</script>
\ No newline at end of file
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
new file mode 100644
index 0000000..7513fcb
--- /dev/null
+++ b/src/views/MyPackage/List.vue
@@ -0,0 +1,310 @@
+<template>
+    <div class>
+        <v-container fluid>
+            <material-card class color="black" title="My Packages" text>
+                <v-layout align-center wrap class="mt-3 px-5">
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter">
+                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="py-3 pr-3" v-model="filter.package_id" label="Package ID"
+                                      color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3">
+                        <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
+                        <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4 lg3 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
+                        <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
+                        <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name"
+                                        item-value="id" label="Hospital" color="black" :items="medicalCenters"
+                                        :clearable="true"/>
+                    </v-flex>
+                    <v-spacer/>
+                    <v-flex class xs12 sm6 md6 lg2 xl1>
+                        <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>
+                    </v-flex>
+                    <v-flex xs12 sm6 md6 lg1 xl1 class="text-xs-right">
+                        <router-link :to="{ name: 'AddPackage' }">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+
+                </v-layout>
+                <v-layout class="px-4 my-3">
+                    <v-divider/>
+                </v-layout>
+                <v-layout align-center wrap class="my-3 px-5">
+                    <v-flex md12>
+                        <v-data-table :headers="headers" :items="items" hide-actions>
+                            <template slot="headerCell" slot-scope="{ header }">
+                                <span class="subheading font-weight-light text-white text--darken-3"
+                                      v-text="header.text"/>
+                            </template>
+                            <template slot="items" slot-scope="{ item }">
+                                <td class="title font-weight-light">{{ item.id }}</td>
+                                <!-- <td class="title font-weight-light">{{ item.unique_id }}</td> -->
+                                <td class="title font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">
+                                    {{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}
+                                </td>
+                                <td class="title font-weight-light">
+                                    {{ item.user ? item.user.name : '' | text_20_letter }}
+                                </td>
+                                <td class="title font-weight-light">{{ item.description }}</td>
+                                <td class="title font-weight-light">{{ item.status }}</td>
+                                <td class="text-xs-right FlexBtn Height-MD-60 justify-self-end">
+                                    <v-tooltip bottom open-on-hover v-if="$hasRole('Admin|Supervisor')">
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
+                                                   class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
+                                                <v-icon class="white--text mr-1 caption">
+                                                    fas
+                                                    {{ !['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check' }}
+                                                </v-icon>
+                                                <span>
+                                                    {{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}
+                                                </span>
+                                            </v-btn>
+                                        </template>
+                                        <span>{{ !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve' }}</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
+                                                   @click="show(item.id)">
+                                                <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                                <span>Show</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Show</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <router-link class="LinkBtn"
+                                                         v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                                         :to="{ name: 'EditPackage', params: { package: item.id } }">
+                                                <v-btn v-bind="attrs" v-on="on" color="orange" class="mr-2">
+                                                    <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                                                    <span>Edit</span>
+                                                </v-btn>
+                                            </router-link>
+                                        </template>
+                                        <span>Edit</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="orange darken-1"
+                                                   @click="generateBarcode(item, 'Package')">
+                                                <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                                <span>Generate Barcode</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Generate Barcode</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn class="mr-2" v-bind="attrs" v-on="on" color="pink darken-1"
+                                                   @click="transfer(item)">
+                                                <v-icon class="white--text mr-2 caption">fas fa-arrows-alt</v-icon>
+                                                <span class="CSSD-font">Transfer</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Transfer</span>
+                                    </v-tooltip>
+                                    <v-tooltip bottom open-on-hover>
+                                        <template v-slot:activator="{ on, attrs }">
+                                            <v-btn v-bind="attrs" v-on="on" color="red" class="WM-ActionButton mr-2"
+                                                   @click="remove(item.id)" v-if="$hasRole('Admin|Supervisor')">
+                                                <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
+                                                <span>Remove</span>
+                                            </v-btn>
+                                        </template>
+                                        <span>Remove</span>
+                                    </v-tooltip>
+                                </td>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+                <v-divider/>
+                <div class="text-xs-center" v-if="lastPage > 1">
+                    <v-pagination color="black" v-model="currentPage" :length="lastPage"
+                                  :total-visible="6"></v-pagination>
+                </div>
+                <v-layout row wrap align-center justify-center class="mt-3">
+                    <router-link to="/dashboard">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                            <span class="black--text">Back</span>
+                        </v-btn>
+                    </router-link>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapMutations, mapGetters} from "vuex";
+import toast from "@/services/global/toast.service";
+
+export default {
+    data: () => ({
+        headers: [
+            {
+                sortable: true,
+                text: "Package ID",
+                value: "Package ID"
+            },
+            {
+                sortable: true,
+                text: "Name",
+                value: "name"
+            },
+            {
+                sortable: true,
+                text: "Hospital",
+                value: "Hospital"
+            },
+            {
+                sortable: true,
+                text: "Description",
+                value: "description"
+            },
+            {
+                sortable: true,
+                text: "Status",
+                value: "status"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "left"
+            }
+        ],
+        filter: {
+            name: '',
+            package_id: '',
+            medical_center_id: ''
+        },
+        result: ['Pass', 'Fail'],
+        items: [],
+        currentPage: 1,
+        lastPage: 1,
+        medicalCenters: []
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = '?';
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += (page) ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(urls.listMyPackage(filter));
+            if (result && result.status == 200) {
+                const {data, meta} = result.data;
+                this.items = data;
+                this.currentPage = meta.current_page;
+                this.lastPage = meta.last_page;
+            }
+            this.loadMedicalCenters();
+        },
+        async show(testResultId) {
+            const result = await ApiService.get(urls.showPackage(testResultId));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-package-show",
+                    properties: {result}
+                });
+            }
+        },
+        async remove(testResultId) {
+            const result = await ApiService.delete(urls.removePackage(testResultId));
+            if (result && result.status == 200) {
+                for (const key in this.items) {
+                    if (this.items.hasOwnProperty(key) && this.items[key].id == testResultId) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async generateBarcode(item, type) {
+            const code = item.udi;
+            if (code) {
+                const result = await ApiService.post(urls.Barcode(code, type));
+                if (result && result.status == 200) {
+                    this.changeCurrentModal({modal: "modal-barcode-barcode", properties: {result}});
+                }
+            } else {
+                toast.error('please first set UDI');
+            }
+        },
+        async changeStatus(item) {
+            const payload = {status: ['suspended', 'rejected'].includes(item.status) ? 'approved' : 'rejected',}
+            const result = await ApiService.post(urls.changePackageStatus(item.id), payload);
+            if (result) {
+                for (const key in this.items) {
+                    if (this.items.hasOwnProperty(key) && this.items[key].id == item.id) {
+                        this.items[key].status = result.data.data.status;
+                    }
+                }
+            }
+        },
+        async loadMedicalCenters() {
+            const result = await ApiService.get(urls.listFilterItemsTestResult);
+            if (result && result.status == 200) {
+                this.medicalCenters = result.data.data.MedicalCenters;
+            }
+        },
+        async transfer(data) {
+            this.changeCurrentModal({
+                modal: "modal-user-list",
+                properties: {data},
+            });
+        }
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalResult"])
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        },
+        getModalResult(testResult) {
+            for (const key in this.items) {
+                if (this.items.hasOwnProperty(key) && this.items[key].id == testResult.id) {
+                    this.items[key] = testResult;
+                }
+            }
+        }
+    }
+};
+</script>
+<style>
+.v-btn--floating {
+    padding: 0 !important;
+}
+
+.theme--light.v-btn.v-btn--flat {
+    color: rgba(0, 0, 0, .87) !important;
+}
+
+.v-btn--floating,
+.v-btn--icon:before {
+    border-radius: 50% !important;
+}
+</style>
diff --git a/src/views/Package/AddEdit.vue b/src/views/Package/AddEdit.vue
index aee1d0a..1d95336 100644
--- a/src/views/Package/AddEdit.vue
+++ b/src/views/Package/AddEdit.vue
@@ -41,7 +41,6 @@
                     <v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput"
                             style="position: relative" v-for="(item, key) in formData.items" :key="key">
                         <div class="Inner">
-<!--                            <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>-->
                             <v-autocomplete
                                     @keydown.enter.native.prevent="duplicateForm(key)"
                                     @change="duplicateForm(key)"
@@ -174,10 +173,7 @@ export default {
         async submitForm() {
             let result;
             if (this.$route.params.package) {
-                result = await ApiService.put(
-                        urls.updatePackage(this.$route.params.package),
-                        this.formData
-                );
+                result = await ApiService.put(urls.updatePackage(this.$route.params.package), this.formData);
             } else {
                 result = await ApiService.post(urls.storePackage, this.formData);
             }
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index 636349f..45b916f 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -71,20 +71,14 @@
                                             <v-btn :color="!['suspended', 'rejected'].includes(item.status) ? 'red' : 'green'"
                                                    class="mr-2" @click="changeStatus(item)" v-bind="attrs" v-on="on">
                                                 <v-icon class="white--text mr-1 caption">
-                                                    fas {{
-                                                        !['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'
-                                                    }}
+                                                    fas {{!['suspended', 'rejected'].includes(item.status) ? 'fa-close' : 'fa-check'}}
                                                 </v-icon>
                                                 <span>
-                                                    {{
-                                                        !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
-                                                    }}
+                                                    {{!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'}}
                                                 </span>
                                             </v-btn>
                                         </template>
-                                        <span>{{
-                                                !['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'
-                                            }}</span>
+                                        <span>{{!['suspended', 'rejected'].includes(item.status) ? 'reject' : 'approve'}}</span>
                                     </v-tooltip>
                                     <v-tooltip bottom open-on-hover>
                                         <template v-slot:activator="{ on, attrs }">
diff --git a/src/views/TestResult/AddEdit.vue b/src/views/TestResult/AddEdit.vue
index 7749489..bcda3e4 100644
--- a/src/views/TestResult/AddEdit.vue
+++ b/src/views/TestResult/AddEdit.vue
@@ -484,67 +484,29 @@ export default {
                 for (const key in result.data.data.inputs) {
                     if (result.data.data.inputs.hasOwnProperty(key)) {
                         if (result.data.data.inputs[key].type == "Form") {
-                            for (const keyForm in result.data.data.inputs[key]
-                                    .children) {
-                                if (
-                                        result.data.data.inputs[
-                                                key
-                                                ].children.hasOwnProperty(keyForm)
-                                ) {
-                                    if (
-                                            result.data.data.inputs[key].children[
-                                                    keyForm
-                                                    ].type == "Checkbox" ||
-                                            result.data.data.inputs[key].children[
-                                                    keyForm
-                                                    ].type == "Select"
-                                    ) {
-                                        this.formData[
-                                        result.data.data.inputs[key]
-                                                .children[keyForm].name +
-                                        "_" +
-                                        result.data.data.inputs[key]
-                                                .children[keyForm].id
-                                                ] = [];
+                            for (const keyForm in result.data.data.inputs[key].children) {
+                                if (result.data.data.inputs[key].children.hasOwnProperty(keyForm)) {
+                                    if (result.data.data.inputs[key].children[keyForm].type == "Checkbox" ||
+                                            result.data.data.inputs[key].children[keyForm].type == "Select") {
+                                        this.formData[result.data.data.inputs[key].children[keyForm].name + "_" + result.data.data.inputs[key].children[keyForm].id] = [];
                                     } else {
-                                        this.formData[
-                                        result.data.data.inputs[key]
-                                                .children[keyForm].name +
-                                        "_" +
-                                        result.data.data.inputs[key]
-                                                .children[keyForm].id
-                                                ] = "";
+                                        this.formData[result.data.data.inputs[key].children[keyForm].name + "_" + result.data.data.inputs[key].children[keyForm].id] = "";
                                     }
                                 }
                             }
-                        } else if (
-                                result.data.data.inputs[key].type == "Checkbox" ||
-                                result.data.data.inputs[key].type == "Select"
-                        ) {
-                            this.formData[
-                            result.data.data.inputs[key].name +
-                            "_" +
-                            result.data.data.inputs[key].id
-                                    ] = [];
-                        } else {
-                            this.formData[
-                            result.data.data.inputs[key].name +
-                            "_" +
-                            result.data.data.inputs[key].id
-                                    ] = "";
+                        } else if (result.data.data.inputs[key].type == "Checkbox" || result.data.data.inputs[key].type == "Select") {
+                            this.formData[result.data.data.inputs[key].name + "_" + result.data.data.inputs[key].id] = [];
+                        } else {this.formData[result.data.data.inputs[key].name + "_" + result.data.data.inputs[key].id] = "";
                         }
                     }
                 }
                 if (this.$route.params.testResult) {
-                    const result = await ApiService.get(
-                            urls.editTestResult(this.$route.params.testResult)
-                    );
+                    const result = await ApiService.get(urls.editTestResult(this.$route.params.testResult));
                     if (result && result.status == 200) {
                         this.formData = result.data.data;
                         for (const key in result.data.data.imagesPath) {
                             if (result.data.data.imagesPath.hasOwnProperty(key)) {
-                                result.data.data.imagesPath[key] =
-                                        result.data.data.imagesPath[key];
+                                result.data.data.imagesPath[key] = result.data.data.imagesPath[key];
                             }
                         }
                         // this.images = result.data.data.imagesPath;
@@ -558,15 +520,9 @@ export default {
             let result;
             this.formData['file_batch_id'] = this.file_batch_id;
             if (this.$route.params.testResult) {
-                result = await ApiService.put(
-                        urls.updateTestResult(this.$route.params.testResult),
-                        this.formData
-                );
+                result = await ApiService.put(urls.updateTestResult(this.$route.params.testResult), this.formData);
             } else {
-                result = await ApiService.post(
-                        urls.storeTestResult,
-                        this.formData
-                );
+                result = await ApiService.post(urls.storeTestResult, this.formData);
             }
 
             if (result && result.status == 200) {