add: Admin Event detail screen dan komponen pendukung

Deskripsi: Menambahkan halaman detail event pada admin panel dengan status parameter Menambahkan beberapa komponen UI untuk menampilkan detail event, drawer informasi, dan QR Code Update konfigurasi aplikasi dan iOS project Perbaikan pada halaman verifikasi authentication Update dokumentasi prompt untuk Qwen File yang diubah: Modified app.config.js app/(application)/admin/event/[id]/[status]/index.tsx docs/prompt-for-qwen-code.md ios/HIPMIBadungConnect.xcodeproj/project.pbxproj ios/HIPMIBadungConnect/Info.plist screens/Authentication/VerificationView.tsx New Admin Event Components screens/Admin/Event/BoxEventDetail.tsx screens/Admin/Event/EventDetailDrawer.tsx screens/Admin/Event/EventDetailQRCode.tsx screens/Admin/Event/ScreenEventDetail.tsx ### No Issue
Fix bug home
2026-03-06 16:39:55 +08:00 · 2026-03-05 16:41:29 +08:00 · 2026-03-04 16:39:57 +08:00 · 2026-03-03 16:44:45 +08:00 · 2026-03-02 16:34:24 +08:00 · 2026-03-02 10:31:29 +08:00
50 changed files with 4135 additions and 1955 deletions
--- a/QWEN.md
+++ b/QWEN.md
@@ -10,7 +10,7 @@ HIPMI Mobile is a cross-platform mobile application built with Expo and React Na
 - **Architecture**: File-based routing with Expo Router
 - **State Management**: Context API (AuthContext)
 - **UI Components**: React Native Paper, custom components
- **Maps Integration**: Mapbox Maps for React Native
+- **Maps Integration**: Maplibre Maps for React Native (`@maplibre/maplibre-react-native` v10.4.2)
 - **Push Notifications**: React Native Firebase Messaging
 - **Build System**: Metro bundler
 - **Package Manager**: Bun
@@ -381,8 +381,8 @@ apiConfig.interceptors.request.use(async (config) => {
 - Push Notifications (FCM)
 - Configured for both iOS and Android

-### Mapbox
- Map integration via `@rnmapbox/maps`
+### Maplibre
+- Map integration via `@maplibre/maplibre-react-native`
 - Location permissions configured

 ### Deep Linking
@@ -475,10 +475,34 @@ rm -rf node_modules bun.lock
 bun install
 ```

+### iOS Maplibre Crash Fix
+
+When using Maplibre MapView on iOS, prevent "Attempt to recycle a mounted view" crash:
+
+1. **Always render PointAnnotation** (not conditional)
+2. **Use opacity for visibility** instead of conditional rendering
+3. **Avoid key prop changes** that force remounting
+
+```typescript
+// ✅ GOOD: Stable PointAnnotation
+<PointAnnotation
+  coordinate={annotationCoordinate}  // Always rendered
+  ...
+>
+  <View style={{ opacity: selectedLocation ? 1 : 0 }}>
+    <SelectedLocationMarker />
+  </View>
+</PointAnnotation>
+
+// ❌ BAD: Conditional rendering causes crash
+{selectedLocation && (
+  <PointAnnotation coordinate={selectedLocation} ... />
+)}
+```
+
 ## Documentation Files

 - `docs/CHANGE_LOG.md` - Change log for recent updates
- `docs/COMMIT_NOTES.md` - Commit notes and guidelines
 - `docs/hipmi-note.md` - Build and deployment notes
 - `docs/prompt-for-qwen-code.md` - Development prompts and patterns

@@ -488,3 +512,4 @@ bun install
 - [React Native Documentation](https://reactnative.dev/)
 - [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
 - [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+- [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -100,8 +100,8 @@ packagingOptions {
        applicationId 'com.bip.hipmimobileapp'
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 4
-        versionName "1.0.1"
+        versionCode 1
+        versionName "1.0.2"

        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
    }
--- a/app.config.js
+++ b/app.config.js
@@ -4,7 +4,7 @@ require("dotenv").config();
 export default {
  name: "HIPMI Badung Connect",
  slug: "hipmi-mobile",
-  version: "1.0.1",
+  version: "1.0.2",
  orientation: "portrait",
  icon: "./assets/images/icon.png",
  scheme: "hipmimobile",
@@ -21,7 +21,7 @@ export default {
        "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
    },
    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
-    buildNumber: "21",
+    buildNumber: "3",
  },

  android: {
@@ -32,7 +32,7 @@ export default {
    },
    edgeToEdgeEnabled: true,
    package: "com.bip.hipmimobileapp",
-    versionCode: 4,
+    versionCode: 1,
    // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
    intentFilters: [
      {
@@ -77,7 +77,6 @@ export default {
      },
    ],
    "expo-font",
-    "@rnmapbox/maps",
    "@react-native-firebase/app",
    [
      "expo-notifications",
@@ -87,6 +86,7 @@ export default {
        iosDisplayInForeground: true,
      },
    ],
+    "@maplibre/maplibre-react-native",
  ],

  experiments: {
--- a/app/(application)/(image)/take-picture/[id]/index.tsx
+++ b/app/(application)/(image)/take-picture/[id]/index.tsx
@@ -105,7 +105,7 @@ export default function TakePicture() {
          </Pressable>

          <Pressable onPress={pickImage}>
-            <AntDesign name="folderopen" size={32} color="white" />
+            <AntDesign name="folder-open" size={32} color="white" />
          </Pressable>
        </View>
      </View>
--- a/app/(application)/(user)/home.tsx
+++ b/app/(application)/(user)/home.tsx
@@ -1,66 +1,93 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { BasicWrapper, StackCustom, ViewWrapper } from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
 import HeaderBell from "@/screens/Home/HeaderBell";
+import { stylesHome } from "@/screens/Home/homeViewStyle";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
 import Home_FeatureSection from "@/screens/Home/topFeatureSection";
+import { apiJobGetAll } from "@/service/api-client/api-job";
 import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useState } from "react";
-import { RefreshControl } from "react-native";
+import { RefreshControl, View } from "react-native";

 export default function Application() {
  const { token, user, userData } = useAuth();
  const [data, setData] = useState<any>();
  const [refreshing, setRefreshing] = useState(false);
  const { syncUnreadCount } = useNotificationStore();
+  const [listData, setListData] = useState<any[] | null>(null);

  useFocusEffect(
    useCallback(() => {
      onLoadData();
+      onLoadDataJob();
      checkVersion();
-      userData(token as string);
+      userData(token as string).catch((error) => {
+        console.log("[ERROR userData]", error?.message);
+        console.log("[ERROR userData Response]", error?.response?.data);
+      });
      syncUnreadCount();
    }, [user?.id, token]),
  );

  async function onLoadData() {
-    const response = await apiUser(user?.id as string);
-    console.log(
-      "[Profile ID]>>",
-      JSON.stringify(response?.data?.Profile?.id, null, 2),
-    );
-
-    setData(response.data);
+    try {
+      const response = await apiUser(user?.id as string);
+      setData(response.data);
+    } catch (error: any) {
+      console.log("[ERROR onLoadData]", error?.message);
+      console.log("[ERROR Response]", error?.response?.data);
+      // Set data tetap agar UI tidak stuck di loading
+      setData(null);
+    }
  }

+  const onLoadDataJob = async () => {
+    try {
+      const response = await apiJobGetAll({
+        category: "beranda",
+      });
+      const result = response.data
+        .sort(
+          (a: any, b: any) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        )
+        .slice(0, 2);
+      setListData(result);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
  const checkVersion = async () => {
-    const response = await apiVersion();
-    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
+    try {
+      const response = await apiVersion();
+      console.log("[Version] >>", JSON.stringify(response.data, null, 2));
+    } catch (error: any) {
+      console.log("[ERROR checkVersion]", error?.message);
+    }
  };

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    onLoadData();
+    onLoadDataJob();
    checkVersion();
    setRefreshing(false);
  }, []);

-  // if (user && user?.termsOfServiceAccepted === false) {
-  //   console.log("User is not accept term service");
-  //   return <Redirect href={`/terms-agreement`} />;
-  // }
-
  if (data && data?.active === false) {
-    console.log("User is not active");
+    console.warn("User is not active");
    return (
      <BasicWrapper>
        <Redirect href={`/waiting-room`} />
@@ -69,7 +96,7 @@ export default function Application() {
  }

  if (data && data?.Profile === null) {
-    console.log("Profile is null");
+    console.warn("Profile is null");
    return (
      <BasicWrapper>
        <Redirect href={`/profile/create`} />
@@ -77,31 +104,39 @@ export default function Application() {
    );
  }

-  if (data && data?.masterUserRoleId !== "1") {
-    console.log("User is not admin");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/admin/dashboard`} />
-      </BasicWrapper>
-    );
-  }
+  // if (data && data?.masterUserRoleId !== "1") {
+  //   console.log("User is not admin");
+  //   return (
+  //     <BasicWrapper>
+  //       <Redirect href={`/admin/dashboard`} />
+  //     </BasicWrapper>
+  //   );
+  // }

  return (
    <>
      <Stack.Screen
        options={{
          title: `HIPMI`,
-          headerLeft: () => (
-            <Ionicons
-              name="search"
-              size={20}
-              color={MainColor.yellow}
-              onPress={() => {
-                router.push("/user-search");
-              }}
-            />
-          ),
-          headerRight: () => <HeaderBell />,
+          headerLeft: () =>
+            data ? (
+              <Ionicons
+                name="search"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => {
+                  router.push("/user-search");
+                }}
+              />
+            ) : (
+              <CustomSkeleton height={30} width={30} radius={100} />
+            ),
+          headerRight: () =>
+            data ? (
+              <HeaderBell />
+            ) : (
+              <CustomSkeleton height={30} width={30} radius={100} />
+            ),
        }}
      />
      <ViewWrapper
@@ -114,24 +149,51 @@ export default function Application() {
          />
        }
        footerComponent={
-          <TabSection
-            tabs={tabsHome({
-              acceptedForumTermsAt: data?.acceptedForumTermsAt,
-              profileId: data?.Profile?.id,
-            })}
-          />
+          data && data ? (
+            <TabSection
+              tabs={tabsHome({
+                acceptedForumTermsAt: data?.acceptedForumTermsAt,
+                profileId: data?.Profile?.id,
+              })}
+            />
+          ) : (
+            <View style={GStyles.tabBar}>
+              <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
+                {Array.from({ length: 4 }).map((e, index) => (
+                  <CustomSkeleton
+                    key={index}
+                    height={40}
+                    width={40}
+                    radius={100}
+                  />
+                ))}
+              </View>
+            </View>
+          )
        }
      >
        <StackCustom>
-          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>
-            Test Notif
-          </ButtonCustom> */}
-
          <Home_ImageSection />

-          <Home_FeatureSection />
+          {data && data ? (
+            <Home_FeatureSection />
+          ) : (
+            <View style={stylesHome.gridContainer}>
+              {Array.from({ length: 4 }).map((item, index) => (
+                <CustomSkeleton
+                  key={index}
+                  style={stylesHome.gridItem}
+                  radius={50}
+                />
+              ))}
+            </View>
+          )}

-          <Home_BottomFeatureSection />
+          {data ? (
+            <Home_BottomFeatureSection listData={listData} />
+          ) : (
+            <CustomSkeleton height={200} />
+          )}
        </StackCustom>
      </ViewWrapper>
    </>
--- a/app/(application)/(user)/maps/[id]/edit.tsx
+++ b/app/(application)/(user)/maps/[id]/edit.tsx
@@ -1,244 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  InformationBox,
-  LandscapeFrameUploaded,
-  Spacing,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import API_IMAGE from "@/constants/api-storage";
-import DIRECTORY_ID from "@/constants/directory-id";
-import { apiMapsGetOne, apiMapsUpdate } from "@/service/api-client/api-maps";
-import { uploadFileService } from "@/service/upload-service";
-import pickFile, { IFileData } from "@/utils/pickFile";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useCallback, useState } from "react";
-import { StyleSheet, View } from "react-native";
-import MapView, { LatLng, Marker } from "react-native-maps";
-import Toast from "react-native-toast-message";
+import { Maps_ScreenMapsEdit } from "@/screens/Maps/ScreenMapsEdit";

-const defaultRegion = {
-  latitude: -8.737109,
-  longitude: 115.1756897,
-  latitudeDelta: 0.1,
-  longitudeDelta: 0.1,
-};
 export default function MapsEdit() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any | null>({
-    id: "",
-    namePin: "",
-    latitude: "",
-    longitude: "",
-    imageId: "",
-  });
-  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
-  const [image, setImage] = useState<IFileData | null>(null);
-  const [isLoading, setLoading] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      const response = await apiMapsGetOne({ id: id as string });
-
-      if (response.success) {
-        setData({
-          id: response.data.id,
-          namePin: response.data.namePin,
-          latitude: response.data.latitude,
-          longitude: response.data.longitude,
-          imageId: response.data.imageId,
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  const handleMapPress = (event: any) => {
-    const { latitude, longitude } = event.nativeEvent.coordinate;
-    const location = { latitude, longitude };
-    setSelectedLocation(location);
-  };
-
-  const handleSubmit = async () => {
-    let newData: any;
-    if (!data.namePin) {
-      Toast.show({
-        type: "error",
-        text1: "Nama pin harus diisi",
-      });
-      return;
-    }
-
-    newData = {
-      namePin: data?.namePin,
-      latitude: selectedLocation?.latitude || data?.latitude,
-      longitude: selectedLocation?.longitude || data?.longitude,
-    };
-
-    try {
-      setLoading(true);
-      if (image) {
-        const responseUpload = await uploadFileService({
-          dirId: DIRECTORY_ID.map_image,
-          imageUri: image?.uri,
-        });
-
-        if (!responseUpload?.data?.id) {
-          Toast.show({
-            type: "error",
-            text1: "Gagal mengunggah gambar",
-          });
-          return;
-        }
-
-        const imageId = responseUpload?.data?.id;
-
-        newData = {
-          namePin: data?.namePin,
-          latitude: selectedLocation?.latitude,
-          longitude: selectedLocation?.longitude,
-          newImageId: imageId,
-        };
-      }
-
-      const responseUpdate = await apiMapsUpdate({
-        id: data?.id,
-        data: newData,
-      });
-
-      if (!responseUpdate.success) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mengupdate map",
-        });
-        return;
-      }
-
-      Toast.show({
-        type: "success",
-        text1: "Map berhasil diupdate",
-      });
-      router.back();
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const buttonFooter = (
-    <BoxButtonOnFooter>
-      <ButtonCustom
-        disabled={!data.namePin}
-        onPress={handleSubmit}
-        isLoading={isLoading}
-      >
-        Update
-      </ButtonCustom>
-    </BoxButtonOnFooter>
-  );
-
-  return (
-    <ViewWrapper footerComponent={buttonFooter}>
-      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
-
-      <View style={[styles.container, { height: 400 }]}>
-        <MapView
-          style={styles.map}
-          initialRegion={
-            data?.latitude && data?.longitude
-              ? {
-                  latitude: data?.latitude,
-                  longitude: data?.longitude,
-                  latitudeDelta: 0.1,
-                  longitudeDelta: 0.1,
-                }
-              : 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"
-            />
-          ) : (
-            <Marker
-              coordinate={defaultRegion}
-              title="Lokasi Dipilih"
-              description={`Lat: ${defaultRegion.latitude.toFixed(
-                6
-              )}, Lng: ${defaultRegion.longitude.toFixed(6)}`}
-              pinColor="red"
-            />
-          )}
-        </MapView>
-      </View>
-
-      <TextInputCustom
-        required
-        label="Nama Pin"
-        placeholder="Masukkan nama pin maps"
-        value={data?.namePin}
-        onChangeText={(value) => setData({ ...data, namePin: value })}
-      />
-
-      <Spacing />
-
-      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
-      <LandscapeFrameUploaded
-        image={
-          image
-            ? image?.uri
-            : API_IMAGE.GET({ fileId: data?.imageId as string })
-        }
-      />
-      <ButtonCenteredOnly
-        icon="upload"
-        onPress={() => {
-          pickFile({
-            allowedType: "image",
-            setImageUri(file) {
-              setImage(file);
-            },
-          });
-        }}
-      >
-        Upload
-      </ButtonCenteredOnly>
-      <Spacing height={50} />
-    </ViewWrapper>
-  );
+  return <Maps_ScreenMapsEdit />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    backgroundColor: "#f5f5f5",
-    overflow: "hidden",
-    borderRadius: 8,
-    marginBottom: 20,
-  },
-  map: {
-    flex: 1,
-  },
-});
--- a/app/(application)/(user)/maps/create.tsx
+++ b/app/(application)/(user)/maps/create.tsx
@@ -1,143 +1,9 @@
-import {
-  BaseBox,
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  InformationBox,
-  LandscapeFrameUploaded,
-  Spacing,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import MapSelected from "@/components/Map/MapSelected";
-import DIRECTORY_ID from "@/constants/directory-id";
-import { useAuth } from "@/hooks/use-auth";
-import { apiMapsCreate } from "@/service/api-client/api-maps";
-import { uploadFileService } from "@/service/upload-service";
-import pickFile, { IFileData } from "@/utils/pickFile";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
-import { LatLng } from "react-native-maps";
-import Toast from "react-native-toast-message";
+import Maps_ScreenMapsCreate from "@/screens/Maps/ScreenMapsCreate";

 export default function MapsCreate() {
-  const { user } = useAuth();
-  const { id } = useLocalSearchParams();
-  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
-  const [name, setName] = useState<string>("");
-  const [image, setImage] = useState<IFileData | null>(null);
-  const [isLoading, setLoading] = useState(false);
-
-  const handleSubmit = async () => {
-    try {
-      setLoading(true);
-      let newData: any;
-      newData = {
-        authorId: user?.id,
-        portofolioId: id,
-        namePin: name,
-        latitude: selectedLocation?.latitude,
-        longitude: selectedLocation?.longitude,
-      };
-
-      if (image) {
-        const responseUpload = await uploadFileService({
-          dirId: DIRECTORY_ID.map_image,
-          imageUri: image?.uri,
-        });
-
-        if (!responseUpload?.data?.id) {
-          Toast.show({
-            type: "error",
-            text1: "Gagal mengunggah gambar",
-          });
-          return;
-        }
-
-        const imageId = responseUpload?.data?.id;
-
-        newData = {
-          authorId: user?.id,
-          portofolioId: id,
-          namePin: name,
-          latitude: selectedLocation?.latitude,
-          longitude: selectedLocation?.longitude,
-          imageId: imageId,
-        };
-      }
-
-      const response = await apiMapsCreate({
-        data: newData,
-      });
-
-      if (!response.success) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal menambahkan map",
-        });
-        return;
-      }
-
-      Toast.show({
-        type: "success",
-        text1: "Map berhasil ditambahkan",
-      });
-      router.back();
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const buttonFooter = (
-    <BoxButtonOnFooter>
-      <ButtonCustom
-        isLoading={isLoading}
-        disabled={!selectedLocation || name === ""}
-        onPress={handleSubmit}
-      >
-        Simpan
-      </ButtonCustom>
-    </BoxButtonOnFooter>
-  );
  return (
-    <ViewWrapper footerComponent={buttonFooter}>
-      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
-
-      <BaseBox>
-        <MapSelected
-          selectedLocation={selectedLocation as any}
-          setSelectedLocation={setSelectedLocation}
-        />
-      </BaseBox>
-
-      <TextInputCustom
-        required
-        label="Nama Pin"
-        placeholder="Masukkan nama pin maps"
-        value={name}
-        onChangeText={setName}
-      />
-
-      <Spacing height={50} />
-
-      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
-      <LandscapeFrameUploaded image={image?.uri} />
-      <ButtonCenteredOnly
-        icon="upload"
-        onPress={() => {
-          pickFile({
-            allowedType: "image",
-            setImageUri(file) {
-              setImage(file);
-            },
-          });
-        }}
-      >
-        Upload
-      </ButtonCenteredOnly>
-      <Spacing height={50} />
-    </ViewWrapper>
+    <>
+      <Maps_ScreenMapsCreate />
+    </>
  );
 }
