Merge pull request #1127 from CruGlobal/MPDX-8318

MPDX-8318 Financial Accounts Summary and Transactions pages

pages/accountLists/[accountListId]/reports/financialAccounts/Wrapper.tsx

@@ -0,0 +1,88 @@
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { FinancialAccountProvider } from 'src/components/Reports/FinancialAccountsReport/Context/FinancialAccountsContext';
+import {
+  DateRangeInput,
+  InputMaybe,
+  Scalars,
+} from 'src/graphql/types.generated';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export enum FinancialAccountPageEnum {
+  FinancialAccountPage = 'FinancialAccountPage',
+  AccountSummaryPage = 'AccountSummaryPage',
+  AccountTransactionsPage = 'AccountTransactionsPage',
+}
+
+export interface FinancialAccountTransactionFilters {
+  dateRange?: InputMaybe<DateRangeInput>;
+  categoryId?: InputMaybe<Scalars['String']['input']>;
+}
+
+export const FinancialAccountsWrapper: React.FC<Props> = ({ children }) => {
+  const router = useRouter();
+  const { query, replace, pathname, isReady } = router;
+
+  const urlFilters =
+    query?.filters && JSON.parse(decodeURI(query.filters as string));
+
+  const [activeFilters, setActiveFilters] =
+    useState<FinancialAccountTransactionFilters>(urlFilters ?? {});
+
+  const [page, setPage] = useState<FinancialAccountPageEnum>(
+    FinancialAccountPageEnum.FinancialAccountPage,
+  );
+  const [financialAccountId, setFinancialAccountId] = useState<
+    string | undefined
+  >(undefined);
+
+  const { financialAccount, searchTerm, accountListId } = query;
+
+  useEffect(() => {
+    if (!financialAccount) {
+      setPage(FinancialAccountPageEnum.FinancialAccountPage);
+      return;
+    }
+    const length = financialAccount.length;
+    setFinancialAccountId(financialAccount[0]);
+    if (length === 1) {
+      setPage(FinancialAccountPageEnum.AccountSummaryPage);
+    } else if (length > 1) {
+      setPage(FinancialAccountPageEnum.AccountTransactionsPage);
+    }
+  }, [financialAccount, accountListId]);
+
+  useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    const { filters: _, ...oldQuery } = query;
+    replace({
+      pathname,
+      query: {
+        ...oldQuery,
+        ...(Object.keys(activeFilters).length
+          ? { filters: encodeURI(JSON.stringify(activeFilters)) }
+          : undefined),
+      },
+    });
+  }, [activeFilters, isReady]);
+
+  return (
+    <FinancialAccountProvider
+      urlFilters={urlFilters}
+      activeFilters={activeFilters}
+      setActiveFilters={setActiveFilters}
+      financialAccountId={financialAccountId}
+      search={searchTerm}
+      page={page}
+      setPage={setPage}
+    >
+      {children}
+    </FinancialAccountProvider>
+  );
+};

pages/accountLists/[accountListId]/reports/financialAccounts/[[...financialAccount]].page.tsx

