Bal 1644 - report in case management

apps/backoffice-v2/src/Router/Router.tsx

@@ -1,28 +1,31 @@
-import React, { FunctionComponent } from 'react';
-import { env } from '@/common/env/env';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { RootError } from '@/pages/Root/Root.error';
-import { Root } from '@/pages/Root/Root.page';
-import { SignIn } from '@/pages/SignIn/SignIn.page';
-import { Entity } from '@/pages/Entity/Entity.page';
-import { Entities } from '@/pages/Entities/Entities.page';
 import { RouteError } from '@/common/components/atoms/RouteError/RouteError';
-import { CaseManagement } from '@/pages/CaseManagement/CaseManagement.page';
-import { rootLoader } from '@/pages/Root/Root.loader';
-import { entitiesLoader } from '@/pages/Entities/Entities.loader';
-import { authenticatedLayoutLoader } from '@/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.loader';
-import { entityLoader } from '@/pages/Entity/Entity.loader';
+import { env } from '@/common/env/env';
 import { AuthenticatedLayout } from '@/domains/auth/components/AuthenticatedLayout';
+import { authenticatedLayoutLoader } from '@/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.loader';
 import { UnauthenticatedLayout } from '@/domains/auth/components/UnauthenticatedLayout';
-import { Locale } from '@/pages/Locale/Locale.page';
 import { unauthenticatedLayoutLoader } from '@/domains/auth/components/UnauthenticatedLayout/UnauthenticatedLayout.loader';
+import { Businesses } from '@/pages/Businesses/Businesses';
+import { BusinessesAlerts } from '@/pages/BusinessesAlerts/BusinessesAlerts.page';
+import { BusinessesAlertsAnalysisPage } from '@/pages/BusinessesAlertsAnalysis/BusinessesAlertsAnalysis.page';
+import { CaseManagement } from '@/pages/CaseManagement/CaseManagement.page';
 import { Document } from '@/pages/Document/Document.page';
+import { entitiesLoader } from '@/pages/Entities/Entities.loader';
+import { Entities } from '@/pages/Entities/Entities.page';
+import { entityLoader } from '@/pages/Entity/Entity.loader';
+import { Entity } from '@/pages/Entity/Entity.page';
+import { Locale } from '@/pages/Locale/Locale.page';
 import { NotFoundRedirect } from '@/pages/NotFound/NotFound';
-import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page';
+import { Individuals } from '@/pages/Profiles/Individuals/Individuals.page';
+import { Profiles } from '@/pages/Profiles/Profiles.page';
+import { RootError } from '@/pages/Root/Root.error';
+import { rootLoader } from '@/pages/Root/Root.loader';
+import { Root } from '@/pages/Root/Root.page';
+import { SignIn } from '@/pages/SignIn/SignIn.page';
 import { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring';
+import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page';
 import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page';
-import { Profiles } from '@/pages/Profiles/Profiles.page';
-import { Individuals } from '@/pages/Profiles/Individuals/Individuals.page';
+import { FunctionComponent } from 'react';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 const router = createBrowserRouter([
   {
@@ -121,6 +124,25 @@ const router = createBrowserRouter([
                   },
                 ],
               },
+              {
+                path: '/:locale/businesses',
+                element: <Businesses />,
+                errorElement: <RouteError />,
+                children: [
+                  {
+                    path: '/:locale/businesses/alerts',
+                    element: <BusinessesAlerts />,
+                    errorElement: <RouteError />,
+                    children: [
+                      {
+                        path: '/:locale/businesses/alerts/:alertId',
+                        element: <BusinessesAlertsAnalysisPage />,
+                        errorElement: <RouteError />,
+                      },
+                    ],
+                  },
+                ],
+              },
             ],
           },
         ],

apps/backoffice-v2/src/common/components/atoms/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { Separator } from '@/common/components/atoms/Separator/Separator';
 import {
   Badge,
   Button,
@@ -9,13 +9,13 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-  ctw,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  ctw,
 } from '@ballerine/ui';
 import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
