Bal 1644 - report in case management

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

@@ -1,28 +1,30 @@
-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 { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring';
-import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page';
-import { Profiles } from '@/pages/Profiles/Profiles.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 { FunctionComponent } from 'react';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 const router = createBrowserRouter([
   {
@@ -114,7 +116,26 @@ const router = createBrowserRouter([
                     children: [
                       {
                         path: '/:locale/transaction-monitoring/alerts/:alertId',
-                        element: <TransactionMonitoringAlertsAnalysisPage />,
+                        element: <TransactionMonitoringAlerts />,
+                        errorElement: <RouteError />,
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                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 {
@@ -46,6 +46,7 @@ export const MultiSelect = <
 }: IMultiSelectProps<TOption>) => {
   const [selected, setSelected] = useState(selectedValues);
 
+  console.log('title', { title });
   const onSelectChange = useCallback(
     (value: TOption['value']) => {
       const isSelected = selected.some(selectedValue => selectedValue === value);

apps/backoffice-v2/src/common/components/molecules/DownloadFile/DownloadFile.tsx

@@ -1,6 +1,6 @@
-import { ctw } from '@/common/utils/ctw/ctw';
-import React, { ComponentProps, FunctionComponent } from 'react';
 import { DownloadFileSvg } from '@/common/components/atoms/icons';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { ComponentProps, FunctionComponent } from 'react';
 
 export interface IDownloadFile extends ComponentProps<'div'> {
   heading: string;

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

@@ -0,0 +1,10 @@
+import { IFiltersHeaderProps } from '@/common/components/organisms/Filters/interfaces';
+import { FunctionComponent } from 'react';
+
+export const FiltersHeader: FunctionComponent<IFiltersHeaderProps> = ({ title }) => {
+  return typeof title === 'string' ? (
+    <h4 className={'leading-0 min-h-[16px] pb-7 text-xs font-bold'}>{title}</h4>
+  ) : (
+    title
+  );
+};

apps/backoffice-v2/src/common/components/organisms/Filters/Filters.Input.tsx

@@ -0,0 +1,19 @@
+import { MultiselectFilterInput } from '@/common/components/organisms/Filters/filter-inputs/MultiSelectFilterInput';
+import { IFilterInputParams } from '@/common/components/organisms/Filters/interfaces';
+import { TFilterInputType } from '@/common/components/organisms/Filters/types';
+import { FunctionComponent, useMemo } from 'react';
+
+const getFilterInputComponent = (
+  type: TFilterInputType,
+): React.ComponentType<IFilterInputParams> => {
+  if (type === 'multi-select')
+    return MultiselectFilterInput as React.ComponentType<IFilterInputParams>;
+
+  throw new Error(`Filter input for type ${type} not implemented.`);
+};
+
+export const FiltersInput: FunctionComponent<IFilterInputParams> = props => {
+  const InputComponent = useMemo(() => getFilterInputComponent(props.filter.type), [props.filter]);
+
+  return <InputComponent {...props} />;
+};

apps/backoffice-v2/src/common/components/organisms/Filters/Filters.List.tsx

@@ -0,0 +1,33 @@
+import { useFiltersContext } from '@/common/components/organisms/Filters/context/hooks/useFiltersContext';
+import {
+  IFilterDefinition,
+  IFiltersListProps,
+} from '@/common/components/organisms/Filters/interfaces';
+import { useFilter } from '@/common/hooks/useFilter/useFilter';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { FunctionComponent, useCallback } from 'react';
+
+export const FiltersList: FunctionComponent<IFiltersListProps> = ({ children, className }) => {
+  const { filters, values } = useFiltersContext();
+  const { onFilter } = useFilter();
+  const onClearSelect = useCallback(
+    (accessor: string) => () => {
+      onFilter(accessor)([]);
+    },
+    [onFilter],
+  );
+
+  return (
+    <div className={ctw('flex gap-x-2', className)}>
+      {filters.map(filterDefinition =>
+        children({
+          filter: filterDefinition,
+          value: values[filterDefinition.id],
+          clear: onClearSelect(filterDefinition.id),
+          inputParams: filterDefinition.params as IFilterDefinition['params'],
+          onChange: onFilter(filterDefinition.id),
+        }),
+      )}
+    </div>
+  );
+};

apps/backoffice-v2/src/common/components/organisms/Filters/Filters.tsx

@@ -0,0 +1,19 @@
+import { FiltersProvider } from '@/common/components/organisms/Filters/context/FiltersProvider';
+import { IFiltersProps } from '@/common/components/organisms/Filters/interfaces';
+import { ctw } from '@ballerine/ui';
+import { FunctionComponent } from 'react';
+
+export const Filters: FunctionComponent<IFiltersProps> = ({
+  filters,
+  values = [],
+  children,
+  className,
+  onChange,
+  onClear,
+}) => {
+  return (
+    <FiltersProvider filters={filters} values={values} onChange={onChange} onClear={onClear}>
+      <div className={ctw('flex flex-col', className)}>{children}</div>
+    </FiltersProvider>
+  );
+};

apps/backoffice-v2/src/common/components/organisms/Filters/context/FiltersProvider.tsx

@@ -0,0 +1,42 @@
+import { IFiltersProviderProps } from '@/common/components/organisms/Filters/context/interfaces';
+import { TFiltersContext } from '@/common/components/organisms/Filters/context/types';
+import { createFilterValuesMap } from '@/common/components/organisms/Filters/context/utils/create-filter-values-map';
+import { TFiltersInputID } from '@/common/components/organisms/Filters/types';
+import { FunctionComponent, useCallback, useMemo } from 'react';
+import { filtersContext } from './filters.context';
+
+const { Provider } = filtersContext;
+
+export const FiltersProvider: FunctionComponent<IFiltersProviderProps> = ({
+  children,
+  values,
+  filters,
+  onChange,
+  onClear,
+}) => {
+  const handleChange = useCallback(
+    (id: TFiltersInputID, value: unknown) => {
+      onChange({ id, value });
+    },
+    [onChange],
+  );
+
+  const handleClear = useCallback(
+    (id: TFiltersInputID) => {
+      onClear(id);
+    },
+    [onClear],
+  );
+
+  const context: TFiltersContext = useMemo(
+    () => ({
+      values: createFilterValuesMap({ filters, values: values ?? [] }),
+      filters,
+      onChange: handleChange,
+      onClear: handleClear,
+    }),
+    [values, filters, handleChange, handleClear],
+  );
+
+  return <Provider value={context}>{children}</Provider>;
+};

apps/backoffice-v2/src/common/components/organisms/Filters/context/filters.context.ts

@@ -0,0 +1,15 @@
+import { TFiltersContext } from '@/common/components/organisms/Filters/context/types';
+import { createContext } from 'react';
+
+const initialContext: TFiltersContext = {
+  filters: [],
+  values: {},
+  onChange: () => {
+    return;
+  },
+  onClear: () => {
+    return;
+  },
+};
+
+export const filtersContext = createContext(initialContext);

apps/backoffice-v2/src/common/components/organisms/Filters/context/hooks/useFiltersContext.ts

@@ -0,0 +1,4 @@
+import { filtersContext } from '@/common/components/organisms/Filters/context/filters.context';
+import { useContext } from 'react';
+
+export const useFiltersContext = () => useContext(filtersContext);

apps/backoffice-v2/src/common/components/organisms/Filters/context/interfaces.ts

@@ -0,0 +1,7 @@
+import { IFiltersProps } from '@/common/components/organisms/Filters/interfaces';
+import { AnyChildren } from '@ballerine/ui';
+
+export interface IFiltersProviderProps
+  extends Pick<IFiltersProps, 'filters' | 'values' | 'onChange' | 'onClear'> {
+  children: AnyChildren;
+}

apps/backoffice-v2/src/common/components/organisms/Filters/context/types.ts

@@ -0,0 +1,11 @@
+import { IFilterDefinition } from '@/common/components/organisms/Filters/interfaces';
+import { TFiltersInputID } from '@/common/components/organisms/Filters/types';
+
+export type TFiltersValuesMap = Record<TFiltersInputID, unknown>;
+
+export type TFiltersContext = {
+  filters: Array<IFilterDefinition<unknown>>;
+  values: TFiltersValuesMap;
+  onChange: (id: TFiltersInputID, value: unknown) => void;
+  onClear: (id: TFiltersInputID) => void;
+};

apps/backoffice-v2/src/common/components/organisms/Filters/context/utils/create-filter-values-map.ts

@@ -0,0 +1,24 @@
+import { TFiltersValuesMap } from '@/common/components/organisms/Filters/context/types';
+import { IFilterDefinition, IFilterValue } from '@/common/components/organisms/Filters/interfaces';
+
+export const createFilterValuesMap = ({
+  filters,
+  values,
+}: {
+  filters: Array<IFilterDefinition<unknown>>;
+  values: IFilterValue[];
+}) => {
+  const plainValues = values.reduce((object, value) => {
+    object[value.id] = value.value;
+
+    return object;
+  }, {} as Record<string, unknown>);
+
+  const valuesMap = filters.reduce((object, filter) => {
+    object[filter.id] = plainValues[filter.id] ?? filter.defaultValue;
+
+    return object;
+  }, {} as TFiltersValuesMap);
+
+  return valuesMap;
+};

apps/backoffice-v2/src/common/components/organisms/Filters/filter-inputs/MultiSelectFilterInput.tsx

@@ -0,0 +1,27 @@
+import { MultiSelect } from '@/common/components/atoms/MultiSelect/MultiSelect';
+import { IFilterInputParams } from '@/common/components/organisms/Filters/interfaces';
+import { FunctionComponent } from 'react';
+
+export interface IMultiSelectFilterParams {
+  type: 'multi-select';
+  options: Array<{
+    name: string;
+    value: string;
+  }>;
+}
+
+export const MultiselectFilterInput: FunctionComponent<
+  IFilterInputParams<IMultiSelectFilterParams, string[]>
+> = ({ inputParams, filter, value, onChange, clear }) => {
+  const { options } = inputParams;
+
+  return (
+    <MultiSelect
+      title={filter.label}
+      selectedValues={value ?? []}
+      onSelect={onChange}
+      onClearSelect={clear}
+      options={options || []}
+    />
+  );
+};

apps/backoffice-v2/src/common/components/organisms/Filters/interfaces.ts

@@ -0,0 +1,41 @@
+import { TFilterInputType, TFiltersInputID } from '@/common/components/organisms/Filters/types';
+import { AnyChildren } from '@ballerine/ui';
+
+export interface IFilterDefinition<TFilterParams = unknown> {
+  id: TFiltersInputID;
+  label: string;
+  params: TFilterParams;
+  defaultValue?: unknown;
+  type: TFilterInputType;
+}
+
+export interface IFilterInputParams<TInputParams = unknown, TInputValue = unknown> {
+  filter: IFilterDefinition;
+  inputParams: TInputParams;
+  value: TInputValue;
+  clear: () => void;
+  onChange: (value: Array<string | null>) => void;
+}
+
+export interface IFilterValue {
+  id: string;
+  value: unknown;
+}
+
+export interface IFiltersProps {
+  filters: Array<IFilterDefinition<unknown>>;
+  values?: IFilterValue[];
+  children: AnyChildren;
+  className?: string;
+  onChange: (value: IFilterValue) => void;
+  onClear: (id: TFiltersInputID) => void;
+}
+
+export interface IFiltersHeaderProps {
+  title: string | JSX.Element;
+}
+
+export interface IFiltersListProps {
+  className?: string;
+  children: (params: IFilterInputParams) => JSX.Element;
+}

apps/backoffice-v2/src/common/components/organisms/Filters/types.ts

@@ -0,0 +1,2 @@
+export type TFilterInputType = 'multi-select';
+export type TFiltersInputID = string;