From a665911d1589153bfd2a63e144a7da96c5af6524 Mon Sep 17 00:00:00 2001
From: Saeid <saeidkhakbazan@gmail.com>
Date: Sun, 8 Sep 2019 19:15:12 +0430
Subject: [PATCH] pack && packages && items && cycle

---
 resources/js/vue/components/core/Drawer.vue   |  11 +-
 .../js/vue/components/modal/Pack/Show.vue     | 110 +++++
 .../js/vue/components/modal/cycle/Show.vue    |  63 +--
 .../js/vue/components/modal/item/show.vue     |  21 +-
 .../js/vue/components/modal/package/Show.vue  |  38 +-
 resources/js/vue/config/urls.js               |  18 +
 resources/js/vue/router/paths.js              |  21 +-
 resources/js/vue/views/Cycle/AddEdit.vue      |  90 +++-
 resources/js/vue/views/Cycle/List.vue         |  81 ++--
 resources/js/vue/views/Item/List.vue          |  52 +-
 resources/js/vue/views/Pack/AddEdit.vue       |  99 +++-
 resources/js/vue/views/Pack/List.vue          | 456 +++++++++---------
 resources/js/vue/views/Package/List.vue       |  25 +-
 13 files changed, 617 insertions(+), 468 deletions(-)
 create mode 100644 resources/js/vue/components/modal/Pack/Show.vue

diff --git a/resources/js/vue/components/core/Drawer.vue b/resources/js/vue/components/core/Drawer.vue
index 371a6463..f702beb5 100644
--- a/resources/js/vue/components/core/Drawer.vue
+++ b/resources/js/vue/components/core/Drawer.vue
@@ -118,8 +118,7 @@ export default {
       {
         to: {name: 'AllItem'},
         icon: 'done',
-        text: 'Items',
-        role: 'Admin'
+        text: 'Items'
       },
       {
         to: {name: 'AllPackage'},
@@ -127,11 +126,15 @@ export default {
         text: 'Packages',
         role: 'Admin'
       },
+      {
+        to: {name: 'AllPack'},
+        icon: 'done',
+        text: 'Packs'
+      },
       {
         to: {name: 'AllCycle'},
         icon: 'done',
-        text: 'Cycles',
-        role: 'Admin'
+        text: 'Cycles'
       },
       {
         to: {name: 'Statistics'},
diff --git a/resources/js/vue/components/modal/Pack/Show.vue b/resources/js/vue/components/modal/Pack/Show.vue
new file mode 100644
index 00000000..5ad07bae
--- /dev/null
+++ b/resources/js/vue/components/modal/Pack/Show.vue
@@ -0,0 +1,110 @@
+
+<template>
+    <v-container grid-list-xs>
+        <material-card color="black" title="Show Package">
+            <v-layout align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Info</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Name :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.name }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Hospital :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ (data.user && data.user.medical_center) ? data.user.medical_center.name : "" }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Register User :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Cycle Number :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Lot Number :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.lot_number }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Description :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.description }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Sterile Date :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.sterile_date }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Expire Date :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.expire_date }}</span>
+                        </div>
+                    </v-flex>
+                </v-layout>
+            </v-layout>
+            <v-layout align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Items</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <v-flex xs12 md6 sm6 v-if="data.packages">
+                        <div class v-for="(item, key) in data.packages" :key="key">
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ key+1 + ": " + item.name }}</span>
+                        </div>
+                    </v-flex>
+                </v-layout>
+            </v-layout>
+        </material-card>
+    </v-container>
+</template>
+<script>
+export default {
+    data: () => ({
+        data: {}
+    })
+};
+</script>
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+export default {
+    data: () => ({
+        data : {}
+    }),
+    methods: {
+        ...mapMutations("modal", ["closeModal", "setResultModal"]),
+        async verify(id) {
+            const result = await ApiService.post(urls.verifyPackage(id));
+            if (result && result.status == 200) {
+                this.setResultModal(result.data.data);
+                this.closeModal();
+            }
+        }
+    },
+    created() {
+        this.data = this.getModalProperties.result.data.data;
+        
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalProperties"])
+    }
+};
+</script>
diff --git a/resources/js/vue/components/modal/cycle/Show.vue b/resources/js/vue/components/modal/cycle/Show.vue
index 152f3fd7..075b5f56 100644
--- a/resources/js/vue/components/modal/cycle/Show.vue
+++ b/resources/js/vue/components/modal/cycle/Show.vue
@@ -3,17 +3,11 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Show Cycle">
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Common Info</h3>
+                <h3 class="ml-3">Info</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
-                        <div class>
-                            <span class="title">UniqueId :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.unique_id }}</span>
-                        </div>
-                    </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Name :</span>
@@ -22,16 +16,20 @@
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Result :</span>
-                            <v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
-                            <v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
+                            <span class="title">Sterilizer ID :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.sterilizer_id }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">verify :</span>
-                            <v-icon v-if="data.verified == 'Verified'" class="green--text ml-2 caption">fas fa-check</v-icon>
-                            <v-icon v-if="data.verified == 'NotVerified'" class="pink--text ml-2 caption">fas fa-times</v-icon>
+                            <span class="title">Cycle Number :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Description :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.description }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
@@ -43,48 +41,24 @@
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Date :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.date }}</span>
                         </div>
                     </v-flex>
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Packages</h3>
+                <h3 class="ml-3">Packs</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6>
-                        <div class v-for="(packag, key) in data.packages" :key="key">
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ key+1 + ": " + packag.name }}</span>
+                        <div class v-for="(pack, key) in data.packs" :key="key">
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ key+1 + ": " + pack.name }}</span>
                         </div>
                     </v-flex>
                 </v-layout>
             </v-layout>
