@stssocialst-stp/fe-payroll 0.1.1 → 0.1.3

package/dist/index.es.js

@@ -2,22 +2,22 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useRef, useEffect, forwardRef } from 'react';
 import { PinDrop } from '@material-ui/icons';
 import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
-import { dispatchMutationResp, dispatchMutationErr, dispatchMutationReq, formatServerError, formatGraphQLError, parseData, pageInfo, decodeId, formatPageQueryWithCount, graphql, formatQuery, formatGQLString, formatMutation, withModulesManager, PublishedComponent, TextInput, FormPanel, useModulesManager, useHistory, useTranslations, journalize, Form, coreConfirm, clearConfirm, ControlledField, Searcher, Helmet, withTooltip, CustomFilterFieldStatusPicker, CustomFilterTypeStatusPicker, NumberInput, SelectInput, formatMessage, fetchCustomFilter, ConstantBasedPicker, FormattedMessage, apiHeaders, baseApiUrl, Contributions, createFieldsBasedOnJSON, renderInputComponent, useGraphqlQuery, Autocomplete } from '@stssocialst-stp/fe-core';
+import { dispatchMutationResp, dispatchMutationErr, dispatchMutationReq, formatServerError, formatGraphQLError, parseData, pageInfo, decodeId, formatPageQueryWithCount, graphql, formatQuery, formatGQLString, formatMutation, withModulesManager, PublishedComponent, TextInput, FormPanel, useModulesManager, useHistory, useTranslations, journalize, Form, coreConfirm, clearConfirm, ControlledField, Searcher, Helmet, withTooltip, CustomFilterFieldStatusPicker, CustomFilterTypeStatusPicker, NumberInput, SelectInput, formatMessage as formatMessage$1, fetchCustomFilter, ConstantBasedPicker, FormattedMessage, apiHeaders, baseApiUrl, createFieldsBasedOnJSON, renderInputComponent, Contributions, useGraphqlQuery, Autocomplete } from '@stssocialst-stp/fe-core';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { bindActionCreators } from 'redux';
 import { connect, useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _inherits from '@babel/runtime/helpers/inherits';
 import { injectIntl } from 'react-intl';
-import { Grid, FormControlLabel, Checkbox, Tooltip, IconButton, Fab, Divider, Typography, Input, Paper, Modal, Backdrop, Fade, Box, Button as Button$1, TextField, Tab } from '@material-ui/core';
+import { Grid, FormControlLabel, Checkbox, Tooltip, IconButton, Fab, Divider, Typography, Input, Modal, Backdrop, Fade, Box, Button as Button$1, Paper, TextField, Tab } from '@material-ui/core';
 import { withTheme, withStyles } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import _debounce from 'lodash/debounce';
 import Button from '@material-ui/core/Button';
@@ -34,7 +34,9 @@ import { useReactToPrint } from 'react-to-print';
 import PrintIcon from '@material-ui/icons/Print';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import PhotoCameraOutlinedIcon from '@material-ui/icons/PhotoCameraOutlined';
+import LinearProgress from '@material-ui/core/LinearProgress';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
+import Chip from '@material-ui/core/Chip';
 
 // TODO: Change to proper rights after BE implementation
 var RIGHT_PAYROLL_SEARCH = 202001;
@@ -102,6 +104,11 @@ var PAYROLL_PAYMENT_FILE_STATUS = {
 };
 var BENEFIT_CONSUMPTION_STATUS_LIST = [BENEFIT_CONSUMPTION_STATUS.ACCEPTED, BENEFIT_CONSUMPTION_STATUS.CREATED, BENEFIT_CONSUMPTION_STATUS.APPROVE_FOR_PAYMENT, BENEFIT_CONSUMPTION_STATUS.REJECTED, BENEFIT_CONSUMPTION_STATUS.DUPLICATE, BENEFIT_CONSUMPTION_STATUS.RECONCILED];
 var PAYROLL_FROM_FAILED_INVOICES_URL_PARAM = 'createPayrollFromFailedInvoices=true';
+var PAYMENT_METHOD = {
+  STRATEGY_OFFLINE_PAYMENT: 'StrategyOfflinePayment',
+  STRATEGY_ONLINE_PAYMENT: 'StrategyOnlinePayment',
+  STRATEGY_BISTP_PAYMENT: 'StrategyBistpPayment'
+};
 
 var REQUEST = function REQUEST(actionTypeName) {
   return "".concat(actionTypeName, "_REQ");
@@ -348,13 +355,13 @@ function reducer() {
       return _objectSpread$6(_objectSpread$6({}, state), {}, {
         fetchingBenefitConsumptions: false,
         fetchedBenefitConsumptions: true,
-        benefitConsumptions: (_parseData5 = parseData(action.payload.data.benefitConsumptionByPayroll)) === null || _parseData5 === void 0 ? void 0 : _parseData5.map(function (benefitConsumption) {
+        benefitConsumptions: (_parseData5 = parseData(action.payload.data.benefitConsumption)) === null || _parseData5 === void 0 ? void 0 : _parseData5.map(function (benefitConsumption) {
           return _objectSpread$6(_objectSpread$6({}, benefitConsumption), {}, {
             id: decodeId(benefitConsumption.id)
           });
         }),
-        benefitConsumptionsPageInfo: pageInfo(action.payload.data.benefitConsumptionByPayroll),
-        benefitConsumptionsTotalCount: (_action$payload$data$5 = (_action$payload$data$6 = action.payload.data.benefitConsumptionByPayroll) === null || _action$payload$data$6 === void 0 ? void 0 : _action$payload$data$6.totalCount) !== null && _action$payload$data$5 !== void 0 ? _action$payload$data$5 : 0,
+        benefitConsumptionsPageInfo: pageInfo(action.payload.data.benefitConsumption),
+        benefitConsumptionsTotalCount: (_action$payload$data$5 = (_action$payload$data$6 = action.payload.data.benefitConsumption) === null || _action$payload$data$6 === void 0 ? void 0 : _action$payload$data$6.totalCount) !== null && _action$payload$data$5 !== void 0 ? _action$payload$data$5 : 0,
         errorBenefitConsumptions: formatGraphQLError(action.payload)
       });
     case ERROR(ACTION_TYPE.GET_BENEFIT_CONSUMPTION):
@@ -664,7 +671,21 @@ var messages_en = {
 	"payroll.additonalFields.label": "Additional Fields",
 	"payroll.additonalFields.showAdditionalFields": "Show Additional Fields",
 	"payroll.additonalFields.close": "Close",
-	"payroll.summaryUpload": "Summary Upload"
+	"payroll.summaryUpload": "Summary Upload",
+	"payroll.benefitConsumption.nib": "NIB",
+	"payroll.bistp.viewSummary": "BISTP Payment Summary",
+	"payroll.bistp.submitPayment": "Submit BISTP Payment",
+	"payroll.bistp.reconciled": "Reconciled",
+	"payroll.bistp.pending": "Pending (Bank)",
+	"payroll.bistp.rejected": "Rejected",
+	"payroll.bistp.skippedNib": "Skipped (No NIB)",
+	"payroll.bistp.sendFailed": "Send Failed",
+	"payroll.bistp.status.reconciled": "Paid",
+	"payroll.bistp.status.rejected": "Rejected",
+	"payroll.bistp.status.pending": "Sent to Bank",
+	"payroll.bistp.status.skippedNib": "No NIB",
+	"payroll.bistp.status.sendFailed": "Send Failed",
+	"payroll.bistp.progress": "BISTP Progress"
 };
 
 // eslint-disable-next-line import/prefer-default-export
@@ -674,12 +695,11 @@ function isBase64Encoded(str) {
   return base64RegExp.test(str);
 }
 
-/* eslint-disable max-len */
 var PAYMENT_POINT_PROJECTION = function PAYMENT_POINT_PROJECTION(modulesManager) {
   return ['id', 'name', 'isDeleted', "location ".concat(modulesManager.getProjection('location.Location.FlatProjection')), "ppm ".concat(modulesManager.getProjection('admin.UserPicker.projection'))];
 };
 var BENEFIT_CONSUMPTION_PROJECTION = function BENEFIT_CONSUMPTION_PROJECTION() {
-  return ['id', 'isDeleted', 'jsonExt', 'dateCreated', 'dateUpdated', 'dateValidFrom', 'dateValidTo', 'id', 'code', 'individual {firstName, lastName}', 'benefitAttachment {bill {id, code, terms, datePayed}}', 'receipt', 'photo', 'amount', 'type', 'status', 'dateDue'];
+  return ['id', 'jsonExt', 'code', 'individual {firstName, lastName, nib}', 'benefitAttachment {bill {id, code, terms, amountTotal, datePayed}}', 'receipt', 'photo', 'amount', 'type', 'status', 'dateDue'];
 };
 var PAYROLL_BENEFIT_CONSUMPTION_PROJECTION = function PAYROLL_BENEFIT_CONSUMPTION_PROJECTION() {
   return ['id',
@@ -692,13 +712,14 @@ var BENEFIT_CONSUMPTION_SUMMARY_PROJECTION = function BENEFIT_CONSUMPTION_SUMMAR
 var BENEFIT_ATTACHMENT_PROJECTION = function BENEFIT_ATTACHMENT_PROJECTION() {
   return ['benefit{id, status, code, dateDue, receipt, individual {firstName, lastName}, jsonExt, type, status, amount, receipt}', 'bill{id, code, terms, amountTotal, datePayed}'];
 };
+var BISTP_SUMMARY_PROJECTION = function BISTP_SUMMARY_PROJECTION() {
+  return ['bistpSummary { total reconciled rejected pending skippedNib sendFailed }'];
+};
 var PAYROLL_PROJECTION = function PAYROLL_PROJECTION(modulesManager) {
-  return ['id', 'name', 'paymentMethod', 'paymentPlan { code, id, name, benefitPlan }', "paymentPoint { ".concat(PAYMENT_POINT_PROJECTION(modulesManager).join(' '), " }"), 'paymentCycle { code, startDate, endDate }',
-  // eslint-disable-next-line max-len
-  'benefitConsumption{id, status, code, dateDue, receipt, individual {firstName, lastName}, benefitAttachment{bill{id, code, terms, amountTotal}}}', 'jsonExt', 'status', 'dateValidFrom', 'dateValidTo', 'isDeleted'];
+  return ['id', 'name', 'paymentMethod', 'paymentPlan { code, id, name, benefitPlan }', "paymentPoint { ".concat(PAYMENT_POINT_PROJECTION(modulesManager).join(' '), " }"), 'paymentCycle { code, startDate, endDate }', 'jsonExt', 'status', 'dateValidFrom', 'dateValidTo', 'isDeleted'].concat(_toConsumableArray(BISTP_SUMMARY_PROJECTION()));
 };
 var PAYROLL_SEARCHER_PROJECTION = function PAYROLL_SEARCHER_PROJECTION(modulesManager) {
-  return ['id', 'name', 'paymentMethod', 'paymentPlan { code, id, name, benefitPlan }', "paymentPoint { ".concat(PAYMENT_POINT_PROJECTION(modulesManager).join(' '), " }"), 'paymentCycle { code, startDate, endDate }', 'jsonExt', 'status', 'dateValidFrom', 'dateValidTo', 'isDeleted'];
+  return ['id', 'name', 'paymentMethod', 'paymentPlan { code, id, name, benefitPlan }', "paymentPoint { ".concat(PAYMENT_POINT_PROJECTION(modulesManager).join(' '), " }"), 'paymentCycle { code, startDate, endDate }', 'jsonExt', 'status', 'dateValidFrom', 'dateValidTo', 'isDeleted'].concat(_toConsumableArray(BISTP_SUMMARY_PROJECTION()));
 };
 var CSV_RECONCILIATION_PROJECTION = function CSV_RECONCILIATION_PROJECTION() {
   return ['fileName', 'status', 'error', 'jsonExt'];
@@ -773,7 +794,7 @@ function createPayroll(payroll, clientMutationLabel) {
   return PERFORM_MUTATION(MUTATION_SERVICE.PAYROLL.CREATE, formatPayrollGQL(payroll), ACTION_TYPE.CREATE_PAYROLL, clientMutationLabel);
 }
 function fetchBenefitConsumptions(modulesManager, params) {
-  var payload = formatPageQueryWithCount('benefitConsumptionByPayroll', params, BENEFIT_CONSUMPTION_PROJECTION());
+  var payload = formatPageQueryWithCount('benefitConsumption', params, BENEFIT_CONSUMPTION_PROJECTION());
   return graphql(payload, ACTION_TYPE.GET_BENEFIT_CONSUMPTION);
 }
 function fetchBenefitAttachments(modulesManager, params) {
@@ -1641,7 +1662,7 @@ function AdvancedFiltersDialog(_ref) {
       fontSize: '0.8rem'
     },
     disabled: readOnly || confirmed
-  }, formatMessage(intl, 'payroll', 'payroll.advancedFilters.button.addFilters'))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", null, !readOnly && !confirmed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, formatMessage$1(intl, 'payroll', 'payroll.advancedFilters.button.addFilters'))) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", null, !readOnly && !confirmed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       "float": 'left'
     }
@@ -1651,7 +1672,7 @@ function AdvancedFiltersDialog(_ref) {
     style: {
       border: '0px'
     }
-  }, formatMessage(intl, 'payroll', 'payroll.advancedFilters.button.clearAllFilters'))), /*#__PURE__*/React.createElement("div", {
+  }, formatMessage$1(intl, 'payroll', 'payroll.advancedFilters.button.clearAllFilters'))), /*#__PURE__*/React.createElement("div", {
     style: {
       "float": 'right',
       paddingRight: '16px'
@@ -1662,7 +1683,7 @@ function AdvancedFiltersDialog(_ref) {
     color: "primary",
     autoFocus: true,
     disabled: !object || confirmed || readOnly
-  }, formatMessage(intl, 'payroll', 'payroll.advancedFilters.button.filter')))) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+  }, formatMessage$1(intl, 'payroll', 'payroll.advancedFilters.button.filter')))) : /*#__PURE__*/React.createElement(React.Fragment, null)));
 }
 var mapStateToProps$f = function mapStateToProps(state, props) {
   return {
@@ -1875,7 +1896,7 @@ var PayrollHeadPanel = /*#__PURE__*/function (_FormPanel) {
         className: classes.item
       }, /*#__PURE__*/React.createElement(TextInput, {
         module: "payroll",
-        label: formatMessage(intl, 'payroll', 'paymentPoint.name'),
+        label: formatMessage$1(intl, 'payroll', 'paymentPoint.name'),
         value: payroll === null || payroll === void 0 ? void 0 : payroll.name,
         required: true,
         onChange: function onChange(name) {
@@ -1932,7 +1953,7 @@ var PayrollHeadPanel = /*#__PURE__*/function (_FormPanel) {
         onChange: function onChange(paymentMethod) {
           return _this2.updateAttribute('paymentMethod', paymentMethod);
         },
-        label: formatMessage(intl, 'payroll', 'paymentMethod')
+        label: formatMessage$1(intl, 'payroll', 'paymentMethod')
       }))), /*#__PURE__*/React.createElement(Divider, null), !isPayrollFromFailedInvoices && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement("div", {
         className: classes.item
       }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -2056,7 +2077,7 @@ function PayrollPaymentDataUploadDialog(_ref) {
       border: '0px',
       marginTop: '6px'
     }
-  }, formatMessage(intl, 'payroll', 'payroll.paymentData.upload.label')), /*#__PURE__*/React.createElement(Dialog, {
+  }, formatMessage$1(intl, 'payroll', 'payroll.paymentData.upload.label')), /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
     onClose: handleClose,
     PaperProps: {
@@ -2071,7 +2092,7 @@ function PayrollPaymentDataUploadDialog(_ref) {
     style: {
       marginTop: '10px'
     }
-  }, formatMessage(intl, 'payroll', 'payroll.paymentData.upload.label')), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
+  }, formatMessage$1(intl, 'payroll', 'payroll.paymentData.upload.label')), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: '#DFEDEF',
       paddingLeft: '10px',
@@ -2130,7 +2151,7 @@ function PayrollPaymentDataUploadDialog(_ref) {
       return onSubmit(forms.paymentData);
     },
     disabled: !((_forms$paymentData = forms.paymentData) !== null && _forms$paymentData !== void 0 && _forms$paymentData.file && payrollUuid)
