From 18c7c5ad216b07d01a6689925183a507ee1cf88a Mon Sep 17 00:00:00 2001
From: Ravi Lodhi <ravi.lodhi@hotwaxsystems.com>
Date: Thu, 26 Sep 2024 15:08:22 +0530
Subject: [PATCH] Implemented: Made download  rejected orders button functional
 (#715).

---
 src/components/RejectedOrdersFilters.vue | 208 +++----
 src/components/UsedReasonsModal.vue      | 164 +++---
 src/store/modules/rejection/actions.ts   |  66 ++-
 src/views/Rejections.vue                 | 676 ++++++++++++-----------
 4 files changed, 566 insertions(+), 548 deletions(-)

diff --git a/src/components/RejectedOrdersFilters.vue b/src/components/RejectedOrdersFilters.vue
index 9e33d5ff..b9b3a318 100644
--- a/src/components/RejectedOrdersFilters.vue
+++ b/src/components/RejectedOrdersFilters.vue
@@ -1,30 +1,50 @@
 <template>
-    <ion-menu side="end" type="overlay">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>{{ translate("Filters") }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
+  <ion-menu side="end" type="overlay">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ translate("Filters") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-select :label="translate('Duration')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionPeriodId" @ionChange="applyFilter($event['detail'].value, 'duration')">
+            <ion-select-option v-for="rejectionPeriod in rejectionPeriods" :key="rejectionPeriod.id" :value="rejectionPeriod.id">{{ rejectionPeriod.description }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item>
+          <ion-select :label="translate('Reason')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionReasons" :multiple="true" @ionChange="applyFilter($event['detail'].value, 'reason')">
+            <ion-select-option v-for="rejectionReason in rejectReasons" :key="rejectionReason.enumId" :value="rejectionReason.enumId">{{ rejectionReason.description ? rejectionReason.description : rejectionReason.enumId }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+</template>
   
-      <ion-content>
-        <ion-list>
-          <ion-item>
-            <ion-select :label="translate('Duration')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionPeriodId" @ionChange="applyFilter($event['detail'].value, 'duration')">
-              <ion-select-option v-for="rejectionPeriod in rejectionPeriods" :key="rejectionPeriod.id" :value="rejectionPeriod.id">{{ rejectionPeriod.description }}</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-item>
-            <ion-select :label="translate('Reason')" interface="popover" :placeholder="translate('Select')" :value="rejectedOrders.query.rejectionReasons" :multiple="true" @ionChange="applyFilter($event['detail'].value, 'reason')">
-              <ion-select-option v-for="rejectionReason in rejectReasons" :key="rejectionReason.enumId" :value="rejectionReason.enumId">{{ rejectionReason.description ? rejectionReason.description : rejectionReason.enumId }}</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-menu>
-  </template>
-  
-  <script lang="ts">
-  import {
+<script lang="ts">
+import {
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonList,
+  IonMenu,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { albumsOutline, banOutline, barChartOutline, calendarNumberOutline, checkmarkDoneOutline, closeOutline, filterOutline, iceCreamOutline, libraryOutline, pulseOutline, settings, shirtOutline, ticketOutline } from "ionicons/icons";
+import { mapGetters, useStore } from 'vuex'
+import { hasError } from '@/adapter';
+import logger from '@/logger';
+import { translate } from '@hotwax/dxp-components';
+
+export default defineComponent({
+  name: "TransferOrderFilters",
+  components: {
     IonContent,
     IonHeader,
     IonItem,
@@ -34,85 +54,65 @@
     IonSelectOption,
     IonTitle,
     IonToolbar
-  } from "@ionic/vue";
-  import { defineComponent } from "vue";
-  import { albumsOutline, banOutline, barChartOutline, calendarNumberOutline, checkmarkDoneOutline, closeOutline, filterOutline, iceCreamOutline, libraryOutline, pulseOutline, settings, shirtOutline, ticketOutline } from "ionicons/icons";
-  import { mapGetters, useStore } from 'vuex'
-  import { hasError } from '@/adapter';
-  import logger from '@/logger';
-  import { translate } from '@hotwax/dxp-components';
-  
-  export default defineComponent({
-    name: "TransferOrderFilters",
-    components: {
-      IonContent,
-      IonHeader,
-      IonItem,
-      IonList,
-      IonMenu,
-      IonSelect,
-      IonSelectOption,
-      IonTitle,
-      IonToolbar
-    },
-    props: ["queryString"],
-    data () {
-      return {
-        shipmentMethods: [] as Array<any>,
-        statuses: [] as Array<any>,
-        rejectionPeriods: [] as Array<any>
+  },
+  props: ["queryString"],
+  data () {
+    return {
+      shipmentMethods: [] as Array<any>,
+      statuses: [] as Array<any>,
+      rejectionPeriods: [] as Array<any>
+    }
+  },
+  computed: {
+    ...mapGetters({
+      rejectReasons: 'util/getRejectReasons',
+      rejectedOrders: 'rejection/getRejectedOrders',
+    })
+  },
+  async mounted() {
+    this.store.dispatch('util/fetchRejectReasons')
+    this.rejectionPeriods = [{"id": "LAST_TWENTY_FOUR_HOURS", "description": "Last 24 hours"}, {"id": "LAST_SEVEN_DAYS", "description": "Last 7 days"}]
+  },
+  unmounted() {
+    this.store.dispatch('rejection/clearRejectedOrdersFilters');
+  },
+  methods: {
+    async applyFilter(value: any, type: string) {
+      const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
+      rejectedOrdersQuery.viewIndex = 0;
+      if (type === "duration") {
+        rejectedOrdersQuery.rejectionPeriodId = value
+      } else if (type === "reason") {
+        rejectedOrdersQuery.rejectionReasons = value
       }
-    },
-    computed: {
-      ...mapGetters({
-        rejectReasons: 'util/getRejectReasons',
-        rejectedOrders: 'rejection/getRejectedOrders',
-      })
-    },
-    async mounted() {
-      this.store.dispatch('util/fetchRejectReasons')
-      this.rejectionPeriods = [{"id": "LAST_TWENTY_FOUR_HOURS", "description": "Last 24 hours"}, {"id": "LAST_SEVEN_DAYS", "description": "Last 7 days"}]
-    },
-    unmounted() {
-      this.store.dispatch('rejection/clearRejectedOrdersFilters');
-    },
-    methods: {
-      async applyFilter(value: any, type: string) {
-        const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
-        rejectedOrdersQuery.viewIndex = 0;
-        if (type === "duration") {
-          rejectedOrdersQuery.rejectionPeriodId = value
-        } else if (type === "reason") {
-          rejectedOrdersQuery.rejectionReasons = value
-        }
-        
-        await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
-        await this.store.dispatch('rejection/fetchRejectedOrders');
-        if (type === "duration") {
-          await this.store.dispatch('rejection/fetchRejectionStats')
-        }
-      },
-    },
-    setup() {
-      const store = useStore();
       
-      return {
-        albumsOutline,
-        banOutline,
-        barChartOutline,
-        calendarNumberOutline,
-        checkmarkDoneOutline,
-        closeOutline,
-        filterOutline,
-        iceCreamOutline,
-        libraryOutline,
-        pulseOutline,
-        settings,
-        shirtOutline,
-        store,
-        ticketOutline,
-        translate
-      };
+      await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
+      await this.store.dispatch('rejection/fetchRejectedOrders');
+      if (type === "duration") {
+        await this.store.dispatch('rejection/fetchRejectionStats')
+      }
     },
-  });
-  </script>
\ No newline at end of file
+  },
+  setup() {
+    const store = useStore();
+    
+    return {
+      albumsOutline,
+      banOutline,
+      barChartOutline,
+      calendarNumberOutline,
+      checkmarkDoneOutline,
+      closeOutline,
+      filterOutline,
+      iceCreamOutline,
+      libraryOutline,
+      pulseOutline,
+      settings,
+      shirtOutline,
+      store,
+      ticketOutline,
+      translate
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/UsedReasonsModal.vue b/src/components/UsedReasonsModal.vue
index da787ea3..8275eed1 100644
--- a/src/components/UsedReasonsModal.vue
+++ b/src/components/UsedReasonsModal.vue
@@ -1,86 +1,86 @@
 <template>
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-button @click="closeModal"> 
-            <ion-icon slot="icon-only" :icon="closeOutline" />
-          </ion-button>
-        </ion-buttons>
-        <ion-title>{{ translate("Used reasons") }}</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content>
-      <ion-list v-if="usedReasons.length">
-        <ion-item v-for="(reason, index) in usedReasons" :key="reason.enumId" :lines="usedReasons.length -1 === index ? 'none' : 'inset'">
-          <ion-label>
-            {{ reason.description }}
-            <p>{{ reason.enumTypeId }}</p>
-          </ion-label>
-          <ion-note slot="end"> {{ reason.count }}</ion-note>
-        </ion-item>
-      </ion-list>
-      <div class="empty-state" v-else>
-        <p>{{ translate("No reasons found.") }}</p>
-      </div>
-    </ion-content>
-  </template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Used reasons") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list v-if="usedReasons.length">
+      <ion-item v-for="(reason, index) in usedReasons" :key="reason.enumId" :lines="usedReasons.length -1 === index ? 'none' : 'inset'">
+        <ion-label>
+          {{ reason.description }}
+          <p>{{ reason.enumTypeId }}</p>
+        </ion-label>
+        <ion-note slot="end"> {{ reason.count }}</ion-note>
+      </ion-item>
+    </ion-list>
+    <div class="empty-state" v-else>
+      <p>{{ translate("No reasons found.") }}</p>
+    </div>
+  </ion-content>
+</template>
+
+<script>
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonTitle,
+  IonToolbar,
+  modalController } from "@ionic/vue";
+import { computed, defineComponent } from "vue";
+import { mapGetters } from 'vuex';
+import { closeOutline, pricetag } from "ionicons/icons";
+import { getProductIdentificationValue, translate, useProductIdentificationStore } from '@hotwax/dxp-components';
   
-  <script>
-  import { 
-    IonButtons,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonNote,
-    IonTitle,
-    IonToolbar,
-    modalController } from "@ionic/vue";
-  import { computed, defineComponent } from "vue";
-  import { mapGetters } from 'vuex';
-  import { closeOutline, pricetag } from "ionicons/icons";
-  import { getProductIdentificationValue, translate, useProductIdentificationStore } from '@hotwax/dxp-components';
-    
-  
-  export default defineComponent({
-    name: "RejectedItemsModal",
-    components: { 
-        IonButtons,
-        IonButton,
-        IonContent,
-        IonHeader,
-        IonIcon,
-        IonItem,
-        IonLabel,
-        IonNote,
-        IonTitle,
-        IonToolbar
-    },
-    computed: {
-      ...mapGetters({
-        usedReasons: 'rejection/getUsedReasons',
-      })
-    },
-    methods: {
-      closeModal() {
-        modalController.dismiss({ dismissed: true });
-      },
-    },
-    setup() {
-      const productIdentificationStore = useProductIdentificationStore();
-      let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
-  
-      return {
-        closeOutline,
-        pricetag,
-        productIdentificationPref,
-        productIdentificationStore,
-        getProductIdentificationValue,
-        translate
-      };
+
+export default defineComponent({
+  name: "RejectedItemsModal",
+  components: { 
+      IonButtons,
+      IonButton,
+      IonContent,
+      IonHeader,
+      IonIcon,
+      IonItem,
+      IonLabel,
+      IonNote,
+      IonTitle,
+      IonToolbar
+  },
+  computed: {
+    ...mapGetters({
+      usedReasons: 'rejection/getUsedReasons',
+    })
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
     },
-  });
-  </script>
+  },
+  setup() {
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
+    return {
+      closeOutline,
+      pricetag,
+      productIdentificationPref,
+      productIdentificationStore,
+      getProductIdentificationValue,
+      translate
+    };
+  },
+});
+</script>
   
\ No newline at end of file
diff --git a/src/store/modules/rejection/actions.ts b/src/store/modules/rejection/actions.ts
index d9e61a77..dfd6d697 100644
--- a/src/store/modules/rejection/actions.ts
+++ b/src/store/modules/rejection/actions.ts
@@ -10,7 +10,7 @@ import logger from '@/logger'
 
 const actions: ActionTree<RejectionState, RootState> = {
   async fetchRejectionStats({ commit, state }) {
-    let rejectionReasons = [] as any, rejectedItems = [] as any, total = 0
+    let usedRejectionReasons = [] as any, rejectedItems = [] as any, total = 0
 
     const rejectedOrderQuery = JSON.parse(JSON.stringify(state.rejectedOrders.query))
     
@@ -49,7 +49,7 @@ const actions: ActionTree<RejectionState, RootState> = {
       try {
         const resp = await RejectionService.fetchRejectionStats(query);
         if (!hasError(resp)) {
-          total = resp.data.facets.total
+          total = resp.data.facets.total ? resp.data.facets.total : 0
           const usedReasons = resp.data.facets.rejectionReasonIdFacet.buckets
           rejectedItems = resp.data.facets.prodductIdFacet.buckets
           if (rejectedItems) {
@@ -77,8 +77,8 @@ const actions: ActionTree<RejectionState, RootState> = {
                 reasonDetail[reason.val.trim().toUpperCase()] = reason;
                 return reasonDetail;
               }, {});
-              rejectionReasons = resp.data.docs
-              rejectionReasons.map((rejectionReason: any) => {
+              usedRejectionReasons = resp.data.docs
+              usedRejectionReasons.map((rejectionReason: any) => {
                 rejectionReason.count = reasonCountDetail[rejectionReason.enumId]?.count
               })
             } else {
@@ -91,16 +91,29 @@ const actions: ActionTree<RejectionState, RootState> = {
       } catch(err) {
         logger.error('Failed to fetch rejection stats.', err)
       }
-    commit(types.REJECTION_STATS_UPDATED, { rejectedItems, rejectionReasons, total})
+    commit(types.REJECTION_STATS_UPDATED, { rejectedItems, usedReasons: usedRejectionReasons, total })
   },
 
   async fetchRejectedOrders({ commit, dispatch, state }, payload) {
     let orders = [] as any, orderList = [] as any, total = 0
     const rejectedOrderQuery = JSON.parse(JSON.stringify(state.rejectedOrders.query))
     
-    let rejectionPeriodFilter = "[NOW-24HOURS TO NOW]"
-    if (rejectedOrderQuery.rejectionPeriodId === 'LAST_SEVEN_DAYS') {
-      rejectionPeriodFilter = "[NOW-7DAYS TO NOW]"
+    
+
+    const filters = {
+      rejectedFrom_txt_en: { value: escapeSolrSpecialChars(this.state.user.currentFacility.facilityId) },
+    } as any
+
+    //when user search the rejected results are not bound to time duration
+    if (!rejectedOrderQuery.queryString) {
+      let rejectionPeriodFilter = "[NOW-24HOURS TO NOW]"
+      if (rejectedOrderQuery.rejectionPeriodId === 'LAST_SEVEN_DAYS') {
+        rejectionPeriodFilter = "[NOW-7DAYS TO NOW]"
+      }
+      filters.rejectedAt_dt = {value: rejectionPeriodFilter}
+    }
+    if (rejectedOrderQuery.rejectionReasons.length) {
+      filters.rejectionReasonId_txt_en = {value: rejectedOrderQuery.rejectionReasons}
     }
 
     const query = prepareSolrQuery({
@@ -113,11 +126,7 @@ const actions: ActionTree<RejectionState, RootState> = {
       sort: 'rejectedAt_dt desc',
       isGroupingRequired: true,
       groupBy: 'orderId_s',
-      filters: {
-        rejectedAt_dt: {value: rejectionPeriodFilter},
-        rejectionReasonId_txt_en: {value: rejectedOrderQuery.rejectionReasons},
-        rejectedFrom_txt_en: { value: escapeSolrSpecialChars(this.state.user.currentFacility.facilityId) },
-      }
+      filters
     })
 
     try {
@@ -152,18 +161,17 @@ const actions: ActionTree<RejectionState, RootState> = {
         });
         
         if (rejectedOrderQuery.viewIndex && rejectedOrderQuery.viewIndex > 0) orderList = JSON.parse(JSON.stringify(state.rejectedOrders.list)).concat(orders)
-        } else {
-      throw resp.data;
+      } else {
+          throw resp.data;
+      }
+    } catch(err) {
+      logger.error('Failed to fetch rejected orders.', err)
     }
-  } catch(err) {
-    logger.error('Failed to fetch rejected orders.', err)
-  }
-  console.log("=======orderList===", orderList);
-  commit(types.REJECTION_ORDERS_UPDATED, { list: orderList.length > 0 ? orderList : orders, total})
-  if () {
-    dispatch("fetchRejectedOrdersDetail", { orderIds: orders.map((order:any) =>  order.orderId)})
-  }
-},
+    commit(types.REJECTION_ORDERS_UPDATED, { list: orderList.length > 0 ? orderList : orders, total})
+    if (orderList) {
+      dispatch("fetchRejectedOrdersDetail", { orderIds: orders.map((order:any) =>  order.orderId)})
+    }
+  },
 
   async fetchRejectedOrdersDetail ({ commit, dispatch, state }, payload) {
     let resp, orders = [];
@@ -180,7 +188,7 @@ const actions: ActionTree<RejectionState, RootState> = {
         viewIndex: 0,
         viewSize: orderIds.length,
         sort: 'orderDate asc',
-        fieldsToSelect: "orderId customerId customerName orderDate orderName reservedDatetime shipmentMethodTypeId shipmentMethodTypeDesc",
+        fieldsToSelect: "orderId customerPartyId customerPartyName orderDate orderName reservedDatetime shipmentMethodTypeId shipmentMethod",
         isGroupingRequired: true,
         groupBy: 'orderId',
         groupLimit: 1,
@@ -202,13 +210,13 @@ const actions: ActionTree<RejectionState, RootState> = {
         rejectedOrders.map((rejectedOrder: any) => {
           if (orderIds.includes(rejectedOrder.orderId)) {
             const detail = orderDetails[rejectedOrder.orderId]
-            rejectedOrder.customerId = detail.customerId
-            rejectedOrder.customerName = detail.customerName
+            rejectedOrder.customerId = detail.customerPartyId
+            rejectedOrder.customerName = detail.customerPartyName
             rejectedOrder.orderDate = detail.orderDate
             rejectedOrder.orderName = detail.orderName
             rejectedOrder.reservedDatetime = detail.reservedDatetime
             rejectedOrder.shipmentMethodTypeId = detail.shipmentMethodTypeId
-            rejectedOrder.shipmentMethodTypeDesc = detail.shipmentMethodTypeDesc
+            rejectedOrder.shipmentMethod = detail.shipmentMethod
           }
         })
 
@@ -224,6 +232,8 @@ const actions: ActionTree<RejectionState, RootState> = {
 
   async updateRejectedOrderQuery({ commit, dispatch }, payload) {
     commit(types.REJECTION_ORDER_QUERY_UPDATED, payload)
+    await dispatch('fetchRejectionStats')
+    await dispatch('fetchRejectedOrders');
   },
   async clearRejectedOrdersFilters ({ commit }) {
     commit(types.REJECTION_ORDER_QUERY_CLEARED, )
diff --git a/src/views/Rejections.vue b/src/views/Rejections.vue
index 272d5858..30acfe74 100644
--- a/src/views/Rejections.vue
+++ b/src/views/Rejections.vue
@@ -1,173 +1,214 @@
 <template>
-    <ion-page>
-      <RejectedOrdersFilters menu-id="rejected-orders-filters" content-id="rejected-orders-filters" :queryString="rejectedOrders.query.queryString" />
-    
-      <ion-header :translucent="true">
-        <ion-toolbar>
-          <ion-menu-button menu="start" slot="start" />
-          <ion-title>{{ translate("Rejections") }}</ion-title>
-          <ion-buttons slot="end">
-            <ion-menu-button menu="rejected-orders-filters">
-              <ion-icon :icon="filterOutline" />
-            </ion-menu-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
+  <ion-page>
+    <RejectedOrdersFilters menu-id="rejected-orders-filters" content-id="rejected-orders-filters" :queryString="rejectedOrders.query.queryString" />
   
-      <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="rejected-orders-filters">
-        <div class="rejection-summary">
-          <ion-card>
-            <ion-item lines="none">
-              <ion-label class="rejection-count">
-                {{ rejectedOrders.total }}
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-menu-button menu="start" slot="start" />
+        <ion-title>{{ translate("Rejections") }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button menu="rejected-orders-filters">
+            <ion-icon :icon="filterOutline" />
+          </ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+  
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="rejected-orders-filters">
+      <div class="rejection-summary">
+        <ion-card>
+          <ion-item lines="none">
+            <ion-label class="rejection-count">
+              {{ rejectionStats.total }}
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-select :label="translate('Rejections')" interface="popover" :value="rejectedOrders.query.rejectionPeriodId" @ionChange="updateRejectionPeriod($event['detail'].value)">
+              <ion-select-option v-for="rejectionPeriod in rejectionPeriods" :key="rejectionPeriod.id" :value="rejectionPeriod.id">{{ rejectionPeriod.description }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-card>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>
+              {{ translate("Most rejected items") }}
+            </ion-card-title>
+            <ion-button :disabled="!getMostRejectedItems().length" @click="showAllRejectedItemsModal()" fill="clear">
+              {{ translate('View All') }}
+            </ion-button>
+          </ion-card-header>
+          <ion-list v-if="getMostRejectedItems().length">
+            <ion-item v-for="(item, index) in getMostRejectedItems()" :key="item.val" :lines="getMostRejectedItems().length -1 === index ? 'none' : 'inset'">
+              <ion-thumbnail slot="start">
+                <DxpShopifyImg :src="getProduct(item.val).mainImageUrl" size="small"/>
+              </ion-thumbnail>
+              <ion-label>
+                <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.val)) }}</p>
+                {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.val)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.val)) : item.val }}
               </ion-label>
+              <ion-note slot="end">{{ item.count }}</ion-note>
             </ion-item>
-            <ion-item>
-              <ion-select :label="translate('Rejections')" interface="popover" :value="rejectedOrders.query.rejectionPeriodId" @ionChange="updateRejectionPeriod($event['detail'].value)">
-                <ion-select-option v-for="rejectionPeriod in rejectionPeriods" :key="rejectionPeriod.id" :value="rejectionPeriod.id">{{ rejectionPeriod.description }}</ion-select-option>
-              </ion-select>
+          </ion-list>
+          <div class="empty-state" v-else>
+            <p>{{ translate("No items found.") }}</p>
+          </div>
+        </ion-card>
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>
+              {{ translate("Most used reasons") }}
+            </ion-card-title>
+            <ion-button :disabled="!getMostUsedReasons().length"  @click="showAllReasonsModal()" fill="clear">
+              {{ translate('View All') }}
+            </ion-button>
+          </ion-card-header>
+          <ion-list v-if="getMostUsedReasons().length">
+            <ion-item v-for="(reason, index) in getMostUsedReasons()" :key="reason.enumId" :lines="getMostUsedReasons().length -1 === index ? 'none' : 'inset'">
+              <ion-label>
+                {{ reason.description }}
+                <p>{{ reason.enumTypeId }}</p>
+              </ion-label>
+              <ion-note slot="end"> {{ reason.count }}</ion-note>
             </ion-item>
-          </ion-card>
-          <ion-card>
-            <ion-list>
-              <ion-list-header color="light">
-                <ion-label>{{ translate('Most rejected items') }}</ion-label>
-                <ion-button :disabled="!getMostRejectedItems().length" @click="showAllRejectedItemsModal()">
-                  {{ translate('View All') }}
-                </ion-button>
-              </ion-list-header>
-              <template v-if="getMostRejectedItems().length">
-                <ion-item v-for="(item, index) in getMostRejectedItems()" :key="item.val" :lines="getMostRejectedItems().length -1 === index ? 'none' : 'inset'">
-                  <ion-thumbnail slot="start">
-                    <DxpShopifyImg :src="getProduct(item.val).mainImageUrl" size="small"/>
-                  </ion-thumbnail>
-                  <ion-label>
-                    <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.val)) }}</p>
-                    {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.val)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.val)) : item.val }}
-                  </ion-label>
-                  <ion-note slot="end">{{ item.count }}</ion-note>
-                </ion-item>
-              </template>
-              <div class="empty-state" v-else>
-                <p>{{ translate("No items found.") }}</p>
-              </div>
-            </ion-list>
-          </ion-card>
-          <ion-card>
-            <ion-list>
-              <ion-list-header color="light">
-                <ion-label>{{ translate('Most used reasons') }}</ion-label>
-                <ion-button :disabled="!getMostUsedReasons().length"  @click="showAllReasonsModal()">
-                  {{ translate('View All') }}
-                </ion-button>
-              </ion-list-header>
-              <template v-if="getMostUsedReasons().length">
-                <ion-item v-for="(reason, index) in getMostUsedReasons()" :key="reason.enumId" :lines="getMostUsedReasons().length -1 === index ? 'none' : 'inset'">
-                  <ion-label>
-                    {{ reason.description }}
-                    <p>{{ reason.enumTypeId }}</p>
-                  </ion-label>
-                  <ion-note slot="end"> {{ reason.count }}</ion-note>
-                </ion-item>
-              </template>
-              <div class="empty-state" v-else>
-                <p>{{ translate("No reasons found.") }}</p>
-              </div>
-            </ion-list>
-          </ion-card>
-        </div>
-            
-        <div class="rejection-search">
-          <ion-searchbar class="searchbar" :placeholder="translate('Search orders')" v-model="queryString" @keyup.enter="updateQueryString($event.target.value)"/>
-            <ion-label>
-            {{ rejectedOrders.total }} {{translate("rejections") }}
-          </ion-label>
+          </ion-list>
+          <div class="empty-state" v-else>
+            <p>{{ translate("No reasons found.") }}</p>
+          </div>
+        </ion-card>
+      </div>
           
-          <ion-button expand="block" fill="outline" @click="downloadRejections()" class="ion-margin-end">
-            <ion-icon slot="end" :icon="cloudDownloadOutline" />{{ translate("Download rejections") }}
-          </ion-button>
-        </div>
-            <ion-card class="order" v-for="order in rejectedOrders.list" :key="order.orderId">
-              <div class="order-header">
-                <div class="order-primary-info">
-                  <ion-label>
-                    <strong>{{ order.customerName }}</strong>
-                    <p>{{ translate("Ordered") }} {{ formatUtcDate(order.orderDate, 'dd MMMM yyyy t a ZZZZ') }}</p>
-                  </ion-label>
-                </div>
+      <div class="rejection-search">
+        <ion-searchbar class="searchbar" :placeholder="translate('Search orders')" v-model="queryString" @keyup.enter="updateQueryString($event.target.value)"/>
+        <ion-label>
+          {{ rejectedOrders.total }} {{translate("rejections") }}
+        </ion-label>
+        
+        <ion-button :disabled="!rejectedOrders.list.length" expand="block" fill="outline" @click="downloadRejections()" class="ion-margin-end">
+          <ion-icon slot="end" :icon="cloudDownloadOutline" />{{ translate("Download rejections") }}
+        </ion-button>
+      </div>
+      <ion-card class="order" v-for="order in rejectedOrders.list" :key="order.orderId">
+        <div class="order-header">
+          <div class="order-primary-info">
+            <ion-label>
+              <strong>{{ order.customerName }}</strong>
+              <p>{{ translate("Ordered") }} {{ formatUtcDate(order.orderDate, 'dd MMMM yyyy t a ZZZZ') }}</p>
+            </ion-label>
+          </div>
 
-                <div class="order-tags">
-                  <ion-chip outline>
-                    <ion-icon :icon="pricetagOutline" />
-                    <ion-label>{{ order.orderId }}</ion-label>
-                  </ion-chip>
-                </div>
+          <div class="order-tags">
+            <ion-chip outline>
+              <ion-icon :icon="pricetagOutline" />
+              <ion-label>{{ order.orderId }}</ion-label>
+            </ion-chip>
+          </div>
 
-                <div class="order-metadata">
-                  <ion-label>
-                    {{ order.shipmentMethodTypeDesc }}
-                    <p v-if="order.reservedDatetime">{{ translate("Last brokered") }} {{ formatUtcDate(order.reservedDatetime, 'dd MMMM yyyy t a ZZZZ') }}</p>
-                  </ion-label>
-                </div>
-              </div>
-              <div v-for="item in order.items" :key="item.orderItemSeqId" class="order-line-item">
-                <div class="rejected-order-item">
-                  <div class="product-info">
-                    <ion-item lines="none">
-                      <ion-thumbnail slot="start">
-                        <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
-                      </ion-thumbnail>
-                      <ion-label>
-                        <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
-                        {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : item.productName }}
-                      </ion-label>
-                    </ion-item>
-                  </div>
-                  <div>
-                    <ion-item lines="none">
-                      <ion-label>
-                        {{ formatUtcDate(item.rejectedAt, 'dd MMMM yyyy t a ZZZZ')}}
-                        <p>{{ translate('rejected time') }}</p>
-                      </ion-label>
-                    </ion-item>
-                  </div>
-                  <div>
-                    <ion-item lines="none">
-                      <ion-label lines="none">
-                        {{ item.availableToPromise}}
-                        <p>{{ translate('ATP') }}</p>
-                      </ion-label>
-                    </ion-item>
-                  </div>
-                  <div>
-                    <ion-item lines="none">
-                      <ion-label>
-                        {{ item.rejectionReasonDesc }}
-                        <p>{{ translate('rejection reason') }}</p>
-                      </ion-label>
-                    </ion-item>
-                  </div>
-                  <div>
-                    <ion-chip outline>
-                      <ion-icon :icon="personCircleOutline" />
-                      <ion-label>{{ item.rejectedBy }}</ion-label>
-                    </ion-chip>
-                  </div>
-                </div>
-              </div>
-            </ion-card>
-            <ion-infinite-scroll @ionInfinite="loadMoreRejectedOrders($event)" threshold="100px"  v-show="isRejectedOrdersScrollable()" ref="infiniteScrollRef">
-              <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
-            </ion-infinite-scroll>
-      </ion-content>
-    </ion-page>
-  </template>
+          <div class="order-metadata">
+            <ion-label>
+              {{ order.shipmentMethod }}
+              <p v-if="order.reservedDatetime">{{ translate("Last brokered") }} {{ formatUtcDate(order.reservedDatetime, 'dd MMMM yyyy t a ZZZZ') }}</p>
+            </ion-label>
+          </div>
+        </div>
+        <div v-for="item in order.items" :key="item.orderItemSeqId" class="order-line-item">
+          <div class="rejected-order-item">
+            <div class="product-info">
+              <ion-item lines="none">
+                <ion-thumbnail slot="start">
+                  <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
+                </ion-thumbnail>
+                <ion-label>
+                  <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
+                  {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : item.productName }}
+                </ion-label>
+              </ion-item>
+            </div>
+            <div>
+              <ion-item lines="none">
+                <ion-label>
+                  {{ formatUtcDate(item.rejectedAt, 'dd MMMM yyyy t a ZZZZ')}}
+                  <p>{{ translate('rejected time') }}</p>
+                </ion-label>
+              </ion-item>
+            </div>
+            <div>
+              <ion-item lines="none">
+                <ion-label lines="none">
+                  {{ item.availableToPromise}}
+                  <p>{{ translate('ATP') }}</p>
+                </ion-label>
+              </ion-item>
+            </div>
+            <div>
+              <ion-item lines="none">
+                <ion-label>
+                  {{ item.rejectionReasonDesc }}
+                  <p>{{ translate('rejection reason') }}</p>
+                </ion-label>
+              </ion-item>
+            </div>
+            <div>
+              <ion-chip outline>
+                <ion-icon :icon="personCircleOutline" />
+                <ion-label>{{ item.rejectedBy }}</ion-label>
+              </ion-chip>
+            </div>
+          </div>
+        </div>
+      </ion-card>
+      <ion-infinite-scroll @ionInfinite="loadMoreRejectedOrders($event)" threshold="100px"  v-show="isRejectedOrdersScrollable()" ref="infiniteScrollRef">
+        <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-page>
+</template>
   
-  <script lang="ts">
-  import {
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonChip,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonMenuButton,
+  IonNote,
+  IonPage,
+  IonSearchbar,
+  IonSelect,
+  IonSelectOption,
+  IonThumbnail,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+import { computed, defineComponent } from 'vue';
+import { addOutline, caretDownOutline, cloudDownloadOutline, ellipsisVerticalOutline, filterOutline, personCircleOutline, pricetagOutline } from 'ionicons/icons';
+import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore, useUserStore } from '@hotwax/dxp-components';
+import { mapGetters, useStore } from 'vuex';
+import { formatUtcDate, jsonToCsv } from '@/utils';
+import RejectedItemsModal from '@/components/RejectedItemsModal.vue';
+import UsedReasonsModal from '@/components/UsedReasonsModal.vue';
+import RejectedOrdersFilters from '@/components/RejectedOrdersFilters.vue'
+import { DateTime } from 'luxon';
+
+export default defineComponent({
+  name: 'Rejections',
+  components: {
+    DxpShopifyImg,
     IonButton,
     IonButtons,
     IonCard,
+    IonCardHeader,
+    IonCardTitle,
     IonChip,
     IonContent,
     IonHeader,
@@ -177,7 +218,6 @@
     IonItem,
     IonLabel,
     IonList,
-    IonListHeader,
     IonMenuButton,
     IonNote,
     IonPage,
@@ -187,194 +227,162 @@
     IonThumbnail,
     IonTitle,
     IonToolbar,
-    modalController
-  } from '@ionic/vue';
-  import { computed, defineComponent } from 'vue';
-  import { addOutline, caretDownOutline, cloudDownloadOutline, ellipsisVerticalOutline, filterOutline, personCircleOutline, pricetagOutline } from 'ionicons/icons';
-  import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components';
-  import { mapGetters, useStore } from 'vuex';
-  import { formatUtcDate } from '@/utils';
-  import RejectedItemsModal from '@/components/RejectedItemsModal.vue';
-  import UsedReasonsModal from '@/components/UsedReasonsModal.vue';
-  import RejectedOrdersFilters from '@/components/RejectedOrdersFilters.vue'
-
-  export default defineComponent({
-    name: 'Rejections',
-    components: {
-      DxpShopifyImg,
-      IonButton,
-      IonButtons,
-      IonCard,
-      IonChip,
-      IonContent,
-      IonHeader,
-      IonIcon,
-      IonInfiniteScroll,
-      IonInfiniteScrollContent,
-      IonItem,
-      IonLabel,
-      IonList,
-      IonListHeader,
-      IonMenuButton,
-      IonNote,
-      IonPage,
-      IonSearchbar,
-      IonSelect,
-      IonSelectOption,
-      IonThumbnail,
-      IonTitle,
-      IonToolbar,
-      RejectedOrdersFilters
+    RejectedOrdersFilters
+  },
+  data() {
+    return {
+      queryString: '',
+      rejectionPeriods: [] as any,
+      searchedQuery: '',
+      isScrollingEnabled: false,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      rejectionStats: 'rejection/getRejectedStats',
+      getProduct: 'product/getProduct',
+      rejectedOrders: 'rejection/getRejectedOrders',
+      currentFacility: 'user/getCurrentFacility',
+    })
+  },
+  async ionViewWillEnter() {
+    this.rejectionPeriods = [{"id": "LAST_TWENTY_FOUR_HOURS", "description": "Last 24 hours"}, {"id": "LAST_SEVEN_DAYS", "description": "Last 7 days"}]
+    this.isScrollingEnabled = false;
+    await this.initialiseRejectedOrderQuery();
+  },
+  
+  methods: {
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
+    isRejectedOrdersScrollable() {
+      return ((this.rejectedOrders.query?.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any)) <  this.rejectedOrders.query?.viewSize;
+    },
+    async initialiseRejectedOrderQuery() {
+      const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
+      rejectedOrdersQuery.viewIndex = 0 //If the size changes, list index should be reintialised
+      rejectedOrdersQuery.viewSize = process.env.VUE_APP_VIEW_SIZE
+      await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
     },
-    data() {
-      return {
-        queryString: '',
-        rejectionPeriods: [] as any,
-        searchedQuery: '',
-        isScrollingEnabled: false,
+    async loadMoreRejectedOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if (!(this.isScrollingEnabled && this.isRejectedOrdersScrollable())) {
+        await event.target.complete();
       }
+      const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
+      rejectedOrdersQuery.viewIndex = this.rejectedOrders.list?.length / (process.env.VUE_APP_VIEW_SIZE as any);
+      await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
+      event.target.complete();
     },
-    computed: {
-      ...mapGetters({
-        rejectionStats: 'rejection/getRejectedStats',
-        getProduct: 'product/getProduct',
-        rejectedOrders: 'rejection/getRejectedOrders',
-        currentFacility: 'user/getCurrentFacility',
-      })
+    getMostUsedReasons() {
+      return this.rejectionStats.usedReasons && this.rejectionStats.usedReasons.length >=3 ? this.rejectionStats.usedReasons.slice(0, 3) : this.rejectionStats.usedReasons;
     },
-    async ionViewWillEnter() {
-      this.rejectionPeriods = [{"id": "LAST_TWENTY_FOUR_HOURS", "description": "Last 24 hours"}, {"id": "LAST_SEVEN_DAYS", "description": "Last 7 days"}]
-      this.isScrollingEnabled = false;
-      await this.initialiseRejectedOrderQuery();
+    getMostRejectedItems() {
+      return this.rejectionStats.rejectedItems && this.rejectionStats.rejectedItems.length >=3 ? this.rejectionStats.rejectedItems.slice(0, 3) : this.rejectionStats.rejectedItems;
     },
-    
-    methods: {
-      enableScrolling() {
-        const parentElement = (this as any).$refs.contentRef.$el
-        const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
-        let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
-        const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
-        if(distanceFromInfinite < 0) {
-          this.isScrollingEnabled = false;
-        } else {
-          this.isScrollingEnabled = true;
-        }
-      },
-      isRejectedOrdersScrollable() {
-        return ((this.rejectedOrders.query?.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any)) <  this.rejectedOrders.query?.viewSize;
-      },
-      async initialiseRejectedOrderQuery() {
-        const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
-        rejectedOrdersQuery.viewIndex = 0 // If the size changes, list index should be reintialised
-        rejectedOrdersQuery.viewSize = process.env.VUE_APP_VIEW_SIZE
-        await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
-        await this.store.dispatch('rejection/fetchRejectionStats')
-      },
-      async loadMoreRejectedOrders(event: any) {
-        // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
-        if (!(this.isScrollingEnabled && this.isRejectedOrdersScrollable())) {
-          await event.target.complete();
-        }
-        const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
-        rejectedOrdersQuery.viewIndex = this.rejectedOrders.list?.length / (process.env.VUE_APP_VIEW_SIZE as any);
-        await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
-        event.target.complete();
-      },
-      async fetchRejectionsStats() {
-        await this.store.dispatch('rejection/fetchRejectionStats')
-      },
-      getMostUsedReasons() {
-        return this.rejectionStats.usedReasons && this.rejectionStats.usedReasons.length >=3 ? this.rejectionStats.usedReasons.slice(0, 3) : this.rejectionStats.usedReasons;
-      },
-      getMostRejectedItems() {
-        return this.rejectionStats.rejectedItems && this.rejectionStats.rejectedItems.length >=3 ? this.rejectionStats.rejectedItems.slice(0, 3) : this.rejectionStats.rejectedItems;
-      },
-      async showAllRejectedItemsModal() {
-        const rejectedItemsModal = await modalController.create({
-          component: RejectedItemsModal
-        });
-        return rejectedItemsModal.present();
-      },
-      async showAllReasonsModal() {
-        const rejectedReasonsModal = await modalController.create({
-          component: UsedReasonsModal
-        });
-        return rejectedReasonsModal.present();
-      },
-      downloadRejections() {
-        //logic here
-      },
-      async updateRejectionPeriod(rejectionPeriodId: string) {
-        const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
-        rejectedOrdersQuery.rejectionPeriodId = rejectionPeriodId
-        await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
-        await this.store.dispatch('rejection/fetchRejectionStats')
-        await this.store.dispatch('rejection/fetchRejectedOrders');
-      },
-      async updateQueryString(queryString: string) {
-        const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
+    async showAllRejectedItemsModal() {
+      const rejectedItemsModal = await modalController.create({
+        component: RejectedItemsModal
+      });
+      return rejectedItemsModal.present();
+    },
+    async showAllReasonsModal() {
+      const rejectedReasonsModal = await modalController.create({
+        component: UsedReasonsModal
+      });
+      return rejectedReasonsModal.present();
+    },
+    async downloadRejections() {
+      const allRejectedItems = this.rejectedOrders.list.map((order:any) => order.items).flat();
+      const fileName = `RejectedOrders-${this.currentFacility.facilityId}-${DateTime.now().toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)}.csv`
 
-        rejectedOrdersQuery.viewIndex = 0
-        rejectedOrdersQuery.viewSize = process.env.VUE_APP_VIEW_SIZE
-        rejectedOrdersQuery.queryString = queryString
-        await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
-        await this.store.dispatch('rejection/fetchRejectedOrders');
-        this.searchedQuery = queryString;
-      },
-      getErrorMessage() {
-      return this.searchedQuery === '' ? translate("doesn't have any rejected orders right now.", { facilityName: this.currentFacility.facilityName }) : translate( "No results found for . Try switching stores.", { searchedQuery: this.searchedQuery})
+      const userStore = useUserStore()
+      const locale = userStore.getLocale
+
+      await jsonToCsv(allRejectedItems, { download: true, name: fileName, encode: locale === 'ja-JP' ? { default: 'shift-jis' } : {} })
     },
+    async updateRejectionPeriod(rejectionPeriodId: string) {
+      const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
+      rejectedOrdersQuery.rejectionPeriodId = rejectionPeriodId
+      await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
     },
-    setup() {
-      const store = useStore()
-      const productIdentificationStore = useProductIdentificationStore();
-      let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+    async updateQueryString(queryString: string) {
+      const rejectedOrdersQuery = JSON.parse(JSON.stringify(this.rejectedOrders.query))
 
-  
-      return {
-        addOutline,
-        caretDownOutline,
-        cloudDownloadOutline,
-        ellipsisVerticalOutline,
-        filterOutline,
-        formatUtcDate,
-        getProductIdentificationValue,
-        personCircleOutline,
-        pricetagOutline,
-        productIdentificationPref,
-        store,
-        translate,
-      }
+      rejectedOrdersQuery.viewIndex = 0
+      rejectedOrdersQuery.viewSize = process.env.VUE_APP_VIEW_SIZE
+      rejectedOrdersQuery.queryString = queryString
+      await this.store.dispatch('rejection/updateRejectedOrderQuery', { ...rejectedOrdersQuery })
+      this.searchedQuery = queryString;
+    },
+    getErrorMessage() {
+    return this.searchedQuery === '' ? translate("doesn't have any rejected orders right now.", { facilityName: this.currentFacility.facilityName }) : translate( "No results found for . Try switching stores.", { searchedQuery: this.searchedQuery})
+  },
+  },
+  setup() {
+    const store = useStore()
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
+
+    return {
+      addOutline,
+      caretDownOutline,
+      cloudDownloadOutline,
+      ellipsisVerticalOutline,
+      filterOutline,
+      formatUtcDate,
+      getProductIdentificationValue,
+      personCircleOutline,
+      pricetagOutline,
+      productIdentificationPref,
+      store,
+      translate,
     }
-  });
-  </script>
-  <style scoped>
-  .rejection-count {
-    font-size: 128px;
-    font-weight: 400
   }
-  .rejection-summary {
-    display: grid;
-    align-items: start;
-    grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
-    margin-bottom: var(--spacer-lg);
-  }
-  .rejection-summary > ion-card:first-child {
-    margin-left: var(--spacer-sm);
-  }
-  .rejection-search {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(343px, 1fr));
-    margin-bottom: var(--spacer-lg);
-    align-items: center;
-  }
-  .rejected-order-item {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    align-items: center;
-    padding: var(--spacer-xs) 0;
+});
+</script>
+<style scoped>
+.rejection-count {
+  font-size: 128px;
+  font-weight: 400
+}
+.rejection-summary {
+  display: grid;
+  align-items: start;
+  grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
+  margin-bottom: var(--spacer-lg);
+}
+.rejection-summary > ion-card:first-child {
+  margin-left: var(--spacer-sm);
+}
+.rejection-search {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(343px, 1fr));
+  margin-bottom: var(--spacer-lg);
+  align-items: center;
+}
+.rejected-order-item {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  align-items: center;
+  padding: var(--spacer-xs) 0;
 }
 .searchbar{
   padding-top: 0;
 }
+ion-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
\ No newline at end of file