feat: interactive charts on home page (BAL-3246)

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @ballerine/backoffice-v2
 
+## 0.7.89
+
+### Patch Changes
+
+- Adds interactivity to the homepage charts
+- Updated dependencies
+  - @ballerine/[email protected]
+  - @ballerine/[email protected]
+
 ## 0.7.88
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.88",
+  "version": "0.7.89",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -55,8 +55,8 @@
     "@ballerine/common": "0.9.63",
     "@ballerine/workflow-browser-sdk": "0.6.82",
     "@ballerine/workflow-node-sdk": "0.6.82",
-    "@ballerine/react-pdf-toolkit": "^1.2.57",
-    "@ballerine/ui": "^0.5.57",
+    "@ballerine/react-pdf-toolkit": "^1.2.59",
+    "@ballerine/ui": "^0.5.59",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",

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

@@ -6,8 +6,11 @@ import { ISerializedSearchParams } from '@/common/hooks/useZodSearchParams/inter
 
 export const useSerializedSearchParams = (options: ISerializedSearchParams = {}) => {
   const { search, pathname, state } = useLocation();
-  const serializer = options.serializer ?? defaultSerializer;
-  const deserializer = options.deserializer ?? defaultDeserializer;
+  const {
+    serializer = defaultSerializer,
+    deserializer = defaultDeserializer,
+    replace = false,
+  } = options;
   const searchParamsAsObject = useMemo(() => deserializer(search), [deserializer, search]);
   const navigate = useNavigate();
 
@@ -18,9 +21,7 @@ export const useSerializedSearchParams = (options: ISerializedSearchParams = {})
           ...searchParamsAsObject,
           ...searchParams,
         })}`,
-        {
-          state,
-        },
+        { state, replace },
       );
     },
     [navigate, pathname, searchParamsAsObject, serializer, state],

apps/backoffice-v2/src/common/hooks/useZodSearchParams/interfaces.ts

@@ -3,4 +3,5 @@ import qs from 'qs';
 export interface ISerializedSearchParams {
   serializer?: (searchParams: Record<string, unknown>) => string;
   deserializer?: (searchParams: string) => qs.ParsedQs;
+  replace?: boolean;
 }

apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx

@@ -28,7 +28,7 @@ export const useMerchantMonitoringLogic = () => {
   const [
     { page, pageSize, sortBy, sortDir, reportType, riskLevels, statuses, from, to, findings },
     setSearchParams,
-  ] = useZodSearchParams(MerchantMonitoringSearchSchema);
+  ] = useZodSearchParams(MerchantMonitoringSearchSchema, { replace: true });
 
   const { findings: findingsOptions, isLoading: isLoadingFindings } = useFindings();
 

apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx

@@ -18,6 +18,8 @@ import { titleCase } from 'string-ts';
 import { usePortfolioRiskStatisticsLogic } from '@/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic';
 import { z } from 'zod';
 import { MetricsResponseSchema } from '@/domains/business-reports/hooks/queries/useBusinessReportMetricsQuery/useBusinessReportMetricsQuery';
+import { useNavigate } from 'react-router-dom';
+import { useLocale } from '@/common/hooks/useLocale/useLocale';
 
 export const PortfolioRiskStatistics: FunctionComponent<z.infer<typeof MetricsResponseSchema>> = ({
   riskLevelCounts,
@@ -37,6 +39,9 @@ export const PortfolioRiskStatistics: FunctionComponent<z.infer<typeof MetricsRe
     violationCounts,
   });
 
+  const locale = useLocale();
+  const navigate = useNavigate();
+
   return (
     <div>
       <h5 className={'mb-4 font-bold'}>Portfolio Risk Statistics</h5>
@@ -81,8 +86,11 @@ export const PortfolioRiskStatistics: FunctionComponent<z.infer<typeof MetricsRe
                         key={riskLevel}
                         className={ctw(
                           riskLevelToFillColor[riskLevel as keyof typeof riskLevelToFillColor],
-                          'outline-none',
+                          'cursor-pointer outline-none',
                         )}
+                        onClick={() =>
+                          navigate(`/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}`)
+                        }
                       />
                     ))}
                   </Pie>
@@ -166,21 +174,15 @@ export const PortfolioRiskStatistics: FunctionComponent<z.infer<typeof MetricsRe
                 <TableBody ref={parent}>
                   {filteredRiskIndicators.map(({ name, count }, index) => (
                     <TableRow key={name} className={'border-b-0 hover:bg-[unset]'}>
-                      <TableCell
-                        className={ctw('pb-0 ps-0', {
-                          'pt-2': index !== 0,
-                        })}
-                      >
-                        <div className={'h-full'}>
-                          <div
-                            className={`rounded bg-blue-200 p-1 transition-all`}
-                            style={{
-                              width: `${widths[index]}%`,
-                            }}
-                          >
-                            {titleCase(name ?? '')}
-                          </div>
-                          {/*<span className={'relative z-50 ms-4'}>{titleCase(name ?? '')}</span>*/}
+                      <TableCell className={ctw('pb-0 ps-0', index !== 0 && 'pt-2')}>
+                        <div
+                          className={`h-full cursor-pointer rounded bg-blue-200 p-1 transition-all`}
+                          onClick={() =>
+                            navigate(`/${locale}/merchant-monitoring?findings[0]=${name}`)
+                          }
+                          style={{ width: `${widths[index]}%` }}
+                        >
+                          {titleCase(name ?? '')}
                         </div>
                       </TableCell>
                       <TableCell className={'pb-0 ps-0'}>

apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx

@@ -21,28 +21,26 @@ export const usePortfolioRiskStatisticsLogic = ({
     [],
   );
   const totalRiskIndicators = Object.values(violationCounts).reduce((acc, curr) => acc + curr, 0);
-  const filteredRiskIndicators = useMemo(() => {
-    return Object.entries(violationCounts)
-      .map(([name, count]) => ({
-        name,
-        count,
-      }))
-      .sort((a, b) => {
-        if (riskIndicatorsSorting === 'asc') {
-          return a.count - b.count;
-        }
-
-        return b.count - a.count;
-      })
-      .slice(0, 5);
-  }, [violationCounts, riskIndicatorsSorting]);
-  const widths = useMemo(() => {
-    const maxValue = Math.max(...filteredRiskIndicators.map(item => item.count), 0);
-
-    return filteredRiskIndicators.map(item =>
-      item.count === 0 ? 0 : Math.max((item.count / maxValue) * 100, 2),
-    );
-  }, [filteredRiskIndicators]);
+  const filteredRiskIndicators = useMemo(
+    () =>
+      Object.entries(violationCounts)
+        .map(([name, count]) => ({ name, count }))
+        .sort((a, b) => (riskIndicatorsSorting === 'asc' ? a.count - b.count : b.count - a.count))
+        .slice(0, 5),
+    [violationCounts, riskIndicatorsSorting],
+  );
+  const widths = useMemo(
+    () =>
+      filteredRiskIndicators.map(item =>
+        item.count > 0
+          ? Math.max(
+              (item.count / Math.max(...filteredRiskIndicators.map(item => item.count), 0)) * 100,
+              2,
+            )
+          : 0,
+      ),
+    [filteredRiskIndicators],
+  );
 
   return {
     riskLevelToFillColor,

apps/kyb-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.105
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/[email protected]
+
 ## 0.3.104
 
 ### Patch Changes

apps/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.104",
+  "version": "0.3.105",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,7 +18,7 @@
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "^0.9.63",
     "@ballerine/workflow-browser-sdk": "0.6.82",
-    "@ballerine/ui": "0.5.58",
+    "@ballerine/ui": "0.5.59",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",

packages/react-pdf-toolkit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.59
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/[email protected]
+
 ## 1.2.58
 
 ### Patch Changes

packages/react-pdf-toolkit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.58",
+  "version": "1.2.59",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.28",
-    "@ballerine/ui": "0.5.58",
+    "@ballerine/ui": "0.5.59",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.59
+
+### Patch Changes
+
+- Adds interactivity to the homepage charts
+
 ## 0.5.58
 
 ### Patch Changes

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.58",
+  "version": "0.5.59",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx

@@ -73,42 +73,14 @@ const socialMediaMapper: {
   },
 } as const;
 
-type AdsAndSocialDataFieldProps = {
-  icon: ReactNode;
-  label: string;
-  value: string | undefined;
-};
-const AdsAndSocialDataField = ({ label, icon, value }: AdsAndSocialDataFieldProps) => (
-  <div className={ctw('flex justify-between', label !== 'Biography' && 'items-center')}>
-    <div className="flex basis-1/3 items-center gap-4 whitespace-nowrap">
-      {icon}
-      <span className="font-semibold">{label}</span>
-    </div>
-
-    <TextWithNAFallback
-      className={ctw(
-        'grow-0 basis-2/3 overflow-hidden text-ellipsis',
-        !value && 'text-gray-400',
-        label !== 'Biography' && 'whitespace-nowrap',
-      )}
-    >
-      {value}
-    </TextWithNAFallback>
-  </div>
-);
-
 const cleanLink = (link: string) => {
   if (!link || !z.string().url().safeParse(link).success) {
     return 'N/A';
   }
 
-  let { hostname, pathname } = new URL(link);
-
-  if (hostname.startsWith('www.')) {
-    hostname = hostname.slice(4);
-  }
+  const { hostname, pathname } = new URL(link);
 
-  return `${hostname}${pathname}`;
+  return `${hostname.startsWith('www.') ? hostname.slice(4) : hostname}${pathname}`;
 };
 
 // TODO: this component can be further decoupled to re-use for social media data and ads data.
@@ -148,8 +120,8 @@ export const AdsAndSocialMedia: FunctionComponent<AdsAndSocialMediaProps> = ({
               </div>
 
               {page ? (
-                <div className="flex justify-between">
-                  <div className="min-w-0 grow-0 basis-2/3">
+                <div className="flex justify-between gap-4">
+                  <div className="min-w-0 grow-0 w-2/3">
                     <div className="flex items-center">
                       <LinkIcon className="h-5 w-5 text-gray-400" />
                       <a
@@ -168,25 +140,46 @@ export const AdsAndSocialMedia: FunctionComponent<AdsAndSocialMediaProps> = ({
                       </span>
                     )}
 
-                    <div className="mt-8 space-y-4">
-                      {Object.entries(socialMediaMapper[provider].fields).map(
-                        ([field, { icon, label }]) => (
-                          <AdsAndSocialDataField
-                            key={field}
-                            icon={icon}
-                            label={label}
-                            value={rest[field as keyof typeof rest]}
-                          />
-                        ),
-                      )}
+                    <div className="flex gap-6 mt-8">
+                      <div className="flex flex-col gap-4">
+                        {Object.entries(socialMediaMapper[provider].fields).map(
+                          ([, { icon, label }]) => (
+                            <div key={label} className="flex items-center gap-4 whitespace-nowrap">
+                              {icon}
+                              <span className="font-semibold">{label}</span>
+                            </div>
+                          ),
+                        )}
+                      </div>
+
+                      <div className="flex flex-col gap-4 min-w-0">
+                        {Object.entries(socialMediaMapper[provider].fields).map(
+                          ([field, { label }]) => {
+                            const value = rest[field as keyof typeof rest];
+
+                            return (
+                              <TextWithNAFallback
+                                key={label}
+                                className={ctw(
+                                  'overflow-hidden text-ellipsis max-w-full',
+                                  !value && 'text-gray-400',
+                                  label !== 'Biography' && 'whitespace-nowrap',
+                                )}
+                              >
+                                {value}
+                              </TextWithNAFallback>
+                            );
+                          },
+                        )}
+                      </div>
                     </div>
                   </div>
 
                   <a
                     className={buttonVariants({
                       variant: 'link',
                       className:
-                        'h-[unset] cursor-pointer !p-0 !text-[#14203D] underline decoration-[1.5px]',
+                        'h-[unset] cursor-pointer !p-0 !text-[#14203D] underline decoration-[1.5px] w-1/3',
                     })}
                     href={link}
                   >