-  }, formatMessage(intl, 'payroll', 'payroll.paymentData.upload.label'))))))));
+  }, formatMessage$1(intl, 'payroll', 'payroll.paymentData.upload.label'))))))));
 }
 var mapStateToProps$d = function mapStateToProps(state) {
   return {
@@ -2143,603 +2164,614 @@ var mapDispatchToProps$d = function mapDispatchToProps(dispatch) {
 };
 var PayrollPaymentDataUploadDialog$1 = injectIntl(withTheme(withStyles(styles$1)(connect(mapStateToProps$d, mapDispatchToProps$d)(PayrollPaymentDataUploadDialog))));
 
-function downloadPayroll(payrollId, payrollFileName) {
-  var blank = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var url = new URL("".concat(window.location.origin).concat(baseApiUrl, "/payroll/csv_reconciliation/"));
-  url.searchParams.append('payroll_id', payrollId);
-  url.searchParams.append('blank', blank);
-  url.searchParams.append('payroll_file_name', payrollFileName);
-  fetch(url).then(function (response) {
-    return response.blob();
-  }).then(function (blob) {
-    var link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.download = blank ? "reconciliation_".concat(payrollFileName, ".csv") : payrollFileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  })["catch"](function (error) {
-    // eslint-disable-next-line no-console
-    console.error('Export failed, reason: ', error);
-  });
-}
-
 var useStyles$b = makeStyles(function (theme) {
   return {
-    paper: theme.paper.paper,
-    tableTitle: theme.table.title,
-    tabs: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    selectedTab: {
-      borderBottom: '4px solid white'
-    },
-    unselectedTab: {
-      borderBottom: '4px solid transparent'
+    form: {
+      padding: 0
     },
-    button: {
-      marginLeft: 'auto',
-      padding: theme.spacing(1),
-      fontSize: '0.875rem',
-      textTransform: 'none'
+    item: {
+      padding: theme.spacing(1)
     }
   };
 });
-function PayrollTab(_ref) {
-  var rights = _ref.rights,
-    setConfirmedAction = _ref.setConfirmedAction,
-    payrollUuid = _ref.payrollUuid,
-    isInTask = _ref.isInTask,
-    payroll = _ref.payroll,
-    isPayrollFromFailedInvoices = _ref.isPayrollFromFailedInvoices;
+function BenefitConsumptionFilterModal(_ref) {
+  var filters = _ref.filters,
+    onChangeFilters = _ref.onChangeFilters;
+  var modulesManager = useModulesManager();
   var classes = useStyles$b();
-  var _useState = useState(BENEFIT_CONSUMPTION_LIST_TAB_VALUE),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeTab = _useState2[0],
-    setActiveTab = _useState2[1];
-  var isSelected = function isSelected(tab) {
-    return tab === activeTab;
+  var _useTranslations = useTranslations('payroll', modulesManager),
+    formatMessage = _useTranslations.formatMessage;
+  var debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME);
+  var filterTextFieldValue = function filterTextFieldValue(filterName) {
+    var _filters$filterName$v, _filters$filterName;
+    return (_filters$filterName$v = filters === null || filters === void 0 || (_filters$filterName = filters[filterName]) === null || _filters$filterName === void 0 ? void 0 : _filters$filterName.value) !== null && _filters$filterName$v !== void 0 ? _filters$filterName$v : EMPTY_STRING;
   };
-  var tabStyle = function tabStyle(tab) {
-    return isSelected(tab) ? classes.selectedTab : classes.unselectedTab;
+  var filterValue = function filterValue(filterName) {
+    var _filters$filterName$v2, _filters$filterName2;
+    return (_filters$filterName$v2 = filters === null || filters === void 0 || (_filters$filterName2 = filters[filterName]) === null || _filters$filterName2 === void 0 ? void 0 : _filters$filterName2.value) !== null && _filters$filterName$v2 !== void 0 ? _filters$filterName$v2 : null;
   };
-  var handleChange = function handleChange(_, tab) {
-    return setActiveTab(tab);
+  var onChangeFilter = function onChangeFilter(filterName) {
+    return function (value) {
+      debouncedOnChangeFilters([{
+        id: filterName,
+        value: value || null,
+        filter: "".concat(filterName, ": ").concat(value)
+      }]);
+    };
   };
-  var modulesManager = useModulesManager();
-  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
-    formatMessage = _useTranslations.formatMessage;
-  var downloadPayrollData = function downloadPayrollData(payrollUuid, payrollName) {
-    downloadPayroll(payrollUuid, payrollName);
+  var onChangeStringFilter = function onChangeStringFilter(filterName) {
+    var lookup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return function (value) {
+      if (lookup) {
+        debouncedOnChangeFilters([{
+          id: filterName,
+          value: value,
+          filter: "".concat(filterName, "_").concat(lookup, ": \"").concat(value, "\"")
+        }]);
+      } else {
+        debouncedOnChangeFilters([{
+          id: filterName,
+          value: value,
+          filter: "".concat(filterName, ": \"").concat(value, "\"")
+        }]);
+      }
+    };
   };
-  return /*#__PURE__*/React.createElement(Paper, {
-    className: classes.paper
-  }, /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    className: "".concat(classes.tableTitle, " ").concat(classes.tabs)
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      "float": 'left'
-    }
-  }, /*#__PURE__*/React.createElement(Contributions, {
-    contributionKey: PAYROLL_TABS_LABEL_CONTRIBUTION_KEY,
-    rights: rights,
-    value: activeTab,
-    onChange: handleChange,
-    isSelected: isSelected,
-    tabStyle: tabStyle,
-    payrollUuid: payrollUuid,
-    isInTask: isInTask,
-    isPayrollFromFailedInvoices: isPayrollFromFailedInvoices
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      "float": 'right',
-      paddingRight: '16px'
+    className: classes.form
+  }, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    module: "payroll",
+    label: "benefitConsumption.individual.firstName",
+    value: filterTextFieldValue('benefit_Individual_FirstName'),
+    onChange: onChangeStringFilter('benefit_Individual_FirstName', CONTAINS_LOOKUP)
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    module: "payroll",
+    label: "benefitConsumption.individual.lastName",
+    value: filterTextFieldValue('benefit_Individual_LastName'),
+    onChange: onChangeStringFilter('benefit_Individual_LastName', CONTAINS_LOOKUP)
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    module: "payroll",
+    label: formatMessage('benefitConsumption.amount'),
+    min: 0,
+    value: filterValue('bill_AmountTotal'),
+    onChange: onChangeFilter('bill_AmountTotal')
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    module: "payroll",
+    label: "benefitConsumption.receipt",
+    value: filterTextFieldValue('benefit_Receipt'),
+    onChange: onChangeStringFilter('benefit_Receipt', CONTAINS_LOOKUP)
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(PublishedComponent, {
+    pubRef: "core.DatePicker",
+    module: "payroll",
+    label: formatMessage('benefitConsumption.dateDue'),
+    value: filterValue('benefit_DateDue'),
+    onChange: function onChange(v) {
+      return onChangeFilters([{
+        id: 'benefit_DateDue',
+        value: v,
+        filter: "benefit_DateDue: \"".concat(v, "\"")
+      }]);
     }
-  }, payrollUuid && !isPayrollFromFailedInvoices && /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return downloadPayrollData(payrollUuid, payroll.name);
-    },
-    color: "#DFEDEF",
-    className: classes.button,
-    style: {
-      border: '0px',
-      marginTop: '6px',
-      textTransform: 'uppercase'
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(PublishedComponent, {
+    pubRef: "core.DatePicker",
+    module: "payroll",
+    label: formatMessage('benefitConsumption.paymentDate'),
+    value: filterValue('bill_DatePayed_Gte'),
+    onChange: function onChange(v) {
+      return onChangeFilters([{
+        id: 'bill_DatePayed_Gte',
+        value: v,
+        filter: "bill_DatePayed_Gte: \"".concat(v, "\"")
+      }]);
     }
-  }, formatMessage('payroll.summary.download')), payrollUuid && (payroll === null || payroll === void 0 ? void 0 : payroll.status) === PAYROLL_STATUS.APPROVE_FOR_PAYMENT && payroll.paymentMethod === 'StrategyOfflinePayment' && /*#__PURE__*/React.createElement(PayrollPaymentDataUploadDialog$1, {
-    payrollUuid: payrollUuid
-  })))), /*#__PURE__*/React.createElement(Contributions, {
-    contributionKey: PAYROLL_TABS_PANEL_CONTRIBUTION_KEY,
-    rights: rights,
-    value: activeTab,
-    setConfirmedAction: setConfirmedAction,
-    payrollUuid: payrollUuid,
-    isInTask: isInTask,
-    isPayrollFromFailedInvoices: isPayrollFromFailedInvoices
-  }));
+  })));
 }
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles$a = makeStyles(function (theme) {
-  return {
-    page: theme.page
-  };
-});
-function PayrollPage(_ref) {
-  var statePayrollUuid = _ref.statePayrollUuid,
-    taskPayrollUuid = _ref.taskPayrollUuid,
-    rights = _ref.rights,
-    confirmed = _ref.confirmed,
-    submittingMutation = _ref.submittingMutation,
-    mutation = _ref.mutation,
-    payroll = _ref.payroll,
-    fetchPayroll = _ref.fetchPayroll,
-    createPayroll = _ref.createPayroll,
-    clearPayroll = _ref.clearPayroll,
-    clearConfirm = _ref.clearConfirm,
-    createPayrollFromFailedInvoices = _ref.createPayrollFromFailedInvoices,
-    journalize = _ref.journalize,
-    benefitPlanId = _ref.benefitPlanId;
+function ErrorSummaryModal(_ref) {
+  var _benefitAttachment$be;
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    benefitAttachment = _ref.benefitAttachment;
   var modulesManager = useModulesManager();
-  var classes = useStyles$a();
-  var history = useHistory();
-  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
-    formatMessage = _useTranslations.formatMessage,
-    formatMessageWithValues = _useTranslations.formatMessageWithValues;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    editedPayroll = _useState2[0],
-    setEditedPayroll = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    payrollUuid = _useState4[0],
-    setPayrollUuid = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isInTask = _useState6[0],
-    setIsInTask = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    readOnly = _useState8[0],
-    setReadOnly = _useState8[1];
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    isPayrollFromFailedInvoices = _useState0[0],
-    setIsPayrollFromFailedInvoices = _useState0[1];
-  var _useState1 = useState(function () {
-      return null;
-    }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    confirmedAction = _useState10[0],
-    setConfirmedAction = _useState10[1];
-  var prevSubmittingMutationRef = useRef();
-  var back = function back() {
-    return history.goBack();
-  };
-  useEffect(function () {
-    if (createPayrollFromFailedInvoices === PAYROLL_FROM_FAILED_INVOICES_URL_PARAM) {
-      setIsPayrollFromFailedInvoices(true);
+  var _useTranslations = useTranslations('payroll', modulesManager),
+    formatMessage = _useTranslations.formatMessage;
+  var jsonExt = benefitAttachment !== null && benefitAttachment !== void 0 && (_benefitAttachment$be = benefitAttachment.benefit) !== null && _benefitAttachment$be !== void 0 && _benefitAttachment$be.jsonExt ? JSON.parse(benefitAttachment.benefit.jsonExt) : {};
+  var outputGateway = "".concat(jsonExt === null || jsonExt === void 0 ? void 0 : jsonExt.output_gateway);
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    onClose: onClose,
+    closeAfterTransition: true,
+    BackdropComponent: Backdrop,
+    BackdropProps: {
+      timeout: 500
     }
-  }, [createPayrollFromFailedInvoices, payrollUuid]);
-  useEffect(function () {
-    setPayrollUuid(statePayrollUuid !== null && statePayrollUuid !== void 0 ? statePayrollUuid : taskPayrollUuid);
-    setIsInTask(!!taskPayrollUuid);
-  }, [taskPayrollUuid, statePayrollUuid]);
-  useEffect(function () {
-    if (payrollUuid) {
-      fetchPayroll(modulesManager, ["id: \"".concat(payrollUuid, "\"")]);
+  }, /*#__PURE__*/React.createElement(Fade, {
+    "in": open
+  }, /*#__PURE__*/React.createElement(Box, {
+    p: 4,
+    style: {
+      backgroundColor: 'white',
+      margin: 'auto',
+      maxWidth: 400,
+      outline: 'none'
     }
-  }, [payrollUuid]);
-  useEffect(function () {
-    if (confirmed && typeof confirmed === 'function') confirmedAction();
-    return function () {
-      return confirmed && clearConfirm(null);
-    };
-  }, [confirmed]);
-  useEffect(function () {
-    if (prevSubmittingMutationRef.current && !submittingMutation) {
-      journalize(mutation);
-      if ((mutation === null || mutation === void 0 ? void 0 : mutation.actionType) === ACTION_TYPE.DELETE_PAYROLL) {
-        back();
-      }
-      if (mutation !== null && mutation !== void 0 && mutation.clientMutationId && (!payrollUuid || isPayrollFromFailedInvoices)) {
-        fetchPayroll(modulesManager, ["clientMutationId: \"".concat(mutation.clientMutationId, "\"")]);
-        setIsPayrollFromFailedInvoices(false);
-      }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6"
+  }, formatMessage('payroll.errorSummary.title')), outputGateway === null || outputGateway === 'undefined' ? /*#__PURE__*/React.createElement(Typography, null, formatMessage('payroll.errorSummary.outputGateway.noInfo')) : /*#__PURE__*/React.createElement(Typography, null, outputGateway), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    justifyContent: "center",
+    mt: 2
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    onClick: onClose,
+    variant: "contained",
+    color: "primary"
+  }, formatMessage('payroll.errorSummary.close'))))));
+}
+
+var styles = function styles(theme) {
+  return {
+    item: theme.paper.item
+  };
+};
+function AdditionalFieldsDialog(_ref) {
+  var intl = _ref.intl,
+    classes = _ref.classes,
+    jsonExt = _ref.jsonExt,
+    buttonLabel = _ref.buttonLabel,
+    title = _ref.title;
+  // eslint-disable-next-line no-param-reassign
+  if (!jsonExt) jsonExt = '{}';
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleOpen = function handleOpen() {
+    setIsOpen(true);
+  };
+  var handleClose = function handleClose() {
+    setIsOpen(false);
+  };
+  var jsonExtFields = createFieldsBasedOnJSON(JSON.stringify(JSON.parse(jsonExt).extra_info));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOpen,
+    variant: "outlined",
+    color: "#DFEDEF",
+    className: classes.button,
+    style: {
+      border: '0px',
+      marginTop: '6px'
     }
-  }, [submittingMutation]);
-  useEffect(function () {
-    prevSubmittingMutationRef.current = submittingMutation;
-  });
-  useEffect(function () {
-    if (payroll) {
-      setReadOnly(payroll === null || payroll === void 0 ? void 0 : payroll.id);
-      if (isPayrollFromFailedInvoices) {
-        setEditedPayroll(_objectSpread$1(_objectSpread$1({}, payroll), {}, {
-          id: null,
-          name: null,
-          paymentCycle: null,
-          status: null,
-          fromFailedInvoicesPayrollId: payroll === null || payroll === void 0 ? void 0 : payroll.id
-        }));
-      } else {
-        setEditedPayroll(payroll);
-      }
-      if (!payrollUuid && payroll !== null && payroll !== void 0 && payroll.id && !isPayrollFromFailedInvoices) {
-        var payrollRouteRef = modulesManager.getRef('payroll.route.payroll');
-        history.replace("/".concat(payrollRouteRef, "/").concat(payroll.id));
+  }, formatMessage$1(intl, 'payroll', buttonLabel)), /*#__PURE__*/React.createElement(Dialog, {
+    open: isOpen,
+    onClose: handleClose,
+    PaperProps: {
+      style: {
+        width: 1200,
+        maxWidth: 1200,
+        maxHeight: 900
       }
     }
-  }, [payroll]);
-  useEffect(function () {
-    return function () {
-      return clearPayroll();
-    };
-  }, []);
-  var mandatoryFieldsEmpty = function mandatoryFieldsEmpty() {
-    if (editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.name && editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.paymentPlan && editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.paymentCycle && editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.paymentMethod && !(editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.isDeleted)) return false;
-    return true;
-  };
-  var canSave = function canSave() {
-    return !mandatoryFieldsEmpty() && (!readOnly || isPayrollFromFailedInvoices);
-  };
-  var handleSave = function handleSave() {
-    createPayroll(editedPayroll, formatMessageWithValues('payroll.mutation.create', mutationLabel(payroll)));
-    if (benefitPlanId) {
-      back();
+  }, /*#__PURE__*/React.createElement("form", {
+    noValidate: true
+  }, /*#__PURE__*/React.createElement(DialogTitle, {
+    style: {
+      marginTop: '10px'
     }
-  };
-  var actions = [];
-  return rights.includes(RIGHT_PAYROLL_CREATE) && /*#__PURE__*/React.createElement("div", {
-    className: classes.page
-  }, /*#__PURE__*/React.createElement(Form, {
-    key: payrollUuid,
-    module: "payroll",
-    title: formatMessageWithValues('payrollPage.title', pageTitle(payroll)),
-    titleParams: pageTitle(payroll),
-    openDirty: isPayrollFromFailedInvoices ? true : !payrollUuid,
-    benefitPlan: editedPayroll,
-    edited: editedPayroll,
-    onEditedChanged: setEditedPayroll,
-    back: !isInTask && back,
-    mandatoryFieldsEmpty: mandatoryFieldsEmpty,
-    canSave: canSave,
-    save: handleSave,
-    HeadPanel: PayrollHeadPanel$1,
-    Panels: [PayrollTab],
-    rights: rights,
-    actions: actions,
-    setConfirmedAction: setConfirmedAction,
-    payrollUuid: payrollUuid,
-    saveTooltip: formatMessage('tooltip.save'),
-    isInTask: !!taskPayrollUuid,
-    payroll: payroll,
-    readOnly: readOnly,
-    isPayrollFromFailedInvoices: isPayrollFromFailedInvoices,
-    benefitPlanId: benefitPlanId
-  }));
+  }, formatMessage$1(intl, 'payroll', title)), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#DFEDEF',
+      paddingLeft: '10px',
+      paddingBottom: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    className: classes.item
+  }, jsonExtFields === null || jsonExtFields === void 0 ? void 0 : jsonExtFields.map(function (jsonExtField) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 6,
+      className: classes.item
+    }, renderInputComponent(MODULE_NAME, jsonExtField));
+  })))), /*#__PURE__*/React.createElement(DialogActions, {
+    style: {
+      display: 'inline',
+      paddingLeft: '10px',
+      marginTop: '25px',
+      marginBottom: '15px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '1000px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      "float": 'left'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClose,
+    variant: "outlined",
+    autoFocus: true,
+    style: {
+      margin: '0 16px',
+      marginBottom: '15px'
+    }
+  }, formatMessage$1(intl, 'payroll', 'payroll.additonalFields.close'))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      "float": 'right',
+      paddingRight: '16px'
+    }
+  }))))));
 }
+var mapStateToProps$c = function mapStateToProps(state) {
+  return {
+    rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : []
+  };
+};
 var mapDispatchToProps$c = function mapDispatchToProps(dispatch) {
-  return bindActionCreators({
-    fetchPayroll: fetchPayroll,
-    createPayroll: createPayroll,
-    clearPayroll: clearPayroll,
-    coreConfirm: coreConfirm,
-    clearConfirm: clearConfirm,
-    journalize: journalize
-  }, dispatch);
+  return bindActionCreators({}, dispatch);
 };
-var mapStateToProps$c = function mapStateToProps(state, props) {
-  var _props$match, _props$match2, _props$match3, _props$match4, _state$core$user$i_us, _state$core;
-  return {
-    statePayrollUuid: (props === null || props === void 0 || (_props$match = props.match) === null || _props$match === void 0 || (_props$match = _props$match.params) === null || _props$match === void 0 ? void 0 : _props$match.payroll_uuid) === 'null' ? null : props === null || props === void 0 || (_props$match2 = props.match) === null || _props$match2 === void 0 ? void 0 : _props$match2.params.payroll_uuid,
-    createPayrollFromFailedInvoices: props === null || props === void 0 || (_props$match3 = props.match) === null || _props$match3 === void 0 || (_props$match3 = _props$match3.params) === null || _props$match3 === void 0 ? void 0 : _props$match3.createPayrollFromFailedInvoices,
-    benefitPlanId: props === null || props === void 0 || (_props$match4 = props.match) === null || _props$match4 === void 0 || (_props$match4 = _props$match4.params) === null || _props$match4 === void 0 ? void 0 : _props$match4.benefitPlanId,
-    rights: (_state$core$user$i_us = (_state$core = state.core) === null || _state$core === void 0 || (_state$core = _state$core.user) === null || _state$core === void 0 || (_state$core = _state$core.i_user) === null || _state$core === void 0 ? void 0 : _state$core.rights) !== null && _state$core$user$i_us !== void 0 ? _state$core$user$i_us : [],
-    confirmed: state.core.confirmed,
-    submittingMutation: state.payroll.submittingMutation,
-    mutation: state.payroll.mutation,
-    payroll: state.payroll.payroll
-  };
-};
-var PayrollPage$1 = connect(mapStateToProps$c, mapDispatchToProps$c)(PayrollPage);
+var AdditionalFieldsDialog$1 = injectIntl(withTheme(withStyles(styles)(connect(mapStateToProps$c, mapDispatchToProps$c)(AdditionalFieldsDialog))));
 
