Merge branch 'dev' into bal3343

ballerine-io · Jan 16, 2025 · 17f711e · 17f711e
2 parents eb31ef6 + 72822ae
commit 17f711e
Show file tree

Hide file tree

Showing 16 changed files with 131 additions and 132 deletions.
diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx
@@ -53,7 +53,6 @@ export const Home: FunctionComponent = () => {
         {/*    </TabsTrigger>*/}
         {/*  </TabsList>*/}
         {/*  <TabsContent value={defaultTabValue}>*/}
-        {/*    <Outlet />*/}
         {/*  </TabsContent>*/}
         {/*</Tabs>*/}
         {(isDemo || isExample) && <Outlet />}

diff --git a/...backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx b/...backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx
@@ -1,34 +1,33 @@
 import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 
 // Add these plugins to dayjs
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
-import { createColumnHelper } from '@tanstack/react-table';
 import { TBusinessReport } from '@/domains/business-reports/fetchers';
+import { createColumnHelper } from '@tanstack/react-table';
 import { titleCase } from 'string-ts';
 
+import { CopyToClipboardButton } from '@/common/components/atoms/CopyToClipboardButton/CopyToClipboardButton';
+import { IndicatorCircle } from '@/common/components/atoms/IndicatorCircle/IndicatorCircle';
+import { useEllipsesWithTitle } from '@/common/hooks/useEllipsesWithTitle/useEllipsesWithTitle';
 import { ctw } from '@/common/utils/ctw/ctw';
+import {
+  MERCHANT_REPORT_STATUSES_MAP,
+  MERCHANT_REPORT_TYPES_MAP,
+} from '@/domains/business-reports/constants';
 import { getSeverityFromRiskScore } from '@ballerine/common';
 import {
   Badge,
   CheckCircle,
+  ContentTooltip,
   severityToClassName,
   TextWithNAFallback,
   WarningFilledSvg,
 } from '@ballerine/ui';
-import { useEllipsesWithTitle } from '@/common/hooks/useEllipsesWithTitle/useEllipsesWithTitle';
-import { CopyToClipboardButton } from '@/common/components/atoms/CopyToClipboardButton/CopyToClipboardButton';
 import { Minus } from 'lucide-react';
-import {
-  MERCHANT_REPORT_STATUSES_MAP,
-  MERCHANT_REPORT_TYPES_MAP,
-} from '@/domains/business-reports/constants';
-import React from 'react';
-import { IndicatorCircle } from '@/common/components/atoms/IndicatorCircle/IndicatorCircle';
-import { TooltipTrigger, TooltipContent, Tooltip } from '@ballerine/ui';
 
 const columnHelper = createColumnHelper<TBusinessReport>();
 
@@ -93,45 +92,47 @@ export const columns = [
   }),
   columnHelper.accessor('monitoringStatus', {
     cell: ({ getValue }) => {
-      return getValue() ? (
-        <Tooltip delayDuration={300}>
-          <TooltipTrigger>
+      const value = getValue();
+
+      return (
+        <ContentTooltip
+          description={
+            <p>This merchant is {!value && 'not '}subscribed to recurring ongoing monitoring</p>
+          }
+          props={{
+            tooltipTrigger: { className: 'flex w-full justify-center' },
+            tooltipContent: { align: 'center', side: 'top' },
+          }}
+        >
+          {value ? (
             <CheckCircle
               size={18}
               className={`stroke-background`}
               containerProps={{
                 className: 'me-3 bg-success mt-px',
               }}
             />
-          </TooltipTrigger>
-          <TooltipContent>
-            This website is actively monitored for changes on a recurring basis
-          </TooltipContent>
-        </Tooltip>
-      ) : (
-        <Tooltip delayDuration={300}>
-          <TooltipTrigger>
+          ) : (
             <IndicatorCircle
               size={18}
               className={`stroke-transparent`}
               containerProps={{
                 className: 'bg-slate-500/20',
               }}
             />
-          </TooltipTrigger>
-          <TooltipContent>This website is not currently monitored for changes</TooltipContent>
-        </Tooltip>
+          )}
+        </ContentTooltip>
       );
     },
     header: () => (
-      <Tooltip delayDuration={300}>
-        <TooltipTrigger>
-          <span className={`max-w-[20ch] truncate`}>Monitored</span>
-        </TooltipTrigger>
-        <TooltipContent>
-          Indicates whether this website is being monitored for changes
-        </TooltipContent>
-      </Tooltip>
+      <ContentTooltip
+        description={<p>Indicates whether the merchant is subscribed to ongoing monitoring</p>}
+        props={{
+          tooltipContent: { align: 'center', side: 'top' },
+        }}
+      >
+        <span className={`max-w-[20ch] truncate text-sm`}>Monitored</span>
+      </ContentTooltip>
     ),
   }),
   columnHelper.accessor('reportType', {

diff --git a/apps/backoffice-v2/src/pages/Statistics/Statistics.page.tsx b/apps/backoffice-v2/src/pages/Statistics/Statistics.page.tsx
@@ -31,6 +31,7 @@ export const Statistics: FunctionComponent = () => {
           removedMerchantsCount={data.removedMerchantsCount}
         />
         <PortfolioRiskStatistics
+          userSelectedDate={date}
           riskLevelCounts={data.riskLevelCounts}
           violationCounts={data.violationCounts}
         />

diff --git a/...ce-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx b/...ce-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx
@@ -1,9 +1,13 @@
+import { buttonVariants, WarningFilledSvg } from '@ballerine/ui';
 import { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+import { Cell, Pie, PieChart } from 'recharts';
+import { titleCase } from 'string-ts';
+import { z } from 'zod';
+
 import { Card } from '@/common/components/atoms/Card/Card';
-import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
 import { CardContent } from '@/common/components/atoms/Card/Card.Content';
-import { Cell, Pie, PieChart } from 'recharts';
-import { ctw } from '@/common/utils/ctw/ctw';
+import { CardHeader } from '@/common/components/atoms/Card/Card.Header';
 import {
   Table,
   TableBody,
@@ -12,16 +16,15 @@ import {
   TableHeader,
   TableRow,
 } from '@/common/components/atoms/Table';
-import { titleCase } from 'string-ts';
-import { usePortfolioRiskStatisticsLogic } from '@/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic';
-import { z } from 'zod';
+import { ctw } from '@/common/utils/ctw/ctw';
 import { MetricsResponseSchema } from '@/domains/business-reports/hooks/queries/useBusinessReportMetricsQuery/useBusinessReportMetricsQuery';
-import { Link } from 'react-router-dom';
-import { buttonVariants, WarningFilledSvg } from '@ballerine/ui';
+import { usePortfolioRiskStatisticsLogic } from '@/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic';
 
 export const PortfolioRiskStatistics: FunctionComponent<
-  Pick<z.infer<typeof MetricsResponseSchema>, 'riskLevelCounts' | 'violationCounts'>
-> = ({ riskLevelCounts, violationCounts }) => {
+  Pick<z.infer<typeof MetricsResponseSchema>, 'riskLevelCounts' | 'violationCounts'> & {
+    userSelectedDate: Date;
+  }
+> = ({ riskLevelCounts, violationCounts, userSelectedDate }) => {
   const {
     riskLevelToFillColor,
     parent,
@@ -30,10 +33,11 @@ export const PortfolioRiskStatistics: FunctionComponent<
     filteredRiskIndicators,
     locale,
     navigate,
+    alertedReports,
     from,
     to,
-    alertedReports,
   } = usePortfolioRiskStatisticsLogic({
+    userSelectedDate,
     violationCounts,
   });
 
@@ -84,7 +88,9 @@ export const PortfolioRiskStatistics: FunctionComponent<
                           'cursor-pointer outline-none',
                         )}
                         onClick={() =>
-                          navigate(`/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}`)
+                          navigate(
+                            `/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}&from=${from}&to=${to}`,
+                          )
                         }
                       />
                     ))}
@@ -135,7 +141,7 @@ export const PortfolioRiskStatistics: FunctionComponent<
                     <TableRow key={name} className={'border-b-0 hover:bg-[unset]'}>
                       <TableCell className={ctw('pb-0 ps-0', index !== 0 && 'pt-2')}>
                         <Link
-                          to={`/${locale}/merchant-monitoring?findings[0]=${id}`}
+                          to={`/${locale}/merchant-monitoring?findings[0]=${id}&from=${from}&to=${to}`}
                           className={`block h-full cursor-pointer rounded bg-blue-200 p-1 transition-all`}
                           style={{ width: `${widths[index]}%` }}
                         >

diff --git a/...oRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx b/...oRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx
@@ -16,7 +16,8 @@ import { useBusinessReportsQuery } from '@/domains/business-reports/hooks/querie
 
 export const usePortfolioRiskStatisticsLogic = ({
   violationCounts,
-}: Pick<z.infer<typeof MetricsResponseSchema>, 'violationCounts'>) => {
+  userSelectedDate,
+}: Pick<z.infer<typeof MetricsResponseSchema>, 'violationCounts'> & { userSelectedDate: Date }) => {
   const [parent] = useAutoAnimate<HTMLTableSectionElement>();
   const [riskIndicatorsSorting, setRiskIndicatorsSorting] = useState<SortDirection>('desc');
   const onSortRiskIndicators = useCallback(
@@ -48,23 +49,14 @@ export const usePortfolioRiskStatisticsLogic = ({
   );
   const locale = useLocale();
   const navigate = useNavigate();
-  const getLast30DaysDateRange = () => {
-    const today = dayjs();
-    const thirtyDaysAgo = today.subtract(30, 'day');
 
-    return {
-      from: thirtyDaysAgo.format('YYYY-MM-DD'),
-      to: today.format('YYYY-MM-DD'),
-    };
-  };
-
-  const last30DaysDateRange = getLast30DaysDateRange();
-  const [{ from }] = useZodSearchParams(StatisticsSearchSchema);
+  const from = dayjs(userSelectedDate).format('YYYY-MM-DD');
+  const to = dayjs(userSelectedDate).add(1, 'month').format('YYYY-MM-DD');
 
   const { data: businessReports } = useBusinessReportsQuery({
     isAlert: true,
     from,
-    to: dayjs(from).add(1, 'month').format('YYYY-MM-DD'),
+    to,
   });
 
   const alertedReports = businessReports?.totalItems ?? 0;
@@ -79,8 +71,8 @@ export const usePortfolioRiskStatisticsLogic = ({
     filteredRiskIndicators,
     locale,
     navigate,
-    from: last30DaysDateRange.from,
-    to: last30DaysDateRange.to,
+    from,
+    to,
     alertedReports,
   };
 };
diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.110
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.63
+
 ## 0.3.109
 
 ### Patch Changes

diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.109",
+  "version": "0.3.110",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,7 @@
     "@ballerine/blocks": "0.2.32",
     "@ballerine/common": "^0.9.66",
     "@ballerine/workflow-browser-sdk": "0.6.85",
-    "@ballerine/ui": "0.5.62",
+    "@ballerine/ui": "0.5.63",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",

diff --git a/packages/react-pdf-toolkit/CHANGELOG.md b/packages/react-pdf-toolkit/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.63
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.63
+
 ## 1.2.62
 
 ### Patch Changes

diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.62",
+  "version": "1.2.63",
   "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.30",
-    "@ballerine/ui": "0.5.62",
+    "@ballerine/ui": "0.5.63",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.63
+
+### Patch Changes
+
+- Export ContentTooltip component
+
 ## 0.5.62
 
 ### Patch Changes

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.62",
+  "version": "0.5.63",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/ui/src/components/atoms/Chart/Chart.tsx b/packages/ui/src/components/atoms/Chart/Chart.tsx
@@ -1,6 +1,7 @@
 import { ctw } from '@/common/utils/ctw';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
+import { ValueType } from 'recharts/types/component/DefaultTooltipContent';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const;
@@ -100,6 +101,7 @@ const ChartTooltipContent = React.forwardRef<
       indicator?: 'line' | 'dot' | 'dashed';
       nameKey?: string;
       labelKey?: string;
+      valueRender?: (value: ValueType) => React.ReactNode;
     }
 >(
   (
@@ -110,6 +112,7 @@ const ChartTooltipContent = React.forwardRef<
       indicator = 'dot',
       hideLabel = false,
       hideIndicator = false,
+      valueRender,
       label,
       labelFormatter,
       labelClassName,
@@ -217,11 +220,12 @@ const ChartTooltipContent = React.forwardRef<
                           {itemConfig?.label || item.name}
                         </span>
                       </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
+                      {item.value &&
+                        (valueRender?.(item.value) ?? (
+                          <span className="text-foreground font-mono font-medium tabular-nums">
+                            {item.value.toLocaleString()}
+                          </span>
+                        ))}
                     </div>
                   </>
                 )}
@@ -291,7 +295,7 @@ const ChartLegendContent = React.forwardRef<
 ChartLegendContent.displayName = 'ChartLegend';
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+const getPayloadConfigFromPayload = (config: ChartConfig, payload: unknown, key: string) => {
   if (typeof payload !== 'object' || payload === null) {
     return undefined;
   }
@@ -314,7 +318,7 @@ function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key:
   }
 
   return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-}
+};
 
 export {
   ChartContainer,

diff --git a/packages/ui/src/components/molecules/ContentTooltip/index.ts b/packages/ui/src/components/molecules/ContentTooltip/index.ts
@@ -0,0 +1 @@
+export * from './ContentTooltip';