-            <v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
-                <v-flex
-                    class
-                    xs12
-                    md2
-                    sm2
-                    v-if="data.verified == 'NotVerified'"
-                    @click="verify(data.id)"
-                >
-                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-                        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-                        <span class="white--text">Verify</span>
-                    </v-btn>
-                </v-flex>
-                <v-flex class xs12 md2 sm2 v-else>
-                    <v-btn
-                        class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
-                        @click="verify(data.id)"
-                    >
-                        <v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
-                        <span class="black--text">UnVerify</span>
-                    </v-btn>
-                </v-flex>
-            </v-layout>
         </material-card>
     </v-container>
 </template>
@@ -105,13 +79,6 @@ export default {
     }),
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
-        async verify(id) {
-            const result = await ApiService.post(urls.verifyCycle(id));
-            if (result && result.status == 200) {
-                this.setResultModal(result.data.data);
-                this.closeModal();
-            }
-        }
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
diff --git a/resources/js/vue/components/modal/item/show.vue b/resources/js/vue/components/modal/item/show.vue
index 15527445..11f42cef 100644
--- a/resources/js/vue/components/modal/item/show.vue
+++ b/resources/js/vue/components/modal/item/show.vue
@@ -3,11 +3,17 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Show Item">
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Common Info</h3>
+                <h3 class="ml-3"> Info</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">ID :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.id }}</span>
+                        </div>
+                    </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Name :</span>
@@ -16,9 +22,14 @@
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Result :</span>
-                            <v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
-                            <v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
+                            <span class="title">Size :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.size }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Specific :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.specific }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
@@ -29,7 +40,7 @@
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Date :</span>
+                            <span class="title">Date Register:</span>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
                         </div>
                     </v-flex>
diff --git a/resources/js/vue/components/modal/package/Show.vue b/resources/js/vue/components/modal/package/Show.vue
index 013e9c5d..a605d4d1 100644
--- a/resources/js/vue/components/modal/package/Show.vue
+++ b/resources/js/vue/components/modal/package/Show.vue
@@ -3,7 +3,7 @@
     <v-container grid-list-xs>
         <material-card color="black" title="Show Package">
             <v-layout align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Common Info</h3>
+                <h3 class="ml-3">Info</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
@@ -22,16 +22,8 @@
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Result :</span>
-                            <v-icon v-if="data.result == 'Pass'" class="green--text ml-2 caption">fas fa-check</v-icon>
-                            <v-icon v-if="data.result == 'Fail'" class="pink--text ml-2 caption">fas fa-times</v-icon>
-                        </div>
-                    </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class>
-                            <span class="title">verify :</span>
-                            <v-icon v-if="data.verified == 'Verified'" class="green--text ml-2 caption">fas fa-check</v-icon>
-                            <v-icon v-if="data.verified == 'NotVerified'" class="pink--text ml-2 caption">fas fa-times</v-icon>
+                            <span class="title">Description :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.description }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
@@ -61,30 +53,6 @@
                     </v-flex>
                 </v-layout>
             </v-layout>
-            <v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
-                <v-flex
-                    class
-                    xs12
-                    md2
-                    sm2
-                    v-if="data.verified == 'NotVerified'"
-                    @click="verify(data.id)"
-                >
-                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-                        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-                        <span class="white--text">Verify</span>
-                    </v-btn>
-                </v-flex>
-                <v-flex class xs12 md2 sm2 v-else>
-                    <v-btn
-                        class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
-                        @click="verify(data.id)"
-                    >
-                        <v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
-                        <span class="black--text">UnVerify</span>
-                    </v-btn>
-                </v-flex>
-            </v-layout>
         </material-card>
     </v-container>
 </template>
