@bigbinary/neeto-payments-frontend 1.3.4 → 1.3.6

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect, useTransition } from 'react';
 import { t as t$1 } from 'i18next';
-import { withTitle, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Header from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
@@ -12,14 +12,16 @@ import { DEFAULT_STALE_TIME, DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigb
 import { Download, Down, Right } from '@bigbinary/neeto-icons';
 import axios from 'axios';
 import { noop, isPresent, capitalize, removeBy, camelToSnakeCase, filterBy, isNotPresent } from 'neetocist';
-import { createSubscription, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
+import { createSubscription, getQueryParams, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { useLocation, useHistory } from 'react-router-dom';
-import { isEmpty, assoc, modify, concat, curry, pipe, split, map, join, equals, sortBy, prop, evolve } from 'ramda';
+import { isEmpty, assoc, modify, concat, curry, pipe, split, map, join, equals, sortBy, prop, evolve, insert } from 'ramda';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import require$$0 from 'util';
+import { isPresent as isPresent$1 } from '@bigbinary/neeto-cist';
+import { useParams } from 'react-router-dom/cjs/react-router-dom';
 import classNames from 'classnames';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 
@@ -103,20 +105,20 @@ var withReactQuery = function withReactQuery(Component) {
   return QueryWrapper;
 };
 
-var TAB$2 = {
+var TAB$3 = {
   all: "all",
   connected: "connected",
   disconnected: "disconnected",
   incomplete: "incomplete"
 };
-var TABS$2 = Object.values(TAB$2);
-var SEARCH_PROPS = {
+var TABS$3 = Object.values(TAB$3);
+var SEARCH_PROPS$1 = {
   key: "keyword",
   node: "identifier,user.first_name,last_name,email",
   model: "NeetoPaymentsEngine::Stripe::Account,User"
 };
-var DASHBOARD_MANDATORY_COLUMNS$1 = ["id", "status", "identifier"];
-var FILTER_COLUMNS$2 = [{
+var DASHBOARD_MANDATORY_COLUMNS$2 = ["id", "status", "identifier"];
+var FILTER_COLUMNS$3 = [{
   key: "createdAt",
   label: t$1("neetoPayments.common.createdAt"),
   node: "created_at",
@@ -577,7 +579,7 @@ var DEFAULT_PAGE_VALUES = {
   page: DEFAULT_PAGE_INDEX,
   pageSize: DEFAULT_PAGE_SIZE
 };
-var FILTER_COLUMNS$1 = [{
+var FILTER_COLUMNS$2 = [{
   key: "amount",
   label: t$1("neetoPayments.common.amount"),
   node: "amount",
@@ -587,6 +589,7 @@ var FILTER_COLUMNS$1 = [{
 var DEFAULT_TAG_STYLE = "warning";
 var TAG_STYLE = {
   successful: "success",
+  paid: "success",
   connected: "success",
   disconnected: "danger",
   declined: "danger",
@@ -663,10 +666,14 @@ var uuidV4 = function uuidV4() {
 var processDataIndex = function processDataIndex(dataIndex) {
   return typeof dataIndex === "string" ? dataIndex : dataIndex.join(",");
 };
+var buildStripePayoutLink = function buildStripePayoutLink(identifier) {
+  var isLive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return "".concat(STRIPE_DASHBOARD_LINK).concat(isLive ? "" : "test/", "payouts/").concat(identifier);
+};
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ExportModal$1 = function ExportModal(_ref) {
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ExportModal$2 = function ExportModal(_ref) {
   var showExportModal = _ref.showExportModal,
     setShowExportModal = _ref.setShowExportModal,
     tab = _ref.tab,
@@ -697,7 +704,7 @@ var ExportModal$1 = function ExportModal(_ref) {
     }
   };
   var handleGenerateClick = function handleGenerateClick() {
-    var payload = _objectSpread$7({
+    var payload = _objectSpread$9({
       kind: "account",
       token: token,
       filters: JSON.stringify(filters),
@@ -777,8 +784,8 @@ var useURLSearchParams = function useURLSearchParams() {
   }, [search]);
 };
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var processSortProperties = function processSortProperties(sortProperties) {
   if (sortProperties.sortBy === "payment_amount") {
     return assoc("sortBy", "neeto_payments_engine_stripe_transactions.amount", sortProperties);
@@ -790,7 +797,7 @@ var processSortProperties = function processSortProperties(sortProperties) {
 };
 var buildDefaultPageProperties = function buildDefaultPageProperties(tabs) {
   return tabs.reduce(function (pageProperties, tab) {
-    return _objectSpread$6(_objectSpread$6({}, pageProperties), {}, _defineProperty({}, tab, DEFAULT_PAGE_VALUES));
+    return _objectSpread$8(_objectSpread$8({}, pageProperties), {}, _defineProperty({}, tab, DEFAULT_PAGE_VALUES));
   }, {});
 };
 var buildPayload = function buildPayload(_ref) {
@@ -799,9 +806,12 @@ var buildPayload = function buildPayload(_ref) {
     filters = _ref.filters,
     pageProperties = _ref.pageProperties,
     _ref$sortProperties = _ref.sortProperties,
-    sortProperties = _ref$sortProperties === void 0 ? {} : _ref$sortProperties;
-  return _objectSpread$6({
+    sortProperties = _ref$sortProperties === void 0 ? {} : _ref$sortProperties,
+    _ref$payoutId = _ref.payoutId,
+    payoutId = _ref$payoutId === void 0 ? null : _ref$payoutId;
+  return _objectSpread$8({
     tab: tab,
+    payoutId: payoutId,
     page: (_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page,
     pageSize: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize,
     filters: JSON.stringify(filters)
@@ -815,7 +825,7 @@ var buildRowData = function buildRowData(_ref2) {
     tab = _ref2$tab === void 0 ? "all" : _ref2$tab;
   return data.map(function (element, index) {
     var _pageProperties$tab3, _pageProperties$tab4;
-    return _objectSpread$6(_objectSpread$6({}, element), {}, {
+    return _objectSpread$8(_objectSpread$8({}, element), {}, {
       payable: element.payable,
       identifier: element,
       id: isEmpty(pageProperties) ? index + 1 : ((_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize) * (((_pageProperties$tab4 = pageProperties[tab]) === null || _pageProperties$tab4 === void 0 ? void 0 : _pageProperties$tab4.page) - 1) + index + 1
@@ -910,7 +920,7 @@ var renderIdentifier$2 = function renderIdentifier() {
 };
 var renderCountry = pipe(split("_"), map(capitalize), join(" "));
 
-var COLUMNS$2 = [{
+var COLUMNS$3 = [{
   title: t$1("neetoPayments.common.id"),
   dataIndex: "id",
   key: "id",
@@ -957,9 +967,9 @@ var COLUMNS$2 = [{
   sorter: true
 }];
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFiltersAndPagination$2 = function useFiltersAndPagination() {
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFiltersAndPagination$3 = function useFiltersAndPagination() {
   var urlSearchParams = useURLSearchParams();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -969,7 +979,7 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination() {
     _useState4 = _slicedToArray(_useState3, 2),
     isFilterPaneOpen = _useState4[0],
     setIsFilterPaneOpen = _useState4[1];
-  var _useState5 = useState(buildDefaultPageProperties(TABS$2)),
+  var _useState5 = useState(buildDefaultPageProperties(TABS$3)),
     _useState6 = _slicedToArray(_useState5, 2),
     pageProperties = _useState6[0],
     setPageProperties = _useState6[1];
@@ -977,7 +987,7 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination() {
     _useState8 = _slicedToArray(_useState7, 2),
     sortProperties = _useState8[0],
     setSortProperties = _useState8[1];
-  var _useState9 = useState(TAB$2.all),
+  var _useState9 = useState(TAB$3.all),
     _useState10 = _slicedToArray(_useState9, 2),
     tab = _useState10[0],
     setTab = _useState10[1];
@@ -986,13 +996,13 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination() {
     hiddenColumns = _useState12[0],
     setHiddenColumns = _useState12[1];
   var _getQueryParams = getQueryParams(),
-    _getQueryParams$searc = _getQueryParams.search_term,
+    _getQueryParams$searc = _getQueryParams.searchTerm,
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
-  var searchKeywordProps = _objectSpread$5(_objectSpread$5({}, SEARCH_PROPS), {}, {
+  var searchKeywordProps = _objectSpread$7(_objectSpread$7({}, SEARCH_PROPS$1), {}, {
     key: "search_term",
     value: searchTerm.trim()
   });
-  var _useState13 = useState(buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS$2), [searchKeywordProps]))),
+  var _useState13 = useState(buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS$3), [searchKeywordProps]))),
     _useState14 = _slicedToArray(_useState13, 2),
     filters = _useState14[0],
     setFilters = _useState14[1];
@@ -1000,9 +1010,9 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination() {
     _useState16 = _slicedToArray(_useState15, 2),
     dataSize = _useState16[0],
     setDataSize = _useState16[1];
-  var selectableColumnData = tab !== TAB$2.all ? removeBy({
+  var selectableColumnData = tab !== TAB$3.all ? removeBy({
     key: "status"
-  }, COLUMNS$2) : COLUMNS$2;
+  }, COLUMNS$3) : COLUMNS$3;
   var columnData = selectableColumnData.filter(function (_ref) {
     var dataIndex = _ref.dataIndex;
     return !hiddenColumns.includes(dataIndex);
@@ -1037,13 +1047,13 @@ var useFiltersAndPagination$2 = function useFiltersAndPagination() {
   };
 };
 
-var list$6 = function list(payload) {
+var list$8 = function list(payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/stripe/accounts"), {
     params: payload
   });
 };
 var accountsApi$3 = {
-  list: list$6
+  list: list$8
 };
 
 var QUERY_KEYS = {
@@ -1058,9 +1068,11 @@ var QUERY_KEYS = {
   STRIPE_ACCOUNTS_LIST: "stripe-accounts-list",
   STRIPE_PLATFORM_TRANSACTION: "stripe-platform-transaction",
   STRIPE_REFUNDS_LIST: "stripe-refunds-list",
+  STRIPE_PAYOUTS_LIST: "stripe-payouts-list",
   SQUARE_ACCOUNT_DETAILS: "square-account-details",
   SQUARE_PAYMENTS_LIST: "payments-list",
-  SQUARE_REFUNDS_LIST: "refunds-list"
+  SQUARE_REFUNDS_LIST: "refunds-list",
+  STRIPE_PAYOUT: "stripe-payout"
 };
 
 var useFetchConnectedAccounts = function useFetchConnectedAccounts() {
@@ -1071,7 +1083,7 @@ var useFetchConnectedAccounts = function useFetchConnectedAccounts() {
   }, options);
 };
 
-var List$2 = function List(_ref) {
+var List$3 = function List(_ref) {
   var _pageProperties$tab3, _pageProperties$tab4, _pageProperties$tab5;
   var columnData = _ref.columnData,
     filters = _ref.filters,
@@ -1123,8 +1135,8 @@ var List$2 = function List(_ref) {
   }, [filters, tab]);
   useEffect(function () {
     var _pageProperties$tab, _pageProperties$tab2;
-    var tab = urlSearchParams.get("tab") || TAB$2.all;
-    var validatedTab = TABS$2.includes(tab) ? tab : TAB$2.all;
+    var tab = urlSearchParams.get("tab") || TAB$3.all;
+    var validatedTab = TABS$3.includes(tab) ? tab : TAB$3.all;
     var page = Number(urlSearchParams.get("page")) || ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page);
     var pageSize = Number(urlSearchParams.get("page_size")) || ((_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize);
     handleTabChange(validatedTab);
@@ -1144,7 +1156,9 @@ var List$2 = function List(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/React.createElement(NoData, {
-      title: t("neetoPayments.emptyState.account")
+      title: tab === TAB$3.all ? t("neetoPayments.emptyState.account") : t("neetoPayments.emptyState.accountWithStatus", {
+        status: tab
+      })
     }));
   }
   return /*#__PURE__*/React.createElement(TableWrapper, {
@@ -1185,7 +1199,7 @@ var AccountsDashboard = function AccountsDashboard() {
     _useState2 = _slicedToArray(_useState, 2),
     showExportModal = _useState2[0],
     setShowExportModal = _useState2[1];
-  var _useFiltersAndPaginat = useFiltersAndPagination$2(),
+  var _useFiltersAndPaginat = useFiltersAndPagination$3(),
     isFilterButtonVisible = _useFiltersAndPaginat.isFilterButtonVisible,
     isFilterPaneOpen = _useFiltersAndPaginat.isFilterPaneOpen,
     pageProperties = _useFiltersAndPaginat.pageProperties,
@@ -1216,7 +1230,7 @@ var AccountsDashboard = function AccountsDashboard() {
       placeholder: t("neetoPayments.common.search"),
       className: "w-80"
     }
-  }), isTabsVisible && /*#__PURE__*/React.createElement(Tab, null, TABS$2.map(function (item) {
+  }), isTabsVisible && /*#__PURE__*/React.createElement(Tab, null, TABS$3.map(function (item) {
     return /*#__PURE__*/React.createElement(Tab.Item, {
       active: tab === item,
       key: item,
@@ -1229,18 +1243,21 @@ var AccountsDashboard = function AccountsDashboard() {
     leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React.createElement(Typography, {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
-    }, t("neetoPayments.countOf.account", {
+    }, tab === TAB$3.all ? t("neetoPayments.countOf.account", {
       count: dataSize
+    }) : t("neetoPayments.countOf.accountWithStatus", {
+      count: dataSize,
+      status: tab
     })),
     rightActionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, {
-      columns: FILTER_COLUMNS$2,
+      columns: FILTER_COLUMNS$3,
       keyword: searchKeywordProps,
       setIsPaneOpen: setIsFilterPaneOpen,
       onChange: handleFiltersChange
     }), isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
       columnsButtonProps: {
         columnData: selectableColumnData,
-        fixedColumns: DASHBOARD_MANDATORY_COLUMNS$1,
+        fixedColumns: DASHBOARD_MANDATORY_COLUMNS$2,
         onChange: function onChange(_, hiddenColumns) {
           return setHiddenColumns(hiddenColumns);
         },
@@ -1252,14 +1269,14 @@ var AccountsDashboard = function AccountsDashboard() {
         }
       },
       filterProps: {
-        columns: FILTER_COLUMNS$2,
+        columns: FILTER_COLUMNS$3,
         isOpen: isFilterPaneOpen,
         keyword: searchKeywordProps,
         setIsOpen: setIsFilterPaneOpen,
         onChange: handleFiltersChange
       }
     }))
-  }), /*#__PURE__*/React.createElement(List$2, {
+  }), /*#__PURE__*/React.createElement(List$3, {
     columnData: columnData,
     filters: filters,
     handleTabChange: handleTabChange,
@@ -1270,7 +1287,7 @@ var AccountsDashboard = function AccountsDashboard() {
     setSortProperties: setSortProperties,
     sortProperties: sortProperties,
     tab: tab
-  }), /*#__PURE__*/React.createElement(ExportModal$1, {
+  }), /*#__PURE__*/React.createElement(ExportModal$2, {
     filters: filters,
     setShowExportModal: setShowExportModal,
     showExportModal: showExportModal,
@@ -1295,7 +1312,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var TAB$1 = {
+var TAB$2 = {
   all: "all",
   successful: "successful",
   declined: "declined",
@@ -1311,7 +1328,7 @@ var KIND = {
   transfer: "transfer",
   refund: "refund"
 };
-var TABS$1 = Object.values(TAB$1);
+var TABS$2 = Object.values(TAB$2);
 var TAB_METADATA$1 = {
   all: {},
   successful: {},
@@ -1371,7 +1388,7 @@ var APPENDABLE_SEARCH_PROPS = {
     model: "NeetoPaymentsEngine::Stripe::Transaction,"
   }
 };
-var DASHBOARD_MANDATORY_COLUMNS = ["id", "status", "identifier"];
+var DASHBOARD_MANDATORY_COLUMNS$1 = ["id", "status", "identifier"];
 
 var renderIdentifier$1 = function renderIdentifier() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -1499,7 +1516,7 @@ var generateSpecialColumns = function generateSpecialColumns(_ref) {
   }];
 };
 
-var COLUMNS$1 = [{
+var COLUMNS$2 = [{
   title: t$1("neetoPayments.common.id"),
   dataIndex: "id",
   key: "id",
@@ -1783,7 +1800,7 @@ var COLUMN_METADATA$1 = {
     }
   }
 };
-var FILTER_COLUMNS = [{
+var FILTER_COLUMNS$1 = [{
   key: "amount",
   label: t$1("neetoPayments.common.amount"),
   node: "amount",
@@ -1834,7 +1851,7 @@ var buildPaymentColumns$1 = function buildPaymentColumns(_ref) {
     payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol,
     _ref$specialColumnArg = _ref.specialColumnArguments,
     specialColumnArguments = _ref$specialColumnArg === void 0 ? {} : _ref$specialColumnArg;
-  return sortBy(prop("position"), COLUMNS$1.concat(generateSpecialColumns(specialColumnArguments)).filter(function (_ref2) {
+  return sortBy(prop("position"), COLUMNS$2.concat(generateSpecialColumns(specialColumnArguments)).filter(function (_ref2) {
     var _COLUMN_METADATA$key, _COLUMN_METADATA$key2;
     var key = _ref2.key;
     return !((_COLUMN_METADATA$key = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key !== void 0 && (_COLUMN_METADATA$key = _COLUMN_METADATA$key.isHidden) !== null && _COLUMN_METADATA$key !== void 0 && _COLUMN_METADATA$key[kind] || (_COLUMN_METADATA$key2 = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key2 !== void 0 && (_COLUMN_METADATA$key2 = _COLUMN_METADATA$key2.isHidden) !== null && _COLUMN_METADATA$key2 !== void 0 && _COLUMN_METADATA$key2[tab]);
@@ -1845,7 +1862,7 @@ var buildPaymentColumns$1 = function buildPaymentColumns(_ref) {
 };
 var buildFilterColumns$1 = function buildFilterColumns(tab, kind) {
   var payableEntityColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var filterColumns = FILTER_COLUMNS.filter(function (_ref4) {
+  var filterColumns = FILTER_COLUMNS$1.filter(function (_ref4) {
     var _COLUMN_METADATA$key3;
     var key = _ref4.key;
     return !((_COLUMN_METADATA$key3 = COLUMN_METADATA$1[key]) !== null && _COLUMN_METADATA$key3 !== void 0 && (_COLUMN_METADATA$key3 = _COLUMN_METADATA$key3.isHidden) !== null && _COLUMN_METADATA$key3 !== void 0 && _COLUMN_METADATA$key3[kind]);
@@ -1872,9 +1889,9 @@ var modifySearchProps = function modifySearchProps(_ref5) {
   }, searchProps);
 };
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ExportModal = function ExportModal(_ref) {
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ExportModal$1 = function ExportModal(_ref) {
   var showExportModal = _ref.showExportModal,
     setShowExportModal = _ref.setShowExportModal,
     kind = _ref.kind,
@@ -1907,7 +1924,7 @@ var ExportModal = function ExportModal(_ref) {
     }
   };
   var handleGenerateClick = function handleGenerateClick() {
-    var payload = _objectSpread$4({
+    var payload = _objectSpread$6({
       kind: isTransferKind(kind) ? "connected" : kind,
       token: token,
       filters: JSON.stringify(filters),
@@ -1964,15 +1981,15 @@ var ExportModal = function ExportModal(_ref) {
   }))));
 };
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFiltersAndPagination$1 = function useFiltersAndPagination(_ref) {
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFiltersAndPagination$2 = function useFiltersAndPagination(_ref) {
   var payableEntityColumns = _ref.payableEntityColumns,
     kind = _ref.kind,
     searchProps = _ref.searchProps;
   var urlSearchParams = useURLSearchParams();
   var history = useHistory();
-  var tabs = TABS$1.filter(function (tab) {
+  var tabs = TABS$2.filter(function (tab) {
     var _TAB_METADATA$tab;
     return !((_TAB_METADATA$tab = TAB_METADATA$1[tab]) !== null && _TAB_METADATA$tab !== void 0 && (_TAB_METADATA$tab = _TAB_METADATA$tab.isHidden) !== null && _TAB_METADATA$tab !== void 0 && _TAB_METADATA$tab[kind]);
   });
@@ -1992,7 +2009,7 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     sortProperties = _useState8[0],
     setSortProperties = _useState8[1];
-  var _useState9 = useState(TAB$1.all),
+  var _useState9 = useState(TAB$2.all),
     _useState10 = _slicedToArray(_useState9, 2),
     tab = _useState10[0],
     setTab = _useState10[1];
@@ -2002,9 +2019,9 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(_ref) {
     setHiddenColumns = _useState12[1];
   var filterableColumns = buildFilterColumns$1(tab, kind, payableEntityColumns);
   var _getQueryParams = getQueryParams(),
-    _getQueryParams$searc = _getQueryParams.search_term,
+    _getQueryParams$searc = _getQueryParams.searchTerm,
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
-  var searchKeywordProps = _objectSpread$3(_objectSpread$3({}, modifySearchProps({
+  var searchKeywordProps = _objectSpread$5(_objectSpread$5({}, modifySearchProps({
     searchProps: searchProps,
     kind: kind
   })), {}, {
@@ -2073,11 +2090,24 @@ var useFiltersAndPagination$1 = function useFiltersAndPagination(_ref) {
   };
 };
 
-var show$3 = function show(holdableId) {
+var show$5 = function show(holdableId) {
   return axios.get("".concat(BASE_URL, "/api/v1/stripe/holdable/").concat(holdableId, "/account"));
 };
 var accountsApi$2 = {
-  show: show$3
+  show: show$5
+};
+
+var list$7 = function list(payload) {
+  return axios.get("".concat(BASE_URL, "/api/v1/stripe/holdable/payouts"), {
+    params: payload
+  });
+};
+var show$4 = function show(id) {
+  return axios.get("".concat(BASE_URL, "/api/v1/stripe/holdable/payouts/").concat(id));
+};
+var payoutsApi$1 = {
+  list: list$7,
+  show: show$4
 };
 
 function getDefaultExportFromCjs (x) {
@@ -4144,7 +4174,7 @@ var defaultList$2 = function defaultList(payload) {
     }
   });
 };
-var list$5 = function list(holdableId, payload) {
+var list$6 = function list(holdableId, payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/stripe/holdables/").concat(holdableId, "/transactions"), {
     params: payload,
     paramsSerializer: function paramsSerializer(params) {
@@ -4156,7 +4186,7 @@ var list$5 = function list(holdableId, payload) {
 };
 var transactionsApi$1 = {
   defaultList: defaultList$2,
-  list: list$5
+  list: list$6
 };
 
 var useFetchConnectedStripeAccount = function useFetchConnectedStripeAccount(holdableId) {
@@ -4176,8 +4206,20 @@ var useFetchStripeTransactions = function useFetchStripeTransactions() {
     return transactionsApi$1.defaultList(payload);
   }, options);
 };
+var useFetchStripePayouts = function useFetchStripePayouts(payload) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery([QUERY_KEYS.STRIPE_PAYOUTS_LIST, payload], function () {
+    return payoutsApi$1.list(payload);
+  }, options);
+};
+var useShowStripePayout = function useShowStripePayout(id) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery(QUERY_KEYS.STRIPE_PAYOUT, function () {
+    return payoutsApi$1.show(id);
+  }, options);
+};
 
-var list$4 = function list(payload) {
+var list$5 = function list(payload) {
   return axios.get("".concat(BASE_URL, "/api/v1/stripe/holdable/refunds"), {
     params: payload,
     paramsSerializer: function paramsSerializer(params) {
@@ -4188,13 +4230,26 @@ var list$4 = function list(payload) {
   });
 };
 var refundsApi = {
-  list: list$4
+  list: list$5
 };
 
-var show$2 = function show() {
+var show$3 = function show() {
   return axios.get("".concat(BASE_URL, "/api/v1/stripe_platform/account"));
 };
 var accountsApi$1 = {
+  show: show$3
+};
+
+var list$4 = function list(payload) {
+  return axios.get("".concat(BASE_URL, "/api/v1/stripe_platform/payouts"), {
+    params: payload
+  });
+};
+var show$2 = function show(id) {
+  return axios.get("".concat(BASE_URL, "/api/v1/stripe_platform/payouts/").concat(id));
+};
+var payoutsApi = {
+  list: list$4,
   show: show$2
 };
 
@@ -4258,6 +4313,18 @@ var useFetchStripeRefunds = function useFetchStripeRefunds(payload) {
     return refundsApi.list(payload);
   }, options);
 };
+var useFetchStripePlatformPayouts = function useFetchStripePlatformPayouts(payload) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery([QUERY_KEYS.STRIPE_PAYOUTS_LIST, payload], function () {
+    return payoutsApi.list(payload);
+  }, options);
+};
+var useShowStripePlatformPayout = function useShowStripePlatformPayout(id) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery(QUERY_KEYS.STRIPE_PAYOUT, function () {
+    return payoutsApi.show(id);
+  }, options);
+};
 
 var SPLIT_COLUMNS = [{
   key: "splitSubId",
@@ -4356,16 +4423,16 @@ var ExpandedRow = function ExpandedRow() {
   })));
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFetchData = function useFetchData(_ref) {
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFetchData$2 = function useFetchData(_ref) {
   var _data$kind, _data$kind2, _data$kind3, _data$kind4;
   var kind = _ref.kind,
     holdableId = _ref.holdableId,
     payload = _ref.payload,
     isPlatformEnabled = _ref.isPlatformEnabled;
   var data = {};
-  data.transfer = data.connected = useFetchStripeTransactions(holdableId, _objectSpread$2(_objectSpread$2({}, payload), {}, {
+  data.transfer = data.connected = useFetchStripeTransactions(holdableId, _objectSpread$4(_objectSpread$4({}, payload), {}, {
     kind: kind
   }), {
     enabled: isTransferKind(kind) || isConnectedKind(kind)
@@ -4434,10 +4501,10 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var _excluded$1 = ["transactionId"];
+var _excluded$2 = ["transactionId"];
 var Details = function Details(_ref) {
   var transactionId = _ref.transactionId,
-    paneProps = _objectWithoutProperties(_ref, _excluded$1);
+    paneProps = _objectWithoutProperties(_ref, _excluded$2);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchStripePlatfo = useFetchStripePlatformTransaction(transactionId),
@@ -4461,27 +4528,39 @@ var Details = function Details(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-2"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-2 gap-y-2"
+    className: "flex items-center space-x-2"
   }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, t("neetoPayments.transactionPane.transactionId")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, renderIdentifier$1({
     identifier: identifier,
     live: live
-  })), /*#__PURE__*/React.createElement(Typography, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, t("neetoPayments.transactionPane.amount")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
     style: "body2"
-  }, amount), /*#__PURE__*/React.createElement(Typography, {
+  }, amount)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, t("neetoPayments.transactionPane.netAmount")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
     style: "body2"
-  }, netAmount), /*#__PURE__*/React.createElement(Typography, {
+  }, netAmount)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
-  }, t("neetoPayments.transactionPane.status")), renderStatus("transaction", status), /*#__PURE__*/React.createElement(Typography, {
+  }, t("neetoPayments.transactionPane.status")), renderStatus("transaction", status)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, t("neetoPayments.transactionPane.paidOn")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, renderDate(paymentAt)))), /*#__PURE__*/React.createElement(Typography, {
     style: "h3"
@@ -4491,7 +4570,7 @@ var Details = function Details(_ref) {
   }))));
 };
 
-var List$1 = function List(_ref) {
+var List$2 = function List(_ref) {
   var _pageProperties$tab3, _pageProperties$tab4, _pageProperties$tab5;
   var _ref$isPlatformEnable = _ref.isPlatformEnabled,
     isPlatformEnabled = _ref$isPlatformEnable === void 0 ? false : _ref$isPlatformEnable,
@@ -4509,12 +4588,13 @@ var List$1 = function List(_ref) {
     handleTabChange = _ref.handleTabChange,
     setDataSize = _ref.setDataSize,
     sortProperties = _ref.sortProperties,
-    setSortProperties = _ref.setSortProperties;
+    setSortProperties = _ref.setSortProperties,
+    payoutId = _ref.payoutId;
   var urlSearchParams = useURLSearchParams();
   var history = useHistory();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var tabs = TABS$1.filter(function (tab) {
+  var tabs = TABS$2.filter(function (tab) {
     var _TAB_METADATA$tab;
     return !((_TAB_METADATA$tab = TAB_METADATA$1[tab]) !== null && _TAB_METADATA$tab !== void 0 && (_TAB_METADATA$tab = _TAB_METADATA$tab.isHidden) !== null && _TAB_METADATA$tab !== void 0 && _TAB_METADATA$tab[kind]);
   });
@@ -4530,14 +4610,15 @@ var List$1 = function List(_ref) {
     _useFetchConnectedStr2 = _useFetchConnectedStr.data,
     _useFetchConnectedStr3 = _useFetchConnectedStr2 === void 0 ? {} : _useFetchConnectedStr2,
     stripeConnectedAccount = _useFetchConnectedStr3.account;
-  var _useFetchData = useFetchData({
+  var _useFetchData = useFetchData$2({
       kind: kind,
       holdableId: holdableId,
       payload: buildPayload({
         tab: tab,
         filters: filters,
         pageProperties: pageProperties,
-        sortProperties: sortProperties
+        sortProperties: sortProperties,
+        payoutId: payoutId
       }),
       isPlatformEnabled: isPlatformEnabled
     }),
@@ -4567,8 +4648,8 @@ var List$1 = function List(_ref) {
   }, [filters, tab]);
   useEffect(function () {
     var _pageProperties$tab, _pageProperties$tab2;
-    var tab = urlSearchParams.get("tab") || TAB$1.all;
-    var validatedTab = tabs.includes(tab) ? tab : TAB$1.all;
+    var tab = urlSearchParams.get("tab") || TAB$2.all;
+    var validatedTab = tabs.includes(tab) ? tab : TAB$2.all;
     var page = Number(urlSearchParams.get("page")) || ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page);
     var pageSize = Number(urlSearchParams.get("page_size")) || ((_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize);
     handleTabChange(validatedTab);
@@ -4588,7 +4669,9 @@ var List$1 = function List(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/React.createElement(NoData, {
-      title: isRefundKind$1(kind) ? t("neetoPayments.emptyState.refund") : t("neetoPayments.emptyState.payment")
+      title: tab === TAB$2.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
+        status: tab
+      })
     }));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableWrapper, {
@@ -4642,7 +4725,9 @@ var Dashboard = function Dashboard(_ref) {
     _ref$payableEntityCol = _ref.payableEntityColumns,
     payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol,
     _ref$kind = _ref.kind,
-    kind = _ref$kind === void 0 ? "connected" : _ref$kind;
+    kind = _ref$kind === void 0 ? "connected" : _ref$kind,
+    _ref$payoutId = _ref.payoutId,
+    payoutId = _ref$payoutId === void 0 ? null : _ref$payoutId;
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2);
     _useTransition2[0];
@@ -4653,7 +4738,7 @@ var Dashboard = function Dashboard(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showExportModal = _useState2[0],
     setShowExportModal = _useState2[1];
-  var _useFiltersAndPaginat = useFiltersAndPagination$1({
+  var _useFiltersAndPaginat = useFiltersAndPagination$2({
       payableEntityColumns: payableEntityColumns,
       kind: kind,
       searchProps: searchProps
@@ -4706,8 +4791,11 @@ var Dashboard = function Dashboard(_ref) {
     leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React.createElement(Typography, {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
-    }, t("neetoPayments.countOf.".concat(kind), {
+    }, tab === TAB$2.all ? t("neetoPayments.countOf.".concat(kind), {
       count: dataSize
+    }) : t("neetoPayments.countOf.".concat(kind, "WithStatus"), {
+      count: dataSize,
+      status: tab
     })),
     rightActionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, {
       columns: filterableColumns,
@@ -4717,7 +4805,7 @@ var Dashboard = function Dashboard(_ref) {
     }), isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
       columnsButtonProps: {
         columnData: selectableColumnData,
-        fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
+        fixedColumns: DASHBOARD_MANDATORY_COLUMNS$1,
         onChange: function onChange(_, hiddenColumns) {
           return setHiddenColumns(hiddenColumns);
         },
@@ -4736,7 +4824,7 @@ var Dashboard = function Dashboard(_ref) {
         onChange: handleFiltersChange
       }
     }))
-  }), /*#__PURE__*/React.createElement(List$1, {
+  }), /*#__PURE__*/React.createElement(List$2, {
     columnData: columnData,
     filters: filters,
     handleTabChange: handleTabChange,
@@ -4751,8 +4839,9 @@ var Dashboard = function Dashboard(_ref) {
     setPaneStatus: setPaneStatus,
     setSortProperties: setSortProperties,
     sortProperties: sortProperties,
-    tab: tab
-  }), /*#__PURE__*/React.createElement(ExportModal, {
+    tab: tab,
+    payoutId: payoutId
+  }), /*#__PURE__*/React.createElement(ExportModal$1, {
     filters: filters,
     holdableId: holdableId,
     kind: kind,
@@ -4762,57 +4851,684 @@ var Dashboard = function Dashboard(_ref) {
     tab: tab
   }));
 };
-var index$2 = withTitle(withReactQuery(Dashboard), t$1("neetoPayments.common.payments"));
+var Dashboard$1 = withTitle(withReactQuery(Dashboard), t$1("neetoPayments.common.payments"));
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+var TAB$1 = {
+  all: "all",
+  paid: "paid",
+  pending: "pending",
+  inTransit: "inTransit",
+  failed: "failed",
+  canceled: "canceled"
+};
+var TABS$1 = Object.values(TAB$1);
+var SEARCH_PROPS = {
+  key: "keyword",
+  node: "identifier,destination_identifier",
+  model: "NeetoPaymentsEngine::Payout"
+};
+var DASHBOARD_MANDATORY_COLUMNS = ["id", "status", "identifier"];
+var FILTER_COLUMNS = [{
+  key: "createdAt",
+  label: t$1("neetoPayments.common.createdAt"),
+  node: "created_at",
+  type: "date",
+  showRuleSelector: true
+}, {
+  key: "arrivalDate",
+  label: t$1("neetoPayments.common.arrivalDate"),
+  node: "arrival_date",
+  type: "date",
+  showRuleSelector: true
+}];
+
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ExportModal = function ExportModal(_ref) {
+  var showExportModal = _ref.showExportModal,
+    setShowExportModal = _ref.setShowExportModal,
+    tab = _ref.tab,
+    filters = _ref.filters,
+    _ref$sortProperties = _ref.sortProperties,
+    sortProperties = _ref$sortProperties === void 0 ? {} : _ref$sortProperties;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    downloadUrl = _useState2[0],
+    setDownloadUrl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isGenerating = _useState4[0],
+    setIsGenerating = _useState4[1];
+  var _useExportData = useExportData(),
+    exportCsv = _useExportData.mutate,
+    isLoading = _useExportData.isLoading;
+  var isFileLoading = isLoading || isGenerating;
+  var token = useMemo(function () {
+    return "payout-report-".concat(uuidV4());
+  }, []);
+  var receivedCallback = function receivedCallback(data) {
+    if (data.download_url) {
+      setDownloadUrl(data.download_url);
+      setIsGenerating(false);
+    }
+  };
+  var handleGenerateClick = function handleGenerateClick() {
+    var payload = _objectSpread$3({
+      kind: "payout",
+      token: token,
+      filters: JSON.stringify(filters),
+      tab: tab
+    }, sortProperties);
+    exportCsv(payload, {
+      onSuccess: function onSuccess() {
+        setDownloadUrl("");
+        setIsGenerating(true);
       }
-      _next(undefined);
     });
   };
-}
-
-var regeneratorRuntime$1 = {exports: {}};
-
-var _typeof = {exports: {}};
-
-_typeof.exports;
-
-(function (module) {
-	function _typeof(obj) {
-	  "@babel/helpers - typeof";
+  useEffect(function () {
+    if (showExportModal) {
+      var channel = exportChannel(token, receivedCallback);
+      setDownloadUrl("");
+      setIsGenerating(false);
+      return function () {
+        channel.disconnected();
+      };
+    }
+    return undefined;
+  }, [showExportModal, token]);
+  var onClose = function onClose() {
+    return setShowExportModal(false);
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    isOpen: showExportModal
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, t("neetoPayments.export.title.payout"))), /*#__PURE__*/React.createElement(Modal.Body, null, isFileLoading ? /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.payout"))), /*#__PURE__*/React.createElement(Modal.Footer, {
+    className: "space-x-2"
+  }, downloadUrl ? /*#__PURE__*/React.createElement(Button, {
+    href: downloadUrl,
+    icon: Download,
+    label: t("neetoPayments.common.download"),
+    onClick: onClose
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    disabled: isFileLoading,
+    label: t("neetoPayments.common.export"),
+    loading: isFileLoading,
+    onClick: handleGenerateClick
+  }), /*#__PURE__*/React.createElement(Button, {
+    disabled: isFileLoading,
+    label: t("neetoPayments.common.cancel"),
+    style: "text",
+    onClick: onClose
+  }))));
+};
 
-	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-	    return typeof obj;
-	  } : function (obj) {
-	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
-	}
-	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (_typeof));
+var COLUMNS$1 = [{
+  title: t$1("neetoPayments.common.id"),
+  dataIndex: "id",
+  key: "id",
+  width: "72px"
+}, {
+  title: t$1("neetoPayments.common.status"),
+  dataIndex: "status",
+  key: "status",
+  render: renderStatus("payout"),
+  width: "150px",
+  sorter: true
+}, {
+  title: t$1("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  key: "amount",
+  width: "150px",
+  sorter: true
+}, {
+  title: t$1("neetoPayments.common.createdAt"),
+  dataIndex: "createdAt",
+  key: "createdAt",
+  width: "220px",
+  render: renderDate,
+  sorter: true
+}, {
+  title: t$1("neetoPayments.common.arrivalDate"),
+  dataIndex: "arrivalDate",
+  key: "arrivalDate",
+  width: "220px",
+  render: renderDate,
+  sorter: true
+}, {
+  title: t$1("neetoPayments.common.destinationIdentifier"),
+  dataIndex: "destinationIdentifier",
+  key: "destinationIdentifier",
+  width: "300px"
+}];
+var IDENTIFIER_COLUMN = {
+  title: t$1("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  key: "identifier",
+  width: "300px"
+};
+
+var renderPayoutIdentifier$1 = curry(function (route, _ref) {
+  var _ref$identifier = _ref.identifier,
+    identifier = _ref$identifier === void 0 ? "" : _ref$identifier,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? "" : _ref$id;
+  return /*#__PURE__*/React.createElement(CopyButtonWrapper, {
+    content: identifier
+  }, /*#__PURE__*/React.createElement(Button, {
+    label: identifier,
+    size: "small",
+    style: "link",
+    to: buildUrl(route, {
+      id: id
+    })
+  }));
+});
+
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFiltersAndPagination$1 = function useFiltersAndPagination(payoutsPageRoute) {
+  var urlSearchParams = useURLSearchParams();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFilterButtonVisible = _useState2[0],
+    setIsFilterButtonVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFilterPaneOpen = _useState4[0],
+    setIsFilterPaneOpen = _useState4[1];
+  var _useState5 = useState(buildDefaultPageProperties(TABS$1)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pageProperties = _useState6[0],
+    setPageProperties = _useState6[1];
+  var _useState7 = useState(DEFAULT_SORT_PROPERTIES),
+    _useState8 = _slicedToArray(_useState7, 2),
+    sortProperties = _useState8[0],
+    setSortProperties = _useState8[1];
+  var _useState9 = useState(TAB$1.all),
+    _useState10 = _slicedToArray(_useState9, 2),
+    tab = _useState10[0],
+    setTab = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hiddenColumns = _useState12[0],
+    setHiddenColumns = _useState12[1];
+  var _getQueryParams = getQueryParams(),
+    _getQueryParams$searc = _getQueryParams.searchTerm,
+    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
+  var searchKeywordProps = _objectSpread$2(_objectSpread$2({}, SEARCH_PROPS), {}, {
+    key: "search_term",
+    value: searchTerm.trim()
+  });
+  var _useState13 = useState(buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS), [searchKeywordProps]))),
+    _useState14 = _slicedToArray(_useState13, 2),
+    filters = _useState14[0],
+    setFilters = _useState14[1];
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    dataSize = _useState16[0],
+    setDataSize = _useState16[1];
+  var identifierColumn = assoc("render", renderPayoutIdentifier$1(payoutsPageRoute), IDENTIFIER_COLUMN);
+  var columns = insert(1, identifierColumn, COLUMNS$1);
+  var selectableColumnData = tab !== TAB$1.all ? removeBy({
+    key: "status"
+  }, columns) : columns;
+  var columnData = selectableColumnData.filter(function (_ref) {
+    var dataIndex = _ref.dataIndex;
+    return !hiddenColumns.includes(dataIndex);
+  });
+  var handleTabChange = function handleTabChange(tab) {
+    var _pageProperties$tab, _pageProperties$tab2;
+    urlSearchParams.set("tab", tab);
+    urlSearchParams.set("page", (_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page);
+    urlSearchParams.set("page_size", (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize);
+    setTab(tab);
+  };
+  return {
+    isFilterButtonVisible: isFilterButtonVisible,
+    isFilterPaneOpen: isFilterPaneOpen,
+    pageProperties: pageProperties,
+    filters: filters,
+    searchKeywordProps: searchKeywordProps,
+    tab: tab,
+    sortProperties: sortProperties,
+    columnData: columnData,
+    selectableColumnData: selectableColumnData,
+    dataSize: dataSize,
+    setDataSize: setDataSize,
+    setHiddenColumns: setHiddenColumns,
+    setIsFilterButtonVisible: setIsFilterButtonVisible,
+    setIsFilterPaneOpen: setIsFilterPaneOpen,
+    setPageProperties: setPageProperties,
+    setFilters: setFilters,
+    setTab: setTab,
+    handleTabChange: handleTabChange,
+    setSortProperties: setSortProperties
+  };
+};
+
+var useFetchData$1 = function useFetchData(_ref) {
+  var _data$kind, _data$kind2, _data$kind3, _data$kind4;
+  var isPlatformEnabled = _ref.isPlatformEnabled,
+    payload = _ref.payload;
+  var data = {};
+  var kind = isPlatformEnabled ? "platform" : "connected";
+  data.connected = useFetchStripePayouts(payload, {
+    enabled: !isPlatformEnabled
+  });
+  data.platform = useFetchStripePlatformPayouts(payload, {
+    enabled: isPlatformEnabled
+  });
+  return {
+    data: (_data$kind = data[kind]) === null || _data$kind === void 0 || (_data$kind = _data$kind.data) === null || _data$kind === void 0 ? void 0 : _data$kind.payouts,
+    dataSize: (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.data) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.views) === null || _data$kind2 === void 0 ? void 0 : _data$kind2[payload === null || payload === void 0 ? void 0 : payload.tab],
+    isDataLoading: (_data$kind3 = data[kind]) === null || _data$kind3 === void 0 ? void 0 : _data$kind3.isLoading,
+    isDataFetching: (_data$kind4 = data[kind]) === null || _data$kind4 === void 0 ? void 0 : _data$kind4.isFetching
+  };
+};
+
+var List$1 = function List(_ref) {
+  var _pageProperties$tab3, _pageProperties$tab4, _pageProperties$tab5;
+  var columnData = _ref.columnData,
+    filters = _ref.filters,
+    handleTabChange = _ref.handleTabChange,
+    pageProperties = _ref.pageProperties,
+    setDataSize = _ref.setDataSize,
+    setIsFilterButtonVisible = _ref.setIsFilterButtonVisible,
+    setPageProperties = _ref.setPageProperties,
+    setSortProperties = _ref.setSortProperties,
+    sortProperties = _ref.sortProperties,
+    tab = _ref.tab,
+    isPlatformEnabled = _ref.isPlatformEnabled;
+  var urlSearchParams = useURLSearchParams();
+  var history = useHistory();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchData = useFetchData$1({
+      payload: buildPayload({
+        filters: filters,
+        pageProperties: pageProperties,
+        sortProperties: sortProperties,
+        tab: tab
+      }),
+      isPlatformEnabled: isPlatformEnabled
+    }),
+    payouts = _useFetchData.data,
+    isDataLoading = _useFetchData.isDataLoading,
+    dataSize = _useFetchData.dataSize,
+    isDataFetching = _useFetchData.isDataFetching;
+  useEffect(function () {
+    setIsFilterButtonVisible(isPresent(payouts) || isPresent(filters));
+    setDataSize(dataSize);
+  }, [payouts]);
+  var handleTablePagination = function handleTablePagination(page, pageSize) {
+    urlSearchParams.set("page", page);
+    urlSearchParams.set("page_size", pageSize);
+    history.push({
+      search: urlSearchParams.toString()
+    });
+    setPageProperties(assoc(tab, {
+      page: page,
+      pageSize: pageSize
+    }));
+  };
+  useEffect(function () {
+    handleTablePagination(DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE);
+    setSortProperties(DEFAULT_SORT_PROPERTIES);
+  }, [filters, tab]);
+  useEffect(function () {
+    var _pageProperties$tab, _pageProperties$tab2;
+    var tab = urlSearchParams.get("tab") || TAB$1.all;
+    var validatedTab = TABS$1.includes(tab) ? tab : TAB$1.all;
+    var page = Number(urlSearchParams.get("page")) || ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page);
+    var pageSize = Number(urlSearchParams.get("page_size")) || ((_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize);
+    handleTabChange(validatedTab);
+    urlSearchParams.set("tab", validatedTab);
+    handleTablePagination(page, pageSize);
+  }, [urlSearchParams]);
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setSortProperties(isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
+      sortBy: camelToSnakeCase(sorter.field),
+      orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
+    } : DEFAULT_SORT_PROPERTIES);
+  };
+  if (isDataLoading) {
+    return /*#__PURE__*/React.createElement(PageLoader, null);
+  }
+  if (dataSize <= 0 || !isPresent(payouts)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex h-full w-full items-center justify-center"
+    }, /*#__PURE__*/React.createElement(NoData, {
+      title: t("neetoPayments.emptyState.payouts.".concat(tab))
+    }));
+  }
+  return /*#__PURE__*/React.createElement(TableWrapper, {
+    hasPagination: dataSize > ((_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize)
+  }, /*#__PURE__*/React.createElement(Table, {
+    columnData: columnData,
+    fixedHeight: true,
+    allowRowClick: false,
+    currentPageNumber: (_pageProperties$tab4 = pageProperties[tab]) === null || _pageProperties$tab4 === void 0 ? void 0 : _pageProperties$tab4.page,
+    handlePageChange: handleTablePagination,
+    loading: isDataFetching,
+    rowData: buildRowData({
+      data: payouts,
+      pageProperties: pageProperties,
+      tab: tab
+    }),
+    rowSelection: false,
+    sortDirections: SORT_DIRECTIONS,
+    totalCount: dataSize,
+    paginationProps: {
+      showSizeChanger: true,
+      hideOnSinglePage: true,
+      pageSize: (_pageProperties$tab5 = pageProperties[tab]) === null || _pageProperties$tab5 === void 0 ? void 0 : _pageProperties$tab5.pageSize,
+      total: dataSize
+    },
+    onChange: handleTableChange
+  }));
+};
+
+var PayoutsDashboard = function PayoutsDashboard(_ref) {
+  var payoutsPageRoute = _ref.payoutsPageRoute,
+    isPlatformEnabled = _ref.isPlatformEnabled;
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2);
+    _useTransition2[0];
+    var startTransition = _useTransition2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showExportModal = _useState2[0],
+    setShowExportModal = _useState2[1];
+  var _useFiltersAndPaginat = useFiltersAndPagination$1(payoutsPageRoute),
+    isFilterButtonVisible = _useFiltersAndPaginat.isFilterButtonVisible,
+    isFilterPaneOpen = _useFiltersAndPaginat.isFilterPaneOpen,
+    pageProperties = _useFiltersAndPaginat.pageProperties,
+    filters = _useFiltersAndPaginat.filters,
+    searchKeywordProps = _useFiltersAndPaginat.searchKeywordProps,
+    tab = _useFiltersAndPaginat.tab,
+    sortProperties = _useFiltersAndPaginat.sortProperties,
+    columnData = _useFiltersAndPaginat.columnData,
+    selectableColumnData = _useFiltersAndPaginat.selectableColumnData,
+    dataSize = _useFiltersAndPaginat.dataSize,
+    setDataSize = _useFiltersAndPaginat.setDataSize,
+    setHiddenColumns = _useFiltersAndPaginat.setHiddenColumns,
+    setIsFilterButtonVisible = _useFiltersAndPaginat.setIsFilterButtonVisible,
+    setIsFilterPaneOpen = _useFiltersAndPaginat.setIsFilterPaneOpen,
+    setPageProperties = _useFiltersAndPaginat.setPageProperties,
+    setFilters = _useFiltersAndPaginat.setFilters,
+    handleTabChange = _useFiltersAndPaginat.handleTabChange,
+    setSortProperties = _useFiltersAndPaginat.setSortProperties;
+  var isTabsVisible = isFilterButtonVisible || tab !== "all";
+  var handleFiltersChange = function handleFiltersChange(filters) {
+    startTransition(function () {
+      setFilters(filters);
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    title: t("neetoPayments.title.payouts"),
+    searchProps: {
+      placeholder: t("neetoPayments.common.search"),
+      className: "w-80"
+    }
+  }), isTabsVisible && /*#__PURE__*/React.createElement(Tab, null, TABS$1.map(function (item) {
+    return /*#__PURE__*/React.createElement(Tab.Item, {
+      active: tab === item,
+      key: item,
+      onClick: function onClick() {
+        return handleTabChange(item);
+      }
+    }, t("neetoPayments.common.".concat(item)));
+  })), /*#__PURE__*/React.createElement(SubHeader, {
+    className: "mt-4",
+    leftActionBlock: isTabsVisible && dataSize !== 0 && /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-gray-800 mr-2 font-semibold",
+      component: "h4"
+    }, tab === TAB$1.all ? t("neetoPayments.countOf.payout", {
+      count: dataSize
+    }) : t("neetoPayments.countOf.payoutWithStatus", {
+      count: dataSize,
+      status: tab
+    })),
+    rightActionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, {
+      columns: FILTER_COLUMNS,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleFiltersChange
+    }), isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
+      columnsButtonProps: {
+        columnData: selectableColumnData,
+        fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
+        onChange: function onChange(_, hiddenColumns) {
+          return setHiddenColumns(hiddenColumns);
+        },
+        localStorageKey: "stripePayoutsDashboard"
+      },
+      downloadButtonProps: {
+        onClick: function onClick() {
+          return setShowExportModal(true);
+        }
+      },
+      filterProps: {
+        columns: FILTER_COLUMNS,
+        isOpen: isFilterPaneOpen,
+        keyword: searchKeywordProps,
+        setIsOpen: setIsFilterPaneOpen,
+        onChange: handleFiltersChange
+      }
+    }))
+  }), /*#__PURE__*/React.createElement(List$1, {
+    columnData: columnData,
+    filters: filters,
+    handleTabChange: handleTabChange,
+    pageProperties: pageProperties,
+    setDataSize: setDataSize,
+    setIsFilterButtonVisible: setIsFilterButtonVisible,
+    setPageProperties: setPageProperties,
+    setSortProperties: setSortProperties,
+    sortProperties: sortProperties,
+    tab: tab,
+    isPlatformEnabled: isPlatformEnabled
+  }), /*#__PURE__*/React.createElement(ExportModal, {
+    filters: filters,
+    setShowExportModal: setShowExportModal,
+    showExportModal: showExportModal,
+    sortProperties: sortProperties,
+    tab: tab
+  }));
+};
+var index$2 = withTitle(withReactQuery(PayoutsDashboard), t$1("neetoPayments.title.payouts"));
+
+var useFetchData = function useFetchData(_ref) {
+  var _data$kind, _data$kind2;
+  var id = _ref.id,
+    isPlatformEnabled = _ref.isPlatformEnabled;
+  var data = {};
+  var kind = isPlatformEnabled ? "platform" : "connected";
+  data.connected = useShowStripePayout(id, {
+    enabled: !isPlatformEnabled
+  });
+  data.platform = useShowStripePlatformPayout(id, {
+    enabled: isPlatformEnabled
+  });
+  return {
+    data: (_data$kind = data[kind]) === null || _data$kind === void 0 || (_data$kind = _data$kind.data) === null || _data$kind === void 0 ? void 0 : _data$kind.payout,
+    isDataLoading: (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 ? void 0 : _data$kind2.isLoading
+  };
+};
+
+var renderPayoutIdentifier = function renderPayoutIdentifier() {
+  var identifier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var isLive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return /*#__PURE__*/React.createElement(CopyButtonWrapper, {
+    content: identifier
+  }, /*#__PURE__*/React.createElement(IdentifierButton$1, {
+    href: buildStripePayoutLink(identifier, isLive),
+    label: identifier
+  }));
+};
+
+var _excluded$1 = ["isPlatformEnabled", "indexRoute"];
+var PayoutsPage = function PayoutsPage(_ref) {
+  var isPlatformEnabled = _ref.isPlatformEnabled,
+    indexRoute = _ref.indexRoute,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useParams = useParams(),
+    id = _useParams.id;
+  var _useFetchData = useFetchData({
+      id: id,
+      isPlatformEnabled: isPlatformEnabled
+    }),
+    isLoading = _useFetchData.isLoading,
+    _useFetchData$data = _useFetchData.data,
+    _useFetchData$data2 = _useFetchData$data === void 0 ? {} : _useFetchData$data,
+    amount = _useFetchData$data2.amount,
+    identifier = _useFetchData$data2.identifier,
+    status = _useFetchData$data2.status,
+    destinationIdentifier = _useFetchData$data2.destinationIdentifier,
+    arrivalDate = _useFetchData$data2.arrivalDate,
+    createdAt = _useFetchData$data2.createdAt,
+    isAutomatic = _useFetchData$data2.isAutomatic,
+    failureMessage = _useFetchData$data2.failureMessage,
+    live = _useFetchData$data2.live;
+  var headerBreadCrumbs = [{
+    text: t("neetoPayments.title.payouts"),
+    link: indexRoute
+  }, {
+    text: identifier
+  }];
+  if (isLoading) return /*#__PURE__*/React.createElement(PageLoader, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    breadcrumbs: headerBreadCrumbs,
+    title: t("neetoPayments.payoutsPage.title")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-6 p-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.payoutId")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, renderPayoutIdentifier(identifier, live))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.status")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, renderStatus("payout", status, {}))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.amount")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, amount)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.arrivalDate")), renderDate(arrivalDate)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.createdAt")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, renderDate(createdAt))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.destinationId")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, destinationIdentifier)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.automatic")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, isAutomatic ? t("neetoPayments.common.yes") : t("neetoPayments.common.no"))), isPresent$1(failureMessage) && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoPayments.payoutsPage.failureMessage")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-black font-medium",
+    style: "body2"
+  }, failureMessage)))), isAutomatic && /*#__PURE__*/React.createElement(Dashboard$1, _extends({}, isPlatformEnabled, {
+    kind: "connected"
+  }, otherProps, {
+    headerProps: {
+      size: "nano"
+    },
+    payoutId: id
+  })));
+};
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+      args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+      _next(undefined);
+    });
+  };
+}
+
+var regeneratorRuntime$1 = {exports: {}};
+
+var _typeof = {exports: {}};
+
+_typeof.exports;
+
+(function (module) {
+	function _typeof(obj) {
+	  "@babel/helpers - typeof";
+
+	  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+	    return typeof obj;
+	  } : function (obj) {
+	    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+	}
+	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+} (_typeof));
 
 var _typeofExports = _typeof.exports;
 
@@ -5435,7 +6151,7 @@ var isRefundKind = equals("squareRefund");
 var isPaymentKind = equals("squarePayment");
 var buildFilterColumns = function buildFilterColumns() {
   var payableEntityColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return concat(FILTER_COLUMNS$1, map(prop("filterProps"), filterBy({
+  return concat(FILTER_COLUMNS$2, map(prop("filterProps"), filterBy({
     isFilterable: true
   }, payableEntityColumns)));
 };
@@ -5490,9 +6206,9 @@ var useFiltersAndPagination = function useFiltersAndPagination(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     dataSize = _useState12[0],
     setDataSize = _useState12[1];
-  var _useQueryParams = useQueryParams(),
-    _useQueryParams$searc = _useQueryParams.search_term,
-    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _getQueryParams = getQueryParams(),
+    _getQueryParams$searc = _getQueryParams.searchTerm,
+    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
   var handleTabChange = function handleTabChange(tab) {
     var _pageProperties$tab, _pageProperties$tab2;
     urlSearchParams.set("tab", tab);
@@ -5911,7 +6627,7 @@ var useStripePromise = function useStripePromise(stripeAccountIdentifier) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".ant-table-cell-row-hover .identifier-copy-button{visibility:visible!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9fY29weS1idXR0b24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0Usa0RBQ0UsNEJDQUoiLCJzb3VyY2VzQ29udGVudCI6WyIuYW50LXRhYmxlLWNlbGwtcm93LWhvdmVyIHtcbiAgLmlkZW50aWZpZXItY29weS1idXR0b24ge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGUgIWltcG9ydGFudDtcbiAgfVxufVxuIiwiLmFudC10YWJsZS1jZWxsLXJvdy1ob3ZlciAuaWRlbnRpZmllci1jb3B5LWJ1dHRvbiB7XG4gIHZpc2liaWxpdHk6IHZpc2libGUgIWltcG9ydGFudDtcbn0iXX0= */";
+var css = ".ant-table-cell-row-hover .identifier-copy-button{visibility:visible!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19jb3B5LWJ1dHRvbi5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL21haW4uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSxrREFDRSw0QkNBSiIsInNvdXJjZXNDb250ZW50IjpbIi5hbnQtdGFibGUtY2VsbC1yb3ctaG92ZXIge1xuICAuaWRlbnRpZmllci1jb3B5LWJ1dHRvbiB7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZSAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIuYW50LXRhYmxlLWNlbGwtcm93LWhvdmVyIC5pZGVudGlmaWVyLWNvcHktYnV0dG9uIHtcbiAgdmlzaWJpbGl0eTogdmlzaWJsZSAhaW1wb3J0YW50O1xufSJdfQ== */";
 n(css,{});
 
 var l=(e,r,t)=>new Promise((n,i)=>{var d=o=>{try{c(t.next(o));}catch(a){i(a);}},m=o=>{try{c(t.throw(o));}catch(a){i(a);}},c=o=>o.done?n(o.value):Promise.resolve(o.value).then(d,m);c((t=t.apply(e,r)).next());});function f(e){return document.querySelector(`script[src="${e}"]`)}function S(e){let r=document.head||document.body;if(!r)throw new Error("Square.js requires a <body> or <head> element.");let t=document.createElement("script");return t.src=e,r.appendChild(t),t}var s=null;function p(e){return s!==null||(s=new Promise((r,t)=>{if(typeof window=="undefined"){r(null);return}if(window.Square){r(window.Square);return}try{let n=f(e);n||(n=S(e)),n.addEventListener("load",()=>{window.Square?r(window.Square):t(new Error("Square.js failed to load properly."));}),n.addEventListener("error",()=>{t(new Error("Error occurred while loading Square.js"));});}catch(n){t(n);}})),s}var w="v1",u=class extends Error{constructor(r="The Payment 'applicationId' option is not in the correct format."){super(r);this.name="InvalidApplicationIdError",Object.setPrototypeOf(this,u.prototype);}};function q(e){let r="";if(e.startsWith("sq0idp-")&&(r="https://web.squarecdn.com/"),e.startsWith("sandbox-sq0idb-")&&(r="https://sandbox.web.squarecdn.com/"),r.length===0)throw new u;return r+=`${w}/square.js`,r}function E(e,r,t){return l(this,null,function*(){let n=(t==null?void 0:t.scriptSrc)!==void 0?t.scriptSrc:q(e),i=yield p(n);return i===null?null:i.payments(e,r)})}
@@ -6054,5 +6770,5 @@ var stripe_esm = /*#__PURE__*/Object.freeze({
   loadStripe: loadStripe
 });
 
-export { index$3 as AccountsDashboard, CURRENCY_OPTIONS, index$2 as Dashboard, PaymentKindRestrictionAlert, SquareCard, index$1 as SquareDashboard, buildStripeTransactionLink, useSquareCard, useStripePromise };
+export { index$3 as AccountsDashboard, CURRENCY_OPTIONS, Dashboard$1 as Dashboard, PaymentKindRestrictionAlert, index$2 as PayoutsDashboard, PayoutsPage, SquareCard, index$1 as SquareDashboard, buildStripeTransactionLink, useSquareCard, useStripePromise };
 //# sourceMappingURL=index.js.map