feat: scrollable report page (BAL-3550)

apps/backoffice-v2/src/domains/business-reports/components/BusinessReport/BusinessReport.tsx

@@ -0,0 +1,151 @@
+import { ReportSchema } from '@ballerine/common';
+import { ContentTooltip, useReportSections } from '@ballerine/ui';
+import { AlertTriangle, ArrowLeftToLine, ArrowRightToLine, Crown } from 'lucide-react';
+import { Dispatch, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react';
+import { z } from 'zod';
+
+import { Button } from '@/common/components/atoms/Button/Button';
+import { ctw } from '@/common/utils/ctw/ctw';
+
+type BusinessReportProps = {
+  report: z.infer<typeof ReportSchema>;
+};
+
+const BusinessReportSectionsObserver = ({
+  sections,
+  sectionRefs,
+  isSidebarOpen,
+  setIsSidebarOpen,
+}: {
+  sections: ReturnType<typeof useReportSections>['sections'];
+  sectionRefs: MutableRefObject<{
+    [key: string]: HTMLDivElement | null;
+  }>;
+  isSidebarOpen: boolean;
+  setIsSidebarOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const [activeSection, setActiveSection] = useState<string>(sections[0]!.id);
+
+  useEffect(() => {
+    const observerCallback: IntersectionObserverCallback = entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, {
+      threshold: 0.1, // Trigger when 10% of the section is visible
+    });
+
+    Object.values(sectionRefs.current).forEach(ref => {
+      if (ref) {
+        observer.observe(ref);
+      }
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const scrollToSection = (sectionId: string) => {
+    sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <nav
+      aria-label="Report Scroll Tracker"
+      className={ctw(
+        'sticky top-0 h-screen overflow-hidden p-4 transition-all duration-300',
+        isSidebarOpen ? 'w-60' : 'w-16', // Adjust width for collapsed state
+      )}
+    >
+      <div className="mb-4 flex items-center">
+        {isSidebarOpen && <h2 className="text-lg font-bold">Sections</h2>}
+        <Button
+          variant="secondary"
+          size="icon"
+          className="ml-auto d-7"
+          onClick={() => setIsSidebarOpen(prev => !prev)}
+        >
+          {isSidebarOpen ? (
+            <ArrowRightToLine className="d-5" />
+          ) : (
+            <ArrowLeftToLine className="d-5" />
+          )}
+        </Button>
+      </div>
+
+      <ul className="space-y-3">
+        {sections.map(section => (
+          <li
+            key={section.id}
+            className={ctw(
+              'mb-2 flex cursor-pointer items-center gap-2 text-slate-500',
+              activeSection === section.id && 'font-bold text-slate-900',
+              !isSidebarOpen && 'pl-2',
+            )}
+            onClick={() => scrollToSection(section.id)}
+          >
+            {section.Icon && <section.Icon className="d-5" />}
+            <span className={isSidebarOpen ? 'block' : 'hidden'}>
+              {section.label ?? section.title}
+            </span>
+            {section.hasViolations && isSidebarOpen && (
+              <AlertTriangle className="ml-auto inline-block fill-warning text-white d-5" />
+            )}
+            {section.isPremium && isSidebarOpen && (
+              <Crown className="ml-auto mr-0.5 inline-block text-slate-400 d-4" />
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export const BusinessReport = ({ report }: BusinessReportProps) => {
+  const { sections } = useReportSections(report);
+  const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const parentRef = useRef<HTMLDivElement | null>(null);
+
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  return (
+    <div ref={parentRef} className={`flex transition-all duration-300`}>
+      <div className={`flex-1 overflow-y-visible transition-all duration-300`}>
+        {sections.map(section => {
+          const titleContent = (
+            <div className="mb-6 mt-8 flex items-center gap-2 text-lg font-bold">
+              {section.Icon && <section.Icon className="d-6" />}
+              <span>{section.title}</span>
+            </div>
+          );
+
+          return (
+            <div
+              key={section.id}
+              id={section.id}
+              ref={el => (sectionRefs.current[section.id] = el)}
+            >
+              {section.description ? (
+                <ContentTooltip description={section.description}>{titleContent}</ContentTooltip>
+              ) : (
+                <>{titleContent}</>
+              )}
+
+              {section.Component}
+            </div>
+          );
+        })}
+      </div>
+
+      <BusinessReportSectionsObserver
+        sections={sections}
+        sectionRefs={sectionRefs}
+        isSidebarOpen={isSidebarOpen}
+        setIsSidebarOpen={setIsSidebarOpen}
+      />
+    </div>
+  );
+};

apps/backoffice-v2/src/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx

@@ -1,11 +1,10 @@
-import { TBusinessReport } from '@/domains/business-reports/fetchers';
+import { useReportTabs } from '@ballerine/ui';
 import { useCallback } from 'react';
-import { useSearchParamsByEntity } from '@/common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { useLocation } from 'react-router-dom';
-import { useReportTabs } from '@ballerine/ui';
+
+import { useSearchParamsByEntity } from '@/common/hooks/useSearchParamsByEntity/useSearchParamsByEntity';
 import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
-import { UnknownRecord } from 'type-fest';
-import { MERCHANT_REPORT_TYPES_MAP } from '@ballerine/common';
+import { TBusinessReport } from '@/domains/business-reports/fetchers';
 
 export const useWebsiteMonitoringBusinessReportTab = ({
   businessReport,

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

@@ -33,22 +33,18 @@ import { SelectItem } from '@/common/components/atoms/Select/Select.Item';
 import { SelectTrigger } from '@/common/components/atoms/Select/Select.Trigger';
 import { SelectValue } from '@/common/components/atoms/Select/Select.Value';
 import { NotesButton } from '@/common/components/molecules/NotesButton/NotesButton';
-import { ScrollArea } from '@/common/components/molecules/ScrollArea/ScrollArea';
 import { Form } from '@/common/components/organisms/Form/Form';
 import { FormControl } from '@/common/components/organisms/Form/Form.Control';
 import { FormField } from '@/common/components/organisms/Form/Form.Field';
 import { FormItem } from '@/common/components/organisms/Form/Form.Item';
 import { FormLabel } from '@/common/components/organisms/Form/Form.Label';
 import { FormMessage } from '@/common/components/organisms/Form/Form.Message';
 import { SidebarInset, SidebarProvider } from '@/common/components/organisms/Sidebar/Sidebar';
-import { Tabs } from '@/common/components/organisms/Tabs/Tabs';
-import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content';
-import { TabsList } from '@/common/components/organisms/Tabs/Tabs.List';
-import { TabsTrigger } from '@/common/components/organisms/Tabs/Tabs.Trigger';
 import { ctw } from '@/common/utils/ctw/ctw';
 import { Notes } from '@/domains/notes/Notes';
 import { useMerchantMonitoringBusinessReportLogic } from '@/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic';
 import { MERCHANT_REPORT_STATUSES_MAP } from '@ballerine/common';
+import { BusinessReport } from '@/domains/business-reports/components/BusinessReport/BusinessReport';
 
 const DialogDropdownItem = forwardRef<
   React.ElementRef<typeof DropdownMenuItem>,
@@ -87,8 +83,6 @@ export const MerchantMonitoringBusinessReport: FunctionComponent = () => {
     websiteWithNoProtocol,
     businessReport,
     statusToBadgeData,
-    tabs,
-    activeTab,
     notes,
     isNotesOpen,
     turnOngoingMonitoringOn,
@@ -158,7 +152,7 @@ export const MerchantMonitoringBusinessReport: FunctionComponent = () => {
       }}
     >
       <SidebarInset>
-        <section className="flex h-full flex-col px-6 pb-6 pt-4">
+        <section className="flex h-full flex-col px-6 pt-4">
           <div className={`flex justify-between`}>
             <Button
               variant={'ghost'}
@@ -341,41 +335,20 @@ export const MerchantMonitoringBusinessReport: FunctionComponent = () => {
               <NotesButton numberOfNotes={notes?.length} />
             </div>
           )}
-          <Tabs defaultValue={activeTab} className="w-full" key={activeTab}>
-            <TabsList className={'mb-4'}>
-              {tabs.map(tab => (
-                <TabsTrigger key={tab.value} value={tab.value} asChild>
-                  <Link
-                    to={{
-                      search: `?activeTab=${tab.value}`,
-                    }}
-                  >
-                    {tab.label}
-                  </Link>
-                </TabsTrigger>
-              ))}
-            </TabsList>
-            <ScrollArea orientation={'vertical'} className={'h-[65vh] 2xl:h-[75vh]'}>
-              {isFetchingBusinessReport ? (
-                <>
-                  <Skeleton className="h-6 w-72" />
-                  <Skeleton className="mt-6 h-4 w-40" />
+          {isFetchingBusinessReport || !businessReport ? (
+            <>
+              <Skeleton className="h-6 w-72" />
+              <Skeleton className="mt-6 h-4 w-40" />
 
-                  <div className="mt-6 flex h-[24rem] w-full flex-nowrap gap-8">
-                    <Skeleton className="w-2/3" />
-                    <Skeleton className="w-1/3" />
-                  </div>
-                  <Skeleton className="mt-6 h-[16rem]" />
-                </>
-              ) : (
-                tabs.map(tab => (
-                  <TabsContent key={tab.value} value={tab.value}>
-                    {tab.content}
-                  </TabsContent>
-                ))
-              )}
-            </ScrollArea>
-          </Tabs>
+              <div className="mt-6 flex h-[24rem] w-full flex-nowrap gap-8">
+                <Skeleton className="w-2/3" />
+                <Skeleton className="w-1/3" />
+              </div>
+              <Skeleton className="mt-6 h-[16rem]" />
+            </>
+          ) : (
+            <BusinessReport report={businessReport} />
+          )}
         </section>
       </SidebarInset>
       <Notes

apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx

@@ -1,27 +1,22 @@
-import { ParsedBooleanSchema, useReportTabs } from '@ballerine/ui';
+import { ParsedBooleanSchema } from '@ballerine/ui';
 import { t } from 'i18next';
 import { capitalize } from 'lodash-es';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
+import { useLocale } from '@/common/hooks/useLocale/useLocale';
 import { useToggle } from '@/common/hooks/useToggle/useToggle';
 import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSearchParams';
 import { safeUrl } from '@/common/utils/safe-url/safe-url';
-import { RiskIndicatorLink } from '@/domains/business-reports/components/RiskIndicatorLink/RiskIndicatorLink';
 import { useBusinessReportByIdQuery } from '@/domains/business-reports/hooks/queries/useBusinessReportByIdQuery/useBusinessReportByIdQuery';
 import { useCreateNoteMutation } from '@/domains/notes/hooks/mutations/useCreateNoteMutation/useCreateNoteMutation';
 import { useNotesByNoteable } from '@/domains/notes/hooks/queries/useNotesByNoteable/useNotesByNoteable';
 import { useToggleMonitoringMutation } from '@/pages/MerchantMonitoringBusinessReport/hooks/useToggleMonitoringMutation/useToggleMonitoringMutation';
-import {
-  isObject,
-  MERCHANT_REPORT_STATUSES_MAP,
-  MERCHANT_REPORT_TYPES_MAP,
-} from '@ballerine/common';
+import { isObject, MERCHANT_REPORT_STATUSES_MAP } from '@ballerine/common';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLocale } from '@/common/hooks/useLocale/useLocale';
 
 const ZodDeboardingSchema = z
   .object({
@@ -154,27 +149,13 @@ export const useMerchantMonitoringBusinessReportLogic = () => {
     },
   });
 
-  const { tabs } = useReportTabs({
-    report: businessReport ?? {},
-    Link: RiskIndicatorLink,
-  });
-
-  const tabsValues = useMemo(() => tabs.map(tab => tab.value), [tabs]);
-
   const MerchantMonitoringBusinessReportSearchSchema = z.object({
     isNotesOpen: ParsedBooleanSchema.catch(false),
-    activeTab: z
-      .enum(
-        // @ts-expect-error - zod doesn't like we are using `Array.prototype.map`
-        tabsValues,
-      )
-      .catch(tabsValues[0]!),
   });
 
-  const [{ activeTab, isNotesOpen }] = useZodSearchParams(
-    MerchantMonitoringBusinessReportSearchSchema,
-    { replace: true },
-  );
+  const [{ isNotesOpen }] = useZodSearchParams(MerchantMonitoringBusinessReportSearchSchema, {
+    replace: true,
+  });
 
   const navigate = useNavigate();
 
@@ -201,9 +182,7 @@ export const useMerchantMonitoringBusinessReportLogic = () => {
     websiteWithNoProtocol,
     businessReport,
     statusToBadgeData,
-    tabs,
     notes,
-    activeTab,
     isNotesOpen,
     turnOngoingMonitoringOn: turnOnMonitoringMutation.mutate,
     isDeboardModalOpen,

packages/ui/src/components/atoms/Chart/Chart.tsx

@@ -48,7 +48,19 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={ctw(
-          '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke="#ccc"]]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke="#ccc"]]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke="#ccc"]]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke="#fff"]]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke="#fff"]]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none',
+          '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',
+          '[&_.recharts-cartesian-grid_line[stroke="#ccc"]]:stroke-border/50',
+          '[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',
+          '[&_.recharts-polar-grid_[stroke="#ccc"]]:stroke-border',
+          '[&_.recharts-radial-bar-background-sector]:fill-muted',
+          '[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted',
+          '[&_.recharts-reference-line_[stroke="#ccc"]]:stroke-border',
+          '[&_.recharts-dot[stroke="#fff"]]:stroke-transparent',
+          '[&_.recharts-layer]:outline-none',
+          '[&_.recharts-sector[stroke="#fff"]]:stroke-transparent',
+          '[&_.recharts-sector]:outline-none',
+          '[&_.recharts-surface]:outline-none',
+          'flex aspect-video justify-center text-xs',
           className,
         )}
         {...props}

packages/ui/src/components/molecules/RiskIndicator/RiskIndicator.tsx

@@ -1,13 +1,14 @@
-import { CheckCircle } from '@/components/atoms/CheckCircle/CheckCircle';
-import React, { FunctionComponent } from 'react';
 import {
   isNonEmptyArray,
   RISK_INDICATOR_RISK_LEVELS_MAP,
   RiskIndicatorSchema,
 } from '@ballerine/common';
+import { z } from 'zod';
+import { FunctionComponent } from 'react';
+
 import { ctw } from '@/common';
+import { CheckCircle } from '@/components/atoms/CheckCircle/CheckCircle';
 import { WarningFilledSvg } from '@/components/atoms/WarningFilledSvg/WarningFilledSvg';
-import { z } from 'zod';
 
 export const RiskIndicator = ({
   title,
@@ -16,17 +17,15 @@ export const RiskIndicator = ({
   Link,
 }: {
   title: string;
-  search: string | undefined;
-  riskIndicators: z.infer<typeof RiskIndicatorSchema>[] | null;
-  Link: FunctionComponent<{
-    search: string;
-  }>;
+  search?: string;
+  riskIndicators: Array<z.infer<typeof RiskIndicatorSchema>> | null;
+  Link?: FunctionComponent<{ search: string }>;
 }) => {
   return (
     <div>
       <h3 className="mb-3 space-x-4 font-bold text-slate-500">
         <span>{title}</span>
-        {search && <Link search={search} />}
+        {search && Link && <Link search={search} />}
       </h3>
       <ul className="list-inside list-disc">
         {!!riskIndicators &&