--- a/app/(application)/(user)/maps/index.tsx
+++ b/app/(application)/(user)/maps/index.tsx
@@ -1,6 +1,4 @@
-import MapsView from "@/screens/Maps/MapsView";
 import MapsView2 from "@/screens/Maps/MapsView2";
-import { Text, View } from "react-native";

 export interface LocationItem {
  id: string | number;
@@ -13,8 +11,14 @@ export interface LocationItem {
 export default function Maps() {
  return (
    <>
-      <MapsView />
-      {/* <MapsView2 />, */}
+      {/* <Stack.Screen
+        options={{
+          title: "Maps",
+          headerLeft: () => <BackButton />,
+        }}
+        /> */}
+      {/* {Platform.OS === "ios" ? <MapsView /> : <MapsView2 />} */}
+      <MapsView2 />
      {/* <View style={{ flex: 1, backgroundColor: "gray" }}><Text style={{ color: "white" }}>Map disabled</Text></View> */}
    </>
  );
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,15 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCustom,
-    DrawerCustom,
-    DummyLandscapeImage,
-    LoaderCustom,
-    Spacing,
-    StackCustom,
-    TextCustom,
+  ButtonCustom,
+  DrawerCustom,
+  DummyLandscapeImage,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
 } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -64,6 +65,8 @@ export default function Portofolio() {
    setProfileId(response?.data?.Profile?.id);
  };

+
+
  return (
    <>
      {/* Header */}
@@ -87,18 +90,24 @@ export default function Portofolio() {
      />
      <ViewWrapper>
        {!data || !profileId ? (
-          <LoaderCustom />
+            <StackCustom>
+            <CustomSkeleton height={400} />
+            <CustomSkeleton height={300} />
+          </StackCustom>
        ) : (
          <StackCustom>
            <Portofolio_Data
              data={data}
              listSubBidang={data?.Portofolio_BidangDanSubBidangBisnis as any[]}
            />
-            <Portofolio_BusinessLocation
-              data={data?.BusinessMaps}
-              imageId={data?.logoId}
-              setOpenDrawerLocation={setOpenDrawerLocation}
-            />
+            {data?.BusinessMaps && (
+              <Portofolio_BusinessLocation
+                data={data?.BusinessMaps}
+                imageId={data?.logoId}
+                setOpenDrawerLocation={setOpenDrawerLocation}
+              />
+            )}
+
            <Portofolio_SocialMediaSection
              data={data?.Portofolio_MediaSosial}
            />
@@ -135,10 +144,12 @@ export default function Portofolio() {
        closeDrawer={() => setOpenDrawerLocation(false)}
        height={"auto"}
      >
-        <DummyLandscapeImage
-          height={200}
-          imageId={data?.BusinessMaps?.imageId}
-        />
+        {data?.BusinessMaps?.imageId && (
+          <DummyLandscapeImage
+            height={200}
+            imageId={data?.BusinessMaps?.imageId}
+          />
+        )}
        <Spacing />
        <StackCustom gap={"xs"}>
          <GridTwoView
--- a/app/(application)/(user)/profile/[id]/index.tsx
+++ b/app/(application)/(user)/profile/[id]/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { LoaderCustom } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { NewWrapper, StackCustom } from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -16,8 +16,8 @@ import { GStyles } from "@/styles/global-styles";
 import { IProfile } from "@/types/Type-Profile";
 import { Ionicons } from "@expo/vector-icons";
 import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
-import React, { useCallback, useState } from "react";
-import { TouchableOpacity } from "react-native";
+import { useCallback, useState } from "react";
+import { RefreshControl, TouchableOpacity } from "react-native";

 export default function Profile() {
  const { id } = useLocalSearchParams();
@@ -25,6 +25,7 @@ export default function Profile() {
  const [data, setData] = useState<IProfile>();
  const [dataToken, setDataToken] = useState<IProfile>();
  const [listPortofolio, setListPortofolio] = useState<any[]>();
+  const [refreshing, setRefreshing] = useState(false);

  const { token, logout, isAdmin, user, userData } = useAuth();

@@ -43,7 +44,7 @@ export default function Profile() {
      onLoadUserByToken();
      isUserCheck();
      userData(token as string);
-    }, [id, token])
+    }, [id, token]),
  );

  const isUserCheck = () => {
@@ -54,13 +55,21 @@ export default function Profile() {
  };

  const onLoadData = async (id: string) => {
-    const response = await apiProfile({ id: id });
-    setData(response.data);
+    try {
+      const response = await apiProfile({ id: id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR onLoadData]", error);
+    }
  };

  const onLoadUserByToken = async () => {
-    const response = await apiUser(user?.id as string);
-    setDataToken(response?.data?.Profile);
+    try {
+      const response = await apiUser(user?.id as string);
+      setDataToken(response?.data?.Profile);
+    } catch (error) {
+      console.log("[ERROR onLoadUserByToken]", error);
+    }
  };

  const onLoadPortofolio = async (id: string) => {
@@ -69,15 +78,25 @@ export default function Profile() {
      const lastTwoByDate = response.data
        .sort(
          (a: any, b: any) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
        ) // urut desc
        .slice(0, 2);
      setListPortofolio(lastTwoByDate);
    } catch (error) {
-      console.log("[ERROR]", error);
+      console.log("[ERROR onLoadPortofolio]", error);
    }
  };

+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    onLoadData(id as string);
+    onLoadPortofolio(id as string);
+    onLoadUserByToken();
+    isUserCheck();
+    userData(token as string);
+    setRefreshing(false);
+  }, [id, token]);
+
  return (
    <>
      <Stack.Screen
@@ -97,9 +116,21 @@ export default function Profile() {
        }}
      />
      {/* Main View */}
-      <ViewWrapper>
+      <NewWrapper
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      >
        {!data || !dataToken ? (
-          <LoaderCustom />
+          <StackCustom>
+            <CustomSkeleton height={400} />
+            <CustomSkeleton height={200} />
+          </StackCustom>
        ) : (
          <>
            <ProfileSection data={data as any} />
@@ -110,7 +141,7 @@ export default function Profile() {
            />
          </>
        )}
-      </ViewWrapper>
+      </NewWrapper>

      {/* Drawer Komponen Eksternal */}
      <DrawerCustom
--- a/app/(application)/admin/event/[id]/[status]/index.tsx
+++ b/app/(application)/admin/event/[id]/[status]/index.tsx
@@ -1,254 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  AlertDefaultSystem,
-  BadgeCustom,
-  BaseBox,
-  DrawerCustom,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconDot, IconList } from "@/components/_Icon/IconComponent";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
-import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import ReportBox from "@/components/Box/ReportBox";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
-import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
-import { DEEP_LINK_URL } from "@/service/api-config";
-import { colorBadgeStatus } from "@/utils/colorBadge";
-import { dateTimeView } from "@/utils/dateTimeView";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import React, { useCallback } from "react";
-import QRCode from "react-native-qrcode-svg";
-import Toast from "react-native-toast-message";
+import { Admin_ScreenEventDetail } from "@/screens/Admin/Event/ScreenEventDetail";

 export default function AdminEventDetail() {
-  const { user } = useAuth();
-  const { id, status } = useLocalSearchParams();
-  const [openDrawer, setOpenDrawer] = React.useState(false);
-
-  const [data, setData] = React.useState<any | null>(null);
-  const [loadData, setLoadData] = React.useState(false);
-  const deepLinkURL = `${DEEP_LINK_URL}/event/${id}/confirmation?userId=${user?.id}`;
-  const deepLinkURLDEV = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
-
-  const isDevLink =
-    process.env.NODE_ENV === "development" ? deepLinkURLDEV : deepLinkURL;
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminEventById({
-        id: id as string,
-      });
-
-      if (response.success) {
-        setData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  const listData = [
-    {
-      label: "Pembuat Event",
-      value: (data && data?.Author?.username) || "-",
-    },
-    {
-      label: "Judul Event",
-      value: (data && data?.title) || "-",
-    },
-    {
-      label: "Status",
-      value:
-        (data && (
-          <BadgeCustom color={colorBadgeStatus({ status: status as string })}>
-            {_.startCase(status as string)}
-          </BadgeCustom>
-        )) ||
-        "-",
-    },
-    {
-      label: "Lokasi",
-      value: (data && data?.lokasi) || "-",
-    },
-    {
-      label: "Tipe Acara",
-      value: (data && data?.EventMaster_TipeAcara?.name) || "-",
-    },
-    {
-      label: "Mulai Event",
-      value:
-        (data && data?.tanggal && dateTimeView({ date: data?.tanggal })) || "-",
-    },
-    {
-      label: "Event Berakhir",
-      value:
-        (data &&
-          data?.tanggalSelesai &&
-          dateTimeView({ date: data?.tanggalSelesai })) ||
-        "-",
-    },
-    {
-      label: "Deskripsi",
-      value: (data && data?.deskripsi) || "-",
-    },
-  ];
-
-  const rightComponent = (
-    <ActionIcon
-      icon={<IconDot size={ICON_SIZE_BUTTON} />}
-      onPress={() => {
-        setOpenDrawer(true);
-      }}
-    />
-  );
-
-  const handlerSubmit = async () => {
-    try {
-      const response = await funUpdateStatusEvent({
-        id: id as string,
-        changeStatus: "publish",
-        data: { catatan: "", senderId: user?.id as string },
-      });
-
-      if (!response.success) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mempublikasikan event",
-        });
-        return;
-      }
-
-      Toast.show({
-        type: "success",
-        text1: "Event berhasil dipublikasikan",
-      });
-      router.back();
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminBackButtonAntTitle
-            title={`Detail Data`}
-            rightComponent={
-              (status === "publish" || status === "history") && rightComponent
-            }
-          />
-        }
-      >
-        <BaseBox>
-          <StackCustom>
-            {listData.map((item, i) => (
-              <GridSpan_4_8
-                key={i}
-                label={<TextCustom bold>{item.label}</TextCustom>}
-                value={<TextCustom>{item.value}</TextCustom>}
-              />
-            ))}
-          </StackCustom>
-
-          <Spacing />
-        </BaseBox>
-
-        {data &&
-          data?.catatan &&
-          (status === "reject" || status === "review") && (
-            <ReportBox text={data?.catatan} />
-          )}
-
-        {(status === "publish" || status === "history") && (
-          <BaseBox>
-            <StackCustom style={{ alignItems: "center" }}>
-              <TextCustom bold>QR Code Event</TextCustom>
-              {loadData ? (
-                <LoaderCustom />
-              ) : (
-                <QRCode
-                  value={isDevLink}
-                  size={200}
-                  // logo={require("@/assets/images/logo-hipmi.png")}
-                  // logoSize={70}
-                  // logoBackgroundColor="transparent"
-                  // logoBorderRadius={50}
-                  // color="black"
-                />
-              )}
-
-              {/* <TextCustom align="center">{isDevLink}</TextCustom> */}
-            </StackCustom>
-          </BaseBox>
-        )}
-
-        {status === "review" && (
-          <AdminButtonReview
-            onPublish={() => {
-              AlertDefaultSystem({
-                title: "Publish",
-                message: "Apakah anda yakin ingin mempublikasikan data ini?",
-                textLeft: "Batal",
-                textRight: "Ya",
-                onPressRight: () => handlerSubmit(),
-              });
-            }}
-            onReject={() => {
-              router.push(`/admin/event/${id}/reject-input?status=${status}`);
-            }}
-          />
-        )}
-
-        {status === "reject" && (
-          <AdminButtonReject
-            title="Tambah Catatan"
-            onReject={() => {
-              router.push(`/admin/event/${id}/reject-input?status=${status}`);
-            }}
-          />
-        )}
-        <Spacing />
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              label: "Daftar Peserta",
-              icon: <IconList />,
-              path: `/admin/event/${id}/list-of-participants`,
-            },
-          ]}
-          onPressItem={(item) => {
-            setOpenDrawer(false);
-            router.push(item.path as any);
-          }}
-        />
-      </DrawerCustom>
-    </>
-  );
+  return <Admin_ScreenEventDetail />;
 }
--- a/app/(application)/admin/forum/[id]/index.tsx
+++ b/app/(application)/admin/forum/[id]/index.tsx
@@ -26,7 +26,7 @@ export default function AdminForumDetailPosting() {
  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [id])
+    }, [id]),
  );

  const onLoadData = async () => {
@@ -72,6 +72,10 @@ export default function AdminForumDetailPosting() {
      label: "Total Report",
      value: data?.JumlahReportPosting || 0,
    },
+    {
+      label: "Postingan",
+      value: (data && data?.diskusi) || "-",
+    },
  ];

  return (
@@ -111,13 +115,6 @@ export default function AdminForumDetailPosting() {
            ))}
          </StackCustom>
        </BaseBox>
-
-        <BaseBox>
-          <StackCustom gap={"sm"}>
-            <TextCustom bold>Postingan</TextCustom>
-            <TextCustom>{(data && data?.diskusi) || "-"}</TextCustom>
-          </StackCustom>
-        </BaseBox>
      </ViewWrapper>

      <DrawerCustom
--- a/app/(application)/admin/forum/[id]/list-comment.tsx
+++ b/app/(application)/admin/forum/[id]/list-comment.tsx
@@ -1,91 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-    LoaderCustom,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
-} from "@/components";
-import { IconOpenTo } from "@/components/_Icon/IconOpenTo";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenForumListComment } from "@/screens/Admin/Forum/ScreenForumListComment";

 export default function AdminForumListComment() {
-  const { id } = useLocalSearchParams();
-  const [listComment, setListComment] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadComment();
-    }, [id])
-  );
-
-  const onLoadComment = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminForumCommentById({
-        id: id as string,
-        category: "get-all",
-      });
-
-      if (response.success) {
-        setListComment(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setListComment([]);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={<AdminBackButtonAntTitle title="Daftar Komentar" />}
-      >
-        <StackCustom>
-          <AdminTitleTable title1="Aksi" title2="Report" title3="Komentar" />
-          <Divider />
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listComment) ? (
-            <TextCustom align="center" color="gray">
-              Tidak ada komentar
-            </TextCustom>
-          ) : (
-            listComment?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <IconOpenTo
-                    onPress={() => {
-                      router.push(
-                        `/admin/forum/${item.id}/list-report-comment`
-                      );
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.countReport || 0}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-
-    </>
-  );
+  return <Admin_ScreenForumListComment />;
 }
--- a/app/(application)/admin/forum/[id]/list-report-comment.tsx
+++ b/app/(application)/admin/forum/[id]/list-report-comment.tsx
@@ -1,262 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  AlertDefaultSystem,
-  BaseBox,
-  CenterCustom,
-  DrawerCustom,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconDot, IconView } from "@/components/_Icon/IconComponent";
-import { IconTrash } from "@/components/_Icon/IconTrash";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  apiAdminForumCommentById,
-  apiAdminForumDeactivateComment,
-  apiAdminForumListReportCommentById,
-} from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
-import Toast from "react-native-toast-message";
+import { Admin_ScreenForumDetailReportComment } from "@/screens/Admin/Forum/ScreenForumDetailReportComment";

 export default function AdminForumReportComment() {
-  const { id } = useLocalSearchParams();
-  const { user } = useAuth();
-  const [data, setData] = useState<any | null>(null);
-  const [listReport, setListReport] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [openDrawerAction, setOpenDrawerAction] = useState(false);
-  const [selectedReport, setSelectedReport] = useState({
-    id: "",
-    username: "",
-    kategori: "",
-    keterangan: "",
-    deskripsi: "",
-  });
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminForumCommentById({
-        id: id as string,
-        category: "get-one",
-      });
-
-      const responseReport = await apiAdminForumListReportCommentById({
-        id: id as string,
-      });
-
-      if (response.success) {
-        setData(response.data);
-      }
-      if (responseReport.success) {
-        setListReport(responseReport.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setData(null);
-      setListReport([]);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminBackButtonAntTitle
-            title="Report Komentar"
-            rightComponent={
-              <ActionIcon
-                icon={<IconDot size={16} color={MainColor.darkblue} />}
-                onPress={() => setOpenDrawer(true)}
-              />
-            }
-          />
-        }
-      >
-        <BaseBox>
-          <StackCustom gap={"sm"}>
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Username</TextCustom>}
-              text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
-            />
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Komentar</TextCustom>}
-              text2={<TextCustom>{data?.komentar || "-"}</TextCustom>}
-            />
-          </StackCustom>
-        </BaseBox>
-
-        <AdminComp_BoxTitle title="Daftar Report Komentar" />
-
-        <StackCustom gap={"sm"}>
-          <GridSpan_NewComponent
-            text1={
-              <TextCustom bold align="center">
-                Aksi
-              </TextCustom>
-            }
-            text2={<TextCustom bold>Pelapor</TextCustom>}
-            text3={<TextCustom bold>Kategori Report</TextCustom>}
-          />
-          <Divider />
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listReport) ? (
-            <TextCustom align="center" color="gray">
-              Tidak ada report
-            </TextCustom>
-          ) : (
-            listReport?.map((item: any, index: number) => (
-              <View key={index}>
-                <GridSpan_NewComponent
-                  text1={
-                    <CenterCustom>
-                      <ActionIcon
-                        icon={
-                          <IconView size={ICON_SIZE_BUTTON} color="black" />
-                        }
-                        onPress={() => {
-                          setOpenDrawerAction(true);
-                          setSelectedReport({
-                            id: item.id,
-                            username: item.User?.username,
-                            kategori: item.ForumMaster_KategoriReport?.title,
-                            keterangan:
-                              item.ForumMaster_KategoriReport?.deskripsi,
-                            deskripsi: item.deskripsi,
-                          });
-                        }}
-                      />
-                    </CenterCustom>
-                  }
-                  text2={
-                    <TextCustom truncate={1}>
-                      {item?.User?.username || "-"}
-                    </TextCustom>
-                  }
-                  text3={
-                    <TextCustom truncate={2}>
-                      {item?.ForumMaster_KategoriReport?.title || "-"}
-                    </TextCustom>
-                  }
-                />
-                <Divider />
-              </View>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              icon: <IconTrash />,
-              label: "Hapus Komentar",
-              value: "delete",
-              path: "",
-              color: MainColor.red,
-            },
-          ]}
-          onPressItem={(item) => {
-            AlertDefaultSystem({
-              title: "Hapus Komentar",
-              message: "Apakah Anda yakin ingin menghapus komentar ini?",
-              textLeft: "Batal",
-              textRight: "Hapus",
-              onPressRight: async () => {
-                const deleteComment = await apiAdminForumDeactivateComment({
-                  id: id as string,
-                  data: {
-                    senderId: user?.id as string,
-                  },
-                });
-
-                // if (!deleteComment.success) {
-                //   Toast.show({
-                //     type: "error",
-                //     text1: "Komentar gagal dihapus",
-                //   });
-                //   return;
-                // }
-
-                setOpenDrawer(false);
-                Toast.show({
-                  type: "success",
-                  text1: "Komentar berhasil dihapus",
-                });
-                router.back();
-              },
-            });
-          }}
-        />
-      </DrawerCustom>
-
-      <DrawerCustom
-        isVisible={openDrawerAction}
-        closeDrawer={() => setOpenDrawerAction(false)}
-        height={"auto"}
-      >
-        <StackCustom>
-          <GridSpan_4_8
-            label={<TextCustom bold>Pelapor</TextCustom>}
-            value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
-          />
-
-          {selectedReport?.kategori && (
-            <>
-              <GridSpan_4_8
-                label={<TextCustom bold>Kategori Report</TextCustom>}
-                value={
-                  <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
-                }
-              />
-              <GridSpan_4_8
-                label={<TextCustom bold>Keterangan</TextCustom>}
-                value={
-                  <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
-                }
-              />
-            </>
-          )}
-
-          {selectedReport?.deskripsi && (
-            <GridSpan_4_8
-              label={<TextCustom bold>Deskripsi</TextCustom>}
-              value={
-                <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>
-              }
-            />
-          )}
-        </StackCustom>
-      </DrawerCustom>
-    </>
-  );
+  return <Admin_ScreenForumDetailReportComment />;
 }