-var useStyles$9 = makeStyles(function (theme) {
+/* eslint-disable max-len */
+var useStyles$a = makeStyles(function () {
   return {
-    form: {
-      padding: '0 0 10px 0',
+    topHeader: {
+      display: 'flex',
+      justifyContent: 'start',
+      alignItems: 'center',
+      width: '100%',
+      '& img': {
+        minWidth: '250px',
+        maxWidth: '300px',
+        width: 'auto',
+        height: 'auto'
+      }
+    },
+    printContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '20px',
+      fontWeight: '500'
+    },
+    date: {
+      fontSize: '16px'
+    },
+    detailsContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '12px',
       width: '100%'
     },
-    item: {
-      padding: theme.spacing(1)
+    detailRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '4px'
+    },
+    detailName: {
+      fontWeight: '600',
+      fontSize: '16px',
+      textTransform: 'uppercase'
+    },
+    detailValue: {
+      fontWeight: '500',
+      backgroundColor: '#f5f5f5',
+      padding: '6px',
+      borderRadius: '8px',
+      fontSize: '15px'
+    },
+    containerPadding: {
+      padding: '32px'
+    },
+    dividerMargin: {
+      margin: '12px 0'
+    },
+    sectionTitle: {
+      fontWeight: '700',
+      fontSize: '18px',
+      textTransform: 'uppercase',
+      marginBottom: '12px'
     }
   };
 });
-function PayrollFilter(_ref) {
-  var _filters$isDeleted;
-  var filters = _ref.filters,
-    onChangeFilters = _ref.onChangeFilters,
-    _ref$statusReadOnly = _ref.statusReadOnly,
-    statusReadOnly = _ref$statusReadOnly === void 0 ? false : _ref$statusReadOnly;
-  var classes = useStyles$9();
+var PayrollBenefitPrintTemplate = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var benefitAttachments = _ref.benefitAttachments;
+  if (!benefitAttachments) return null;
+  var classes = useStyles$a();
   var modulesManager = useModulesManager();
-  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+  var _useTranslations = useTranslations(modulesManager, MODULE_NAME),
     formatMessage = _useTranslations.formatMessage;
-  var debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME);
-  var filterTextFieldValue = function filterTextFieldValue(filterName) {
-    var _filters$filterName$v, _filters$filterName;
-    return (_filters$filterName$v = filters === null || filters === void 0 || (_filters$filterName = filters[filterName]) === null || _filters$filterName === void 0 ? void 0 : _filters$filterName.value) !== null && _filters$filterName$v !== void 0 ? _filters$filterName$v : EMPTY_STRING;
-  };
-  var filterValue = function filterValue(filterName) {
-    var _filters$filterName$v2, _filters$filterName2;
-    return (_filters$filterName$v2 = filters === null || filters === void 0 || (_filters$filterName2 = filters[filterName]) === null || _filters$filterName2 === void 0 ? void 0 : _filters$filterName2.value) !== null && _filters$filterName$v2 !== void 0 ? _filters$filterName$v2 : null;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classes.printContainer
+  }, benefitAttachments.map(function (benefitAttachment, index) {
+    var _benefitAttachment$bi;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classes.detailsContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.sectionTitle
+    }, "Payment: ".concat(benefitAttachment.benefit.code, " - ").concat(benefitAttachment.benefit.individual.firstName, ", ").concat(benefitAttachment.benefit.individual.lastName)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.individual.firstName')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.individual.firstName)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.individual.lastName')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.individual.lastName)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.code')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.code)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.dateDue')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.dateDue)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.receipt')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.receipt)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.amount')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.amount)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.type')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.type)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.status')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.status)), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.payedOnTime')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, benefitAttachment.benefit.payedOnTime ? 'Yes' : 'No')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailRow
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.detailName
+    }, formatMessage('payroll.benefitConsumption.paymentDate')), /*#__PURE__*/React.createElement("div", {
+      className: classes.detailValue
+    }, !benefitAttachment.benefit.receipt ? '' : benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$bi = benefitAttachment.bill) === null || _benefitAttachment$bi === void 0 ? void 0 : _benefitAttachment$bi.datePayed)), /*#__PURE__*/React.createElement(Divider, {
+      className: classes.dividerMargin
+    }));
+  }));
+});
+
+function BenefitConsumptionSearcherModal(_ref) {
+  var fetchBenefitAttachments = _ref.fetchBenefitAttachments,
+    fetchingBenefitAttachments = _ref.fetchingBenefitAttachments,
+    fetchedBenefitAttachments = _ref.fetchedBenefitAttachments,
+    errorBenefitAttachments = _ref.errorBenefitAttachments,
+    benefitAttachments = _ref.benefitAttachments,
+    benefitAttachmentsPageInfo = _ref.benefitAttachmentsPageInfo,
+    benefitAttachmentsTotalCount = _ref.benefitAttachmentsTotalCount,
+    payrollUuid = _ref.payrollUuid,
+    reconciledMode = _ref.reconciledMode,
+    payrollDetail = _ref.payrollDetail,
+    deleteBenefitConsumption = _ref.deleteBenefitConsumption;
+  var modulesManager = useModulesManager();
+  var _useTranslations = useTranslations('payroll', modulesManager),
+    formatMessage = _useTranslations.formatMessage,
+    formatMessageWithValues = _useTranslations.formatMessageWithValues;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedBenefitAttachment = _useState2[0],
+    setSelectedBenefitAttachment = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openConfirmDialog = _useState4[0],
+    setOpenConfirmDialog = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    benefitToDelete = _useState6[0],
+    setBenefitToDelete = _useState6[1];
+  var payrollPrintTemplateRef = useRef(null);
+  var handlePrint = useReactToPrint({
+    documentTitle: "".concat(payrollUuid)
+  });
+  var fetch = function fetch(params) {
+    fetchBenefitAttachments(modulesManager, params);
   };
-  var onChangeStringFilter = function onChangeStringFilter(filterName) {
-    var lookup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return function (value) {
-      if (lookup) {
-        debouncedOnChangeFilters([{
-          id: filterName,
-          value: value,
-          filter: "".concat(filterName, "_").concat(lookup, ": \"").concat(value, "\"")
-        }]);
-      } else {
-        debouncedOnChangeFilters([{
-          id: filterName,
-          value: value,
-          filter: "".concat(filterName, ": \"").concat(value, "\"")
-        }]);
+  var defaultFilters = function defaultFilters() {
+    var filters = {
+      isDeleted: {
+        value: false,
+        filter: 'isDeleted: false'
+      },
+      payrollUuid: {
+        value: payrollUuid,
+        filter: "payrollUuid: \"".concat(payrollUuid, "\"")
       }
     };
+    if (reconciledMode && payrollDetail.paymentMethod !== PAYMENT_METHOD.STRATEGY_ONLINE_PAYMENT && payrollDetail.paymentMethod !== PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) {
+      filters.benefit_Status = {
+        value: 'RECONCILED',
+        filter: "benefit_Status: ".concat(PAYROLL_STATUS.RECONCILED)
+      };
+    }
+    return filters;
   };
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    className: classes.form
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 3,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    module: "payroll",
-    label: formatMessage('payroll.name'),
-    value: filterTextFieldValue('name'),
-    onChange: onChangeStringFilter('name', CONTAINS_LOOKUP)
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 3,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(PublishedComponent, {
-    pubRef: "contributionPlan.PaymentPlanPicker",
-    filters: filters,
-    value: filterValue('paymentPlan_Id'),
-    onChange: function onChange(paymentPlan) {
-      return onChangeFilters([{
-        id: 'paymentPlan_Id',
-        value: paymentPlan,
-        filter: "paymentPlan_Id: \"".concat((paymentPlan === null || paymentPlan === void 0 ? void 0 : paymentPlan.id) && decodeId(paymentPlan.id), "\"")
-      }]);
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 3,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(PublishedComponent, {
-    pubRef: "paymentCycle.PaymentCyclePicker",
-    withLabel: true,
-    withPlaceholder: true,
-    filters: filters,
-    value: filterValue('paymentCycle_Id'),
-    onChange: function onChange(paymentCycle) {
-      return onChangeFilters([{
-        id: 'paymentCycle_Id',
-        value: paymentCycle,
-        filter: "paymentCycle_Id: \"".concat((paymentCycle === null || paymentCycle === void 0 ? void 0 : paymentCycle.id) && decodeId(paymentCycle.id), "\"")
-      }]);
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(PayrollStatusPicker, {
-    withNull: true,
-    nullLabel: formatMessage('any'),
-    label: formatMessage('paymentMethod'),
-    value: filterValue('status'),
-    readOnly: statusReadOnly,
-    onChange: function onChange(value) {
-      return onChangeFilters([{
-        id: 'status',
-        value: value,
-        filter: value ? "status: ".concat(value) : EMPTY_STRING
-      }]);
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(PaymentMethodPicker$1, {
-    withNull: true,
-    nullLabel: formatMessage('any'),
-    label: formatMessage('payroll.paymentMethod'),
-    value: filterValue('paymentMethod'),
-    onChange: function onChange(value) {
-      return onChangeFilters([{
-        id: 'paymentMethod',
-        value: value,
-        filter: "paymentMethod: \"".concat(value, "\"")
-      }]);
+  var defaultFiltersArray = function defaultFiltersArray() {
+    var filters = ['isDeleted: false', "first: ".concat(DEFAULT_PAGE_SIZE), "payrollUuid: \"".concat(payrollUuid, "\"")];
+    if (reconciledMode && payrollDetail.paymentMethod !== PAYMENT_METHOD.STRATEGY_ONLINE_PAYMENT && payrollDetail.paymentMethod !== PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) {
+      filters.push("benefit_Status: ".concat(PAYROLL_STATUS.RECONCILED));
     }
-  })), /*#__PURE__*/React.createElement(ControlledField, {
-    module: "payroll",
-    id: "payrollFilter.showHistory",
-    field: /*#__PURE__*/React.createElement(Grid, {
-      item: true,
-      xs: 12,
-      className: classes.item
-    }, /*#__PURE__*/React.createElement(FormControlLabel, {
-      control: /*#__PURE__*/React.createElement(Checkbox, {
-        color: "primary",
-        checked: filters === null || filters === void 0 || (_filters$isDeleted = filters.isDeleted) === null || _filters$isDeleted === void 0 ? void 0 : _filters$isDeleted.value,
-        onChange: function onChange() {
-          var _filters$isDeleted2, _filters$isDeleted3;
-          return onChangeFilters([{
-            id: 'isDeleted',
-            value: !(filters !== null && filters !== void 0 && (_filters$isDeleted2 = filters.isDeleted) !== null && _filters$isDeleted2 !== void 0 && _filters$isDeleted2.value),
-            filter: "isDeleted: ".concat(!(filters !== null && filters !== void 0 && (_filters$isDeleted3 = filters.isDeleted) !== null && _filters$isDeleted3 !== void 0 && _filters$isDeleted3.value))
-          }]);
-        }
-      }),
-      label: formatMessage('tooltip.isDeleted')
-    }))
-  }));
-}
-
-function PayrollSearcher(_ref) {
-  var deletePayrolls = _ref.deletePayrolls,
-    fetchingPayrolls = _ref.fetchingPayrolls,
-    fetchedPayrolls = _ref.fetchedPayrolls,
-    errorPayrolls = _ref.errorPayrolls,
-    payrolls = _ref.payrolls,
-    pageInfo = _ref.pageInfo,
-    totalCount = _ref.totalCount,
-    fetchPayrolls = _ref.fetchPayrolls,
-    coreConfirm = _ref.coreConfirm,
-    clearConfirm = _ref.clearConfirm,
-    confirmed = _ref.confirmed,
-    submittingMutation = _ref.submittingMutation,
-    mutation = _ref.mutation;
-  var history = useHistory();
-  var modulesManager = useModulesManager();
-  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
-    formatMessage = _useTranslations.formatMessage,
-    formatMessageWithValues = _useTranslations.formatMessageWithValues;
-  var rights = useSelector(function (store) {
-    var _store$core$user$i_us;
-    return (_store$core$user$i_us = store.core.user.i_user.rights) !== null && _store$core$user$i_us !== void 0 ? _store$core$user$i_us : [];
-  });
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    payrollToDelete = _useState2[0],
-    setPayrollToDelete = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    deletedPayrollUuids = _useState4[0],
-    setDeletedPayrollUuids = _useState4[1];
-  var prevSubmittingMutationRef = useRef();
-  var openDeletePayrollConfirmDialog = function openDeletePayrollConfirmDialog() {
-    coreConfirm(formatMessageWithValues('payroll.delete.confirm.title', pageTitle(payrollToDelete)), formatMessage('payroll.delete.confirm.message'));
+    return filters;
   };
-  useEffect(function () {
-    return payrollToDelete && openDeletePayrollConfirmDialog();
-  }, [payrollToDelete]);
-  useEffect(function () {
-    if (payrollToDelete && confirmed) {
-      deletePayrolls(payrollToDelete, formatMessageWithValues('payroll.mutation.deleteLabel', mutationLabel(payrollToDelete)));
-      setDeletedPayrollUuids([].concat(_toConsumableArray(deletedPayrollUuids), [payrollToDelete.id]));
-    }
-    if (payrollToDelete && confirmed !== null) {
-      setPayrollToDelete(null);
-    }
-    return function () {
-      return confirmed && clearConfirm(false);
-    };
-  }, [confirmed]);
-  useEffect(function () {
-    if (prevSubmittingMutationRef.current && !submittingMutation) {
-      journalize(mutation);
-    }
-  }, [submittingMutation]);
-  useEffect(function () {
-    prevSubmittingMutationRef.current = submittingMutation;
-  });
   var headers = function headers() {
-    return ['payroll.name', 'payroll.benefitPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'emptyLabel'];
-  };
-  var sorts = function sorts() {
-    return [['name', true], ['benefitPlan', true], ['paymentPoint', true], ['status', true], ['paymentMethod', true]];
-  };
-  var defaultFilters = function defaultFilters() {
-    return {
-      isDeleted: {
-        value: false,
-        filter: 'isDeleted: false'
-      }
-    };
-  };
-  var fetch = function fetch(params) {
-    return fetchPayrolls(modulesManager, params);
+    return ['benefitConsumption.photo', 'benefitConsumption.individual.firstName', 'benefitConsumption.individual.lastName', 'benefitConsumption.amount', 'benefitConsumption.receipt', 'benefitConsumption.dateDue', 'benefitConsumption.payedOnTime', 'benefitConsumption.paymentDate', 'benefitConsumption.status', '', ''];
   };
-  var rowIdentifier = function rowIdentifier(payroll) {
-    return payroll.id;
+  var confirmDeleteBenefitConsumption = function confirmDeleteBenefitConsumption(benefit) {
+    setBenefitToDelete(benefit);
+    setOpenConfirmDialog(true);
   };
-  var openPayroll = function openPayroll(payroll) {
-    return rights.includes(RIGHT_PAYROLL_SEARCH) && history.push("/".concat(modulesManager.getRef(PAYROLL_PAYROLL_ROUTE), "/").concat(payroll === null || payroll === void 0 ? void 0 : payroll.id));
+  var handleDeleteBenefitConsumption = function handleDeleteBenefitConsumption() {
+    deleteBenefitConsumption(benefitToDelete.benefit, formatMessageWithValues('payroll.mutation.deleteLabel', mutationLabel(benefitToDelete.benefit.code)));
+    setOpenConfirmDialog(false);
+    setBenefitToDelete(null);
+    var filters = defaultFiltersArray();
+    fetchBenefitAttachments(modulesManager, filters); // Refresh the searcher after deletion
   };
-  var onDelete = function onDelete(payroll) {
-    return setPayrollToDelete(payroll);
+  var checkBenefitDueDate = function checkBenefitDueDate(benefitAttachment) {
+    if (!benefitAttachment.benefit.receipt) {
+      return ''; // return empty string if datePayed is null
+    }
+    return benefitAttachment.benefit && benefitAttachment.benefit.dateDue >= benefitAttachment.bill.datePayed ? 'True' : 'False';
   };
   var itemFormatters = function itemFormatters() {
-    return [function (payroll) {
-      return payroll.name;
-    }, function (payroll) {
-      return payroll.benefitPlan ? "".concat(payroll.benefitPlan.code, " ").concat(payroll.benefitPlan.name) : '';
-    }, function (payroll) {
-      return payroll.paymentPoint ? "".concat(payroll.paymentPoint.name) : '';
-    }, function (payroll) {
-      return payroll.status ? "".concat(payroll.status) : '';
-    }, function (payroll) {
-      return payroll.paymentMethod ? "".concat(payroll.paymentMethod) : '';
-    }, function (payroll) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        title: formatMessage('tooltip.viewDetails')
-      }, /*#__PURE__*/React.createElement(IconButton, {
+    return [function (benefitAttachment) {
+      return benefitAttachment.benefit.receipt ? /*#__PURE__*/React.createElement(PhotoCameraOutlinedIcon, {
+        style: {
+          fontSize: 150
+        }
+      }) : null;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$be;
+      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be = benefitAttachment.benefit) === null || _benefitAttachment$be === void 0 || (_benefitAttachment$be = _benefitAttachment$be.individual) === null || _benefitAttachment$be === void 0 ? void 0 : _benefitAttachment$be.firstName;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$be2;
+      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be2 = benefitAttachment.benefit) === null || _benefitAttachment$be2 === void 0 || (_benefitAttachment$be2 = _benefitAttachment$be2.individual) === null || _benefitAttachment$be2 === void 0 ? void 0 : _benefitAttachment$be2.lastName;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$bi;
+      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$bi = benefitAttachment.bill) === null || _benefitAttachment$bi === void 0 ? void 0 : _benefitAttachment$bi.amountTotal;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$be3;
+      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be3 = benefitAttachment.benefit) === null || _benefitAttachment$be3 === void 0 ? void 0 : _benefitAttachment$be3.receipt;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$be4;
+      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be4 = benefitAttachment.benefit) === null || _benefitAttachment$be4 === void 0 ? void 0 : _benefitAttachment$be4.dateDue;
+    }, function (benefitAttachment) {
+      return checkBenefitDueDate(benefitAttachment);
+    }, function (benefitAttachment) {
+      var _benefitAttachment$bi2;
+      return !benefitAttachment.benefit.receipt ? '' : benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$bi2 = benefitAttachment.bill) === null || _benefitAttachment$bi2 === void 0 ? void 0 : _benefitAttachment$bi2.datePayed;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$be5;
+      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be5 = benefitAttachment.benefit) === null || _benefitAttachment$be5 === void 0 ? void 0 : _benefitAttachment$be5.status;
+    }, function (benefitAttachment) {
+      var _benefitAttachment$be6;
+      return /*#__PURE__*/React.createElement(AdditionalFieldsDialog$1, {
+        jsonExt: benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be6 = benefitAttachment.benefit) === null || _benefitAttachment$be6 === void 0 ? void 0 : _benefitAttachment$be6.jsonExt,
+        buttonLabel: "payroll.additonalFields.showAdditionalFields",
+        title: "payroll.additonalFields.label"
+      });
+    }, function (benefitAttachment) {
+      return /*#__PURE__*/React.createElement(Button, {
+        onClick: function onClick() {},
+        variant: "contained",
+        color: "primary",
+        disabled: !!benefitAttachment.benefit.receipt
+      }, formatMessage('payroll.summary.confirm'));
+    }, function (benefitAttachment) {
+      return (payrollDetail.paymentMethod === PAYMENT_METHOD.STRATEGY_ONLINE_PAYMENT || payrollDetail.paymentMethod === PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) && payrollDetail.status === PAYROLL_STATUS.RECONCILED && benefitAttachment.benefit.status !== 'RECONCILED' && /*#__PURE__*/React.createElement(Button, {
         onClick: function onClick() {
-          return openPayroll(payroll);
+          return setSelectedBenefitAttachment(benefitAttachment);
+        },
+        variant: "contained",
+        style: {
+          backgroundColor: '#b80000',
+          color: 'white'
         }
-      }, /*#__PURE__*/React.createElement(VisibilityIcon, null)));
-    }, function (payroll) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        title: formatMessage('tooltip.delete')
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, formatMessage('payroll.summary.benefit_error'));
+    }, function (benefitAttachment) {
+      return payrollDetail.status === PAYROLL_STATUS.PENDING_APPROVAL && benefitAttachment.benefit.status !== 'PENDING_DELETION' && /*#__PURE__*/React.createElement(Button, {
         onClick: function onClick() {
-          return onDelete(payroll);
+          return confirmDeleteBenefitConsumption(benefitAttachment);
         },
-        disabled: deletedPayrollUuids.includes(payroll.id) || payroll.status !== PAYROLL_STATUS.PENDING_APPROVAL
-      }, /*#__PURE__*/React.createElement(DeleteIcon, null)));
-    }];
-  };
-  var onDoubleClick = function onDoubleClick(payroll) {
-    return openPayroll(payroll);
+        variant: "contained",
+        style: {
+          backgroundColor: '#b80000',
+          color: 'white'
+        }
+      }, formatMessage('payroll.summary.benefit_delete'));
+    }];
   };
-  var payrollFilter = function payrollFilter(_ref2) {
+  var rowIdentifier = function rowIdentifier(benefitAttachment) {
+    return benefitAttachment.id;
+  };
+  var sorts = function sorts() {
+    return [['benefit_photo', false], ['benefit_individual_FirstName', true], ['benefit_individual_LastName', true], ['bill_amountTotal', true], ['benefit_receipt', true], ['benefit_dateDue', true]];
+  };
+  var benefitConsumptionFilterModal = function benefitConsumptionFilterModal(_ref2) {
     var filters = _ref2.filters,
       onChangeFilters = _ref2.onChangeFilters;
-    return /*#__PURE__*/React.createElement(PayrollFilter, {
+    return /*#__PURE__*/React.createElement(BenefitConsumptionFilterModal, {
       filters: filters,
       onChangeFilters: onChangeFilters
     });
   };
-  var isRowDisabled = function isRowDisabled(_, payroll) {
-    return deletedPayrollUuids.includes(payroll.id);
-  };
-  return /*#__PURE__*/React.createElement(Searcher, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "contained",
+    color: "primary",
+    startIcon: /*#__PURE__*/React.createElement(PrintIcon, null),
+    onClick: function onClick(e) {
+      e.preventDefault();
+      handlePrint(null, function () {
+        return payrollPrintTemplateRef.current;
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "subtitle1"
+  }, "Print"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Searcher, {
     module: "payroll",
-    FilterPane: payrollFilter,
+    FilterPane: benefitConsumptionFilterModal,
     fetch: fetch,
-    items: payrolls,
-    itemsPageInfo: pageInfo,
-    fetchedItems: fetchedPayrolls,
-    fetchingItems: fetchingPayrolls,
-    errorItems: errorPayrolls,
-    tableTitle: formatMessageWithValues('payrollSearcher.results', {
-      totalCount: totalCount
+    items: benefitAttachments,
+    itemsPageInfo: benefitAttachmentsPageInfo,
+    fetchingItems: fetchingBenefitAttachments,
+    fetchedItems: fetchedBenefitAttachments,
+    errorItems: errorBenefitAttachments,
+    tableTitle: formatMessageWithValues('benefitAttachment.searcherResultsTitle', {
+      benefitAttachmentsTotalCount: benefitAttachmentsTotalCount
     }),
     headers: headers,
     itemFormatters: itemFormatters,
@@ -2747,989 +2779,1089 @@ function PayrollSearcher(_ref) {
     rowsPerPageOptions: ROWS_PER_PAGE_OPTIONS,
     defaultPageSize: DEFAULT_PAGE_SIZE,
     rowIdentifier: rowIdentifier,
-    onDoubleClick: onDoubleClick,
-    defaultFilters: defaultFilters(),
-    rowDisabled: isRowDisabled,
-    rowLocked: isRowDisabled
-  });
+    defaultFilters: defaultFilters()
+  }), selectedBenefitAttachment && /*#__PURE__*/React.createElement(ErrorSummaryModal, {
+    open: !!selectedBenefitAttachment,
+    onClose: function onClose() {
+      return setSelectedBenefitAttachment(null);
+    },
+    benefitAttachment: selectedBenefitAttachment
+  }), /*#__PURE__*/React.createElement(Dialog, {
+    open: openConfirmDialog,
+    onClose: function onClose() {
+      return setOpenConfirmDialog(false);
+    }
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, formatMessage('benefitConsumption.delete.confirm.title')), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, formatMessage('benefitConsumption.delete.confirm.message'))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setOpenConfirmDialog(false);
+    },
+    color: "primary"
+  }, formatMessage('benefitConsumption.cancel')), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleDeleteBenefitConsumption,
+    color: "primary",
+    autoFocus: true
+  }, formatMessage('benefitConsumption.confirm')))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(PayrollBenefitPrintTemplate, {
+    ref: payrollPrintTemplateRef,
+    benefitAttachments: benefitAttachments
+  }))));
 }
 var mapStateToProps$b = function mapStateToProps(state) {
   return {
-    fetchingPayrolls: state.payroll.fetchingPayrolls,
-    fetchedPayrolls: state.payroll.fetchedPayrolls,
-    errorPayrolls: state.payroll.errorPayrolls,
-    payrolls: state.payroll.payrolls,
-    pageInfo: state.payroll.payrollsPageInfo,
-    totalCount: state.payroll.payrollsTotalCount,
-    confirmed: state.core.confirmed,
-    submittingMutation: state.payroll.submittingMutation,
-    mutation: state.payroll.mutation
+    fetchingBenefitAttachments: state.payroll.fetchingBenefitAttachments,
+    fetchedBenefitAttachments: state.payroll.fetchedBenefitAttachments,
+    errorBenefitAttachments: state.payroll.errorBenefitAttachments,
+    benefitAttachments: state.payroll.benefitAttachments,
+    benefitAttachmentsPageInfo: state.payroll.benefitAttachmentsPageInfo,
+    benefitAttachmentsTotalCount: state.payroll.benefitAttachmentsTotalCount
   };
 };
 var mapDispatchToProps$b = function mapDispatchToProps(dispatch) {
   return bindActionCreators({
-    fetchPayrolls: fetchPayrolls,
-    deletePayrolls: deletePayrolls,
-    journalize: journalize,
-    clearConfirm: clearConfirm,
-    coreConfirm: coreConfirm
+    fetchBenefitAttachments: fetchBenefitAttachments,
+    deleteBenefitConsumption: deleteBenefitConsumption
   }, dispatch);
 };
