fix: fixed document cropping & layout fixes

apps/backoffice-v2/src/Router/Router.tsx

@@ -1,35 +1,35 @@
-import React, { FunctionComponent } from 'react';
-import { env } from '@/common/env/env';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { RootError } from '@/pages/Root/Root.error';
-import { Root } from '@/pages/Root/Root.page';
-import { SignIn } from '@/pages/SignIn/SignIn.page';
-import { Entity } from '@/pages/Entity/Entity.page';
-import { Entities } from '@/pages/Entities/Entities.page';
 import { RouteError } from '@/common/components/atoms/RouteError/RouteError';
-import { CaseManagement } from '@/pages/CaseManagement/CaseManagement.page';
-import { rootLoader } from '@/pages/Root/Root.loader';
-import { entitiesLoader } from '@/pages/Entities/Entities.loader';
-import { authenticatedLayoutLoader } from '@/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.loader';
-import { entityLoader } from '@/pages/Entity/Entity.loader';
+import { RouteErrorWithProviders } from '@/common/components/atoms/RouteError/RouteErrorWithProviders';
+import { env } from '@/common/env/env';
 import { AuthenticatedLayout } from '@/domains/auth/components/AuthenticatedLayout';
+import { authenticatedLayoutLoader } from '@/domains/auth/components/AuthenticatedLayout/AuthenticatedLayout.loader';
 import { UnauthenticatedLayout } from '@/domains/auth/components/UnauthenticatedLayout';
-import { Locale } from '@/pages/Locale/Locale.page';
 import { unauthenticatedLayoutLoader } from '@/domains/auth/components/UnauthenticatedLayout/UnauthenticatedLayout.loader';
+import { MerchantMonitoringLayout } from '@/domains/business-reports/components/MerchantMonitoringLayout/MerchantMonitoringLayout';
+import { CaseManagement } from '@/pages/CaseManagement/CaseManagement.page';
 import { Document } from '@/pages/Document/Document.page';
