Alerts graph

apps/backoffice-v2/src/domains/business-reports/fetchers.ts

@@ -89,16 +89,16 @@ export const fetchLatestBusinessReport = async ({
 
 export const fetchBusinessReports = async (params: {
   reportType?: MerchantReportType;
-  riskLevels: TRiskLevel[];
-  statuses: TReportStatusValue[];
-  findings: string[];
+  riskLevels?: TRiskLevel[];
+  statuses?: TReportStatusValue[];
+  findings?: string[];
   from?: string;
   to?: string;
-  page: {
+  page?: {
     number: number;
     size: number;
   };
-  orderBy: string;
+  orderBy?: string;
 }) => {
   const queryParams = qs.stringify(params, { encode: false });
 

apps/backoffice-v2/src/domains/business-reports/hooks/queries/useBusinessReportsQuery/useBusinessReportsQuery.tsx

@@ -20,14 +20,14 @@ export const useBusinessReportsQuery = ({
   isAlert,
 }: {
   reportType?: MerchantReportType;
-  search: string;
-  page: number;
-  pageSize: number;
-  sortBy: string;
-  sortDir: string;
-  riskLevels: TRiskLevel[];
-  statuses: TReportStatusValue[];
-  findings: string[];
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortDir?: string;
+  riskLevels?: TRiskLevel[];
+  statuses?: TReportStatusValue[];
+  findings?: string[];
   from?: string;
   to?: string;
   isAlert?: boolean;

apps/backoffice-v2/src/domains/business-reports/query-keys.ts

@@ -17,14 +17,14 @@ export const businessReportsQueryKey = createQueryKeys('business-reports', {
     ...params
   }: {
     reportType?: MerchantReportType;
-    search: string;
-    page: number;
-    pageSize: number;
-    sortBy: string;
-    sortDir: string;
-    riskLevels: TRiskLevel[];
-    statuses: TReportStatusValue[];
-    findings: string[];
+    search?: string;
+    page?: number;
+    pageSize?: number;
+    sortBy?: string;
+    sortDir?: string;
+    riskLevels?: TRiskLevel[];
+    statuses?: TReportStatusValue[];
+    findings?: string[];
     from?: string;
     to?: string;
     isAlert?: boolean;

apps/backoffice-v2/src/pages/Root/Root.page.tsx

@@ -5,7 +5,6 @@ import { FullScreenLoader } from '@/common/components/molecules/FullScreenLoader
 import Chatbot from '@/domains/chat/chatbot-opengpt';
 import { env } from '@/common/env/env';
 import { Outlet } from 'react-router-dom';
-import { ServerDownLayout } from './ServerDown.layout';
 
 const ReactQueryDevtools = lazy(() =>
   process.env.NODE_ENV !== 'production'
@@ -44,9 +43,7 @@ const ChatbotLayout: FunctionComponent = () => {
 export const Root: FunctionComponent = () => {
   return (
     <Providers>
-      <ServerDownLayout>
-        <Outlet />
-      </ServerDownLayout>
+      <Outlet />
       <ChatbotLayout />
       {/*<Suspense>*/}
       {/*  <ReactQueryDevtools  />*/}

apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx

@@ -16,8 +16,8 @@ import { titleCase } from 'string-ts';
 import { usePortfolioRiskStatisticsLogic } from '@/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic';
 import { z } from 'zod';
 import { MetricsResponseSchema } from '@/domains/business-reports/hooks/queries/useBusinessReportMetricsQuery/useBusinessReportMetricsQuery';
-import { Link, useNavigate } from 'react-router-dom';
-import { useLocale } from '@/common/hooks/useLocale/useLocale';
+import { Link } from 'react-router-dom';
+import { buttonVariants, WarningFilledSvg } from '@ballerine/ui';
 
 export const PortfolioRiskStatistics: FunctionComponent<
   Pick<z.infer<typeof MetricsResponseSchema>, 'riskLevelCounts' | 'violationCounts'>
@@ -29,21 +29,23 @@ export const PortfolioRiskStatistics: FunctionComponent<
     riskLevelToBackgroundColor,
     totalRiskIndicators,
     filteredRiskIndicators,
+    locale,
+    navigate,
+    from,
+    to,
+    alertedReports,
   } = usePortfolioRiskStatisticsLogic({
     riskLevelCounts,
     violationCounts,
   });
 
-  const locale = useLocale();
-  const navigate = useNavigate();
-
   return (
     <div>
       <h3 className={'mb-4 text-xl font-bold'}>Portfolio Risk Statistics</h3>
       <div className={'grid grid-cols-3 gap-6'}>
         <div className={'min-h-[27.5rem] rounded-xl bg-[#F6F6F6] p-2'}>
           <Card className={'flex h-full flex-col px-3'}>
-            <CardHeader className={'pb-1'}>Merchant Monitoring Risk</CardHeader>
+            <CardHeader className={'pb-1 font-bold'}>Merchant Monitoring Risk</CardHeader>
             <CardContent>
               <p className={'mb-8 text-slate-400'}>
                 Risk levels of all merchant monitoring reports.
@@ -119,7 +121,7 @@ export const PortfolioRiskStatistics: FunctionComponent<
         </div>
         <div className={'min-h-[10.125rem] rounded-xl bg-[#F6F6F6] p-2'}>
           <Card className={'flex h-full flex-col px-3'}>
-            <CardHeader className={'pb-2'}>Top 10 Content Violations</CardHeader>
+            <CardHeader className={'pb-2 font-bold'}>Top 10 Content Violations</CardHeader>
             <CardContent>
               <Table>
                 <TableHeader className={'[&_tr]:border-b-0'}>
@@ -152,6 +154,32 @@ export const PortfolioRiskStatistics: FunctionComponent<
             </CardContent>
           </Card>
         </div>
+        <div className={'self-start rounded-xl bg-[#F6F6F6] p-2'}>
+          <Card className={'flex h-full flex-col px-3'}>
+            <CardHeader className={'pb-2 font-bold'}>Unresolved Monitoring Alerts</CardHeader>
+            <CardContent>
+              <div className={'flex justify-between'}>
+                <div className={'flex items-center space-x-1'}>
+                  <WarningFilledSvg className={'mt-1 d-10'} />
+                  <span className={'text-3xl font-semibold'}>
+                    {Intl.NumberFormat().format(alertedReports)}
+                  </span>
+                </div>
+                <Link
+                  to={`/${locale}/merchant-monitoring?from=${from}&to=${to}&isAlert=Alerted`}
+                  className={ctw(
+                    buttonVariants({
+                      variant: 'link',
+                    }),
+                    'h-[unset] cursor-pointer !p-0 !text-blue-500',
+                  )}
+                >
+                  View
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );

apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx

@@ -7,6 +7,9 @@ import {
 } from '@/pages/Statistics/components/PortfolioRiskStatistics/constants';
 import { z } from 'zod';
 import { MetricsResponseSchema } from '@/domains/business-reports/hooks/queries/useBusinessReportMetricsQuery/useBusinessReportMetricsQuery';
+import { useLocale } from '@/common/hooks/useLocale/useLocale';
+import { useNavigate } from 'react-router-dom';
+import { useBusinessReportsQuery } from '@/domains/business-reports/hooks/queries/useBusinessReportsQuery/useBusinessReportsQuery';
 
 export const usePortfolioRiskStatisticsLogic = ({
   riskLevelCounts,
@@ -40,6 +43,31 @@ export const usePortfolioRiskStatisticsLogic = ({
       ),
     [filteredRiskIndicators],
   );
+  const locale = useLocale();
+  const navigate = useNavigate();
+  const getLast30DaysDateRange = () => {
+    const currentDate = new Date();
+    const thirtyDaysAgo = new Date(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000); // Subtract 30 days in milliseconds
+
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+    const currentDay = currentDate.getDate().toString().padStart(2, '0');
+
+    const startYear = thirtyDaysAgo.getFullYear();
+    const startMonth = (thirtyDaysAgo.getMonth() + 1).toString().padStart(2, '0');
+    const startDay = thirtyDaysAgo.getDate().toString().padStart(2, '0');
+
+    return {
+      from: `${startYear}-${startMonth}-${startDay}`,
+      to: `${currentYear}-${currentMonth}-${currentDay}`,
+    };
+  };
+
+  const { from, to } = getLast30DaysDateRange();
+  const { data: businessReports } = useBusinessReportsQuery({
+    isAlert: true,
+  });
+  const alertedReports = businessReports?.data?.length ?? 0;
 
   return {
     riskLevelToFillColor,
@@ -50,5 +78,10 @@ export const usePortfolioRiskStatisticsLogic = ({
     onSortRiskIndicators,
     filteredRiskIndicators,
     totalRiskIndicators,
+    locale,
+    navigate,
+    from,
+    to,
+    alertedReports,
   };
 };