diff --git a/resources/js/vue/config/urls.js b/resources/js/vue/config/urls.js
index c5863162..ec842cd5 100644
--- a/resources/js/vue/config/urls.js
+++ b/resources/js/vue/config/urls.js
@@ -110,6 +110,21 @@ const urls = {
     verifyPackage: function(id) {
         return `/Package/Verify/${id}`;
     },
+    listPack: function(filter) {
+        return "/Packs" + filter;
+    },
+    showPack: function(id) {
+        return `/Packs/${id}`;
+    },
+    editPack: function(id) {
+        return `/Packs/${id}/edit`;
+    },
+    updatePack: function(id) {
+        return `/Packs/${id}`;
+    },
+    removePack: function(id) {
+        return `Packs/${id}`;
+    },
     listCycle: function(filter) {
         return "/Cycles" + filter;
     },
@@ -137,6 +152,9 @@ const urls = {
     listAllPackage: function() {
         return "/GetPackages";
     },
+    listAllPack: function() {
+        return "/GetPacks";
+    },
     showItem: function(id) {
         return `/Items/${id}`;
     },
diff --git a/resources/js/vue/router/paths.js b/resources/js/vue/router/paths.js
index e6daae75..0b3c6110 100644
--- a/resources/js/vue/router/paths.js
+++ b/resources/js/vue/router/paths.js
@@ -155,9 +155,24 @@ export default [
     view: 'Package/List'
   },
   {
-    path: '/package/:package/edit',
-    name: 'EditPackage',
-    view: 'Package/AddEdit'
+    path: '/pack/:pack/edit',
+    name: 'EditPack',
+    view: 'Pack/AddEdit'
+  },
+  {
+    path: '/add-pack',
+    name: 'AddPack',
+    view: 'Pack/AddEdit'
+  },
+  {
+    path: '/packs',
+    name: 'AllPack',
+    view: 'Pack/List'
+  },
+  {
+    path: '/pack/:pack/edit',
+    name: 'EditPack',
+    view: 'Pack/AddEdit'
   },
   {
     path: '/add-cycle',
diff --git a/resources/js/vue/views/Cycle/AddEdit.vue b/resources/js/vue/views/Cycle/AddEdit.vue
index ee30893b..1f026cb8 100644
--- a/resources/js/vue/views/Cycle/AddEdit.vue
+++ b/resources/js/vue/views/Cycle/AddEdit.vue
@@ -3,7 +3,7 @@
         <v-container grid-list-xs fluid>
             <material-card color="black" title="Add Cycle">
                 <v-layout align-center justify-center wrap class="px-5 my-3">
-                    <v-flex xs12 sm4 md4>
+                    <v-flex xs12 sm6 md4>
                         <v-text-field
                             name="name"
                             label="Name"
@@ -13,30 +13,58 @@
                             class="pa-2"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 sm4 md4>
-                        <v-select
-                            :items="result"
-                            label="Result"
-                            name="result"
-                            v-model="formData.result"
-                            single-line
-                            :rules="[rules.required]"
-                            class="pa-2"
+                    <v-flex xs12 sm6 md4>
+                        <v-text-field
+                            name="sterilizer_id"
+                            label="Sterilizer ID"
                             color="black"
-                        ></v-select>
+                            v-model="formData.sterilizer_id"
+                            class="pa-2"
+                        ></v-text-field>
                     </v-flex>
-                </v-layout>
-                <v-layout align-center justify-center wrap class="px-5 mb-3">
-                    <v-flex xs12 sm12 md12>
+                    <v-flex xs12 sm6 md4>
+                        <v-text-field
+                            name="cycle_number"
+                            label="Cycle Number"
+                            color="black"
+                            v-model="formData.cycle_number"
+                            class="pa-2"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4>
+						<v-menu
+							lazy
+							:close-on-content-click="true"
+							transition="v-scale-transition"
+							offset-y
+							v-model="fromMenuDate"
+						>
+							<v-text-field required slot="activator" label="Date" v-model="formData.date"></v-text-field>
+							<v-date-picker
+								color="pink"
+								no-title
+								v-model="formData.date"
+								:date-format="date => new Date(date).toDateString()"
+							></v-date-picker>
+						</v-menu>
+					</v-flex>
+                    <v-flex xs12 sm6 md8>
                         <v-autocomplete
                             multiple
-                            :items="packages"
+                            :items="packs"
                             item-text="name"
                             item-value="id"
-                            v-model="formData.packages"
-                            label="Select Packages For Cycle"
+                            v-model="formData.packs"
+                            label="Select Packs For Cycle"
                         ></v-autocomplete>
                     </v-flex>
+                    <v-flex xs12 sm12 md12>
+						<v-textarea color="black" v-model="formData.description" class="pa-2" name="address">
+							<template v-slot:label>
+								<div>Description</div>
+							</template>
+						</v-textarea>
+					</v-flex>
                 </v-layout>
                 <v-layout row wrap justify-center align-center>
                     <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
@@ -70,14 +98,13 @@ import { mapMutations } from "vuex";
 export default {
     data() {
         return {
+            fromMenuDate: false,
             formData: {
                 name: "",
-                result: "",
                 description: "",
-                packages: []
+                packs: []
             },
-            packages: [],
-            result: ["Pass", "Fail"],
+            packs: [],
             rules: {
                 required: value => !!value || "Required.",
                 counter: value =>
@@ -92,7 +119,7 @@ export default {
         if (this.$route.params.cycle) {
             this.load(this.$route.params.cycle);
         }
-        this.loadPackages();
+        this.loadPacks();
     },
     methods: {
         async load(id) {
@@ -101,10 +128,10 @@ export default {
                 this.formData = result.data.data;
             }
         },
-        async loadPackages() {
-            const result = await ApiService.get(urls.listAllPackage());
+        async loadPacks() {
+            const result = await ApiService.get(urls.listAllPack());
             if (result.status == 200) {
-                this.packages = result.data.data;
+                this.packs = result.data.data;
             }
         },
         async submitForm() {
@@ -127,4 +154,15 @@ export default {
         }
     }
 };
-</script>
\ No newline at end of file
+</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/resources/js/vue/views/Cycle/List.vue b/resources/js/vue/views/Cycle/List.vue
index 5362a451..b2b774cf 100644
--- a/resources/js/vue/views/Cycle/List.vue
+++ b/resources/js/vue/views/Cycle/List.vue
@@ -12,22 +12,38 @@
                         ></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3>
-                        <v-autocomplete
+                        <v-text-field
                             class="pa-2"
-                            v-model="filter.result"
-                            label="Result"
+                            v-model="filter.sterilizer_id"
+                            label="Sterilizer ID"
                             color="black"
-                            :items="result"
-                        ></v-autocomplete>
+                        ></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3>
                         <v-text-field
                             class="pa-2"
-                            v-model="filter.unique_id"
-                            label="uniqueID"
+                            v-model="filter.cycle_number"
+                            label="Cycle Number"
                             color="black"
                         ></v-text-field>
                     </v-flex>
+                    <v-flex xs12 sm6 md3>
+						<v-menu
+							lazy
+							:close-on-content-click="true"
+							transition="v-scale-transition"
+							offset-y
+							v-model="Menu"
+						>
+							<v-text-field required slot="activator" label="Date" v-model="filter.date"></v-text-field>
+							<v-date-picker
+								color="pink"
+								no-title
+								v-model="filter.date"
+								:date-format="date => new Date(date).toDateString()"
+							></v-date-picker>
+						</v-menu>
+					</v-flex>
                     <v-flex class xs12 md2 sm3>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
@@ -55,10 +71,10 @@
                                 />
                             </template>
                             <template slot="items" slot-scope="{ item }">
-                                <td class="headline font-weight-light">{{ item.unique_id }}</td>
-                                <td class="title font-weight-light">{{ item.name }}</td>
-                                <td class="title font-weight-light">{{ item.result }}</td>
-                                <td class="title font-weight-light">{{ item.created_at }}</td>
+                                <td class="headline font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">{{ item.sterilizer_id }}</td>
+                                <td class="title font-weight-light">{{ item.cycle_number }}</td>
+                                <td class="title font-weight-light">{{ item.date }}</td>
                                 <td class="text-xs-right">
                                     <v-btn color="cyan" class="mr-2" @click="show(item.id)">
                                         <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
@@ -82,10 +98,6 @@
                                         <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
                                         <span>Remove</span>
                                     </v-btn>
-                                    <v-btn color="orange darken-1" @click="generateBarcode(item.unique_id)">
-                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
-                                        <span>Generate Barcode</span>
-                                    </v-btn>
                                 </td>
                             </template>
                         </v-data-table>
@@ -117,18 +129,18 @@ export default {
         headers: [
             {
                 sortable: true,
-                text: "Unique ID",
-                value: "Unique ID"
+                text: "Name",
+                value: "Name"
             },
             {
                 sortable: true,
-                text: "Name",
-                value: "name"
+                text: "Sterilizer ID",
+                value: "Sterilizer ID"
             },
             {
                 sortable: false,
-                text: "Result",
-                value: "result"
+                text: "Cycle Number",
+                value: "Cycle Number"
             },
             {
                 sortable: false,
@@ -142,12 +154,8 @@ export default {
                 align: "right"
             }
         ],
-        filter: {
-            unique_id: '',
-            name: '',
-            result: '',
-        },
-        result: ['Pass', 'Fail'],
+        filter: {},
+        Menu: false,
         packages: [],
         currentPage: 1,
         lastPage: 1,
@@ -200,15 +208,6 @@ export default {
                 }
             }
         },
-        async generateBarcode(code) {
-            const result = await ApiService.post(urls.Barcode(code));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-barcode-barcode",
-                    properties: { result }
-                });
-            }
-        }
     },
     computed: {
         ...mapGetters("modal", ["getModalResult"])
@@ -216,16 +215,6 @@ export default {
     watch: {
         currentPage(page) {
             this.load(page);
-        },
-        getModalResult(testResult) {
-            for (const key in this.packages) {
-                if (
-                    this.packages.hasOwnProperty(key) &&
-                    this.packages[key].id == testResult.id
-                ) {
-                    this.packages[key] = testResult;
-                }
-            }
         }
     }
 };
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
index ae272919..994ead48 100644
--- a/resources/js/vue/views/Item/List.vue
+++ b/resources/js/vue/views/Item/List.vue
@@ -12,13 +12,12 @@
                         ></v-text-field>
                     </v-flex>
                     <v-flex xs12 md3 sm3>
-                        <v-autocomplete
+                        <v-text-field
                             class="pa-2"
-                            v-model="filter.result"
-                            label="Result"
+                            v-model="filter.size"
+                            label="Size"
                             color="black"
-                            :items="result"
-                        ></v-autocomplete>
+                        ></v-text-field>
                     </v-flex>
                     <v-flex class xs12 md2 sm3>
                         <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
@@ -47,9 +46,9 @@
                                 />
                             </template>
                             <template slot="items" slot-scope="{ item }">
+                                <td class="title font-weight-light">{{ item.id }}</td>
                                 <td class="title font-weight-light">{{ item.name }}</td>
-                                <td class="title font-weight-light">{{ item.result }}</td>
-                                <td class="title font-weight-light">{{ item.created_at }}</td>
+                                <td class="title font-weight-light">{{ item.size }}</td>
                                 <td class="text-xs-right">
                                     <v-btn color="cyan" class="mr-2" @click="show(item.id)">
                                         <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
@@ -104,18 +103,18 @@ export default {
         headers: [
             {
                 sortable: true,
+                text: "ID",
+                value: "id"
+            },
+            {
+                sortable: false,
                 text: "Name",
                 value: "name"
             },
             {
                 sortable: false,
-                text: "Result",
-                value: "result"
-            },
-            {
-                sortable: false,
-                text: "Date",
-                value: "date"
+                text: "Size",
+                value: "size"
             },
             {
                 sortable: false,
@@ -126,9 +125,8 @@ export default {
         ],
         filter: {
             name: '',
-            result: '',
+            size: '',
         },
-        result: ['Pass', 'Fail'],
         items: [],
         currentPage: 1,
         lastPage: 1,
@@ -180,34 +178,12 @@ export default {
                     }
                 }
             }
-        },
-        async generateBarcode(code) {
-            const result = await ApiService.post(urls.Barcode(code));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-barcode-barcode",
-                    properties: { result }
-                });
-            }
         }
     },
-    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>
diff --git a/resources/js/vue/views/Pack/AddEdit.vue b/resources/js/vue/views/Pack/AddEdit.vue
index 40fdfd49..d4cde07c 100644
--- a/resources/js/vue/views/Pack/AddEdit.vue
+++ b/resources/js/vue/views/Pack/AddEdit.vue
@@ -1,9 +1,9 @@
 <template>
 	<v-form ref="form">
 		<v-container grid-list-xs fluid>
-			<material-card color="black" title="Add Package">
+			<material-card color="black" title="Add Label on Set ">
 				<v-layout align-center justify-center wrap class="px-5 my-3">
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="name"
 							label="Name"
@@ -13,7 +13,7 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="sterilizerId"
 							label="Sterilizer ID"
@@ -22,7 +22,7 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="cycle_number"
 							label="Cycle Number"
@@ -31,7 +31,26 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
+						<v-text-field
+							name="lot_number"
+							label="Lot Number"
+							color="black"
+							v-model="formData.cycle_number"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+					<v-flex xs12 sm6 md3>
+						<v-autocomplete
+							multiple
+							:items="items"
+							item-text="name"
+							v-model="formData.items"
+							item-value="id"
+							label="Select Package For Pack"
+						></v-autocomplete>
+					</v-flex>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="department"
 							label="Department"
@@ -40,12 +59,46 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
+					<v-flex xs12 sm6 md3>
+						<v-menu
+							lazy
+							:close-on-content-click="true"
+							transition="v-scale-transition"
+							offset-y
+							v-model="fromMenuSterile"
+						>
+							<v-text-field required slot="activator" label="Sterile Date" v-model="formData.sterile_date"></v-text-field>
+							<v-date-picker
+								color="pink"
+								no-title
+								v-model="formData.sterile_date"
+								:date-format="date => new Date(date).toDateString()"
+							></v-date-picker>
+						</v-menu>
+					</v-flex>
+					<v-flex xs12 sm6 md3>
+						<v-menu
+							lazy
+							:close-on-content-click="true"
+							transition="v-scale-transition"
+							offset-y
+							v-model="fromMenuExpire"
+						>
+							<v-text-field required slot="activator" label="Expire Date" v-model="formData.expire_date"></v-text-field>
+							<v-date-picker
+								color="pink"
+								no-title
+								v-model="formData.expire_date"
+								:date-format="date => new Date(date).toDateString()"
+							></v-date-picker>
+						</v-menu>
+					</v-flex>
 				</v-layout>
 				<v-layout align-center justify-center wrap class="px-5 mb-3">
 					<v-flex xs12 sm12 md12>
 						<v-textarea color="black" v-model="formData.description" class="pa-2" name="address">
 							<template v-slot:label>
-								<div>description</div>
+								<div>Description</div>
 							</template>
 						</v-textarea>
 					</v-flex>
@@ -58,7 +111,7 @@
 						</v-btn>
 					</v-flex>
 					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
-						<router-link :to="{name: 'AllPackage'}">
+						<router-link :to="{name: 'AllPack'}">
 							<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
 								<v-icon class="black--text">keyboard_arrow_left</v-icon>
 								<span class="black--text">Back</span>
@@ -78,6 +131,8 @@ import { mapMutations } from "vuex";
 export default {
 	data() {
 		return {
+			fromMenuSterile: false ,
+			fromMenuExpire: false,
 			formData: {
 				name: "",
 				result: "",
@@ -85,7 +140,6 @@ export default {
 				items: []
 			},
 			items: [],
-			result: ["Pass", "Fail"],
 			rules: {
 				required: value => !!value || "Required.",
 				counter: value =>
@@ -97,42 +151,53 @@ export default {
 		};
 	},
 	created() {
-		if (this.$route.params.package) {
-			this.load(this.$route.params.package);
+		if (this.$route.params.pack) {
+			this.load(this.$route.params.pack);
 		}
 		this.loadItems();
 	},
 	methods: {
 		async load(id) {
-			const result = await ApiService.get(urls.editPackage(id));
+			const result = await ApiService.get(urls.editPack(id));
 			if (result.status == 200) {
 				this.formData = result.data.data;
 			}
 		},
 		async loadItems() {
-			const result = await ApiService.get(urls.listAllItem());
+			const result = await ApiService.get(urls.listAllPackage());
 			if (result.status == 200) {
 				this.items = result.data.data;
 			}
 		},
 		async submitForm() {
 			let result;
-			if (this.$route.params.package) {
+			if (this.$route.params.pack) {
 				result = await ApiService.put(
-					urls.updatePackage(this.$route.params.package),
+					urls.updatePack(this.$route.params.pack),
 					this.formData
 				);
 			} else {
 				result = await ApiService.post(
-					urls.storePackage,
+					urls.storePack,
 					this.formData
 				);
 			}
 
 			if (result && result.status == 200) {
-				this.$router.push({ name: "AllPackage" });
+				this.$router.push({ name: "AllPack" });
 			}
 		}
 	}
 };
-</script>
\ No newline at end of file
+</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/resources/js/vue/views/Pack/List.vue b/resources/js/vue/views/Pack/List.vue
index ecee6854..7275efa5 100644
--- a/resources/js/vue/views/Pack/List.vue
+++ b/resources/js/vue/views/Pack/List.vue
@@ -1,111 +1,110 @@
 <template>
-    <div class>
-        <v-container fluid>
-            <material-card class color="black" title="All Labels" text>
-                <v-layout align-center wrap class="my-3">
-                    <v-flex xs12 md3 sm3>
-                        <v-text-field
-                            class="pa-2"
-                            v-model="filter.name"
-                            label="Name"
-                            color="black"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 md3 sm3>
-                        <v-autocomplete
-                            class="pa-2"
-                            v-model="filter.result"
-                            label="Result"
-                            color="black"
-                            :items="result"
-                        ></v-autocomplete>
-                    </v-flex>
-                    <v-flex xs12 md3 sm3>
-                        <v-text-field
-                            class="pa-2"
-                            v-model="filter.unique_id"
-                            label="uniqueID"
-                            color="black"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex class xs12 md2 sm3>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
-                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
-                            <span class="white--text">Filter</span>
-                        </v-btn>
-                    </v-flex>
-                    <v-spacer></v-spacer>
-                    <v-flex xs12 md2 sm2 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-divider></v-divider>
-                <v-layout align-center wrap class="my-3">
-                    <v-flex md12>
-                        <v-data-table :headers="headers" :items="items" hide-actions>
-                            <template slot="headerCell" slot-scope="{ header }">
-                                <span
-                                    class="subheading font-weight-light text-white text--darken-3"
-                                    v-text="header.text"
-                                />
-                            </template>
-                            <template slot="items" slot-scope="{ item }">
-                                <td class="headline font-weight-light">{{ item.unique_id }}</td>
-                                <td class="title font-weight-light">{{ item.name }}</td>
-                                <td class="title font-weight-light">{{ item.result }}</td>
-                                <td class="title font-weight-light">{{ item.created_at }}</td>
-                                <td class="text-xs-right">
-                                    <v-btn 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>
-                                    <router-link
-                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-                                        :to="{name: 'EditPackage', params: {package: item.id}}"
-                                    >
-                                        <v-btn 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>
-                                    <v-btn
-                                        color="pink"
-                                        class="WM-ActionButton"
-                                        @click="remove(item.id)"
-                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
-                                    >
-                                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                                        <span>Remove</span>
-                                    </v-btn>
-                                    <v-btn color="orange darken-1" @click="generateBarcode(item.unique_id)">
-                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
-                                        <span>Generate Barcode</span>
-                                    </v-btn>
-                                </td>
-                            </template>
-                        </v-data-table>
-                    </v-flex>
-                </v-layout>
-                <v-divider></v-divider>
-                <div class="text-xs-center" v-if="lastPage > 1">
-                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
-                </div>
-                <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>
+	<div class>
+		<v-container fluid>
+			<material-card class color="black" title="All Labels" text>
+				<v-layout align-center wrap class="my-3">
+					<v-flex xs12 md3 sm3>
+						<v-text-field class="pa-2" v-model="filter.name" label="Name" color="black"></v-text-field>
+					</v-flex>
+					<v-flex xs12 md3 sm3>
+						<v-autocomplete
+							class="pa-2"
+							v-model="filter.medical_center_id"
+                            @change="fillUsers"
+							label="Hospital"
+							color="black"
+							:items="medicalCenters"
+						></v-autocomplete>
+					</v-flex>
+					<v-flex xs12 md3 sm3>
+						<v-autocomplete
+							class="pa-2"
+							v-model="filter.user_id"
+							label="Users"
+							color="black"
+							:items="users"
+						></v-autocomplete>
+					</v-flex>
+					<v-flex xs12 md3 sm3>
+						<v-text-field class="pa-2" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
+					</v-flex>
+					<v-flex xs12 md3 sm3>
+						<v-text-field class="pa-2" v-model="filter.department" label="Department" color="black"></v-text-field>
+					</v-flex>
+					<v-flex class xs12 md2 sm3>
+						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+							<v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+							<span class="white--text">Filter</span>
+						</v-btn>
+					</v-flex>
+					<v-spacer></v-spacer>
+					<v-flex xs12 md2 sm2 class="text-xs-right">
+						<router-link :to="{name: 'AddPack'}">
+							<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-divider></v-divider>
+				<v-layout align-center wrap class="my-3">
+					<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.name }}</td>
+								<td
+									class="title font-weight-light"
+								>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td>
+								<td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
+								<td class="title font-weight-light">{{ item.cycle_number }}</td>
+								<td class="title font-weight-light">{{ item.department }}</td>
+								<td class="text-xs-right">
+									<v-btn 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>
+									<router-link
+										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+										:to="{name: 'EditPack', params: {pack: item.id}}"
+									>
+										<v-btn 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>
+									<v-btn
+										color="pink"
+										class="WM-ActionButton"
+										@click="remove(item.id)"
+										v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+									>
+										<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+										<span>Remove</span>
+									</v-btn>
+								</td>
+							</template>
+						</v-data-table>
+					</v-flex>
+				</v-layout>
+				<v-divider></v-divider>
+				<div class="text-xs-center" v-if="lastPage > 1">
+					<v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+				</div>
+				<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>
@@ -113,131 +112,136 @@ import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 import { mapMutations, mapGetters } from "vuex";
 export default {
-    data: () => ({
-        headers: [
-            {
-                sortable: true,
-                text: "Unique ID",
-                value: "Unique ID"
-            },
-            {
-                sortable: true,
-                text: "Name",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "Result",
-                value: "result"
-            },
-            {
-                sortable: false,
-                text: "Date",
-                value: "date"
-            },
-            {
-                sortable: false,
-                text: "Action",
-                value: "action",
-                align: "right"
-            }
-        ],
-        filter: {
-            unique_id: '',
-            name: '',
-            result: '',
-        },
-        result: ['Pass', 'Fail'],
-        items: [],
-        currentPage: 1,
-        lastPage: 1,
-    }),
-    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.listPackage(filter)
-            );
-            if (result && result.status == 200) {
-                this.items = result.data.data.data;
-                this.currentPage = result.data.data.current_page;
-                this.lastPage = result.data.data.last_page;
-            }
-        },
-        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(code) {
-            const result = await ApiService.post(urls.Barcode(code));
-            if (result && result.status == 200) {
-                this.changeCurrentModal({
-                    modal: "modal-barcode-barcode",
-                    properties: { result }
-                });
-            }
-        }
-    },
-    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;
-                }
-            }
-        }
-    }
+	data: () => ({
+		headers: [
+			{
+				sortable: true,
+				text: "Name",
+				value: "Name"
+			},
+			{
+				sortable: true,
+				text: "Hospital",
+				value: "Hospital"
+			},
+			{
+				sortable: false,
+				text: "User",
+				value: "User"
+			},
+			{
+				sortable: false,
+				text: "Cycle Number",
+				value: "Cycle Number"
+			},
+			{
+				sortable: false,
+				text: "Department",
+				value: "Department"
+			},
+			{
+				sortable: false,
+				text: "Action",
+				value: "action",
+				align: "right"
+			}
+		],
+		filter: {},
+		items: [],
+		medicalCenters: [],
+		users: [],
+		currentPage: 1,
+		lastPage: 1
+	}),
+	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.listPack(filter));
+			if (result && result.status == 200) {
+				this.items = result.data.data.data;
+				this.currentPage = result.data.data.current_page;
+				this.lastPage = result.data.data.last_page;
+			}
+			this.loadMedicalCenters();
+		},
+		async loadMedicalCenters() {
+			const result = await ApiService.get(urls.listFilterItemsTestResult);
+			if (result && result.status == 200) {
+				this.medicalCenters = result.data.data.MedicalCenters;
+			}
+		},
+		async fillUsers() {
+			const result = await ApiService.get(
+				urls.listOpertorMedicalCenter(this.form.medicalCenterId)
+			);
+			if (result && result.status == 200) {
+				this.users = result.data.data.users;
+			}
+		},
+		async show(testResultId) {
+			const result = await ApiService.get(urls.showPack(testResultId));
+			if (result && result.status == 200) {
+				this.changeCurrentModal({
+					modal: "modal-pack-show",
+					properties: { result }
+				});
+			}
+		},
+		async remove(testResultId) {
+			const result = await ApiService.delete(
+				urls.removePack(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);
+					}
+				}
+			}
+		}
+	},
+	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;
+	padding: 0 !important;
 }
 .theme--light.v-btn.v-btn--flat {
-    color: rgba(0,0,0,.87)!important;
+	color: rgba(0, 0, 0, 0.87) !important;
 }
