Add filters for officer analysts (#1998)

* add filters for officer analysts

* add tooltip and addresss comments

epictrack-web/src/components/insights/Work/Tabs/Staff/Charts/workListing.tsx

@@ -68,30 +68,96 @@ const WorkList = () => {
     getWorkStaffAllocation();
   }, []);
 
-  React.useEffect(() => {
-    let columns: Array<MRT_ColumnDef<WorkOrWorkStaff>> = [];
+  const tableColumns = React.useMemo(() => {
+    let cols: Array<MRT_ColumnDef<WorkOrWorkStaff>> = [];
     if (wsData && wsData.length > 0) {
       const rolename = WorkStaffRoleNames[WorkStaffRole.OFFICER_ANALYST];
-      columns = [
+
+      // Extract all officer analysts from wsData
+      const officerAnalysts = wsData.flatMap((row: any) =>
+        row.staff
+          ? row.staff.filter(
+              (p: { role: Role }) => p.role.id === WorkStaffRole.OFFICER_ANALYST
+            )
+          : []
+      );
+
+      // Create an array of strings for each officer analyst
+      const officerAnalystOptions = Array.from(
+        new Set(
+          officerAnalysts.map(
+            (officerAnalyst: any) =>
+              `${officerAnalyst.first_name} ${officerAnalyst.last_name}`
+          )
+        )
+      );
+
+      cols = [
         {
           header: rolename,
+          filterSelectOptions: officerAnalystOptions,
           accessorFn: (row: any) => {
-            const officerAnalyst = row.staff
-              ? row.staff.find(
+            if (!row.staff) {
+              return "";
+            }
+            const officerAnalysts = row.staff
+              ? row.staff.filter(
                   (p: { role: Role }) =>
                     p.role.id === WorkStaffRole.OFFICER_ANALYST
                 )
-              : null;
-            return officerAnalyst
-              ? `${officerAnalyst.first_name} ${officerAnalyst.last_name}`
-              : "";
+              : [];
+            return officerAnalysts
+              .map(
+                (officerAnalyst: any) =>
+                  `${officerAnalyst.first_name} ${officerAnalyst.last_name}`
+              )
+              .join(", ");
           },
+          Cell: ({ renderedCellValue }) => (
+            <ETGridTitle
+              to="#"
+              enableEllipsis
+              enableTooltip={true}
+              tooltip={renderedCellValue}
+            >
+              {renderedCellValue}
+            </ETGridTitle>
+          ),
           enableHiding: false,
           enableColumnFilter: true,
+          sortingFn: "sortFn",
+          filterVariant: "multi-select",
+          Filter: ({ header, column }) => {
+            return (
+              <TableFilter
+                isMulti
+                header={header}
+                column={column}
+                variant="inline"
+                name="rolesFilter"
+              />
+            );
+          },
+          filterFn: (row, id, filterValue) => {
+            if (
+              !filterValue.length ||
+              filterValue.length > officerAnalystOptions.length // select all is selected
+            ) {
+              return true;
+            }
+
+            const value: string = row.getValue(id) || "";
+
+            // Split the cell value into individual names
+            const names = value.split(", ");
+
+            // Check if any name includes the filter value
+            return names.some((name) => filterValue.includes(name));
+          },
         } as MRT_ColumnDef<WorkOrWorkStaff>,
       ];
     }
-    setWorkRoles(columns);
+    setWorkRoles(cols);
   }, [wsData]);
 
   const codeTypes: { [x: string]: any } = {