feat: Filter uncategorized transactions by date

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.tsx

@@ -67,7 +67,7 @@ export function AccountTransactionsDateFilterForm({
             <FFormGroup
               name={'fromDate'}
               label={'From Date'}
-              style={{ marginBottom: 0 }}
+              style={{ marginBottom: 0, flex: '1' }}
             >
               <FDateInput
                 name={'fromDate'}
@@ -85,7 +85,7 @@ export function AccountTransactionsDateFilterForm({
             <FormGroup
               label={'To Date'}
               name={'toDate'}
-              style={{ marginBottom: 0 }}
+              style={{ marginBottom: 0, flex: '1' }}
             >
               <FDateInput
                 name={'toDate'}
@@ -156,11 +156,16 @@ function AccountTransactionDatePeriodField() {
   };
 
   return (
-    <FFormGroup name={'period'} label={'Date'} style={{ marginBottom: 0 }}>
+    <FFormGroup
+      name={'period'}
+      label={'Date'}
+      style={{ marginBottom: 0, flex: '0 28%' }}
+    >
       <FSelect
         name={'period'}
         items={periodOptions}
         onItemSelect={handleItemChange}
+        popoverProps={{ captureDismiss: true }}
       />
     </FFormGroup>
   );

packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorizedBoot.tsx

@@ -37,8 +37,8 @@ function AccountUncategorizedTransactionsBootRoot({
     hasNextPage: hasUncategorizedTransactionsNextPage,
   } = useAccountUncategorizedTransactionsInfinity(accountId, {
     page_size: 50,
-    min_date: uncategorizedTransactionsFilter?.fromDate,
-    max_date: uncategorizedTransactionsFilter?.toDate,
+    min_date: uncategorizedTransactionsFilter?.fromDate || null,
+    max_date: uncategorizedTransactionsFilter?.toDate || null,
   });
   // Memorized the cashflow account transactions.
   const uncategorizedTransactions = React.useMemo(

packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTableBoot.tsx

@@ -1,9 +1,11 @@
 // @ts-nocheck
 import React from 'react';
 import { flatten, map } from 'lodash';
+import * as R from 'ramda';
 import { IntersectionObserver } from '@/components';
 import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 import { useExcludedBankTransactionsInfinity } from '@/hooks/query/bank-rules';
+import { withBanking } from '../../withBanking';
 
 interface ExcludedBankTransactionsContextValue {
   isExcludedTransactionsLoading: boolean;
@@ -27,7 +29,11 @@ interface ExcludedBankTransactionsTableBootProps {
 /**
  * Account uncategorized transctions provider.
  */
-function ExcludedBankTransactionsTableBoot({
+function ExcludedBankTransactionsTableBootRoot({
+  // #withBanking
+  uncategorizedTransactionsFilter,
+
+  // #ownProps
   children,
 }: ExcludedBankTransactionsTableBootProps) {
   const { accountId } = useAccountTransactionsContext();
@@ -44,6 +50,8 @@ function ExcludedBankTransactionsTableBoot({
   } = useExcludedBankTransactionsInfinity({
     page_size: 50,
     account_id: accountId,
+    min_date: uncategorizedTransactionsFilter?.fromDate || null,
+    max_date: uncategorizedTransactionsFilter.toDate || null,
   });
   // Memorized the cashflow account transactions.
   const excludedBankTransactions = React.useMemo(
@@ -84,6 +92,12 @@ function ExcludedBankTransactionsTableBoot({
   );
 }
 
+const ExcludedBankTransactionsTableBoot = R.compose(
+  withBanking(({ uncategorizedTransactionsFilter }) => ({
+    uncategorizedTransactionsFilter,
+  })),
+)(ExcludedBankTransactionsTableBootRoot);
+
 const useExcludedTransactionsBoot = () =>
   React.useContext(ExcludedTransactionsContext);
 

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTableBoot.tsx

@@ -1,9 +1,11 @@
 // @ts-nocheck
 import React from 'react';
 import { flatten, map } from 'lodash';
-import { IntersectionObserver } from '@/components';
+import * as R from 'ramda';
+import { IntersectionObserver, NumericInputCell } from '@/components';
 import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 import { useRecognizedBankTransactionsInfinity } from '@/hooks/query/bank-rules';
+import { withBanking } from '../../withBanking';
 
 interface RecognizedTransactionsContextValue {
   isRecongizedTransactionsLoading: boolean;
@@ -27,7 +29,10 @@ interface RecognizedTransactionsTableBootProps {
 /**
  * Account uncategorized transctions provider.
  */
-function RecognizedTransactionsTableBoot({
+function RecognizedTransactionsTableBootRoot({
+  // #withBanking
+  uncategorizedTransactionsFilter,
+
   children,
 }: RecognizedTransactionsTableBootProps) {
   const { accountId } = useAccountTransactionsContext();
@@ -44,6 +49,8 @@ function RecognizedTransactionsTableBoot({
   } = useRecognizedBankTransactionsInfinity({
     page_size: 50,
     account_id: accountId,
+    min_date: uncategorizedTransactionsFilter.fromDate || null,
+    max_date: uncategorizedTransactionsFilter?.toDate || null,
   });
   // Memorized the cashflow account transactions.
   const recognizedTransactions = React.useMemo(
@@ -84,6 +91,12 @@ function RecognizedTransactionsTableBoot({
   );
 }
 
+const RecognizedTransactionsTableBoot = R.compose(
+  withBanking(({ uncategorizedTransactionsFilter }) => ({
+    uncategorizedTransactionsFilter,
+  })),
+)(RecognizedTransactionsTableBootRoot);
+
 const useRecognizedTransactionsBoot = () =>
   React.useContext(RecognizedTransactionsContext);
 

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountUncategorizedDateFilter.tsx

@@ -1,8 +1,9 @@
 // @ts-nocheck
+import { useState } from 'react';
 import * as R from 'ramda';
 import moment from 'moment';
 import { Box, Icon } from '@/components';
-import { Button, Classes, Popover, Position } from '@blueprintjs/core';
+import { Classes, Popover, Position } from '@blueprintjs/core';
 import { withBankingActions } from '../../withBankingActions';
 import { withBanking } from '../../withBanking';
 import { AccountTransactionsDateFilterForm } from '../AccountTransactionsDateFilter';
@@ -29,17 +30,31 @@ function AccountUncategorizedDateFilterRoot({
       ? `Date: ${fromDateFormatted} → ${toDateFormatted}`
       : 'Date Filter';
 
+  // Popover open state.
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  // Handle the filter form submitting.
+  const handleSubmit = () => {
+    setIsOpen(false);
+  };
+
   return (
     <Popover
       content={
         <Box style={{ padding: 18 }}>
-          <UncategorizedTransactionsDateFilter />
+          <UncategorizedTransactionsDateFilter onSubmit={handleSubmit} />
         </Box>
       }
       position={Position.RIGHT}
       popoverClassName={Classes.POPOVER_CONTENT}
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
     >
-      <TagButton outline icon={<Icon icon={'date-range'} />}>
+      <TagButton
+        outline
+        icon={<Icon icon={'date-range'} />}
+        onClick={() => setIsOpen(!isOpen)}
+      >
         {buttonText}
       </TagButton>
     </Popover>
@@ -64,6 +79,9 @@ export const UncategorizedTransactionsDateFilter = R.compose(
 
     // #withBanking
     uncategorizedTransactionsFilter,
+
+    // #ownProps
+    onSubmit,
   }) => {
     const initialValues = {
       ...uncategorizedTransactionsFilter,
@@ -74,6 +92,7 @@ export const UncategorizedTransactionsDateFilter = R.compose(
         fromDate: values.fromDate,
         toDate: values.toDate,
       });
+      onSubmit && onSubmit(values);
     };
 
     return (