feat(sgw): Implement Create or Update Banzone functionality with map integration

src/pages/Slave/SGW/Manager/Fish/component/FishImage.tsx

@@ -0,0 +1,66 @@
+import { HTTPSTATUS } from '@/constants';
+import { apiGetPhoto } from '@/services/slave/sgw/PhotoController';
+import { Image, Spin } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+
+export const FishImage = ({
+  fishId,
+  alt,
+  isReload,
+}: {
+  fishId: string;
+  alt: string;
+  isReload: boolean;
+}) => {
+  const [url, setUrl] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const objectUrlRef = useRef<string>('');
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchImage = async () => {
+      try {
+        const resp = await apiGetPhoto('fish', fishId);
+        let objectUrl = '';
+        if (resp.status === HTTPSTATUS.HTTP_SUCCESS) {
+          const blob = new Blob([resp.data], { type: 'image/jpeg' });
+          objectUrl = URL.createObjectURL(blob);
+          objectUrlRef.current = objectUrl;
+        } else {
+          throw new Error('Failed to fetch image');
+        }
+
+        if (isMounted) {
+          setUrl(objectUrl);
+          setLoading(false);
+        }
+      } catch (error) {
+        // console.log('Error: ', error);
+        setUrl('');
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchImage();
+
+    return () => {
+      isMounted = false;
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+      }
+    };
+  }, [fishId, isReload]);
+
+  if (loading) {
+    return <Spin size="small" />;
+  }
+
+  if (!url) {
+    return <span>-</span>;
+  }
+
+  return <Image height={50} width={50} src={url} alt={alt} />;
+};