hotfix lupa belum hapus hardcode

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 } from './studyDataForOverlayItem';
+import { studyDataForOverlayItem, instanceDataForMriOverlayItem } 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 }, studyApiData }) => {
+  contentF: ({ referenceInstance, formatters: { formatDate, formatTime }, studyApiData }) => {
     const date = referenceInstance?.StudyDate ? formatDate(referenceInstance.StudyDate) : '';
-    const time = studyApiData?.studyTime ? studyApiData.studyTime : '';
-    return `${date} ${time}`;
+    const time = studyApiData?.studyTime ? formatTime(studyApiData.studyTime) : '';
+    return `${date} ${time}`.trim();
   },
 };
 
@@ -125,12 +125,230 @@ 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: [] };
+const topRightItems = {
+  id: 'cornerstoneOverlayTopRight',
+  items: [
+    patientNameItem,
+    mrnItem,
+    sexAndAgeItem,
+    accessionNumberItem,
+    studyDescriptionItem,
+    studyDateItem,
+  ],
+};
 
 const bottomLeftItems = {
   id: 'cornerstoneOverlayBottomLeft',
@@ -160,9 +378,9 @@ const bottomRightItems = {
  */
 const CornerstoneOverlay = {
   id: '@ohif/cornerstoneOverlay',
-  topLeftItems,
+  mriTopLeftItems,
   topRightItems,
-  bottomLeftItems,
+  mriBottomLeftItems,
   bottomRightItems,
 };
 
@@ -192,23 +410,6 @@ 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
@@ -236,8 +437,41 @@ 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
    */
@@ -357,6 +591,7 @@ function CustomizableViewportOverlay({
         viewportId,
         toolGroupService,
         studyApiData, // Pass the API data to the overlay items
+        mriInstanceData,
       };
 
       return (
@@ -370,7 +605,7 @@ function CustomizableViewportOverlay({
         </>
       );
     },
-    [_renderOverlayItem, displaySetProps, studyApiData]
+    [_renderOverlayItem, displaySetProps, studyApiData, mriInstanceData]
   );
 
   return (

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

@@ -143,3 +143,130 @@ 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_phkg.js

@@ -23,10 +23,9 @@ window.config = {
     // above, the number of requests can be go a lot higher.
     prefetch: 25,
   },
-  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,
+  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,
   defaultDataSourceName: 'local-proxy',
   dataSources: [
     {
@@ -35,8 +34,9 @@ window.config = {
       configuration: {
         friendlyName: 'Static WADO Local Data',
         name: 'DCM4CHEE',
-        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,
+        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,
         supportsReject: true,
         supportsStow: true,
         imageRendering: 'wadors',

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

@@ -341,7 +341,8 @@ const SidePanel = ({
     fetchAccessionNumber();
   }, [studyInstanceUID]); // Run when studyInstanceUID changes
 
-  // Ubah fungsi fetchExpertiseData menjadi dengan parameter accessionNumber
+  const [expertiseError, setExpertiseError] = useState(null);
+
   const fetchExpertiseData = async accessionNumber => {
     try {
       // Check if window.config.expertise_host exists
@@ -356,45 +357,42 @@ const SidePanel = ({
       }
 
       setIsExpertiseLoading(true);
-      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 url = `${window.config.expertise_host}/${encodeURIComponent(accessionNumber)}`;
 
       const response = await fetch(url);
-      const data = await response.json();
-      console.log('Study data:', data);
+      const resp = await response.json();
+      console.log('Expertise Resp:', resp);
 
-      if (data?.study?.expertise && data.study.expertise.length > 0) {
-        const expertiseItem = { ...data.study.expertise[0] };
+      if (resp?.error) {
+        setExpertiseError(resp.message || resp.error);
+        return;
+      }
+
+      if (resp?.status_code === 200 && resp?.data) {
+        const expertiseItem = { ...resp.data };
 
         // 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 original if decoding fails
+            return str;
           }
         };
 
         // Decode known base64 fields
-        if (expertiseItem.expertise) {
-          expertiseItem.expertise = decodeBase64(expertiseItem.expertise);
+        if (expertiseItem.ekspertiseResult) {
+          expertiseItem.ekspertiseResult = decodeBase64(expertiseItem.ekspertiseResult);
         }
         if (expertiseItem.radiologist) {
           expertiseItem.radiologist = decodeBase64(expertiseItem.radiologist);
         }
-        // Add any other fields that might be base64 encoded
 
         setExpertiseData(expertiseItem);
       }
@@ -416,83 +414,45 @@ 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.ordering_physician || '' },
+      { label: 'Dokter Pengirim', value: expertiseData.orderingPhysician || '' },
       { label: 'Dokter Radiologis', value: expertiseData.radiologist || '' },
-      { label: 'Waktu Expertise', value: expertiseData.expertise_dttm || '' },
+      { label: 'Waktu Expertise', value: expertiseData.expertiseDttm || '' },
     ];
 
-    // 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-full rounded-md border p-2 text-sm text-white">
-        <h3 className="mb-4 text-lg font-bold">Expertise</h3>
+      <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>
         {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 className="break-words">{section.value}</p>
-            )}
+            <h5 className="text-lg font-bold">{section.label}:</h5>
+            <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>
     );
   };