Integrasi Map Business

Add:
 components/Map/MapSelected.tsx
        components/_ShareComponent/GridTwoView.tsx
        service/api-client/api-maps.ts
utils/openInDeviceMaps.ts

Fix:
 modified:   app/(application)/(user)/maps/[id]/edit.tsx
        modified:   app/(application)/(user)/maps/create.tsx
        modified:   app/(application)/(user)/maps/index.tsx
        modified:   app/(application)/(user)/portofolio/[id]/index.tsx
        modified:   components/Map/MapCustom.tsx
        modified:   screens/Portofolio/BusinessLocationSection.tsx
        modified:   screens/Portofolio/DataPortofolio.tsx
        modified:   screens/Portofolio/ListPage.tsx

### No issue

components/Map/MapCustom.tsx

@@ -1,5 +1,7 @@
 // components/MapComponent.js
 
+import API_IMAGE from "@/constants/api-storage";
+import { Image } from "expo-image";
 import React from "react";
 import { DimensionValue, StyleSheet, View } from "react-native";
 import MapView, { Marker } from "react-native-maps";
@@ -10,6 +12,9 @@ interface MapComponentProps {
   latitudeDelta?: number;
   longitudeDelta?: number;
   height?: DimensionValue;
+  namePin?: string;
+  imageId?: string;
+  onPress?: () => void;
 }
 
 const MapCustom = ({
@@ -18,6 +23,9 @@ const MapCustom = ({
   latitudeDelta = 0.1,
   longitudeDelta = 0.1,
   height = 300,
+  namePin = "Bali",
+  imageId,
+  onPress,
 }: MapComponentProps) => {
   const initialRegion = {
     latitude,
@@ -40,9 +48,22 @@ const MapCustom = ({
             latitude,
             longitude,
           }}
-          title="Bali"
-          description="Badung, Bali, Indonesia"
-        />
+          title={namePin}
+          onPress={onPress}
+          // Gunakan gambar kustom jika tersedia
+        >
+          <View style={{}}>
+            <Image
+              source={{ uri: API_IMAGE.GET({ fileId: imageId as string }) }}
+              style={{
+                width: 30,
+                height: 30,
+                borderRadius: 100,
+                borderWidth: 1,
+              }}
+            />
+          </View>
+        </Marker>
       </MapView>
     </View>
   );

components/Map/MapSelected.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import MapView, { LatLng, Marker } from "react-native-maps";
+
+interface MapSelectedProps {
+  initialRegion?: {
+    latitude?: number;
+    longitude?: number;
+    latitudeDelta?: number;
+    longitudeDelta?: number;
+  };
+  onLocationSelect?: (location: LatLng) => void;
+  height?: number; // Opsional: tinggi peta dalam piksel
+  selectedLocation: LatLng;
+  setSelectedLocation: (location: LatLng) => void;
+}
+
+const MapSelected: React.FC<MapSelectedProps> = ({
+  initialRegion,
+  onLocationSelect,
+  selectedLocation,
+  setSelectedLocation,
+  height = 400, // Default height: 400
+}) => {
+  const handleMapPress = (event: any) => {
+    const { latitude, longitude } = event.nativeEvent.coordinate;
+    const location = { latitude, longitude };
+    setSelectedLocation(location);
+    onLocationSelect?.(location);
+  };
+
+  // Default region sesuai permintaan
+  const defaultRegion = {
+    latitude: -8.737109,
+    longitude: 115.1756897,
+    latitudeDelta: 0.1,
+    longitudeDelta: 0.1,
+  };
+
+  return (
+    <View style={[styles.container, { height }]}>
+      <MapView
+        style={styles.map}
+        initialRegion={(initialRegion as any) || defaultRegion}
+        onPress={handleMapPress}
+        showsUserLocation={true}
+        showsMyLocationButton={true}
+        loadingEnabled={true}
+        loadingIndicatorColor="#666"
+        loadingBackgroundColor="#f0f0f0"
+      >
+        {selectedLocation && (
+          <Marker
+            coordinate={selectedLocation}
+            title="Lokasi Dipilih"
+            description={`Lat: ${selectedLocation.latitude.toFixed(
+              6
+            )}, Lng: ${selectedLocation.longitude.toFixed(6)}`}
+            pinColor="red"
+          />
+        )}
+      </MapView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: "#f5f5f5",
+    overflow: "hidden",
+    borderRadius: 8,
+  },
+  map: {
+    flex: 1,
+  },
+});
+
+export default MapSelected;