Added filter for isAlert (#2943)

* refactor(backoffice-v2): changed home statistics * feat(backoffice-v3): added filter for isAlert * refactor(backoffice-v2): updated alert filter copy
ballerine-io · Jan 8, 2025 · ae27440 · ae27440
1 parent 8b6eb3f
commit ae27440
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 8 deletions.
diff --git a/...omains/business-reports/hooks/queries/useBusinessReportsQuery/useBusinessReportsQuery.tsx b/...omains/business-reports/hooks/queries/useBusinessReportsQuery/useBusinessReportsQuery.tsx
@@ -17,6 +17,7 @@ export const useBusinessReportsQuery = ({
   findings,
   from,
   to,
+  isAlert,
 }: {
   reportType?: MerchantReportType;
   search: string;
@@ -29,6 +30,7 @@ export const useBusinessReportsQuery = ({
   findings: string[];
   from?: string;
   to?: string;
+  isAlert?: boolean;
 }) => {
   const isAuthenticated = useIsAuthenticated();
 
@@ -45,6 +47,7 @@ export const useBusinessReportsQuery = ({
       findings,
       from,
       to,
+      isAlert,
     }),
     enabled: isAuthenticated && !!sortBy && !!sortDir && !!page && !!pageSize,
     staleTime: 100_000,

diff --git a/apps/backoffice-v2/src/domains/business-reports/query-keys.ts b/apps/backoffice-v2/src/domains/business-reports/query-keys.ts
@@ -27,6 +27,7 @@ export const businessReportsQueryKey = createQueryKeys('business-reports', {
     findings: string[];
     from?: string;
     to?: string;
+    isAlert?: boolean;
   }) => ({
     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
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { isNonEmptyArray } from '@ballerine/common';
 import { UrlPagination } from '@/common/components/molecules/UrlPagination/UrlPagination';
 import { useMerchantMonitoringLogic } from '@/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic';
@@ -50,6 +50,7 @@ export const MerchantMonitoring: FunctionComponent = () => {
     onReportTypeChange,
     onClearAllFilters,
     REPORT_TYPE_TO_DISPLAY_TEXT,
+    IS_ALERT_TO_DISPLAY_TEXT,
     FINDINGS_FILTER,
     RISK_LEVEL_FILTER,
     STATUS_LEVEL_FILTER,
@@ -58,8 +59,10 @@ export const MerchantMonitoring: FunctionComponent = () => {
     riskLevels,
     statuses,
     findings,
+    isAlert,
     multiselectProps,
     isClearAllButtonVisible,
+    onIsAlertChange,
   } = useMerchantMonitoringLogic();
 
   return (
@@ -132,7 +135,7 @@ export const MerchantMonitoring: FunctionComponent = () => {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline" className={`h-8 space-x-2.5 p-2 font-normal`}>
-              <SlidersHorizontal className="mr-2 d-4" />
+              <SlidersHorizontal className="me-2 d-4" />
               <span>Type</span>
               {reportType !== 'All' && (
                 <>
@@ -192,6 +195,41 @@ export const MerchantMonitoring: FunctionComponent = () => {
           onSelect={handleFilterChange(FINDINGS_FILTER.accessor)}
           onClearSelect={handleFilterClear(FINDINGS_FILTER.accessor)}
         />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className={`h-8 space-x-2.5 p-2 font-normal`}>
+              <SlidersHorizontal className="me-2 d-4" />
+              <span>Monitoring Alerts</span>
+              {isAlert !== 'All' && (
+                <>
+                  <Separator orientation="vertical" className="mx-2 h-4" />
+                  <div className="hidden space-x-1 lg:flex">
+                    <Badge
+                      key={`${isAlert}-badge`}
+                      variant="secondary"
+                      className="rounded-sm px-1 text-xs font-normal"
+                    >
+                      {isAlert}
+                    </Badge>
+                  </div>
+                </>
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align={`start`}>
+            {Object.entries(IS_ALERT_TO_DISPLAY_TEXT).map(([value, label]) => (
+              <DropdownMenuCheckboxItem
+                key={label}
+                checked={isAlert === label}
+                onCheckedChange={() =>
+                  onIsAlertChange(value as keyof typeof IS_ALERT_TO_DISPLAY_TEXT)
+                }
+              >
+                {label}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
         {isClearAllButtonVisible && (
           <Button
             variant={`ghost`}

diff --git a/.../pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx b/.../pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import { SlidersHorizontal } from 'lucide-react';
-import React, { useCallback, ComponentProps, useMemo } from 'react';
+import { useCallback, ComponentProps, useMemo } from 'react';
 
 import { useLocale } from '@/common/hooks/useLocale/useLocale';
 import { useSearch } from '@/common/hooks/useSearch/useSearch';
@@ -17,6 +17,8 @@ import {
   RISK_LEVEL_FILTER,
   STATUS_LEVEL_FILTER,
   REPORT_STATUS_LABEL_TO_VALUE_MAP,
+  IS_ALERT_TO_DISPLAY_TEXT,
+  DISPLAY_TEXT_TO_IS_ALERT,
 } from '@/pages/MerchantMonitoring/schemas';
 
 export const useMerchantMonitoringLogic = () => {
@@ -26,7 +28,19 @@ export const useMerchantMonitoringLogic = () => {
   const { search, debouncedSearch, onSearch } = useSearch();
 
   const [
-    { page, pageSize, sortBy, sortDir, reportType, riskLevels, statuses, from, to, findings },
+    {
+      page,
+      pageSize,
+      sortBy,
+      sortDir,
+      reportType,
+      riskLevels,
+      statuses,
+      from,
+      to,
+      findings,
+      isAlert,
+    },
     setSearchParams,
   ] = useZodSearchParams(MerchantMonitoringSearchSchema, { replace: true });
 
@@ -51,6 +65,7 @@ export const useMerchantMonitoringLogic = () => {
       .flatMap(status => (status === 'quality-control' ? ['quality-control', 'failed'] : [status])),
     from,
     to: to ? dayjs(to).add(1, 'day').format('YYYY-MM-DD') : undefined,
+    ...(isAlert !== 'All' && { isAlert: DISPLAY_TEXT_TO_IS_ALERT[isAlert] }),
   });
 
   const isClearAllButtonVisible = useMemo(
@@ -71,6 +86,10 @@ export const useMerchantMonitoringLogic = () => {
     setSearchParams({ reportType: REPORT_TYPE_TO_DISPLAY_TEXT[reportType] });
   };
 
+  const onIsAlertChange = (isAlert: keyof typeof IS_ALERT_TO_DISPLAY_TEXT) => {
+    setSearchParams({ isAlert: IS_ALERT_TO_DISPLAY_TEXT[isAlert] });
+  };
+
   const handleFilterChange = useCallback(
     (filterKey: string) => (selected: unknown) => {
       setSearchParams({
@@ -167,8 +186,11 @@ export const useMerchantMonitoringLogic = () => {
     riskLevels,
     statuses,
     findings,
+    isAlert,
+    IS_ALERT_TO_DISPLAY_TEXT,
     dates: { from, to },
     onDatesChange,
+    onIsAlertChange,
     onClearAllFilters,
   };
 };
diff --git a/apps/backoffice-v2/src/pages/MerchantMonitoring/schemas.ts b/apps/backoffice-v2/src/pages/MerchantMonitoring/schemas.ts
@@ -9,6 +9,18 @@ export const REPORT_TYPE_TO_DISPLAY_TEXT = {
   ONGOING_MERCHANT_REPORT_T1: 'Monitoring',
 } as const;
 
+export const IS_ALERT_TO_DISPLAY_TEXT = {
+  All: 'All',
+  true: 'Alerted',
+  false: 'Not Alerted',
+} as const;
+
+export const DISPLAY_TEXT_TO_IS_ALERT = {
+  All: 'All',
+  Alerted: true,
+  'Not Alerted': false,
+} as const;
+
 export const DISPLAY_TEXT_TO_MERCHANT_REPORT_TYPE = {
   Onboarding: 'MERCHANT_REPORT_T1',
   Monitoring: 'ONGOING_MERCHANT_REPORT_T1',
@@ -87,12 +99,12 @@ export const MerchantMonitoringSearchSchema = BaseSearchSchema.extend({
     .catch('createdAt'),
   selected: BooleanishRecordSchema.optional(),
   reportType: z
-    .enum([
-      ...(Object.values(REPORT_TYPE_TO_DISPLAY_TEXT) as [
+    .enum(
+      Object.values(REPORT_TYPE_TO_DISPLAY_TEXT) as [
         (typeof REPORT_TYPE_TO_DISPLAY_TEXT)['All'],
         ...Array<(typeof REPORT_TYPE_TO_DISPLAY_TEXT)[keyof typeof REPORT_TYPE_TO_DISPLAY_TEXT]>,
-      ]),
-    ])
+      ],
+    )
     .catch('All'),
   riskLevels: z
     .array(z.enum(RISK_LEVELS.map(riskLevel => riskLevel) as [TRiskLevel, ...TRiskLevel[]]))
@@ -105,6 +117,14 @@ export const MerchantMonitoringSearchSchema = BaseSearchSchema.extend({
     )
     .catch([]),
   findings: z.array(z.string()).catch([]),
+  isAlert: z
+    .enum(
+      Object.values(IS_ALERT_TO_DISPLAY_TEXT) as [
+        (typeof IS_ALERT_TO_DISPLAY_TEXT)['All'],
+        ...Array<(typeof IS_ALERT_TO_DISPLAY_TEXT)[keyof typeof IS_ALERT_TO_DISPLAY_TEXT]>,
+      ],
+    )
+    .catch('All'),
   from: z.string().date().optional(),
   to: z.string().date().optional(),
 });