-.v-btn--floating, .v-btn--icon:before {
-    border-radius: 50%!important;
+.v-btn--floating,
+.v-btn--icon:before {
+	border-radius: 50% !important;
 }
 </style>
diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue
index 6fe6ce15..f0028f82 100644
--- a/resources/js/vue/views/Package/List.vue
+++ b/resources/js/vue/views/Package/List.vue
@@ -11,15 +11,6 @@
                             color="black"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 md3 sm3>
-                        <v-autocomplete
-                            class="pa-2"
-                            v-model="filter.result"
-                            label="Result"
-                            color="black"
-                            :items="result"
-                        ></v-autocomplete>
-                    </v-flex>
                     <v-flex xs12 md3 sm3>
                         <v-text-field
                             class="pa-2"
@@ -55,10 +46,9 @@
                                 />
                             </template>
                             <template slot="items" slot-scope="{ item }">
-                                <td class="headline font-weight-light">{{ item.unique_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.result }}</td>
-                                <td class="title font-weight-light">{{ item.created_at }}</td>
+                                <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="text-xs-right">
                                     <v-btn color="cyan" class="mr-2" @click="show(item.id)">
                                         <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
@@ -126,14 +116,9 @@ export default {
                 value: "name"
             },
             {
-                sortable: false,
-                text: "Result",
-                value: "result"
-            },
-            {
-                sortable: false,
-                text: "Date",
-                value: "date"
+                sortable: true,
+                text: "Description",
+                value: "description"
             },
             {
                 sortable: false,