-import { Separator } from '@/common/components/atoms/Separator/Separator';
+import { ReactNode, useCallback, useState } from 'react';
 
 interface IMultiSelectProps<
   TOption extends {
@@ -63,7 +63,7 @@ export const MultiSelect = <
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline" size="sm" className="h-8 border">
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          <PlusCircledIcon className="size-4 mr-2" />
           {title}
           {selected?.length > 0 && (
             <>
@@ -107,13 +107,13 @@ export const MultiSelect = <
                   <CommandItem key={option.value} onSelect={() => onSelectChange(option.value)}>
                     <div
                       className={ctw(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        'size-4 mr-2 flex items-center justify-center rounded-sm border border-primary',
                         isSelected
                           ? 'bg-primary text-primary-foreground'
                           : 'opacity-50 [&_svg]:invisible',
                       )}
                     >
-                      <CheckIcon className={ctw('h-4 w-4')} />
+                      <CheckIcon className={ctw('size-4')} />
                     </div>
                     {option.icon}
                     <span>{option.label}</span>

apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx

@@ -1,8 +1,8 @@
-import { useFiltersQuery } from '@/domains/filters/hooks/queries/useFiltersQuery/useFiltersQuery';
+import { TRouteWithChildren, TRoutes } from '@/Router/types';
 import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
-import { useCallback, useMemo } from 'react';
+import { useFiltersQuery } from '@/domains/filters/hooks/queries/useFiltersQuery/useFiltersQuery';
 import { Building, Goal, Users } from 'lucide-react';
-import { TRoutes, TRouteWithChildren } from '@/Router/types';
+import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
 export const useNavbarLogic = () => {
@@ -20,13 +20,19 @@ export const useNavbarLogic = () => {
     {
       text: 'Businesses',
       icon: <Building size={20} />,
-      children:
-        businessesFilters?.map(({ id, name }) => ({
+      children: [
+        ...(businessesFilters?.map(({ id, name }) => ({
           filterId: id,
           text: name,
           href: `/en/case-management/entities?filterId=${id}`,
           key: `nav-item-${id}`,
-        })) ?? [],
+        })) ?? []),
+        {
+          text: 'Ongoing Moniotring',
+          href: `/en/businesses/alerts`,
+          key: 'nav-item-business-alerts',
+        },
+      ],
       key: 'nav-item-businesses',
     },
     {

apps/backoffice-v2/src/common/hooks/useFilter/useFilter.tsx

@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
 import { useSerializedSearchParams } from '@/common/hooks/useSerializedSearchParams/useSerializedSearchParams';
+import { useCallback } from 'react';
 
 export const useFilter = () => {
   const [{ filter }, setSearchParams] = useSerializedSearchParams();
@@ -19,8 +19,19 @@ export const useFilter = () => {
     [filter, setSearchParams],
   );
 
+  const onClear = useCallback((accessor: string) => {
+    setSearchParams({
+      filter: {
+        ...filter,
+        [accessor]: [],
+      },
+      page: '1',
+    });
+  }, []);
+
   return {
     filter,
+    onClear,
     onFilter,
   };
 };

apps/backoffice-v2/src/common/utils/save-base64-as-file/save-base64-as-file.ts

@@ -0,0 +1,8 @@
+export const saveBase64AsFile = (base64: string, fileName?: string) => {
+  const link = document.createElement('a');
+
+  link.download = fileName || 'file';
+  link.href = base64;
+
+  link.click();
+};

apps/backoffice-v2/src/domains/alerts/fetchers.ts

@@ -1,12 +1,12 @@
-import qs from 'qs';
 import { apiClient } from '@/common/api-client/api-client';
 import { Method } from '@/common/enums';
-import { z } from 'zod';
-import { ObjectWithIdSchema } from '@/lib/zod/utils/object-with-id/object-with-id';
-import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error';
+import { env } from '@/common/env/env';
 import { TObjectValues } from '@/common/types';
 import { getOriginUrl } from '@/common/utils/get-origin-url/get-url-origin';
-import { env } from '@/common/env/env';
+import { handleZodError } from '@/common/utils/handle-zod-error/handle-zod-error';
+import { ObjectWithIdSchema } from '@/lib/zod/utils/object-with-id/object-with-id';
+import qs from 'qs';
+import { z } from 'zod';
 
 export const AlertSeverity = {
   CRITICAL: 'critical',
@@ -72,32 +72,34 @@ export type TAlertState = (typeof AlertStates)[number];
 
 export type TAlertStates = typeof AlertStates;
 
-export const AlertsListSchema = z.array(
-  ObjectWithIdSchema.extend({
-    dataTimestamp: z.string().datetime(),
-    updatedAt: z.string().datetime(),
-    subject: ObjectWithIdSchema.extend({
-      name: z.string(),
-      correlationId: z.string(),
-      type: z.enum(['business', 'counterparty']),
-    }),
-    severity: z.enum(AlertSeverities),
+export const AlertItemSchema = ObjectWithIdSchema.extend({
+  dataTimestamp: z.string().datetime(),
+  updatedAt: z.string().datetime(),
+  subject: ObjectWithIdSchema.extend({
+    name: z.string(),
     correlationId: z.string(),
-    alertDetails: z.string(),
-    // amountOfTxs: z.number(),
-    assignee: ObjectWithIdSchema.extend({
-      fullName: z.string(),
-      avatarUrl: z.string().nullable().optional(),
-    })
-      .nullable()
-      .default(null),
-    status: z.enum(AlertStatuses),
-    decision: z.enum(AlertStates).nullable().default(null),
-    counterpartyId: z.string().nullable().default(null),
+    type: z.enum(['business', 'counterparty']),
   }),
-);
+  severity: z.enum(AlertSeverities),
+  correlationId: z.string(),
+  alertDetails: z.string(),
+  // amountOfTxs: z.number(),
+  assignee: ObjectWithIdSchema.extend({
+    fullName: z.string(),
+    avatarUrl: z.string().nullable().optional(),
+  })
+    .nullable()
+    .default(null),
+  status: z.enum(AlertStatuses),
+  decision: z.enum(AlertStates).nullable().default(null),
+  counterpartyId: z.string().nullable().default(null),
+});
+
+export const AlertsListSchema = z.array(AlertItemSchema);
 
+export type TAlertItem = z.output<typeof AlertItemSchema>;
 export type TAlertsList = z.output<typeof AlertsListSchema>;
+export type AlertEntityType = 'transaction' | 'business';
 
 export const fetchAlerts = async (params: {
   orderBy: string;
@@ -106,11 +108,17 @@ export const fetchAlerts = async (params: {
     size: number;
   };
   filter: Record<string, unknown>;
+  entityType: AlertEntityType;
 }) => {
   const queryParams = qs.stringify(params, { encode: false });
+  let url = `${getOriginUrl(env.VITE_API_URL)}/api/v1/external/alerts?${queryParams}`;
+
+  if (params.entityType === 'business') {
+    url = `${getOriginUrl(env.VITE_API_URL)}/api/v1/external/alerts/business-report?${queryParams}`;
+  }
 
   const [alerts, error] = await apiClient({
-    url: `${getOriginUrl(env.VITE_API_URL)}/api/v1/external/alerts?${queryParams}`,
+    url,
     method: Method.GET,
     schema: AlertsListSchema,
   });

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/get-alerts-search-schema.ts → apps/backoffice-v2/src/domains/alerts/helpers/get-alerts-search-schema.ts

@@ -1,8 +1,9 @@
 import { BaseSearchSchema } from '@/common/hooks/useSearchParamsByEntity/validation-schemas';
-import { z } from 'zod';
 import { AlertStatus, AlertStatuses, TAlertsList } from '@/domains/alerts/fetchers';
 import { BooleanishSchema } from '@/lib/zod/utils/checkers';
-export const getAlertsSearchSchema = (authenticatedUserId: string | undefined) =>
+import { z } from 'zod';
+
+export const getAlertsSearchSchema = () =>
   BaseSearchSchema.extend({
     sortBy: z
       .enum(['dataTimestamp', 'status'] as const satisfies ReadonlyArray<
@@ -25,4 +26,5 @@ export const getAlertsSearchSchema = (authenticatedUserId: string | undefined) =
     selected: BooleanishSchema.optional(),
     businessId: z.string().optional(),
     counterpartyId: z.string().optional(),
+    type: z.string().optional(),
   });

apps/backoffice-v2/src/domains/alerts/hooks/queries/useAlertsQuery/useAlertsQuery.tsx

@@ -1,6 +1,7 @@
+import { AlertEntityType } from '@/domains/alerts/fetchers';
+import { alertsQueryKeys } from '@/domains/alerts/query-keys';
 import { useIsAuthenticated } from '@/domains/auth/context/AuthProvider/hooks/useIsAuthenticated/useIsAuthenticated';
 import { useQuery } from '@tanstack/react-query';
-import { alertsQueryKeys } from '@/domains/alerts/query-keys';
 
 export const useAlertsQuery = ({
   sortBy,
@@ -9,18 +10,20 @@ export const useAlertsQuery = ({
   pageSize,
   search,
   filter,
+  entityType,
 }: {
   sortBy: string;
   sortDir: string;
   page: number;
   pageSize: number;
   search: string;
   filter: Record<string, unknown>;
+  entityType: AlertEntityType;
 }) => {
   const isAuthenticated = useIsAuthenticated();
 
   return useQuery({
-    ...alertsQueryKeys.list({ filter, sortBy, sortDir, page, pageSize, search }),
+    ...alertsQueryKeys.list({ filter, sortBy, sortDir, page, pageSize, search, entityType }),
     enabled: isAuthenticated && !!sortBy && !!sortDir && !!page && !!pageSize,
     staleTime: 100_000,
   });