add: logo sismedika & change titile agar SAS muncul di link kirim WA

commit 18d5b6dd9a
Author: mario <dev.mario@sismedika@gmail.com>
Date:   Tue May 13 16:15:37 2025 +0700

    add: shortlink DoB auth page

commit 7cad1c5e05
Author: mario <dev.mario@sismedika@gmail.com>
Date:   Tue May 13 08:52:45 2025 +0700

    prevent patient to see Worklist

commit 7f4548e18c
Author: mario <dev.mario@sismedika@gmail.com>
Date:   Tue May 13 08:51:38 2025 +0700

    add: Login page and route

commit eaa18b8389
Author: mario <dev.mario@sismedika@gmail.com>
Date:   Fri May 9 16:40:02 2025 +0700

    edit: patch XHR Request dengan coverage lebih luas dari monkeyPatchXML

commit 86ad0b38dd
Author: padmanto <padmanto@gmail.com>
Date:   Tue Apr 29 09:42:53 2025 +0700

    Monkey Patch XMLHttpRequest -- inject bearer token and verify response

commit cb380a521d
Author: padmanto <padmanto@gmail.com>
Date:   Tue Apr 29 08:44:52 2025 +0700

    default use cloud pacs

commit 5f56d06fcd
Author: mario <mario@sismedika.com>
Date:   Sat Apr 26 23:38:18 2025 +0700

    edit ip pdf dan cloud

.gitignore

@@ -12,6 +12,7 @@ coverage/
 .yarn/
 .nx/
 addOns/yarn.lock
+**.zip
 
 # YALC (for Erik)
 .yalc
@@ -59,3 +60,5 @@ tests/playwright-report/
 
 # Dummy
 /dump
+jwt-auth-inject.json
+platform/app/dist.zip

extensions/cornerstone/src/Viewport/Overlays/studyDataForOverlayItem.ts