-var PayrollSearcher$1 = connect(mapStateToProps$b, mapDispatchToProps$b)(PayrollSearcher);
+var BenefitConsumptionSearcherModal$1 = connect(mapStateToProps$b, mapDispatchToProps$b)(BenefitConsumptionSearcherModal);
 
-var useStyles$8 = makeStyles(function (theme) {
-  return {
-    page: theme.page,
-    fab: theme.fab
-  };
-});
-function PayrollsPage() {
-  var modulesManager = useModulesManager();
-  var classes = useStyles$8();
-  var history = useHistory();
-  var rights = useSelector(function (store) {
-    var _store$core$user$i_us;
-    return (_store$core$user$i_us = store.core.user.i_user.rights) !== null && _store$core$user$i_us !== void 0 ? _store$core$user$i_us : [];
+function downloadPayroll(payrollId, payrollFileName) {
+  var blank = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var url = new URL("".concat(window.location.origin).concat(baseApiUrl, "/payroll/csv_reconciliation/"));
+  url.searchParams.append('payroll_id', payrollId);
+  url.searchParams.append('blank', blank);
+  url.searchParams.append('payroll_file_name', payrollFileName);
+  fetch(url).then(function (response) {
+    return response.blob();
+  }).then(function (blob) {
+    var link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = blank ? "reconciliation_".concat(payrollFileName, ".csv") : payrollFileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  })["catch"](function (error) {
+    // eslint-disable-next-line no-console
+    console.error('Export failed, reason: ', error);
   });
-  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
-    formatMessage = _useTranslations.formatMessage;
-  var onCreate = function onCreate() {
-    return history.push("/".concat(modulesManager.getRef(PAYROLL_PAYROLL_ROUTE)));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.page
-  }, /*#__PURE__*/React.createElement(Helmet, {
-    title: formatMessage('paymentPoint.page.title')
-  }), rights.includes(RIGHT_PAYROLL_SEARCH) && /*#__PURE__*/React.createElement(PayrollSearcher$1, null), rights.includes(RIGHT_PAYROLL_CREATE) && withTooltip(/*#__PURE__*/React.createElement("div", {
-    className: classes.fab
-  }, /*#__PURE__*/React.createElement(Fab, {
-    color: "primary",
-    onClick: onCreate
-  }, /*#__PURE__*/React.createElement(AddIcon, null))), formatMessage('createButton.tooltip')));
 }
 
-var useStyles$7 = makeStyles(function (theme) {
-  return {
-    form: {
-      padding: 0
-    },
-    item: {
-      padding: theme.spacing(1)
-    }
-  };
-});
-function BenefitConsumptionFilterModal(_ref) {
-  var filters = _ref.filters,
-    onChangeFilters = _ref.onChangeFilters;
+function PaymentApproveForPaymentDialog(_ref) {
+  var _payrollDetail$id, _bistpSummary$reconci, _bistpSummary$total, _bistpSummary$pending, _bistpSummary$rejecte, _bistpSummary$skipped, _bistpSummary$sendFai;
+  var classes = _ref.classes,
+    payroll = _ref.payroll,
+    closePayroll = _ref.closePayroll,
+    rejectPayroll = _ref.rejectPayroll,
+    payrollDetail = _ref.payrollDetail,
+    fetchPayroll = _ref.fetchPayroll,
+    makePaymentForPayroll = _ref.makePaymentForPayroll;
   var modulesManager = useModulesManager();
-  var classes = useStyles$7();
-  var _useTranslations = useTranslations('payroll', modulesManager),
-    formatMessage = _useTranslations.formatMessage;
-  var debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME);
-  var filterTextFieldValue = function filterTextFieldValue(filterName) {
-    var _filters$filterName$v, _filters$filterName;
-    return (_filters$filterName$v = filters === null || filters === void 0 || (_filters$filterName = filters[filterName]) === null || _filters$filterName === void 0 ? void 0 : _filters$filterName.value) !== null && _filters$filterName$v !== void 0 ? _filters$filterName$v : EMPTY_STRING;
-  };
-  var filterValue = function filterValue(filterName) {
-    var _filters$filterName$v2, _filters$filterName2;
-    return (_filters$filterName$v2 = filters === null || filters === void 0 || (_filters$filterName2 = filters[filterName]) === null || _filters$filterName2 === void 0 ? void 0 : _filters$filterName2.value) !== null && _filters$filterName$v2 !== void 0 ? _filters$filterName$v2 : null;
-  };
-  var onChangeFilter = function onChangeFilter(filterName) {
-    return function (value) {
-      debouncedOnChangeFilters([{
-        id: filterName,
-        value: value || null,
-        filter: "".concat(filterName, ": ").concat(value)
-      }]);
-    };
+  var _useState = useState((_payrollDetail$id = payrollDetail === null || payrollDetail === void 0 ? void 0 : payrollDetail.id) !== null && _payrollDetail$id !== void 0 ? _payrollDetail$id : null),
+    _useState2 = _slicedToArray(_useState, 1),
+    payrollUuid = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    totalBeneficiaries = _useState6[0],
+    setTotalBeneficiaries = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedBeneficiaries = _useState8[0],
+    setSelectedBeneficiaries = _useState8[1];
+  var _useState9 = useState(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    approvedBeneficiaries = _useState0[0],
+    setApprovedBeneficiaries = _useState0[1];
+  var _useState1 = useState(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    totalBillAmount = _useState10[0],
+    setTotalBillAmount = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    totalReconciledBillAmount = _useState12[0],
+    setTotalReconciledBillAmount = _useState12[1];
+  var handleOpen = function handleOpen() {
+    if (payrollUuid) {
+      fetchPayroll(modulesManager, ["id: \"".concat(payrollUuid, "\"")]);
+    }
+    setIsOpen(true);
   };
-  var onChangeStringFilter = function onChangeStringFilter(filterName) {
-    var lookup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return function (value) {
-      if (lookup) {
-        debouncedOnChangeFilters([{
-          id: filterName,
-          value: value,
-          filter: "".concat(filterName, "_").concat(lookup, ": \"").concat(value, "\"")
-        }]);
-      } else {
-        debouncedOnChangeFilters([{
-          id: filterName,
-          value: value,
-          filter: "".concat(filterName, ": \"").concat(value, "\"")
-        }]);
-      }
-    };
+  var handleClose = function handleClose() {
+    setIsOpen(false);
   };
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    className: classes.form
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    module: "payroll",
-    label: "benefitConsumption.individual.firstName",
-    value: filterTextFieldValue('benefit_Individual_FirstName'),
-    onChange: onChangeStringFilter('benefit_Individual_FirstName', CONTAINS_LOOKUP)
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    module: "payroll",
-    label: "benefitConsumption.individual.lastName",
-    value: filterTextFieldValue('benefit_Individual_LastName'),
-    onChange: onChangeStringFilter('benefit_Individual_LastName', CONTAINS_LOOKUP)
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(NumberInput, {
-    module: "payroll",
-    label: formatMessage('benefitConsumption.amount'),
-    min: 0,
-    value: filterValue('bill_AmountTotal'),
-    onChange: onChangeFilter('bill_AmountTotal')
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    module: "payroll",
-    label: "benefitConsumption.receipt",
-    value: filterTextFieldValue('benefit_Receipt'),
-    onChange: onChangeStringFilter('benefit_Receipt', CONTAINS_LOOKUP)
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(PublishedComponent, {
-    pubRef: "core.DatePicker",
-    module: "payroll",
-    label: formatMessage('benefitConsumption.dateDue'),
-    value: filterValue('benefit_DateDue'),
-    onChange: function onChange(v) {
-      return onChangeFilters([{
-        id: 'benefit_DateDue',
-        value: v,
-        filter: "benefit_DateDue: \"".concat(v, "\"")
-      }]);
-    }
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 2,
-    className: classes.item
-  }, /*#__PURE__*/React.createElement(PublishedComponent, {
-    pubRef: "core.DatePicker",
-    module: "payroll",
-    label: formatMessage('benefitConsumption.paymentDate'),
-    value: filterValue('bill_DatePayed_Gte'),
-    onChange: function onChange(v) {
-      return onChangeFilters([{
-        id: 'bill_DatePayed_Gte',
-        value: v,
-        filter: "bill_DatePayed_Gte: \"".concat(v, "\"")
-      }]);
-    }
-  })));
-}
-
-function ErrorSummaryModal(_ref) {
-  var _benefitAttachment$be;
-  var open = _ref.open,
-    onClose = _ref.onClose,
-    benefitAttachment = _ref.benefitAttachment;
-  var modulesManager = useModulesManager();
-  var _useTranslations = useTranslations('payroll', modulesManager),
-    formatMessage = _useTranslations.formatMessage;
-  var jsonExt = benefitAttachment !== null && benefitAttachment !== void 0 && (_benefitAttachment$be = benefitAttachment.benefit) !== null && _benefitAttachment$be !== void 0 && _benefitAttachment$be.jsonExt ? JSON.parse(benefitAttachment.benefit.jsonExt) : {};
-  var outputGateway = "".concat(jsonExt === null || jsonExt === void 0 ? void 0 : jsonExt.output_gateway);
-  return /*#__PURE__*/React.createElement(Modal, {
-    open: open,
-    onClose: onClose,
-    closeAfterTransition: true,
-    BackdropComponent: Backdrop,
-    BackdropProps: {
-      timeout: 500
-    }
-  }, /*#__PURE__*/React.createElement(Fade, {
-    "in": open
-  }, /*#__PURE__*/React.createElement(Box, {
-    p: 4,
-    style: {
-      backgroundColor: 'white',
-      margin: 'auto',
-      maxWidth: 400,
-      outline: 'none'
+  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+    formatMessage = _useTranslations.formatMessage,
+    formatMessageWithValues = _useTranslations.formatMessageWithValues;
+  useEffect(function () {
+    if (isOpen && Object.keys(payroll).length > 0) {
+      // Calculate total benefits and reconciled benefits
+      var total = payroll.benefitConsumption.length;
+      var selected = payroll.benefitConsumption.filter(function (benefit) {
+        return benefit.status === BENEFIT_CONSUMPTION_STATUS.RECONCILED;
+      }).length;
+      var approved = payroll.benefitConsumption.filter(function (benefit) {
+        return benefit.status === BENEFIT_CONSUMPTION_STATUS.APPROVE_FOR_PAYMENT;
+      }).length;
+      setTotalBeneficiaries(total);
+      setSelectedBeneficiaries(selected);
+      setApprovedBeneficiaries(approved);
+      var totalAmount = 0;
+      var reconciledAmount = 0;
+      if (payroll && payroll.benefitConsumption) {
+        payroll.benefitConsumption.forEach(function (benefit) {
+          if (benefit.benefitAttachment && benefit.benefitAttachment.length > 0) {
+            benefit.benefitAttachment.forEach(function (attachment) {
+              if (attachment.bill && attachment.bill.amountTotal) {
+                totalAmount += parseFloat(attachment.bill.amountTotal);
+                if (benefit.status === BENEFIT_CONSUMPTION_STATUS.RECONCILED) {
+                  reconciledAmount += parseFloat(attachment.bill.amountTotal);
+                }
+              }
+            });
+          }
+        });
+      }
+      setTotalBillAmount(totalAmount);
+      setTotalReconciledBillAmount(reconciledAmount);
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h6"
-  }, formatMessage('payroll.errorSummary.title')), outputGateway === null || outputGateway === 'undefined' ? /*#__PURE__*/React.createElement(Typography, null, formatMessage('payroll.errorSummary.outputGateway.noInfo')) : /*#__PURE__*/React.createElement(Typography, null, outputGateway), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    justifyContent: "center",
-    mt: 2
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    onClick: onClose,
-    variant: "contained",
-    color: "primary"
-  }, formatMessage('payroll.errorSummary.close'))))));
-}
-
-var styles = function styles(theme) {
-  return {
-    item: theme.paper.item
+  }, [isOpen, payroll]);
+  var closePayrollCallback = function closePayrollCallback() {
+    handleClose();
+    closePayroll(payrollDetail, formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)));
   };
-};
-function AdditionalFieldsDialog(_ref) {
-  var intl = _ref.intl,
-    classes = _ref.classes,
-    jsonExt = _ref.jsonExt,
-    buttonLabel = _ref.buttonLabel,
-    title = _ref.title;
-  // eslint-disable-next-line no-param-reassign
-  if (!jsonExt) jsonExt = '{}';
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var handleOpen = function handleOpen() {
-    setIsOpen(true);
+  var rejectPayrollCallback = function rejectPayrollCallback() {
+    handleClose();
+    rejectPayroll(payrollDetail, formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)));
   };
-  var handleClose = function handleClose() {
-    setIsOpen(false);
+  var makePaymentForPayrollCallback = function makePaymentForPayrollCallback() {
+    handleClose();
+    makePaymentForPayroll(payrollDetail, formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)));
   };
-  var jsonExtFields = createFieldsBasedOnJSON(JSON.stringify(JSON.parse(jsonExt).extra_info));
+  var downloadPayrollData = function downloadPayrollData(payrollUuid, payrollName) {
+    downloadPayroll(payrollUuid, payrollName);
+  };
+  var isBistp = (payrollDetail === null || payrollDetail === void 0 ? void 0 : payrollDetail.paymentMethod) === PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT;
+  var bistpSummary = (payroll === null || payroll === void 0 ? void 0 : payroll.bistpSummary) || {};
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     onClick: handleOpen,
-    variant: "outlined",
-    color: "#DFEDEF",
-    className: classes.button,
-    style: {
-      border: '0px',
-      marginTop: '6px'
-    }
-  }, formatMessage(intl, 'payroll', buttonLabel)), /*#__PURE__*/React.createElement(Dialog, {
+    variant: "contained",
+    color: "primary",
+    className: classes.button
+  }, isBistp ? formatMessage('payroll.bistp.viewSummary') : formatMessage('payroll.viewReconciliationSummary')), /*#__PURE__*/React.createElement(Dialog, {
     open: isOpen,
     onClose: handleClose,
     PaperProps: {
       style: {
-        width: 1200,
-        maxWidth: 1200,
-        maxHeight: 900
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%,-50%)',
+        width: '75%',
+        maxWidth: '75%'
       }
     }
-  }, /*#__PURE__*/React.createElement("form", {
-    noValidate: true
   }, /*#__PURE__*/React.createElement(DialogTitle, {
     style: {
       marginTop: '10px'
     }
-  }, formatMessage(intl, 'payroll', title)), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: '#DFEDEF',
-      paddingLeft: '10px',
-      paddingBottom: '10px'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, formatMessageWithValues('payroll.reconciliationSummary', {
+    payrollName: payrollDetail.name
+  })), /*#__PURE__*/React.createElement(DialogContent, null, isBistp ? /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    className: classes.item
-  }, jsonExtFields === null || jsonExtFields === void 0 ? void 0 : jsonExtFields.map(function (jsonExtField) {
-    return /*#__PURE__*/React.createElement(Grid, {
-      item: true,
-      xs: 6,
-      className: classes.item
-    }, renderInputComponent(MODULE_NAME, jsonExtField));
-  })))), /*#__PURE__*/React.createElement(DialogActions, {
+    spacing: 2,
     style: {
-      display: 'inline',
-      paddingLeft: '10px',
-      marginTop: '25px',
-      marginBottom: '15px'
+      marginBottom: 16
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
     style: {
-      maxWidth: '1000px'
+      padding: '20px',
+      backgroundColor: '#e8f5e9'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.bistp.reconciled')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, (_bistpSummary$reconci = bistpSummary.reconciled) !== null && _bistpSummary$reconci !== void 0 ? _bistpSummary$reconci : 0, " / ", (_bistpSummary$total = bistpSummary.total) !== null && _bistpSummary$total !== void 0 ? _bistpSummary$total : 0))), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
     style: {
-      "float": 'left'
+      padding: '20px',
+      backgroundColor: '#fff3e0'
     }
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleClose,
-    variant: "outlined",
-    autoFocus: true,
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.bistp.pending')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, (_bistpSummary$pending = bistpSummary.pending) !== null && _bistpSummary$pending !== void 0 ? _bistpSummary$pending : 0))), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
     style: {
-      margin: '0 16px',
-      marginBottom: '15px'
+      padding: '20px',
+      backgroundColor: '#ffebee'
     }
-  }, formatMessage(intl, 'payroll', 'payroll.additonalFields.close'))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.bistp.rejected')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, (_bistpSummary$rejecte = bistpSummary.rejected) !== null && _bistpSummary$rejecte !== void 0 ? _bistpSummary$rejecte : 0))), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
     style: {
-      "float": 'right',
-      paddingRight: '16px'
+      padding: '20px',
+      backgroundColor: '#e3f2fd'
     }
-  }))))));
-}
-var mapStateToProps$a = function mapStateToProps(state) {
-  return {
-    rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : []
-  };
-};
-var mapDispatchToProps$a = function mapDispatchToProps(dispatch) {
-  return bindActionCreators({}, dispatch);
-};
-var AdditionalFieldsDialog$1 = injectIntl(withTheme(withStyles(styles)(connect(mapStateToProps$a, mapDispatchToProps$a)(AdditionalFieldsDialog))));
-
-/* eslint-disable max-len */
-var useStyles$6 = makeStyles(function () {
-  return {
-    topHeader: {
-      display: 'flex',
-      justifyContent: 'start',
-      alignItems: 'center',
-      width: '100%',
-      '& img': {
-        minWidth: '250px',
-        maxWidth: '300px',
-        width: 'auto',
-        height: 'auto'
-      }
-    },
-    printContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.bistp.skippedNib')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, (_bistpSummary$skipped = bistpSummary.skippedNib) !== null && _bistpSummary$skipped !== void 0 ? _bistpSummary$skipped : 0))), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
+    style: {
       padding: '20px',
-      fontWeight: '500'
-    },
-    date: {
-      fontSize: '16px'
-    },
-    detailsContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      padding: '12px',
-      width: '100%'
-    },
-    detailRow: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: '4px'
-    },
-    detailName: {
-      fontWeight: '600',
-      fontSize: '16px',
-      textTransform: 'uppercase'
-    },
-    detailValue: {
-      fontWeight: '500',
-      backgroundColor: '#f5f5f5',
-      padding: '6px',
-      borderRadius: '8px',
-      fontSize: '15px'
-    },
-    containerPadding: {
-      padding: '32px'
-    },
-    dividerMargin: {
-      margin: '12px 0'
-    },
-    sectionTitle: {
-      fontWeight: '700',
-      fontSize: '18px',
-      textTransform: 'uppercase',
-      marginBottom: '12px'
-    }
-  };
-});
-var PayrollBenefitPrintTemplate = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var benefitAttachments = _ref.benefitAttachments;
-  if (!benefitAttachments) return null;
-  var classes = useStyles$6();
-  var modulesManager = useModulesManager();
-  var _useTranslations = useTranslations(modulesManager, MODULE_NAME),
-    formatMessage = _useTranslations.formatMessage;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: classes.printContainer
-  }, benefitAttachments.map(function (benefitAttachment, index) {
-    var _benefitAttachment$bi;
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      className: classes.detailsContainer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.sectionTitle
-    }, "Payment: ".concat(benefitAttachment.benefit.code, " - ").concat(benefitAttachment.benefit.individual.firstName, ", ").concat(benefitAttachment.benefit.individual.lastName)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.individual.firstName')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.individual.firstName)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.individual.lastName')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.individual.lastName)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.code')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.code)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.dateDue')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.dateDue)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.receipt')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.receipt)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.amount')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.amount)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.type')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.type)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.status')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.status)), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.payedOnTime')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, benefitAttachment.benefit.payedOnTime ? 'Yes' : 'No')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailRow
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.detailName
-    }, formatMessage('payroll.benefitConsumption.paymentDate')), /*#__PURE__*/React.createElement("div", {
-      className: classes.detailValue
-    }, !benefitAttachment.benefit.receipt ? '' : benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$bi = benefitAttachment.bill) === null || _benefitAttachment$bi === void 0 ? void 0 : _benefitAttachment$bi.datePayed)), /*#__PURE__*/React.createElement(Divider, {
-      className: classes.dividerMargin
-    }));
-  }));
-});
-
-function BenefitConsumptionSearcherModal(_ref) {
-  var fetchBenefitAttachments = _ref.fetchBenefitAttachments,
-    fetchingBenefitAttachments = _ref.fetchingBenefitAttachments,
-    fetchedBenefitAttachments = _ref.fetchedBenefitAttachments,
-    errorBenefitAttachments = _ref.errorBenefitAttachments,
-    benefitAttachments = _ref.benefitAttachments,
-    benefitAttachmentsPageInfo = _ref.benefitAttachmentsPageInfo,
-    benefitAttachmentsTotalCount = _ref.benefitAttachmentsTotalCount,
-    payrollUuid = _ref.payrollUuid,
-    reconciledMode = _ref.reconciledMode,
-    payrollDetail = _ref.payrollDetail,
-    deleteBenefitConsumption = _ref.deleteBenefitConsumption;
-  var modulesManager = useModulesManager();
-  var _useTranslations = useTranslations('payroll', modulesManager),
-    formatMessage = _useTranslations.formatMessage,
-    formatMessageWithValues = _useTranslations.formatMessageWithValues;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedBenefitAttachment = _useState2[0],
-    setSelectedBenefitAttachment = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    openConfirmDialog = _useState4[0],
-    setOpenConfirmDialog = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    benefitToDelete = _useState6[0],
-    setBenefitToDelete = _useState6[1];
-  var payrollPrintTemplateRef = useRef(null);
-  var handlePrint = useReactToPrint({
-    documentTitle: "".concat(payrollUuid)
-  });
-  var fetch = function fetch(params) {
-    fetchBenefitAttachments(modulesManager, params);
-  };
-  var defaultFilters = function defaultFilters() {
-    var filters = {
-      isDeleted: {
-        value: false,
-        filter: 'isDeleted: false'
-      },
-      payrollUuid: {
-        value: payrollUuid,
-        filter: "payrollUuid: \"".concat(payrollUuid, "\"")
-      }
-    };
-    if (reconciledMode && payrollDetail.paymentMethod !== 'StrategyOnlinePayment') {
-      filters.benefit_Status = {
-        value: 'RECONCILED',
-        filter: "benefit_Status: ".concat(PAYROLL_STATUS.RECONCILED)
-      };
+      backgroundColor: '#fce4ec'
     }
-    return filters;
-  };
-  var defaultFiltersArray = function defaultFiltersArray() {
-    var filters = ['isDeleted: false', "first: ".concat(DEFAULT_PAGE_SIZE), "payrollUuid: \"".concat(payrollUuid, "\"")];
-    if (reconciledMode && payrollDetail.paymentMethod !== 'StrategyOnlinePayment') {
-      filters.push("benefit_Status: ".concat(PAYROLL_STATUS.RECONCILED));
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.bistp.sendFailed')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, (_bistpSummary$sendFai = bistpSummary.sendFailed) !== null && _bistpSummary$sendFai !== void 0 ? _bistpSummary$sendFai : 0)))) : /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
+    style: {
+      padding: '20px'
     }
-    return filters;
-  };
-  var headers = function headers() {
-    return ['benefitConsumption.photo', 'benefitConsumption.individual.firstName', 'benefitConsumption.individual.lastName', 'benefitConsumption.amount', 'benefitConsumption.receipt', 'benefitConsumption.dateDue', 'benefitConsumption.payedOnTime', 'benefitConsumption.paymentDate', 'benefitConsumption.status', '', ''];
-  };
-  var confirmDeleteBenefitConsumption = function confirmDeleteBenefitConsumption(benefit) {
-    setBenefitToDelete(benefit);
-    setOpenConfirmDialog(true);
-  };
-  var handleDeleteBenefitConsumption = function handleDeleteBenefitConsumption() {
-    deleteBenefitConsumption(benefitToDelete.benefit, formatMessageWithValues('payroll.mutation.deleteLabel', mutationLabel(benefitToDelete.benefit.code)));
-    setOpenConfirmDialog(false);
-    setBenefitToDelete(null);
-    var filters = defaultFiltersArray();
-    fetchBenefitAttachments(modulesManager, filters); // Refresh the searcher after deletion
-  };
-  var checkBenefitDueDate = function checkBenefitDueDate(benefitAttachment) {
-    if (!benefitAttachment.benefit.receipt) {
-      return ''; // return empty string if datePayed is null
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.summary.selectedBeneficiaries')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, formatMessageWithValues('payroll.summary.beneficiariesCount', {
+    selectedBeneficiaries: selectedBeneficiaries,
+    totalBeneficiaries: totalBeneficiaries
+  })))), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
+    style: {
+      padding: '20px'
     }
