fix: wip filter uncategorized transactions by date

packages/server/src/api/controllers/Cashflow/NewCashflowTransaction.ts

@@ -84,6 +84,8 @@ export default class NewCashflowTransactionController extends BaseController {
       param('id').exists().isNumeric().toInt(),
       query('page').optional().isNumeric().toInt(),
       query('page_size').optional().isNumeric().toInt(),
+      query('min_date').optional().isISO8601().toDate(),
+      query('max_date').optional().isISO8601().toDate(),
     ];
   }
 

packages/webapp/src/components/TagsControl/TagsControl.module.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: row;
   gap: 10px;
-  margin-bottom: 14px;
 }
 
 .tag{

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDateFilter.module.scss

@@ -0,0 +1,5 @@
+
+
+.dateFieldGroup{
+  margin-bottom: 0;
+}

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

@@ -1,10 +1,19 @@
 // @ts-nocheck
 import { Button, FormGroup, Intent, Position } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { Form, Formik, FormikConfig } from 'formik';
+import moment from 'moment';
-import { FDateInput, FFormGroup, Group, Icon, Stack } from '@/components';
+import { Form, Formik, FormikConfig, useFormikContext } from 'formik';
+import {
+  FDateInput,
+  FFormGroup,
+  FSelect,
+  Group,
+  Icon,
+  Stack,
+} from '@/components';
 
 const defaultValues = {
+  period: 'all_dates',
   fromDate: '',
   toDate: '',
 };
@@ -21,6 +30,7 @@ const validationSchema = Yup.object().shape({
 });
 
 interface AccountTransactionsDateFilterFormValues {
+  period: string;
   fromDate: string;
   toDate: string;
 }
@@ -34,8 +44,8 @@ export function AccountTransactionsDateFilterForm({
   initialValues = {},
   onSubmit,
 }: UncategorizedTransactionsDateFilterProps) {
-  const handleSubmit = () => {
+  const handleSubmit = (values, bag) => {
-    return onSubmit && onSubmit(...arguments);
+    return onSubmit && onSubmit(values, bag);
   };
 
   const formInitialValues = {
@@ -50,9 +60,15 @@ export function AccountTransactionsDateFilterForm({
       validationSchema={validationSchema}
     >
       <Form>
-        <Stack>
+        <Stack spacing={15}>
-          <Group>
+          <Group spacing={10}>
-            <FFormGroup name={'fromDate'} label={'From Date'}>
+            <AccountTransactionDatePeriodField />
+
+            <FFormGroup
+              name={'fromDate'}
+              label={'From Date'}
+              style={{ marginBottom: 0 }}
+            >
               <FDateInput
                 name={'fromDate'}
                 popoverProps={{ position: Position.BOTTOM, minimal: true }}
@@ -60,13 +76,17 @@ export function AccountTransactionsDateFilterForm({
                 parseDate={(str) => new Date(str)}
                 inputProps={{
                   fill: true,
+                  placeholder: 'MM/DD/YYY',
                   leftElement: <Icon icon={'date-range'} />,
                 }}
-                style={{ marginBottom: 0 }}
               />
             </FFormGroup>
 
-            <FormGroup label={'To Date'} name={'toDate'}>
+            <FormGroup
+              label={'To Date'}
+              name={'toDate'}
+              style={{ marginBottom: 0 }}
+            >
               <FDateInput
                 name={'toDate'}
                 popoverProps={{ position: Position.BOTTOM, minimal: true }}
@@ -74,21 +94,137 @@ export function AccountTransactionsDateFilterForm({
                 parseDate={(str) => new Date(str)}
                 inputProps={{
                   fill: true,
+                  placeholder: 'MM/DD/YYY',
                   leftElement: <Icon icon={'date-range'} />,
                 }}
-                style={{ marginBottom: 0 }}
               />
             </FormGroup>
           </Group>
 
-          <Group spacing={10}>
+          <AccountTransactionsDateFilterFooter />
-            <Button small intent={Intent.PRIMARY}>
-              Filter
-            </Button>
-            <Button small>Cancel</Button>
-          </Group>
         </Stack>
       </Form>
     </Formik>
   );
 }
+
+function AccountTransactionsDateFilterFooter() {
+  const { submitForm, setValues } = useFormikContext();
+
+  const handleFilterBtnClick = () => {
+    submitForm();
+  };
+  const handleClearBtnClick = () => {
+    setValues({
+      ...defaultValues,
+    });
+    submitForm();
+  };
+
+  return (
+    <Group spacing={10}>
+      <Button
+        small
+        intent={Intent.PRIMARY}
+        onClick={handleFilterBtnClick}
+        style={{ minWidth: 75 }}
+      >
+        Filter
+      </Button>
+
+      <Button
+        intent={Intent.DANGER}
+        small
+        onClick={handleClearBtnClick}
+        minimal
+      >
+        Clear
+      </Button>
+    </Group>
+  );
+}
+
+function AccountTransactionDatePeriodField() {
+  const { setFieldValue } = useFormikContext();
+
+  const handleItemChange = (item) => {
+    const { fromDate, toDate } = getDateRangePeriod(item.value);
+
+    setFieldValue('fromDate', fromDate);
+    setFieldValue('toDate', toDate);
+    setFieldValue('period', item.value);
+  };
+
+  return (
+    <FFormGroup name={'period'} label={'Date'} style={{ marginBottom: 0 }}>
+      <FSelect
+        name={'period'}
+        items={periodOptions}
+        onItemSelect={handleItemChange}
+      />
+    </FFormGroup>
+  );
+}
+
+const periodOptions = [
+  { text: 'All Dates', value: 'all_dates' },
+  { text: 'Custom', value: 'custom' },
+  { text: 'Today', value: 'today' },
+  { text: 'Yesterday', value: 'yesterday' },
+  { text: 'This week', value: 'this_week' },
+  { text: 'This year', value: 'this_year' },
+  { text: 'This month', value: 'this_month' },
+  { text: 'last week', value: 'last_week' },
+  { text: 'Last year', value: 'last_year' },
+  { text: 'Last month', value: 'last_month' },
+  { text: 'Last month', value: 'last_month' },
+];
+
+const getDateRangePeriod = (period: string) => {
+  switch (period) {
+    case 'today':
+      return {
+        fromDate: moment().startOf('day').toDate(),
+        toDate: moment().endOf('day').toDate(),
+      };
+    case 'yesterday':
+      return {
+        fromDate: moment().subtract(1, 'days').startOf('day').toDate(),
+        toDate: moment().subtract(1, 'days').endOf('day').toDate(),
+      };
+    case 'this_week':
+      return {
+        fromDate: moment().startOf('week').toDate(),
+        toDate: moment().endOf('week').toDate(),
+      };
+    case 'this_month':
+      return {
+        fromDate: moment().startOf('month').toDate(),
+        toDate: moment().endOf('month').toDate(),
+      };
+    case 'this_year':
+      return {
+        fromDate: moment().startOf('year').toDate(),
+        toDate: moment().endOf('year').toDate(),
+      };
+    case 'last_week':
+      return {
+        fromDate: moment().subtract(1, 'weeks').startOf('week').toDate(),
+        toDate: moment().subtract(1, 'weeks').endOf('week').toDate(),
+      };
+    case 'last_month':
+      return {
+        fromDate: moment().subtract(1, 'months').startOf('month').toDate(),
+        toDate: moment().subtract(1, 'months').endOf('month').toDate(),
+      };
+    case 'last_year':
+      return {
+        fromDate: moment().subtract(1, 'years').startOf('year').toDate(),
+        toDate: moment().subtract(1, 'years').endOf('year').toDate(),
+      };
+    case 'all_dates':
+    case 'custom':
+    default:
+      return { fromDate: null, toDate: null };
+  }
+};

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

@@ -2,12 +2,11 @@
 import { useMemo } from 'react';
 import * as R from 'ramda';
 import { useAppQueryString } from '@/hooks';
-import { Group, Icon } from '@/components';
+import { Group, Stack, } from '@/components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { TagsControl } from '@/components/TagsControl';
-import { Button, Classes, Position } from '@blueprintjs/core';
+import { AccountUncategorizedDateFilter } from './UncategorizedTransactions/AccountUncategorizedDateFilter';
-import { AccountTransactionsDateFilterForm } from './AccountTransactionsDateFilter';
+import { Divider } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
 
 export function AccountTransactionsUncategorizeFilter() {
   const { bankAccountMetaSummary } = useAccountTransactionsContext();
@@ -57,21 +56,17 @@ export function AccountTransactionsUncategorizeFilter() {
   );
 
   return (
-    <Group position={'apart'}>
+    <Group position={'apart'} style={{ marginBottom: 14 }}>
-      <Group>
+      <Group align={'stretch'} spacing={10}>
         <TagsControl
           options={options}
           value={locationQuery?.uncategorizedFilter || 'all'}
           onValueChange={handleTabsChange}
         />
-        <Popover2
+        <Divider />
-          content={<UncategorizedTransactionsDateFilter />}
+        <AccountUncategorizedDateFilter />
-          position={Position.RIGHT}
-          popoverClassName={Classes.POPOVER_CONTENT_SIZING}
-        >
-          <Button icon={<Icon icon={'date-range'} />}>Date Filter</Button>
-        </Popover2>
       </Group>
+
       <TagsControl
         options={[{ value: 'excluded', label: 'Excluded' }]}
         value={locationQuery?.uncategorizedFilter || 'all'}
@@ -80,15 +75,3 @@ export function AccountTransactionsUncategorizeFilter() {
     </Group>
   );
 }
-
-export const UncategorizedTransactionsDateFilter = () => {
-  const initialValues = {};
-  const handleSubmit = () => {};
-
-  return (
-    <AccountTransactionsDateFilterForm
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-    />
-  );
-};

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

@@ -2,9 +2,11 @@
 
 import React from 'react';
 import { flatten, map } from 'lodash';
+import * as R from 'ramda';
 import { IntersectionObserver } from '@/components';
 import { useAccountUncategorizedTransactionsInfinity } from '@/hooks/query';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { withBanking } from '../withBanking';
 
 const AccountUncategorizedTransactionsContext = React.createContext();
 
@@ -13,9 +15,15 @@ function flattenInfinityPagesData(data) {
 }
 
 /**
- * Account uncategorized transctions provider.
+ * Account un-categorized transactions provider.
  */
-function AccountUncategorizedTransactionsBoot({ children }) {
+function AccountUncategorizedTransactionsBootRoot({
+  // #withBanking
+  uncategorizedTransactionsFilter,
+
+  // #ownProps
+  children,
+}) {
   const { accountId } = useAccountTransactionsContext();
 
   // Fetches the uncategorized transactions.
@@ -29,6 +37,8 @@ function AccountUncategorizedTransactionsBoot({ children }) {
     hasNextPage: hasUncategorizedTransactionsNextPage,
   } = useAccountUncategorizedTransactionsInfinity(accountId, {
     page_size: 50,
+    min_date: uncategorizedTransactionsFilter?.fromDate,
+    max_date: uncategorizedTransactionsFilter?.toDate,
   });
   // Memorized the cashflow account transactions.
   const uncategorizedTransactions = React.useMemo(
@@ -69,6 +79,12 @@ function AccountUncategorizedTransactionsBoot({ children }) {
   );
 }
 
+const AccountUncategorizedTransactionsBoot = R.compose(
+  withBanking(({ uncategorizedTransactionsFilter }) => ({
+    uncategorizedTransactionsFilter,
+  })),
+)(AccountUncategorizedTransactionsBootRoot);
+
 const useAccountUncategorizedTransactionsContext = () =>
   React.useContext(AccountUncategorizedTransactionsContext);
 

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

@@ -0,0 +1,86 @@
+// @ts-nocheck
+import * as R from 'ramda';
+import moment from 'moment';
+import { Box, Icon } from '@/components';
+import { Button, Classes, Popover, Position } from '@blueprintjs/core';
+import { withBankingActions } from '../../withBankingActions';
+import { withBanking } from '../../withBanking';
+import { AccountTransactionsDateFilterForm } from '../AccountTransactionsDateFilter';
+import { TagButton } from './TagButton';
+
+function AccountUncategorizedDateFilterRoot({
+  uncategorizedTransactionsFilter,
+}) {
+  const fromDate = uncategorizedTransactionsFilter?.fromDate;
+  const toDate = uncategorizedTransactionsFilter?.toDate;
+
+  const fromDateFormatted = moment(fromDate).isSame(
+    moment().format('YYYY'),
+    'year',
+  )
+    ? moment(fromDate).format('MMM, DD')
+    : moment(fromDate).format('MMM, DD, YYYY');
+  const toDateFormatted = moment(toDate).isSame(moment().format('YYYY'), 'year')
+    ? moment(toDate).format('MMM, DD')
+    : moment(toDate).format('MMM, DD, YYYY');
+
+  const buttonText =
+    fromDate && toDate
+      ? `Date: ${fromDateFormatted} → ${toDateFormatted}`
+      : 'Date Filter';
+
+  return (
+    <Popover
+      content={
+        <Box style={{ padding: 18 }}>
+          <UncategorizedTransactionsDateFilter />
+        </Box>
+      }
+      position={Position.RIGHT}
+      popoverClassName={Classes.POPOVER_CONTENT}
+    >
+      <TagButton outline icon={<Icon icon={'date-range'} />}>
+        {buttonText}
+      </TagButton>
+    </Popover>
+  );
+}
+
+export const AccountUncategorizedDateFilter = R.compose(
+  withBanking(({ uncategorizedTransactionsFilter }) => ({
+    uncategorizedTransactionsFilter,
+  })),
+)(AccountUncategorizedDateFilterRoot);
+
+export const UncategorizedTransactionsDateFilter = R.compose(
+  withBankingActions,
+  withBanking(({ uncategorizedTransactionsFilter }) => ({
+    uncategorizedTransactionsFilter,
+  })),
+)(
+  ({
+    // #withBankingActions
+    setUncategorizedTransactionsFilter,
+
+    // #withBanking
+    uncategorizedTransactionsFilter,
+  }) => {
+    const initialValues = {
+      ...uncategorizedTransactionsFilter,
+    };
+
+    const handleSubmit = (values) => {
+      setUncategorizedTransactionsFilter({
+        fromDate: values.fromDate,
+        toDate: values.toDate,
+      });
+    };
+
+    return (
+      <AccountTransactionsDateFilterForm
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      />
+    );
+  },
+);

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/TagButton.module.scss

@@ -0,0 +1,11 @@
+.root{
+  min-height: 26px;
+  border-radius: 15px;
+  font-size: 13px;
+  padding: 0 10px;
+
+  &:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)) {
+    background: #fff;
+    border: 1px solid #e1e2e8;
+  }
+}

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

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { Button } from "@blueprintjs/core"
+import styles from './TagButton.module.scss';
+
+
+
+export const TagButton = (props) => {
+  return <Button  {...props} className={styles.root} />
+}

packages/webapp/src/containers/CashFlow/withBanking.ts

@@ -25,6 +25,8 @@ export const withBanking = (mapState) => {
 
       categorizedTransactionsSelected:
         state.plaid.categorizedTransactionsSelected,
+
+      uncategorizedTransactionsFilter: state.plaid.uncategorizedFilter
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

packages/webapp/src/containers/CashFlow/withBankingActions.ts

@@ -15,6 +15,8 @@ import {
   removeTransactionsToCategorizeSelected,
   setCategorizedTransactionsSelected,
   resetCategorizedTransactionsSelected,
+  setUncategorizedTransactionsFilter,
+  resetUncategorizedTranasctionsFilter,
 } from '@/store/banking/banking.reducer';
 
 export interface WithBankingActionsProps {
@@ -40,6 +42,9 @@ export interface WithBankingActionsProps {
 
   setCategorizedTransactionsSelected: (ids: Array<string | number>) => void;
   resetCategorizedTransactionsSelected: () => void;
+
+  setUncategorizedTransactionsFilter: (filter: any) => void;
+  resetUncategorizedTranasctionsFilter: () => void;
 }
 
 const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
@@ -138,6 +143,19 @@ const mapDipatchToProps = (dispatch: any): WithBankingActionsProps => ({
    */
   resetCategorizedTransactionsSelected: () =>
     dispatch(resetCategorizedTransactionsSelected()),
+
+  /**
+   * Sets the uncategorized transactions filter.
+   * @param {any} filter -
+   */
+  setUncategorizedTransactionsFilter: (filter: any) =>
+    dispatch(setUncategorizedTransactionsFilter({ filter })),
+
+  /**
+   * Resets the uncategorized transactions filter.
+   */
+  resetUncategorizedTranasctionsFilter: () =>
+    dispatch(resetUncategorizedTranasctionsFilter()),
 });
 
 export const withBankingActions = connect<

packages/webapp/src/hooks/query/cashflowAccounts.tsx

@@ -152,7 +152,7 @@ export function useAccountUncategorizedTransactionsInfinity(
   const apiRequest = useApiRequest();
 
   return useInfiniteQuery(
-    [t.CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY, accountId],
+    [t.CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY, accountId, query],
     async ({ pageParam = 1 }) => {
       const response = await apiRequest.http({
         ...axios,

packages/webapp/src/store/banking/banking.reducer.ts

@@ -14,6 +14,8 @@ interface StorePlaidState {
   enableMultipleCategorization: boolean;
 
   categorizedTransactionsSelected: Array<number | string>;
+
+  uncategorizedFilter: { fromDate?: string; toDate?: string };
 }
 
 export const PlaidSlice = createSlice({
@@ -31,6 +33,9 @@ export const PlaidSlice = createSlice({
     transactionsToCategorizeSelected: [],
     enableMultipleCategorization: false,
     categorizedTransactionsSelected: [],
+
+    // Filter
+    uncategorizedFilter: {},
   } as StorePlaidState,
   reducers: {
     setPlaidId: (state: StorePlaidState, action: PayloadAction<string>) => {
@@ -199,6 +204,26 @@ export const PlaidSlice = createSlice({
     resetCategorizedTransactionsSelected: (state: StorePlaidState) => {
       state.categorizedTransactionsSelected = [];
     },
+
+    /**
+     * Sets the uncategorized transactions filter.
+     * @param {StorePlaidState} state 
+     * @param {PayloadAction<{ filter: any }>} action 
+     */
+    setUncategorizedTransactionsFilter: (
+      state: StorePlaidState,
+      action: PayloadAction<{ filter: any }>,
+    ) => {
+      state.uncategorizedFilter = action.payload.filter;
+    },
+
+    /**
+     * Resets the uncategorized transactions filter.
+     * @param {StorePlaidState} state 
+     */
+    resetUncategorizedTranasctionsFilter: (state: StorePlaidState) => {
+      state.uncategorizedFilter = {};
+    },
   },
 });
 
@@ -220,6 +245,10 @@ export const {
   enableMultipleCategorization,
   setCategorizedTransactionsSelected,
   resetCategorizedTransactionsSelected,
+
+  // Uncategorized transactions filter.
+  setUncategorizedTransactionsFilter,
+  resetUncategorizedTranasctionsFilter,
 } = PlaidSlice.actions;
 
 export const getPlaidToken = (state: any) => state.plaid.plaidToken;
@@ -234,3 +263,6 @@ export const isMultipleCategorization = (state: any) =>
 
 export const getTransactionsToCategorizeIdsSelected = (state: any) =>
   state.plaid.transactionsToCategorizeSelected;
+
+export const getUncategorizedTransactionsFilter = (state: any) =>
+  state.uncategorizedFilter;

packages/webapp/src/style/objects/buttons.scss

@@ -17,7 +17,6 @@
 
   &.bp4-small {
     font-size: 13px;
-    min-height: 29px;
   }
 }