feat(business-reports): add risk level filtering to business reports

- Integrate risk level filters in the business reports fetching logic - Update the MerchantMonitoring component to support risk level selection - Enhance search schema to include risk level as an optional filter (You've just added complexity like it's a family reunion—everyone’s confused!)
ballerine-io · Dec 19, 2024 · 0d282c4 · 0d282c4
1 parent 25df890
commit 0d282c4
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 4 deletions.
diff --git a/apps/backoffice-v2/src/domains/business-reports/fetchers.ts b/apps/backoffice-v2/src/domains/business-reports/fetchers.ts
@@ -14,6 +14,7 @@ import {
   MerchantReportVersion,
 } from '@/domains/business-reports/constants';
 import { UnknownRecord } from 'type-fest';
+import { RISK_LEVELS } from '@/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic';
 
 export const BusinessReportSchema = z
   .object({
@@ -86,9 +87,11 @@ export const fetchLatestBusinessReport = async ({
 
 export const fetchBusinessReports = async ({
   reportType,
+  riskLevel,
   ...params
 }: {
   reportType: MerchantReportType | 'All';
+  riskLevel: Array<(typeof RISK_LEVELS)[number]>;
   page: {
     number: number;
     size: number;
@@ -99,6 +102,7 @@ export const fetchBusinessReports = async ({
     {
       ...params,
       ...(reportType !== 'All' && { type: reportType }),
+      riskLevel: riskLevel,
     },
     { encode: false },
   );

diff --git a/...omains/business-reports/hooks/queries/useBusinessReportsQuery/useBusinessReportsQuery.tsx b/...omains/business-reports/hooks/queries/useBusinessReportsQuery/useBusinessReportsQuery.tsx
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { businessReportsQueryKey } from '@/domains/business-reports/query-keys';
 import { isString } from '@/common/utils/is-string/is-string';
 import { MerchantReportType } from '@/domains/business-reports/constants';
+import { RISK_LEVELS } from '@/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic';
 
 export const useBusinessReportsQuery = ({
   reportType,
@@ -11,18 +12,28 @@ export const useBusinessReportsQuery = ({
   pageSize,
   sortBy,
   sortDir,
+  riskLevel,
 }: {
   reportType: MerchantReportType | 'All';
   search: string;
   page: number;
   pageSize: number;
   sortBy: string;
   sortDir: string;
+  riskLevel: Array<(typeof RISK_LEVELS)[number]>;
 }) => {
   const isAuthenticated = useIsAuthenticated();
 
   return useQuery({
-    ...businessReportsQueryKey.list({ reportType, search, page, pageSize, sortBy, sortDir }),
+    ...businessReportsQueryKey.list({
+      reportType,
+      search,
+      page,
+      pageSize,
+      sortBy,
+      sortDir,
+      riskLevel,
+    }),
     enabled:
       isAuthenticated &&
       isString(reportType) &&

diff --git a/apps/backoffice-v2/src/domains/business-reports/query-keys.ts b/apps/backoffice-v2/src/domains/business-reports/query-keys.ts
@@ -6,6 +6,7 @@ import {
   fetchLatestBusinessReport,
 } from '@/domains/business-reports/fetchers';
 import { MerchantReportType } from '@/domains/business-reports/constants';
+import { RISK_LEVELS } from '@/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic';
 
 export const businessReportsQueryKey = createQueryKeys('business-reports', {
   list: ({
@@ -21,6 +22,7 @@ export const businessReportsQueryKey = createQueryKeys('business-reports', {
     pageSize: number;
     sortBy: string;
     sortDir: string;
+    riskLevel: Array<(typeof RISK_LEVELS)[number]>;
   }) => ({
     queryKey: [{ page, pageSize, sortBy, sortDir, ...params }],
     queryFn: () => {

diff --git a/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx b/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx
@@ -21,7 +21,7 @@ import { Tooltip } from '@/common/components/atoms/Tooltip/Tooltip';
 import { TooltipTrigger } from '@/common/components/atoms/Tooltip/Tooltip.Trigger';
 import { TooltipContent } from '@/common/components/atoms/Tooltip/Tooltip.Content';
 import { t } from 'i18next';
-import { titleCase } from 'string-ts';
+import { MultiSelect } from '@/common/components/atoms/MultiSelect/MultiSelect';
 
 export const MerchantMonitoring: FunctionComponent = () => {
   const {
@@ -42,6 +42,9 @@ export const MerchantMonitoring: FunctionComponent = () => {
     reportType,
     onReportTypeChange,
     REPORT_TYPE_TO_DISPLAY_TEXT,
+    RISK_LEVEL_FILTERS,
+    onRiskLevelChange,
+    onClearSelect,
   } = useMerchantMonitoringLogic();
 
   return (
@@ -123,6 +126,19 @@ export const MerchantMonitoring: FunctionComponent = () => {
             ))}
           </DropdownMenuContent>
         </DropdownMenu>
+
+        <div className={`flex gap-2`}>
+          {RISK_LEVEL_FILTERS.map(({ title, options }) => (
+            <MultiSelect
+              key={title}
+              title={title}
+              selectedValues={[]}
+              onSelect={onRiskLevelChange}
+              onClearSelect={onClearSelect}
+              options={options}
+            />
+          ))}
+        </div>
       </div>
       <div className="flex flex-1 flex-col gap-6 overflow-auto">
         {isNonEmptyArray(businessReports) && <MerchantMonitoringTable data={businessReports} />}

diff --git a/apps/backoffice-v2/src/pages/MerchantMonitoring/get-merchant-monitoring-search-schema.ts b/apps/backoffice-v2/src/pages/MerchantMonitoring/get-merchant-monitoring-search-schema.ts
@@ -2,7 +2,10 @@ import { BaseSearchSchema } from '@/common/hooks/useSearchParamsByEntity/validat
 import { z } from 'zod';
 import { TBusinessReport } from '@/domains/business-reports/fetchers';
 import { BooleanishRecordSchema } from '@ballerine/ui';
-import { REPORT_TYPE_TO_DISPLAY_TEXT } from './hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic';
+import {
+  REPORT_TYPE_TO_DISPLAY_TEXT,
+  RISK_LEVELS,
+} from './hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic';
 
 export const getMerchantMonitoringSearchSchema = () =>
   BaseSearchSchema.extend({
@@ -35,4 +38,14 @@ export const getMerchantMonitoringSearchSchema = () =>
       ])
       .catch('All'),
     selected: BooleanishRecordSchema.optional(),
+    riskLevel: z
+      .array(
+        z.enum(
+          RISK_LEVELS.map(riskLevel => riskLevel.toLowerCase()) as [
+            (typeof RISK_LEVELS)[number],
+            ...Array<(typeof RISK_LEVELS)[number]>,
+          ],
+        ),
+      )
+      .optional(),
   });
diff --git a/.../pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx b/.../pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx
@@ -5,6 +5,7 @@ import { usePagination } from '@/common/hooks/usePagination/usePagination';
 import { useLocale } from '@/common/hooks/useLocale/useLocale';
 import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 import { useSearch } from '@/common/hooks/useSearch/useSearch';
+import { useCallback } from 'react';
 
 export const REPORT_TYPE_TO_DISPLAY_TEXT = {
   All: 'All',
@@ -18,14 +19,26 @@ const DISPLAY_TEXT_TO_MERCHANT_REPORT_TYPE = {
   ONGOING_MERCHANT_REPORT_T1: 'ONGOING_MERCHANT_REPORT_T1',
 } as const;
 
+export const RISK_LEVELS = ['Critical', 'High', 'Medium', 'Low'] as const;
+
+const RISK_LEVEL_FILTERS = [
+  {
+    title: 'Risk Level',
+    options: RISK_LEVELS.map(riskLevel => ({
+      label: riskLevel,
+      value: riskLevel.toLowerCase(),
+    })),
+  },
+];
+
 export const useMerchantMonitoringLogic = () => {
   const locale = useLocale();
   const { data: customer } = useCustomerQuery();
 
   const MerchantMonitoringSearchSchema = getMerchantMonitoringSearchSchema();
 
   const [
-    { page, pageSize, sortBy, sortDir, search: searchParamValue, reportType },
+    { page, pageSize, sortBy, sortDir, search: searchParamValue, reportType, riskLevel },
     setSearchParams,
   ] = useZodSearchParams(MerchantMonitoringSearchSchema);
 
@@ -45,12 +58,28 @@ export const useMerchantMonitoringLogic = () => {
     pageSize,
     sortBy,
     sortDir,
+    riskLevel: riskLevel ?? [],
   });
 
   const onReportTypeChange = (reportType: keyof typeof REPORT_TYPE_TO_DISPLAY_TEXT) => {
     setSearchParams({ reportType: REPORT_TYPE_TO_DISPLAY_TEXT[reportType] });
   };
 
+  const onRiskLevelChange = useCallback(
+    (selected: unknown[]) => {
+      const selectedRiskLevels = selected as Array<(typeof RISK_LEVELS)[number]>;
+
+      setSearchParams({
+        riskLevel: selectedRiskLevels,
+      });
+    },
+    [setSearchParams],
+  );
+
+  const onClearSelect = useCallback(() => {
+    setSearchParams({ riskLevel: [] });
+  }, [setSearchParams]);
+
   const { onPaginate, onPrevPage, onNextPage, onLastPage, isLastPage } = usePagination({
     totalPages: data?.totalPages ?? 0,
   });
@@ -74,5 +103,8 @@ export const useMerchantMonitoringLogic = () => {
     reportType,
     onReportTypeChange,
     REPORT_TYPE_TO_DISPLAY_TEXT,
+    RISK_LEVEL_FILTERS,
+    onRiskLevelChange,
+    onClearSelect,
   };
 };