-    return benefitAttachment.benefit && benefitAttachment.benefit.dateDue >= benefitAttachment.bill.datePayed ? 'True' : 'False';
-  };
-  var itemFormatters = function itemFormatters() {
-    return [function (benefitAttachment) {
-      return benefitAttachment.benefit.receipt ? /*#__PURE__*/React.createElement(PhotoCameraOutlinedIcon, {
-        style: {
-          fontSize: 150
-        }
-      }) : null;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$be;
-      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be = benefitAttachment.benefit) === null || _benefitAttachment$be === void 0 || (_benefitAttachment$be = _benefitAttachment$be.individual) === null || _benefitAttachment$be === void 0 ? void 0 : _benefitAttachment$be.firstName;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$be2;
-      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be2 = benefitAttachment.benefit) === null || _benefitAttachment$be2 === void 0 || (_benefitAttachment$be2 = _benefitAttachment$be2.individual) === null || _benefitAttachment$be2 === void 0 ? void 0 : _benefitAttachment$be2.lastName;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$bi;
-      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$bi = benefitAttachment.bill) === null || _benefitAttachment$bi === void 0 ? void 0 : _benefitAttachment$bi.amountTotal;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$be3;
-      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be3 = benefitAttachment.benefit) === null || _benefitAttachment$be3 === void 0 ? void 0 : _benefitAttachment$be3.receipt;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$be4;
-      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be4 = benefitAttachment.benefit) === null || _benefitAttachment$be4 === void 0 ? void 0 : _benefitAttachment$be4.dateDue;
-    }, function (benefitAttachment) {
-      return checkBenefitDueDate(benefitAttachment);
-    }, function (benefitAttachment) {
-      var _benefitAttachment$bi2;
-      return !benefitAttachment.benefit.receipt ? '' : benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$bi2 = benefitAttachment.bill) === null || _benefitAttachment$bi2 === void 0 ? void 0 : _benefitAttachment$bi2.datePayed;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$be5;
-      return benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be5 = benefitAttachment.benefit) === null || _benefitAttachment$be5 === void 0 ? void 0 : _benefitAttachment$be5.status;
-    }, function (benefitAttachment) {
-      var _benefitAttachment$be6;
-      return /*#__PURE__*/React.createElement(AdditionalFieldsDialog$1, {
-        jsonExt: benefitAttachment === null || benefitAttachment === void 0 || (_benefitAttachment$be6 = benefitAttachment.benefit) === null || _benefitAttachment$be6 === void 0 ? void 0 : _benefitAttachment$be6.jsonExt,
-        buttonLabel: "payroll.additonalFields.showAdditionalFields",
-        title: "payroll.additonalFields.label"
-      });
-    }, function (benefitAttachment) {
-      return /*#__PURE__*/React.createElement(Button, {
-        onClick: function onClick() {},
-        variant: "contained",
-        color: "primary",
-        disabled: !!benefitAttachment.benefit.receipt
-      }, formatMessage('payroll.summary.confirm'));
-    }, function (benefitAttachment) {
-      return payrollDetail.paymentMethod === 'StrategyOnlinePayment' && payrollDetail.status === PAYROLL_STATUS.RECONCILED && benefitAttachment.benefit.status !== 'RECONCILED' && /*#__PURE__*/React.createElement(Button, {
-        onClick: function onClick() {
-          return setSelectedBenefitAttachment(benefitAttachment);
-        },
-        variant: "contained",
-        style: {
-          backgroundColor: '#b80000',
-          color: 'white'
-        }
-      }, formatMessage('payroll.summary.benefit_error'));
-    }, function (benefitAttachment) {
-      return payrollDetail.status === PAYROLL_STATUS.PENDING_APPROVAL && benefitAttachment.benefit.status !== 'PENDING_DELETION' && /*#__PURE__*/React.createElement(Button, {
-        onClick: function onClick() {
-          return confirmDeleteBenefitConsumption(benefitAttachment);
-        },
-        variant: "contained",
-        style: {
-          backgroundColor: '#b80000',
-          color: 'white'
-        }
-      }, formatMessage('payroll.summary.benefit_delete'));
-    }];
-  };
-  var rowIdentifier = function rowIdentifier(benefitAttachment) {
-    return benefitAttachment.id;
-  };
-  var sorts = function sorts() {
-    return [['benefit_photo', false], ['benefit_individual_FirstName', true], ['benefit_individual_LastName', true], ['bill_amountTotal', true], ['benefit_receipt', true], ['benefit_dateDue', true]];
-  };
-  var benefitConsumptionFilterModal = function benefitConsumptionFilterModal(_ref2) {
-    var filters = _ref2.filters,
-      onChangeFilters = _ref2.onChangeFilters;
-    return /*#__PURE__*/React.createElement(BenefitConsumptionFilterModal, {
-      filters: filters,
-      onChangeFilters: onChangeFilters
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    size: "small",
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.summary.totalAmountForInvoice')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, totalBillAmount))), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 3,
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "h6",
+    gutterBottom: true
+  }, formatMessage('payroll.summary.deliveredReconciliation')), /*#__PURE__*/React.createElement(Typography$1, {
+    variant: "body1"
+  }, totalReconciledBillAmount)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#DFEDEF'
+    }
+  }, /*#__PURE__*/React.createElement(BenefitConsumptionSearcherModal$1, {
+    payrollUuid: payrollDetail.id,
+    payrollDetail: payrollDetail
+  }))), /*#__PURE__*/React.createElement(DialogActions, {
+    style: {
+      display: 'inline',
+      paddingLeft: '10px',
+      marginTop: '25px',
+      marginBottom: '15px',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '3000px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      "float": 'left'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return closePayrollCallback();
+    },
     variant: "contained",
     color: "primary",
-    startIcon: /*#__PURE__*/React.createElement(PrintIcon, null),
-    onClick: function onClick(e) {
-      e.preventDefault();
-      handlePrint(null, function () {
-        return payrollPrintTemplateRef.current;
-      });
+    disabled: payrollDetail.paymentMethod === PAYMENT_METHOD.STRATEGY_ONLINE_PAYMENT ? approvedBeneficiaries === 0 : selectedBeneficiaries === 0,
+    style: {
+      margin: '0 16px',
+      marginBottom: '15px'
     }
-  }, /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "subtitle1"
-  }, "Print"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Searcher, {
-    module: "payroll",
-    FilterPane: benefitConsumptionFilterModal,
-    fetch: fetch,
-    items: benefitAttachments,
-    itemsPageInfo: benefitAttachmentsPageInfo,
-    fetchingItems: fetchingBenefitAttachments,
-    fetchedItems: fetchedBenefitAttachments,
-    errorItems: errorBenefitAttachments,
-    tableTitle: formatMessageWithValues('benefitAttachment.searcherResultsTitle', {
-      benefitAttachmentsTotalCount: benefitAttachmentsTotalCount
-    }),
-    headers: headers,
-    itemFormatters: itemFormatters,
-    sorts: sorts,
-    rowsPerPageOptions: ROWS_PER_PAGE_OPTIONS,
-    defaultPageSize: DEFAULT_PAGE_SIZE,
-    rowIdentifier: rowIdentifier,
-    defaultFilters: defaultFilters()
-  }), selectedBenefitAttachment && /*#__PURE__*/React.createElement(ErrorSummaryModal, {
-    open: !!selectedBenefitAttachment,
-    onClose: function onClose() {
-      return setSelectedBenefitAttachment(null);
+  }, formatMessage('payroll.summary.approveAndClose')), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return downloadPayrollData(payrollDetail.id, payrollDetail.name);
     },