--- a/app/(application)/admin/maps.tsx
+++ b/app/(application)/admin/maps.tsx
@@ -9,32 +9,14 @@ import {
    ViewWrapper,
 } from "@/components";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
-import API_IMAGE from "@/constants/api-storage";
+import { MapMarker, MapsV2Custom } from "@/components/Map/MapsV2Custom";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { apiMapsGetAll } from "@/service/api-client/api-maps";
 import { openInDeviceMaps } from "@/utils/openInDeviceMaps";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
 import { router, useFocusEffect } from "expo-router";
 import { useCallback, useState } from "react";
-import { View } from "react-native";
-import MapView, { Marker } from "react-native-maps";

-const defaultRegion = {
-  latitude: -8.737109,
-  longitude: 115.1756897,
-  latitudeDelta: 0.1,
-  longitudeDelta: 0.1,
-  height: 300,
-};
-
-export interface LocationItem {
-  id: string | number;
-  latitude: number;
-  longitude: number;
-  name: string;
-  imageId?: string;
-}
 export default function AdminMaps() {
  const [list, setList] = useState<any[] | null>(null);
  const [loadList, setLoadList] = useState(false);
@@ -72,74 +54,30 @@ export default function AdminMaps() {
    }
  };

+  const markers: MapMarker[] = list?.map((item) => ({
+    id: item.id,
+    coordinate: [item.longitude, item.latitude] as [number, number],
+    imageId: item.Portofolio?.logoId,
+    onSelected: () => {
+      setOpenDrawer(true);
+      setSelected({
+        id: item?.id,
+        bidangBisnis: item?.Portofolio?.MasterBidangBisnis?.name,
+        nomorTelepon: item?.Portofolio?.tlpn,
+        alamatBisnis: item?.Portofolio?.alamatKantor,
+        namePin: item?.namePin,
+        imageId: item?.imageId,
+        portofolioId: item?.Portofolio?.id,
+        latitude: item?.latitude,
+        longitude: item?.longitude,
+      });
+    },
+  })) || [];
+
  return (
    <>
      <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
-        {/* <MapCustom height={"100%"} /> */}
-        <View style={{ flex: 1 }}>
-          {loadList ? (
-            <MapView
-              initialRegion={defaultRegion}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          ) : (
-            <MapView
-              initialRegion={defaultRegion}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            >
-              {list?.map((item: any, index: number) => {
-                return (
-                  <Marker
-                    key={item?.id}
-                    coordinate={{
-                      latitude: item?.latitude,
-                      longitude: item?.longitude,
-                    }}
-                    title={item?.namePin}
-                    onPress={() => {
-                      setOpenDrawer(true);
-                      setSelected({
-                        id: item?.id,
-                        bidangBisnis:
-                          item?.Portofolio?.MasterBidangBisnis?.name,
-                        nomorTelepon: item?.Portofolio?.tlpn,
-                        alamatBisnis: item?.Portofolio?.alamatKantor,
-                        namePin: item?.namePin,
-                        imageId: item?.imageId,
-                        portofolioId: item?.Portofolio?.id,
-                        latitude: item?.latitude,
-                        longitude: item?.longitude,
-                      });
-                    }}
-                    // Gunakan gambar kustom jika tersedia
-                  >
-                    <View>
-                      <Image
-                        source={{
-                          uri: API_IMAGE.GET({
-                            fileId: item?.Portofolio?.logoId,
-                          }),
-                        }}
-                        style={{
-                          width: 30,
-                          height: 30,
-                          borderRadius: 100,
-                          borderWidth: 1,
-                        }}
-                      />
-                    </View>
-                  </Marker>
-                );
-              })}
-            </MapView>
-          )}
-        </View>
+        <MapsV2Custom markers={markers} />
      </ViewWrapper>

      <DrawerCustom
@@ -147,7 +85,9 @@ export default function AdminMaps() {
        closeDrawer={() => setOpenDrawer(false)}
        height={"auto"}
      >
-        <DummyLandscapeImage height={200} imageId={selected.imageId} />
+        {selected.imageId && (
+          <DummyLandscapeImage height={200} imageId={selected.imageId} />
+        )}
        <Spacing />
        <StackCustom gap={"xs"}>
          <GridTwoView
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
      "name": "hipmi-mobile",
      "dependencies": {
        "@expo/vector-icons": "^15.0.2",
+        "@maplibre/maplibre-react-native": "^10.4.2",
        "@react-native-async-storage/async-storage": "2.2.0",
        "@react-native-community/datetimepicker": "8.4.4",
        "@react-native-firebase/app": "^23.7.0",
@@ -14,7 +15,6 @@
        "@react-navigation/elements": "^2.3.8",
        "@react-navigation/native": "^7.1.6",
        "@react-navigation/native-stack": "^7.3.10",
-        "@rnmapbox/maps": "^10.2.7",
        "@types/lodash": "^4.17.20",
        "@types/react-native-vector-icons": "^6.4.18",
        "axios": "^1.11.0",
@@ -580,6 +580,8 @@

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],

+    "@maplibre/maplibre-react-native": ["@maplibre/maplibre-react-native@10.4.2", "", { "dependencies": { "@turf/distance": "^7.1.0", "@turf/helpers": "^7.1.0", "@turf/length": "^7.1.0", "@turf/nearest-point-on-line": "^7.1.0", "debounce": "^2.2.0" }, "peerDependencies": { "@expo/config-plugins": ">=7", "@types/geojson": "^7946.0.0", "@types/react": ">=16.6.1", "react": ">=16.6.1", "react-native": ">=0.59.9" }, "optionalPeers": ["@expo/config-plugins", "@types/geojson", "@types/react"] }, "sha512-5qAfaEe66eMXyILklm2DMHwyaXwXxsZWVop4BqfU7AyTg13LHAcaMmLJNJ3jPkMtiJvjH2m8ywGnobdIg2I0lg=="],
+
    "@motionone/animation": ["@motionone/animation@10.18.0", "", { "dependencies": { "@motionone/easing": "^10.18.0", "@motionone/types": "^10.17.1", "@motionone/utils": "^10.18.0", "tslib": "^2.3.1" } }, "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw=="],

    "@motionone/dom": ["@motionone/dom@10.12.0", "", { "dependencies": { "@motionone/animation": "^10.12.0", "@motionone/generators": "^10.12.0", "@motionone/types": "^10.12.0", "@motionone/utils": "^10.12.0", "hey-listen": "^1.0.8", "tslib": "^2.3.1" } }, "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw=="],
@@ -742,8 +744,6 @@

    "@react-navigation/routers": ["@react-navigation/routers@7.5.3", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-1tJHg4KKRJuQ1/EvJxatrMef3NZXEPzwUIUZ3n1yJ2t7Q97siwRtbynRpQG9/69ebbtiZ8W3ScOZF/OmhvM4Rg=="],

-    "@rnmapbox/maps": ["@rnmapbox/maps@10.2.10", "", { "dependencies": { "@turf/along": "6.5.0", "@turf/distance": "6.5.0", "@turf/helpers": "6.5.0", "@turf/length": "6.5.0", "@turf/nearest-point-on-line": "6.5.0", "@types/geojson": "^7946.0.7", "debounce": "^2.2.0" }, "peerDependencies": { "expo": ">=47.0.0", "mapbox-gl": "^2.9.0", "react": ">=17.0.0", "react-dom": ">= 17.0.0", "react-native": ">=0.69" }, "optionalPeers": ["expo", "mapbox-gl", "react-dom"] }, "sha512-OfjW0rHp5bUWfzBo5fZ7qdKwAzGoocXYTsSssSPVMxZ2Y7axuhcbmsO5bV6gg+BJs5RwEsghzwTIoGydBNUClA=="],
-
    "@rtsao/scc": ["@rtsao/scc@1.1.0", "", {}, "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="],

    "@sideway/address": ["@sideway/address@4.1.5", "", { "dependencies": { "@hapi/hoek": "^9.0.0" } }, "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q=="],
@@ -764,29 +764,17 @@

    "@tsconfig/node18": ["@tsconfig/node18@18.2.6", "", {}, "sha512-eAWQzAjPj18tKnDzmWstz4OyWewLUNBm9tdoN9LayzoboRktYx3Enk1ZXPmThj55L7c4VWYq/Bzq0A51znZfhw=="],

-    "@turf/along": ["@turf/along@6.5.0", "", { "dependencies": { "@turf/bearing": "^6.5.0", "@turf/destination": "^6.5.0", "@turf/distance": "^6.5.0", "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0" } }, "sha512-LLyWQ0AARqJCmMcIEAXF4GEu8usmd4Kbz3qk1Oy5HoRNpZX47+i5exQtmIWKdqJ1MMhW26fCTXgpsEs5zgJ5gw=="],
+    "@turf/distance": ["@turf/distance@7.3.4", "", { "dependencies": { "@turf/helpers": "7.3.4", "@turf/invariant": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-9drWgd46uHPPyzgrcRQLgSvdS/SjVlQ6ZIBoRQagS5P2kSjUbcOXHIMeOSPwfxwlKhEtobLyr+IiR2ns1TfF8w=="],

-    "@turf/bbox": ["@turf/bbox@7.3.4", "", { "dependencies": { "@turf/helpers": "7.3.4", "@turf/meta": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-D5ErVWtfQbEPh11yzI69uxqrcJmbPU/9Y59f1uTapgwAwQHQztDWgsYpnL3ns8r1GmPWLP8sGJLVTIk2TZSiYA=="],
+    "@turf/helpers": ["@turf/helpers@7.3.4", "", { "dependencies": { "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-U/S5qyqgx3WTvg4twaH0WxF3EixoTCfDsmk98g1E3/5e2YKp7JKYZdz0vivsS5/UZLJeZDEElOSFH4pUgp+l7g=="],

-    "@turf/bearing": ["@turf/bearing@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0" } }, "sha512-dxINYhIEMzgDOztyMZc20I7ssYVNEpSv04VbMo5YPQsqa80KO3TFvbuCahMsCAW5z8Tncc8dwBlEFrmRjJG33A=="],
+    "@turf/invariant": ["@turf/invariant@7.3.4", "", { "dependencies": { "@turf/helpers": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-88Eo4va4rce9sNZs6XiMJowWkikM3cS2TBhaCKlU+GFHdNf8PFEpiU42VDU8q5tOF6/fu21Rvlke5odgOGW4AQ=="],

-    "@turf/destination": ["@turf/destination@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0" } }, "sha512-4cnWQlNC8d1tItOz9B4pmJdWpXqS0vEvv65bI/Pj/genJnsL7evI0/Xw42RvEGROS481MPiU80xzvwxEvhQiMQ=="],
+    "@turf/length": ["@turf/length@7.3.4", "", { "dependencies": { "@turf/distance": "7.3.4", "@turf/helpers": "7.3.4", "@turf/meta": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-Dg1GnQ/B2go5NIWXt91N4L7XTjIgIWCftBSYIXkrpIM7QGjItzglek0Z5caytvb8ZRWXzZOGs8//+Q5we91WuQ=="],

-    "@turf/distance": ["@turf/distance@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0" } }, "sha512-xzykSLfoURec5qvQJcfifw/1mJa+5UwByZZ5TZ8iaqjGYN0vomhV9aiSLeYdUGtYRESZ+DYC/OzY+4RclZYgMg=="],
+    "@turf/meta": ["@turf/meta@7.3.4", "", { "dependencies": { "@turf/helpers": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-tlmw9/Hs1p2n0uoHVm1w3ugw1I6L8jv9YZrcdQa4SH5FX5UY0ATrKeIvfA55FlL//PGuYppJp+eyg/0eb4goqw=="],

-    "@turf/helpers": ["@turf/helpers@6.5.0", "", {}, "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw=="],
-
-    "@turf/invariant": ["@turf/invariant@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0" } }, "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg=="],
-
-    "@turf/length": ["@turf/length@6.5.0", "", { "dependencies": { "@turf/distance": "^6.5.0", "@turf/helpers": "^6.5.0", "@turf/meta": "^6.5.0" } }, "sha512-5pL5/pnw52fck3oRsHDcSGrj9HibvtlrZ0QNy2OcW8qBFDNgZ4jtl6U7eATVoyWPKBHszW3dWETW+iLV7UARig=="],
-
-    "@turf/line-intersect": ["@turf/line-intersect@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0", "@turf/line-segment": "^6.5.0", "@turf/meta": "^6.5.0", "geojson-rbush": "3.x" } }, "sha512-CS6R1tZvVQD390G9Ea4pmpM6mJGPWoL82jD46y0q1KSor9s6HupMIo1kY4Ny+AEYQl9jd21V3Scz20eldpbTVA=="],
-
-    "@turf/line-segment": ["@turf/line-segment@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0", "@turf/meta": "^6.5.0" } }, "sha512-jI625Ho4jSuJESNq66Mmi290ZJ5pPZiQZruPVpmHkUw257Pew0alMmb6YrqYNnLUuiVVONxAAKXUVeeUGtycfw=="],
-
-    "@turf/meta": ["@turf/meta@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0" } }, "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA=="],
-
-    "@turf/nearest-point-on-line": ["@turf/nearest-point-on-line@6.5.0", "", { "dependencies": { "@turf/bearing": "^6.5.0", "@turf/destination": "^6.5.0", "@turf/distance": "^6.5.0", "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0", "@turf/line-intersect": "^6.5.0", "@turf/meta": "^6.5.0" } }, "sha512-WthrvddddvmymnC+Vf7BrkHGbDOUu6Z3/6bFYUGv1kxw8tiZ6n83/VG6kHz4poHOfS0RaNflzXSkmCi64fLBlg=="],
+    "@turf/nearest-point-on-line": ["@turf/nearest-point-on-line@7.3.4", "", { "dependencies": { "@turf/distance": "7.3.4", "@turf/helpers": "7.3.4", "@turf/invariant": "7.3.4", "@turf/meta": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-DQrP3lRju83rIXFN68tUEpc7ki/eRwdwBkK2CTT4RAcyCxbcH2NGJPQv8dYiww/Ar77u1WLVn+aINXZH904dWw=="],

    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],

@@ -1482,8 +1470,6 @@

    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],

-    "geojson-rbush": ["geojson-rbush@3.2.0", "", { "dependencies": { "@turf/bbox": "*", "@turf/helpers": "6.x", "@turf/meta": "6.x", "@types/geojson": "7946.0.8", "rbush": "^3.0.1" } }, "sha512-oVltQTXolxvsz1sZnutlSuLDEcQAKYC/uXt9zDzJJ6bu0W+baTI8LZBaTup5afzibEH4N3jlq2p+a152wlBJ7w=="],
-
    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],

    "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
@@ -2082,14 +2068,10 @@

    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],

-    "quickselect": ["quickselect@2.0.0", "", {}, "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="],
-
    "range-parser": ["range-parser@1.2.1", "", {}, "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="],

    "raw-body": ["raw-body@2.5.3", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.4.24", "unpipe": "~1.0.0" } }, "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA=="],

-    "rbush": ["rbush@3.0.1", "", { "dependencies": { "quickselect": "^2.0.0" } }, "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w=="],
-
    "rc": ["rc@1.2.8", "", { "dependencies": { "deep-extend": "^0.6.0", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" }, "bin": { "rc": "./cli.js" } }, "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw=="],

    "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],
@@ -2694,10 +2676,6 @@

    "@testing-library/react-native/pretty-format": ["pretty-format@30.2.0", "", { "dependencies": { "@jest/schemas": "30.0.5", "ansi-styles": "^5.2.0", "react-is": "^18.3.1" } }, "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA=="],

-    "@turf/bbox/@turf/helpers": ["@turf/helpers@7.3.4", "", { "dependencies": { "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-U/S5qyqgx3WTvg4twaH0WxF3EixoTCfDsmk98g1E3/5e2YKp7JKYZdz0vivsS5/UZLJeZDEElOSFH4pUgp+l7g=="],
-
-    "@turf/bbox/@turf/meta": ["@turf/meta@7.3.4", "", { "dependencies": { "@turf/helpers": "7.3.4", "@types/geojson": "^7946.0.10", "tslib": "^2.8.1" } }, "sha512-tlmw9/Hs1p2n0uoHVm1w3ugw1I6L8jv9YZrcdQa4SH5FX5UY0ATrKeIvfA55FlL//PGuYppJp+eyg/0eb4goqw=="],
-
    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],

    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -2790,8 +2768,6 @@

    "foreground-child/signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],

-    "geojson-rbush/@types/geojson": ["@types/geojson@7946.0.8", "", {}, "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="],
-
    "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],

    "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
--- a/components/Map/MapSelectedPlatform.tsx
+++ b/components/Map/MapSelectedPlatform.tsx
@@ -0,0 +1,110 @@
+import { Platform } from "react-native";
+import MapSelected from "./MapSelected";
+import MapSelectedV2 from "./MapSelectedV2";
+import { LatLng } from "react-native-maps";
+
+/**
+ * Props untuk komponen MapSelectedPlatform
+ * Mendukung kedua format koordinat (LatLng untuk iOS, [number, number] untuk Android)
+ */
+export interface MapSelectedPlatformProps {
+  /** Region awal kamera */
+  initialRegion?: {
+    latitude?: number;
+    longitude?: number;
+    latitudeDelta?: number;
+    longitudeDelta?: number;
+  };
+
+  /** Lokasi yang dipilih (support kedua format) */
+  selectedLocation: LatLng | [number, number] | null;
+
+  /** Callback ketika lokasi dipilih */
+  onLocationSelect: (location: LatLng | [number, number]) => void;
+
+  /** Tinggi peta dalam pixels (default: 400) */
+  height?: number;
+
+  /** Tampilkan lokasi user (default: true) */
+  showUserLocation?: boolean;
+
+  /** Tampilkan tombol my location (default: true) */
+  showsMyLocationButton?: boolean;
+}
+
+/**
+ * Komponen Map yang otomatis memilih implementasi berdasarkan platform
+ * 
+ * Platform Strategy:
+ * - **iOS**: Menggunakan react-native-maps (MapSelected)
+ * - **Android**: Menggunakan @maplibre/maplibre-react-native (MapSelectedV2)
+ * 
+ * @example
+ * ```tsx
+ * <MapSelectedPlatform
+ *   selectedLocation={selectedLocation}
+ *   onLocationSelect={setSelectedLocation}
+ *   height={300}
+ * />
+ * ```
+ */
+export function MapSelectedPlatform({
+  initialRegion,
+  selectedLocation,
+  onLocationSelect,
+  height = 400,
+  showUserLocation = true,
+  showsMyLocationButton = true,
+}: MapSelectedPlatformProps) {
+  // iOS: Gunakan react-native-maps
+  // if (Platform.OS === "ios") {
+  //   return (
+  //     <MapSelected
+  //       initialRegion={initialRegion}
+  //       selectedLocation={(selectedLocation as LatLng) || { latitude: 0, longitude: 0 }}
+  //       setSelectedLocation={(location: LatLng) => {
+  //         onLocationSelect(location);
+  //       }}
+  //       height={height}
+  //     />
+  //   );
+  // }
+
+  // Android: Gunakan MapLibre
+  // Konversi dari LatLng ke [longitude, latitude] jika perlu
+  const androidLocation: [number, number] | undefined = selectedLocation
+    ? isLatLng(selectedLocation)
+      ? [selectedLocation.longitude, selectedLocation.latitude]
+      : selectedLocation
+    : undefined;
+
+  return (
+    <MapSelectedV2
+      selectedLocation={androidLocation}
+      onLocationSelect={(location: [number, number]) => {
+        // Konversi dari [longitude, latitude] ke LatLng untuk konsistensi
+        const latLng: LatLng = {
+          latitude: location[1],
+          longitude: location[0],
+        };
+        onLocationSelect(latLng);
+      }}
+      height={height}
+      // showUserLocation={showUserLocation}
+      // showsMyLocationButton={showsMyLocationButton}
+    />
+  );
+}
+
+/**
+ * Type guard untuk mengecek apakah object adalah LatLng
+ */
+function isLatLng(location: any): location is LatLng {
+  return (
+    location &&
+    typeof location.latitude === "number" &&
+    typeof location.longitude === "number"
+  );
+}
+
+export default MapSelectedPlatform;
--- a/components/Map/MapSelectedV2.tsx
+++ b/components/Map/MapSelectedV2.tsx
@@ -0,0 +1,150 @@
+import React, { useCallback, useRef, useEffect, useState } from "react";
+import { StyleSheet, View, ActivityIndicator } from "react-native";
+import {
+  MapView,
+  Camera,
+  PointAnnotation,
+} from "@maplibre/maplibre-react-native";
+import * as Location from "expo-location";
+
+const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+const DEBOUNCE_MS = 800;
+
+interface Props {
+  selectedLocation?: [number, number];
+  onLocationSelect?: (location: [number, number]) => void;
+  height?: number;
+}
+
+export function MapSelectedV2({
+  selectedLocation,
+  onLocationSelect,
+  height = 400,
+}: Props) {
+  const lastTapRef = useRef<number>(0);
+  const cameraRef = useRef<any>(null);
+
+  const [userLocation, setUserLocation] = useState<[number, number] | null>(
+    null,
+  );
+  const [isLoadingLocation, setIsLoadingLocation] = useState(true);
+
+  // ✅ Ambil lokasi user saat pertama mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const { status } = await Location.requestForegroundPermissionsAsync();
+        if (status !== "granted") {
+          console.log("Permission lokasi ditolak");
+          setIsLoadingLocation(false);
+          return;
+        }
+
+        const location = await Location.getCurrentPositionAsync({
+          accuracy: Location.Accuracy.Balanced,
+        });
+
+        const coords: [number, number] = [
+          location.coords.longitude,
+          location.coords.latitude,
+        ];
+
+        setUserLocation(coords);
+
+        // ✅ Fly ke posisi user jika belum ada selectedLocation
+        if (!selectedLocation && cameraRef.current) {
+          cameraRef.current.flyTo(coords, 1000);
+        }
+      } catch (error) {
+        console.log("Gagal ambil lokasi:", error);
+      } finally {
+        setIsLoadingLocation(false);
+      }
+    })();
+  }, [isLoadingLocation]);
+
+  const handleMapPress = useCallback(
+    (event: any) => {
+      const now = Date.now();
+      if (now - lastTapRef.current < DEBOUNCE_MS) return;
+      lastTapRef.current = now;
+
+      const coords = event?.geometry?.coordinates;
+      if (!coords || coords.length < 2) return;
+
+      onLocationSelect?.([coords[0], coords[1]]);
+    },
+    [onLocationSelect],
+  );
+
+  // Center awal kamera:
+  // 1. Jika ada selectedLocation → pakai itu
+  // 2. Jika ada userLocation → pakai itu
+  // 3. Fallback → Bali
+  const initialCenter: [number, number] = selectedLocation ??
+    userLocation ?? [115.1756897, -8.737109];
+
+  return (
+    <View style={{ height, width: "100%" }}>
+      {/* Loading indicator saat fetch lokasi */}
+      {isLoadingLocation && (
+        <View style={styles.loadingOverlay}>
+          <ActivityIndicator size="small" color="#0a1f44" />
+        </View>
+      )}
+
+      <MapView
+        style={StyleSheet.absoluteFillObject}
+        mapStyle={MAP_STYLE}
+        onPress={handleMapPress}
+        logoEnabled={false}
+      >
+        <Camera
+          ref={cameraRef}
+          defaultSettings={{
+            centerCoordinate: initialCenter,
+            zoomLevel: 14,
+          }}
+        />
+
+        {selectedLocation && (
+          <PointAnnotation
+            id="selected-location"
+            key="selected-location"
+            coordinate={selectedLocation}
+          >
+            <View style={styles.dot} />
+          </PointAnnotation>
+        )}
+      </MapView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dot: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#0a1f44",
+    borderWidth: 2,
+    borderColor: "#fff",
+  },
+  loadingOverlay: {
+    position: "absolute",
+    top: 10,
+    alignSelf: "center",
+    zIndex: 10,
+    backgroundColor: "#fff",
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+  },
+});
+
+export default MapSelectedV2;
--- a/components/Map/MapsV2Custom.tsx
+++ b/components/Map/MapsV2Custom.tsx
@@ -0,0 +1,542 @@
+import { ReactNode, useCallback, useMemo, useState, useEffect } from "react";
+import {
+  Image,
+  StyleSheet,
+  View,
+  ViewStyle,
+  StyleProp,
+  Animated,
+  Easing,
+} from "react-native";
+
+import API_IMAGE from "@/constants/api-storage";
+import { MainColor } from "@/constants/color-palet";
+import {
+  Camera,
+  MapView,
+  PointAnnotation,
+} from "@maplibre/maplibre-react-native";
+
+// Style peta default
+const DEFAULT_MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+
+// Region default (Bali, Indonesia)
+const DEFAULT_REGION = {
+  latitude: -8.737109,
+  longitude: 115.1756897,
+  latitudeDelta: 0.1,
+  longitudeDelta: 0.1,
+};
+
+// Zoom level default
+const DEFAULT_ZOOM_LEVEL = 12;
+
+// Ukuran marker default
+const DEFAULT_MARKER_SIZE = 30;
+
+/**
+ * Interface data marker untuk MapsV2Custom
+ */
+export interface MapMarker {
+  id: string;
+  coordinate: [number, number]; // [longitude, latitude]
+  imageId?: string;
+  imageUrl?: string;
+  onSelected?: () => void;
+  [key: string]: any; // Izinkan properti custom tambahan
+}
+
+/**
+ * Interface region untuk positioning kamera
+ */
+export interface Region {
+  latitude: number;
+  longitude: number;
+  latitudeDelta: number;
+  longitudeDelta: number;
+}
+
+/**
+ * Props untuk komponen MapsV2Custom
+ */
+export interface MapsV2CustomProps {
+  /** URL style peta custom (default: liberty style) */
+  mapStyle?: string;
+
+  /** Override style container */
+  style?: StyleProp<ViewStyle>;
+
+  /** Override style MapView */
+  mapViewStyle?: StyleProp<ViewStyle>;
+
+  /** Region awal kamera */
+  initialRegion?: Region;
+
+  /** Zoom level awal (default: 12) */
+  zoomLevel?: number;
+
+  /**
+   * Data marker - mendukung single marker atau array of markers
+   * @example
+   * // Single marker
+   * markers={{ id: "1", coordinate: [115.175, -8.737], imageId: "abc" }}
+   *
+   * @example
+   * // Multiple markers
+   * markers={[
+   *   { id: "1", coordinate: [115.175, -8.737], imageId: "abc" },
+   *   { id: "2", coordinate: [115.180, -8.740], imageId: "xyz" }
+   * ]}
+   */
+  markers?: MapMarker | MapMarker[];
+
+  /** Custom renderer marker */
+  renderMarker?: (marker: MapMarker) => ReactNode;
+
+  /** Callback ketika marker ditekan */
+  onMarkerPress?: (marker: MapMarker) => void;
+
+  /** Gunakan style marker image default (default: true jika markers disediakan) */
+  showDefaultMarkers?: boolean;
+
+  /** Ukuran untuk marker default (default: 30) */
+  markerSize?: number;
+
+  /** Warna border untuk marker default */
+  markerBorderColor?: string;
+
+  /** Children tambahan untuk MapView (custom overlays, dll.) */
+  children?: ReactNode;
+
+  /** Handler untuk tekan pada peta */
+  onMapPress?: (coordinates: [number, number]) => void;
+
+  /** Test identifier */
+  testID?: string;
+
+  /** Props tambahan untuk Camera */
+  cameraProps?: Partial<Omit<React.ComponentProps<typeof Camera>, "centerCoordinate" | "zoomLevel">>;
+
+  /** Props tambahan untuk MapView */
+  mapViewProps?: Partial<React.ComponentProps<typeof MapView>>;
+
+  /** Props tambahan untuk PointAnnotation */
+  annotationProps?: Partial<{
+    id: string;
+    title?: string;
+    snippet?: string;
+    selected?: boolean;
+    draggable?: boolean;
+    coordinate: number[];
+    anchor?: { x: number; y: number };
+    onSelected?: (payload: any) => void;
+    onDeselected?: (payload: any) => void;
+    onDragStart?: (payload: any) => void;
+    onDragEnd?: (payload: any) => void;
+    onDrag?: (payload: any) => void;
+    style?: StyleProp<ViewStyle>;
+  }>;
+}
+
+/**
+ * Normalisasi markers ke array - mendukung single marker atau array
+ */
+function normalizeMarkers(markers: MapMarker | MapMarker[] | undefined): MapMarker[] {
+  if (!markers) return [];
+  return Array.isArray(markers) ? markers : [markers];
+}
+
+/**
+ * Validasi marker memiliki props yang required (hanya development mode)
+ */
+function validateMarker(marker: MapMarker, index: number): boolean {
+  if (!marker.id) {
+    console.warn(`[MapsV2Custom] Marker pada index ${index} tidak memiliki prop 'id' yang required`);
+    return false;
+  }
+  if (!marker.coordinate || !Array.isArray(marker.coordinate) || marker.coordinate.length !== 2) {
+    console.warn(`[MapsV2Custom] Marker pada index ${index} tidak memiliki prop 'coordinate' yang required. Format yang diharapkan: [longitude, latitude]`);
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Komponen skeleton untuk loading state dengan shimmer animation
+ */
+function SkeletonMarker({
+  size = DEFAULT_MARKER_SIZE,
+  borderColor = MainColor.darkblue,
+  loadingColor = "#C5C5C5",
+}: {
+  size?: number;
+  borderColor?: string;
+  loadingColor?: string;
+}) {
+  const shimmerAnim = useMemo(() => new Animated.Value(0), []);
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmerAnim, {
+          toValue: 1,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(shimmerAnim, {
+          toValue: 0,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [shimmerAnim]);
+
+  const shimmerOpacity = shimmerAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.3, 0.7],
+  });
+
+  return (
+    <View
+      style={[
+        styles.markerContainer,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderColor,
+          backgroundColor: loadingColor,
+        },
+      ]}
+    >
+      <Animated.View
+        style={[
+          styles.skeletonShimmer,
+          {
+            opacity: shimmerOpacity,
+            backgroundColor: "#FFFFFF",
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+/**
+ * Komponen fallback untuk error state
+ */
+function FallbackMarker({
+  size = DEFAULT_MARKER_SIZE,
+  borderColor = MainColor.darkblue,
+  iconColor = MainColor.darkblue,
+}: {
+  size?: number;
+  borderColor?: string;
+  iconColor?: string;
+}) {
+  return (
+    <View
+      style={[
+        styles.markerContainer,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderColor,
+          backgroundColor: "#F5F5F5",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+      ]}
+    >
+      <View style={[styles.fallbackIcon, { borderColor: iconColor }]}>
+        <View style={[styles.fallbackIconInner, { backgroundColor: iconColor }]} />
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Props untuk DefaultMarker component
+ */
+export interface DefaultMarkerProps {
+  /** ID file image dari API */
+  imageId?: string;
+  /** URL image langsung */
+  imageUrl?: string;
+  /** Ukuran marker (default: 30) */
+  size?: number;
+  /** Warna border marker (default: darkblue) */
+  borderColor?: string;
+  /** Warna skeleton loading (default: gray) */
+  loadingColor?: string;
+  /** Warna icon fallback (default: darkblue) */
+  fallbackIconColor?: string;
+}
+
+/**
+ * Komponen marker default dengan image, border, shadows, loading skeleton, dan error fallback
+ */
+export function DefaultMarker({
+  imageId,
+  imageUrl,
+  size = DEFAULT_MARKER_SIZE,
+  borderColor = MainColor.darkblue,
+  loadingColor = MainColor.white_gray,
+  fallbackIconColor = MainColor.darkblue,
+}: DefaultMarkerProps) {
+  const [hasError, setHasError] = useState(false);
+  const uri = imageId ? API_IMAGE.GET({ fileId: imageId }) : imageUrl;
+
+  // Debug log untuk development
+  if (__DEV__ && uri) {
+    console.log("[DefaultMarker] Image URI:", uri);
+  }
+
+  const handleError = useCallback((error: any) => {
+    console.log("[DefaultMarker] Image error:", error?.nativeEvent?.error || error);
+    setHasError(true);
+  }, []);
+
+  const handleLoad = useCallback(() => {
+    console.log("[DefaultMarker] Image loaded successfully");
+  }, []);
+
+  // Jika tidak ada URI atau error, tampilkan fallback
+  if (!uri || hasError) {
+    return (
+      <FallbackMarker
+        size={size}
+        borderColor={borderColor}
+        iconColor={fallbackIconColor}
+      />
+    );
+  }
+
+  // Render image dengan placeholder (defaultSource) untuk loading state
+  return (
+    <View
+      style={[
+        styles.markerContainer,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderColor,
+          backgroundColor: loadingColor, // Background color sebagai placeholder
+        },
+      ]}
+    >
+      <Image
+        source={{ uri }}
+        style={[styles.markerImage, { width: size, height: size }]}
+        resizeMode="cover"
+        onLoad={handleLoad}
+        onError={handleError}
+        // Placeholder untuk Android saat loading
+        defaultSource={require("@/assets/images/icon.png")}
+      />
+    </View>
+  );
+}
+
+/**
+ * Komponen Map yang reusable dan customizable menggunakan Mapbox/MapLibre
+ *
+ * Mendukung single marker, multiple markers, atau empty state.
+ *
+ * @example
+ * // Single marker
+ * <MapsV2Custom
+ *   markers={{
+ *     id: "1",
+ *     coordinate: [115.1756897, -8.737109],
+ *     imageId: "file-123"
+ *   }}
+ * />
+ *
+ * @example
+ * // Multiple markers
+ * <MapsV2Custom
+ *   markers={[
+ *     { id: "1", coordinate: [115.175, -8.737], imageId: "abc" },
+ *     { id: "2", coordinate: [115.180, -8.740], imageId: "xyz" }
+ *   ]}
+ * />
+ *
+ * @example
+ * // Peta dengan custom style dan custom markers
+ * <MapsV2Custom
+ *   mapStyle="https://your-custom-style.com"
+ *   markers={markers}
+ *   markerSize={40}
+ *   markerBorderColor={MainColor.primary}
+ * />
+ *
+ * @example
+ * // Dengan custom marker renderer
+ * <MapsV2Custom
+ *   markers={data}
+ *   renderMarker={(marker) => <CustomMarker {...marker} />}
+ * />
+ *
+ * @example
+ * // Peta kosong (tanpa markers)
+ * <MapsV2Custom
+ *   initialRegion={{ latitude: -6.2, longitude: 106.8, latitudeDelta: 0.1, longitudeDelta: 0.1 }}
+ * />
+ */
+export function MapsV2Custom({
+  mapStyle = DEFAULT_MAP_STYLE,
+  style = styles.container,
+  mapViewStyle = styles.map,
+  initialRegion = DEFAULT_REGION,
+  zoomLevel = DEFAULT_ZOOM_LEVEL,
+  markers,
+  renderMarker,
+  onMarkerPress,
+  showDefaultMarkers = true,
+  markerSize = DEFAULT_MARKER_SIZE,
+  markerBorderColor = MainColor.darkblue,
+  children,
+  onMapPress,
+  testID,
+  cameraProps,
+  mapViewProps,
+  annotationProps,
+}: MapsV2CustomProps) {
+  // Normalisasi markers ke array (mendukung single atau multiple)
+  const normalizedMarkers = useMemo(
+    () => {
+      const arr = normalizeMarkers(markers);
+      // Filter marker yang invalid
+      return arr.filter((marker) => {
+        if (!marker.id) {
+          console.warn("[MapsV2Custom] Marker tanpa id akan diabaikan");
+          return false;
+        }
+        if (!marker.coordinate || marker.coordinate.length !== 2) {
+          console.warn("[MapsV2Custom] Marker tanpa coordinate valid akan diabaikan");
+          return false;
+        }
+        return true;
+      });
+    },
+    [markers]
+  );
+
+  // Validasi markers dalam development mode
+  useMemo(() => {
+    if (__DEV__) {
+      normalizedMarkers.forEach((marker, index) => {
+        validateMarker(marker, index);
+      });
+    }
+  }, [normalizedMarkers]);
+
+  const handleMarkerSelected = useCallback(
+    (marker: MapMarker) => {
+      if (marker.onSelected) {
+        marker.onSelected();
+      }
+      if (onMarkerPress) {
+        onMarkerPress(marker);
+      }
+    },
+    [onMarkerPress]
+  );
+
+  const renderMarkerComponent = useCallback(
+    (marker: MapMarker): ReactNode => {
+      if (renderMarker) {
+        return renderMarker(marker);
+      }
+
+      if (showDefaultMarkers) {
+        return (
+          <DefaultMarker
+            imageId={marker.imageId}
+            imageUrl={marker.imageUrl}
+            size={markerSize}
+            borderColor={markerBorderColor}
+          />
+        );
+      }
+
+      return null;
+    },
+    [renderMarker, showDefaultMarkers, markerSize, markerBorderColor]
+  );
+
+  return (
+    <View style={style} testID={testID}>
+      <MapView style={mapViewStyle} mapStyle={mapStyle} {...mapViewProps}>
+        <Camera
+          zoomLevel={zoomLevel}
+          centerCoordinate={[initialRegion.longitude, initialRegion.latitude]}
+          {...cameraProps}
+        />
+
+        {normalizedMarkers.map((marker) => (
+          <PointAnnotation
+            key={marker.id}
+            id={marker.id}
+            coordinate={marker.coordinate}
+            onSelected={() => handleMarkerSelected(marker)}
+            {...annotationProps}
+          >
+            {renderMarkerComponent(marker) as any}
+          </PointAnnotation>
+        ))}
+
+        {children}
+      </MapView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  map: { flex: 1 },
+  markerContainer: {
+    overflow: "hidden",
+    borderWidth: 1,
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+  },
+  markerImage: {
+    width: "100%",
+    height: "100%",
+  },
+  skeletonShimmer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 999,
+  },
+  fallbackIcon: {
+    width: "60%",
+    height: "60%",
+    borderRadius: 999,
+    borderWidth: 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  fallbackIconInner: {
+    width: "40%",
+    height: "40%",
+    borderRadius: 999,
+  },
+});
--- a/components/Map/SelectLocationMap.tsx
+++ b/components/Map/SelectLocationMap.tsx
@@ -0,0 +1,272 @@
+import React, { useState, useCallback, useRef } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from "react-native";
+import {
+  MapView,
+  Camera,
+  PointAnnotation,
+  MarkerView,
+} from "@maplibre/maplibre-react-native";
+import * as Location from "expo-location";
+import { useFocusEffect, useRouter } from "expo-router";
+
+const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+
+type Coordinate = {
+  latitude: number;
+  longitude: number;
+};
+
+export default function SelectLocationMap() {
+  const router = useRouter();
+  const annotationRef = useRef<any>(null);
+
+  const [selectedCoord, setSelectedCoord] = useState<Coordinate | null>(null);
+  const [address, setAddress] = useState<string>("");
+  const [isLoadingAddress, setIsLoadingAddress] = useState(false);
+  const [cameraCenter, setCameraCenter] = useState<[number, number]>([
+    106.8272, -6.1751,
+  ]);
+
+  const reverseGeocode = async (coord: Coordinate): Promise<string> => {
+    try {
+      const { status } = await Location.getForegroundPermissionsAsync();
+      if (status !== "granted") {
+        await Location.requestForegroundPermissionsAsync();
+      }
+
+      const results = await Location.reverseGeocodeAsync({
+        latitude: coord.latitude,
+        longitude: coord.longitude,
+      });
+
+      if (!results || results.length === 0) return "Alamat tidak ditemukan";
+
+      const loc = results[0];
+      const parts = [
+        loc.street,
+        loc.district,
+        loc.subregion,
+        loc.city,
+        loc.region,
+        loc.country,
+      ].filter(Boolean);
+
+      return parts.length > 0 ? parts.join(", ") : "Alamat tidak ditemukan";
+    } catch (error: any) {
+      console.log("reverseGeocode error:", error?.message || error);
+      return "Gagal mengambil alamat";
+    }
+  };
+
+  const handleMapPress = useCallback(async (event: any) => {
+    try {
+      const coordinates = event?.geometry?.coordinates;
+      if (!coordinates) return;
+
+      const [longitude, latitude] = coordinates;
+      if (!longitude || !latitude) return;
+
+      const coord: Coordinate = { latitude, longitude };
+
+      // ✅ Update state koordinat, BUKAN ganti key
+      setSelectedCoord(coord);
+      setCameraCenter([longitude, latitude]);
+      setAddress("");
+      setIsLoadingAddress(true);
+
+      const resolvedAddress = await reverseGeocode(coord);
+      setAddress(resolvedAddress);
+      setIsLoadingAddress(false);
+
+      // ✅ Refresh annotation tanpa unmount
+      annotationRef.current?.refresh?.();
+    } catch (error: any) {
+      console.log("handleMapPress error:", error?.message || error);
+      setIsLoadingAddress(false);
+    }
+  }, []);
+
+  const handleConfirm = () => {
+    if (!selectedCoord) return;
+    router.navigate({
+      pathname: "/maps/create",
+      params: {
+        latitude: String(selectedCoord.latitude),
+        longitude: String(selectedCoord.longitude),
+        address,
+      },
+    });
+  };
+
+  // Sembunyikan marker sebelum halaman unmount
+  useFocusEffect(
+    useCallback(() => {
+      return () => {
+        // Cleanup saat leave — sembunyikan marker dulu sebelum unmount
+        setSelectedCoord(null);
+      };
+    }, []),
+  );
+
+  return (
+    <View style={styles.container}>
+      <MapView style={styles.map} mapStyle={MAP_STYLE} onPress={handleMapPress}>
+        <Camera
+          zoomLevel={14}
+          centerCoordinate={cameraCenter}
+          animationMode="flyTo"
+          animationDuration={300}
+        />
+
+        {/* ✅ Key statis — tidak pernah berubah, tidak unmount/remount */}
+        {selectedCoord && (
+          <MarkerView
+            id="selected-marker"
+            coordinate={[selectedCoord.longitude, selectedCoord.latitude]}
+            anchor={{ x: 0.5, y: 1 }} // Anchor bawah tengah
+          >
+            <View style={styles.pin}>
+              <View style={styles.pinDot} />
+            </View>
+          </MarkerView>
+        )}
+      </MapView>
+
+      {/* Bottom Sheet */}
+      <View style={styles.bottomSheet}>
+        {!selectedCoord ? (
+          <Text style={styles.hintText}>
+            Tap pada peta untuk memilih lokasi
+          </Text>
+        ) : (
+          <>
+            <View style={styles.coordRow}>
+              <View style={styles.coordItem}>
+                <Text style={styles.coordLabel}>Latitude</Text>
+                <Text style={styles.coordValue}>
+                  {selectedCoord.latitude.toFixed(6)}
+                </Text>
+              </View>
+              <View style={styles.dividerVertical} />
+              <View style={styles.coordItem}>
+                <Text style={styles.coordLabel}>Longitude</Text>
+                <Text style={styles.coordValue}>
+                  {selectedCoord.longitude.toFixed(6)}
+                </Text>
+              </View>
+            </View>
+
+            <View style={styles.addressContainer}>
+              <Text style={styles.coordLabel}>Alamat</Text>
+              {isLoadingAddress ? (
+                <ActivityIndicator size="small" color="#0a1f44" />
+              ) : (
+                <Text style={styles.addressText} numberOfLines={2}>
+                  {address || "-"}
+                </Text>
+              )}
+            </View>
+
+            <TouchableOpacity
+              style={[
+                styles.confirmButton,
+                isLoadingAddress && styles.confirmButtonDisabled,
+              ]}
+              onPress={handleConfirm}
+              disabled={isLoadingAddress}
+            >
+              <Text style={styles.confirmButtonText}>Konfirmasi Lokasi</Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  map: { flex: 1 },
+  pin: {
+    width: 28,
+    height: 28,
+    borderRadius: 100,
+    backgroundColor: "#0a1f44",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    borderColor: "#fff",
+  },
+  pinDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 100,
+    backgroundColor: "#fff",
+  },
+  bottomSheet: {
+    backgroundColor: "#fff",
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    paddingBottom: 32,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    elevation: 10,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    minHeight: 140,
+    justifyContent: "center",
+  },
+  hintText: {
+    textAlign: "center",
+    color: "#888",
+    fontSize: 14,
+  },
+  coordRow: {
+    flexDirection: "row",
+    marginBottom: 12,
+  },
+  coordItem: { flex: 1 },
+  dividerVertical: {
+    width: 1,
+    backgroundColor: "#e0e0e0",
+    marginHorizontal: 12,
+  },
+  coordLabel: {
+    fontSize: 11,
+    color: "#888",
+    marginBottom: 2,
+  },
+  coordValue: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0a1f44",
+  },
+  addressContainer: { marginBottom: 16 },
+  addressText: {
+    fontSize: 13,
+    color: "#333",
+    lineHeight: 18,
+  },
+  confirmButton: {
+    backgroundColor: "#0a1f44",
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: "center",
+  },
+  confirmButtonDisabled: {
+    backgroundColor: "#aaa",
+  },
+  confirmButtonText: {
+    color: "#fff",
+    fontWeight: "700",
+    fontSize: 15,
+  },
+});
--- a/components/Notification/NotificationInitializer.tsx
+++ b/components/Notification/NotificationInitializer.tsx
@@ -77,8 +77,12 @@ export default function NotificationInitializer() {
        });

        console.log("✅ Device token berhasil didaftarkan ke backend");
-      } catch (error) {
-        console.error("❌ Gagal mendaftarkan device token:", error);
+      } catch (error: any) {
+        // Log error detail tapi jangan crash aplikasi
+        console.error("❌ Gagal mendaftarkan device token:", error?.message);
+        console.error("Response status:", error?.response?.status);
+        console.error("Response data:", error?.response?.data);
+        // Skip logout - biarkan user tetap bisa pakai app meski notif gagal
      }
    };

--- a/components/_ShareComponent/SkeletonCustom.tsx
+++ b/components/_ShareComponent/SkeletonCustom.tsx
@@ -49,7 +49,7 @@ const CustomSkeleton: React.FC<CustomSkeletonProps> = ({
          right: 0,
          height: 100,
          backgroundColor: MainColor.soft_darkblue,
-          borderRadius: 4,
+          borderRadius: 1,
        }}
      />
    </View>
--- a/docs/PODS.back
+++ b/docs/PODS.back
@@ -0,0 +1,101 @@
+NOTE:
+
+Untuk Development Selanjutnya:
+    Sekarang Anda bisa menjalankan:
+
+     1 # Untuk run iOS dev client
+     2 bun run ios
+     3 
+     4 # Atau dengan Expo
+     5 bunx expo run:ios
+
+    Jika di masa depan terjadi error serupa, Anda bisa gunakan command ini:
+
+     1 cd ios
+     2 rm -rf Pods Podfile.lock
+     3 pod install
+
+
+
+use_modular_headers!
+
+require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
+require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
+
+require 'json'
+podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
+
+ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
+ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
+ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
+ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
+platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
+
+prepare_react_native_project!
+
+target 'HIPMIBadungConnect' do
+  use_expo_modules!
+
+  if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
+    config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
+  else
+    config_command = [
+      'npx',
+      'expo-modules-autolinking',
+      'react-native-config',
+      '--json',
+      '--platform',
+      'ios'
+    ]
+  end
+
+  config = use_native_modules!(config_command)
+
+  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
+  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
+
+
+  use_react_native!(
+    :path => config[:reactNativePath],
+    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/..",
+    :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
+  )
+
+  pod 'Firebase'
+  pod 'Firebase/Messaging'
+
+  # @generated begin post_installer - expo prebuild (DO NOT MODIFY) sync-4092f82b887b5b9edb84642c2a56984d69b9a403
+  post_install do |installer|
+# @generated begin @maplibre/maplibre-react-native:post-install - expo prebuild (DO NOT MODIFY) sync-6e76c80af0d70c0003d06822dd59b7c729fca472
+    $MLRN.post_install(installer)
+# @generated end @maplibre/maplibre-react-native:post-install
+
+    # Fix all script phases with incorrect paths
+    installer.pods_project.targets.each do |target|
+      target.build_phases.each do |phase|
+        next unless phase.respond_to?(:shell_script)
+        
+        # Fix duplicated path issue
+        if phase.shell_script.include?('with-environment.sh')
+          # Remove any existing path and use proper relative path
+          phase.shell_script = phase.shell_script.gsub(
+            %r{(/.*?/node_modules/react-native)+/scripts/xcode/with-environment.sh},
+            '${PODS_ROOT}/../../node_modules/react-native/scripts/xcode/with-environment.sh'
+          )
+        end
+      end
+    end
+    
+    # Standard React Native post install
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false,
+      :ccache_enabled => podfile_properties['apple.ccacheEnabled'] == 'true',
+    )
+  end
+  # @generated end post_installer
+ 
+end
--- a/docs/prompt-for-qwen-code.md
+++ b/docs/prompt-for-qwen-code.md
@@ -55,10 +55,10 @@ Component yang digunakan: components/_ShareComponent/NewWrapper.tsx

 <!-- START Prompt Admin Refactoring -->
 <!-- Pindah kode ke Screen Component -->
-File source: app/(application)/admin/forum/[id]/list-report-posting.tsx
-Folder tujuan: screens/Admin/Forum
-Nama file utama: ScreenForumDetailReportPosting.tsx
-Nama function utama: Admin_ScreenForumDetailReportPosting
+File source: app/(application)/admin/event/[id]/[status]/index.tsx
+Folder tujuan: screens/Admin/Event
+Nama file utama: ScreenEventDetail.tsx
+Nama function utama: Admin_ScreenEventDetail
 File komponen wrapper: components/_ShareComponent/NewWrapper.tsx

 Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source" 
@@ -66,7 +66,7 @@ Analisa juga file "Nama file utama" , jika belum menggunakan NewWrapper pada fil


 <!-- Penerapan Pagination -->
-Function fecth: apiAdminForumListReportPostingById
+Function fecth: apiAdminForumCommentById
 File function fetch: service/api-admin/api-admin-forum.ts

 Terapkan pagination pada file "Nama file utama"
@@ -80,7 +80,7 @@ Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
 <!-- END Prompt Admin Refactoring -->

 <!-- Additional -->
-File refrensi: screens/Admin/Forum/ScreenForumReportPosting.tsx
+File refrensi: screens/Admin/Forum/ScreenForumDetailReportPosting.tsx
 Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang hampir sama

 Untuk refrensi tampilan Box bisa anda gunakan dari file: screens/Admin/Donation/BoxDonationListOfDonatur.tsx dan buatkan komponen yang mirip untuk list of donatur dengan nama file: BoxDonationListOfInvestor.tsx
@@ -111,10 +111,12 @@ Jika tidak ada props page maka tambahkan props page dan default page: "1" ( stri
 Jika butuh refrensi FlatList bisa lihat pada  file components/_ShareComponent/NewWrapper.tsx

 <!-- Create Box -->
-File Utama: screens/Admin/Investment/ScreenInvestmentStatus.tsx
-Folder tujuan: screens/Admin/Investment
-Reffrensi: screens/Admin/Donation/BoxDonationStatus.tsx
-Buatkan box component baru pada file "File Utama" di bagian renderItem agar lebih rapi buat file baru dengan nama BoxInvestmentStatus.tsx
+File Utama: app/(application)/(user)/maps/[id]/edit.tsx
+Folder tujuan: screens/Maps
+Nama file utama: ScreenMapsEdit.tsx
+Nama function utama: Maps_ScreenMapsEdit
+
+Buatkan file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source" 

 <!-- END Create Box -->

--- a/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
+++ b/ios/HIPMIBadungConnect.xcodeproj/project.pbxproj
--- a/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/ios/HIPMIBadungConnect.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -0,0 +1,15 @@
+{
+  "originHash" : "e70d3525c8e2819a8b34f22909815dab5c700c25a06c32388f3930f7b3627768",
+  "pins" : [
+    {
+      "identity" : "maplibre-gl-native-distribution",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/maplibre/maplibre-gl-native-distribution",
+      "state" : {
+        "revision" : "c68c970ff3ece56cfc3b36849db70167fa208beb",
+        "version" : "6.17.1"
+      }
+    }
+  ],
+  "version" : 3
+}
--- a/ios/HIPMIBadungConnect/Info.plist
+++ b/ios/HIPMIBadungConnect/Info.plist
@@ -19,7 +19,7 @@
    <key>CFBundlePackageType</key>
    <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
    <key>CFBundleShortVersionString</key>
-    <string>1.0.1</string>
+    <string>1.0.2</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleURLTypes</key>
@@ -39,7 +39,7 @@
      </dict>
    </array>
    <key>CFBundleVersion</key>
-    <string>21</string>
+    <string>3</string>
    <key>ITSAppUsesNonExemptEncryption</key>
    <false/>
    <key>LSMinimumSystemVersion</key>
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -35,13 +35,6 @@ target 'HIPMIBadungConnect' do
  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']

-  # @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
-  pre_install do |installer|
-    # @generated begin @rnmapbox/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-ea4905840bf9fcea0acc62e92aa2e784f9d760f8
-    $RNMapboxMaps.pre_install(installer)
-    # @generated end @rnmapbox/maps-pre_installer
-  end
-  # @generated end pre_installer

  use_react_native!(
    :path => config[:reactNativePath],
@@ -56,9 +49,9 @@ target 'HIPMIBadungConnect' do

  # @generated begin post_installer - expo prebuild (DO NOT MODIFY) sync-4092f82b887b5b9edb84642c2a56984d69b9a403
  post_install do |installer|
-    # @generated begin @rnmapbox/maps-post_installer - expo prebuild (DO NOT MODIFY) sync-c4e8f90e96f6b6c6ea9241dd7b52ab5f57f7bf36
-    $RNMapboxMaps.post_install(installer)
-    # @generated end @rnmapbox/maps-post_installer
+# @generated begin @maplibre/maplibre-react-native:post-install - expo prebuild (DO NOT MODIFY) sync-6e76c80af0d70c0003d06822dd59b7c729fca472
+    $MLRN.post_install(installer)
+# @generated end @maplibre/maplibre-react-native:post-install

    # Fix all script phases with incorrect paths
    installer.pods_project.targets.each do |target|
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
  },
  "dependencies": {
    "@expo/vector-icons": "^15.0.2",
+    "@maplibre/maplibre-react-native": "^10.4.2",
    "@react-native-async-storage/async-storage": "2.2.0",
    "@react-native-community/datetimepicker": "8.4.4",
    "@react-native-firebase/app": "^23.7.0",
@@ -21,7 +22,6 @@
    "@react-navigation/elements": "^2.3.8",
    "@react-navigation/native": "^7.1.6",
    "@react-navigation/native-stack": "^7.3.10",
-    "@rnmapbox/maps": "^10.2.7",
    "@types/lodash": "^4.17.20",
    "@types/react-native-vector-icons": "^6.4.18",
    "axios": "^1.11.0",
--- a/screens/Admin/Event/BoxEventDetail.tsx
+++ b/screens/Admin/Event/BoxEventDetail.tsx
@@ -0,0 +1,85 @@
+import { BadgeCustom, BaseBox, Spacing, StackCustom, TextCustom } from "@/components";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import { colorBadgeStatus } from "@/utils/colorBadge";
+import { dateTimeView } from "@/utils/dateTimeView";
+import _ from "lodash";
+
+interface EventDetailData {
+  Author?: {
+    username?: string;
+  };
+  title?: string;
+  lokasi?: string;
+  EventMaster_TipeAcara?: {
+    name?: string;
+  };
+  tanggal?: string;
+  tanggalSelesai?: string;
+  deskripsi?: string;
+  catatan?: string;
+}
+
+interface BoxEventDetailProps {
+  data: EventDetailData | null;
+  status: string;
+}
+
+export function BoxEventDetail({ data, status }: BoxEventDetailProps) {
+  const listData = [
+    {
+      label: "Pembuat Event",
+      value: data?.Author?.username || "-",
+    },
+    {
+      label: "Judul Event",
+      value: data?.title || "-",
+    },
+    {
+      label: "Status",
+      value: data ? (
+        <BadgeCustom color={colorBadgeStatus({ status })}>
+          {_.startCase(status)}
+        </BadgeCustom>
+      ) : (
+        "-"
+      ),
+    },
+    {
+      label: "Lokasi",
+      value: data?.lokasi || "-",
+    },
+    {
+      label: "Tipe Acara",
+      value: data?.EventMaster_TipeAcara?.name || "-",
+    },
+    {
+      label: "Mulai Event",
+      value: data?.tanggal ? dateTimeView({ date: data.tanggal }) : "-",
+    },
+    {
+      label: "Event Berakhir",
+      value: data?.tanggalSelesai
+        ? dateTimeView({ date: data.tanggalSelesai })
+        : "-",
+    },
+    {
+      label: "Deskripsi",
+      value: data?.deskripsi || "-",
+    },
+  ];
+
+  return (
+    <BaseBox>
+      <StackCustom>
+        {listData.map((item, i) => (
+          <GridSpan_4_8
+            key={i}
+            label={<TextCustom bold>{item.label}</TextCustom>}
+            value={<TextCustom>{item.value}</TextCustom>}
+          />
+        ))}
+      </StackCustom>
+      <Spacing />
+    </BaseBox>
+  );
+}
--- a/screens/Admin/Event/EventDetailDrawer.tsx
+++ b/screens/Admin/Event/EventDetailDrawer.tsx
@@ -0,0 +1,37 @@
+import { DrawerCustom, MenuDrawerDynamicGrid } from "@/components";
+import { IconList } from "@/components/_Icon/IconComponent";
+import { router } from "expo-router";
+
+interface EventDetailDrawerProps {
+  isVisible: boolean;
+  onClose: () => void;
+  eventId: string;
+}
+
+export function EventDetailDrawer({
+  isVisible,
+  onClose,
+  eventId,
+}: EventDetailDrawerProps) {
+  return (
+    <DrawerCustom
+      isVisible={isVisible}
+      closeDrawer={onClose}
+      height={"auto"}
+    >
+      <MenuDrawerDynamicGrid
+        data={[
+          {
+            label: "Daftar Peserta",
+            icon: <IconList />,
+            path: `/admin/event/${eventId}/list-of-participants`,
+          },
+        ]}
+        onPressItem={(item) => {
+          onClose();
+          router.push(item.path as any);
+        }}
+      />
+    </DrawerCustom>
+  );
+}
--- a/screens/Admin/Event/EventDetailQRCode.tsx
+++ b/screens/Admin/Event/EventDetailQRCode.tsx
@@ -0,0 +1,26 @@
+import { BaseBox, LoaderCustom, Spacing, StackCustom, TextCustom } from "@/components";
+import QRCode from "react-native-qrcode-svg";
+
+interface EventDetailQRCodeProps {
+  qrValue: string;
+  isLoading: boolean;
+}
+
+export function EventDetailQRCode({ qrValue, isLoading }: EventDetailQRCodeProps) {
+  return (
+    <BaseBox>
+      <StackCustom style={{ alignItems: "center" }}>
+        <TextCustom bold>QR Code Event</TextCustom>
+        {isLoading ? (
+          <LoaderCustom />
+        ) : (
+          <QRCode
+            value={qrValue}
+            size={200}
+          />
+        )}
+      </StackCustom>
+      <Spacing />
+    </BaseBox>
+  );
+}
--- a/screens/Admin/Event/ScreenEventDetail.tsx
+++ b/screens/Admin/Event/ScreenEventDetail.tsx
@@ -0,0 +1,163 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ActionIcon, AlertDefaultSystem } from "@/components";
+import { IconDot } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
+import ReportBox from "@/components/Box/ReportBox";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
+import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
+import { DEEP_LINK_URL } from "@/service/api-config";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useMemo, useState } from "react";
+import Toast from "react-native-toast-message";
+import { BoxEventDetail } from "./BoxEventDetail";
+import { EventDetailDrawer } from "./EventDetailDrawer";
+import { EventDetailQRCode } from "./EventDetailQRCode";
+
+export function Admin_ScreenEventDetail() {
+  const { user } = useAuth();
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [loadData, setLoadData] = useState(false);
+
+  const deepLinkURL = `${DEEP_LINK_URL}/event/${id}/confirmation?userId=${user?.id}`;
+  const deepLinkURLDEV = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
+  const isDevLink =
+    process.env.NODE_ENV === "development" ? deepLinkURLDEV : deepLinkURL;
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id]),
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminEventById({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  const rightComponent = (
+    <ActionIcon
+      icon={<IconDot size={ICON_SIZE_BUTTON} />}
+      onPress={() => {
+        setOpenDrawer(true);
+      }}
+    />
+  );
+
+  const handlerSubmit = async () => {
+    try {
+      const response = await funUpdateStatusEvent({
+        id: id as string,
+        changeStatus: "publish",
+        data: { catatan: "", senderId: user?.id as string },
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mempublikasikan event",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Event berhasil dipublikasikan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const headerComponent = useMemo(
+    () => (
+      <AdminBackButtonAntTitle
+        title={`Detail Data`}
+        rightComponent={
+          status === "publish" || status === "history"
+            ? rightComponent
+            : undefined
+        }
+      />
+    ),
+    [status],
+  );
+
+  const footerComponent = useMemo(() => {
+    if (status === "review") {
+      return (
+        <AdminButtonReview
+          onPublish={() => {
+            AlertDefaultSystem({
+              title: "Publish",
+              message: "Apakah anda yakin ingin mempublikasikan data ini?",
+              textLeft: "Batal",
+              textRight: "Ya",
+              onPressRight: () => handlerSubmit(),
+            });
+          }}
+          onReject={() => {
+            router.push(`/admin/event/${id}/reject-input?status=${status}`);
+          }}
+        />
+      );
+    }
+
+    if (status === "reject") {
+      return (
+        <AdminButtonReject
+          title="Tambah Catatan"
+          onReject={() => {
+            router.push(`/admin/event/${id}/reject-input?status=${status}`);
+          }}
+        />
+      );
+    }
+
+    return null;
+  }, [status, id]);
+
+  return (
+    <>
+      <NewWrapper
+        headerComponent={headerComponent}
+        footerComponent={footerComponent}
+      >
+        <BoxEventDetail data={data} status={status as string} />
+
+        {data?.catatan && (status === "reject" || status === "review") && (
+          <ReportBox text={data.catatan} />
+        )}
+
+        {(status === "publish" || status === "history") && (
+          <EventDetailQRCode qrValue={isDevLink} isLoading={loadData} />
+        )}
+      </NewWrapper>
+
+      <EventDetailDrawer
+        isVisible={openDrawer}
+        onClose={() => setOpenDrawer(false)}
+        eventId={id as string}
+      />
+    </>
+  );
+}
--- a/screens/Admin/Forum/ScreenForumDetailReportComment.tsx
+++ b/screens/Admin/Forum/ScreenForumDetailReportComment.tsx
@@ -0,0 +1,292 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { IconDot } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import {
+  apiAdminForumCommentById,
+  apiAdminForumDeactivateComment,
+  apiAdminForumListReportCommentById,
+} from "@/service/api-admin/api-admin-forum";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useMemo, useState } from "react";
+import { RefreshControl } from "react-native";
+import Toast from "react-native-toast-message";
+
+export function Admin_ScreenForumDetailReportComment() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [openDrawerPage, setOpenDrawerPage] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [selectedReport, setSelectedReport] = useState({
+    id: "",
+    username: "",
+    kategori: "",
+    keterangan: "",
+    deskripsi: "",
+  });
+
+  // Load data komentar saat screen fokus
+  useFocusEffect(
+    useCallback(() => {
+      onLoadDataKomentar();
+    }, [id]),
+  );
+
+  // Pagination untuk list report comment
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      const response = await apiAdminForumListReportCommentById({
+        id: id as string,
+        page: String(page),
+      });
+
+      if (response.success) {
+        return { data: response.data };
+      }
+      return { data: [] };
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+  });
+
+  const onLoadDataKomentar = async () => {
+    try {
+      const response = await apiAdminForumCommentById({
+        id: id as string,
+        category: "get-one",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Render item untuk daftar report comment
+  const renderItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => (
+      <AdminBasicBox
+        key={index}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+        onPress={() => {
+          setOpenDrawerAction(true);
+          setSelectedReport({
+            id: item?.id,
+            username: item?.User?.username,
+            kategori: item?.ForumMaster_KategoriReport?.title,
+            keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
+            deskripsi: item?.deskripsi,
+          });
+        }}
+      >
+        <StackCustom gap={0}>
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Pelapor</TextCustom>}
+            rightItem={
+              <TextCustom truncate={1}>
+                {item?.User?.username || "-"}
+              </TextCustom>
+            }
+          />
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jenis Laporan</TextCustom>}
+            rightItem={
+              <TextCustom truncate={2}>
+                {item
+                  ? item?.ForumMaster_KategoriReport?.title
+                    ? item?.ForumMaster_KategoriReport?.title
+                    : "Lainnya"
+                  : "-"}
+              </TextCustom>
+            }
+          />
+        </StackCustom>
+      </AdminBasicBox>
+    ),
+    [],
+  );
+
+  // Header component dengan back button dan menu
+  const headerComponent = useMemo(
+    () => (
+      <AdminBackButtonAntTitle
+        title="Report Komentar"
+        rightComponent={
+          <ActionIcon
+            icon={<IconDot size={16} color={MainColor.darkblue} />}
+            onPress={() => setOpenDrawerPage(true)}
+          />
+        }
+      />
+    ),
+    [],
+  );
+
+  // Detail komentar component
+  const ListHeader = useMemo(
+    () => (
+      <AdminBasicBox>
+        <StackCustom gap={"sm"}>
+          <GridSpan_4_8
+            label={<TextCustom bold>Username</TextCustom>}
+            value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
+          />
+          <GridSpan_4_8
+            label={<TextCustom bold>Komentar</TextCustom>}
+            value={<TextCustom>{data?.komentar || "-"}</TextCustom>}
+          />
+        </StackCustom>
+      </AdminBasicBox>
+    ),
+    [data],
+  );
+
+  // Buat komponen-komponen pagination
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada report komentar",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      isInitialLoad: pagination.isInitialLoad,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  return (
+    <>
+      <NewWrapper
+        listData={pagination.listData}
+        renderItem={renderItem}
+        headerComponent={headerComponent}
+        ListHeaderComponent={ListHeader}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        onEndReached={pagination.loadMore}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      />
+
+      {/* Drawer untuk menu halaman (hapus komentar) */}
+      <DrawerCustom
+        isVisible={openDrawerPage}
+        closeDrawer={() => setOpenDrawerPage(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconTrash />,
+              label: "Hapus Komentar",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Komentar",
+              message: "Apakah Anda yakin ingin menghapus komentar ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: async () => {
+                const response = await apiAdminForumDeactivateComment({
+                  id: id as string,
+                  data: {
+                    senderId: user?.id as string,
+                  },
+                });
+
+                if (!response.success) {
+                  Toast.show({
+                    type: "error",
+                    text1: "Komentar gagal dihapus",
+                  });
+                  return;
+                }
+
+                setOpenDrawerPage(false);
+                Toast.show({
+                  type: "success",
+                  text1: "Komentar berhasil dihapus",
+                });
+                router.back();
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Drawer untuk detail report comment */}
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        <StackCustom>
+          <GridSpan_4_8
+            label={<TextCustom bold>Pelapor</TextCustom>}
+            value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
+          />
+
+          {selectedReport?.kategori && (
+            <>
+              <GridSpan_4_8
+                label={<TextCustom bold>Kategori Report</TextCustom>}
+                value={
+                  <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
+                }
+              />
+              <GridSpan_4_8
+                label={<TextCustom bold>Keterangan</TextCustom>}
+                value={
+                  <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
+                }
+              />
+            </>
+          )}
+
+          {selectedReport?.deskripsi && (
+            <GridSpan_4_8
+              label={<TextCustom bold>Deskripsi</TextCustom>}
+              value={
+                <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>
+              }
+            />
+          )}
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}
--- a/screens/Admin/Forum/ScreenForumDetailReportPosting.tsx
+++ b/screens/Admin/Forum/ScreenForumDetailReportPosting.tsx
@@ -2,39 +2,31 @@
 import {
  ActionIcon,
  AlertDefaultSystem,
-  BadgeCustom,
-  BaseBox,
-  CenterCustom,
  DrawerCustom,
  MenuDrawerDynamicGrid,
  StackCustom,
  TextCustom,
 } from "@/components";
-import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconDot } from "@/components/_Icon/IconComponent";
 import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import {
-  ICON_SIZE_BUTTON,
-  PAGINATION_DEFAULT_TAKE,
-} from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
-import { usePagination } from "@/hooks/use-pagination";
 import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
 import {
  apiAdminForumDeactivatePosting,
  apiAdminForumListReportPostingById,
  apiAdminForumPostingById,
 } from "@/service/api-admin/api-admin-forum";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
 import { useCallback, useMemo, useState } from "react";
-import { RefreshControl, View } from "react-native";
-import { Divider } from "react-native-paper";
+import { RefreshControl } from "react-native";
 import Toast from "react-native-toast-message";

 export function Admin_ScreenForumDetailReportPosting() {
@@ -55,12 +47,12 @@ export function Admin_ScreenForumDetailReportPosting() {
  useFocusEffect(
    useCallback(() => {
      onLoadDataPosting();
-    }, [id])
+    }, [id]),
  );

  // Pagination untuk list report
  const pagination = usePagination({
-    fetchFunction: async (page, searchQuery) => {
+    fetchFunction: async (page) => {
      const response = await apiAdminForumListReportPostingById({
        id: id as string,
        page: String(page),
@@ -91,41 +83,50 @@ export function Admin_ScreenForumDetailReportPosting() {

  // Render item untuk daftar report
  const renderItem = useCallback(
-    ({ item }: { item: any }) => (
-      <View>
-        <GridSpan_NewComponent
-          text1={
-            <CenterCustom>
-              <ActionIcon
-                icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                onPress={() => {
-                  setOpenDrawerAction(true);
-                  setSelectedReport({
-                    id: item?.id,
-                    username: item?.User?.username,
-                    kategori: item?.ForumMaster_KategoriReport?.title,
-                    keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
-                    deskripsi: item?.deskripsi,
-                  });
-                }}
-              />
-            </CenterCustom>
-          }
-          text2={
-            <TextCustom truncate>
-              {item?.User?.username || "-"}
-            </TextCustom>
-          }
-          text3={
-            <TextCustom truncate={2}>
-              {item?.ForumMaster_KategoriReport?.title || "-"}
-            </TextCustom>
-          }
-        />
-        <Divider />
-      </View>
+    ({ item, index }: { item: any; index: number }) => (
+      <AdminBasicBox
+        key={index}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+        onPress={() => {
+          setOpenDrawerAction(true);
+          setSelectedReport({
+            id: item?.id,
+            username: item?.User?.username,
+            kategori: item?.ForumMaster_KategoriReport?.title,
+            keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
+            deskripsi: item?.deskripsi,
+          });
+        }}
+      >
+        <StackCustom gap={0}>
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Pelapor</TextCustom>}
+            rightItem={
+              <TextCustom truncate={1}>
+                {item?.User?.username || "-"}
+              </TextCustom>
+            }
+          />
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jenis Laporan</TextCustom>}
+            rightItem={
+              <TextCustom truncate={2}>
+                {item
+                  ? item?.ForumMaster_KategoriReport?.title
+                    ? item?.ForumMaster_KategoriReport?.title
+                    : "Lainnya"
+                  : "-"}
+              </TextCustom>
+            }
+          />
+        </StackCustom>
+      </AdminBasicBox>
    ),
-    []
+    [],
  );

  // Header component dengan detail postingan
@@ -141,75 +142,33 @@ export function Admin_ScreenForumDetailReportPosting() {
        }
      />
    ),
-    []
+    [],
  );

  // Detail postingan component
-  const postingDetailComponent = useMemo(
+  const ListHeader = useMemo(
    () => (
-      <BaseBox>
-        <StackCustom gap={"sm"}>
-          <GridSpan_NewComponent
-            text1={<TextCustom bold>Username</TextCustom>}
-            text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
-          />
-
-          <GridSpan_NewComponent
-            text1={<TextCustom bold>Status</TextCustom>}
-            text2={
-              data && data?.ForumMaster_StatusPosting?.status ? (
-                <BadgeCustom
-                  color={
-                    data?.ForumMaster_StatusPosting?.status === "Open"
-                      ? MainColor.green
-                      : MainColor.red
-                  }
-                >
-                  {data?.ForumMaster_StatusPosting?.status === "Open"
-                    ? "Open"
-                    : "Close"}
-                </BadgeCustom>
-              ) : (
-                <TextCustom>{"-"}</TextCustom>
-              )
+      <AdminBasicBox>
+        <StackCustom gap={0}>
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom bold>Username</TextCustom>}
+            rightItem={
+              <TextCustom>{data ? data?.Author?.username : "-"}</TextCustom>
            }
          />

-          <GridSpan_NewComponent
-            text1={<TextCustom bold>Postingan</TextCustom>}
-            text2={<TextCustom>{data?.diskusi || "-"}</TextCustom>}
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom bold>Postingan</TextCustom>}
+            rightItem={<TextCustom>{data ? data?.diskusi : "-"}</TextCustom>}
          />
        </StackCustom>
-      </BaseBox>
+      </AdminBasicBox>
    ),
-    [data]
-  );
-
-  // Box title untuk daftar report
-  const reportListTitleComponent = useMemo(
-    () => <AdminComp_BoxTitle title="Daftar Report Posting" />,
-    []
-  );
-
-  // Header untuk kolom daftar report
-  const reportListHeaderComponent = useMemo(
-    () => (
-      <StackCustom gap={"sm"}>
-        {postingDetailComponent}
-        {reportListTitleComponent}
-        <GridSpan_NewComponent
-          text1={
-            <TextCustom bold align="center">
-              Aksi
-            </TextCustom>
-          }
-          text2={<TextCustom bold>Pelapor</TextCustom>}
-          text3={<TextCustom bold>Kategori Report</TextCustom>}
-        />
-        <Divider />
-      </StackCustom>
-    ),
-    [postingDetailComponent, reportListTitleComponent]
+    [data],
  );

  // Buat komponen-komponen pagination
@@ -231,7 +190,7 @@ export function Admin_ScreenForumDetailReportPosting() {
        listData={pagination.listData}
        renderItem={renderItem}
        headerComponent={headerComponent}
-        ListHeaderComponent={reportListHeaderComponent}
+        ListHeaderComponent={ListHeader}
        ListEmptyComponent={ListEmptyComponent}
        ListFooterComponent={ListFooterComponent}
        onEndReached={pagination.loadMore}
@@ -295,7 +254,6 @@ export function Admin_ScreenForumDetailReportPosting() {
        />
      </DrawerCustom>

-      {/* Drawer untuk detail report */}
      <DrawerCustom
        isVisible={openDrawerAction}
        closeDrawer={() => setOpenDrawerAction(false)}
--- a/screens/Admin/Forum/ScreenForumListComment.tsx
+++ b/screens/Admin/Forum/ScreenForumListComment.tsx
@@ -0,0 +1,105 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { StackCustom, TextCustom } from "@/components";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
+import { router, useLocalSearchParams } from "expo-router";
+import { useCallback, useMemo, useState } from "react";
+import { RefreshControl } from "react-native";
+import { Divider } from "react-native-paper";
+
+export function Admin_ScreenForumListComment() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+  const [selectedComment, setSelectedComment] = useState({
+    id: "",
+    komentar: "",
+  });
+
+  // Pagination untuk list comment
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      const response = await apiAdminForumCommentById({
+        id: id as string,
+        category: "get-all",
+        page: String(page),
+      });
+
+      if (response.success) {
+        return { data: response.data };
+      }
+      return { data: [] };
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+  });
+
+  // Render item untuk daftar komentar
+  const renderItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => (
+      <AdminBasicBox
+        key={index}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+        onPress={() => {
+          router.push(`/admin/forum/${item.id}/list-report-comment`);
+        }}
+      >
+        <StackCustom gap={"md"}>
+          <TextCustom truncate={1}>
+            Report : {item?.countReport || 0}
+          </TextCustom>
+          <Divider />
+          <TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
+        </StackCustom>
+      </AdminBasicBox>
+    ),
+    [],
+  );
+
+  // Header component dengan back button
+  const headerComponent = useMemo(
+    () => <AdminBackButtonAntTitle title="Daftar Komentar" />,
+    [],
+  );
+
+  // Buat komponen-komponen pagination
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada komentar",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      isInitialLoad: pagination.isInitialLoad,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  return (
+    <>
+      <NewWrapper
+        listData={pagination.listData}
+        renderItem={renderItem}
+        headerComponent={headerComponent}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        onEndReached={pagination.loadMore}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      />
+    </>
+  );
+}
--- a/screens/Admin/Forum/ScreenForumReportComment.tsx
+++ b/screens/Admin/Forum/ScreenForumReportComment.tsx
@@ -1,16 +1,15 @@
 import { SearchInput, StackCustom, TextCustom } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { useCallback, useMemo, useState } from "react";
 import { RefreshControl } from "react-native";
-import { Divider } from "react-native-paper";

 export function Admin_ScreenForumReportComment() {
  const [search, setSearch] = useState("");
@@ -25,7 +24,6 @@ export function Admin_ScreenForumReportComment() {
      });

      if (response.success) {
-        console.log("CEK", JSON.stringify(response.data, null, 2));
        return { data: response.data };
      } else {
        return { data: [] };
@@ -36,6 +34,12 @@ export function Admin_ScreenForumReportComment() {
    dependencies: [],
  });

+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, []),
+  );
+
  // Komponen search input
  const searchComponent = useMemo(
    () => (
@@ -73,47 +77,27 @@ export function Admin_ScreenForumReportComment() {
        }}
      >
        <StackCustom gap={0}>
-          <GridSpan_4_8
-            label={<TextCustom>Pelapor</TextCustom>}
-            value={
-              <TextCustom truncate={1}>
-                {item?.User?.username || "-"}
+           <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jumlah Report</TextCustom>}
+            rightItem={
+              <TextCustom truncate={2}>
+                {item?.count || "-"}
              </TextCustom>
            }
          />
-          <GridSpan_4_8
-            label={<TextCustom>Komentar</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.Forum_Komentar?.komentar || "-"}
-              </TextCustom>
-            }
-          />
-          {item?.deskripsi ?
-         <GridSpan_4_8
-            label={<TextCustom>Deskripsi</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.deskripsi|| "-"}
-              </TextCustom>
-            }
-          />   :  <GridSpan_4_8
-            label={<TextCustom>Jenis Laporan</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.ForumMaster_KategoriReport?.title || "-"}
-              </TextCustom>
-            }
-          />
-        }
-          {/* <GridSpan_4_8
-            label={<TextCustom>Jenis Laporan</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.ForumMaster_KategoriReport?.title || "-"}
-              </TextCustom>
-            }
-          /> */}
+
+            <GridTwoView
+              spanLeft={5}
+              spanRight={7}
+              leftItem={<TextCustom>Komentar</TextCustom>}
+              rightItem={
+                <TextCustom truncate={2}>
+                  {item?.Forum_Komentar?.komentar || "-"}
+                </TextCustom>
+              }
+            />
        </StackCustom>
      </AdminBasicBox>
    ),
--- a/screens/Admin/Forum/ScreenForumReportPosting.tsx
+++ b/screens/Admin/Forum/ScreenForumReportPosting.tsx
@@ -1,14 +1,14 @@
 import { SearchInput, StackCustom, TextCustom } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { useCallback, useMemo, useState } from "react";
 import { RefreshControl } from "react-native";

@@ -25,6 +25,7 @@ export function Admin_ScreenForumReportPosting() {
      });

      if (response.success) {
+
        return { data: response.data };
      } else {
        return { data: [] };
@@ -35,6 +36,12 @@ export function Admin_ScreenForumReportPosting() {
    dependencies: [],
  });

+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, []),
+  );
+
  // Komponen search input
  const searchComponent = useMemo(
    () => (
@@ -72,17 +79,21 @@ export function Admin_ScreenForumReportPosting() {
        }}
      >
        <StackCustom gap={0}>
-          <GridSpan_4_8
-            label={<TextCustom>Pelapor</TextCustom>}
-            value={
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jumlah Report</TextCustom>}
+            rightItem={
              <TextCustom truncate={1}>
-                {item?.User?.username || "-"}
+                {item?.count|| "-"}
              </TextCustom>
            }
          />
-          <GridSpan_4_8
-            label={<TextCustom>Postingan</TextCustom>}
-            value={
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Postingan</TextCustom>}
+            rightItem={
              <TextCustom truncate={2}>
                {item?.Forum_Posting?.diskusi || "-"}
              </TextCustom>
--- a/screens/Authentication/VerificationView.tsx
+++ b/screens/Authentication/VerificationView.tsx
@@ -5,7 +5,6 @@ import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCheckCodeOtp } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
-import { registerForPushNotificationsAsync } from "@/utils/notifications";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -17,8 +16,6 @@ import Toast from "react-native-toast-message";
 export default function VerificationView() {
  const { nomor } = useLocalSearchParams<{ nomor: string }>();

-  console.log("[NOMOR]", nomor);
-
  const [inputOtp, setInputOtp] = useState<string>("");
  const [userNumber, setUserNumber] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
--- a/screens/Home/bottomFeatureSection.tsx
+++ b/screens/Home/bottomFeatureSection.tsx
@@ -1,40 +1,15 @@
 import { ClickableCustom, TextCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
-import React, { useCallback, useState } from "react";
+import { router } from "expo-router";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { stylesHome } from "./homeViewStyle";
-import { router, useFocusEffect } from "expo-router";
-import { apiJobGetAll } from "@/service/api-client/api-job";
-
-export default function Home_BottomFeatureSection() {
-  const [listData, setListData] = useState<any>([]);
-
-  const onLoadData = async () => {
-    try {
-      const response = await apiJobGetAll({
-        category: "beranda",
-      });
-
-      // console.log("[DATA JOB]", JSON.stringify(response.data, null, 2));
-      const result = response.data
-        .sort(
-          (a: any, b: any) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-        )
-        .slice(0, 2);
-      setListData(result);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [])
-  );

+export default function Home_BottomFeatureSection({
+  listData,
+}: {
+  listData: any[] | null;
+}) {
  return (
    <>
      <ClickableCustom onPress={() => router.push("/job")}>
@@ -49,7 +24,7 @@ export default function Home_BottomFeatureSection() {

          <View style={stylesHome.vacancyList}>
            {/* Vacancy Item 1 */}
-            {listData.map((item: any, index: number) => (
+            {listData?.map((item: any, index: number) => (
              <View style={stylesHome.vacancyItem} key={index}>
                <View style={stylesHome.vacancyDetails}>
                  <TextCustom bold color="yellow" truncate size="large">
--- a/screens/Home/tabsList.ts
+++ b/screens/Home/tabsList.ts
@@ -33,8 +33,10 @@ export const tabsHome: any = ({
    activeIcon: "map",
    label: "Maps",
    path: "/maps",
-    isActive: Platform.OS === "ios" ? true : false,
-    disabled: Platform.OS === "ios" ? false : true,
+    // isActive: Platform.OS === "ios" ? true : false,
+    // disabled: Platform.OS === "ios" ? false : true,
+    isActive: true,
+    disabled: false,
  },
  {
    id: "profile",
--- a/screens/Maps/DrawerMaps.tsx
+++ b/screens/Maps/DrawerMaps.tsx
@@ -0,0 +1,129 @@
+import {
+  DrawerCustom,
+  DummyLandscapeImage,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  Grid,
+  ButtonCustom,
+} from "@/components";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { openInDeviceMaps } from "@/utils/openInDeviceMaps";
+import { FontAwesome, Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+interface TypeDrawerMaps {
+  openDrawer: boolean;
+  setOpenDrawer: (value: boolean) => void;
+  selected: {
+    id: string;
+    bidangBisnis: string;
+    nomorTelepon: string;
+    alamatBisnis: string;
+    namePin: string;
+    imageId: string;
+    portofolioId: string;
+    latitude: number;
+    longitude: number;
+  };
+}
+
+export default function DrawerMaps({
+  openDrawer,
+  setOpenDrawer,
+  selected,
+}: TypeDrawerMaps) {
+  return (
+    <DrawerCustom
+      isVisible={openDrawer}
+      closeDrawer={() => setOpenDrawer(false)}
+      height={"auto"}
+    >
+      {selected.imageId && (
+        <>
+          <DummyLandscapeImage height={200} imageId={selected.imageId} />
+          <Spacing />
+        </>
+      )}
+      <StackCustom gap={"xs"}>
+        <GridTwoView
+          spanLeft={2}
+          spanRight={10}
+          leftItem={
+            <FontAwesome
+              name="building-o"
+              size={ICON_SIZE_SMALL}
+              color="white"
+            />
+          }
+          rightItem={<TextCustom>{selected.namePin}</TextCustom>}
+        />
+
+        <GridTwoView
+          spanLeft={2}
+          spanRight={10}
+          leftItem={
+            <Ionicons
+              name="list-outline"
+              size={ICON_SIZE_SMALL}
+              color="white"
+            />
+          }
+          rightItem={<TextCustom>{selected.bidangBisnis}</TextCustom>}
+        />
+
+        <GridTwoView
+          spanLeft={2}
+          spanRight={10}
+          leftItem={
+            <Ionicons
+              name="call-outline"
+              size={ICON_SIZE_SMALL}
+              color="white"
+            />
+          }
+          rightItem={<TextCustom>{selected.nomorTelepon}</TextCustom>}
+        />
+        <GridTwoView
+          spanLeft={2}
+          spanRight={10}
+          leftItem={
+            <Ionicons
+              name="location-outline"
+              size={ICON_SIZE_SMALL}
+              color="white"
+            />
+          }
+          rightItem={<TextCustom>{selected.alamatBisnis}</TextCustom>}
+        />
+
+        <Grid>
+          <Grid.Col span={6} style={{ paddingRight: 10 }}>
+            <ButtonCustom
+              onPress={() => {
+                setOpenDrawer(false);
+                router.push(`/portofolio/${selected.portofolioId}`);
+              }}
+            >
+              Detail
+            </ButtonCustom>
+          </Grid.Col>
+          <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+            <ButtonCustom
+              onPress={() => {
+                openInDeviceMaps({
+                  latitude: selected.latitude,
+                  longitude: selected.longitude,
+                  title: selected.namePin,
+                });
+              }}
+            >
+              Buka Maps
+            </ButtonCustom>
+          </Grid.Col>
+        </Grid>
+      </StackCustom>
+    </DrawerCustom>
+  );
+}
--- a/screens/Maps/MapsView2.tsx
+++ b/screens/Maps/MapsView2.tsx
@@ -1,28 +1,115 @@
-import { TextCustom, ViewWrapper } from "@/components";
-import Mapbox from "@rnmapbox/maps";
-import { View } from "react-native";
+import { useCallback, useState } from "react";

-// Nonaktifkan telemetry (opsional, untuk privasi)
-Mapbox.setTelemetryEnabled(false);
+import { apiMapsGetAll } from "@/service/api-client/api-maps";
+import { useFocusEffect } from "expo-router";

-// Gunakan style OSM gratis
-const MAP_STYLE_URL = "https://tiles.stadiamaps.com/styles/osm_bright.json";
+import { ViewWrapper } from "@/components";
+import { MapMarker, MapsV2Custom } from "@/components/Map/MapsV2Custom";
+
+import DrawerMaps from "./DrawerMaps";
+import { StyleSheet } from "react-native";
+
+interface TypeMaps {
+  id: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+  namePin: string;
+  latitude: number;
+  longitude: number;
+  authorId: string;
+  portofolioId: string;
+  imageId: string;
+  pinId: string | null;
+  Portofolio: {
+    id: string;
+    namaBisnis: string;
+    logoId: string;
+    alamatKantor: string;
+    tlpn: string;
+    MasterBidangBisnis: {
+      id: string;
+      name: string;
+    };
+  };
+}

-// Atau gunakan MapLibre default:
-// const MAP_STYLE_URL = 'https://demotiles.maplibre.org/style.json';
 export default function MapsView2() {
+  const [list, setList] = useState<TypeMaps[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [selected, setSelected] = useState({
+    id: "",
+    bidangBisnis: "",
+    nomorTelepon: "",
+    alamatBisnis: "",
+    namePin: "",
+    imageId: "",
+    portofolioId: "",
+    latitude: 0,
+    longitude: 0,
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, []),
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiMapsGetAll();
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const markers: MapMarker[] = list?.map((item) => ({
+    id: item.id,
+    coordinate: [item.longitude, item.latitude] as [number, number],
+    imageId: item.Portofolio.logoId,
+    onSelected: () => {
+      setOpenDrawer(true);
+      setSelected({
+        id: item.id,
+        bidangBisnis: item.Portofolio.MasterBidangBisnis.name,
+        nomorTelepon: item.Portofolio.tlpn,
+        alamatBisnis: item.Portofolio.alamatKantor,
+        namePin: item.namePin,
+        imageId: item.imageId,
+        portofolioId: item.Portofolio.id,
+        latitude: item.latitude,
+        longitude: item.longitude,
+      });
+    },
+  })) || [];
+
  return (
    <>
      <ViewWrapper>
-      <View style={{ flex: 1 }}>
-          <Mapbox.MapView style={{ flex: 1 }}>
-          <Mapbox.Camera
-            centerCoordinate={[115.2126, -8.65]} // Bali
-            zoomLevel={12}
-          />
-        </Mapbox.MapView>
-      </View>
+        <MapsV2Custom markers={markers} />
      </ViewWrapper>
+
+      <DrawerMaps
+        openDrawer={openDrawer}
+        setOpenDrawer={setOpenDrawer}
+        selected={selected}
+      />
    </>
  );
 }
+
+const styles = StyleSheet.create({
+  map: {
+    flex: 1,
+    width: "50%",
+    maxHeight: "50%",
+  },
+});
--- a/screens/Maps/ScreenMapsCreate.tsx
+++ b/screens/Maps/ScreenMapsCreate.tsx
@@ -0,0 +1,186 @@
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  InformationBox,
+  BaseBox,
+  Spacing,
+  TextInputCustom,
+  LandscapeFrameUploaded,
+  ButtonCenteredOnly,
+} from "@/components";
+import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiMapsCreate } from "@/service/api-client/api-maps";
+import { uploadFileService } from "@/service/upload-service";
+import { IFileData } from "@/utils/pickFile";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { LatLng } from "react-native-maps";
+import Toast from "react-native-toast-message";
+
+/**
+ * Screen untuk create maps
+ *
+ * Fitur:
+ * - Pilih lokasi dari map
+ * - Input nama pin
+ * - Upload foto lokasi
+ * - Submit data maps
+ */
+export function Maps_ScreenMapsCreate() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+
+  // State management
+  // Format: LatLng { latitude, longitude } untuk konsistensi
+  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
+  const [name, setName] = useState<string>("");
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  /**
+   * Handle submit form
+   * Upload image (jika ada) dan submit data maps ke API
+   */
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+
+      // Prepare data tanpa image dulu
+      let newData: any = {
+        authorId: user?.id,
+        portofolioId: id,
+        namePin: name,
+        latitude: selectedLocation?.latitude,
+        longitude: selectedLocation?.longitude,
+      };
+
+      // Upload image jika ada
+      if (image) {
+        const responseUpload = await uploadFileService({
+          dirId: DIRECTORY_ID.map_image,
+          imageUri: image?.uri,
+        });
+
+        if (!responseUpload?.data?.id) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const imageId = responseUpload?.data?.id;
+
+        newData = {
+          authorId: user?.id,
+          portofolioId: id,
+          namePin: name,
+          latitude: selectedLocation?.latitude,
+          longitude: selectedLocation?.longitude,
+          imageId: imageId,
+        };
+      }
+
+      // Submit ke API
+      const response = await apiMapsCreate({
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambahkan map",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Map berhasil ditambahkan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * Handle image upload
+   */
+  const handleImageUpload = async () => {
+    try {
+      await pickFile({
+        allowedType: "image",
+        setImageUri: (file) => {
+          setImage(file);
+        },
+      });
+    } catch (error) {
+      console.log("[MapsCreate] Image upload error:", error);
+    }
+  };
+
+  /**
+   * Footer component dengan button submit
+   */
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={!selectedLocation || name === ""}
+        onPress={handleSubmit}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  /**
+   * Render screen dengan NewWrapper
+   */
+  return (
+    <NewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      <BaseBox>
+        <MapSelectedPlatform
+          selectedLocation={selectedLocation}
+          onLocationSelect={(location) => {
+            setSelectedLocation(location as LatLng);
+          }}
+          height={300}
+          showUserLocation={true}
+          showsMyLocationButton={true}
+        />
+      </BaseBox>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+        value={name}
+        onChangeText={setName}
+      />
+
+      <Spacing height={50} />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+
+      <LandscapeFrameUploaded image={image?.uri} />
+
+      <ButtonCenteredOnly icon="upload" onPress={handleImageUpload}>
+        Upload
+      </ButtonCenteredOnly>
+
+      <Spacing height={50} />
+    </NewWrapper>
+  );
+}
+
+export default Maps_ScreenMapsCreate;
--- a/screens/Maps/ScreenMapsEdit.tsx
+++ b/screens/Maps/ScreenMapsEdit.tsx
@@ -0,0 +1,228 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
+import MapSelectedV2 from "@/components/Map/MapSelectedV2";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiMapsGetOne, apiMapsUpdate } from "@/service/api-client/api-maps";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { LatLng } from "react-native-maps";
+import Toast from "react-native-toast-message";
+
+const defaultRegion = {
+  latitude: -8.737109,
+  longitude: 115.1756897,
+  latitudeDelta: 0.1,
+  longitudeDelta: 0.1,
+};
+
+export function Maps_ScreenMapsEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>({
+    id: "",
+    namePin: "",
+    latitude: "",
+    longitude: "",
+    imageId: "",
+  });
+  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id]),
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiMapsGetOne({ id: id as string });
+
+      if (response.success) {
+        setData({
+          id: response.data.id,
+          namePin: response.data.namePin,
+          latitude: response.data.latitude,
+          longitude: response.data.longitude,
+          imageId: response.data.imageId,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleLocationSelect = (location: LatLng | [number, number]) => {
+    if (Array.isArray(location)) {
+      // Android format: [longitude, latitude]
+      setSelectedLocation({ latitude: location[1], longitude: location[0] });
+    } else {
+      // iOS format: LatLng
+      setSelectedLocation(location);
+    }
+  };
+
+  const handleSubmit = async () => {
+    let newData: any;
+    if (!data.namePin) {
+      Toast.show({
+        type: "error",
+        text1: "Nama pin harus diisi",
+      });
+      return;
+    }
+
+    newData = {
+      namePin: data?.namePin,
+      latitude: selectedLocation?.latitude || data?.latitude,
+      longitude: selectedLocation?.longitude || data?.longitude,
+    };
+
+    try {
+      setLoading(true);
+      if (image) {
+        const responseUpload = await uploadFileService({
+          dirId: DIRECTORY_ID.map_image,
+          imageUri: image?.uri,
+        });
+
+        if (!responseUpload?.data?.id) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const imageId = responseUpload?.data?.id;
+
+        newData = {
+          namePin: data?.namePin,
+          latitude: selectedLocation?.latitude,
+          longitude: selectedLocation?.longitude,
+          newImageId: imageId,
+        };
+      }
+
+      const responseUpdate = await apiMapsUpdate({
+        id: data?.id,
+        data: newData,
+      });
+
+      if (!responseUpdate.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate map",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Map berhasil diupdate",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        disabled={!data.namePin}
+        onPress={handleSubmit}
+        isLoading={isLoading}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  const initialRegion =
+    data?.latitude && data?.longitude
+      ? {
+          latitude: Number(data?.latitude),
+          longitude: Number(data?.longitude),
+          latitudeDelta: 0.1,
+          longitudeDelta: 0.1,
+        }
+      : defaultRegion;
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      {/* <MapSelectedPlatform
+        initialRegion={initialRegion}
+        selectedLocation={selectedLocation}
+        onLocationSelect={handleLocationSelect}
+        height={400}
+      /> */}
+
+      {!data || !data.latitude || !data.longitude ? (
+        <CustomSkeleton height={200} />
+      ) : (
+        <MapSelectedV2
+          selectedLocation={[data.longitude, data.latitude]}
+          onLocationSelect={(location: [number, number]) => {
+            setData({
+              ...data,
+              longitude: location[0],
+              latitude: location[1],
+            });
+          }}
+        />
+      )}
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+        value={data?.namePin}
+        onChangeText={(value) => setData({ ...data, namePin: value })}
+      />
+
+      <Spacing />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+      <LandscapeFrameUploaded
+        image={
+          image
+            ? image?.uri
+            : API_IMAGE.GET({ fileId: data?.imageId as string })
+        }
+      />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => {
+          pickFile({
+            allowedType: "image",
+            setImageUri(file) {
+              setImage(file);
+            },
+          });
+        }}
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing height={50} />
+    </ViewWrapper>
+  );
+}
--- a/screens/Portofolio/BusinessLocationSection.tsx
+++ b/screens/Portofolio/BusinessLocationSection.tsx
@@ -1,19 +1,42 @@
-import {
-  BaseBox,
-  MapCustom,
-  StackCustom,
-  TextCustom
-} from "@/components";
+import { StyleSheet, View } from "react-native";
+
+import { BaseBox, StackCustom, TextCustom } from "@/components";
+import { MapsV2Custom } from "@/components/Map/MapsV2Custom";

 export default function Portofolio_BusinessLocation({
  data,
  imageId,
  setOpenDrawerLocation,
 }: {
-  data: any;
+  data: {
+    id: string;
+    imageId: string;
+    latitude: number;
+    longitude: number;
+    namePin: string;
+    pinId: string;
+  } | null;
+
  imageId?: string;
  setOpenDrawerLocation: (value: boolean) => void;
 }) {
+  console.log("data", data);
+
+  // Buat marker hanya jika data lengkap
+  const markers =
+    data?.latitude && data?.longitude
+      ? [
+          {
+            id: data.id || "location-marker",
+            coordinate: [data.longitude, data.latitude] as [number, number],
+            imageId,
+            onSelected: () => {
+              setOpenDrawerLocation(true);
+            },
+          },
+        ]
+      : [];
+
  return (
    <>
      <BaseBox style={{ height: !data ? 200 : "auto" }}>
@@ -30,18 +53,33 @@ export default function Portofolio_BusinessLocation({
              Lokasi bisnis belum ditambahkan
            </TextCustom>
          ) : (
-            <MapCustom
-              latitude={data?.latitude}
-              longitude={data?.longitude}
-              namePin={data?.namePin}
-              imageId={imageId}
-              onPress={() => {
-                setOpenDrawerLocation(true);
-              }}
-            />
+            <View style={styles.mapContainer}>
+              <MapsV2Custom
+                markers={markers}
+                zoomLevel={15}
+                showDefaultMarkers={true}
+                markerSize={35}
+                initialRegion={{
+                  latitude: data?.latitude,
+                  longitude: data?.longitude,
+                  latitudeDelta: 0.1,
+                  longitudeDelta: 0.1,
+                }}
+              />
+            </View>
          )}
        </StackCustom>
      </BaseBox>
    </>
  );
 }
+
+const styles = StyleSheet.create({
+  mapContainer: {
+    width: "100%",
+    height: 250,
+    borderRadius: 8,
+    overflow: "hidden",
+    marginTop: 8,
+  },
+});
--- a/screens/UserSeach/MainView_V2.tsx
+++ b/screens/UserSeach/MainView_V2.tsx
@@ -139,8 +139,8 @@ export default function UserSearchMainView_V2() {
      searchQuery: search,
      emptyMessage: "Tidak ada pengguna ditemukan",
      emptySearchMessage: "Tidak ada hasil pencarian",
-      skeletonCount: 5,
-      skeletonHeight: 150,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
      loadingFooterText: "Memuat lebih banyak pengguna...",
      isInitialLoad,
    });
--- a/service/api-admin/api-admin-forum.ts
+++ b/service/api-admin/api-admin-forum.ts
@@ -30,13 +30,15 @@ export async function apiAdminForumPostingById({ id }: { id: string }) {
 export async function apiAdminForumCommentById({
  id,
  category,
+  page = "1",
 }: {
  id: string;
  category: "get-all" | "get-one";
+  page?: string;
 }) {
  try {
    const response = await apiConfig.get(
-      `/mobile/admin/forum/${id}/comment?category=${category}`
+      `/mobile/admin/forum/${id}/comment?category=${category}&page=${page}`
    );
    return response.data;
  } catch (error) {
@@ -46,12 +48,14 @@ export async function apiAdminForumCommentById({

 export async function apiAdminForumListReportCommentById({
  id,
+  page = "1",
 }: {
  id: string;
+  page?: string;
 }) {
  try {
    const response = await apiConfig.get(
-      `/mobile/admin/forum/${id}/report-comment`
+      `/mobile/admin/forum/${id}/report-comment?page=${page}`
    );
    return response.data;
  } catch (error) {
--- a/service/api-device-token.ts
+++ b/service/api-device-token.ts
@@ -15,13 +15,14 @@ export async function apiDeviceRegisterToken({
  data: DeviceTokenData;
 }) {
  try {
-    const response = await apiConfig.post(`/mobile/auth/device-tokens`, {
-      data: data,
-    });
+    const response = await apiConfig.post(`/mobile/auth/device-tokens`, data);

    return response.data;
-  } catch (error) {
+  } catch (error: any) {
    console.error("Failed to register device token:", error);
+    console.error("Response data:", error?.response?.data);
+    console.error("Response status:", error?.response?.status);
+    console.error("Request payload:", data);
    throw error;
  }
 }
Author	SHA1	Message	Date
bagasbanuna	a5026cc285	add: Admin Event detail screen dan komponen pendukung Deskripsi: Menambahkan halaman detail event pada admin panel dengan status parameter Menambahkan beberapa komponen UI untuk menampilkan detail event, drawer informasi, dan QR Code Update konfigurasi aplikasi dan iOS project Perbaikan pada halaman verifikasi authentication Update dokumentasi prompt untuk Qwen File yang diubah: Modified app.config.js app/(application)/admin/event/[id]/[status]/index.tsx docs/prompt-for-qwen-code.md ios/HIPMIBadungConnect.xcodeproj/project.pbxproj ios/HIPMIBadungConnect/Info.plist screens/Authentication/VerificationView.tsx New Admin Event Components screens/Admin/Event/BoxEventDetail.tsx screens/Admin/Event/EventDetailDrawer.tsx screens/Admin/Event/EventDetailQRCode.tsx screens/Admin/Event/ScreenEventDetail.tsx ### No Issue	2026-03-06 16:39:55 +08:00
bagasbanuna	836ef709d2	Fix bug home ### No Issue	2026-03-05 16:41:29 +08:00
bagasbanuna	3bbee15c3a	Perbaikan Bug & Error Handling: │ │ │ │ 1. Device Token Registration Error (HTTP 500) │ │ - File: service/api-device-token.ts │ │ - Fix: Hapus nested data wrapper pada payload │ │ - Improvement: Tambahkan error logging detail │ │ │ │ 2. Uncaught Promise Errors │ │ - File: components/Notification/NotificationInitializer.tsx │ │ - Fix: Better error handling untuk device token registration │ │ - File: app/(application)/(user)/home.tsx │ │ - Fix: Add .catch() untuk userData() dan error handling apiUser() │ │ - File: app/(application)/(user)/profile/[id]/index.tsx │ │ - Fix: Add error handling untuk apiProfile(), apiUser(), userData() │ │ │ │ 3. UI Improvements │ │ - File: app/(application)/(user)/home.tsx │ │ - Feature: 4 skeleton lingkaran untuk loading state grid features │ │ │ │ 4. Maps Migration │ │ - File: app/(application)/admin/maps.tsx │ │ - Change: Replace react-native-maps dengan MapsV2Custom (Maplibre) │ │ - Cleanup: Hapus unused imports dan interfaces │ │ │ │ Files Modified (7) │ │ - app/(application)/(user)/home.tsx │ │ - app/(application)/(user)/profile/[id]/index.tsx │ │ - app/(application)/admin/maps.tsx │ │ - components/Notification/NotificationInitializer.tsx │ │ - service/api-device-token.ts │ │ - constants/constans-value.ts │ │ - screens/Home/bottomFeatureSection.tsx │ │ - screens/UserSeach/MainView_V2.tsx ### No Issue	2026-03-04 16:39:57 +08:00
bagasbanuna	ad7dbaf162	Fix Bug DB User Pages - app/(application)/(user)/home.tsx - app/(application)/(user)/portofolio/[id]/index.tsx - app/(application)/(user)/profile/[id]/index.tsx Home - screens/Home/bottomFeatureSection.tsx Components - components/Notification/NotificationInitializer.tsx - components/_ShareComponent/SkeletonCustom.tsx Service - service/api-device-token.ts Config & iOS - app.config.js - ios/HIPMIBadungConnect.xcodeproj/project.pbxproj - ios/HIPMIBadungConnect/Info.plist ### No Issue	2026-03-03 16:44:45 +08:00
bagasbanuna	9c94ec0454	Fix Bug Maps Platform Update - components/Map/MapSelectedPlatform.tsx - components/Map/MapSelectedV2.tsx Maps Screens - screens/Maps/ScreenMapsCreate.tsx - screens/Maps/ScreenMapsEdit.tsx Home - screens/Home/bottomFeatureSection.tsx Config & Native - app.config.js - android/app/build.gradle - ios/HIPMIBadungConnect.xcodeproj/project.pbxproj - ios/HIPMIBadungConnect/Info.plist ### No Issue	2026-03-02 16:34:24 +08:00
bagasbanuna	4c63485a5b	Clean Code Edit Maps Maps Edit Feature - app/(application)/(user)/maps/[id]/edit.tsx - components/Map/MapSelectedV2.tsx Docs - docs/prompt-for-qwen-code.md New Screen - screens/Maps/ScreenMapsEdit.tsx ### No Issue	2026-03-02 10:31:29 +08:00
bagasbanuna	f5d09a2906	Fix create maps iOS Project - HIPMIBadungConnect.xcodeproj/project.pbxproj Maps & Location Screens - screens/Maps/MapsView2.tsx - screens/Portofolio/BusinessLocationSection.tsx New Map Components - components/Map/MapsV2Custom.tsx - components/Map/SelectLocationMap.tsx ### No Issue	2026-02-27 16:57:01 +08:00
bagasbanuna	67070bb2f1	Fix Maps iOS Project - HIPMIBadungConnect.xcodeproj/project.pbxproj Maps & Location Screens - screens/Maps/MapsView2.tsx - screens/Portofolio/BusinessLocationSection.tsx New Map Components - components/Map/MapsV2Custom.tsx - components/Map/SelectLocationMap.tsx ### No Issue	2026-02-26 18:04:45 +08:00
bagasbanuna	fb19ec60b2	Fix Maps iOS Project - HIPMIBadungConnect.xcodeproj/project.pbxproj Maps & Location Screens - screens/Maps/MapsView2.tsx - screens/Portofolio/BusinessLocationSection.tsx New Map Components - components/Map/MapsV2Custom.tsx - components/Map/SelectLocationMap.tsx ### No Issue	2026-02-26 17:53:23 +08:00
bagasbanuna	e8f5c5b174	User Maps - app/(application)/(user)/maps/index.tsx - screens/Maps/MapsView2.tsx New Maps Component - screens/Maps/DrawerMaps.tsx Docs / Backup - docs/PODS.back ### No Issue	2026-02-25 16:46:37 +08:00
bagasbanuna	74a4d88277	Fix POD File & Maps User Maps - app/(application)/(user)/maps/index.tsx - screens/Maps/MapsView2.tsx iOS - HIPMIBadungConnect.xcodeproj/project.pbxproj - Podfile.lock - HIPMIBadungConnect.xcworkspace/xcshareddata/ New Maps Component - screens/Maps/DrawerMaps.tsx Docs / Backup - docs/PODS.back ### No Issue	2026-02-25 16:37:42 +08:00
bagasbanuna	2ad93a26a8	Tampilan maps android - screens/Maps/MapsView2.tsx ### No Issue	2026-02-24 17:57:14 +08:00
bagasbanuna	768b0caa9e	Fix maps ### No Issue	2026-02-24 16:48:37 +08:00
bagasbanuna	208b0ce813	Fix Maps Config & Dependencies - app.config.js - package.json - bun.lock - ios/Podfile - ios/HIPMIBadungConnect.xcodeproj/project.pbxproj User Pages - app/(application)/(user)/maps/index.tsx - app/(application)/(user)/portofolio/[id]/index.tsx Maps - screens/Maps/MapsView2.tsx ### No Issue	2026-02-24 16:41:43 +08:00
bagasbanuna	66e6aebf41	Fixed Admin Package Config & Dependencies - app.config.js - package.json - bun.lock - ios/Podfile - ios/HIPMIBadungConnect.xcodeproj/project.pbxproj Home - screens/Home/tabsList.ts Maps - screens/Maps/MapsView2.tsx ### No Issue	2026-02-24 07:18:01 +08:00
bagasbanuna	32a42d1b60	Fix UI Admin User & Image - app/(application)/(image)/take-picture/[id]/index.tsx - app/(application)/(user)/home.tsx Admin – Forum - app/(application)/admin/forum/[id]/index.tsx - app/(application)/admin/forum/[id]/list-comment.tsx - app/(application)/admin/forum/[id]/list-report-comment.tsx Admin Screens – Forum - screens/Admin/Forum/ScreenForumDetailReportPosting.tsx - screens/Admin/Forum/ScreenForumReportComment.tsx - screens/Admin/Forum/ScreenForumReportPosting.tsx New Admin Screens – Forum - screens/Admin/Forum/ScreenForumDetailReportComment.tsx - screens/Admin/Forum/ScreenForumListComment.tsx Home - screens/Home/bottomFeatureSection.tsx Service - service/api-admin/api-admin-forum.ts Docs - docs/prompt-for-qwen-code.md ### No Issue	2026-02-20 16:48:26 +08:00