add config deploy rsab ayani

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

@@ -9,7 +9,7 @@ import { formatPN, formatDICOMDate, formatDICOMTime, formatNumberPrecision } fro
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 
 import './CustomizableViewportOverlay.css';
-import { studyDataForOverlayItem, instanceDataForMriOverlayItem } from './studyDataForOverlayItem';
+import { studyDataForOverlayItem } from './studyDataForOverlayItem';
 
 const EPSILON = 1e-4;
 
@@ -58,10 +58,10 @@ const studyDateItem = {
   title: 'Study date and time',
   condition: ({ referenceInstance, studyApiData }) =>
     referenceInstance?.StudyDate || studyApiData?.studyTime,
-  contentF: ({ referenceInstance, formatters: { formatDate, formatTime }, studyApiData }) => {
+  contentF: ({ referenceInstance, formatters: { formatDate }, studyApiData }) => {
     const date = referenceInstance?.StudyDate ? formatDate(referenceInstance.StudyDate) : '';
-    const time = studyApiData?.studyTime ? formatTime(studyApiData.studyTime) : '';
-    return `${date} ${time}`.trim();
+    const time = studyApiData?.studyTime ? studyApiData.studyTime : '';
+    return `${date} ${time}`;
   },
 };
 
@@ -125,230 +125,12 @@ const accessionNumberItem = {
   contentF: ({ studyApiData }) => studyApiData.accessionNumber,
 };
 
-// Tambahan untuk Overlay MRI di Top Left
-const sliceThicknessItem = {
-  id: 'SliceThickness',
-  customizationType: 'ohif.overlayItem',
-  label: 'Slice Thickness: ',
-  title: 'Slice Thickness',
-  condition: ({ mriInstanceData }) => mriInstanceData?.sliceThickness,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.sliceThickness} mm`,
-};
-const sliceLocationItem = {
-  id: 'SliceLocation',
-  customizationType: 'ohif.overlayItem',
-  label: 'Slice Loc: ',
-  title: 'Slice Location',
-  condition: ({ mriInstanceData }) => mriInstanceData?.sliceLocation,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.sliceLocation} mm`,
-};
-const sliceSpacingItem = {
-  id: 'SliceSpacing',
-  customizationType: 'ohif.overlayItem',
-  label: 'Slice Spacing: ',
-  title: 'Slice Spacing',
-  condition: ({ mriInstanceData }) => mriInstanceData?.spacingBetweenSlices,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.spacingBetweenSlices} mm`,
-};
-const phaseFieldOfViewItem = {
-  id: 'PhaseFOV',
-  customizationType: 'ohif.overlayItem',
-  label: '% Phase FOV: ',
-  title: 'Percent Phase FOV',
-  condition: ({ mriInstanceData }) => mriInstanceData?.percentPhaseFieldOfView,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.percentPhaseFieldOfView} %`,
-};
-const phaseFieldOfViewDimensionsItem = {
-  id: 'FOVDimensions',
-  customizationType: 'ohif.overlayItem',
-  label: 'FOV Dim: ',
-  title: 'Field of View Dimensions',
-  condition: ({ mriInstanceData }) => mriInstanceData?.fieldOfViewDimensions,
-  contentF: ({ mriInstanceData }) => mriInstanceData?.fieldOfViewDimensions.join(' x '),
-};
-const acquisitionMatrixItem = {
-  id: 'AcquisitionMatrix',
-  customizationType: 'ohif.overlayItem',
-  label: 'Acq Matrix: ',
-  title: 'Acquisition Matrix',
-  condition: ({ mriInstanceData }) => mriInstanceData?.acquisitionMatrix,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.acquisitionMatrix.join(' x ')}`,
-};
-const imageMatrixItem = {
-  id: 'ImageMatrix',
-  customizationType: 'ohif.overlayItem',
-  label: 'Image Matrix (RxC): ',
-  title: 'Image Matrix',
-  condition: ({ mriInstanceData }) =>
-    mriInstanceData?.imageMatrixRows && mriInstanceData?.imageMatrixColumns,
-  contentF: ({ mriInstanceData }) =>
-    `${mriInstanceData.imageMatrixRows} x ${mriInstanceData.imageMatrixColumns}`,
-};
-
-const mriTopLeftItems = {
-  id: 'cornerstoneOverlayTopLeft',
-  items: [
-    sliceThicknessItem,
-    sliceLocationItem,
-    sliceSpacingItem,
-    phaseFieldOfViewItem,
-    phaseFieldOfViewDimensionsItem,
-    acquisitionMatrixItem,
-    imageMatrixItem,
-  ],
-};
-
-// Tambahan bottom left overlay MRI
-const scanningSequenceItem = {
-  id: 'MRIScanningSequence',
-  customizationType: 'ohif.overlayItem',
-  label: 'Scanning Seq: ',
-  title: 'MRI Scanning Sequence',
-  condition: ({ mriInstanceData }) => mriInstanceData?.scanningSequence,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.scanningSequence} `,
-};
-const repetitionEchoInversionTimesItem = {
-  id: 'MRIRepetitionEchoInversionTimes',
-  customizationType: 'ohif.overlayItem',
-  label: 'TR/TE/TI: ',
-  title: 'MRI Repetition/Echo/Inversion Times',
-  condition: ({ mriInstanceData }) =>
-    mriInstanceData?.repetitionTime || mriInstanceData?.echoTime || mriInstanceData?.inversionTime,
-  contentF: ({ mriInstanceData }) => {
-    const tr = mriInstanceData?.repetitionTime || '-';
-    const te = mriInstanceData?.echoTime || '-';
-    const ti = mriInstanceData?.inversionTime || '-';
-    return `${tr}/${te}/${ti} ms`.replace(/\/+/g, ' / ').trim(); // Clean up extra slashes
-  },
-};
-const receiverCoilItem = {
-  id: 'MRIReceiverCoil',
-  customizationType: 'ohif.overlayItem',
-  label: 'Receiver Coil: ',
-  title: 'MRI Receiver Coil',
-  condition: ({ mriInstanceData }) => mriInstanceData?.receiveCoilName,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.receiveCoilName} `,
-};
-const mriScanModeItem = {
-  id: 'MRIScanMode',
-  customizationType: 'ohif.overlayItem',
-  label: 'Scan Mode: ',
-  title: 'MRI Scan Mode',
-  condition: ({ mriInstanceData }) => mriInstanceData?.mrAcquisitionType,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.mrAcquisitionType} `,
-};
-const phaseEncodingDirectionItem = {
-  id: 'MRIPhaseEncodingDirection',
-  customizationType: 'ohif.overlayItem',
-  label: 'Phase Enc Direction: ',
-  title: 'MRI Phase Encoding Direction',
-  condition: ({ mriInstanceData }) => mriInstanceData?.phaseEncodingDirection,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.phaseEncodingDirection} `,
-};
-const numOfAveragesItem = {
-  id: 'MRINumOfAverages',
-  customizationType: 'ohif.overlayItem',
-  label: 'NEX: ',
-  title: 'MRI Number of Averages',
-  condition: ({ mriInstanceData }) => mriInstanceData?.numOfAverages,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.numOfAverages} `,
-};
-const echoTrainLengthItem = {
-  id: 'MRIEchoTrainLength',
-  customizationType: 'ohif.overlayItem',
-  label: 'ETL: ',
-  title: 'MRI Echo Train Length',
-  condition: ({ mriInstanceData }) => mriInstanceData?.echoTrainLength,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.echoTrainLength} `,
-};
-const flipAngleItem = {
-  id: 'MRIFlipAngle',
-  customizationType: 'ohif.overlayItem',
-  label: 'Flip Angle: ',
-  title: 'MRI Flip Angle',
-  condition: ({ mriInstanceData }) => mriInstanceData?.flipAngle,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.flipAngle} °`,
-};
-const pixelBandwidthItem = {
-  id: 'MRIPixelBandwidth',
-  customizationType: 'ohif.overlayItem',
-  label: 'Pixel Bandwidth: ',
-  title: 'MRI Pixel Bandwidth',
-  condition: ({ mriInstanceData }) => mriInstanceData?.pixelBandwidth,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.pixelBandwidth} Hz`,
-};
-const acquisitionTimeItem = {
-  id: 'MRIAcquisitionTime',
-  customizationType: 'ohif.overlayItem',
-  label: 'Acq Time: ',
-  title: 'MRI Acquisition Time',
-  condition: ({ mriInstanceData }) => mriInstanceData?.acquisitionTime,
-  contentF: ({ referenceInstance, formatters: { formatTime }, mriInstanceData }) => {
-    const time = mriInstanceData?.acquisitionTime
-      ? formatTime(mriInstanceData.acquisitionTime)
-      : '';
-    return `${time}`.trim();
-  },
-};
-const acquisitionDurationTotalItem = {
-  id: 'MRIAcquisitionDurationTotal',
-  customizationType: 'ohif.overlayItem',
-  label: 'Total Acq Dur: ',
-  title: 'MRI Total Duration Acquisition',
-  condition: ({ mriInstanceData }) => mriInstanceData?.acquisitionDurationTotal,
-  contentF: ({ mriInstanceData }) => mriInstanceData.acquisitionDurationTotal,
-};
-const acquisitionDurationPerFrameItem = {
-  id: 'MRIAcquisitionDurationPerFrame',
-  customizationType: 'ohif.overlayItem',
-  label: 'Frame Acq Dur: ',
-  title: 'MRI Duration Acquisition Per Frame',
-  condition: ({ mriInstanceData }) => mriInstanceData?.acquisitionDurationPerFrame,
-  contentF: ({ mriInstanceData }) => mriInstanceData.acquisitionDurationPerFrame,
-};
-const parallelImagingItem = {
-  id: 'MRIParallelImaging',
-  customizationType: 'ohif.overlayItem',
-  label: 'Parallel Img: ',
-  title: 'MRI Parallel Imaging',
-  condition: ({ mriInstanceData }) => mriInstanceData?.parallelAcquisitionTechnique,
-  contentF: ({ mriInstanceData }) => `${mriInstanceData.parallelAcquisitionTechnique} `,
-};
-
-const mriBottomLeftItems = {
-  id: 'cornerstoneOverlayBottomLeft',
-  items: [
-    scanningSequenceItem,
-    repetitionEchoInversionTimesItem,
-    receiverCoilItem,
-    mriScanModeItem,
-    phaseEncodingDirectionItem,
-    numOfAveragesItem,
-    echoTrainLengthItem,
-    flipAngleItem,
-    pixelBandwidthItem,
-    acquisitionDurationTotalItem,
-    acquisitionDurationPerFrameItem,
-    parallelImagingItem,
-  ],
-};
-
 const topLeftItems = {
   id: 'cornerstoneOverlayTopLeft',
   items: [patientNameItem, mrnItem, sexAndAgeItem],
 };
 
-const topRightItems = {
-  id: 'cornerstoneOverlayTopRight',
-  items: [
-    patientNameItem,
-    mrnItem,
-    sexAndAgeItem,
-    accessionNumberItem,
-    studyDescriptionItem,
-    studyDateItem,
-  ],
-};
+const topRightItems = { id: 'cornerstoneOverlayTopRight', items: [] };
 
 const bottomLeftItems = {
   id: 'cornerstoneOverlayBottomLeft',
@@ -378,9 +160,9 @@ const bottomRightItems = {
  */
 const CornerstoneOverlay = {
   id: '@ohif/cornerstoneOverlay',
-  mriTopLeftItems,
+  topLeftItems,
   topRightItems,
-  mriBottomLeftItems,
+  bottomLeftItems,
   bottomRightItems,
 };
 
@@ -410,6 +192,23 @@ function CustomizableViewportOverlay({
   // on the individual items rather than defining individual items.
   const cornerstoneOverlay = customizationService.getCustomization('@ohif/cornerstoneOverlay');
 
+  // Historical usage defined the overlays as separate items due to lack of
+  // append functionality.  This code enables the historical usage, but
+  // the recommended functionality is to append to the default values in
+  // cornerstoneOverlay rather than defining individual items.
+  const topLeftCustomization =
+    customizationService.getCustomization('cornerstoneOverlayTopLeft') ||
+    cornerstoneOverlay?.topLeftItems;
+  const topRightCustomization =
+    customizationService.getCustomization('cornerstoneOverlayTopRight') ||
+    cornerstoneOverlay?.topRightItems;
+  const bottomLeftCustomization =
+    customizationService.getCustomization('cornerstoneOverlayBottomLeft') ||
+    cornerstoneOverlay?.bottomLeftItems;
+  const bottomRightCustomization =
+    customizationService.getCustomization('cornerstoneOverlayBottomRight') ||
+    cornerstoneOverlay?.bottomRightItems;
+
   const instanceNumber = useMemo(
     () =>
       viewportData
@@ -437,41 +236,8 @@ function CustomizableViewportOverlay({
 
   // FEAT: Edit overlays item [2025-09-04]
   const studyInstanceUID = displaySetProps?.referenceInstance?.StudyInstanceUID;
-  const seriesInstanceUID = displaySetProps?.referenceInstance?.SeriesInstanceUID;
-  const sopInstanceUID = displaySetProps?.instance?.SOPInstanceUID;
   const { studyData: studyApiData, loading, error } = studyDataForOverlayItem(studyInstanceUID);
 
-  console.debug('Reference Instance:', displaySetProps?.referenceInstance);
-  console.debug('Instance:', displaySetProps?.instance);
-
-  // Modality untuk menentukan kustomisasi overlay
-  const modality = displaySetProps?.referenceInstance?.Modality;
-
-  const { instanceData: mriInstanceData } = instanceDataForMriOverlayItem(
-    modality === 'MR' ? studyInstanceUID : null,
-    modality === 'MR' ? seriesInstanceUID : null,
-    modality === 'MR' ? sopInstanceUID : null
-  );
-
-  // Historical usage defined the overlays as separate items due to lack of
-  // append functionality.  This code enables the historical usage, but
-  // the recommended functionality is to append to the default values in
-  // cornerstoneOverlay rather than defining individual items.
-  const topLeftCustomization =
-    customizationService.getCustomization('cornerstoneOverlayTopLeft') ||
-    (modality === 'MR' ? cornerstoneOverlay?.mriTopLeftItems : cornerstoneOverlay?.topLeftItems);
-  const topRightCustomization =
-    customizationService.getCustomization('cornerstoneOverlayTopRight') ||
-    cornerstoneOverlay?.topRightItems;
-  const bottomLeftCustomization =
-    customizationService.getCustomization('cornerstoneOverlayBottomLeft') ||
-    (modality === 'MR'
-      ? cornerstoneOverlay?.mriBottomLeftItems
-      : cornerstoneOverlay?.bottomLeftItems);
-  const bottomRightCustomization =
-    customizationService.getCustomization('cornerstoneOverlayBottomRight') ||
-    cornerstoneOverlay?.bottomRightItems;
-
   /**
    * Updating the VOI when the viewport changes its voi
    */
@@ -591,7 +357,6 @@ function CustomizableViewportOverlay({
         viewportId,
         toolGroupService,
         studyApiData, // Pass the API data to the overlay items
-        mriInstanceData,
       };
 
       return (
@@ -605,7 +370,7 @@ function CustomizableViewportOverlay({
         </>
       );
     },
-    [_renderOverlayItem, displaySetProps, studyApiData, mriInstanceData]
+    [_renderOverlayItem, displaySetProps, studyApiData]
   );
 
   return (

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

@@ -143,130 +143,3 @@ export const studyDataForOverlayItem = (studyInstanceUID: string) => {
 
   return { studyData, loading, error };
 };
-interface MriOverlayInstanceData {
-  sliceThickness?: string;
-  sliceLocation?: string;
-  spacingBetweenSlices?: string;
-  percentPhaseFieldOfView?: string;
-  fieldOfViewDimensions?: string;
-  acquisitionMatrix?: string;
-  imageMatrixRows?: number;
-  imageMatrixColumns?: number;
-  scanningSequence?: string;
-  repetitionTime?: string;
-  echoTime?: string;
-  inversionTime?: string;
-  receiveCoilName?: string;
-  mrAcquisitionType?: string;
-  phaseEncodingDirection?: string;
-  numOfAverages?: string;
-  echoTrainLength?: string;
-  flipAngle?: string;
-  pixelBandwidth?: string;
-  acquisitionTime?: string;
-  acquisitionDurationTotal?: string; // in seconds
-  acquisitionDurationPerFrame?: string; // in ms
-  parallelAcquisitionTechnique?: string;
-}
-
-export const instanceDataForMriOverlayItem = (
-  studyInstanceUID: string,
-  seriesInstanceUID: string,
-  sopInstanceUID: string
-) => {
-  const [instanceData, setInstanceData] = useState<MriOverlayInstanceData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    if (!studyInstanceUID || !seriesInstanceUID || !sopInstanceUID) return;
-
-    const fetchInstanceData = async () => {
-      setLoading(true);
-      try {
-        const qidoRootUrl = getQidoRootUrl();
-        if (!qidoRootUrl) {
-          throw new Error('QIDO root URL not configured');
-        }
-
-        // MRI tags: SliceThickness(00180050), SpacingBetweenSlices(00180088),
-        // PercentPhaseFieldOfView(00180094), AcquisitionMatrix(00181310),
-        // ScanningSequence(00180020), RepetitionTime(00180080), EchoTime(00180081),
-        // InversionTime(00180082), ReceiveCoilName(00181250), MRAcquisitionType(00180023),
-        // InPlanePhaseEncodingDirection(00181312), EchoTrainLength(00180091),
-        // FlipAngle(00181314), PixelBandwidth(00180095), FrameAcquisitionDuration,
-        // ParallelAcquisitionTechnique(00189078)
-        // TODO: sesuaikan includeFields dengan kebutuahan jika nanti sudah bisa
-        // pakai includeFields di dicomweb-proxynya
-        const includeFields = [
-          '00180050',
-          '00180088',
-          '00180094',
-          '00181310',
-          '00180020',
-          '00180080',
-          '00180081',
-          '00180082',
-          '00181250',
-          '00180023',
-          '00181312',
-          '00180091',
-          '00181314',
-          '00180095',
-          '00189220',
-          '00189078',
-        ].join(',');
-
-        const url = `${qidoRootUrl}/studies/${studyInstanceUID}/series/${seriesInstanceUID}/instances/${sopInstanceUID}/metadata`;
-
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch instance data: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (data && data.length > 0) {
-          const instance = data[0];
-
-          const extractedData: MriOverlayInstanceData = {
-            sliceThickness: instance['00180050']?.Value?.[0],
-            sliceLocation: instance['00201041']?.Value?.[0],
-            spacingBetweenSlices: instance['00180088']?.Value?.[0],
-            percentPhaseFieldOfView: instance['00180094']?.Value?.[0],
-            fieldOfViewDimensions: instance['00181149']?.Value,
-            acquisitionMatrix: instance['00181310']?.Value,
-            imageMatrixRows: instance['00280010']?.Value?.[0],
-            imageMatrixColumns: instance['00280011']?.Value?.[0],
-            scanningSequence: instance['00180020']?.Value?.[0],
-            repetitionTime: instance['00180080']?.Value?.[0],
-            echoTime: instance['00180081']?.Value?.[0],
-            inversionTime: instance['00180082']?.Value?.[0],
-            receiveCoilName: instance['00181250']?.Value?.[0],
-            mrAcquisitionType: instance['00180023']?.Value?.[0],
-            phaseEncodingDirection: instance['00181312']?.Value?.[0],
-            numOfAverages: instance['00180083']?.Value?.[0],
-            echoTrainLength: instance['00180091']?.Value?.[0],
-            flipAngle: instance['00181314']?.Value?.[0],
-            pixelBandwidth: instance['00180095']?.Value?.[0],
-            acquisitionTime: instance['00080032']?.Value?.[0],
-            acquisitionDurationTotal: instance['00189073']?.Value?.[0],
-            acquisitionDurationPerFrame: instance['00189220']?.Value?.[0],
-            parallelAcquisitionTechnique: instance['00189078']?.Value?.[0],
-          };
-
-          console.debug('Extracted MRI Instance Data:', extractedData);
-          setInstanceData(extractedData);
-        }
-      } catch (err) {
-        console.error('Error fetching MRI instance data:', err);
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchInstanceData();
-  }, [studyInstanceUID, seriesInstanceUID, sopInstanceUID]);
-
-  return { instanceData, loading, error };
-};

platform/app/public/config/default_ayani.js

@@ -23,9 +23,10 @@ window.config = {
     // above, the number of requests can be go a lot higher.
     prefetch: 25,
   },
-  expertise_host: `http://192.168.0.137:8080/api/v1/radiology/expertise/image-number`, // API his3 untuk expertise radiologi
-  pacs_document_host: `152.42.173.210`, // IP ke NV di PACS Server untuk ambil pdf
-  pacs_document_port: 8585,
+  expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
+  expertise_host: `http://192.168.1.90`, // IP ke NV di PACS Server, untuk fetch expertise bawaan versi NV
+  pacs_document_host: `192.168.1.90`, // IP ke NV di PACS Server untuk ambil pdf
+  pacs_document_port: 8080,
   defaultDataSourceName: 'local-proxy',
   dataSources: [
     {
@@ -34,9 +35,8 @@ window.config = {
       configuration: {
         friendlyName: 'Static WADO Local Data',
         name: 'DCM4CHEE',
-        qidoRoot: `http://152.42.173.210:5000/rs`, // IP ke dicomweb-proxy PACS Server. URI selalu /rs
-        wadoRoot: `http://152.42.173.210:5000/rs`, // IP ke dicomweb-proxy PACS Server. URI selalu /rs
-        qidoSupportsIncludeField: false,
+        qidoRoot: `http://192.168.1.90:5000/rs`, // IP ke dicomweb-proxy PACS Server. URI selalu /rs
+        wadoRoot: `http://192.168.1.90:5000/rs`, // IP ke dicomweb-proxy PACS Server. URI selalu /rs      qidoSupportsIncludeField: false,
         supportsReject: true,
         supportsStow: true,
         imageRendering: 'wadors',

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

@@ -341,8 +341,7 @@ const SidePanel = ({
     fetchAccessionNumber();
   }, [studyInstanceUID]); // Run when studyInstanceUID changes
 
-  const [expertiseError, setExpertiseError] = useState(null);
-
+  // Ubah fungsi fetchExpertiseData menjadi dengan parameter accessionNumber
   const fetchExpertiseData = async accessionNumber => {
     try {
       // Check if window.config.expertise_host exists
@@ -357,42 +356,45 @@ const SidePanel = ({
       }
 
       setIsExpertiseLoading(true);
-      const url = `${window.config.expertise_host}/${encodeURIComponent(accessionNumber)}`;
+      const url = `${window.config.expertise_host}/nv/query.php?method=view&AccessionNumber=${encodeURIComponent(accessionNumber)}`;
+
+      // Debuggging
+      // const url = 'http://152.42.173.210/nv/testQueryBase64.php';
 
       const response = await fetch(url);
-      const resp = await response.json();
-      console.log('Expertise Resp:', resp);
+      const data = await response.json();
+      console.log('Study data:', data);
 
-      if (resp?.error) {
-        setExpertiseError(resp.message || resp.error);
-        return;
-      }
-
-      if (resp?.status_code === 200 && resp?.data) {
-        const expertiseItem = { ...resp.data };
+      if (data?.study?.expertise && data.study.expertise.length > 0) {
+        const expertiseItem = { ...data.study.expertise[0] };
 
         // Decode base64 encoded fields
+        // UTF-8 safe base64 decoding
         const decodeBase64 = str => {
           try {
+            // Step 1: decode base64 to binary
             const binary = atob(str);
+            // Step 2: create a Uint8Array from the binary string
             const bytes = new Uint8Array(binary.length);
             for (let i = 0; i < binary.length; i++) {
               bytes[i] = binary.charCodeAt(i);
             }
+            // Step 3: decode the Uint8Array as UTF-8
             return new TextDecoder('utf-8').decode(bytes);
           } catch (e) {
             console.error('Error decoding base64 string:', e);
-            return str;
+            return str; // Return original if decoding fails
           }
         };
 
         // Decode known base64 fields
-        if (expertiseItem.ekspertiseResult) {
-          expertiseItem.ekspertiseResult = decodeBase64(expertiseItem.ekspertiseResult);
+        if (expertiseItem.expertise) {
+          expertiseItem.expertise = decodeBase64(expertiseItem.expertise);
         }
         if (expertiseItem.radiologist) {
           expertiseItem.radiologist = decodeBase64(expertiseItem.radiologist);
         }
+        // Add any other fields that might be base64 encoded
 
         setExpertiseData(expertiseItem);
       }
@@ -414,45 +416,83 @@ const SidePanel = ({
       );
     }
 
-    if (expertiseError) {
-      return (
-        <ScrollArea className="border-input bg-background h-[500px] w-full rounded-md border py-2 px-3 text-base text-white">
-          <h3 className="mb-4 text-lg font-bold">Expertise</h3>
-          <p className="text-red-500">{expertiseError}</p>
-        </ScrollArea>
-      );
-    }
-
     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.orderingPhysician || '' },
+      { label: 'Dokter Pengirim', value: expertiseData.ordering_physician || '' },
       { label: 'Dokter Radiologis', value: expertiseData.radiologist || '' },
-      { label: 'Waktu Expertise', value: expertiseData.expertiseDttm || '' },
+      { 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-[800px] w-full rounded-md border py-2 px-3 text-base text-white">
-        <h3 className="mb-4 text-xl font-bold">Expertise</h3>
+      <ScrollArea className="border-input bg-background h-[500px] w-full 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-lg font-bold">{section.label}:</h5>
-            <p className="break-words">{section.value}</p>
+            <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 className="break-words">{section.value}</p>
+            )}
           </div>
         ))}
-        <div className="mb-4">
-          <h5 className="text-lg font-bold">Hasil Expertise:</h5>
-          <div
-            className="leading-6"
-            dangerouslySetInnerHTML={{ __html: expertiseData.ekspertiseResult || '' }}
-          />
-        </div>
       </ScrollArea>
     );
   };