-    benefitAttachment: selectedBenefitAttachment
-  }), /*#__PURE__*/React.createElement(Dialog, {
-    open: openConfirmDialog,
-    onClose: function onClose() {
-      return setOpenConfirmDialog(false);
+    variant: "contained",
+    color: "primary",
+    style: {
+      margin: '0 16px',
+      marginBottom: '15px'
     }
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, formatMessage('benefitConsumption.delete.confirm.title')), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(DialogContentText, null, formatMessage('benefitConsumption.delete.confirm.message'))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+  }, formatMessage('payroll.summary.download')), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      return setOpenConfirmDialog(false);
+      return rejectPayrollCallback();
     },
-    color: "primary"
-  }, formatMessage('benefitConsumption.cancel')), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleDeleteBenefitConsumption,
+    variant: "contained",
     color: "primary",
-    autoFocus: true
-  }, formatMessage('benefitConsumption.confirm')))), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: 'none'
+      margin: '0 16px',
+      marginBottom: '15px'
     }
-  }, /*#__PURE__*/React.createElement(PayrollBenefitPrintTemplate, {
-    ref: payrollPrintTemplateRef,
-    benefitAttachments: benefitAttachments
-  }))));
+  }, formatMessage('payroll.summary.reject'))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      "float": 'right',
+      paddingRight: '16px'
+    }
+  }, (payrollDetail.paymentMethod === PAYMENT_METHOD.STRATEGY_ONLINE_PAYMENT || payrollDetail.paymentMethod === PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) && /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return makePaymentForPayrollCallback();
+    },
+    variant: "contained",
+    color: "primary",
+    style: {
+      margin: '0 16px'
+    }
+  }, payrollDetail.paymentMethod === PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT ? formatMessage('payroll.bistp.submitPayment') : formatMessage('payroll.summary.makePayment')), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClose,
+    variant: "outlined",
+    autoFocus: true,
+    style: {
+      margin: '0 16px'
+    }
+  }, formatMessage('payroll.summary.close')))))));
 }
-var mapStateToProps$9 = function mapStateToProps(state) {
+var mapStateToProps$a = function mapStateToProps(state) {
   return {
-    fetchingBenefitAttachments: state.payroll.fetchingBenefitAttachments,
-    fetchedBenefitAttachments: state.payroll.fetchedBenefitAttachments,
-    errorBenefitAttachments: state.payroll.errorBenefitAttachments,
-    benefitAttachments: state.payroll.benefitAttachments,
-    benefitAttachmentsPageInfo: state.payroll.benefitAttachmentsPageInfo,
-    benefitAttachmentsTotalCount: state.payroll.benefitAttachmentsTotalCount
+    rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : [],
+    confirmed: state.core.confirmed,
+    payroll: state.payroll.payroll
   };
 };
-var mapDispatchToProps$9 = function mapDispatchToProps(dispatch) {
+var mapDispatchToProps$a = function mapDispatchToProps(dispatch) {
   return bindActionCreators({
-    fetchBenefitAttachments: fetchBenefitAttachments,
-    deleteBenefitConsumption: deleteBenefitConsumption
+    closePayroll: closePayroll,
+    rejectPayroll: rejectPayroll,
+    fetchPayroll: fetchPayroll,
+    makePaymentForPayroll: makePaymentForPayroll
   }, dispatch);
 };
-var BenefitConsumptionSearcherModal$1 = connect(mapStateToProps$9, mapDispatchToProps$9)(BenefitConsumptionSearcherModal);
+var PaymentApproveForPaymentSummary = connect(mapStateToProps$a, mapDispatchToProps$a)(PaymentApproveForPaymentDialog);
 
-function PaymentApproveForPaymentDialog(_ref) {
-  var _payrollDetail$id;
-  var classes = _ref.classes,
+var useStyles$9 = makeStyles(function (theme) {
+  return {
+    paper: theme.paper.paper,
+    tableTitle: theme.table.title,
+    tabs: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    selectedTab: {
+      borderBottom: '4px solid white'
+    },
+    unselectedTab: {
+      borderBottom: '4px solid transparent'
+    },
+    button: {
+      marginLeft: 'auto',
+      padding: theme.spacing(1),
+      fontSize: '0.875rem',
+      textTransform: 'none'
+    }
+  };
+});
+function PayrollTab(_ref) {
+  var rights = _ref.rights,
+    setConfirmedAction = _ref.setConfirmedAction,
+    payrollUuid = _ref.payrollUuid,
+    isInTask = _ref.isInTask,
+    payroll = _ref.payroll,
+    isPayrollFromFailedInvoices = _ref.isPayrollFromFailedInvoices;
+  var classes = useStyles$9();
+  var _useState = useState(BENEFIT_CONSUMPTION_LIST_TAB_VALUE),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var isSelected = function isSelected(tab) {
+    return tab === activeTab;
+  };
+  var tabStyle = function tabStyle(tab) {
+    return isSelected(tab) ? classes.selectedTab : classes.unselectedTab;
+  };
+  var handleChange = function handleChange(_, tab) {
+    return setActiveTab(tab);
+  };
+  var modulesManager = useModulesManager();
+  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+    formatMessage = _useTranslations.formatMessage;
+  var downloadPayrollData = function downloadPayrollData(payrollUuid, payrollName) {
+    downloadPayroll(payrollUuid, payrollName);
+  };
+  return /*#__PURE__*/React.createElement(Paper, {
+    className: classes.paper
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    className: "".concat(classes.tableTitle, " ").concat(classes.tabs)
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      "float": 'left'
+    }
+  }, /*#__PURE__*/React.createElement(Contributions, {
+    contributionKey: PAYROLL_TABS_LABEL_CONTRIBUTION_KEY,
+    rights: rights,
+    value: activeTab,
+    onChange: handleChange,
+    isSelected: isSelected,
+    tabStyle: tabStyle,
+    payrollUuid: payrollUuid,
+    isInTask: isInTask,
+    isPayrollFromFailedInvoices: isPayrollFromFailedInvoices
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      "float": 'right',
+      paddingRight: '16px'
+    }
+  }, payrollUuid && !isPayrollFromFailedInvoices && /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return downloadPayrollData(payrollUuid, payroll.name);
+    },
+    color: "#DFEDEF",
+    className: classes.button,
+    style: {
+      border: '0px',
+      marginTop: '6px',
+      textTransform: 'uppercase'
+    }
+  }, formatMessage('payroll.summary.download')), payrollUuid && (payroll === null || payroll === void 0 ? void 0 : payroll.status) === PAYROLL_STATUS.APPROVE_FOR_PAYMENT && payroll.paymentMethod === PAYMENT_METHOD.STRATEGY_OFFLINE_PAYMENT && /*#__PURE__*/React.createElement(PayrollPaymentDataUploadDialog$1, {
+    payrollUuid: payrollUuid
+  }), payrollUuid && (payroll === null || payroll === void 0 ? void 0 : payroll.status) === PAYROLL_STATUS.APPROVE_FOR_PAYMENT && payroll.paymentMethod === PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT && /*#__PURE__*/React.createElement(PaymentApproveForPaymentSummary, {
+    classes: {},
+    payrollDetail: payroll
+  })))), /*#__PURE__*/React.createElement(Contributions, {
+    contributionKey: PAYROLL_TABS_PANEL_CONTRIBUTION_KEY,
+    rights: rights,
+    value: activeTab,
+    setConfirmedAction: setConfirmedAction,
+    payrollUuid: payrollUuid,
+    isInTask: isInTask,
+    isPayrollFromFailedInvoices: isPayrollFromFailedInvoices
+  }));
+}
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useStyles$8 = makeStyles(function (theme) {
+  return {
+    page: theme.page
+  };
+});
+function PayrollPage(_ref) {
+  var statePayrollUuid = _ref.statePayrollUuid,
+    taskPayrollUuid = _ref.taskPayrollUuid,
+    rights = _ref.rights,
+    confirmed = _ref.confirmed,
+    submittingMutation = _ref.submittingMutation,
+    mutation = _ref.mutation,
     payroll = _ref.payroll,
-    closePayroll = _ref.closePayroll,
-    rejectPayroll = _ref.rejectPayroll,
-    payrollDetail = _ref.payrollDetail,
     fetchPayroll = _ref.fetchPayroll,
-    makePaymentForPayroll = _ref.makePaymentForPayroll;
+    createPayroll = _ref.createPayroll,
+    clearPayroll = _ref.clearPayroll,
+    clearConfirm = _ref.clearConfirm,
+    createPayrollFromFailedInvoices = _ref.createPayrollFromFailedInvoices,
+    journalize = _ref.journalize,
+    benefitPlanId = _ref.benefitPlanId;
   var modulesManager = useModulesManager();
-  var _useState = useState((_payrollDetail$id = payrollDetail === null || payrollDetail === void 0 ? void 0 : payrollDetail.id) !== null && _payrollDetail$id !== void 0 ? _payrollDetail$id : null),
-    _useState2 = _slicedToArray(_useState, 1),
-    payrollUuid = _useState2[0];
-  var _useState3 = useState(false),
+  var classes = useStyles$8();
+  var history = useHistory();
+  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+    formatMessage = _useTranslations.formatMessage,
+    formatMessageWithValues = _useTranslations.formatMessageWithValues;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    editedPayroll = _useState2[0],
+    setEditedPayroll = _useState2[1];
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
-  var _useState5 = useState(0),
+    payrollUuid = _useState4[0],
+    setPayrollUuid = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    totalBeneficiaries = _useState6[0],
-    setTotalBeneficiaries = _useState6[1];
-  var _useState7 = useState(0),
+    isInTask = _useState6[0],
+    setIsInTask = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectedBeneficiaries = _useState8[0],
-    setSelectedBeneficiaries = _useState8[1];
-  var _useState9 = useState(0),
+    readOnly = _useState8[0],
+    setReadOnly = _useState8[1];
+  var _useState9 = useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    approvedBeneficiaries = _useState0[0],
-    setApprovedBeneficiaries = _useState0[1];
-  var _useState1 = useState(0),
+    isPayrollFromFailedInvoices = _useState0[0],
+    setIsPayrollFromFailedInvoices = _useState0[1];
+  var _useState1 = useState(function () {
+      return null;
+    }),
     _useState10 = _slicedToArray(_useState1, 2),
-    totalBillAmount = _useState10[0],
-    setTotalBillAmount = _useState10[1];
-  var _useState11 = useState(0),
-    _useState12 = _slicedToArray(_useState11, 2),
-    totalReconciledBillAmount = _useState12[0],
-    setTotalReconciledBillAmount = _useState12[1];
-  var handleOpen = function handleOpen() {
+    confirmedAction = _useState10[0],
+    setConfirmedAction = _useState10[1];
+  var prevSubmittingMutationRef = useRef();
+  var back = function back() {
+    return history.goBack();
+  };
+  useEffect(function () {
+    if (createPayrollFromFailedInvoices === PAYROLL_FROM_FAILED_INVOICES_URL_PARAM) {
+      setIsPayrollFromFailedInvoices(true);
+    }
+  }, [createPayrollFromFailedInvoices, payrollUuid]);
+  useEffect(function () {
+    setPayrollUuid(statePayrollUuid !== null && statePayrollUuid !== void 0 ? statePayrollUuid : taskPayrollUuid);
+    setIsInTask(!!taskPayrollUuid);
+  }, [taskPayrollUuid, statePayrollUuid]);
+  useEffect(function () {
     if (payrollUuid) {
       fetchPayroll(modulesManager, ["id: \"".concat(payrollUuid, "\"")]);
     }
-    setIsOpen(true);
-  };
-  var handleClose = function handleClose() {
-    setIsOpen(false);
-  };
-  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
-    formatMessage = _useTranslations.formatMessage,
-    formatMessageWithValues = _useTranslations.formatMessageWithValues;
+  }, [payrollUuid]);
   useEffect(function () {
-    if (isOpen && Object.keys(payroll).length > 0) {
-      // Calculate total benefits and reconciled benefits
-      var total = payroll.benefitConsumption.length;
-      var selected = payroll.benefitConsumption.filter(function (benefit) {
-        return benefit.status === BENEFIT_CONSUMPTION_STATUS.RECONCILED;
-      }).length;
-      var approved = payroll.benefitConsumption.filter(function (benefit) {
-        return benefit.status === BENEFIT_CONSUMPTION_STATUS.APPROVE_FOR_PAYMENT;
-      }).length;
-      setTotalBeneficiaries(total);
-      setSelectedBeneficiaries(selected);
-      setApprovedBeneficiaries(approved);
-      var totalAmount = 0;
-      var reconciledAmount = 0;
-      if (payroll && payroll.benefitConsumption) {
-        payroll.benefitConsumption.forEach(function (benefit) {
-          if (benefit.benefitAttachment && benefit.benefitAttachment.length > 0) {
-            benefit.benefitAttachment.forEach(function (attachment) {
-              if (attachment.bill && attachment.bill.amountTotal) {
-                totalAmount += parseFloat(attachment.bill.amountTotal);
-                if (benefit.status === BENEFIT_CONSUMPTION_STATUS.RECONCILED) {
-                  reconciledAmount += parseFloat(attachment.bill.amountTotal);
-                }
-              }
-            });
-          }
-        });
+    if (confirmed && typeof confirmed === 'function') confirmedAction();
+    return function () {
+      return confirmed && clearConfirm(null);
+    };
+  }, [confirmed]);
+  useEffect(function () {
+    if (prevSubmittingMutationRef.current && !submittingMutation) {
+      journalize(mutation);
+      if ((mutation === null || mutation === void 0 ? void 0 : mutation.actionType) === ACTION_TYPE.DELETE_PAYROLL) {
+        back();
+      }
+      if (mutation !== null && mutation !== void 0 && mutation.clientMutationId && (!payrollUuid || isPayrollFromFailedInvoices)) {
+        fetchPayroll(modulesManager, ["clientMutationId: \"".concat(mutation.clientMutationId, "\"")]);
+        setIsPayrollFromFailedInvoices(false);
       }
-      setTotalBillAmount(totalAmount);
-      setTotalReconciledBillAmount(reconciledAmount);
     }
-  }, [isOpen, payroll]);
-  var closePayrollCallback = function closePayrollCallback() {
-    handleClose();
-    closePayroll(payrollDetail, formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)));
+  }, [submittingMutation]);
+  useEffect(function () {
+    prevSubmittingMutationRef.current = submittingMutation;
+  });
+  useEffect(function () {
+    if (payroll) {
+      setReadOnly(payroll === null || payroll === void 0 ? void 0 : payroll.id);
+      if (isPayrollFromFailedInvoices) {
+        setEditedPayroll(_objectSpread$1(_objectSpread$1({}, payroll), {}, {
+          id: null,
+          name: null,
+          paymentCycle: null,
+          status: null,
+          fromFailedInvoicesPayrollId: payroll === null || payroll === void 0 ? void 0 : payroll.id
+        }));
+      } else {
+        setEditedPayroll(payroll);
+      }
+      if (!payrollUuid && payroll !== null && payroll !== void 0 && payroll.id && !isPayrollFromFailedInvoices) {
+        var payrollRouteRef = modulesManager.getRef('payroll.route.payroll');
+        history.replace("/".concat(payrollRouteRef, "/").concat(payroll.id));
+      }
+    }
+  }, [payroll]);
+  useEffect(function () {
+    return function () {
+      return clearPayroll();
+    };
+  }, []);
+  var mandatoryFieldsEmpty = function mandatoryFieldsEmpty() {
+    if (editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.name && editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.paymentPlan && editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.paymentCycle && editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.paymentMethod && !(editedPayroll !== null && editedPayroll !== void 0 && editedPayroll.isDeleted)) return false;
+    return true;
   };