@@ -0,0 +1,173 @@
+import Head from 'next/head';
+import React, { ReactElement, useContext, useMemo } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { loadSession } from 'pages/api/utils/pagePropsHelpers';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import Loading from 'src/components/Loading';
+import {
+  FinancialAccountContext,
+  FinancialAccountType,
+} from 'src/components/Reports/FinancialAccountsReport/Context/FinancialAccountsContext';
+import { MainContent } from 'src/components/Reports/FinancialAccountsReport/MainContent/MainContent';
+import { DynamicFilterPanel } from 'src/components/Shared/Filters/DynamicFilterPanel';
+import {
+  ContextTypesEnum,
+  FilterInput,
+} from 'src/components/Shared/Filters/FilterPanel';
+import { headerHeight } from 'src/components/Shared/Header/ListHeader';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+import { useAccountListId } from 'src/hooks/useAccountListId';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { Panel } from '../helpers';
+import {
+  FinancialAccountTransactionFilters,
+  FinancialAccountsWrapper,
+} from './Wrapper';
+
+const FinancialAccounts = (): ReactElement => {
+  const { t } = useTranslation();
+  const accountListId = useAccountListId();
+  const { appName } = useGetAppSettings();
+
+  const {
+    isNavListOpen,
+    designationAccounts,
+    setDesignationAccounts,
+    handleNavListToggle,
+    financialAccountsQuery,
+    activeFilters,
+    panelOpen,
+    setPanelOpen,
+    setActiveFilters,
+    setSearchTerm,
+  } = useContext(FinancialAccountContext) as FinancialAccountType;
+
+  const { data } = financialAccountsQuery;
+
+  const filterGroups = useMemo(() => {
+    const categoryOptions =
+      data?.financialAccount.categories.nodes
+        .map((category) => {
+          const name = category?.name ?? category?.code ?? '';
+          return {
+            __typename: 'FilterOption' as const,
+            value: category.id,
+            name,
+            placeholder: name,
+          };
+        })
+        .sort((a, b) =>
+          a.name && b.name ? a.name.localeCompare(b.name) : 0,
+        ) ?? [];
+
+    return [
+      {
+        __typename: 'FilterGroup' as const,
+        name: 'Transaction Date',
+        featured: true,
+        filters: [
+          {
+            __typename: 'DaterangeFilter' as const,
+            title: 'Transaction Date',
+            filterKey: 'dateRange',
+            options: [],
+          },
+        ],
+      },
+      {
+        __typename: 'FilterGroup' as const,
+        name: 'Category',
+        featured: true,
+        filters: [
+          {
+            __typename: 'RadioFilter' as const,
+            title: 'Category',
+            filterKey: 'categoryId',
+            defaultSelection: '',
+            options: [
+              {
+                __typename: 'FilterOption' as const,
+                value: 'all-categories',
+                name: 'All Categories',
+                placeholder: 'All Categories',
+              },
+              ...categoryOptions,
+            ],
+          },
+        ],
+      },
+    ];
+  }, [data]);
+
+  const handleSelectedFiltersChanged = (selectedFilters: FilterInput) => {
+    setActiveFilters(selectedFilters as FinancialAccountTransactionFilters);
+  };
+
+  const handleClearSearch = () => {
+    setSearchTerm('');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>
+          {appName} | {t('Reports - Responsibility Centers')}
+        </title>
+      </Head>
+
+      {accountListId ? (
+        <Box sx={{ background: 'common.white' }}>
+          <SidePanelsLayout
+            headerHeight={headerHeight}
+            isScrollBox={false}
+            leftOpen={isNavListOpen}
+            leftWidth="290px"
+            mainContent={<MainContent />}
+            leftPanel={
+              panelOpen === Panel.Navigation ? (
+                <MultiPageMenu
+                  isOpen={isNavListOpen}
+                  selectedId="financialAccounts"
+                  onClose={handleNavListToggle}
+                  designationAccounts={designationAccounts}
+                  setDesignationAccounts={setDesignationAccounts}
+                  navType={NavTypeEnum.Reports}
+                />
+              ) : panelOpen === Panel.Filters ? (
+                <DynamicFilterPanel
+                  filters={filterGroups}
+                  defaultExpandedFilterGroups={
+                    new Set(['Transaction Date', 'Category'])
+                  }
+                  savedFilters={[]}
+                  selectedFilters={activeFilters as FilterInput}
+                  onClose={() => setPanelOpen(null)}
+                  onSelectedFiltersChanged={handleSelectedFiltersChanged}
+                  onHandleClearSearch={handleClearSearch}
+                  contextType={ContextTypesEnum.FinancialAccountReport}
+                  showSaveButton={false}
+                />
+              ) : undefined
+            }
+          />
+        </Box>
+      ) : (
+        <Loading loading />
+      )}
+    </>
+  );
+};
+
+const FinancialAccountsPage: React.FC = () => (
+  <FinancialAccountsWrapper>
+    <FinancialAccounts />
+  </FinancialAccountsWrapper>
+);
+
+export const getServerSideProps = loadSession;
+
+export default FinancialAccountsPage;

pages/accountLists/[accountListId]/reports/helpers.ts

@@ -0,0 +1,4 @@
+export enum Panel {
+  Navigation = 'Navigation',
+  Filters = 'Filters',
+}

pages/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]].page.tsx

@@ -10,7 +10,6 @@ import { DynamicContactsRightPanel } from 'src/components/Contacts/ContactsRight
 import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
 import Loading from 'src/components/Loading';
 import {
-  Panel,
   PartnerGivingAnalysisReport,
   PartnerGivingAnalysisReportRef,
 } from 'src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport';
@@ -25,6 +24,7 @@ import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { getQueryParam } from 'src/utils/queryParam';
 import { useContactFiltersQuery } from '../../contacts/Contacts.generated';
 import { ContactsWrapper } from '../../contacts/ContactsWrapper';
+import { Panel } from '../helpers';
 
 // The order here is also the sort order and the display order
 const reportFilters = [

pages/api/Schema/index.ts

@@ -39,6 +39,10 @@ import { EntryHistoriesResolvers } from './reports/entryHistories/resolvers';
 import ExpectedMonthlyTotalReportTypeDefs from './reports/expectedMonthlyTotal/expectedMonthlyTotal.graphql';
 import { ExpectedMonthlyTotalReportResolvers } from './reports/expectedMonthlyTotal/resolvers';
 import FinancialAccountsTypeDefs from './reports/financialAccounts/financialAccounts.graphql';
+import FinancialAccountSummaryTypeDefs from './reports/financialAccounts/financialAccounts/financialAccounts.graphql';
+import { FinancialAccountSummaryResolvers } from './reports/financialAccounts/financialAccounts/resolvers';
+import FinancialAccountEntriesTypeDefs from './reports/financialAccounts/financialEntries/financialEntries.graphql';
+import { financialAccountEntriesResolvers } from './reports/financialAccounts/financialEntries/resolvers';
 import { FinancialAccountsResolvers } from './reports/financialAccounts/resolvers';
 import FourteenMonthReportTypeDefs from './reports/fourteenMonth/fourteenMonth.graphql';
 import { FourteenMonthReportResolvers } from './reports/fourteenMonth/resolvers';
@@ -127,6 +131,14 @@ const schema = buildSubgraphSchema([
     typeDefs: DeleteTagsTypeDefs,
     resolvers: DeleteTagsResolvers,
   },
+  {
+    typeDefs: FinancialAccountSummaryTypeDefs,
+    resolvers: FinancialAccountSummaryResolvers,
+  },
+  {
+    typeDefs: FinancialAccountEntriesTypeDefs,
+    resolvers: financialAccountEntriesResolvers,
+  },
   ...integrationSchema,
   ...organizationSchema,
   ...preferencesSchema,