Added new columns in alerts table

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

@@ -34,5 +34,6 @@ export const TextWithNAFallback: TTextWithNAFallback = forwardRef(
     );
   },
 );
+
 // @ts-ignore
 TextWithNAFallback.displayName = 'TextWithNAFallback';

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

@@ -76,7 +76,12 @@ export const AlertsListSchema = z.array(
   ObjectWithIdSchema.extend({
     dataTimestamp: z.string().datetime(),
     updatedAt: z.string().datetime(),
-    subject: ObjectWithIdSchema.extend({ name: z.string() }),
+    subject: ObjectWithIdSchema.extend({
+      id: z.string(),
+      name: z.string(),
+      correlationId: z.string(),
+      type: z.enum(['business', 'counterparty']),
+    }),
     severity: z.enum(AlertSeverities),
     label: z.string(),
     alertDetails: z.string(),

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/AlertsTable.tsx

@@ -29,7 +29,7 @@ export const AlertsTable: FunctionComponent<IAlertsTableProps> = ({ data }) => {
                   {headers.map(header => (
                     <TableHead
                       key={header.id}
-                      className={`sticky top-0 z-10 h-[34px] bg-white p-0 text-[14px] font-bold text-[#787981]`}
+                      className={`sticky top-0 z-10 h-[34px] bg-white p-1 text-[14px] font-bold text-[#787981]`}
                     >
                       {header.column.id === 'select' && (
                         <span className={'pe-4'}>
@@ -38,7 +38,7 @@ export const AlertsTable: FunctionComponent<IAlertsTableProps> = ({ data }) => {
                       )}
                       {header.column.id !== 'select' && (
                         <button
-                          className="flex h-9 flex-row items-center gap-x-2 px-3 text-[#A3A3A3]"
+                          className="flex h-9 flex-row items-center gap-x-2 px-3 text-left text-[#A3A3A3]"
                           onClick={() => header.column.toggleSorting()}
                         >
                           <span>

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/columns.tsx

@@ -14,6 +14,8 @@ import { severityToClassName } from '@/pages/TransactionMonitoringAlerts/compone
 import { IndeterminateCheckbox } from '@/common/components/atoms/IndeterminateCheckbox/IndeterminateCheckbox';
 import { SnakeCase, titleCase } from 'string-ts';
 import { toScreamingSnakeCase } from '@/common/utils/to-screaming-snake-case/to-screaming-snake-case';
+import { useEllipsesWithTitle } from '@/common/hooks/useEllipsesWithTitle/useEllipsesWithTitle';
+import { buttonVariants } from '@/common/components/atoms/Button/Button';
 
 const columnHelper = createColumnHelper<
   TAlertsList[number] & {
@@ -84,6 +86,39 @@ export const columns = [
     },
     header: 'Subject',
   }),
+  columnHelper.accessor('subject.type', {
+    cell: info => {
+      const subjectType = info.getValue();
+
+      return (
+        <TextWithNAFallback className={`max-w-[12ch]`}>{titleCase(subjectType)}</TextWithNAFallback>
+      );
+    },
+    header: 'Subject Type',
+  }),
+  columnHelper.accessor('subject.correlationId', {
+    cell: info => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks -- ESLint doesn't like `cell` not being `Cell`.
+      const { ref, styles } = useEllipsesWithTitle<HTMLSpanElement>();
+      const subjectId = info.getValue();
+
+      return (
+        <div className={`w-[11.8ch]`}>
+          <TextWithNAFallback
+            className={buttonVariants({
+              variant: 'link',
+              className: '!block cursor-pointer !p-0 text-sm !text-blue-500',
+            })}
+            style={styles}
+            ref={ref}
+          >
+            {subjectId}
+          </TextWithNAFallback>
+        </div>
+      );
+    },
+    header: 'Subject ID',
+  }),
   columnHelper.accessor('severity', {
     cell: info => {
       const severity = info.getValue();
@@ -108,7 +143,7 @@ export const columns = [
     cell: info => {
       const alertDetails = info.getValue();
 
-      return <TextWithNAFallback>{alertDetails}</TextWithNAFallback>;
+      return <TextWithNAFallback className={`max-w-[40ch]`}>{alertDetails}</TextWithNAFallback>;
     },
     header: 'Alert Details',
   }),

services/workflows-service/src/alert/alert.controller.external.ts

@@ -107,11 +107,15 @@ export class AlertControllerExternal {
         alertDetails: alertDefinition.description,
         subject: counterparty.business
           ? {
+              type: 'business',
               id: counterparty.business.id,
               name: counterparty.business.companyName,
+              correlationId: counterparty.business.correlationId,
             }
           : {
+              type: 'counterparty',
               id: counterparty.endUser.id,
+              correlationId: counterparty.endUser.correlationId,
               name: `${counterparty.endUser.firstName} ${counterparty.endUser.lastName}`,
             },
         decision: state,

services/workflows-service/src/alert/types.ts

@@ -1,4 +1,4 @@
-import { Alert, AlertDefinition, Business, User } from '@prisma/client';
+import { Alert, AlertDefinition, Business, EndUser, User } from '@prisma/client';
 
 export type TExecutionDetails = {
   checkpoint: {
@@ -23,8 +23,8 @@ export type TAlertResponse = Alert & {
   alertDefinition: Pick<AlertDefinition, 'description' | 'label'>;
   assignee: Pick<User, 'id' | 'firstName' | 'lastName' | 'avatarUrl'>;
   counterparty: {
-    business: Pick<Business, 'id' | 'companyName'>;
-    endUser: Pick<User, 'id' | 'firstName' | 'lastName'>;
+    business: Pick<Business, 'id' | 'companyName' | 'correlationId'>;
+    endUser: Pick<EndUser, 'id' | 'firstName' | 'lastName' | 'correlationId'>;
   };
 };