-  var rejectPayrollCallback = function rejectPayrollCallback() {
-    handleClose();
-    rejectPayroll(payrollDetail, formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)));
+  var canSave = function canSave() {
+    return !mandatoryFieldsEmpty() && (!readOnly || isPayrollFromFailedInvoices);
   };
-  var makePaymentForPayrollCallback = function makePaymentForPayrollCallback() {
-    handleClose();
-    makePaymentForPayroll(payrollDetail, formatMessageWithValues('payroll.mutation.closeLabel', mutationLabel(payrollDetail)));
+  var handleSave = function handleSave() {
+    createPayroll(editedPayroll, formatMessageWithValues('payroll.mutation.create', mutationLabel(payroll)));
+    if (benefitPlanId) {
+      back();
+    }
+  };
+  var actions = [];
+  return rights.includes(RIGHT_PAYROLL_CREATE) && /*#__PURE__*/React.createElement("div", {
+    className: classes.page
+  }, /*#__PURE__*/React.createElement(Form, {
+    key: payrollUuid,
+    module: "payroll",
+    title: formatMessageWithValues('payrollPage.title', pageTitle(payroll)),
+    titleParams: pageTitle(payroll),
+    openDirty: isPayrollFromFailedInvoices ? true : !payrollUuid,
+    benefitPlan: editedPayroll,
+    edited: editedPayroll,
+    onEditedChanged: setEditedPayroll,
+    back: !isInTask && back,
+    mandatoryFieldsEmpty: mandatoryFieldsEmpty,
+    canSave: canSave,
+    save: handleSave,
+    HeadPanel: PayrollHeadPanel$1,
+    Panels: [PayrollTab],
+    rights: rights,
+    actions: actions,
+    setConfirmedAction: setConfirmedAction,
+    payrollUuid: payrollUuid,
+    saveTooltip: formatMessage('tooltip.save'),
+    isInTask: !!taskPayrollUuid,
+    payroll: payroll,
+    readOnly: readOnly,
+    isPayrollFromFailedInvoices: isPayrollFromFailedInvoices,
+    benefitPlanId: benefitPlanId
+  }));
+}
+var mapDispatchToProps$9 = function mapDispatchToProps(dispatch) {
+  return bindActionCreators({
+    fetchPayroll: fetchPayroll,
+    createPayroll: createPayroll,
+    clearPayroll: clearPayroll,
+    coreConfirm: coreConfirm,
+    clearConfirm: clearConfirm,
+    journalize: journalize
+  }, dispatch);
+};
+var mapStateToProps$9 = function mapStateToProps(state, props) {
+  var _props$match, _props$match2, _props$match3, _props$match4, _state$core$user$i_us, _state$core;
+  return {
+    statePayrollUuid: (props === null || props === void 0 || (_props$match = props.match) === null || _props$match === void 0 || (_props$match = _props$match.params) === null || _props$match === void 0 ? void 0 : _props$match.payroll_uuid) === 'null' ? null : props === null || props === void 0 || (_props$match2 = props.match) === null || _props$match2 === void 0 ? void 0 : _props$match2.params.payroll_uuid,
+    createPayrollFromFailedInvoices: props === null || props === void 0 || (_props$match3 = props.match) === null || _props$match3 === void 0 || (_props$match3 = _props$match3.params) === null || _props$match3 === void 0 ? void 0 : _props$match3.createPayrollFromFailedInvoices,
+    benefitPlanId: props === null || props === void 0 || (_props$match4 = props.match) === null || _props$match4 === void 0 || (_props$match4 = _props$match4.params) === null || _props$match4 === void 0 ? void 0 : _props$match4.benefitPlanId,
+    rights: (_state$core$user$i_us = (_state$core = state.core) === null || _state$core === void 0 || (_state$core = _state$core.user) === null || _state$core === void 0 || (_state$core = _state$core.i_user) === null || _state$core === void 0 ? void 0 : _state$core.rights) !== null && _state$core$user$i_us !== void 0 ? _state$core$user$i_us : [],
+    confirmed: state.core.confirmed,
+    submittingMutation: state.payroll.submittingMutation,
+    mutation: state.payroll.mutation,
+    payroll: state.payroll.payroll
+  };
+};
+var PayrollPage$1 = connect(mapStateToProps$9, mapDispatchToProps$9)(PayrollPage);
+
+var useStyles$7 = makeStyles(function (theme) {
+  return {
+    form: {
+      padding: '0 0 10px 0',
+      width: '100%'
+    },
+    item: {
+      padding: theme.spacing(1)
+    }
+  };
+});
+function PayrollFilter(_ref) {
+  var _filters$isDeleted;
+  var filters = _ref.filters,
+    onChangeFilters = _ref.onChangeFilters,
+    _ref$statusReadOnly = _ref.statusReadOnly,
+    statusReadOnly = _ref$statusReadOnly === void 0 ? false : _ref$statusReadOnly;
+  var classes = useStyles$7();
+  var modulesManager = useModulesManager();
+  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+    formatMessage = _useTranslations.formatMessage;
+  var debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME);
+  var filterTextFieldValue = function filterTextFieldValue(filterName) {
+    var _filters$filterName$v, _filters$filterName;
+    return (_filters$filterName$v = filters === null || filters === void 0 || (_filters$filterName = filters[filterName]) === null || _filters$filterName === void 0 ? void 0 : _filters$filterName.value) !== null && _filters$filterName$v !== void 0 ? _filters$filterName$v : EMPTY_STRING;
   };
-  var downloadPayrollData = function downloadPayrollData(payrollUuid, payrollName) {
-    downloadPayroll(payrollUuid, payrollName);
+  var filterValue = function filterValue(filterName) {
+    var _filters$filterName$v2, _filters$filterName2;
+    return (_filters$filterName$v2 = filters === null || filters === void 0 || (_filters$filterName2 = filters[filterName]) === null || _filters$filterName2 === void 0 ? void 0 : _filters$filterName2.value) !== null && _filters$filterName$v2 !== void 0 ? _filters$filterName$v2 : null;
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOpen,
-    variant: "contained",
-    color: "primary",
-    className: classes.button
-  }, formatMessage('payroll.viewReconciliationSummary')), /*#__PURE__*/React.createElement(Dialog, {
-    open: isOpen,
-    onClose: handleClose,
-    PaperProps: {
-      style: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%,-50%)',
-        width: '75%',
-        maxWidth: '75%'
+  var onChangeStringFilter = function onChangeStringFilter(filterName) {
+    var lookup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return function (value) {
+      if (lookup) {
+        debouncedOnChangeFilters([{
+          id: filterName,
+          value: value,
+          filter: "".concat(filterName, "_").concat(lookup, ": \"").concat(value, "\"")
+        }]);
+      } else {
+        debouncedOnChangeFilters([{
+          id: filterName,
+          value: value,
+          filter: "".concat(filterName, ": \"").concat(value, "\"")
+        }]);
       }
-    }
-  }, /*#__PURE__*/React.createElement(DialogTitle, {
-    style: {
-      marginTop: '10px'
-    }
-  }, formatMessageWithValues('payroll.reconciliationSummary', {
-    payrollName: payrollDetail.name
-  })), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Grid, {
+    };
+  };
+  return /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 2
+    className: classes.form
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: 4
-  }, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 3,
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "h6",
-    gutterBottom: true
-  }, formatMessage('payroll.summary.selectedBeneficiaries')), /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "body1"
-  }, formatMessageWithValues('payroll.summary.beneficiariesCount', {
-    selectedBeneficiaries: selectedBeneficiaries,
-    totalBeneficiaries: totalBeneficiaries
-  })))), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    module: "payroll",
+    label: formatMessage('payroll.name'),
+    value: filterTextFieldValue('name'),
+    onChange: onChangeStringFilter('name', CONTAINS_LOOKUP)
+  })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: 4
-  }, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 3,
-    style: {
-      padding: '20px'
+    xs: 3,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(PublishedComponent, {
+    pubRef: "contributionPlan.PaymentPlanPicker",
+    filters: filters,
+    value: filterValue('paymentPlan_Id'),
+    onChange: function onChange(paymentPlan) {
+      return onChangeFilters([{
+        id: 'paymentPlan_Id',
+        value: paymentPlan,
+        filter: "paymentPlan_Id: \"".concat((paymentPlan === null || paymentPlan === void 0 ? void 0 : paymentPlan.id) && decodeId(paymentPlan.id), "\"")
+      }]);
     }
-  }, /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "h6",
-    gutterBottom: true
-  }, formatMessage('payroll.summary.totalAmountForInvoice')), /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "body1"
-  }, totalBillAmount))), /*#__PURE__*/React.createElement(Grid, {
+  })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
-    xs: 4
-  }, /*#__PURE__*/React.createElement(Paper, {
-    elevation: 3,
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "h6",
-    gutterBottom: true
-  }, formatMessage('payroll.summary.deliveredReconciliation')), /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "body1"
-  }, totalReconciledBillAmount)))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: '#DFEDEF'
-    }
-  }, /*#__PURE__*/React.createElement(BenefitConsumptionSearcherModal$1, {
-    payrollUuid: payrollDetail.id,
-    payrollDetail: payrollDetail
-  }))), /*#__PURE__*/React.createElement(DialogActions, {
-    style: {
-      display: 'inline',
-      paddingLeft: '10px',
-      marginTop: '25px',
-      marginBottom: '15px',
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: '3000px'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      "float": 'left'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return closePayrollCallback();
-    },
-    variant: "contained",
-    color: "primary",
-    disabled: payrollDetail.paymentMethod === 'StrategyOnlinePayment' ? approvedBeneficiaries === 0 : selectedBeneficiaries === 0,
-    style: {
-      margin: '0 16px',
-      marginBottom: '15px'
+    xs: 3,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(PublishedComponent, {
+    pubRef: "paymentCycle.PaymentCyclePicker",
+    withLabel: true,
+    withPlaceholder: true,
+    filters: filters,
+    value: filterValue('paymentCycle_Id'),
+    onChange: function onChange(paymentCycle) {
+      return onChangeFilters([{
+        id: 'paymentCycle_Id',
+        value: paymentCycle,
+        filter: "paymentCycle_Id: \"".concat((paymentCycle === null || paymentCycle === void 0 ? void 0 : paymentCycle.id) && decodeId(paymentCycle.id), "\"")
+      }]);
     }
-  }, formatMessage('payroll.summary.approveAndClose')), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return downloadPayrollData(payrollDetail.id, payrollDetail.name);
-    },
-    variant: "contained",
-    color: "primary",
-    style: {
-      margin: '0 16px',
-      marginBottom: '15px'
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(PayrollStatusPicker, {
+    withNull: true,
+    nullLabel: formatMessage('any'),
+    label: formatMessage('paymentMethod'),
+    value: filterValue('status'),
+    readOnly: statusReadOnly,
+    onChange: function onChange(value) {
+      return onChangeFilters([{
+        id: 'status',
+        value: value,
+        filter: value ? "status: ".concat(value) : EMPTY_STRING
+      }]);
     }
-  }, formatMessage('payroll.summary.download')), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return rejectPayrollCallback();
-    },
-    variant: "contained",
-    color: "primary",
-    style: {
-      margin: '0 16px',
-      marginBottom: '15px'
+  })), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 2,
+    className: classes.item
+  }, /*#__PURE__*/React.createElement(PaymentMethodPicker$1, {
+    withNull: true,
+    nullLabel: formatMessage('any'),
+    label: formatMessage('payroll.paymentMethod'),
+    value: filterValue('paymentMethod'),
+    onChange: function onChange(value) {
+      return onChangeFilters([{
+        id: 'paymentMethod',
+        value: value,
+        filter: "paymentMethod: \"".concat(value, "\"")
+      }]);
     }
-  }, formatMessage('payroll.summary.reject'))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      "float": 'right',
-      paddingRight: '16px'
+  })), /*#__PURE__*/React.createElement(ControlledField, {
+    module: "payroll",
+    id: "payrollFilter.showHistory",
+    field: /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 12,
+      className: classes.item
+    }, /*#__PURE__*/React.createElement(FormControlLabel, {
+      control: /*#__PURE__*/React.createElement(Checkbox, {
+        color: "primary",
+        checked: filters === null || filters === void 0 || (_filters$isDeleted = filters.isDeleted) === null || _filters$isDeleted === void 0 ? void 0 : _filters$isDeleted.value,
+        onChange: function onChange() {
+          var _filters$isDeleted2, _filters$isDeleted3;
+          return onChangeFilters([{
+            id: 'isDeleted',
+            value: !(filters !== null && filters !== void 0 && (_filters$isDeleted2 = filters.isDeleted) !== null && _filters$isDeleted2 !== void 0 && _filters$isDeleted2.value),
+            filter: "isDeleted: ".concat(!(filters !== null && filters !== void 0 && (_filters$isDeleted3 = filters.isDeleted) !== null && _filters$isDeleted3 !== void 0 && _filters$isDeleted3.value))
+          }]);
+        }
+      }),
+      label: formatMessage('tooltip.isDeleted')
+    }))
+  }));
+}
+
+function PayrollSearcher(_ref) {
+  var deletePayrolls = _ref.deletePayrolls,
+    fetchingPayrolls = _ref.fetchingPayrolls,
+    fetchedPayrolls = _ref.fetchedPayrolls,
+    errorPayrolls = _ref.errorPayrolls,
+    payrolls = _ref.payrolls,
+    pageInfo = _ref.pageInfo,
+    totalCount = _ref.totalCount,
+    fetchPayrolls = _ref.fetchPayrolls,
+    coreConfirm = _ref.coreConfirm,
+    clearConfirm = _ref.clearConfirm,
+    confirmed = _ref.confirmed,
+    submittingMutation = _ref.submittingMutation,
+    mutation = _ref.mutation;
+  var history = useHistory();
+  var modulesManager = useModulesManager();
+  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+    formatMessage = _useTranslations.formatMessage,
+    formatMessageWithValues = _useTranslations.formatMessageWithValues;
+  var rights = useSelector(function (store) {
+    var _store$core$user$i_us;
+    return (_store$core$user$i_us = store.core.user.i_user.rights) !== null && _store$core$user$i_us !== void 0 ? _store$core$user$i_us : [];
+  });
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    payrollToDelete = _useState2[0],
+    setPayrollToDelete = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deletedPayrollUuids = _useState4[0],
+    setDeletedPayrollUuids = _useState4[1];
+  var prevSubmittingMutationRef = useRef();
+  var openDeletePayrollConfirmDialog = function openDeletePayrollConfirmDialog() {
+    coreConfirm(formatMessageWithValues('payroll.delete.confirm.title', pageTitle(payrollToDelete)), formatMessage('payroll.delete.confirm.message'));
+  };
+  useEffect(function () {
+    return payrollToDelete && openDeletePayrollConfirmDialog();
+  }, [payrollToDelete]);
+  useEffect(function () {
+    if (payrollToDelete && confirmed) {
+      deletePayrolls(payrollToDelete, formatMessageWithValues('payroll.mutation.deleteLabel', mutationLabel(payrollToDelete)));
+      setDeletedPayrollUuids([].concat(_toConsumableArray(deletedPayrollUuids), [payrollToDelete.id]));
     }
-  }, payrollDetail.paymentMethod === 'StrategyOnlinePayment' && /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return makePaymentForPayrollCallback();
-    },
-    variant: "contained",
-    color: "primary",
-    style: {
-      margin: '0 16px'
+    if (payrollToDelete && confirmed !== null) {
+      setPayrollToDelete(null);
     }
-  }, formatMessage('payroll.summary.makePayment')), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleClose,
-    variant: "outlined",
-    autoFocus: true,
-    style: {
-      margin: '0 16px'
+    return function () {
+      return confirmed && clearConfirm(false);
+    };
+  }, [confirmed]);
+  useEffect(function () {
+    if (prevSubmittingMutationRef.current && !submittingMutation) {
+      journalize(mutation);
     }
-  }, formatMessage('payroll.summary.close')))))));
+  }, [submittingMutation]);
+  useEffect(function () {
+    prevSubmittingMutationRef.current = submittingMutation;
+  });
+  var headers = function headers() {
+    return ['payroll.name', 'payroll.benefitPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'payroll.bistp.progress', 'emptyLabel'];
+  };
+  var sorts = function sorts() {
+    return [['name', true], ['benefitPlan', true], ['paymentPoint', true], ['status', true], ['paymentMethod', true]];
+  };
+  var renderBistpProgress = function renderBistpProgress(payroll) {
+    if (payroll.paymentMethod !== PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) return null;
+    var summary = payroll.bistpSummary || {};
+    var total = summary.total || 0;
+    var reconciled = summary.reconciled || 0;
+    var progress = total > 0 ? reconciled / total * 100 : 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        minWidth: 120
+      }
+    }, /*#__PURE__*/React.createElement(LinearProgress, {
+      variant: "determinate",
+      value: progress,
+      style: {
+        flex: 1,
+        height: 8,
+        borderRadius: 4
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '0.75rem',
+        whiteSpace: 'nowrap'
+      }
+    }, reconciled, "/", total));
+  };
+  var defaultFilters = function defaultFilters() {
+    return {
+      isDeleted: {
+        value: false,
+        filter: 'isDeleted: false'
+      }
+    };
+  };
+  var fetch = function fetch(params) {
+    return fetchPayrolls(modulesManager, params);
+  };
+  var rowIdentifier = function rowIdentifier(payroll) {
+    return payroll.id;
+  };
+  var openPayroll = function openPayroll(payroll) {
+    return rights.includes(RIGHT_PAYROLL_SEARCH) && history.push("/".concat(modulesManager.getRef(PAYROLL_PAYROLL_ROUTE), "/").concat(payroll === null || payroll === void 0 ? void 0 : payroll.id));
+  };
+  var onDelete = function onDelete(payroll) {
+    return setPayrollToDelete(payroll);
+  };
+  var itemFormatters = function itemFormatters() {
+    return [function (payroll) {
+      return payroll.name;
+    }, function (payroll) {
+      return payroll.benefitPlan ? "".concat(payroll.benefitPlan.code, " ").concat(payroll.benefitPlan.name) : '';
+    }, function (payroll) {
+      return payroll.paymentPoint ? "".concat(payroll.paymentPoint.name) : '';
+    }, function (payroll) {
+      return payroll.status ? "".concat(payroll.status) : '';
+    }, function (payroll) {
+      return payroll.paymentMethod ? "".concat(payroll.paymentMethod) : '';
+    }, function (payroll) {
+      return renderBistpProgress(payroll);
+    }, function (payroll) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage('tooltip.viewDetails')
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        onClick: function onClick() {
+          return openPayroll(payroll);
+        }
+      }, /*#__PURE__*/React.createElement(VisibilityIcon, null)));
+    }, function (payroll) {
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: formatMessage('tooltip.delete')
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        onClick: function onClick() {
+          return onDelete(payroll);
+        },
+        disabled: deletedPayrollUuids.includes(payroll.id) || payroll.status !== PAYROLL_STATUS.PENDING_APPROVAL
+      }, /*#__PURE__*/React.createElement(DeleteIcon, null)));
+    }];
+  };
+  var onDoubleClick = function onDoubleClick(payroll) {
+    return openPayroll(payroll);
+  };
+  var payrollFilter = function payrollFilter(_ref2) {
+    var filters = _ref2.filters,
+      onChangeFilters = _ref2.onChangeFilters;
+    return /*#__PURE__*/React.createElement(PayrollFilter, {
+      filters: filters,
+      onChangeFilters: onChangeFilters
+    });
+  };
+  var isRowDisabled = function isRowDisabled(_, payroll) {
+    return deletedPayrollUuids.includes(payroll.id);
+  };
+  return /*#__PURE__*/React.createElement(Searcher, {
+    module: "payroll",
+    FilterPane: payrollFilter,
+    fetch: fetch,
+    items: payrolls,
+    itemsPageInfo: pageInfo,
+    fetchedItems: fetchedPayrolls,
+    fetchingItems: fetchingPayrolls,
+    errorItems: errorPayrolls,
+    tableTitle: formatMessageWithValues('payrollSearcher.results', {
+      totalCount: totalCount
+    }),
+    headers: headers,
+    itemFormatters: itemFormatters,
+    sorts: sorts,
+    rowsPerPageOptions: ROWS_PER_PAGE_OPTIONS,
+    defaultPageSize: DEFAULT_PAGE_SIZE,
+    rowIdentifier: rowIdentifier,
+    onDoubleClick: onDoubleClick,
+    defaultFilters: defaultFilters(),
+    rowDisabled: isRowDisabled,
+    rowLocked: isRowDisabled
+  });
 }
 var mapStateToProps$8 = function mapStateToProps(state) {
   return {
-    rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : [],
+    fetchingPayrolls: state.payroll.fetchingPayrolls,
+    fetchedPayrolls: state.payroll.fetchedPayrolls,
+    errorPayrolls: state.payroll.errorPayrolls,
+    payrolls: state.payroll.payrolls,
+    pageInfo: state.payroll.payrollsPageInfo,
+    totalCount: state.payroll.payrollsTotalCount,
     confirmed: state.core.confirmed,
-    payroll: state.payroll.payroll
+    submittingMutation: state.payroll.submittingMutation,
+    mutation: state.payroll.mutation
   };
 };
 var mapDispatchToProps$8 = function mapDispatchToProps(dispatch) {
   return bindActionCreators({
-    closePayroll: closePayroll,
-    rejectPayroll: rejectPayroll,
-    fetchPayroll: fetchPayroll,
-    makePaymentForPayroll: makePaymentForPayroll
+    fetchPayrolls: fetchPayrolls,
+    deletePayrolls: deletePayrolls,
+    journalize: journalize,
+    clearConfirm: clearConfirm,
+    coreConfirm: coreConfirm
   }, dispatch);
 };
