From 983d1659db9d0a6d0c3a3321e2f935cc5188c433 Mon Sep 17 00:00:00 2001
From: "zeinab.ashrafi" <ashrafisokout@gmail.com>
Date: Sat, 5 Apr 2025 14:35:55 +0330
Subject: [PATCH] fix : items and style

---
 src/components/core/Drawer.vue         | 101 ++++-------------------
 src/components/material/Cards.vue      |   8 +-
 src/components/modal/label/Show.vue    |   2 +-
 src/components/modal/user/List.vue     | 108 +++++++++++++------------
 src/store/modules/auth/actions.js      |   1 -
 src/store/modules/myItems/actions.js   |  82 +++++++++++++++++++
 src/store/modules/myItems/getters.js   |   6 ++
 src/store/modules/myItems/mutations.js |  26 ++++++
 src/store/modules/myItems/state.js     |  13 +++
 src/views/Dashboard.vue                |  20 ++---
 src/views/MedicalCenter/List.vue       |   2 +-
 src/views/MyItem/List.vue              | 108 ++++++++-----------------
 src/views/TestResult/List.vue          |   2 +-
 src/views/TestType/List.vue            |   2 +-
 src/views/Tickets/List.vue             |   2 +-
 src/views/User/List.vue                |   2 +-
 16 files changed, 256 insertions(+), 229 deletions(-)
 create mode 100644 src/store/modules/myItems/actions.js
 create mode 100644 src/store/modules/myItems/getters.js
 create mode 100644 src/store/modules/myItems/mutations.js
 create mode 100644 src/store/modules/myItems/state.js

diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
index c471437..39df9a1 100644
--- a/src/components/core/Drawer.vue
+++ b/src/components/core/Drawer.vue
@@ -1,7 +1,6 @@
 <template>
     <v-navigation-drawer id="app-drawer" v-model="inputValue" class="black" app absolute dark floating persistent
-                         mobile-break-point="991"
-                         width="260">
+                         mobile-break-point="991" width="260">
         <v-img :src="image" height="100%">
             <v-layout class="fill-height px-3" tag="v-list" column>
                 <v-list-tile avatar class="px-3 pt-4">
