feat: bank rules table

packages/webapp/src/containers/AlertsContainer/registered.tsx

@@ -26,6 +26,7 @@ import BranchesAlerts from '@/containers/Preferences/Branches/BranchesAlerts';
 import ProjectAlerts from '@/containers/Projects/containers/ProjectAlerts';
 import TaxRatesAlerts from '@/containers/TaxRates/alerts';
 import { CashflowAlerts } from '../CashFlow/CashflowAlerts';
+import { BankRulesAlerts } from '../Banking/Rules/RulesList/BankRulesAlerts';
 
 export default [
   ...AccountsAlerts,
@@ -55,4 +56,5 @@ export default [
   ...ProjectAlerts,
   ...TaxRatesAlerts,
   ...CashflowAlerts,
+  ...BankRulesAlerts
 ];

packages/webapp/src/containers/Banking/Rules/RulesList/BankRulesAlerts.ts

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+
+const DeleteBankRuleAlert = React.lazy(
+  () => import('./alerts/DeleteBankRuleAlert'),
+);
+
+/**
+ * Cashflow alerts.
+ */
+export const BankRulesAlerts = [
+  {
+    name: 'bank-rule-delete',
+    component: DeleteBankRuleAlert,
+  },
+];

packages/webapp/src/containers/Banking/Rules/RulesList/RulesListBoot.tsx

@@ -4,6 +4,7 @@ import { useBankRules } from '@/hooks/query/bank-rules';
 
 interface RulesListBootValues {
   bankRules: any;
+  isBankRulesLoading: boolean;
 }
 
 const RulesListBootContext = createContext<RulesListBootValues>(
@@ -18,10 +19,11 @@ function RulesListBoot({ ...props }: RulesListBootProps) {
   const { data: bankRules, isLoading: isBankRulesLoading } = useBankRules();
 
   const provider = { bankRules, isBankRulesLoading } as RulesListBootValues;
+  const isLoading = isBankRulesLoading;
 
   return (
-    <DialogContent isLoading={false}>
+    <DialogContent isLoading={isLoading}>
-      <RulesListBootContext.Provider value={provider} {...props} />
+      <RulesListBootContext.Provider {...props} value={provider} />
     </DialogContent>
   );
 }

packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx

@@ -15,6 +15,7 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import { useBankRulesTableColumns } from './hooks';
 import { BankRulesTableActionsMenu } from './_components';
 import { BankRulesLandingEmptyState } from './BankRulesLandingEmptyState';
+import { useRulesListBoot } from './RulesListBoot';
 
 /**
  * Invoices datatable.
@@ -32,8 +33,12 @@ function RulesTable({
   // Invoices table columns.
   const columns = useBankRulesTableColumns();
 
+  const { bankRules } = useRulesListBoot();
+
   // Handle edit bank rule.
-  const handleDeleteBankRule = ({ id }) => {};
+  const handleDeleteBankRule = ({ id }) => {
+    openAlert('bank-rule-delete', { id });
+  };
 
   // Handle delete bank rule.
   const handleEditBankRule = () => {};
@@ -49,7 +54,7 @@ function RulesTable({
     <DashboardContentTable>
       <DataTable
         columns={columns}
-        data={[]}
+        data={bankRules}
         loading={false}
         headerLoading={false}
         progressBarLoading={false}

packages/webapp/src/containers/Banking/Rules/RulesList/_components.tsx

@@ -16,14 +16,12 @@ export function BankRulesTableActionsMenu({
   return (
     <Menu>
       <Can I={BankRuleAction.Edit} a={AbilitySubject.BankRule}>
-        <MenuDivider />
         <MenuItem
           icon={<Icon icon="pen-18" />}
           text={'Edit Rule'}
           onClick={safeCallback(onEdit, original)}
         />
       </Can>
-      <MenuDivider />
       <Can I={BankRuleAction.Delete} a={AbilitySubject.BankRule}>
         <MenuDivider />
         <MenuItem

packages/webapp/src/containers/Banking/Rules/RulesList/alerts/DeleteBankRuleAlert.tsx

@@ -0,0 +1,80 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { AppToaster } from '@/components';
+
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useDeleteBankRule } from '@/hooks/query/bank-rules';
+import { compose } from '@/utils';
+
+/**
+ * Project delete alert.
+ */
+function BankRuleDeleteAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { id },
+
+  // #withAlertActions
+  closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const { mutateAsync: deleteBankRule, isLoading } = useDeleteBankRule();
+
+  // handle cancel delete project alert.
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete project
+  const handleConfirmBtnClick = () => {
+    deleteBankRule(id)
+      .then(() => {
+        AppToaster.show({
+          message: 'The bank rule has deleted successfully.',
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          AppToaster.show({
+            message: 'Something went wrong.',
+            intent: Intent.DANGER,
+          });
+        },
+      );
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Delete'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmBtnClick}
+      loading={isLoading}
+    >
+      <p>Are you sure want to delete the bank rule?</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+  withDrawerActions,
+)(BankRuleDeleteAlert);

packages/webapp/src/containers/Banking/Rules/RulesList/hooks.ts

@@ -1,3 +0,0 @@
-export const useBankRulesTableColumns = () => {
-  return [];
-};

packages/webapp/src/containers/Banking/Rules/RulesList/hooks.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import { useMemo } from 'react';
+import { Intent, Tag } from '@blueprintjs/core';
+
+export const useBankRulesTableColumns = () => {
+  return useMemo(
+    () => [
+      {
+        Header: 'Apply to',
+        accessor: (rule) =>
+          rule.apply_if_transaction_type === 'deposit' ? (
+            <Tag round intent={Intent.SUCCESS}>Deposits</Tag>
+          ) : (
+            <Tag round intent={Intent.DANGER}>Withdrawals</Tag>
+          ),
+      },
+      {
+        Header: 'Rule Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Categorize As',
+        accessor: () => 'Expense',
+      },
+      {
+        Header: 'Apply To',
+        accessor: () => <Tag intent={Intent.NONE} minimal>All Accounts</Tag>,
+      },
+      {
+        Header: 'Conditions',
+        accessor: () => '',
+      },
+    ],
+    [],
+  );
+};

packages/webapp/src/hooks/query/bank-rules.ts

@@ -33,12 +33,15 @@ export function useDeleteBankRule(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation((id: number) => apiRequest.delete(`/bank-rules/${id}`), {
+  return useMutation(
-    onSuccess: (res, id) => {
+    (id: number) => apiRequest.delete(`/banking/rules/${id}`),
-      // Invalidate queries.
+    {
+      onSuccess: (res, id) => {
+        // Invalidate queries.
+      },
+      ...props,
     },
-    ...props,
+  );
-  });
 }
 
 /**