-var PaymentApproveForPaymentSummary = connect(mapStateToProps$8, mapDispatchToProps$8)(PaymentApproveForPaymentDialog);
+var PayrollSearcher$1 = connect(mapStateToProps$8, mapDispatchToProps$8)(PayrollSearcher);
+
+var useStyles$6 = makeStyles(function (theme) {
+  return {
+    page: theme.page,
+    fab: theme.fab
+  };
+});
+function PayrollsPage() {
+  var modulesManager = useModulesManager();
+  var classes = useStyles$6();
+  var history = useHistory();
+  var rights = useSelector(function (store) {
+    var _store$core$user$i_us;
+    return (_store$core$user$i_us = store.core.user.i_user.rights) !== null && _store$core$user$i_us !== void 0 ? _store$core$user$i_us : [];
+  });
+  var _useTranslations = useTranslations(MODULE_NAME, modulesManager),
+    formatMessage = _useTranslations.formatMessage;
+  var onCreate = function onCreate() {
+    return history.push("/".concat(modulesManager.getRef(PAYROLL_PAYROLL_ROUTE)));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.page
+  }, /*#__PURE__*/React.createElement(Helmet, {
+    title: formatMessage('paymentPoint.page.title')
+  }), rights.includes(RIGHT_PAYROLL_SEARCH) && /*#__PURE__*/React.createElement(PayrollSearcher$1, null), rights.includes(RIGHT_PAYROLL_CREATE) && withTooltip(/*#__PURE__*/React.createElement("div", {
+    className: classes.fab
+  }, /*#__PURE__*/React.createElement(Fab, {
+    color: "primary",
+    onClick: onCreate
+  }, /*#__PURE__*/React.createElement(AddIcon, null))), formatMessage('createButton.tooltip')));
+}
 
 function PayrollPaymentFilesSearcher(_ref) {
   var fetchingPayrollFiles = _ref.fetchingPayrollFiles,
@@ -3927,8 +4059,36 @@ function PayrollSearcherApproved(_ref) {
   useEffect(function () {
     prevSubmittingMutationRef.current = submittingMutation;
   });
+  var renderBistpProgress = function renderBistpProgress(payroll) {
+    if (payroll.paymentMethod !== PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) return null;
+    var summary = payroll.bistpSummary || {};
+    var total = summary.total || 0;
+    var reconciled = summary.reconciled || 0;
+    var progress = total > 0 ? reconciled / total * 100 : 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        minWidth: 120
+      }
+    }, /*#__PURE__*/React.createElement(LinearProgress, {
+      variant: "determinate",
+      value: progress,
+      style: {
+        flex: 1,
+        height: 8,
+        borderRadius: 4
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '0.75rem',
+        whiteSpace: 'nowrap'
+      }
+    }, reconciled, "/", total));
+  };
   var headers = function headers() {
-    return ['payroll.name', 'payroll.paymentPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'emptyLabel'];
+    return ['payroll.name', 'payroll.paymentPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'payroll.bistp.progress', 'emptyLabel'];
   };
   var sorts = function sorts() {
     return [['name', true], ['paymentPlan', true], ['paymentPoint', true], ['status', true], ['paymentMethod', true]];
@@ -3965,6 +4125,8 @@ function PayrollSearcherApproved(_ref) {
       return payroll.status ? "".concat(payroll.status) : '';
     }, function (payroll) {
       return payroll.paymentMethod ? "".concat(payroll.paymentMethod) : '';
+    }, function (payroll) {
+      return renderBistpProgress(payroll);
     }, function (payroll) {
       return /*#__PURE__*/React.createElement(PayrollReconciliationFilesDialog, {
         classes: classes,
@@ -4304,8 +4466,36 @@ function PayrollSearcherReconciled(_ref) {
   useEffect(function () {
     prevSubmittingMutationRef.current = submittingMutation;
   });
+  var renderBistpProgress = function renderBistpProgress(payroll) {
+    if (payroll.paymentMethod !== PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) return null;
+    var summary = payroll.bistpSummary || {};
+    var total = summary.total || 0;
+    var reconciled = summary.reconciled || 0;
+    var progress = total > 0 ? reconciled / total * 100 : 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        minWidth: 120
+      }
+    }, /*#__PURE__*/React.createElement(LinearProgress, {
+      variant: "determinate",
+      value: progress,
+      style: {
+        flex: 1,
+        height: 8,
+        borderRadius: 4
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '0.75rem',
+        whiteSpace: 'nowrap'
+      }
+    }, reconciled, "/", total));
+  };
   var headers = function headers() {
-    return ['payroll.name', 'payroll.paymentPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'emptyLabel'];
+    return ['payroll.name', 'payroll.paymentPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'payroll.bistp.progress', 'emptyLabel'];
   };
   var sorts = function sorts() {
     return [['name', true], ['paymentPlan', true], ['paymentPoint', true], ['status', true], ['paymentMethod', true]];
@@ -4342,6 +4532,8 @@ function PayrollSearcherReconciled(_ref) {
       return payroll.status ? "".concat(payroll.status) : '';
     }, function (payroll) {
       return payroll.paymentMethod ? "".concat(payroll.paymentMethod) : '';
+    }, function (payroll) {
+      return renderBistpProgress(payroll);
     }, function (payroll) {
       return /*#__PURE__*/React.createElement(PayrollReconciliationFilesDialog, {
         classes: classes,
@@ -5259,7 +5451,8 @@ function BenefitConsumptionSearcher(_ref) {
     return fetchBenefitConsumptions(modulesManager, params);
   };
   var headers = function headers() {
-    return ['benefitConsumption.individual.firstName', 'benefitConsumption.individual.lastName', 'benefitConsumption.photo', 'benefitConsumption.code', 'benefitConsumption.dateDue', 'benefitConsumption.receipt', 'benefitConsumption.amount', 'benefitConsumption.type', 'benefitConsumption.status', 'benefitConsumption.payedOnTime', 'benefitConsumption.paymentDate', ''];
+    var cols = ['benefitConsumption.individual.firstName', 'benefitConsumption.individual.lastName', 'benefitConsumption.nib', 'benefitConsumption.photo', 'benefitConsumption.code', 'benefitConsumption.dateDue', 'benefitConsumption.receipt', 'benefitConsumption.amount', 'benefitConsumption.type', 'benefitConsumption.status', 'benefitConsumption.payedOnTime', 'benefitConsumption.paymentDate', ''];
+    return cols;
   };
   var checkBenefitDueDate = function checkBenefitDueDate(benefitConsumption) {
     if (!benefitConsumption.receipt) {
@@ -5267,6 +5460,62 @@ function BenefitConsumptionSearcher(_ref) {
     }
     return benefitConsumption && benefitConsumption.dateDue >= benefitConsumption.benefitAttachment[0].bill.datePayed ? 'True' : 'False';
   };
+  var getBistpStatusBadge = function getBistpStatusBadge(benefitConsumption) {
+    if (!benefitConsumption) return null;
+    var jsonExt = benefitConsumption.jsonExt || {};
+    var status = benefitConsumption.status;
+    if (status === BENEFIT_CONSUMPTION_STATUS.RECONCILED) {
+      return /*#__PURE__*/React.createElement(Chip, {
+        label: formatMessage('payroll.bistp.status.reconciled'),
+        style: {
+          backgroundColor: '#4caf50',
+          color: 'white'
+        },
+        size: "small"
+      });
+    }
+    if (status === BENEFIT_CONSUMPTION_STATUS.REJECTED) {
+      return /*#__PURE__*/React.createElement(Chip, {
+        label: "".concat(formatMessage('payroll.bistp.status.rejected')).concat(jsonExt.bistp_rejection_reason ? ": ".concat(jsonExt.bistp_rejection_reason) : ''),
+        style: {
+          backgroundColor: '#f44336',
+          color: 'white'
+        },
+        size: "small"
+      });
+    }
+    if (status === BENEFIT_CONSUMPTION_STATUS.APPROVE_FOR_PAYMENT) {
+      return /*#__PURE__*/React.createElement(Chip, {
+        label: formatMessage('payroll.bistp.status.pending'),
+        style: {
+          backgroundColor: '#ff9800',
+          color: 'white'
+        },
+        size: "small"
+      });
+    }
+    if (jsonExt.bistp_skip_reason === 'nib_ausente') {
+      return /*#__PURE__*/React.createElement(Chip, {
+        label: formatMessage('payroll.bistp.status.skippedNib'),
+        style: {
+          backgroundColor: '#9e9e9e',
+          color: 'white'
+        },
+        size: "small"
+      });
+    }
+    if (jsonExt.bistp_skip_reason === 'envio_falhou') {
+      return /*#__PURE__*/React.createElement(Chip, {
+        label: formatMessage('payroll.bistp.status.sendFailed'),
+        style: {
+          backgroundColor: '#f44336',
+          color: 'white'
+        },
+        size: "small"
+      });
+    }
+    return null;
+  };
   var itemFormatters = function itemFormatters() {
     return [function (benefitConsumption) {
       var _benefitConsumption$i;
@@ -5274,6 +5523,9 @@ function BenefitConsumptionSearcher(_ref) {
     }, function (benefitConsumption) {
       var _benefitConsumption$i2;
       return benefitConsumption === null || benefitConsumption === void 0 || (_benefitConsumption$i2 = benefitConsumption.individual) === null || _benefitConsumption$i2 === void 0 ? void 0 : _benefitConsumption$i2.lastName;
+    }, function (benefitConsumption) {
+      var _benefitConsumption$i3;
+      return (benefitConsumption === null || benefitConsumption === void 0 || (_benefitConsumption$i3 = benefitConsumption.individual) === null || _benefitConsumption$i3 === void 0 ? void 0 : _benefitConsumption$i3.nib) || '';
     }, function (benefitConsumption) {
       return benefitConsumption.receipt ? /*#__PURE__*/React.createElement(PhotoCameraOutlinedIcon, {
         style: {
@@ -5298,18 +5550,26 @@ function BenefitConsumptionSearcher(_ref) {
       var _benefitConsumption$b;
       return !benefitConsumption.receipt ? '' : benefitConsumption === null || benefitConsumption === void 0 || (_benefitConsumption$b = benefitConsumption.benefitAttachment[0]) === null || _benefitConsumption$b === void 0 || (_benefitConsumption$b = _benefitConsumption$b.bill) === null || _benefitConsumption$b === void 0 ? void 0 : _benefitConsumption$b.datePayed;
     }, function (benefitConsumption) {
-      return /*#__PURE__*/React.createElement(AdditionalFieldsDialog$1, {
+      var jsonExt = (benefitConsumption === null || benefitConsumption === void 0 ? void 0 : benefitConsumption.jsonExt) || {};
+      var hasBistpFields = jsonExt.bistp_skip_reason || jsonExt.bistp_processed || jsonExt.bistp_rejection_reason;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4
+        }
+      }, hasBistpFields && getBistpStatusBadge(benefitConsumption), /*#__PURE__*/React.createElement(AdditionalFieldsDialog$1, {
         jsonExt: benefitConsumption === null || benefitConsumption === void 0 ? void 0 : benefitConsumption.jsonExt,
         buttonLabel: "payroll.additonalFields.showAdditionalFields",
         title: "payroll.additonalFields.label"
-      });
+      }));
     }];
   };
   var rowIdentifier = function rowIdentifier(benefitConsumption) {
     return benefitConsumption.id;
   };
   var sorts = function sorts() {
-    return [['individual_FirstName', true], ['individual_LastName', true], ['photo', true], ['code', true], ['dateDue', true], ['receipt', true], ['amount', true], ['type', true], ['status', true]];
+    return [['individual_FirstName', true], ['individual_LastName', true], ['individual_Nib', true], ['photo', true], ['code', true], ['dateDue', true], ['receipt', true], ['amount', true], ['type', true], ['status', true]];
   };
   var defaultFilters = function defaultFilters() {
     var filters = {
@@ -5317,9 +5577,9 @@ function BenefitConsumptionSearcher(_ref) {
         value: false,
         filter: 'isDeleted: false'
       },
-      payrollUuid: {
+      payrollbenefitconsumptionPayrollId: {
         value: payrollUuid,
-        filter: "payrollUuid: \"".concat(payrollUuid, "\"")
+        filter: "payrollbenefitconsumptionPayrollId: \"".concat(payrollUuid, "\"")
       }
     };
     if (isPayrollFromFailedInvoices) {
@@ -5761,8 +6021,36 @@ function PayrollSearcherPending(_ref) {
   useEffect(function () {
     prevSubmittingMutationRef.current = submittingMutation;
   });
+  var renderBistpProgress = function renderBistpProgress(payroll) {
+    if (payroll.paymentMethod !== PAYMENT_METHOD.STRATEGY_BISTP_PAYMENT) return null;
+    var summary = payroll.bistpSummary || {};
+    var total = summary.total || 0;
+    var reconciled = summary.reconciled || 0;
+    var progress = total > 0 ? reconciled / total * 100 : 0;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        minWidth: 120
+      }
+    }, /*#__PURE__*/React.createElement(LinearProgress, {
+      variant: "determinate",
+      value: progress,
+      style: {
+        flex: 1,
+        height: 8,
+        borderRadius: 4
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '0.75rem',
+        whiteSpace: 'nowrap'
+      }
+    }, reconciled, "/", total));
+  };
   var headers = function headers() {
-    return ['payroll.name', 'payroll.paymentPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'emptyLabel'];
+    return ['payroll.name', 'payroll.paymentPlan', 'payroll.paymentPoint', 'payroll.status', 'payroll.paymentMethod', 'payroll.bistp.progress', 'emptyLabel'];
   };
   var sorts = function sorts() {
     return [['name', true], ['paymentPlan', true], ['paymentPoint', true], ['status', true], ['paymentMethod', true]];
@@ -5799,6 +6087,8 @@ function PayrollSearcherPending(_ref) {
       return payroll.status ? "".concat(payroll.status) : '';
     }, function (payroll) {
       return payroll.paymentMethod ? "".concat(payroll.paymentMethod) : '';
+    }, function (payroll) {
+      return renderBistpProgress(payroll);
     }, function (payroll) {
       return /*#__PURE__*/React.createElement(PayrollReconciliationFilesDialog, {
         classes: classes,