@os1-platform/dispatch-mobile 2.1.2 → 2.1.4

package/src/components/executiontasks/scan/sub_components/SummaryPage.tsx

@@ -0,0 +1,1296 @@
+import { View, Text, Dimensions, Platform } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { Button } from 'react-native-paper';
+import { Entypo } from '@expo/vector-icons';
+import {
+  CommonStyles,
+  Fonts,
+} from '../../../../styles/executionTasks/CommonStyles';
+import {
+  DisplaySummary,
+  ListItem,
+  PROCEED_STATUS,
+  SummaryPageTabs,
+} from '../interfaces';
+import { StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import ERDropDown, { ercItem } from './ERDropDown';
+import { getErcDropDownItems } from './DropDownUtils';
+import { ERCode, ScannerInput, ScannerOutput } from '../ScanSchema';
+import SdkColors, { ColorTheme } from '../../../../styles/SdkColors';
+import {
+  BaseDataProvider,
+  DataProvider,
+  LayoutProvider,
+  RecyclerListView,
+} from 'recyclerlistview';
+import SnackBarCustom, { SnackBarType } from '../../../widgets/SnackBarCustom';
+import TabsComponent, { Tab } from '../../../widgets/TabsComponent';
+import Card from '../../../widgets/Card';
+import {
+  addScans,
+  filterERCItems,
+  getScanData,
+  getTabCount,
+  removeScan,
+} from '../utils';
+import { AntDesign } from '@expo/vector-icons';
+import ModalWidget from '../../../widgets/ModalWidget';
+import SearchBar from '../../../widgets/SearchBar';
+import { debounce } from 'lodash';
+import { RouteParams } from '../../../../ui/uiConfig/RouteParams';
+import { IDispatchExecutor } from '@os1-platform/platform-coreos-execution-engine-sdk';
+import FileIcon from '../../../../icons/file';
+
+const dimensionsForScreen = Dimensions.get('screen');
+
+const createNewDataProvider = () => {
+  return new DataProvider((r1, r2) => r1.scanId !== r2.scanId);
+};
+
+interface SummaryPageProps {
+  shipmentCount: { scannedCount: number; totalCount: number };
+  updateShipmentCount: (
+    scannedCountChanged: number,
+    totalCountChanged: number,
+    type?: 'SCAN' | 'REMOVE'
+  ) => any;
+  handleSubmitET: (
+    status: PROCEED_STATUS,
+    count: number,
+    erc?: {
+      ec: string;
+      rc: string;
+    }
+  ) => void;
+  ercSelector: ERCode[];
+  eventCodeItems: ercItem[];
+  scanProps: ScannerInput;
+  mergedScanETOutput: ScannerOutput;
+}
+
+const INITIAL_TABS = [
+  { title: SummaryPageTabs.ALL, count: 0 },
+  { title: SummaryPageTabs.PENDING, count: 0 },
+  { title: SummaryPageTabs.DELIVERED, count: 0 },
+  { title: SummaryPageTabs.UNDELIVERED, count: 0 },
+];
+
+const INITIAL_SEARCH_PARAMS = {
+  hasNextPage: true,
+  offset: 0,
+  limit: 10,
+};
+
+const SummaryPage = (props: SummaryPageProps) => {
+  const [snackBar, setSnackBar] = useState({
+    show: false,
+    type: SnackBarType.SUCCESS,
+    message: '',
+  });
+  const [tabs, setTabs] = useState(INITIAL_TABS);
+
+  // START: Modal Handling for Summary Page
+
+  const [showUnscannedShipmentModal, setShowUnscannedShipmentModal] =
+    useState(false);
+  const [showERCModal, setShowERCModal] = useState(false);
+  const [showRemoveShipmentModal, setShowRemoveShipmentModal] = useState(false);
+
+  const [selectedEventCode, setSelectedEventCode] = useState<ercItem>();
+  const [selectedReason, setSelectedReason] = useState<ercItem>(); // reason code from ercSelector
+  const [reasonItems, setReasonItems] = useState<ercItem[]>(); // list of reason codes
+  const [editedReasonItems, setEditedReasonItems] = useState<ercItem[]>(); // list of reason codes
+  let { scannedCount, totalCount } = props.shipmentCount;
+  useEffect(() => {
+    props.ercSelector &&
+      (async () => {
+        setSelectedEventCode(props.eventCodeItems[0]);
+        setEditedEventCode(props.eventCodeItems[0]);
+      })();
+  }, [props.eventCodeItems]);
+  useEffect(() => {
+    selectedEventCode?.code &&
+      (async () => {
+        let response = await getErcDropDownItems(
+          'REASON',
+          props.ercSelector || [],
+          selectedEventCode?.code
+        );
+        if (response.length) {
+          setReasonItems(response);
+          setSelectedReason(response[0]);
+        } else {
+          setReasonItems([]);
+          setSelectedReason(undefined);
+        }
+      })();
+  }, [selectedEventCode?.code]);
+
+  const renderActionButtons = () => {
+    return (
+      <View
+        style={{ borderTopWidth: 1, borderTopColor: '#E0E3EB', padding: 10 }}
+      >
+        <Button
+          labelStyle={CommonStyles.nextButtonLabel}
+          style={CommonStyles.nextButton}
+          uppercase={false}
+          onPress={() => {
+            if (scannedCount < totalCount) {
+              setShowUnscannedShipmentModal(true);
+            } else {
+              props.handleSubmitET(PROCEED_STATUS.DELIVER_NOW, tabs[1].count);
+            }
+          }}
+        >
+          {`Proceed`}
+        </Button>
+      </View>
+    );
+  };
+  // END: Modal Handling for Summary Page
+
+  // START: Summary List Handling
+  const [searchParams, setSearchParams] = useState(INITIAL_SEARCH_PARAMS);
+  const [dataProvider, setDataProvider] = React.useState<BaseDataProvider>(
+    createNewDataProvider()
+  );
+  const _layoutProvider = new LayoutProvider(
+    (index: any) => 0,
+    (type: any, dim: any) => {
+      dim.width = dimensionsForScreen.width / 1;
+      dim.height = 180; //dimensionsForScreen.height / 1;
+    }
+  );
+  const [activeTab, setActiveTab] = useState(SummaryPageTabs.PENDING);
+  const [scanList, setScanList] = useState<DisplaySummary[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [selectedEditItem, setSelectedEditItem] = useState<ListItem>();
+  const [editedEventCode, setEditedEventCode] = useState<ercItem>();
+  const [editedReason, setEditedReason] = useState<ercItem>(); // reason code from ercSelector
+  const [selectedItems, setSelectedItems] = useState<{
+    [id: string]: ListItem;
+  }>({});
+  const [searchText, setSearchText] = useState('');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [isSearchCleared, setIsSearchCleared] = React.useState<boolean>(false);
+  const [isRemoved, setIsRemoved] = useState(false);
+  const onChangeSearch = (query: string) => {
+    setSearchQuery((oldQuery) => {
+      if (oldQuery.length > 1 && query.length === 0) {
+        setIsSearchCleared(true);
+      }
+      // RESET Search Params
+      setSearchParams(INITIAL_SEARCH_PARAMS);
+      return query;
+    });
+  };
+  const debouncedChangeSearch = debounce(onChangeSearch, 500);
+
+  const updateScanList = async (query: string = '') => {
+    try {
+      if (searchParams.hasNextPage) {
+        const { data: result, totalCount } = await getScanData(
+          activeTab,
+          props.scanProps,
+          searchParams.limit,
+          searchParams.offset,
+          query
+        );
+
+        if (query) {
+          setSearchParams((searchParams) => ({
+            hasNextPage: Boolean(
+              totalCount - (searchParams.offset + searchParams.limit) > 0
+            ),
+            offset: searchParams.offset + result.length,
+            limit: searchParams.limit,
+          }));
+          setScanList((scanList) => {
+            const updatedScanList = result;
+            setDataProvider((dataProvider) => {
+              return createNewDataProvider().cloneWithRows(updatedScanList);
+            });
+            return updatedScanList;
+          });
+        } else {
+          setSearchParams((searchParams) => ({
+            hasNextPage: Boolean(
+              totalCount - (searchParams.offset + searchParams.limit) > 0
+            ),
+            offset: searchParams.offset + result.length,
+            limit: searchParams.limit,
+          }));
+          setScanList((scanList: DisplaySummary[]) => {
+            let updatedScanList: DisplaySummary[] = [];
+            if (isSearchCleared) updatedScanList = [...result];
+            else updatedScanList = dataProvider.getAllData().concat(result);
+
+            setIsSearchCleared(false);
+            setDataProvider((dataProvider) => {
+              if (dataProvider)
+                return dataProvider.cloneWithRows(updatedScanList);
+              else return dataProvider;
+            });
+            return updatedScanList;
+          });
+        }
+      }
+    } catch (error) {
+    } finally {
+      props.scanProps.showProgress(false);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      const count = await getTabCount(props.scanProps);
+      setTabs([
+        { title: SummaryPageTabs.ALL, count: count[SummaryPageTabs.ALL] },
+        {
+          title: SummaryPageTabs.PENDING,
+          count: count[SummaryPageTabs.PENDING],
+        },
+        {
+          title: SummaryPageTabs.DELIVERED,
+          count: count[SummaryPageTabs.DELIVERED],
+        },
+        {
+          title: SummaryPageTabs.UNDELIVERED,
+          count: count[SummaryPageTabs.UNDELIVERED],
+        },
+      ]);
+    })();
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      props.scanProps.showProgress(true);
+
+      setIsLoading(true);
+      await updateScanList(searchQuery);
+      setIsLoading(false);
+
+      props.scanProps.showProgress(false);
+
+      if (isRemoved) setIsRemoved(false);
+    })();
+  }, [isRemoved, activeTab, searchQuery]);
+
+  useEffect(() => {
+    editedEventCode?.code &&
+      (async () => {
+        let response = await getErcDropDownItems(
+          'REASON',
+          props.ercSelector || [],
+          editedEventCode?.code
+        );
+        if (response.length) {
+          // setReasonItems(response);
+          setEditedReasonItems(response);
+          setEditedReason(response[0]);
+        } else {
+          // setReasonItems([]);
+          setEditedReasonItems([]);
+          setEditedReason(undefined);
+        }
+      })();
+  }, [editedEventCode?.code]);
+
+  // Triggered when the user reaches the end of the list
+  const onEndReached = async () => {
+    if (searchParams.hasNextPage === false || searchQuery.length > 0) return;
+
+    // Fetch more data when the user reaches the end of the list
+    setIsLoadingMore(true);
+    await updateScanList();
+    setIsLoadingMore(false);
+  };
+
+  const renderEditERCModal = () => {
+    return (
+      <ModalWidget
+        showModal={showEditModal}
+        contentContainerStyle={{ marginStart: 40, marginEnd: 40 }}
+        title={{ label: 'Update' }}
+        renderChildren={() => {
+          return (
+            <View style={{ marginHorizontal: 16, marginBottom: 20 }}>
+              <View style={{ marginBottom: 16 }}>
+                <ERDropDown
+                  title={'Event'}
+                  style={{ height: 50 }}
+                  selectedReason={editedEventCode}
+                  items={props.eventCodeItems}
+                  onItemChange={(eventItem: ercItem | null) => {
+                    if (eventItem !== null) setEditedEventCode(eventItem);
+                  }}
+                />
+              </View>
+              <View style={{ marginVertical: 20 }}>
+                <ERDropDown
+                  title={'Reason'}
+                  style={{ height: 50 }}
+                  selectedReason={editedReason}
+                  disabled={
+                    !editedReasonItems || !editedReasonItems?.length
+                      ? true
+                      : false
+                  }
+                  items={editedReasonItems ?? []}
+                  onItemChange={(reasonItem: ercItem | null) => {
+                    if (reasonItem !== null) setEditedReason(reasonItem);
+                  }}
+                />
+              </View>
+            </View>
+          );
+        }}
+        buttonStyle={modalStyles.buttonStyles}
+        primaryButton={{
+          label: 'Update',
+          styles: { ...modalStyles.editERCButton, marginStart: 5 },
+          onPress: async () => {
+            const scan = selectedEditItem;
+
+            props.scanProps.showProgress(true);
+            if (scan && editedEventCode && editedEventCode.code) {
+              // UPDATE OUTPUT
+
+              try {
+                const {
+                  status,
+                  message,
+                  type,
+                  data: scanResult,
+                } = await addScans(
+                  scan.scanId,
+                  props.scanProps,
+                  props.mergedScanETOutput,
+                  props.eventCodeItems,
+                  editedEventCode,
+                  editedReason
+                );
+                if (status === true) {
+                  // UPDATE COUNT OF TABS
+                  const count = await getTabCount(props.scanProps);
+                  setTabs([
+                    {
+                      title: SummaryPageTabs.ALL,
+                      count: count[SummaryPageTabs.ALL],
+                    },
+                    {
+                      title: SummaryPageTabs.PENDING,
+                      count: count[SummaryPageTabs.PENDING],
+                    },
+                    {
+                      title: SummaryPageTabs.DELIVERED,
+                      count: count[SummaryPageTabs.DELIVERED],
+                    },
+                    {
+                      title: SummaryPageTabs.UNDELIVERED,
+                      count: count[SummaryPageTabs.UNDELIVERED],
+                    },
+                  ]);
+
+                  // UPDATE THE Count
+                  props.updateShipmentCount(
+                    scanResult.shipmentCount.scannedCount,
+                    scanResult.shipmentCount.totalCount
+                  );
+
+                  if (activeTab === SummaryPageTabs.ALL) {
+                    setScanList((scanList) => {
+                      const updatedScanList = [...scanList];
+                      updatedScanList[scan.index] = {
+                        scanId: scan.scanId,
+                        orderId: scan.orderId || '--',
+                        clientName: scan.clientName || '--',
+                        eventCode: editedEventCode.text,
+                        reasonCode: editedReason?.text || '--',
+                        prefixedMergedObjectiveId:
+                          scan.prefixedMergedObjectiveId,
+                        lastStatus: scan.lastStatus,
+                      };
+                      setDataProvider((dataProvider) => {
+                        if (dataProvider)
+                          return dataProvider.cloneWithRows(updatedScanList);
+                        else return dataProvider;
+                      });
+
+                      return updatedScanList;
+                    });
+                  } else if (activeTab === SummaryPageTabs.PENDING) {
+                    setSearchParams({
+                      ...searchParams,
+                      offset: searchParams.offset - 1,
+                    });
+
+                    setScanList((scanList) => {
+                      let updatedScanList = dataProvider.getAllData();
+                      updatedScanList = updatedScanList.filter(
+                        (scanItem) => scanItem.scanId !== scan.scanId
+                      );
+                      // updatedScanList.splice(scan.index, 1);
+
+                      setDataProvider((dataProvider) => {
+                        if (dataProvider)
+                          return dataProvider.cloneWithRows(updatedScanList);
+                        else return dataProvider;
+                      });
+
+                      return updatedScanList;
+                    });
+                  } else if (activeTab === SummaryPageTabs.DELIVERED) {
+                    setScanList((scanList) => {
+                      let updatedScanList = dataProvider.getAllData();
+                      const successEvent = Boolean(editedEventCode.success);
+                      if (successEvent) {
+                        updatedScanList[scan.index] = {
+                          scanId: scan.scanId,
+                          orderId: scan.orderId || '--',
+                          clientName: scan.clientName || '--',
+                          eventCode: editedEventCode.text,
+                          reasonCode: editedReason?.text || '--',
+                          prefixedMergedObjectiveId:
+                            scan.prefixedMergedObjectiveId,
+                          lastStatus: scan.lastStatus,
+                        };
+                      } else {
+                        setSearchParams({
+                          ...searchParams,
+                          offset: searchParams.offset - 1,
+                        });
+                        updatedScanList = updatedScanList.filter(
+                          (scanItem) => scanItem.scanId !== scan.scanId
+                        );
+                      }
+                      setDataProvider((dataProvider) => {
+                        if (dataProvider)
+                          return dataProvider.cloneWithRows(updatedScanList);
+                        else return dataProvider;
+                      });
+
+                      return updatedScanList;
+                    });
+                  } else if (activeTab === SummaryPageTabs.UNDELIVERED) {
+                    setScanList((scanList) => {
+                      let updatedScanList = dataProvider.getAllData();
+                      const successEvent = Boolean(editedEventCode.success);
+                      if (!successEvent) {
+                        updatedScanList[scan.index] = {
+                          scanId: scan.scanId,
+                          orderId: scan.orderId || '--',
+                          clientName: scan.clientName || '--',
+                          eventCode: editedEventCode.text,
+                          reasonCode: editedReason?.text || '--',
+                          prefixedMergedObjectiveId:
+                            scan.prefixedMergedObjectiveId,
+                          lastStatus: scan.lastStatus,
+                        };
+                      } else {
+                        setSearchParams({
+                          ...searchParams,
+                          offset: searchParams.offset - 1,
+                        });
+
+                        updatedScanList = updatedScanList.filter(
+                          (scanItem) => scanItem.scanId !== scan.scanId
+                        );
+                      }
+                      setDataProvider((dataProvider) => {
+                        if (dataProvider)
+                          return dataProvider.cloneWithRows(updatedScanList);
+                        else return dataProvider;
+                      });
+
+                      return updatedScanList;
+                    });
+                  }
+
+                  setSnackBar({
+                    show: true,
+                    message:
+                      scan.eventCode !== '--'
+                        ? `#${scan.scanId}\nShipment updated successfully!`
+                        : message,
+                    type,
+                  });
+                } else {
+                  setSnackBar({
+                    show: true,
+                    message,
+                    type,
+                  });
+                }
+              } catch (error) {
+                setSnackBar({
+                  show: true,
+                  message: 'Some error occurred',
+                  type: SnackBarType.FAILURE,
+                });
+              }
+            } else {
+              setSnackBar({
+                show: true,
+                message: 'Some error occurred',
+                type: SnackBarType.FAILURE,
+              });
+            }
+
+            // RESET KEYS
+            props.scanProps.showProgress(false);
+            setSelectedEditItem(undefined);
+            setShowEditModal(false);
+            return;
+          },
+        }}
+        secondaryButton={{
+          label: 'Cancel',
+          styles: { ...modalStyles.editERCButton, marginEnd: 5 },
+          onPress: () => {
+            setShowEditModal(false);
+            setSelectedEditItem(undefined);
+          },
+        }}
+      />
+    );
+  };
+
+  const renderUnscannedShipmentModal = () => {
+    return (
+      <ModalWidget
+        showModal={showUnscannedShipmentModal}
+        title={{ label: 'Pending Shipments' }}
+        subTitle={{
+          label: `You still have ${tabs[1].count} unscanned shipment!`,
+          styles: { textAlign: 'center' },
+        }}
+        primaryButton={{
+          label: 'Continue without Scanning',
+          styles: modalStyles.primaryButtonStyles,
+          onPress: () => {
+            props.handleSubmitET(PROCEED_STATUS.DELIVER_LATER, tabs[1].count);
+          },
+        }}
+        secondaryButton={{
+          label: `Keep Scanning`,
+          styles: modalStyles.secondaryButtonStyles,
+          onPress: () => setShowUnscannedShipmentModal(false),
+        }}
+        // OLD CODE: When you wanted to update Undelivered shipments with a particular ERC got removed after: https://dev.azure.com/DelhiveryPlatform/Solutions/_workitems/edit/15669
+        // secondaryButton={{
+        //   label: `Mark as Undelivered`,
+        //   styles: modalStyles.secondaryButtonStyles,
+        //   onPress: () => {
+        //     setShowUnscannedShipmentModal(false);
+        //     setShowERCModal(true);
+        //   },
+        // }}
+        // renderAdditionalButtons={() => {
+        //   return (
+        //     <TouchableOpacity
+        //       style={{
+        //         marginBottom: 16,
+        //         height: 40,
+        //         borderRadius: 6,
+        //         justifyContent: 'center',
+        //         alignItems: 'center',
+        //       }}
+        //       onPress={() => setShowUnscannedShipmentModal(false)}
+        //     >
+        //       <Text
+        //         style={[
+        //           CommonStyles.cancelButtonLabel,
+        //           { color: SdkColors[ColorTheme.LIGHT].primaryButton },
+        //         ]}
+        //       >
+        //         Continue Scanning
+        //       </Text>
+        //     </TouchableOpacity>
+        //   );
+        // }}
+      />
+    );
+  };
+
+  const renderERCModal = () => {
+    return (
+      <ModalWidget
+        showModal={showERCModal}
+        contentContainerStyle={{ marginStart: 40, marginEnd: 40 }}
+        title={{ label: 'Mark as Undelivered' }}
+        subTitle={{
+          label: `The shipments shall be updated with the following:`,
+        }}
+        renderChildren={() => {
+          return (
+            <View style={{ marginHorizontal: 16, marginBottom: 20 }}>
+              <View style={{ marginBottom: 16 }}>
+                <ERDropDown
+                  title={'Event'}
+                  style={{ height: 50 }}
+                  selectedReason={selectedEventCode}
+                  items={filterERCItems(props.eventCodeItems, 'FAILURE')}
+                  onItemChange={(eventItem: ercItem | null) => {
+                    if (eventItem !== null) setSelectedEventCode(eventItem);
+                  }}
+                />
+              </View>
+              <View style={{ marginVertical: 20 }}>
+                <ERDropDown
+                  title={'Reason'}
+                  style={{ height: 50 }}
+                  selectedReason={selectedReason}
+                  disabled={!reasonItems || !reasonItems?.length ? true : false}
+                  items={reasonItems ?? []}
+                  onItemChange={(reasonItem: ercItem | null) => {
+                    if (reasonItem !== null) setSelectedReason(reasonItem);
+                  }}
+                />
+              </View>
+            </View>
+          );
+        }}
+        buttonStyle={{ zIndex: -1 }}
+        primaryButton={{
+          label: 'Proceed',
+          styles: modalStyles.primaryButtonStyles,
+          onPress: () => {
+            props.handleSubmitET(PROCEED_STATUS.DELIVER_NOW, tabs[1].count, {
+              ec: selectedEventCode?.code || '',
+              rc: selectedReason?.code || '',
+            });
+            setShowERCModal(false);
+          },
+        }}
+        secondaryButton={{
+          label: `Cancel`,
+          styles: modalStyles.secondaryButtonStyles,
+          onPress: () => {
+            setShowERCModal(false);
+          },
+        }}
+      />
+    );
+  };
+
+  const renderRemoveShipmentModal = () => {
+    return (
+      <ModalWidget
+        showModal={showRemoveShipmentModal}
+        contentContainerStyle={{ marginStart: 40, marginEnd: 40 }}
+        title={{ label: 'Remove Shipment' }}
+        subTitle={{
+          label: `${
+            Object.keys(selectedItems).length > 1
+              ? `Are you sure you want to remove the ${
+                  Object.keys(selectedItems).length
+                } shipments?`
+              : 'Are you sure you want to remove this shipment?'
+          }`,
+          styles: modalStyles.subTitleStyles,
+        }}
+        primaryButton={{
+          label: 'Proceed to Remove',
+          styles: modalStyles.primaryButtonStyles,
+          onPress: async () => {
+            props.scanProps.showProgress(true);
+
+            const prefixedMergedObjectiveId =
+              props.scanProps.route.params[RouteParams.ROOT_META_DATA]
+                .prefixedMergedObjectiveId;
+
+            try {
+              // REMOVE SCAN
+              await removeScan(
+                props.scanProps.taskName || '',
+                Object.keys(selectedItems),
+                props.scanProps.route,
+                props.mergedScanETOutput
+              );
+
+              // UPDATE THE Count
+              props.updateShipmentCount(
+                -Object.keys(selectedItems).length,
+                0,
+                'REMOVE'
+              );
+
+              // UPDATE COUNT OF TABS
+              const count = await getTabCount(props.scanProps);
+
+              setSearchParams({
+                ...searchParams,
+                offset: searchParams.offset - Object.keys(selectedItems).length,
+              });
+
+              // RESET SCAN LIST
+              setScanList((scanList: any) => {
+                let updatedScanList: any;
+                const itemsRemoved: string[] = [];
+
+                if (activeTab === SummaryPageTabs.ALL) {
+                  updatedScanList = [...scanList];
+
+                  Object.keys(selectedItems).forEach((scanId) => {
+                    const item = selectedItems[scanId]; // returns Display Summary with Index
+
+                    if (
+                      item.prefixedMergedObjectiveId !==
+                        prefixedMergedObjectiveId ||
+                      item.lastStatus ===
+                        IDispatchExecutor.ExecutionStatus.COMPLETED_FAILURE
+                    ) {
+                      itemsRemoved.push(item.scanId);
+                    } else {
+                      updatedScanList[item.index] = {
+                        scanId: item.scanId,
+                        orderId: item.orderId || '--',
+                        clientName: item.clientName || '--',
+                        eventCode: '--',
+                        reasonCode: '--',
+                      };
+                    }
+                  });
+                } else if (
+                  activeTab === SummaryPageTabs.DELIVERED ||
+                  activeTab === SummaryPageTabs.UNDELIVERED
+                ) {
+                  const indexes = Object.keys(selectedItems).map((scanId) => {
+                    const item: any = selectedItems[scanId];
+                    return item.index;
+                  });
+                  updatedScanList = scanList.filter(
+                    (value: any, index: number) => !indexes.includes(index)
+                  );
+                } else {
+                  updatedScanList = scanList;
+                }
+                setDataProvider((dataProvider: any) => {
+                  return dataProvider.cloneWithRows(updatedScanList);
+                });
+
+                setTabs([
+                  {
+                    title: SummaryPageTabs.ALL,
+                    count: count[SummaryPageTabs.ALL],
+                  },
+                  {
+                    title: SummaryPageTabs.PENDING,
+                    count: count[SummaryPageTabs.PENDING],
+                  },
+                  {
+                    title: SummaryPageTabs.DELIVERED,
+                    count: count[SummaryPageTabs.DELIVERED],
+                  },
+                  {
+                    title: SummaryPageTabs.UNDELIVERED,
+                    count: count[SummaryPageTabs.UNDELIVERED],
+                  },
+                ]);
+
+                // RESET MODAL
+                setShowRemoveShipmentModal(false);
+
+                // RESET SELECTED ITEMS
+                setSelectedItems({});
+
+                updatedScanList = updatedScanList.filter(
+                  (scan: DisplaySummary) => !itemsRemoved.includes(scan.scanId)
+                );
+
+                setDataProvider((dataProvider) => {
+                  if (dataProvider)
+                    return dataProvider.cloneWithRows(updatedScanList);
+                  else return dataProvider;
+                });
+
+                return updatedScanList;
+              });
+
+              // RESET MODAL
+              setShowRemoveShipmentModal(false);
+
+              // RESET SELECTED ITEMS
+              setSelectedItems({});
+
+              // RESET Loader
+              props.scanProps.showProgress(false);
+
+              // Show Success Message
+              setSnackBar({
+                show: true,
+                message: 'Selected items removed successfully!',
+                type: SnackBarType.SUCCESS,
+              });
+            } catch (error) {
+              // RESET MODAL
+              setShowRemoveShipmentModal(false);
+
+              setSnackBar({
+                show: true,
+                message: 'Some error occurred',
+                type: SnackBarType.FAILURE,
+              });
+            } finally {
+              props.scanProps.showProgress(false);
+            }
+          },
+        }}
+        secondaryButton={{
+          label: `Cancel`,
+          styles: modalStyles.secondaryButtonStyles,
+          onPress: () => {
+            setShowRemoveShipmentModal(false);
+          },
+        }}
+      />
+    );
+  };
+
+  const rowRenderer = (_: any, scan: DisplaySummary, index: number) => {
+    const prefixedMergedObjectiveId =
+      props.scanProps.route.params[RouteParams.ROOT_META_DATA]
+        .prefixedMergedObjectiveId;
+
+    return (
+      <Card
+        key={scan.scanId}
+        title={`#${scan.scanId}`}
+        renderAdditionalHeader={() => {
+          if (
+            scan.prefixedMergedObjectiveId &&
+            prefixedMergedObjectiveId !== scan.prefixedMergedObjectiveId
+          )
+            return (
+              <AntDesign name="exclamationcircleo" size={16} color="#EA580C" />
+            );
+          else return <></>;
+        }}
+        Body={
+          <View style={{ marginVertical: 10 }}>
+            <Text style={styles.cardField}>
+              <Text style={styles.cardFieldSubText}>Order ID:</Text>{' '}
+              {scan.orderId}
+            </Text>
+            <Text style={styles.cardField}>
+              <Text style={styles.cardFieldSubText}>Client Name:</Text>
+              {scan.clientName}
+            </Text>
+            <Text style={styles.cardField}>
+              <Text style={styles.cardFieldSubText}>Event:</Text>{' '}
+              {scan.eventCode}
+            </Text>
+            <Text>
+              <Text style={styles.cardFieldSubText}>Reason:</Text>
+              {scan.reasonCode || ''}
+            </Text>
+          </View>
+        }
+        editConfig={{
+          onEdit: (props: any) => {
+            if (selectedItems && Object.keys(selectedItems).length > 1) {
+              setSnackBar({
+                show: true,
+                message: 'Cannot Edit Multiple Items',
+                type: SnackBarType.FAILURE,
+              });
+            } else {
+              setSelectedItems({});
+              setShowEditModal(true);
+              setSelectedEditItem({ ...props, index });
+            }
+          },
+          props: scan,
+        }}
+        selectConfig={{
+          isSelected: selectedItems[scan.scanId] ? true : false,
+          onSelect: (props: DisplaySummary) => {
+            setSelectedItems((selectedItems) => {
+              // Unselect
+              if (selectedItems[props.scanId]) {
+                const _selectedItems = { ...selectedItems };
+                delete _selectedItems[props.scanId];
+                return _selectedItems;
+              } else {
+                return {
+                  ...selectedItems,
+                  [props.scanId]: { ...props, index },
+                };
+              }
+            });
+          },
+          props: scan,
+        }}
+      />
+    );
+  };
+
+  const renderBody = (currentTab: string) => {
+    return (
+      <View style={{ flex: 1 }}>
+        <View style={styles.searchBar}>
+          <SearchBar
+            searchText={searchText}
+            setSearchText={setSearchText}
+            placeholder="Shipment ID"
+            onChangeSearch={(searchText) => debouncedChangeSearch(searchText)}
+            onClear={() => {
+              setSearchQuery(() => {
+                setIsSearchCleared(true);
+                setSearchParams(INITIAL_SEARCH_PARAMS);
+                return '';
+              });
+            }}
+          />
+        </View>
+        {!isLoading && scanList && scanList.length > 0 ? (
+          <RecyclerListView
+            layoutProvider={_layoutProvider}
+            dataProvider={dataProvider}
+            rowRenderer={(type: any, scanData: any, index: number) =>
+              rowRenderer(type, scanData, index)
+            }
+            onEndReached={async () => await onEndReached()}
+            onEndReachedThreshold={0.5}
+            renderFooter={() => {
+              return (
+                <>
+                  {isLoadingMore ? (
+                    <Text
+                      style={{
+                        padding: 10,
+                        fontWeight: 'bold',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Loading
+                    </Text>
+                  ) : null}
+                </>
+              );
+            }}
+          />
+        ) : null}
+        {!isLoading && scanList.length === 0 ? (
+          <View
+            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+          >
+            <FileIcon />
+            <Text
+              style={{
+                color: '#3D445C',
+                fontFamily:
+                  Platform.OS === 'android'
+                    ? Fonts.IBMPlexSans_500Medium
+                    : 'IBMPlexSans-Medium',
+                fontStyle: 'normal',
+                fontWeight: '500',
+                fontSize: 16,
+                marginTop: 24,
+              }}
+            >{`You do not have any ${activeTab.toLowerCase()} shipments`}</Text>
+            {activeTab === SummaryPageTabs.PENDING ? (
+              <Text
+                style={{
+                  color: '#525B7A',
+                  fontFamily:
+                    Platform.OS === 'android'
+                      ? Fonts.IBMPlexSans_400Regular
+                      : 'IBMPlexSans-Regular',
+                  fontStyle: 'normal',
+                  fontWeight: '400',
+                  fontSize: 14,
+                }}
+              >
+                You can proceed to the next step now
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+    );
+  };
+
+  const renderTabItem = (tab: Tab) => {
+    return (
+      <View style={styles.tabItem}>
+        <View style={styles.tabText}>
+          <Text
+            style={activeTab === tab.title ? { color: '#5B80F7' } : {}}
+          >{`${tab.title}`}</Text>
+        </View>
+        <View
+          style={
+            activeTab !== tab.title
+              ? styles.tabCount
+              : [styles.tabCount, { backgroundColor: '#ECF0FF' }]
+          }
+        >
+          <Text>{`${tab.count}`}</Text>
+        </View>
+      </View>
+    );
+  };
+  // END: Summary List Handling
+
+  return (
+    <>
+      {renderERCModal()}
+      {renderUnscannedShipmentModal()}
+      {renderEditERCModal()}
+      {renderRemoveShipmentModal()}
+      <View style={{ flex: 1 }}>
+        <TabsComponent
+          tabs={tabs}
+          initialTab={tabs[1]}
+          onTabChange={(currentTab: string) => {
+            if (activeTab === currentTab) {
+              return;
+            }
+            // @ts-ignore
+            setActiveTab((activeTab) => {
+              // RESET Search TEXT
+              setSearchText('');
+              setSearchQuery('');
+
+              // RESET SEARCH PARAMS
+              setSearchParams(INITIAL_SEARCH_PARAMS);
+
+              // RESET SCAN LIST
+              setScanList((scanList: any) => {
+                const updatedScanList: any = [];
+                setDataProvider((dataProvider) => {
+                  if (dataProvider)
+                    return dataProvider.cloneWithRows(updatedScanList);
+                  else return dataProvider;
+                });
+                return updatedScanList;
+              });
+
+              // RESET SELECTED ITEMS
+              setSelectedItems({});
+
+              return currentTab;
+            });
+          }}
+          renderTabItem={renderTabItem}
+          renderBody={renderBody}
+        />
+      </View>
+      <View style={{ justifyContent: 'flex-end' }}>
+        <SnackBarCustom
+          type={snackBar.type}
+          message={`${snackBar.message}`}
+          visible={snackBar.show}
+          onDismiss={() => {
+            setSnackBar({
+              show: false,
+              message: '',
+              type: SnackBarType.SUCCESS,
+            });
+          }}
+          customBottom={20}
+        />
+      </View>
+      {!selectedItems || Object.keys(selectedItems).length === 0 ? (
+        <View style={styles.bottomView}>{renderActionButtons()}</View>
+      ) : null}
+      {selectedItems &&
+      Object.keys(selectedItems).length &&
+      activeTab !== SummaryPageTabs.PENDING ? (
+        <View style={styles.removeBtnContainer}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginLeft: 10,
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setSelectedItems({})}
+              style={styles.removeSelection}
+            >
+              <Entypo name="cross" size={24} color="#3D445C" />
+            </TouchableOpacity>
+            <Text>{`${Object.keys(selectedItems).length} Selected`}</Text>
+          </View>
+          <Button
+            labelStyle={CommonStyles.mainExitButtonLabel}
+            style={[CommonStyles.mainExitButton, styles.removeBtn]}
+            onPress={() => {
+              if (canRemove(selectedItems)) setShowRemoveShipmentModal(true);
+              else {
+                setSnackBar({
+                  show: true,
+                  message: 'Cannot Remove unscanned shipment(s)',
+                  type: SnackBarType.FAILURE,
+                });
+              }
+            }}
+          >
+            Remove
+          </Button>
+        </View>
+      ) : null}
+    </>
+  );
+};
+
+export default SummaryPage;
+
+const styles = StyleSheet.create({
+  bottomView: {
+    paddingBottom: 16,
+    justifyContent: 'flex-end',
+    marginVertical: 10,
+    marginHorizontal: 16,
+  },
+  modalContent: {
+    marginStart: 60,
+    marginEnd: 60,
+    flex: 1,
+    marginBottom: 60,
+  },
+  modalView: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderRadius: 9,
+  },
+  titleText: {
+    justifyContent: 'center',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+    color: '#111111',
+    marginBottom: 10,
+  },
+  subText: {
+    justifyContent: 'center',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 14,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    textAlign: 'center',
+    color: '#000000',
+    marginBottom: 10,
+  },
+  bottomButtons: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    marginTop: 8,
+  },
+  unscannedShipmentModalSubText: {
+    justifyContent: 'center',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 14,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    color: '#000000',
+    marginBottom: 10,
+  },
+  tabItem: {
+    // width: 200,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 5,
+    marginHorizontal: 10,
+  },
+  activeTab: {
+    borderBottomWidth: 2,
+    borderBottomColor: 'blue',
+  },
+  tabText: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: '#3D445C',
+    marginRight: 12,
+  },
+  tabCount: {
+    borderRadius: 50,
+    backgroundColor: '#E0E3EB',
+    paddingHorizontal: 15,
+    textAlign: 'center',
+  },
+  removeBtnContainer: {
+    borderTopWidth: 1,
+    borderTopColor: '#E0E3EB',
+    padding: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  removeSelection: {
+    marginRight: 20,
+  },
+  removeBtn: {
+    marginRight: 10,
+  },
+  searchBar: {
+    marginTop: 16,
+  },
+  cardField: {
+    marginBottom: 8,
+  },
+  cardFieldSubText: {
+    color: '#A3AAC2',
+  },
+});
+
+const modalStyles = StyleSheet.create({
+  primaryButtonStyles: {
+    marginTop: 16,
+    height: 40,
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  secondaryButtonStyles: {
+    marginVertical: 16,
+    height: 40,
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  subTitleStyles: { textAlign: 'center' },
+  buttonStyles: {
+    justifyContent: 'space-between',
+    flexDirection: 'row-reverse',
+    marginTop: 20,
+    zIndex: -1,
+  },
+  editERCButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    height: 40,
+    borderRadius: 6,
+  },
+});
+
+function canRemove(scans: { [scanId: string]: DisplaySummary }): boolean {
+  for (const scanId in scans) {
+    const item = scans[scanId];
+    if (item.eventCode && item.eventCode !== '--') continue;
+    else return false;
+  }
+  return true;
+}