UI fixes to the Merchant Monitoring table (#2560)

* feat: uI Fixes to the Merchant Monitoring table

* Update apps/backoffice-v2/src/common/components/atoms/CopyToClipboardButton/CopyToClipboardButton.tsx

Co-authored-by: Omri Levy <61207713+Omri-Levy@users.noreply.github.com>

* feat: pr comments fixes

* feat: pR comments fixes

* feat: pR comment fix

---------

Co-authored-by: Omri Levy <61207713+Omri-Levy@users.noreply.github.com>

apps/backoffice-v2/src/common/components/atoms/CopyToClipboard/CopyToClipboard.tsx → apps/backoffice-v2/src/common/components/atoms/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -8,7 +8,7 @@ interface ICopyToClipboardProps extends ComponentProps<typeof Button> {
  textToCopy: string;
 }
 
-export const CopyToClipboard: FunctionComponent<ICopyToClipboardProps> = ({
+export const CopyToClipboardButton: FunctionComponent<ICopyToClipboardProps> = ({
  textToCopy,
  className,
  disabled,
@@ -18,7 +18,10 @@ export const CopyToClipboard: FunctionComponent<ICopyToClipboardProps> = ({
  <Button
  variant={'ghost'}
  size={'icon'}
- onClick={copyToClipboard(textToCopy)}
+ onClick={async event => {
+ event.preventDefault();
+ await copyToClipboard(textToCopy)();
+ }}
  className={ctw(
  `h-[unset] w-[unset] p-1 opacity-80 hover:bg-transparent hover:opacity-100`,
  {

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Content.tsx

@@ -9,4 +9,5 @@ export const PaginationContent = forwardRef<HTMLUListElement, ComponentProps<'ul
  </ul>
  ),
 );
+
 PaginationContent.displayName = 'PaginationContent';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Ellipsis.tsx

@@ -13,4 +13,5 @@ export const PaginationEllipsis = ({ className, ...props }: ComponentProps<'span
  <span className="sr-only">More pages</span>
  </span>
 );
+
 PaginationEllipsis.displayName = 'PaginationEllipsis';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.First.tsx

@@ -28,4 +28,5 @@ export const PaginationFirst: FunctionComponent<
  </span>
  </PaginationLink>
 );
+
 PaginationFirst.displayName = 'PaginationFirst';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Item.tsx

@@ -9,4 +9,5 @@ export const PaginationItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(
  </li>
  ),
 );
+
 PaginationItem.displayName = 'PaginationItem';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Last.tsx

@@ -25,4 +25,5 @@ export const PaginationLast: FunctionComponent<
  <ChevronLast className="h-4 w-4" />
  </PaginationLink>
 );
+
 PaginationLast.displayName = 'PaginationLast';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Link.tsx

@@ -28,4 +28,5 @@ export const PaginationLink = ({
  {children}
  </Link>
 );
+
 PaginationLink.displayName = 'PaginationLink';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Next.tsx

@@ -28,4 +28,5 @@ export const PaginationNext: FunctionComponent<
  <ChevronRightIcon className="h-4 w-4" />
  </PaginationLink>
 );
+
 PaginationNext.displayName = 'PaginationNext';

apps/backoffice-v2/src/common/components/molecules/Pagination/Pagination.Previous.tsx

@@ -28,4 +28,5 @@ export const PaginationPrevious: FunctionComponent<
  </span>
  </PaginationLink>
 );
+
 PaginationPrevious.displayName = 'PaginationPrevious';

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

@@ -10,4 +10,5 @@ export const Pagination = ({ className, ...props }: ComponentProps<'nav'>) => (
  {...props}
  />
 );
+
 Pagination.displayName = 'Pagination';

apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/Search/Search.tsx → apps/backoffice-v2/src/common/components/molecules/Search/Search.tsx

@@ -7,15 +7,14 @@ export const Search: FunctionComponent<{
 }> = ({ value, onChange }) => {
  return (
  <div className="relative flex flex-col gap-1">
- <h4 className={'leading-0 min-h-[16px] pb-[1.6rem] text-xs font-bold'}>Search by name</h4>
  <div className="input-group flex h-[32px] items-center rounded-[44px] border border-[#E5E7EB] shadow-[0_4px_4px_0_rgba(174,174,174,0.0625)]">
  <div className={`btn btn-square btn-ghost pointer-events-none -ms-2`}>
  <LucideSearch size={13} />
  </div>
  <input
  type={'search'}
  className="input input-xs -ml-3 h-[18px] w-full !border-0 pl-0 text-xs !outline-none !ring-0 placeholder:text-base-content"
- placeholder={`Search by user name`}
+ placeholder={`Search`}
  value={value}
  onChange={e => onChange(e.target.value)}
  />

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

@@ -14,6 +14,7 @@ export const usePagination = () => {
  },
  [searchParams],
  );
+
  const onNextPage = useCallback(() => {
  const pageNumber = Number(searchParams.page);
  const nextPage = pageNumber + 1;
@@ -23,6 +24,7 @@ export const usePagination = () => {
  page: nextPage.toString(),
  });
  }, [searchParams]);
+
  const onPrevPage = useCallback(() => {
  const pageNumber = Number(searchParams.page);
  const nextPage = pageNumber - 1;

apps/backoffice-v2/src/common/utils/get-entity-type-by-filter-id/get-entity-type-by-filter-id.ts

@@ -1,6 +1,6 @@
 import { getFiltersFromQuery } from '../get-filters-from-query/get-filters-from-query';
-import { TEntityType } from 'src/domains/entities/types';
+import { TEntityType } from '@/common/hooks/useEntityType/useEntityType';
 
-export function getEntityTypeByFilterId(filterId: string): null | TEntityType {
+export const getEntityTypeByFilterId = (filterId: string): null | TEntityType => {
  return getFiltersFromQuery().find(filter => filter.id === filterId)?.entity || null;
-}
+};

apps/backoffice-v2/src/common/utils/get-filters-from-query/get-filters-from-query.ts

@@ -1,9 +1,9 @@
 import { queryClient } from '../../../lib/react-query/query-client';
 import { filtersQueryKeys } from '../../../domains/filters/query-keys';
-import { TFilter } from 'src/domains/filters/types';
+import { TFilter } from '@/domains/filters/fetchers';
 
-export function getFiltersFromQuery(): TFilter[] {
+export const getFiltersFromQuery = (): TFilter[] => {
  const filters = queryClient.getQueryData<TFilter[]>(filtersQueryKeys.list().queryKey);
 
  return filters ? filters : [];
-}
+};

apps/backoffice-v2/src/common/utils/get-severity-from-risk-score.ts

@@ -1,6 +1,12 @@
 import { Severity, TSeverity } from '@/common/types';
 
-export const getSeverityFromRiskScore = (riskScore: number): TSeverity | undefined => {
+export const getSeverityFromRiskScore = (
+ riskScore: number | null | undefined,
+): TSeverity | undefined => {
+ if (!riskScore && riskScore !== 0) {
+ return;
+ }
+
  if (riskScore <= 39) {
  return Severity.LOW;
  }

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

@@ -68,7 +68,13 @@ export const BusinessReportSchema = z
  website: data?.report.data?.websiteCompanyAnalysis?.website.url || data?.business?.website,
  }));
 
-export const BusinessReportsSchema = z.array(BusinessReportSchema);
+export const BusinessReportsSchema = z.object({
+ businessReports: z.array(BusinessReportSchema),
+ meta: z.object({
+ totalItems: z.number().nonnegative(),
+ totalPages: z.number().nonnegative(),
+ }),
+});
 
 export type TBusinessReport = z.infer<typeof BusinessReportSchema>;
 
@@ -109,13 +115,13 @@ export const fetchBusinessReports = async ({
  { encode: false },
  );
 
- const [filter, error] = await apiClient({
+ const [data, error] = await apiClient({
  endpoint: `business-reports/?${queryParams}`,
  method: Method.GET,
  schema: BusinessReportsSchema,
  });
 
- return handleZodError(error, filter);
+ return handleZodError(error, data);
 };
 
 export const fetchBusinessReportById = async ({ id }: { id: string }) => {

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

@@ -6,12 +6,14 @@ import { isString } from '@/common/utils/is-string/is-string';
 
 export const useBusinessReportsQuery = ({
  reportType,
+ search,
  page,
  pageSize,
  sortBy,
  sortDir,
 }: {
  reportType: TBusinessReportType;
+ search: string;
  page: number;
  pageSize: number;
  sortBy: string;
@@ -20,7 +22,7 @@ export const useBusinessReportsQuery = ({
  const isAuthenticated = useIsAuthenticated();
 
  return useQuery({
- ...businessReportsQueryKey.list({ reportType, page, pageSize, sortBy, sortDir }),
+ ...businessReportsQueryKey.list({ reportType, search, page, pageSize, sortBy, sortDir }),
  enabled:
  isAuthenticated &&
  isString(reportType) &&

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

@@ -9,22 +9,23 @@ import { TBusinessReportType } from '@/domains/business-reports/types';
 
 export const businessReportsQueryKey = createQueryKeys('business-reports', {
  list: ({
- reportType,
  page,
  pageSize,
  sortBy,
  sortDir,
+ ...params
  }: {
  reportType: TBusinessReportType;
+ search: string;
  page: number;
  pageSize: number;
  sortBy: string;
  sortDir: string;
  }) => ({
- queryKey: [{ reportType, page, pageSize, sortBy, sortDir }],
+ queryKey: [{ page, pageSize, sortBy, sortDir, ...params }],
  queryFn: () => {
  const data = {
- reportType,
+ ...params,
  page: {
  number: Number(page),
  size: Number(pageSize),

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

@@ -7,11 +7,15 @@ import { MerchantMonitoringTable } from '@/pages/MerchantMonitoring/components/M
 import { buttonVariants } from '@/common/components/atoms/Button/Button';
 import { Plus } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { Search } from '@/common/components/molecules/Search';
 
 export const MerchantMonitoring: FunctionComponent = () => {
  const {
  businessReports,
  isLoadingBusinessReports,
+ search,
+ onSearch,
+ totalPages,
  page,
  onPrevPage,
  onNextPage,
@@ -22,7 +26,7 @@ export const MerchantMonitoring: FunctionComponent = () => {
  } = useMerchantMonitoringLogic();
 
  return (
- <div className="flex h-full flex-col px-6 pb-6 pt-10">
+ <div className="flex h-full flex-col space-y-4 px-6 pb-6 pt-10">
  <div className={`flex justify-between`}>
  <h1 className="pb-5 text-2xl font-bold">Merchant Monitoring</h1>
  {!hideCreateMerchantMonitoringButton && (
@@ -38,22 +42,26 @@ export const MerchantMonitoring: FunctionComponent = () => {
  </Link>
  )}
  </div>
+ <div className={`flex`}>
+ <Search value={search} onChange={onSearch} />
+ </div>
  <div className="flex flex-1 flex-col gap-6 overflow-auto">
- {isNonEmptyArray(businessReports) && (
- <MerchantMonitoringTable data={businessReports ?? []} />
- )}
+ {isNonEmptyArray(businessReports) && <MerchantMonitoringTable data={businessReports} />}
  {Array.isArray(businessReports) && !businessReports.length && !isLoadingBusinessReports && (
  <NoBusinessReports />
  )}
- <div className={`mt-auto flex items-center gap-x-2`}>
- <UrlPagination
- page={page}
- onPrevPage={onPrevPage}
- onNextPage={onNextPage}
- onPaginate={onPaginate}
- isLastPage={isLastPage}
- />
- </div>
+ {!!totalPages && (
+ <div className={`mt-auto flex items-center gap-x-2`}>
+ <div className={`flex w-[12ch] text-sm`}>{`Page ${page} of ${totalPages}`}</div>
+ <UrlPagination
+ page={page}
+ onPrevPage={onPrevPage}
+ onNextPage={onNextPage}
+ onPaginate={onPaginate}
+ isLastPage={isLastPage}
+ />
+ </div>
+ )}
  </div>
  </div>
  );

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/MerchantMonitoringTable.tsx

@@ -5,7 +5,7 @@ import { columns } from '@/pages/MerchantMonitoring/components/MerchantMonitorin
 import { useMerchantMonitoringTableLogic } from '@/pages/MerchantMonitoring/components/MerchantMonitoringTable/hooks/useMerchantMonitoringTableLogic/useMerchantMonitoringTableLogic';
 
 export const MerchantMonitoringTable: FunctionComponent<{
- data: TBusinessReports;
+ data: TBusinessReports['businessReports'];
 }> = ({ data }) => {
  const { Cell } = useMerchantMonitoringTableLogic();
 

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx

@@ -9,10 +9,31 @@ import { severityToClassName } from '@/common/constants';
 import { ctw } from '@/common/utils/ctw/ctw';
 import { getSeverityFromRiskScore } from '@/common/utils/get-severity-from-risk-score';
 import { Badge } from '@ballerine/ui';
+import { CopyToClipboardButton } from '@/common/components/atoms/CopyToClipboardButton/CopyToClipboardButton';
+import { useEllipsesWithTitle } from '@/common/hooks/useEllipsesWithTitle/useEllipsesWithTitle';
 
 const columnHelper = createColumnHelper<TBusinessReport>();
 
 export const columns = [
+ columnHelper.accessor('id', {
+ 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 id = info.getValue();
+
+ return (
+ <div className={`ml-[10px] flex w-full max-w-[36ch] items-center space-x-2`}>
+ <TextWithNAFallback style={{ ...styles, width: '70%' }} ref={ref}>
+ {id}
+ </TextWithNAFallback>
+
+ <CopyToClipboardButton textToCopy={id ?? ''} />
+ </div>
+ );
+ },
+ header: 'Report ID',
+ }),
  columnHelper.accessor('createdAt', {
  cell: info => {
  const createdAt = info.getValue();

apps/backoffice-v2/src/pages/MerchantMonitoring/get-merchant-monitoring-search-schema.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { BooleanishSchema } from '@/lib/zod/utils/checkers';
 import { TBusinessReport } from '@/domains/business-reports/fetchers';
 
-export const getMerchantMonitoringSearchSchema = (authenticatedUserId: string | undefined) =>
+export const getMerchantMonitoringSearchSchema = () =>
  BaseSearchSchema.extend({
  sortBy: z
  .enum([