-import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page';
-import { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring';
-import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page';
+import { entitiesLoader } from '@/pages/Entities/Entities.loader';
+import { Entities } from '@/pages/Entities/Entities.page';
+import { entityLoader } from '@/pages/Entity/Entity.loader';
+import { Entity } from '@/pages/Entity/Entity.page';
 import { Home } from '@/pages/Home/Home.page';
-import { Statistics } from '@/pages/Statistics/Statistics.page';
-import { Workflows } from '@/pages/Workflows/Workflows.page';
+import { Locale } from '@/pages/Locale/Locale.page';
 import { MerchantMonitoring } from '@/pages/MerchantMonitoring/MerchantMonitoring.page';
-import { MerchantMonitoringCreateCheckPage } from '@/pages/MerchantMonitoringCreateCheck/MerchantMonitoringCreateCheck.page';
 import { MerchantMonitoringBusinessReport } from '@/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page';
-import { MerchantMonitoringLayout } from '@/domains/business-reports/components/MerchantMonitoringLayout/MerchantMonitoringLayout';
-import { NotFoundRedirectWithProviders } from '@/pages/NotFound/NotFoundRedirectWithProviders';
-import { RouteErrorWithProviders } from '@/common/components/atoms/RouteError/RouteErrorWithProviders';
+import { MerchantMonitoringCreateCheckPage } from '@/pages/MerchantMonitoringCreateCheck/MerchantMonitoringCreateCheck.page';
 import { MerchantMonitoringUploadMultiplePage } from '@/pages/MerchantMonitoringUploadMultiple/MerchantMonitoringUploadMultiple.page';
+import { NotFoundRedirectWithProviders } from '@/pages/NotFound/NotFoundRedirectWithProviders';
+import { RootError } from '@/pages/Root/Root.error';
+import { rootLoader } from '@/pages/Root/Root.loader';
+import { Root } from '@/pages/Root/Root.page';
+import { SignIn } from '@/pages/SignIn/SignIn.page';
+import { Statistics } from '@/pages/Statistics/Statistics.page';
+import { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring';
+import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page';
+import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page';
+import { Workflows } from '@/pages/Workflows/Workflows.page';
+import { FunctionComponent } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 const router = createBrowserRouter([
   {
@@ -176,7 +176,7 @@ const router = createBrowserRouter([
         ],
       },
       {
-        element: <Document />,
+        element: <Document isPage />,
         loader: authenticatedLayoutLoader,
         errorElement: <RouteError />,
         path: '/:locale/case-management/entities/:entityId/document/:documentId',

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

@@ -1,9 +1,9 @@
 import { FunctionComponentWithChildren } from '@/common/types';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { ctw } from '@/common/utils/ctw/ctw';
 import { isPdf } from '@/common/utils/is-pdf/is-pdf';
 import { ComponentProps } from 'react';
 import ReactCrop, { Crop } from 'react-image-crop';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
 export interface IImageEditorProps {
   onTransformed: NonNullable<ComponentProps<typeof TransformWrapper>['onTransformed']>;
@@ -28,31 +28,39 @@ export const ImageEditor: FunctionComponentWithChildren<IImageEditorProps> = ({
   return (
     <TransformWrapper onTransformed={onTransformed}>
       <TransformComponent
-        wrapperClass={`max-w-[441px]`}
-        contentClass={ctw(`overflow-x-auto`, {
+        wrapperClass={`max-w-[600px] max-h-[600px] h-full`}
+        contentClass={ctw({
           'hover:cursor-move': !isPdf(image),
         })}
         wrapperStyle={{
           width: '100%',
+          maxHeight: '600px',
           height: '100%',
+          overflow: 'hidden',
         }}
         contentStyle={{
           width: '100%',
           height: '100%',
+          display: !isPdf(image) ? 'block' : 'flex',
         }}
       >
         <ReactCrop
           crop={crop}
           onChange={onCrop}
           disabled={!isCropping || isPdf(image) || isRotatedOrTransformed}
-          className={ctw({
-            'd-full [&>div]:d-full': isPdf(image),
-            'rotate-90': imageRotation === 90,
-            'rotate-180': imageRotation === 180,
-            'rotate-[270deg]': imageRotation === 270,
+          className={ctw('h-full w-full overflow-hidden', {
+            'flex flex-row': isPdf(image),
           })}
         >
-          {children}
+          <div
+            className={ctw('flex h-full', {
+              'rotate-90': imageRotation === 90,
+              'rotate-180': imageRotation === 180,
+              'rotate-[270deg]': imageRotation === 270,
+            })}
+          >
+            {children}
+          </div>
         </ReactCrop>
       </TransformComponent>
     </TransformWrapper>

apps/backoffice-v2/src/common/components/organisms/ImageViewer/ImageViewer.SelectedImage.tsx

@@ -1,9 +1,9 @@
-import { BallerineImage } from '../../atoms/BallerineImage';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { ctw } from '../../../utils/ctw/ctw';
+import { isPdf } from '../../../utils/is-pdf/is-pdf';
+import { BallerineImage } from '../../atoms/BallerineImage';
 import { useSelectedImage } from './hooks/useSelectedImage/useSelectedImage';
 import { TSelectedImageProps } from './interfaces';
-import { isPdf } from '../../../utils/is-pdf/is-pdf';
 
 /**
  * @description To be used by {@link ImageViewer}. Uses {@link BallerineImage} to display the currently selected image with default styling.
@@ -34,7 +34,7 @@ export const SelectedImage = forwardRef<HTMLImageElement | HTMLIFrameElement, TS
     if (isPdf(selectedImage)) {
       return (
         <iframe
-          src={selectedImage?.imageUrl}
+          src={selectedImage?.imageUrl + '#toolbar=0&navpanes=0'}
           ref={ref}
           className={ctw(className, `d-full mx-auto`, {
             'h-[600px] w-[441px]': isPlaceholder,

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

@@ -1,12 +1,16 @@
-import { Case } from '../Entity/components/Case/Case';
 import { useDocumentLogic } from '@/pages/Document/hooks/useDocumentLogic/useDocumentLogic';
+import { Case } from '../Entity/components/Case/Case';
+
+interface IDocumentProps {
+  isPage?: boolean;
+}
 
-export const Document = () => {
+export const Document = ({ isPage }: IDocumentProps) => {
   const { documents, isLoading } = useDocumentLogic();
 
   if (isLoading) {
     return null;
   }
 
-  return <Case.Documents hideOpenExternalButton documents={documents} />;
+  return <Case.Documents hideOpenExternalButton documents={documents} isPage={isPage} />;
 };

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.module.css

@@ -0,0 +1,3 @@
+:global(.ReactCrop__child-wrapper) {
+  width: 100% !important;
+}

apps/backoffice-v2/src/pages/Entity/components/Case/Case.Documents.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
 import 'react-image-crop/dist/ReactCrop.css';
+import './Case.Documents.module.css';
 
 import { DownloadFile } from '@/common/components/molecules/DownloadFile/DownloadFile';
 import { ImageEditor } from '@/common/components/molecules/ImageEditor/ImageEditor';
@@ -29,6 +30,7 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
   isDocumentEditable,
   isLoadingOCR,
   hideOpenExternalButton,
+  isPage,
 }) => {
   const {
     crop,
@@ -56,7 +58,9 @@ export const Documents: FunctionComponent<IDocumentsProps> = ({
         <div
           className={ctw(
             `
-            d-full relative flex justify-center rounded-md`,
+            d-full relative flex rounded-md`,
+            { 'justify-center': isPage },
+            { 'justify-end': !isPage },
           )}
         >
           {!shouldDownload && (

apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocumentsToolbarLogic/useDocumentsToolbarLogic.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
-import { BroadcastChannel } from 'broadcast-channel';
 import { CommunicationChannel, CommunicationChannelEvent } from '@/common/enums';
+import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 import { useWorkflowByIdQuery } from '@/domains/workflows/hooks/queries/useWorkflowByIdQuery/useWorkflowByIdQuery';
+import { BroadcastChannel } from 'broadcast-channel';
 import { useParams } from 'react-router-dom';
-import { useFilterId } from '@/common/hooks/useFilterId/useFilterId';
 
 interface IUseDocumentsToolbarProps {
   imageId: string;

apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts

@@ -51,6 +51,7 @@ export interface IDocumentsProps {
   isLoadingOCR?: boolean;
   isDocumentEditable?: boolean;
   hideOpenExternalButton?: boolean;
+  isPage?: boolean;
 }
 
 export interface IFaceMatchProps extends ComponentProps<'div'> {