@@ -102,8 +102,20 @@ export const studyDataForOverlayItem = (studyInstanceUID: string) => {
       try {
         const qidoRootUrl = getQidoRootUrl();
 
+        // Get the authentication token from session storage
+        const authToken = window.sessionStorage.getItem('ohif-auth-token');
+
+        // Create request headers with Authorization if token exists
+        const headers: HeadersInit = {};
+        if (authToken) {
+          headers['Authorization'] = `Bearer ${authToken}`;
+        }
+
         const response = await fetch(
-          `${qidoRootUrl}/studies?limit=101&offset=0&fuzzymatching=false&includefield=00080050,00081030,00101010,0010004&StudyInstanceUID=${studyInstanceUID}`
+          `${qidoRootUrl}/studies?limit=101&offset=0&fuzzymatching=false&includefield=00080050,00081030,00101010,0010004&StudyInstanceUID=${studyInstanceUID}`,
+          {
+            headers,
+          }
         );
 
         if (!response.ok) {

extensions/cornerstone/src/initWADOImageLoader.js

@@ -39,6 +39,16 @@ export default function initWADOImageLoader(
         Accept: acceptHeader,
       };
 
+      // // Patch Mario:
+      const authToken = sessionStorage.getItem('ohif-auth-token');
+      if (!authToken) {
+        // window.location.href = '/login'; // Kalau mau pakae login tinggal uncomment
+        window.location.href = '/';
+        return;
+      }
+
+      xhrRequestHeaders.Authorization = `Bearer ${authToken}`;
+
       if (headers) {
         Object.assign(xhrRequestHeaders, headers);
       }

extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx

@@ -26,6 +26,15 @@ const CornerstoneViewportDownloadForm = ({
   const activeViewportElement = enabledElement?.element;
   const activeViewportEnabledElement = getEnabledElement(activeViewportElement);
 
+  // console.log('cornerstoneViewportService', cornerstoneViewportService);
+  const viewportInfo = cornerstoneViewportService.getViewportInfo("default");
+  // console.log('viewportInfo', viewportInfo);
+
+  // Retrieve StudyInstanceUID from viewportInfo
+  const StudyInstanceUID = viewportInfo.getViewportData().data[0].StudyInstanceUID;
+  const SetInstanceUID = viewportInfo.getViewportData().data[0].displaySetInstanceUID;
+  // console.log('StudyInstanceUID', StudyInstanceUID);
+  // console.log('SetInstanceUID', SetInstanceUID);
   const {
     viewportId: activeViewportId,
     renderingEngineId,
@@ -108,6 +117,10 @@ const CornerstoneViewportDownloadForm = ({
 
           const downloadCanvas = getOrCreateCanvas(element);
 
+          // Log the canvas content before conversion
+          const context = downloadCanvas.getContext('2d');
+          const imageData = context.getImageData(0, 0, downloadCanvas.width, downloadCanvas.height);
+
           const type = 'image/' + fileType;
           const dataUrl = downloadCanvas.toDataURL(type, 1);
 
@@ -214,6 +227,43 @@ const CornerstoneViewportDownloadForm = ({
     });
   };
 
+  // New function to send annotation data
+  const sendAnnotationData = async (base64Image, activeViewportElement) => {
+    try {
+      // Get the SOPInstanceUID from the active viewport
+      const activeViewportEnabledElement = getEnabledElement(activeViewportElement);
+      const imageId = activeViewportEnabledElement?.viewport?.getCurrentImageId();
+
+      if (!base64Image || !StudyInstanceUID) {
+        throw new Error('Missing required data');
+      }
+
+      const payload = {
+        image: base64Image,
+        StudyInstanceUID: StudyInstanceUID
+      };
+
+      const response = await fetch('http://host:port/one-api/tools/annotation/store', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      const data = await response.json();
+      console.log('Annotation data sent successfully:', data);
+      return data;
+    } catch (error) {
+      console.error('Error sending annotation data:', error);
+      throw error;
+    }
+  };
+
   const downloadBlob = (filename, fileType) => {
     const file = `${filename}.${fileType}`;
     const divForDownloadViewport = document.querySelector(
@@ -221,9 +271,16 @@ const CornerstoneViewportDownloadForm = ({
     );
 
     html2canvas(divForDownloadViewport).then(canvas => {
+      const dataUrl = canvas.toDataURL(fileType, 1.0);
+      const base64Image = dataUrl.split(',')[1];  // Remove prefix 'data:image/png;base64,'
+
+      // Send annotation data
+      sendAnnotationData(base64Image, activeViewportElement)
+        .catch(error => console.error('Annotation data sending failed:', error));
+
       const link = document.createElement('a');
       link.download = file;
-      link.href = canvas.toDataURL(fileType, 1.0);
+      link.href = dataUrl;
       link.click();
     });
   };

extensions/default/src/Components/SidePanelWithServices.tsx

@@ -26,6 +26,8 @@ const SidePanelWithServices = ({
   const [sidePanelOpen, setSidePanelOpen] = useState(activeTabIndexProp !== null);
   const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
   const [tabs, setTabs] = useState(tabsProp ?? panelService.getPanels(side));
+  const [studyInstanceUID, setStudyInstanceUID] = useState('');
+  const [lastActivatedStudyUID, setLastActivatedStudyUID] = useState('');
 
   const handleActiveTabIndexChange = useCallback(({ activeTabIndex }) => {
     setActiveTabIndex(activeTabIndex);
@@ -71,11 +73,35 @@ const SidePanelWithServices = ({
     const activatePanelSubscription = panelService.subscribe(
       panelService.EVENTS.ACTIVATE_PANEL,
       (activatePanelEvent: Types.ActivatePanelEvent) => {
-        if (sidePanelOpen || activatePanelEvent.forceActive) {
+        const isExpertisePanel = activatePanelEvent.panelId.includes('-exp-');
-          const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
+        const realPanelID = isExpertisePanel
-          if (tabIndex !== -1) {
+          ? activatePanelEvent.panelId.split('-exp-')[0]
-            setActiveTabIndex(tabIndex);
+          : activatePanelEvent.panelId;
-          }
+
+        // studyInstanceUID = take from activatePanelEvent.panelId after '-exp-
+        setStudyInstanceUID(isExpertisePanel ? activatePanelEvent.panelId.split('-exp-')[1] : null);
+
+        const tabIndex = tabs.findIndex(tab => tab.id === realPanelID);
+
+        if (isExpertisePanel && side === 'right') {
+         // Extract study UID from the panel ID
+         const currentStudyUID = activatePanelEvent.panelId.split('-exp-')[1];
+
+         // Toggle logic - close if same study is clicked again, open if different study
+         if (currentStudyUID === lastActivatedStudyUID && sidePanelOpen) {
+           // Same study - close panel
+           setSidePanelOpen(false);
+           setActiveTabIndex(null);
+           setLastActivatedStudyUID('');
+         } else {
+           // Different study or panel was closed - open panel with new study
+           setSidePanelOpen(true);
+           setActiveTabIndex(tabIndex !== -1 ? tabIndex : null);
+           setStudyInstanceUID(currentStudyUID);
+           setLastActivatedStudyUID(currentStudyUID);
+         }
+        } else if (tabIndex !== -1) {
+          setActiveTabIndex(tabIndex);
         }
       }
     );
@@ -83,7 +109,7 @@ const SidePanelWithServices = ({
     return () => {
       activatePanelSubscription.unsubscribe();
     };
-  }, [tabs, sidePanelOpen, panelService]);
+  }, [tabs, sidePanelOpen, panelService, lastActivatedStudyUID]);
 
   return (
     <SidePanel
@@ -95,6 +121,8 @@ const SidePanelWithServices = ({
       onClose={handleClose}
       onActiveTabIndexChange={handleActiveTabIndexChange}
       expandedWidth={expandedWidth}
+      servicesManager={servicesManager} // Pass servicesManager ke SidePanel
+      studyInstanceUID={studyInstanceUID}
     />
   );
 };

extensions/default/src/DicomWebDataSource/index.js

@@ -85,6 +85,15 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
         if (authHeaders && authHeaders.Authorization) {
           xhrRequestHeaders.Authorization = authHeaders.Authorization;
         }
+
+        const authToken = sessionStorage.getItem('ohif-auth-token');
+        if (!authToken) {
+          // window.location.href = '/login'; // Kalau mau pakae login tinggal uncomment
+          window.location.href = '/';
+          return;
+        }
+        xhrRequestHeaders.Authorization = `Bearer ${authToken}`;
+
         return xhrRequestHeaders;
       };
 

extensions/dicom-pdf/src/viewports/OHIFCornerstonePdfViewport.tsx

@@ -6,7 +6,8 @@ function OHIFCornerstonePdfViewport({ displaySets }) {
   var [url, setUrl] = useState(null);
 
   const sopInstanceUid = displaySets[0].SOPInstanceUID;
-  url = `http://128.199.154.150:8080/rid/IHERetrieveDocument?requestType=DOCUMENT&documentUID=${sopInstanceUid}&preferredContentType=application%2Fpdf`;
+  url = `${window.config.pacs_document_host}:${window.config.pacs_document_port}/rid/IHERetrieveDocument?requestType=DOCUMENT&documentUID=${sopInstanceUid}&preferredContentType=application%2Fpdf`;
+  console.log('URL PDF', url);
 
   useEffect(() => {
     document.body.addEventListener('drag', makePdfDropTarget);

platform/app/.webpack/webpack.pwa.js

@@ -25,7 +25,7 @@ const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
 const PROXY_PATH_REWRITE_FROM = process.env.PROXY_PATH_REWRITE_FROM;
 const PROXY_PATH_REWRITE_TO = process.env.PROXY_PATH_REWRITE_TO;
 
-const OHIF_PORT = Number(process.env.OHIF_PORT || 3000);
+const OHIF_PORT = Number(process.env.OHIF_PORT || 3030);
 const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
 const Dotenv = require('dotenv-webpack');
 const writePluginImportFile = require('./writePluginImportsFile.js');

platform/app/public/config/default.js

@@ -1,12 +1,16 @@
 /** @type {AppTypes.Config} */
-
+function sas_get_token() {
+  //implement token here
+  return '';
+}
 window.config = {
+  sasGetToken: sas_get_token,
   routerBasename: '/',
   // whiteLabeling: {},
   extensions: [],
   modes: [],
   customizationService: {},
-  showStudyList: true,
+  showStudyList: false,
   // some windows systems have issues with more than 3 web workers
   maxNumberOfWebWorkers: 3,
   // below flag is for performance reasons, but it might not work for all servers
@@ -23,7 +27,10 @@ window.config = {
     // above, the number of requests can be go a lot higher.
     prefetch: 25,
   },
-  expertise: true, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
+  expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
+  expertise_host: `https://devone.aplikasi.web.id/one-api/mockup/pacsmwl/Workorder/get_dummy_expertise`, //* Tambahan untuk fetch data Expertise)
+  pacs_document_host: `${window.location.hostname}`,
+  pacs_document_port: 8080,
   // filterQueryParam: false,
   // defaultDataSourceName: 'dicomweb',
   defaultDataSourceName: 'local-proxy',
@@ -38,100 +45,14 @@ window.config = {
   //   regex: /.*/,
   // },
   dataSources: [
-    {
-      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
-      sourceName: 'dicomweb',
-      configuration: {
-        friendlyName: 'AWS S3 Static wado server',
-        name: 'aws',
-        wadoUriRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
-        qidoRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
-        wadoRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
-        qidoSupportsIncludeField: false,
-        imageRendering: 'wadors',
-        thumbnailRendering: 'wadors',
-        enableStudyLazyLoad: true,
-        supportsFuzzyMatching: false,
-        supportsWildcard: true,
-        staticWado: true,
-        singlepart: 'bulkdata,video',
-        // whether the data source should use retrieveBulkData to grab metadata,
-        // and in case of relative path, what would it be relative to, options
-        // are in the series level or study level (some servers like series some study)
-        bulkDataURI: {
-          enabled: true,
-          relativeResolution: 'studies',
-          transform: url => url.replace('/pixeldata.mp4', '/rendered'),
-        },
-        omitQuotationForMultipartRequest: true,
-      },
-    },
-
-    {
-      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
-      sourceName: 'ohif2',
-      configuration: {
-        friendlyName: 'AWS S3 Static wado secondary server',
-        name: 'aws',
-        wadoUriRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
-        qidoRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
-        wadoRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
-        qidoSupportsIncludeField: false,
-        supportsReject: false,
-        imageRendering: 'wadors',
-        thumbnailRendering: 'wadors',
-        enableStudyLazyLoad: true,
-        supportsFuzzyMatching: false,
-        supportsWildcard: true,
-        staticWado: true,
-        singlepart: 'bulkdata,video',
-        // whether the data source should use retrieveBulkData to grab metadata,
-        // and in case of relative path, what would it be relative to, options
-        // are in the series level or study level (some servers like series some study)
-        bulkDataURI: {
-          enabled: true,
-          relativeResolution: 'studies',
-        },
-        omitQuotationForMultipartRequest: true,
-      },
-    },
-    {
-      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
-      sourceName: 'ohif3',
-      configuration: {
-        friendlyName: 'AWS S3 Static wado secondary server',
-        name: 'aws',
-        wadoUriRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
-        qidoRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
-        wadoRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
-        qidoSupportsIncludeField: false,
-        supportsReject: false,
-        imageRendering: 'wadors',
-        thumbnailRendering: 'wadors',
-        enableStudyLazyLoad: true,
-        supportsFuzzyMatching: false,
-        supportsWildcard: true,
-        staticWado: true,
-        singlepart: 'bulkdata,video',
-        // whether the data source should use retrieveBulkData to grab metadata,
-        // and in case of relative path, what would it be relative to, options
-        // are in the series level or study level (some servers like series some study)
-        bulkDataURI: {
-          enabled: true,
-          relativeResolution: 'studies',
-        },
-        omitQuotationForMultipartRequest: true,
-      },
-    },
-
     {
       namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
       sourceName: 'local-proxy',
       configuration: {
         friendlyName: 'Static WADO Local Data',
         name: 'DCM4CHEE',
-        qidoRoot: 'http://128.199.154.150:5000/rs',
+        qidoRoot: `http://${window.location.hostname}:5000/rs`,
-        wadoRoot: 'http://128.199.154.150:5000/rs',
+        wadoRoot: `http://${window.location.hostname}:5000/rs`,
         qidoSupportsIncludeField: false,
         supportsReject: true,
         supportsStow: true,

platform/app/public/config/google-local.js

@@ -0,0 +1,57 @@
+/** @type {AppTypes.Config} */
+window.config = {
+  routerBasename: '/',
+  pacs_document_host: `http://152.42.173.210`,
+  pacs_document_port: 8585,
+  goProxyHost: `http://152.42.173.210:5555`,
+  expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
+  expertise_host: `https://devone.aplikasi.web.id/one-api/mockup/pacsmwl/Workorder/get_dummy_expertise`, //* Tambahan untuk fetch data Expertise)
+  enableGoogleCloudAdapter: false,
+  // below flag is for performance reasons, but it might not work for all servers
+  showWarningMessageForCrossOrigin: true,
+  showCPUFallbackMessage: true,
+  showLoadingIndicator: true,
+  strictZSpacingForVolumeViewport: true,
+  extensions: [],
+  modes: [],
+  showStudyList: false,
+  // filterQueryParam: false,
+  defaultDataSourceName: 'dicomweb',
+  dataSources: [
+    {
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
+      sourceName: 'dicomweb',
+      configuration: {
+        friendlyName: 'dcmjs DICOMWeb Server',
+        name: 'GCP',
+        wadoUriRoot: `http://152.42.173.210:5555/dicomWeb`,
+        qidoRoot: `http://152.42.173.210:5555/dicomWeb`,
+        wadoRoot: `http://152.42.173.210:5555/dicomWeb`,
+        qidoSupportsIncludeField: true,
+        imageRendering: 'wadors',
+        thumbnailRendering: 'wadors',
+        enableStudyLazyLoad: true,
+        supportsFuzzyMatching: false,
+        supportsWildcard: true,
+        dicomUploadEnabled: false,
+        omitQuotationForMultipartRequest: true,
+        configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
+      },
+    },
+    {
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomjson',
+      sourceName: 'dicomjson',
+      configuration: {
+        friendlyName: 'dicom json',
+        name: 'json',
+      },
+    },
+    {
+      namespace: '@ohif/extension-default.dataSourcesModule.dicomlocal',
+      sourceName: 'dicomlocal',
+      configuration: {
+        friendlyName: 'dicom local',
+      },
+    },
+  ],
+};

platform/app/public/config/google.js

@@ -1,47 +1,20 @@
 /** @type {AppTypes.Config} */
 window.config = {
   routerBasename: '/',
+  pacs_document_host: `https://${window.location.hostname}`,
+  pacs_document_port: 8585,
+  goProxyHost: `https://${window.location.hostname}:5555`,
+  expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
+  expertise_host: `https://devone.aplikasi.web.id/one-api/mockup/pacsmwl/Workorder/get_dummy_expertise`, //* Tambahan untuk fetch data Expertise)
   enableGoogleCloudAdapter: false,
   // below flag is for performance reasons, but it might not work for all servers
   showWarningMessageForCrossOrigin: true,
   showCPUFallbackMessage: true,
   showLoadingIndicator: true,
   strictZSpacingForVolumeViewport: true,
-  // This is an array, but we'll only use the first entry for now
-  oidc: [
-    {
-      // ~ REQUIRED
-      // Authorization Server URL
-      authority: 'https://accounts.google.com',
-      client_id: '382212153306-7q39hdie4ecj0uhemkitvedo93bnvfhn.apps.googleusercontent.com',
-      redirect_uri: '/callback',
-      response_type: 'id_token token',
-      scope:
-        'email profile openid https://www.googleapis.com/auth/cloudplatformprojects.readonly https://www.googleapis.com/auth/cloud-healthcare', // email profile openid
-      // ~ OPTIONAL
-      post_logout_redirect_uri: '/logout-redirect.html',
-      revoke_uri: 'https://accounts.google.com/o/oauth2/revoke?token=',
-      automaticSilentRenew: true,
-      revokeAccessTokenOnSignout: true,
-
-      // Tambahan dari Google CLoud Secret
-      project_id: "westone-433204",
-      auth_uri: "https://accounts.google.com/o/oauth2/auth",
-      token_uri: "https://oauth2.googleapis.com/token",
-      auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs",
-      client_secret: "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",
-      redirect_uris: [
-        "http://devkedungdoro.aplikasi.web.id:3000/callback"
-      ],
-      javascript_origins: [
-        "https://devone.aplikasi.web.id",
-        "http://devkedungdoro.aplikasi.web.id:3000"
-      ]
-    },
-  ],
   extensions: [],
   modes: [],
-  showStudyList: true,
+  showStudyList: false,
   // filterQueryParam: false,
   defaultDataSourceName: 'dicomweb',
   dataSources: [
@@ -51,27 +24,18 @@ window.config = {
       configuration: {
         friendlyName: 'dcmjs DICOMWeb Server',
         name: 'GCP',
-        wadoUriRoot:
+        wadoUriRoot: `https://${window.location.hostname}:5555/dicomWeb`,
-          'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif/dicomWeb',
+        qidoRoot: `https://${window.location.hostname}:5555/dicomWeb`,
-        qidoRoot:
+        wadoRoot: `https://${window.location.hostname}:5555/dicomWeb`,
-          'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif/dicomWeb',
-        wadoRoot:
-          'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif/dicomWeb',
         qidoSupportsIncludeField: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
         enableStudyLazyLoad: true,
-        supportsFuzzyMatching: true,
+        supportsFuzzyMatching: false,
         supportsWildcard: true,
-        dicomUploadEnabled: true,
+        dicomUploadEnabled: false,
         omitQuotationForMultipartRequest: true,
         configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
-        defaultDicomStoreConfiguredItems: {
-          id: 'projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage',
-          itemType: '3',
-          name: 'ohif',
-          url: 'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif'
-        },
       },
     },
     {

platform/app/public/html-templates/index.html

@@ -14,9 +14,21 @@
       name="mobile-web-app-capable"
       content="yes"
     />
+    <meta
+      property="og:title"
+      content="SAS Dicom Viewer"
+    />
+    <meta
+      property="og:description"
+      content="Web-based Cloud DICOM Viewer by SAS for viewing and analyzing DICOM images. Powered by Open Health Imaging Foundation and Google Cloud Healthcare."
+    />
+    <meta
+      property="og:image"
+      content="<%= PUBLIC_URL %>assets/logo-sismedika.png"
+    />
     <meta
       name="application-name"
-      content="OHIF Viewer"
+      content="SAS Dicom Viewer"
     />
     <meta
       name="apple-mobile-web-app-capable"
@@ -196,7 +208,7 @@
       src="<%= PUBLIC_URL %>init-service-worker.js"
     ></script>
 
-    <title>OHIF Viewer</title>
+    <title>SAS Dicom Viewer</title>
 
     <!-- WEB FONTS -->
     <link
@@ -216,7 +228,6 @@
       }
     </script>
 
-
     <!-- EXTENSIONS -->
     <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
 
@@ -236,7 +247,6 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="react-portal"></div>
-    <div id="root">
+    <div id="root"></div>
-    </div>
   </body>
 </html>

platform/app/public/html-templates/rollbar.html

@@ -14,9 +14,21 @@
       name="mobile-web-app-capable"
       content="yes"
     />
+    <meta
+      property="og:title"
+      content="SAS Dicom Viewer"
+    />
+    <meta
+      property="og:description"
+      content="Web-based Cloud DICOM Viewer by SAS for viewing and analyzing DICOM images. Powered by Open Health Imaging Foundation and Google Cloud Healthcare."
+    />
+    <meta
+      property="og:image"
+      content="<%= PUBLIC_URL %>assets/logo-sismedika.png"
+    />
     <meta
       name="application-name"
-      content="OHIF Viewer"
+      content="SAS Dicom Viewer"
     />
     <meta
       name="apple-mobile-web-app-capable"
@@ -191,7 +203,7 @@
       src="<%= PUBLIC_URL %>init-service-worker.js"
     ></script>
 
-    <title>OHIF Viewer</title>
+    <title>SAS Dicom Viewer</title>
 
     <!-- WEB FONTS -->
     <link

platform/app/src/App.tsx

@@ -36,6 +36,49 @@ import createRoutes from './routes';
 import appInit from './appInit.js';
 import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes';
 import { ShepherdJourneyProvider } from 'react-shepherd';
+import { initializeCustomAuth } from './utils/initUserAuthenticationService';
+
+function injectAuth() {
+  console.log('---> Inject Auth');
+  const originalXHROpen = XMLHttpRequest.prototype.open;
+  const originalXHRSend = XMLHttpRequest.prototype.send;
+
+  // Kalau ingin disable study list (Role Patient)
+  // window.config.showStudyList = false;
+
+  const authToken = sessionStorage.getItem('ohif-auth-token');
+
+  XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
+    this._url = url; // Save URL if you want conditional logic
+    return originalXHROpen.apply(this, arguments);
+  };
+
+  XMLHttpRequest.prototype.send = function (body) {
+    this.setRequestHeader('Authorization', `Bearer ${authToken}`);
+
+    this.addEventListener('readystatechange', function () {
+      if (this.readyState === 4) {
+        // readyState 4 = DONE
+        try {
+          // Check for auth errors (401/403) and redirect to login if needed
+          if (this.status === 401 || this.status === 403) {
+            window.sessionStorage.removeItem('ohif-auth-token');
+            // window.location.href = '/login'; // Kalau mau pakae login tinggal uncomment
+          }
+        } catch (e) {
+          console.error('Error handling auth response:', e);
+        }
+      }
+    });
+    return originalXHRSend.apply(this, arguments);
+  };
+}
+
+// Setup token access function
+window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
+
+// Enable auth token injection
+// injectAuth();
 
 let commandsManager: CommandsManager,
   extensionManager: ExtensionManager,
@@ -108,6 +151,9 @@ function App({
     customizationService,
   } = servicesManager.services;
 
+  // Initialize our custom authentication service
+  initializeCustomAuth(userAuthenticationService);
+
   const providers = [
     [AppConfigProvider, { value: appConfigState }],
     [UserAuthenticationProvider, { service: userAuthenticationService }],

platform/app/src/routes/Login.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useUserAuthentication } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
+
+const Login = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [, authContext] = useUserAuthentication();
+
+  // Get the intended destination from URL query params or default to home
+  const searchParams = new URLSearchParams(location.search);
+  const redirectPath = searchParams.get('redirect') || '/';
+
+  // Check if already authenticated
+  useEffect(() => {
+    const token = window.sessionStorage.getItem('ohif-auth-token');
+    if (token) {
+      // Already logged in, redirect to destination
+      navigate(redirectPath, { replace: true });
+    }
+  }, [redirectPath, navigate]);
+
+  const handleLogin = async e => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      // Use window.config.goProxyHost for authentication endpoint
+      const proxyHost = window.config?.goProxyHost || `https://${window.location.hostname}:5555`;
+      const authEndpoint = `${proxyHost}/auth/login`;
+
+      // Call go-ohif-proxy login endpoint
+      const response = await fetch(authEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Login failed. Please check your credentials.');
+      }
+
+      const data = await response.json();
+
+      // Store token in sessionStorage
+      window.sessionStorage.setItem('ohif-auth-token', data.access_token);
+
+      // Decode token to extract role and user information
+      let userInfo = data.user;
+
+      // Update the auth context
+      authContext.setUser({
+        ...userInfo,
+        token: data.access_token,
+      });
+
+      // Set window.config.sasGetToken for the injectAuth function
+      if (window.config) {
+        window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
+      }
+
+      // Handle role-specific redirects if specified in response
+      if (data.redirect_url) {
+        navigate(data.redirect_url, { replace: true });
+      } else {
+        // Redirect to the original destination
+        navigate(redirectPath, { replace: true });
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+      setError(error.message || 'Failed to log in. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-black">
+      <div className="bg-popover w-88 rounded p-8 shadow-lg">
+        <div className="mb-4 flex justify-center">
+          <Icons.OHIFLogo className="h-12 text-white" />
+        </div>
+
+        <h2 className="text-md text-center font-bold text-white">Login to</h2>
+        <h1 className="mb-8 text-center text-2xl font-bold text-white">Cloud DICOM Viewer</h1>
+
+        {error && <div className="mb-4 rounded bg-red-800 px-4 py-2 text-white">{error}</div>}
+
+        <form onSubmit={handleLogin}>
+          <div className="mb-4">
+            <label className="mb-2 block text-sm font-bold text-white">Email</label>
+            <input
+              type="text"
+              className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="mb-6">
+            <label className="mb-2 block text-sm font-bold text-white">Password</label>
+            <input
+              type="password"
+              className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="flex items-center justify-center">
+            <button
+              type="submit"
+              className="focus:shadow-outline w-full rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Logging in...' : 'Log In'}
+            </button>
+          </div>
+          <p className="text-muted-foreground mt-8 text-center text-sm">
+            Powered by OHIF & Google Cloud DICOM Storage
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

platform/app/src/routes/ShortlinkLogin.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useUserAuthentication } from '@ohif/ui';
+import { Icons } from '@ohif/ui-next';
+
+const ShortlinkLogin = () => {
+  const [dob, setDob] = useState('');
+  const [shortToken, setShortToken] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [, authContext] = useUserAuthentication();
+
+  // Parse the short token from URL query params
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const token = searchParams.get('short');
+
+    if (token) {
+      setShortToken(token);
+    } else {
+      // No short token found, redirect to regular login
+      setError('No shortlink token found in URL');
+      setTimeout(() => {
+        navigate('/', { replace: true });
+      }, 3000);
+    }
+  }, [location.search, navigate]);
+
+  // Handle form submission
+  const handleSubmit = async e => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      // Use window.config.goProxyHost for authentication endpoint
+      const proxyHost = window.config?.goProxyHost || `https://${window.location.hostname}:5555`;
+      const authEndpoint = `${proxyHost}/auth/shortlink`;
+
+      // Call the shortlink authentication endpoint
+      const response = await fetch(authEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ short_token: shortToken, dob }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Authentication failed. Please check your date of birth and try again.');
+      }
+
+      const data = await response.json();
+
+      // Store token in sessionStorage
+      window.sessionStorage.setItem('ohif-auth-token', data.access_token);
+
+      // Decode token to extract user information (if available in token)
+      let userInfo = data.user;
+
+      // Update the auth context
+      authContext.setUser({
+        ...userInfo,
+        token: data.access_token,
+      });
+
+      // Set window.config.sasGetToken for the injectAuth function
+      if (window.config) {
+        window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
+      }
+
+      // Navigate to the viewer page with the authenticated patient's study
+      // The actual URL would depend on how studies are loaded in your OHIF instance
+      if (data.redirect_url) {
+        navigate(data.redirect_url, { replace: true });
+      } else {
+        // Default navigation if no specific redirect is provided
+        navigate('/', { replace: true });
+      }
+    } catch (error) {
+      console.error('Authentication error:', error);
+      setError(error.message || 'Failed to authenticate. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDateChange = e => {
+    // Format date input as YYYY-MM-DD
+    setDob(e.target.value);
+  };
+
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-black">
+      <div className="bg-popover w-88 rounded p-8 shadow-lg">
+        <div className="mb-4 flex justify-center">
+          <Icons.OHIFLogo className="h-12 text-white" />
+        </div>
+
+        <h1 className="mb-8 text-center text-2xl font-bold text-white">Cloud DICOM Viewer</h1>
+
+        {error && <div className="mb-4 rounded bg-red-800 px-4 py-2 text-white">{error}</div>}
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-6">
+            <label className="mb-2 block text-sm font-bold text-white">
+              Masukkan tanggal lahir Anda:
+            </label>
+            <input
+              type="date"
+              className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
+              value={dob}
+              onChange={handleDateChange}
+              required
+            />
+            <p className="mt-1 text-xs text-gray-400">Format: Bulan - Tanggal - Tahun</p>
+          </div>
+
+          <div className="flex items-center justify-center">
+            <button
+              type="submit"
+              className="focus:shadow-outline w-full rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
+              disabled={isLoading || !shortToken}
+            >
+              {isLoading ? 'Verifying...' : 'View'}
+            </button>
+          </div>
+          <p className="text-muted-foreground mt-8 text-center text-sm">
+            Powered by OHIF & Google Cloud DICOM Storage
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ShortlinkLogin;

platform/app/src/routes/WorkList/WorkList.tsx

@@ -85,6 +85,38 @@ function WorkList({
   const debouncedFilterValues = useDebounce(filterValues, 200);
   const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
 
+  /*
+   * Patch untuk Role checking patient gabisa akses ke study list
+   */
+  const token = window.sessionStorage.getItem('ohif-auth-token');
+  if (!token) {
+    return;
+  }
+  const decodedToken = decodeToken(token);
+
+  // Check jika 'role' = 'patient' tapi akses '/' return ke viewer
+  if (decodedToken && decodedToken.role === 'patient') {
+    const currentPath = window.location.pathname + window.location.search;
+    if (currentPath === '/') {
+      console.log(
+        'User is a patient and trying to access the root path. Redirecting to his/her home URL.'
+      );
+      window.location.href = `${decodedToken.home_url}`;
+    }
+  }
+
+  function decodeToken(token) {
+    try {
+      const payload = token.split('.')[1];
+      if (payload) {
+        return JSON.parse(atob(payload));
+      }
+    } catch (e) {
+      console.error('Error parsing JWT token', e);
+    }
+    return null;
+  }
+
   /*
    * The default sort value keep the filters synchronized with runtime conditional sorting
    * Only applied if no other sorting is specified and there are less than 101 studies
@@ -542,7 +574,7 @@ function WorkList({
       />
       <Onboarding />
       <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
-      <div className="flex flex-col h-full overflow-y-auto">
+      <div className="flex h-full flex-col overflow-y-auto">
         <ScrollArea>
           <div className="flex grow flex-col">
             <StudyListFilter
@@ -558,9 +590,7 @@ function WorkList({
               //     ? () => dataSourceConfigurationComponent()
               //     : undefined
               // }
-              getDataSourceConfigurationComponent={
+              getDataSourceConfigurationComponent={undefined}
-                undefined
-              }
             />
           </div>
           {hasStudies ? (

platform/app/src/routes/index.tsx

@@ -12,6 +12,8 @@ import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import Login from './Login';
+import ShortlinkLogin from './ShortlinkLogin';
 
 const NotFoundServer = ({
   message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
@@ -74,6 +76,15 @@ const bakedInRoutes = [
     path: '/localbasic',
     children: Local.bind(null, { modePath: 'viewer/dicomlocal' }),
   },
+  // * Custom Patch untuk Login go-ohif-proxy
+  {
+    path: '/login',
+    children: Login,
+  },
+  {
+    path: '/short-auth',
+    children: ShortlinkLogin,
+  },
 ];
 
 // NOT FOUND (404)

platform/app/src/utils/initUserAuthenticationService.js

@@ -0,0 +1,73 @@
+/**
+ * Initializes the custom authentication service for OHIF Viewer
+ * to work with go-ohif-proxy authentication
+ */
+export function initializeCustomAuth(userAuthenticationService) {
+  // Set up the authentication service with custom implementation
+  userAuthenticationService.setServiceImplementation({
+    // Custom implementation to handle unauthenticated users
+    handleUnauthenticated: () => {
+      // Check if there's a shortlink token in the URL
+      const urlParams = new URLSearchParams(window.location.search);
+      const shortToken = urlParams.get('short');
+
+      // If there's a shortlink token, redirect to the shortlink login page
+      if (shortToken) {
+        window.location.href = `/short-auth?short=${shortToken}`;
+        return null;
+      }
+
+      // Otherwise, handle as normal login flow
+      // Get the current path for redirect after login
+      const currentPath = window.location.pathname + window.location.search;
+
+      // Clear any existing tokens
+      window.sessionStorage.removeItem('ohif-auth-token');
+
+      // Redirect to login page with the redirect URL in query params
+      // window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
+      window.location.href = '/';
+
+      // Return null to prevent rendering while redirecting
+      return null;
+    },
+
+    // Custom implementation to get the authorization header
+    // di ohif3.9.1 ini sepertinya masih development
+    // getAuthorizationHeader: () => {
+    //   const token = window.sessionStorage.getItem('ohif-auth-token');
+    //   return token ? `Bearer ${token}` : undefined;
+    // },
+  });
+
+  // Set authentication as enabled
+  userAuthenticationService.set({ enabled: true });
+
+  // Check if we already have a token and set the user if we do
+  const token = window.sessionStorage.getItem('ohif-auth-token');
+  if (!token) {
+    return;
+  }
+  const decodedToken = decodeToken(token);
+
+  // Check jika 'role' = 'patient' tapi akses '/' return ke viewer
+  if (decodedToken && decodedToken.role === 'patient') {
+    const currentPath = window.location.pathname + window.location.search;
+    if (currentPath === '/') {
+      console.log('User is a patient and trying to access the root path. Redirecting to /patient.');
+      window.location.href = `${decodedToken.home_url}`;
+    }
+  }
+
+  function decodeToken(token) {
+    try {
+      const payload = token.split('.')[1];
+      if (payload) {
+        return JSON.parse(atob(payload));
+      }
+    } catch (e) {
+      console.error('Error parsing JWT token', e);
+    }
+    return null;
+  }
+}

platform/ui-next/src/components/SidePanel/SidePanel.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Icons } from '../Icons';
 import { TooltipTrigger, TooltipContent, TooltipProvider, Tooltip } from '../Tooltip';
 import { Separator } from '../Separator';
+import { ScrollArea } from '../ScrollArea';
 
 type StyleMap = {
   open: {
@@ -152,10 +153,23 @@ const SidePanel = ({
   onClose,
   expandedWidth = 280,
   onActiveTabIndexChange,
+  servicesManager, // Tambah servicesManager as a prop
+  studyInstanceUID,
 }) => {
   const [panelOpen, setPanelOpen] = useState(activeTabIndexProp !== null);
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
+  const [isExpertiseVisible, setIsExpertiseVisible] = useState(false); // New state for expertise visibility
+  const [expertiseData, setExpertiseData] = useState(null);
+  const [isExpertiseLoading, setIsExpertiseLoading] = useState(false);
+
+  const { cornerstoneViewportService } = servicesManager.services;
+  const [viewportData, setViewportData] = useState(null);
+
+  // Harusnya (viewportId), tapi karena gabutuh perubahan viewport maka dihardcode 'default'
+  // const viewportInfo = cornerstoneViewportService.getViewportInfo('default');
+  // const studyInstanceUID = viewportInfo?.viewportData?.data?.[0]?.StudyInstanceUID || '';
+
   const styleMap = createStyleMap(expandedWidth, borderSize, collapsedWidth);
   const baseStyle = createBaseStyle(expandedWidth);
   const gridAvailableWidth = expandedWidth - closeIconWidth - gridHorizontalPadding;
@@ -196,6 +210,16 @@ const SidePanel = ({
     updateActiveTabIndex(activeTabIndexProp);
   }, [activeTabIndexProp, updateActiveTabIndex]);
 
+  const toggleExpertiseVisibility = () => {
+    const shouldOpenExpertise = !isExpertiseVisible;
+    setIsExpertiseVisible(shouldOpenExpertise);
+
+    // Open the side panel if the expertise panel is being shown
+    if (shouldOpenExpertise && !panelOpen) {
+      updatePanelOpen(true);
+    }
+  };
+
   const getCloseStateComponent = () => {
     const _childComponents = Array.isArray(tabs) ? tabs : [tabs];
     return (
@@ -255,6 +279,235 @@ const SidePanel = ({
     );
   };
 
+  // Tambahkan di atas useEffect fetchExpertiseData
+  useEffect(() => {
+    const fetchAccessionNumber = async () => {
+      if (!studyInstanceUID) {
+        console.warn('No StudyInstanceUID available');
+        return;
+      }
+
+      try {
+        const qidoRootUrl = getQidoRootUrl();
+        if (!qidoRootUrl) {
+          console.warn('QIDO root URL not configured');
+          return;
+        }
+
+        // Create request headers with Authorization if token exists
+        const authToken = window.sessionStorage.getItem('ohif-auth-token');
+
+        const headers: HeadersInit = {};
+        if (authToken) {
+          headers['Authorization'] = `Bearer ${authToken}`;
+        }
+
+        // Fetch data with specific fields including Accession Number
+        const response = await fetch(
+          `${qidoRootUrl}/studies?includefield=00080050&StudyInstanceUID=${studyInstanceUID}`,
+          {
+            headers,
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch study data');
+        }
+
+        const data = await response.json();
+
+        if (data && data.length > 0) {
+          // Extract accession number from DICOM tag 00080050
+          const accessionNumber = data[0]['00080050']?.Value?.[0] || '';
+
+          // If we have an accession number, call fetchExpertiseData
+          if (accessionNumber) {
+            console.log('Found Accession Number:', accessionNumber);
+            fetchExpertiseData(accessionNumber);
+          } else {
+            console.warn('Accession number not found in study data');
+          }
+        } else {
+          console.warn('No study data returned');
+        }
+      } catch (error) {
+        console.error('Error fetching accession number:', error);
+      }
+    };
+
+    // Helper function to get QIDO root URL
+    const getQidoRootUrl = () => {
+      const { config } = window;
+      if (!config?.dataSources || !config.defaultDataSourceName) {
+        return null;
+      }
+
+      const dataSource = config.dataSources.find(
+        ds => ds.sourceName === config.defaultDataSourceName
+      );
+
+      return dataSource?.configuration?.qidoRoot;
+    };
+
+    fetchAccessionNumber();
+  }, [studyInstanceUID]); // Run when studyInstanceUID changes
+
+  // Ubah fungsi fetchExpertiseData menjadi dengan parameter accessionNumber
+  const fetchExpertiseData = async accessionNumber => {
+    try {
+      // Check if window.config.expertise_host exists
+      if (!window.config?.expertise_host) {
+        console.warn('Expertise host not configured in window.config.expertise_host');
+        return;
+      }
+
+      if (!accessionNumber) {
+        console.warn('No accession number available for expertise lookup');
+        return;
+      }
+
+      setIsExpertiseLoading(true);
+      const url = `${window.config.expertise_host}?accessionNo=${accessionNumber}`;
+
+      const response = await fetch(url);
+      const data = await response.json();
+      if (data?.status === 'OK' && data?.data) {
+        // Create expertise data in the format expected by your component
+        const formattedExpertiseData = {
+          ordering_physician: data.data.senderDoctorName,
+          radiologist: data.data.pjDoctorName,
+          expertise_dttm: data.data.expTime,
+          // Convert the expertise object to a string format that parseExpertise can handle
+          expertise: formatExpertiseToString(data.data.expertise),
+        };
+
+        setExpertiseData(formattedExpertiseData);
+      }
+    } catch (error) {
+      console.error('Error fetching expertise data:', error);
+    } finally {
+      setIsExpertiseLoading(false);
+    }
+  };
+
+  // Helper function to convert expertise object to string format
+  const formatExpertiseToString = expertiseObj => {
+    if (!expertiseObj) return '';
+
+    let result = '';
+
+    // Add each section with proper formatting
+    if (expertiseObj.Indikasi) {
+      result += `KLINIS: ${expertiseObj.Indikasi}\r\n`;
+    }
+
+    if (expertiseObj.Teknik) {
+      result += `TEKNIK: ${expertiseObj.Teknik}\r\n\r\n`;
+    }
+
+    if (expertiseObj.Deskripsi) {
+      result += `KETERANGAN:\r\n${expertiseObj.Deskripsi.replace(/\n/g, '\r\n')}\r\n\r\n`;
+    }
+
+    if (expertiseObj.Kesan) {
+      result += `KESAN: ${expertiseObj.Kesan}`;
+    }
+
+    return result;
+  };
+
+  const getExpertisePanel = () => {
+    if (side !== 'right') return null; // Only show in the right side panel
+
+    if (isExpertiseLoading) {
+      return (
+        <div className="flex h-[500px] w-[350px] items-center justify-center text-white">
+          Loading expertise data...
+        </div>
+      );
+    }
+
+    if (!expertiseData) {
+      return null;
+    }
+
+    const parseExpertise = text => {
+      if (!text) return {};
+
+      const result = {};
+      let currentSection = 'Keterangan';
+
+      // Split expertise text by lines and process each line
+      const lines = text.split('\r\n').filter(line => line.trim() !== '');
+
+      lines.forEach(line => {
+        // Check if this is a section header
+        if (line.includes(':') && !line.trim().startsWith('-')) {
+          const parts = line.split(':');
+          currentSection = parts[0].trim();
+          const value = parts[1]?.trim() || '';
+
+          if (value) {
+            if (!result[currentSection]) {
+              result[currentSection] = [];
+            }
+            result[currentSection].push(value);
+          }
+        } else if (line.toLowerCase().includes('kesan')) {
+          currentSection = 'Kesan';
+        } else {
+          // Add line to current section
+          if (!result[currentSection]) {
+            result[currentSection] = [];
+          }
+          result[currentSection].push(line.trim());
+        }
+      });
+
+      return result;
+    };
+
+    const parsedSections = parseExpertise(expertiseData.expertise);
+
+    // Create formatted data structure
+    const formattedData = [
+      { label: 'Dokter Pengirim', value: expertiseData.ordering_physician || '' },
+      { label: 'Dokter Radiologis', value: expertiseData.radiologist || '' },
+      { label: 'Waktu Expertise', value: expertiseData.expertise_dttm || '' },
+    ];
+
+    // Add additional sections from parsed text
+    Object.entries(parsedSections).forEach(([key, value]) => {
+      formattedData.push({
+        label: key,
+        value: Array.isArray(value) ? value : [value],
+      });
+    });
+
+    return (
+      <ScrollArea className="border-input bg-background h-[500px] w-[350px] rounded-md border p-2 text-sm text-white">
+        <h3 className="mb-4 text-lg font-bold">Expertise</h3>
+        {formattedData.map((section, index) => (
+          <div
+            key={index}
+            className="mb-4"
+          >
+            <h5 className="text-base font-bold">{section.label}:</h5>
+            {Array.isArray(section.value) ? (
+              <ul className="list-disc pl-6">
+                {section.value.map((item, idx) => (
+                  <li key={idx}>{item}</li>
+                ))}
+              </ul>
+            ) : (
+              <p>{section.value}</p>
+            )}
+          </div>
+        ))}
+      </ScrollArea>
+    );
+  };
+
   const getCloseIcon = () => {
     return (
       <div
@@ -386,6 +639,7 @@ const SidePanel = ({
             }
             return null;
           })}
+          {getExpertisePanel()} {/* Add expertise panel here */}
         </>
       ) : (
         <React.Fragment>{getCloseStateComponent()}</React.Fragment>
@@ -413,6 +667,8 @@ SidePanel.propTypes = {
   onClose: PropTypes.func,
   onActiveTabIndexChange: PropTypes.func,
   expandedWidth: PropTypes.number,
+  servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
+  studyInstanceUID: PropTypes.string, // Tambahkan prop studyInstanceUID
 };
 
 export { SidePanel };

platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx

@@ -62,6 +62,8 @@ const StudyBrowser = ({
               data-cy="thumbnail-list"
               viewPreset={viewPreset}
               onThumbnailContextMenu={onThumbnailContextMenu}
+              servicesManager={servicesManager} // Pass servicesManager ke Study Item
+              studyInstanceUid={studyInstanceUid}
             />
           </React.Fragment>
         );

platform/ui-next/src/components/StudyItem/StudyItem.tsx

@@ -20,7 +20,11 @@ const StudyItem = ({
   onClickUntrack,
   viewPreset = 'thumbnails',
   onThumbnailContextMenu,
+  servicesManager, // Tambah servicesManager as a prop
+  studyInstanceUid = '',
 }: withAppTypes) => {
+  // FETCHING ACCESSION NUMBER DAN EXPERTISE
+
   return (
     <Accordion
       type="single"
@@ -55,15 +59,33 @@ const StudyItem = ({
           }}
         >
           {isExpanded && displaySets && (
-            <ThumbnailList
+            <>
-              thumbnails={displaySets}
+              {/* Expertise Button */}
-              activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
+              <div
-              onThumbnailClick={onClickThumbnail}
+                className="bg-primary-dark hover:bg-primary-active mx-8 my-4 cursor-pointer rounded-lg border border-white py-3 text-center text-white"
-              onThumbnailDoubleClick={onDoubleClickThumbnail}
+                onClick={() => {
-              onClickUntrack={onClickUntrack}
+                  // Trigger the expertise panel in the right side panel (segmentation Panel)
-              viewPreset={viewPreset}
+                  servicesManager.services.panelService.activatePanel(
-              onThumbnailContextMenu={onThumbnailContextMenu}
+                    // '@ohif/extension-cornerstone.panelModule.panelSegmentation-exp',
-            />
+                    `@ohif/extension-cornerstone.panelModule.panelSegmentation-exp-${studyInstanceUid}`,
+                    true
+                  );
+                }}
+              >
+                Expertise
+              </div>
+
+              {/* Thumbnails */}
+              <ThumbnailList
+                thumbnails={displaySets}
+                activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
+                onThumbnailClick={onClickThumbnail}
+                onThumbnailDoubleClick={onDoubleClickThumbnail}
+                onClickUntrack={onClickUntrack}
+                viewPreset={viewPreset}
+                onThumbnailContextMenu={onThumbnailContextMenu}
+              />
+            </>
           )}
         </AccordionContent>
       </AccordionItem>
@@ -86,6 +108,8 @@ StudyItem.propTypes = {
   onDoubleClickThumbnail: PropTypes.func,
   onClickUntrack: PropTypes.func,
   viewPreset: PropTypes.string,
+  servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
+  studyInstanceUid: PropTypes.string.string,
 };
 
 export { StudyItem };