diff --git a/src/common/cashflowOptions.js b/src/common/cashflowOptions.js
index 480b71162..dd14899ab 100644
--- a/src/common/cashflowOptions.js
+++ b/src/common/cashflowOptions.js
@@ -30,3 +30,12 @@ export const addMoneyOut = [
value: 'transfer_to_account',
},
];
+
+export const TRANSACRIONS_TYPE = [
+ 'OwnerContribution',
+ 'OtherIncome',
+ 'TransferFromAccount',
+ 'OnwersDrawing',
+ 'OtherExpense',
+ 'TransferToAccount',
+];
diff --git a/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js b/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js
new file mode 100644
index 000000000..da757392a
--- /dev/null
+++ b/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteCashflowTransaction } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Account delete transaction alert.
+ */
+function AccountDeleteTransactionAlert({
+ name,
+
+ // #withAlertStoreConnect
+ isOpen,
+ payload: { referenceId },
+
+ // #withAlertActions
+ closeAlert,
+}) {
+ const { mutateAsync: deleteTransactionMutate, isLoading } =
+ useDeleteCashflowTransaction();
+
+ // handle cancel delete alert
+ const handleCancelDeleteAlert = () => {
+ closeAlert(name);
+ };
+
+ // handleConfirm delete transaction.
+ const handleConfirmTransactioneDelete = () => {
+ deleteTransactionMutate(referenceId)
+ .then(() => {
+ AppToaster.show({
+ message: intl.get('cash_flow_transaction.delete.alert_message'),
+ intent: Intent.SUCCESS,
+ });
+ })
+ .catch(
+ ({
+ response: {
+ data: { errors },
+ },
+ }) => {},
+ )
+ .finally(() => {
+ closeAlert(name);
+ });
+ };
+
+ return (
+ }
+ confirmButtonText={}
+ icon="trash"
+ intent={Intent.DANGER}
+ isOpen={isOpen}
+ onCancel={handleCancelDeleteAlert}
+ onConfirm={handleConfirmTransactioneDelete}
+ loading={isLoading}
+ >
+
+
+
+
+ );
+}
+
+export default compose(
+ withAlertStoreConnect(),
+ withAlertActions,
+)(AccountDeleteTransactionAlert);
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js
new file mode 100644
index 000000000..5b3a88ab3
--- /dev/null
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import AccountDeleteTransactionAlert from '../../Alerts/CashFlow/AccountDeleteTransactionAlert';
+
+/**
+ * Account transaction alert.
+ */
+export default function AccountTransactionsAlerts() {
+ return (
+
+ );
+}
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
index 5b0f8e9aa..8ff95651b 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
@@ -8,9 +8,10 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withSettings from '../../Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
import { useMemorizedColumnsWidths } from '../../../hooks';
-import { useAccountTransactionsColumns } from './components';
+import { useAccountTransactionsColumns, ActionsMenu } from './components';
import { useAccountTransactionsContext } from './AccountTransactionsProvider';
import { compose } from 'utils';
@@ -20,6 +21,9 @@ import { compose } from 'utils';
function AccountTransactionsDataTable({
// #withSettings
cashflowTansactionsTableSize,
+
+ // #withAlertsActions
+ openAlert,
}) {
// Retrieve table columns.
const columns = useAccountTransactionsColumns();
@@ -35,6 +39,11 @@ function AccountTransactionsDataTable({
const [initialColumnsWidths, , handleColumnResizing] =
useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
+ // handle delete transaction
+ const handleDeleteTransaction = ({ reference_id }) => {
+ openAlert('account-transaction-delete', { referenceId: reference_id });
+ };
+
return (
);
}
@@ -68,4 +83,5 @@ export default compose(
withSettings(({ cashflowTransactionsSettings }) => ({
cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
})),
+ withAlertsActions,
)(AccountTransactionsDataTable);
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js
index 40869934d..a627bc2f5 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js
@@ -8,7 +8,7 @@ import { AccountTransactionsProvider } from './AccountTransactionsProvider';
import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
import AccountTransactionsDataTable from './AccountTransactionsDataTable';
import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
-
+import AccountTransactionsAlerts from './AccountTransactionsAlerts';
import { AccountTransactionsProgressBar } from './components';
/**
@@ -26,6 +26,7 @@ function AccountTransactionsList() {
+
);
}
diff --git a/src/containers/CashFlow/AccountTransactions/components.js b/src/containers/CashFlow/AccountTransactions/components.js
index a08aa905c..ad4dda8c6 100644
--- a/src/containers/CashFlow/AccountTransactions/components.js
+++ b/src/containers/CashFlow/AccountTransactions/components.js
@@ -1,9 +1,28 @@
import React from 'react';
import intl from 'react-intl-universal';
-import { MaterialProgressBar } from 'components';
-import { FormatDateCell } from 'components';
-import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import { MaterialProgressBar } from 'components';
+import { FormatDateCell, If, Icon } from 'components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
+import { safeCallback } from 'utils';
+
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+ return (
+
+
+
+ );
+}
/**
* Retrieve account transctions table columns.
*/
@@ -47,7 +66,7 @@ export function useAccountTransactionsColumns() {
width: 110,
className: 'deposit',
textOverview: true,
- align: 'right'
+ align: 'right',
},
{
id: 'withdrawal',
@@ -65,7 +84,7 @@ export function useAccountTransactionsColumns() {
className: 'running_balance',
width: 150,
textOverview: true,
- align: 'right'
+ align: 'right',
},
],
[],