@@ -45,89 +44,21 @@ export default {
     data: () => ({
         logo: './img/vuetifylogo.png',
         links: [
-            {
-                to: {name: 'Dashboard'},
-                icon: 'mdi-view-dashboard',
-                text: 'Dashboard'
-            },
-            {
-                to: {name: 'MyInfo'},
-                icon: 'mdi-account',
-                text: 'My Info',
-            },
-            {
-                to: {name: 'SubmitTestResult'},
-                icon: 'fas fa-vial',
-                text: 'Add a Test Result'
-            },
-            {
-                to: {name: 'AllResultTest'},
-                icon: 'description',
-                text: 'Test Results',
-                line: true
-            },
-
-            {
-                to: {name: 'AllItem'},
-                icon: 'far fa-clone',
-                text: 'Items',
-            },
-            {
-                to: {name: 'MyItem'},
-                icon: 'far fa-clone',
-                text: 'My Items',
-                line: true
-            },
-            {
-                to: {name: 'AllPackage'},
-                icon: 'fas fa-archive',
-                text: 'Packages',
-            },
-            {
-                to: {name: 'MyPackage'},
-                icon: 'far fa-clone',
-                text: 'My Packages',
-                line: true
-            },
-            {
-                to: {name: 'AllLabels'},
-                icon: 'fas fa-inbox',
-                text: 'Labels',
-            },
-            {
-                to: {name: 'AllCycle'},
-                icon: 'cached',
-                text: 'Cycles',
-                line: true
-            },
-            {
-                to: {name: 'ManageMedicalCenter'},
-                icon: 'far fa-building',
-                text: 'Medical Center',
-                role: 'Admin',
-            },
-            {
-                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',
-                    },*/
+            {to: {name: 'Dashboard'}, icon: 'mdi-view-dashboard', text: 'Dashboard'},
+            {to: {name: 'MyInfo'}, icon: 'mdi-account', text: 'My Info',},
+            {to: {name: 'SubmitTestResult'}, icon: 'fas fa-vial', text: 'Add a Test Result'},
+            {to: {name: 'AllResultTest'}, icon: 'description', text: 'Test Results', line: true},
+            {to: {name: 'AllItem'}, icon: 'far fa-clone', text: 'Items',},
+            {to: {name: 'MyItem'}, icon: 'far fa-clone', text: 'My Items', line: true},
+            {to: {name: 'AllPackage'}, icon: 'fas fa-archive', text: 'Packages',},
+            {to: {name: 'MyPackage'}, icon: 'far fa-clone', text: 'My Packages', line: true},
+            {to: {name: 'AllLabels'}, icon: 'fas fa-inbox', text: 'Labels',},
+            {to: {name: 'AllCycle'}, icon: 'cached', text: 'Cycles', line: true},
+            {to: {name: 'ManageMedicalCenter'}, icon: 'far fa-building', text: 'Medical Center', role: 'Admin',},
+            {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/material/Cards.vue b/src/components/material/Cards.vue
index 00a7e53..f722b0b 100644
--- a/src/components/material/Cards.vue
+++ b/src/components/material/Cards.vue
@@ -76,14 +76,14 @@ export default {
     border-radius: 10px;
 
     .headline {
-        font-size: 22px !important;
+        font-size: 18px !important;
         text-transform: uppercase !important;
         font-family: 'Montserrat-Regular' !important;
         line-height: 23px !important;
     }
 
     .subheading {
-        font-size: 14px !important;
+        font-size: 12px !important;
         color: #7b7b7b;
         font-family: 'Montserrat-Regular' !important;
 
@@ -111,12 +111,12 @@ export default {
 
         .headline {
             font-family: 'Montserrat-Light' !important;
-            font-size: 20px !important;
+            font-size: 18px !important;
             letter-spacing: 1px !important;
         }
 
         .subheading {
-            font-size: 12px !important;
+            font-size: 10px !important;
             font-family: 'Montserrat-Light' !important;
         }
     }
diff --git a/src/components/modal/label/Show.vue b/src/components/modal/label/Show.vue
index c5eedb0..fc936c5 100644
--- a/src/components/modal/label/Show.vue
+++ b/src/components/modal/label/Show.vue
@@ -51,7 +51,7 @@
                   <v-flex xs12 md12 sm12>
                     <div>
                       <v-flex xs6 md6 sm6 v-if="QRCodeimg">
-                        <a :href="'/Show/Package/'+data.package.id+''" target="_blank"><img :src="QRCodeimg" class="WM-Width-120"></a>
+                        <a :href="'/Show/Label/'+data.id+''" target="_blank"><img :src="QRCodeimg" class="WM-Width-120"></a>
                       </v-flex>
                     </div>
                   </v-flex>
diff --git a/src/components/modal/user/List.vue b/src/components/modal/user/List.vue
index 078a192..2ac0179 100644
--- a/src/components/modal/user/List.vue
+++ b/src/components/modal/user/List.vue
@@ -6,19 +6,20 @@
                     <v-flex xs12 md12 sm12>
                         <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" />
+                                <span class="subheading font-weight-light text-white text--darken-3"
+                                      v-text="header.text"/>
                             </template>
                             <template slot="items" slot-scope="{ item }">
-                                <tr :active="item.selected" @click="selectUser(item)" v-if="item.id !== getModalProperties.data.user_id">
-                                    <td>
+                                <tr :active="item.selected" @click="selectUser(item)"
+                                    v-if="item.id !== getModalProperties.data.user_id">
+                                    <td class="col-1">
                                         <v-checkbox :input-value="item.selected" primary hide-details/>
                                     </td>
-                                    <td class="headline font-weight-light">
+                                    <td class="headline">
                                         {{ item.name }}
-                                        <br>
-                                        <span class="WM-Font-14">{{ item.cell_number }}</span>
+                                        <p class="user-number">{{ item.cell_number }}</p>
                                     </td>
-                                    <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>
+                                    <!--                                    <td class="title font-weight-light">{{ $d(new Date(item.created_at), 'long') }}</td>-->
                                     <td class="title font-weight-light">
                                         <span v-for="(role, key) in item.roles" :key="key">{{ role.name }}</span>
                                     </td>
@@ -35,47 +36,36 @@
                     <v-pagination color="black" v-model="currentPage" :length="lastPage" :total-visible="6"/>
                 </div>
                 <v-layout row wrap align-center class="mt-3 justify-end mr-5">
-                    <v-btn type="submit" class="WM-CyanBlueGradient-BG ml-5 px-5">
-                        <v-icon class="black--text mr-2 caption">fas fa-check</v-icon>
-                        <span class="black--text">Submit</span>
-                    </v-btn>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="closeModal()">
+                            <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                            <span class="black--text">Back</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+                        <v-btn type="submit" class="WM-CyanBlueGradient-BG ml-5 px-5">
+                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                            <span class="white--text">Submit</span>
+                        </v-btn>
+                    </v-flex>
                 </v-layout>
             </v-form>
         </material-card>
     </v-container>
 </template>
 <script>
-import { mapGetters, mapMutations } from "vuex";
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {mapGetters, mapMutations, mapActions} from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+
 export default {
     data: () => ({
         headers: [
-            {
-                sortable: false,
-                text: "Select",
-                value: "selected"
-            },
-            {
-                sortable: true,
-                text: "Operator",
-                value: "name"
-            },
-            {
-                sortable: false,
-                text: "Date",
-                value: "date"
-            },
-            {
-                sortable: false,
-                text: "Role",
-                value: "role"
-            },
-            {
-                sortable: true,
-                text: "Hospital",
-                value: "hospital"
-            },
+            {sortable: false, text: "Select", value: "selected", width: "2%"},
+            {sortable: false, text: "Operator", value: "name", width: "50%"},
+            // {sortable: false, text: "Date", value: "date"},
+            {sortable: false, text: "Role", value: "role"},
+            {sortable: false, text: "Hospital", value: "hospital"},
         ],
         currentPage: 1,
         lastPage: 1,
@@ -86,6 +76,7 @@ export default {
         selected: {},
     }),
     methods: {
+        ...mapActions("myItems", ["transferItem"]),
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
         async load(page = 1) {
             let filter = "?";
@@ -108,7 +99,7 @@ export default {
                 this.currentPage = result.data.data.current_page;
                 this.lastPage = result.data.data.last_page;
             } else {
-                this.$router.push({ name: `Dashboard` });
+                this.$router.push({name: `Dashboard`});
             }
         },
         selectUser(item) {
@@ -121,16 +112,16 @@ export default {
             item.selected = !item.selected;
         },
         async transfer() {
-            let form = {
-                user_id: this.selected.id
-            }
-            const result = await ApiService.post(
-                urls.transferItem(this.getModalProperties.data.id),
-                form
-            );
-            if (result && result.status == 200) {
-                this.setResultModal(result.data.data);
+            try {
+                const result = await this.transferItem({
+                    itemId: this.getModalProperties.data.id,
+                    userId: this.selected.id,
+                    isUser:this.$hasRole('User')
+                });
+                this.setResultModal(result);
                 this.closeModal();
+            } catch (e) {
+                console.error("Transfer failed:", e);
             }
         }
     },
@@ -146,4 +137,21 @@ export default {
         this.load();
     },
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.headline{
+    font-size: 16px !important;
+    line-height: 22px !important;
+    font-family: "Montserrat-regular" !important;
+    font-weight: 600;
+
+    .user-number {
+        line-height: 12px;
+        font-size: 12px !important;
+        margin: 0!important;
+        font-weight: 300;
+        font-family: 'Montserrat-light' !important;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/store/modules/auth/actions.js b/src/store/modules/auth/actions.js
index 7635aa8..c866251 100644
--- a/src/store/modules/auth/actions.js
+++ b/src/store/modules/auth/actions.js
@@ -33,7 +33,6 @@ export default {
             commit('modal/changeCurrentModal', { modal: "modal-auth-verify-code" }, {root: true});
         }
     },
-    
 
     async verifyCodeSMS({commit, dispatch}, {form}) {
         var response = await ApiService.post(urls.sendVerifyCode, form);
diff --git a/src/store/modules/myItems/actions.js b/src/store/modules/myItems/actions.js
new file mode 100644
index 0000000..ae62a44
--- /dev/null
+++ b/src/store/modules/myItems/actions.js
@@ -0,0 +1,82 @@
+// import router from '@/router'
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+
+export default {
+    async loadMyItem({commit, state}, page = 1) {
+        try {
+            let filter = '?';
+            for (const key in state.filters) {
+                if (state.filters.hasOwnProperty(key)) {
+                    filter += `${key}=${state.filters[key]}&`;
+                }
+            }
+            filter += (page) ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(urls.listMyItem(filter));
+            if (result && result.status == 200) {
+                commit("SET_MY_ITEMS", result.data.data);
+                commit("SET_MY_ITEMS_CURRENT_PAGE", result.data.meta.current_page);
+                commit("SET_MY_ITEMS_LAST_PAGE", result.data.meta.last_page);
+            }
+
+            return result;
+        } catch (e) {
+            return e;
+        }
+    },
+
+    async showItem({commit}, id) {
+        const result = await ApiService.get(urls.showItem(id));
+        if (result && result.status == 200) {
+            commit("modal/changeCurrentModal", {
+                modal: "modal-item-show",
+                properties: {result},
+            }, {root: true});
+        }
+    },
+
+    async removeItem({commit, state}, id) {
+        const result = await ApiService.delete(urls.removeItem(id));
+        if (result && result.status == 200) {
+            const index = state.my_items.findIndex(item => item.id === id);
+            if (index !== -1) {
+                const newItems = [...state.my_items];
+                newItems.splice(index, 1);
+                commit("SET_MY_ITEMS", newItems);
+            }
+        }
+    },
+
+    async changeStatus({commit, state}, id) {
+        const result = await ApiService.post(urls.changeItemStatus(id));
+        if (result && result.status === 200) {
+            const updatedItems = state.my_items.map(item =>
+                item.id === id ? {...item, status: result.data.data.status} : item
+            );
+            commit("SET_MY_ITEMS", updatedItems);
+        }
+    },
+
+    async transferItem({commit, state}, {itemId, userId, isUser}) {
+        try {
+            const form = {user_id: userId};
+            const result = await ApiService.post(urls.transferItem(itemId), form);
+            if (result && result.status === 200) {
+                if (isUser) {
+                    const index = state.my_items.findIndex(item => item.id === itemId);
+                    if (index !== -1) {
+                        const newItems = [...state.my_items];
+                        newItems.splice(index, 1);
+                        commit("SET_MY_ITEMS", newItems);
+                    }
+                }
+                return result.data.data;
+            }
+        } catch (e) {
+            console.error("Transfer Error:", e);
+            throw e;
+        }
+    }
+
+
+}
diff --git a/src/store/modules/myItems/getters.js b/src/store/modules/myItems/getters.js
new file mode 100644
index 0000000..42c662a
--- /dev/null
+++ b/src/store/modules/myItems/getters.js
@@ -0,0 +1,6 @@
+export default {
+    getMyItems: state => state.my_items,
+    getCurrentPage: state => state.current_page,
+    getLastPage: state => state.last_page,
+    getFilters: state => state.filters
+}
diff --git a/src/store/modules/myItems/mutations.js b/src/store/modules/myItems/mutations.js
new file mode 100644
index 0000000..a045ba0
--- /dev/null
+++ b/src/store/modules/myItems/mutations.js
@@ -0,0 +1,26 @@
+export default {
+    SET_MY_ITEMS(state, items) {
+        state.my_items = items;
+    },
+
+    SET_MY_ITEMS_CURRENT_PAGE(state, currentPage) {
+        state.current_page = currentPage;
+    },
+
+    SET_MY_ITEMS_LAST_PAGE(state, lastPage) {
+        state.last_page = lastPage;
+    },
+    SET_FILTER(state, { key, value }) {
+        state.filters[key] = value;
+    },
+    RESET_FILTERS(state) {
+        state.filters = {
+            name: '',
+            size: '',
+            item_id: '',
+            medical_center_id: '',
+            udi: ''
+        };
+    }
+
+}
diff --git a/src/store/modules/myItems/state.js b/src/store/modules/myItems/state.js
new file mode 100644
index 0000000..74cf5c4
--- /dev/null
+++ b/src/store/modules/myItems/state.js
@@ -0,0 +1,13 @@
+export default {
+    my_items: [],
+    filters: {
+        name: '',
+        size: '',
+        item_id: '',
+        medical_center_id: '',
+        udi: ''
+    },
+    is_filtered: false,
+    current_page: 1,
+    last_page: 1,
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index db9ac84..e09c948 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -139,8 +139,8 @@ export default {
                     role: 'Admin|Supervisor|User'
                 },
                 {
-                    title: `<span>Add A </span><br/><span>Test Result</span>`,
-                    svg: `  <svg width="40" height="40" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add A </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">Test Result</span>`,
+                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_93_57)">
                                 <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
@@ -181,8 +181,8 @@ export default {
                     role: 'Admin|Supervisor|User'
                 },
                 {
-                    title: `<span>Add new </span><br/><span>item</span>`,
-                    svg: `  <svg width="40" height="40" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">item</span>`,
+                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_93_57)">
                                 <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
@@ -223,8 +223,8 @@ export default {
                     role: 'Admin|Supervisor|User'
                 },
                 {
-                    title: `<span>Add new </span><br/><span>Package</span>`,
-                    svg: `  <svg width="40" height="40" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">Package</span>`,
+                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_93_57)">
                                 <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
@@ -255,8 +255,8 @@ export default {
                     role: 'Admin|Supervisor|User'
                 },
                 {
-                    title: `<span>Add new </span><br/><span> label</span>`,
-                    svg: `  <svg width="40" height="40" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5"> label</span>`,
+                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_93_57)">
                                 <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
@@ -287,8 +287,8 @@ export default {
                     role: 'Admin|Supervisor|User'
                 },
                 {
-                    title: `<span>Add new </span><br/><span>cycle</span>`,
-                    svg: `  <svg width="40" height="40" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    title: `<span class="WM-Font-14 WM-LetterSpacing-5">Add new </span><br/><span class="WM-Font-14 WM-LetterSpacing-5">cycle</span>`,
+                    svg: `  <svg width="30" height="30" viewBox="0 0 777 777" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_93_57)">
                                 <path d="M17.5938 388.5H759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
                                 <path d="M388.5 17.5938V759.406" stroke="white" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/src/views/MedicalCenter/List.vue b/src/views/MedicalCenter/List.vue
index bd27752..b0751cb 100644
--- a/src/views/MedicalCenter/List.vue
+++ b/src/views/MedicalCenter/List.vue
@@ -114,7 +114,7 @@ export default {
         sortable: false,
         text: "Action",
         value: "action",
-        align: "right"
+        align: "right",
       }
     ],
     filter: {
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index c85d2f1..bccffd2 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -5,28 +5,29 @@
                 <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-text-field class="py-3 pr-3" v-model="getFilters.item_id" @input="updateFilter('item_id', getFilters.item_id)" label="Item ID" color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"/>
+                        <v-text-field class="py-3 pr-3" v-model="getFilters.name" @input="updateFilter('name', getFilters.name)" label="Name" color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl-3" v-if="$hasRole('Admin')">
                         <v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"/>
-                        <v-autocomplete class="py-3 pr-3" v-model="filter.medical_center_id" item-text="name" item-value="id"
+                        <v-autocomplete class="py-3 pr-3" v-model="getFilters.medical_center_id" item-text="name"
+                                        item-value="id" @input="updateFilter('medical_center_id', getFilters.medical_center_id)"
                                         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-text-field class="py-3 pr-3" v-model="getFilters.size" @input="updateFilter('size', getFilters.size)" label="Size" color="black"/>
                     </v-flex>
                     <v-flex xs12 sm4 md4 lg2 xl2 class="WM-FlexCenter pl3">
                         <v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"/>
-                        <v-text-field class="py-3 pr-3" v-model="filter.udi" label="UDI" color="black"/>
+                        <v-text-field class="py-3 pr-3" v-model="getFilters.udi" @input="updateFilter('udi', getFilters.udi)" label="UDI" color="black"/>
                     </v-flex>
                     <v-spacer/>
                     <v-flex class xs12 sm6 md6 lg2 xl1>
-                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="load()">
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 30px" @click="onFilterClick()">
                             <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
                             <span class="white--text">Filter</span>
                         </v-btn>
@@ -43,11 +44,12 @@
                 <v-layout class="px-4 my-3">
                     <v-divider/>
                 </v-layout>
-                <v-layout align-center wrap class="my-3 px-5">
+                <v-layout align-center wrap class="my-3 px-5" v-if="getMyItems">
                     <v-flex md12>
-                        <v-data-table :headers="headers" :items="items" hide-actions>
+                        <v-data-table :headers="headers" :items="getMyItems" hide-actions>
                             <template slot="headerCell" slot-scope="{ header }">
-                                <span class="subheading font-weight-light text-white text--darken-3" v-text="header.text"/>
+                                <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>
@@ -58,7 +60,8 @@
                                 <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-btn v-bind="attrs" v-on="on" color="cyan" class="mr-2"
+                                                   @click="showItem(item.id)">
                                                 <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                                 <span>Show</span>
                                             </v-btn>
@@ -88,7 +91,7 @@
                                     <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')">
+                                                   @click="removeItem(item.id)" v-if="$hasRole('Admin|Supervisor')">
                                                 <v-icon class="white--text mr-2 caption">fas fa-trash</v-icon>
                                                 <span>Remove</span>
                                             </v-btn>
@@ -119,18 +122,18 @@
 <script>
 import {ApiService} from "@/services";
 import {urls} from "@/config/urls";
-import {mapMutations, mapGetters} from "vuex";
+import {mapMutations, mapGetters, mapActions} from "vuex";
 import toast from "@/services/global/toast.service";
 
 export default {
     data: () => ({
         headers: [
             // {sortable: true,text: "ID",value: "id"},
-            {sortable: false, text: "Item ID", value: "id"},
+            {sortable: false, text: "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"}
+            {sortable: false, text: "Action", value: "action", align: "left",width:'20%'}
         ],
         filter: {
             name: '',
@@ -138,31 +141,28 @@ export default {
             item_id: '',
             medical_center_id: ''
         },
-        items: [],
-        currentPage: 1,
-        lastPage: 1,
         medicalCenters: []
 
     }),
-    created() {
-        this.load();
+    async created() {
+        this.loadMyItem();
+    },
+    computed: {
+        ...mapGetters('myItems', ["getFilters",'getMyItems','getCurrentPage','getLastPage']),
+        items(){ return this.getMyItems;},
+        currentPage(){ return this.getCurrentPage;},
+        lastPage(){ return this.getLastPage;},
     },
     methods: {
+        ...mapMutations('myItems',["SET_FILTER"]),
         ...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;
-            }
+        ...mapActions('myItems', ['loadMyItem', 'removeItem', 'showItem', 'generateBarcode']),
+        onFilterClick() {
+            this.loadMyItem();
+        },
+
+        updateFilter(key, value) {
+            this.SET_FILTER({ key, value });
         },
         async generateBarcode(item, type = null) {
             let code = item.udi;
@@ -178,45 +178,7 @@ export default {
                 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",
@@ -226,7 +188,7 @@ export default {
     },
     watch: {
         currentPage(page) {
-            this.load(page);
+            this.loadMyItem(page);
         },
     }
 };
diff --git a/src/views/TestResult/List.vue b/src/views/TestResult/List.vue
index 6463dea..f028adc 100644
--- a/src/views/TestResult/List.vue
+++ b/src/views/TestResult/List.vue
@@ -236,7 +236,7 @@ export default {
             sortable: false,
             text: "Action",
             value: "action",
-            align: "left"
+            align: "left",
         }
         ],
         filter: {
diff --git a/src/views/TestType/List.vue b/src/views/TestType/List.vue
index bdb64f3..37427d3 100644
--- a/src/views/TestType/List.vue
+++ b/src/views/TestType/List.vue
@@ -176,7 +176,7 @@ export default {
                 sortable: false,
                 text: "Action",
                 value: "action",
-                align: "right"
+                align: "right",
             }
         ],
         items: [],
diff --git a/src/views/Tickets/List.vue b/src/views/Tickets/List.vue
index b31509c..8f0558b 100644
--- a/src/views/Tickets/List.vue
+++ b/src/views/Tickets/List.vue
@@ -114,7 +114,7 @@ export default {
                 sortable: false,
                 text: "Action",
                 value: "action",
-                align: "left"
+                align: "left",
             }
         ],
         filter: {
diff --git a/src/views/User/List.vue b/src/views/User/List.vue
index 1647ee5..21f723d 100644
--- a/src/views/User/List.vue
+++ b/src/views/User/List.vue
@@ -170,7 +170,7 @@ export default {
                 sortable: false,
                 text: "Action",
                 value: "action",
-                align: "right"
+                align: "right",
             }
         ],
         filter: {