add expertise on viewport

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

@@ -23,3 +23,12 @@ line, it will be truncated with ellipsis in the end.
 .viewport-overlay.right-viewport-scrollbar .flex.flex-row {
   justify-content: flex-end;
 }
+
+.expertise-overlay {
+  max-width: 300px; /* Atur sesuai kebutuhan */
+  word-wrap: break-word;
+  white-space: pre-line; /* Untuk mempertahankan format newline dari API */
+  background: rgba(0, 0, 0, 0.7); /* Background semi-transparan */
+  font-size: 12px;
+  line-height: 1.2;
+}

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

@@ -36,6 +36,11 @@ interface OverlayItemProps {
   };
   instanceNumber?: number;
   scale?: number;
+  displaySetProps?: {
+    referenceInstance?: {
+      StudyInstanceUID?: string;
+    };
+  };
 }
 
 const OverlayItemComponents = {
@@ -43,6 +48,7 @@ const OverlayItemComponents = {
   'ohif.overlayItem.windowLevel': VOIOverlayItem,
   'ohif.overlayItem.zoomLevel': ZoomOverlayItem,
   'ohif.overlayItem.instanceNumber': InstanceNumberOverlayItem,
+  'ohif.overlayItem.expertise': ExpertiseOverlayItem,
 };
 
 const studyDateItem = {
@@ -76,6 +82,10 @@ const topRightItems = { id: 'cornerstoneOverlayTopRight', items: [] };
 const bottomLeftItems = {
   id: 'cornerstoneOverlayBottomLeft',
   items: [
+    {
+      id: 'Expertise',
+      customizationType: 'ohif.overlayItem.expertise',
+    },
     {
       id: 'WindowLevel',
       customizationType: 'ohif.overlayItem.windowLevel',
@@ -177,6 +187,7 @@ function CustomizableViewportOverlay({
     }
     const [displaySet] = displaySets;
     const { instances, instance: referenceInstance } = displaySet;
+
     return {
       displaySets,
       displaySet,
@@ -256,6 +267,7 @@ function CustomizableViewportOverlay({
           formatTime: formatDICOMTime,
           formatNumberPrecision,
         },
+        displaySetProps,
       };
 
       if (!item) {
@@ -316,7 +328,7 @@ function CustomizableViewportOverlay({
         </>
       );
     },
-    [_renderOverlayItem]
+    [_renderOverlayItem, displaySetProps]
   );
 
   return (
@@ -523,6 +535,39 @@ function InstanceNumberOverlayItem({
   );
 }
 
+function ExpertiseOverlayItem({ displaySetProps, customization }: OverlayItemProps) {
+  const [expertise, setExpertise] = useState(null);
+  const { referenceInstance } = displaySetProps || {};
+
+  useEffect(() => {
+    if (!referenceInstance?.StudyInstanceUID) return;
+
+    const fetchExpertise = async () => {
+      try {
+        const response = await fetch(
+          `https://devone.aplikasi.web.id/one-api/test/api_dummy/expertisi/${referenceInstance.StudyInstanceUID}`
+        );
+        const data = await response.json();
+        setExpertise(data.result);
+      } catch (error) {
+      }
+    };
+
+    fetchExpertise();
+  }, [referenceInstance]);
+
+  if (!expertise) return null;
+
+  return (
+    <div className="expertise-overlay" style={{ color: customization?.color }}>
+      <div><strong>Expertise:</strong></div>
+      <div>{expertise}</div>
+      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae facilis, illum ex repellendus nam dicta saepe fuga officia distinctio cupiditate vitae, nihil neque tenetur possimus nulla suscipit, ab laboriosam. Nisi sit debitis amet distinctio, inventore sint beatae a eius excepturi aperiam recusandae odit magnam qui quos accusamus nemo eaque iusto, error ex provident repellat! Tempora, quos quisquam. Eveniet unde sed aliquam iste, dignissimos est soluta incidunt, magnam voluptatem totam illo maiores. Nostrum repellat itaque ipsa quae tempora in corrupti labore, nihil quisquam error sapiente temporibus minima inventore delectus dolores doloribus laboriosam saepe laudantium cumque accusamus id aut unde eum! Et quasi natus, veniam neque dolorem, aut facere eos magni animi est aspernatur eligendi? Cumque repellat dolorem, autem ex quis, voluptatem eos minima iure nulla laudantium ea asperiores possimus assumenda recusandae nobis, aperiam exercitationem totam molestiae aut obcaecati illo. Nihil dolorum qui rem fugiat optio consequuntur inventore sequi, eveniet provident, ipsam incidunt repudiandae porro temporibus omnis deserunt mollitia nisi at pariatur. Ea fuga quisquam mollitia architecto, temporibus numquam asperiores reiciendis nam, dolores doloremque accusamus nostrum, illum possimus sint dolorem soluta tenetur tempore laborum natus excepturi assumenda non atque vitae enim! Adipisci illo corrupti quibusdam sapiente omnis quaerat voluptatum deleniti fuga deserunt.</div>
+      <div><br></br></div>
+    </div>
+  );
+}
+
 CustomizableViewportOverlay.propTypes = {
   viewportData: PropTypes.object,
   imageIndex: PropTypes.number,