Collaboration Mobile API

Add:
- /admin/collaboration/[id]/reject-input.tsx
- /api-admin/api-admin-collaboration.ts

Fix:
- Integrasi ke tampilan UI
app/(application)/admin/collaboration/[id]/[status].tsx
app/(application)/admin/collaboration/index.tsx
app/(application)/admin/collaboration/publish.tsx
components/_ShareComponent/Admin/TableTitle.tsx
components/_ShareComponent/Admin/TableValue.tsx

### No Issue

app.config.js

@@ -26,6 +26,7 @@ export default {
     },
     edgeToEdgeEnabled: true,
     package: 'com.bip.hipmimobileapp',
+    // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
   },
 
   web: {
@@ -68,5 +69,6 @@ export default {
     },
     // Tambahkan environment variables ke sini
     API_BASE_URL: process.env.API_BASE_URL,
+    BASE_URL: process.env.BASE_URL,
   },
 };

app/(application)/(file)/[id].tsx

@@ -1,9 +1,13 @@
-import { BackButton, ViewWrapper } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome } from "@expo/vector-icons";
-import { Stack } from "expo-router";
+import { BackButton } from "@/components";
+import PdfViewer from "@/components/_ShareComponent/PdfViewer";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function FileScreen() {
+  const { id } = useLocalSearchParams();
+  const url = API_STRORAGE.GET({ fileId: id as string });
+  
   return (
     <>
       <Stack.Screen
@@ -12,14 +16,9 @@ export default function FileScreen() {
           headerLeft: () => <BackButton />,
         }}
       />
-      <ViewWrapper>
-        <FontAwesome
-          name="file-pdf-o"
-          size={300}
-          style={{ alignSelf: "center" }}
-          color={MainColor.white}
-        />
-      </ViewWrapper>
+      <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>
+        <PdfViewer uri={url} />
+      </SafeAreaView>
     </>
   );
 }

app/(application)/(user)/_layout.tsx

@@ -10,7 +10,6 @@ export default function UserLayout() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
-
         <Stack.Screen
           name="waiting-room"
           options={{
@@ -118,13 +117,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-        <Stack.Screen
+        {/* <Stack.Screen
           name="collaboration/[id]/detail-participant"
           options={{
             title: "Partisipasi Proyek",
             headerLeft: () => <BackButton />,
           }}
-        />
+        /> */}
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
@@ -139,6 +138,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="collaboration/[id]/select-of-participants"
+          options={{
+            title: "Pilih Partisipan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Collaboration Section ========= */}
 
@@ -179,7 +185,7 @@ export default function UserLayout() {
           name="crowdfunding/index"
           options={{
             title: "Crowdfunding",
-            headerLeft: () => <BackButton />,
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
 
@@ -442,7 +448,7 @@ export default function UserLayout() {
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/invoice"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/invoice"
           options={{
             title: "Invoice",
             headerLeft: () => (
@@ -456,7 +462,7 @@ export default function UserLayout() {
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/process"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/process"
           options={{
             title: "Proses",
             headerLeft: () => (
@@ -470,14 +476,14 @@ export default function UserLayout() {
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/success"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/success"
           options={{
             title: "Donasi Berhasil",
             headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
-          name="donation/[id]/(transaction-flow)/[transaction]/failed"
+          name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
           options={{
             title: "Donasi Gagal",
             headerLeft: () => <BackButton />,

app/(application)/(user)/collaboration/(tabs)/group.tsx

@@ -1,38 +1,96 @@
-import { BaseBox, Grid, TextCustom } from "@/components";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
 import { Feather } from "@expo/vector-icons";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useState, useCallback } from "react";
 
 export default function CollaborationGroup() {
-  
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category: "group",
+        authorId: user?.id,
+      });
+      
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
 
   return (
     <ViewWrapper hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox
-          key={index}
-          paddingBlock={5}
-          href={`/collaboration/${index}/${generateProjectName()}/room-chat`}
-        >
-          <Grid>
-            <Grid.Col span={10}>
-              <TextCustom bold>{generateProjectName()}</TextCustom>
-              <TextCustom size="small">2 Anggota</TextCustom>
-            </Grid.Col>
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data</TextCustom>
+      ) : (
+        <StackCustom>
+          {listData?.map((item: any, index: any) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/collaboration/${item?.ProjectCollaboration_RoomChat?.id}/${item?.ProjectCollaboration_RoomChat?.name}/room-chat`}
             >
-              <Feather name="chevron-right" size={20} color={MainColor.white} />
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+              <Grid>
+                <Grid.Col span={10}>
+                  <TextCustom bold>
+                    {item?.ProjectCollaboration_RoomChat?.name}
+                  </TextCustom>
+                  <TextCustom size="small">
+                    {
+                      item?.ProjectCollaboration_RoomChat
+                        ?.ProjectCollaboration_AnggotaRoomChat?.length
+                    }{" "}
+                    Anggota
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "flex-end", justifyContent: "center" }}
+                >
+                  <Feather
+                    name="chevron-right"
+                    size={20}
+                    color={MainColor.white}
+                  />
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))}
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }
 
-
 function generateProjectName() {
   const adjectives = [
     "Blue",
@@ -65,4 +123,4 @@ function generateProjectName() {
   const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
 
   return randomAdjective + randomNoun;
-}
+}

app/(application)/(user)/collaboration/(tabs)/index.tsx

@@ -23,7 +23,9 @@ export default function CollaborationBeranda() {
   const onLoadData = async () => {
     try {
       setLoadingGetData(true);
-      const response = await apiCollaborationGetAll();
+      const response = await apiCollaborationGetAll({
+        category: "beranda",
+      });
 
       setListData(response.data);
     } catch (error) {
@@ -32,6 +34,7 @@ export default function CollaborationBeranda() {
       setLoadingGetData(false);
     }
   };
+  
   return (
     <>
       <ViewWrapper

app/(application)/(user)/collaboration/(tabs)/participant.tsx

@@ -1,15 +1,46 @@
-import { ButtonCustom, Spacing } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
-import { useState } from "react";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function CollaborationParticipans() {
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    "participant"
+  const [activeCategory, setActiveCategory] = useState<
+    "participant" | "my-project"
+  >("participant");
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory])
   );
 
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category:
+          activeCategory === "participant" ? "participant" : "my-project",
+        authorId: user?.id,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
   const handlePress = (item: any) => {
     setActiveCategory(item);
     // tambahkan logika lain seperti filter dsb.
@@ -41,13 +72,13 @@ export default function CollaborationParticipans() {
       <Spacing width={"2%"} />
       <ButtonCustom
         backgroundColor={
-          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+          activeCategory === "my-project" ? MainColor.yellow : AccentColor.blue
         }
         textColor={
-          activeCategory === "main" ? MainColor.black : MainColor.white
+          activeCategory === "my-project" ? MainColor.black : MainColor.white
         }
         style={{ width: "49%" }}
-        onPress={() => handlePress("main")}
+        onPress={() => handlePress("my-project")}
       >
         Proyek Saya
       </ButtonCustom>
@@ -56,22 +87,27 @@ export default function CollaborationParticipans() {
 
   return (
     <ViewWrapper hideFooter headerComponent={headerComponent}>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Collaboration_BoxPublishSection
-          key={index.toString()}
-          id={index.toString()}
-          username={` ${
-            activeCategory === "participant"
-              ? "Partisipasi Proyek"
-              : "Proyek Saya"
-          }`}
-          href={
-            activeCategory === "participant"
-              ? `/collaboration/${index}/detail-participant`
-              : `/collaboration/${index}/detail-project-main`
-          }
-        />
-      ))}
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data</TextCustom>
+      ) : activeCategory === "participant" ? (
+        listData?.map((item: any, index: number) => (
+          <Collaboration_BoxPublishSection
+            key={index.toString()}
+            data={item?.ProjectCollaboration}
+            href={`/collaboration/${item?.ProjectCollaboration?.id}/detail-participant`}
+          />
+        ))
+      ) : (
+        listData?.map((item: any, index: number) => (
+          <Collaboration_BoxPublishSection
+            key={index.toString()}
+            data={item}
+            href={`/collaboration/${item?.id}/detail-project-main`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/collaboration/[id]/[detail]/info.tsx

@@ -1,17 +1,41 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   AvatarUsernameAndOtherComponent,
   BackButton,
+  BaseBox,
   BoxWithHeaderSection,
   Grid,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { apiCollaborationGroup } from "@/service/api-client/api-collaboration";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useState, useCallback } from "react";
 
 export default function CollaborationRoomInfo() {
   const { id, detail } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGroup({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <>
       <Stack.Screen
@@ -24,7 +48,7 @@ export default function CollaborationRoomInfo() {
       <ViewWrapper>
         <BoxWithHeaderSection>
           <StackCustom>
-            {listData.map((item, index) => (
+            {listData({ data }).map((item, index) => (
               <Grid key={index}>
                 <Grid.Col span={4}>
                   <TextCustom bold>{item.title}</TextCustom>
@@ -37,37 +61,42 @@ export default function CollaborationRoomInfo() {
           </StackCustom>
         </BoxWithHeaderSection>
 
-        <BoxWithHeaderSection>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <AvatarUsernameAndOtherComponent key={index} avatarHref={`/profile/${index}`} />
-          ))}
-        </BoxWithHeaderSection>
+        <BaseBox>
+          <StackCustom gap={10}>
+            {data?.ProjectCollaboration_AnggotaRoomChat?.map(
+              (item: any, index: number) => (
+                <AvatarUsernameAndOtherComponent
+                  key={index}
+                  avatarHref={`/profile/${item?.User?.Profile?.id}`}
+                  name={item?.User?.username}
+                  avatar={item?.User?.Profile?.imageId}
+                />
+              )
+            )}
+          </StackCustom>
+        </BaseBox>
       </ViewWrapper>
     </>
   );
 }
 
-const listData = [
+const listData = ({ data }: { data: any }) => [
   {
     title: "Judul Proyek",
-    value: "Judul Proyek",
+    value: data?.ProjectCollaboration?.title || "-",
   },
   {
     title: "Industri",
-    value: "Pilihan Industri",
-  },
-  {
-    title: "Deskripsi",
-    value: "Deskripsi Proyek",
+    value:
+      data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name ||
+      "-",
   },
   {
     title: "Tujuan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: data?.ProjectCollaboration?.purpose || "-",
   },
   {
     title: "Keuntungan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: data?.ProjectCollaboration?.benefit || "-",
   },
 ];

app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx

@@ -1,68 +1,13 @@
-import {
-  BackButton,
-  BoxButtonOnFooter,
-  Grid,
-  TextCustom,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import { AccentColor, MainColor } from "@/constants/color-palet";
+import { BackButton } from "@/components";
+import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import ChatScreen from "@/screens/Collaboration/GroupChatSection";
 import { Feather } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
 
 export default function CollaborationRoomChat() {
   const { id, detail } = useLocalSearchParams();
 
-  const inputChat = () => {
-    return (
-      <>
-        <BoxButtonOnFooter>
-          {/* <View style={{flexDirection: 'row', alignItems: 'center'}}>
-            <TextInputCustom placeholder="Ketik pesan..." />
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => console.log("Send")}
-              style={{
-                backgroundColor: AccentColor.blue,
-                padding: 10,
-                borderRadius: 50,
-              }}
-            >
-              <Feather name="send" size={30} color={MainColor.white} />
-            </TouchableOpacity>
-          </View> */}
-          <Grid>
-            <Grid.Col span={9}>
-              <TextInputCustom placeholder="Ketik pesan..." />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={2} style={{ alignItems: "center" }}>
-              <TouchableOpacity
-                activeOpacity={0.5}
-                onPress={() => console.log("Send")}
-                style={{
-                  backgroundColor: AccentColor.blue,
-                  padding: 10,
-                  borderRadius: 50,
-                }}
-              >
-                <Feather
-                  name="send"
-                  size={30}
-                  color={MainColor.white}
-                />
-              </TouchableOpacity>
-            </Grid.Col>
-          </Grid>
-        </BoxButtonOnFooter>
-      </>
-    );
-  };
-
   return (
     <>
       <Stack.Screen
@@ -79,114 +24,8 @@ export default function CollaborationRoomChat() {
           ),
         }}
       />
-      <ViewWrapper footerComponent={inputChat()}>
-        {dummyData.map((item, index) => (
-          <View
-            key={index}
-            style={[
-              styles.messageRow,
-              item.role === 1 ? styles.rightAlign : styles.leftAlign,
-            ]}
-          >
-            <View
-              style={[
-                styles.bubble,
-                item.role === 1 ? styles.bubbleRight : styles.bubbleLeft,
-              ]}
-            >
-              <TextCustom style={styles.sender}>{item.nama}</TextCustom>
-              <TextCustom style={styles.message}>{item.chat}</TextCustom>
-              <TextCustom style={styles.time}>
-                {new Date(item.time).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
-              </TextCustom>
-            </View>
-          </View>
-        ))}
-        {/* <TextInputCustom placeholder="Ketik pesan..." />
-        <Spacing/> */}
-      </ViewWrapper>
+
+      <ChatScreen id={id as string} />
     </>
   );
 }
-
-const dummyData = [
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Hai! Kamu udah lihat dokumen proyek yang baru?",
-    time: "2025-07-24T09:01:15Z",
-  },
-  {
-    nama: "Rafi",
-    role: 2,
-    chat: "Halo! Iya, aku baru aja baca. Kayaknya kita harus revisi bagian akhir deh.",
-    time: "2025-07-24T09:02:03Z",
-  },
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Setuju. Aku juga kurang sreg sama penutupnya.",
-    time: "2025-07-24T09:02:45Z",
-  },
-  {
-    nama: "Rafi",
-    role: 2,
-    chat: "Oke, aku coba edit malam ini ya. Nanti aku share ulang versinya.",
-    time: "2025-07-24T09:03:10Z",
-  },
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Siap, makasih ya. Jangan begadang!",
-    time: "2025-07-24T09:03:30Z",
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-  },
-  messageRow: {
-    flexDirection: "row",
-    marginBottom: 12,
-  },
-  rightAlign: {
-    justifyContent: "flex-end",
-  },
-  leftAlign: {
-    justifyContent: "flex-start",
-  },
-  bubble: {
-    maxWidth: "75%",
-    padding: 10,
-    borderRadius: 12,
-  },
-  bubbleRight: {
-    backgroundColor: "#DCF8C6", // hijau muda
-    borderTopRightRadius: 0,
-  },
-  bubbleLeft: {
-    backgroundColor: "#F0F0F0", // abu-abu terang
-    borderTopLeftRadius: 0,
-  },
-  sender: {
-    fontSize: 12,
-    fontWeight: "bold",
-    marginBottom: 2,
-    color: "#555",
-  },
-  message: {
-    fontSize: 15,
-    color: "#000",
-  },
-  time: {
-    fontSize: 10,
-    color: "#888",
-    textAlign: "right",
-    marginTop: 4,
-  },
-});

app/(application)/(user)/collaboration/[id]/detail-participant.tsx

@@ -1,26 +1,54 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarUsernameAndOtherComponent,
-  BaseBox,
+  BackButton,
+  DotButton,
   DrawerCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+  MenuDrawerDynamicGrid,
+  ViewWrapper
 } from "@/components";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import { MaterialIcons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiCollaborationGetOne } from "@/service/api-client/api-collaboration";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetailParticipant() {
   const { id } = useLocalSearchParams();
   const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+          ),
+        }}
+      />
+
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
-        <BaseBox style={{ height: 500 }}>
+        <Collaboration_BoxDetailSection data={data} />
+        {/* <BaseBox style={{ height: 500 }}>
             <TextCustom align="center" bold size="large">
               Partisipan
             </TextCustom>
@@ -39,13 +67,33 @@ export default function CollaborationDetailParticipant() {
                 }
               />
             ))}
-        </BaseBox>
+        </BaseBox> */}
       </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawerParticipant}
         closeDrawer={() => setOpenDrawerParticipant(false)}
         height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <Ionicons name="people" size={24} color="white" />,
+              label: "Daftar Partisipan",
+              path: `/collaboration/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawerParticipant(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* <DrawerCustom
+        isVisible={openDrawerParticipant}
+        closeDrawer={() => setOpenDrawerParticipant(false)}
+        height={"auto"}
       >
         <StackCustom>
           <TextCustom bold>Deskripsi Diri</TextCustom>
@@ -56,7 +104,7 @@ export default function CollaborationDetailParticipant() {
             Temporibus iusto soluta necessitatibus.
           </TextCustom>
         </StackCustom>
-      </DrawerCustom>
+      </DrawerCustom> */}
     </>
   );
 }

app/(application)/(user)/collaboration/[id]/detail-project-main.tsx

@@ -1,30 +1,65 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertDefaultSystem,
   BackButton,
-  ButtonCustom,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  apiCollaborationGetOne
+} from "@/service/api-client/api-collaboration";
+import { MaterialIcons } from "@expo/vector-icons";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetailProjectMain() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
-  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [data, setData] = useState<any>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
 
-  const handleEdit = () => {
-    console.log("Edit collaboration");
-    router.push("/(application)/(user)/collaboration/(id)/edit");
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [id])
+  );
+
+  const handlerLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      await onLoadData();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleSubmit = (item: any) => {
+    console.log("item :", item);
+    router.push(item.path);
+    setOpenDrawer(false);
   };
 
   return (
@@ -37,34 +72,21 @@ export default function CollaborationDetailProjectMain() {
         }}
       />
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
-        <Collaboration_MainParticipanSelectedSection
-          selected={selected}
-          setSelected={setSelected}
-          setOpenDrawerParticipant={setOpenDrawerParticipant}
-        />
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            <Collaboration_BoxDetailSection data={data} />
+            {/* <Collaboration_MainParticipanSelectedSection
+              selected={selected}
+              setSelected={setSelected}
+              setOpenDrawerParticipant={setOpenDrawerParticipant}
+              listData={listData as any}
+            /> */}
 
-        <ButtonCustom
-          onPress={() => {
-            AlertDefaultSystem({
-              title: "Buat Grup",
-              message:
-                "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
-              textLeft: "Tidak",
-              textRight: "Ya",
-              onPressLeft: () => {},
-              onPressRight: () => {
-                router.navigate(
-                  "/(application)/(user)/collaboration/(tabs)/group"
-                );
-                console.log("selected :", selected);
-              },
-            });
-          }}
-        >
-          Buat Grup
-        </ButtonCustom>
-        <Spacing />
+            <Spacing />
+          </>
+        )}
       </ViewWrapper>
 
       <DrawerCustom
@@ -76,31 +98,20 @@ export default function CollaborationDetailProjectMain() {
           data={[
             {
               label: "Edit",
-              path: "/(application)/(user)/collaboration/(tabs)/group",
+              path: `/(application)/(user)/collaboration/${id}/edit`,
               icon: <IconEdit />,
             },
+            {
+              label: "Pilih Partisipan",
+              path: `/(application)/(user)/collaboration/${id}/select-of-participants`,
+              icon: <MaterialIcons name="checklist" size={24} color="white" />,
+            },
           ]}
-          onPressItem={(item) => {
-            handleEdit();
+          onPressItem={(item: any) => {
+            handleSubmit(item);
           }}
         />
       </DrawerCustom>
-
-      <DrawerCustom
-        isVisible={openDrawerParticipant}
-        closeDrawer={() => setOpenDrawerParticipant(false)}
-        height={"auto"}
-      >
-        <StackCustom>
-          <TextCustom bold>Deskripsi Diri</TextCustom>
-          <TextCustom>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi,
-            itaque adipisci. Voluptas, sed quod! Ad facere labore voluptates,
-            neque quidem aut reprehenderit ducimus mollitia quisquam temporibus!
-            Temporibus iusto soluta necessitatibus.
-          </TextCustom>
-        </StackCustom>
-      </DrawerCustom>
     </>
   );
 }

app/(application)/(user)/collaboration/[id]/edit.tsx

@@ -1,53 +1,171 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCustom,
+  LoaderCustom,
   SelectCustom,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import {
+  apiCollaborationEditData,
+  apiCollaborationGetOne,
+} from "@/service/api-client/api-collaboration";
+import { apiMasterCollaborationType } from "@/service/api-client/api-master";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function CollaborationEdit() {
+  const { id } = useLocalSearchParams();
+  console.log("id :", id);
+  const [data, setData] = useState<any>();
+  const [listMaster, setListMaster] = useState<any[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      const fetchData = async () => {
+        try {
+          setLoadingData(true);
+          await onLoadData();
+          await onLoadMaster();
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          setLoadingData(false);
+        }
+      };
+      fetchData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  async function onLoadMaster() {
+    try {
+      const response = await apiMasterCollaborationType();
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  }
+
+  const handlerSubmitUpdate = async () => {
+    if (
+      !data?.title ||
+      !data?.lokasi ||
+      !data?.projectCollaborationMaster_IndustriId ||
+      !data?.purpose ||
+      !data?.benefit
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      const response = await apiCollaborationEditData({
+        id: id as string,
+        data: data,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
-        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
-        <SelectCustom
-          label="Pilih Industri"
-          data={[
-            { label: "Industri 1", value: "industri-1" },
-            { label: "Industri 2", value: "industri-2" },
-            { label: "Industri 3", value: "industri-3" },
-          ]}
-          onChange={(value) => console.log(value)}
-        />
+      {loadingData ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            label="Judul"
+            placeholder="Masukan judul"
+            required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukan lokasi"
+            required
+            value={data?.lokasi}
+            onChangeText={(value) => setData({ ...data, lokasi: value })}
+          />
+          <SelectCustom
+            label="Pilih Industri"
+            data={listMaster?.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.projectCollaborationMaster_IndustriId}
+            onChange={(value) =>
+              setData({ ...data, projectCollaborationMaster_IndustriId: value })
+            }
+          />
 
-        <TextAreaCustom
-          required
-          label="Tujuan Proyek"
-          placeholder="Masukan tujuan proyek"
-          showCount
-          maxLength={1000}
-        />
+          <TextAreaCustom
+            required
+            label="Tujuan Proyek"
+            placeholder="Masukan tujuan proyek"
+            showCount
+            maxLength={1000}
+            value={data?.purpose}
+            onChangeText={(value) => setData({ ...data, purpose: value })}
+          />
 
-        <TextAreaCustom
-          required
-          label="Keuntungan Proyek"
-          placeholder="Masukan keuntungan proyek"
-          showCount
-          maxLength={1000}
-        />
+          <TextAreaCustom
+            required
+            label="Keuntungan Proyek"
+            placeholder="Masukan keuntungan proyek"
+            showCount
+            maxLength={1000}
+            value={data?.benefit}
+            onChangeText={(value) => setData({ ...data, benefit: value })}
+          />
 
-        <ButtonCustom
-          title="Update"
-          onPress={() => {
-            console.log("Update proyek");
-            router.back();
-          }}
-        />
-      </StackCustom>
+          <ButtonCustom
+            isLoading={isLoading}
+            title="Update"
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          />
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/collaboration/[id]/index.tsx

@@ -4,6 +4,7 @@ import {
   ButtonCustom,
   DotButton,
   DrawerCustom,
+  InformationBox,
   LoaderCustom,
   MenuDrawerDynamicGrid,
   ViewWrapper,
@@ -26,7 +27,7 @@ import { useCallback, useState } from "react";
 export default function CollaborationDetail() {
   const { user } = useAuth();
   const { id } = useLocalSearchParams();
-  const [data, setData] = useState();
+  const [data, setData] = useState<any>();
   const [openDrawerMenu, setOpenDrawerMenu] = useState(false);
   const [isParticipant, setIsParticipant] = useState(false);
   const [loadingIsParticipant, setLoadingIsParticipant] = useState(false);
@@ -41,6 +42,7 @@ export default function CollaborationDetail() {
   const onLoadData = async () => {
     try {
       const response = await apiCollaborationGetOne({ id: id as string });
+
       if (response.success) {
         setData(response.data);
       }
@@ -84,17 +86,25 @@ export default function CollaborationDetail() {
           <LoaderCustom />
         ) : (
           <>
+            {user?.id === data?.Author?.id && (
+              <InformationBox
+                text={
+                  "Tombol partisipasi hanya muncul pada proyek milik orang lain"
+                }
+              />
+            )}
             <Collaboration_BoxDetailSection data={data} />
-
-            <ButtonCustom
-              disabled={isParticipant || loadingIsParticipant}
-              onPress={() => {
-                router.push(`/collaboration/${id}/create-pacticipants`);
-                //  setOpenDrawerPartisipasi(true);
-              }}
-            >
-              {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"}
-            </ButtonCustom>
+            {user?.id !== data?.Author?.id && (
+              <ButtonCustom
+                disabled={isParticipant || loadingIsParticipant}
+                onPress={() => {
+                  router.push(`/collaboration/${id}/create-pacticipants`);
+                  //  setOpenDrawerPartisipasi(true);
+                }}
+              >
+                {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"}
+              </ButtonCustom>
+            )}
           </>
         )}
       </ViewWrapper>

app/(application)/(user)/collaboration/[id]/list-of-participants.tsx

@@ -51,7 +51,7 @@ export default function CollaborationListOfParticipants() {
         {loadingGetData ? (
           <LoaderCustom />
         ) : _.isEmpty(listData) ? (
-          <TextCustom align="center">Tidak ada data</TextCustom>
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
         ) : (
           listData?.map((item: any, index: number) => (
             <BaseBox key={index} paddingBlock={5}>

app/(application)/(user)/collaboration/[id]/select-of-participants.tsx

@@ -0,0 +1,251 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+    AlertDefaultSystem,
+    AvatarComp,
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCustom,
+    CheckboxCustom,
+    CheckboxGroup,
+    DrawerCustom,
+    Grid,
+    LoaderCustom,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import ModalCustom from "@/components/Modal/ModalCustom";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import {
+    apiCollaborationCreateGroup,
+    apiCollaborationGetParticipants,
+} from "@/service/api-client/api-collaboration";
+import { MaterialIcons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
+
+export default function CollaborationSelectOfParticipants() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [description, setDescription] = useState("");
+  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [nameGroup, setNameGroup] = useState("");
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetParticipants({
+        category: "list",
+        id: id as string,
+      });
+      //   console.log("response :", JSON.stringify(response.data, null, 2));
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlerCreateGroup = async () => {
+    if (_.isEmpty(nameGroup)) {
+      Toast.show({
+        type: "error",
+        text1: "Nama grup tidak boleh kosong",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiCollaborationCreateGroup({
+        id: id as string,
+        data: {
+          authorId: user?.id,
+          nameGroup: nameGroup,
+          listSelect: selected,
+        },
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Grup berhasil dibuat",
+        });
+        router.push("/(application)/(user)/collaboration/(tabs)/group");
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat grup",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlerSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            disabled={_.isEmpty(selected)}
+            onPress={() => {
+              setOpenModal(true);
+              setNameGroup("");
+            }}
+          >
+            Buat Grup
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={_.isEmpty(listData) ? null : handlerSubmit()}
+      >
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
+        ) : (
+          <StackCustom>
+            <TextCustom size="default" color="red" bold>
+              *{" "}
+              <TextCustom size="small" semiBold>
+                Pilih user yang akan menjadi tim proyek anda
+              </TextCustom>
+            </TextCustom>
+
+            <CheckboxGroup
+              value={selected}
+              onChange={(val: any) => {
+                console.log("val :", val);
+                setSelected(val);
+              }}
+            >
+              {listData?.map((item: any, index: any) => (
+                <View key={index}>
+                  <Grid key={index}>
+                    <Grid.Col
+                      span={2}
+                      style={{ alignItems: "center", justifyContent: "center" }}
+                    >
+                      <CheckboxCustom valueKey={item?.User?.id} />
+                    </Grid.Col>
+                    <Grid.Col span={2} style={{ alignItems: "center" }}>
+                      <AvatarComp
+                        size="base"
+                        fileId={item?.User?.Profile?.imageId}
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                      <TextCustom bold truncate>
+                        {item?.User?.username}
+                      </TextCustom>
+                    </Grid.Col>
+                    <Grid.Col
+                      span={2}
+                      style={{ alignItems: "center", justifyContent: "center" }}
+                    >
+                      <MaterialIcons
+                        name="notes"
+                        size={ICON_SIZE_SMALL}
+                        color="white"
+                        onPress={() => {
+                          setOpenDrawer(true);
+                          setDescription(item?.deskripsi_diri);
+                        }}
+                      />
+                    </Grid.Col>
+                  </Grid>
+                </View>
+              ))}
+            </CheckboxGroup>
+          </StackCustom>
+        )}
+      </ViewWrapper>
+
+      <ModalCustom isVisible={openModal}>
+        <StackCustom gap={0}>
+          <TextAreaCustom
+            placeholder="Nama Grup"
+            value={nameGroup}
+            onChangeText={(val) => setNameGroup(val)}
+          />
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom
+                backgroundColor="gray"
+                onPress={() => {
+                  setOpenModal(false);
+                }}
+              >
+                Batal
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              <ButtonCustom
+                isLoading={isLoading}
+                disabled={_.isEmpty(nameGroup)}
+                onPress={() => {
+                  AlertDefaultSystem({
+                    title: "Buat Grup",
+                    message:
+                      "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
+                    textLeft: "Tidak",
+                    textRight: "Ya",
+                    onPressLeft: () => {},
+                    onPressRight: () => {
+                      handlerCreateGroup();
+                    },
+                  });
+                }}
+              >
+                Simpan
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        </StackCustom>
+      </ModalCustom>
+
+      {/* Drawer */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi diri</TextCustom>
+          <BaseBox>
+            <ScrollView style={{ height: "80%" }}>
+              <TextCustom>{description}</TextCustom>
+            </ScrollView>
+          </BaseBox>
+          <Spacing />
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/collaboration/create.tsx

@@ -81,7 +81,6 @@ export default function CollaborationCreate() {
 
     try {
       setIsLoading(true);
-      console.log("[DATA]>>", newData);
 
       const response = await apiCollaborationCreate({ data: newData });
       if (response.success) {

app/(application)/(user)/donation/(tabs)/index.tsx

@@ -1,11 +1,41 @@
 import {
   FloatingButton,
-  ViewWrapper
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import { router } from "expo-router";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationBeranda() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetAll({
+        category: "beranda"
+      });
+      console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -13,9 +43,15 @@ export default function DonationBeranda() {
         <FloatingButton onPress={() => router.push("/donation/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Donation_BoxPublish key={index} id={index.toString()}/>
-      ))}
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">Belum ada donasi</TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Donation_BoxPublish data={item} key={index} id={item.id} />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/donation/(tabs)/my-donation.tsx

@@ -1,76 +1,142 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BadgeCustom,
   BaseBox,
   DummyLandscapeImage,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { Href, router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function DonationMyDonation() {
-  const randomStatusData = Array.from({ length: 10 }, () => {
-    const randomIndex = Math.floor(
-      Math.random() * dummyMasterStatusTransaction.length
-    );
-    return dummyMasterStatusTransaction[randomIndex];
-  });
+  const { user } = useAuth();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
 
-  const handlePress = (value: string) => {
-    if (value === "menunggu") {
-      router.push(`/donation/${value}/(transaction-flow)/123/invoice`);
-    } else if (value === "proses") {
-      router.push(`/donation/${value}/(transaction-flow)/123/process`);
-    } else if (value === "berhasil") {
-      router.push(`/donation/${value}/(transaction-flow)/123/success`);
-    } else if (value === "gagal") {
-      router.push(`/donation/${value}/(transaction-flow)/123/failed`);
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetAll({
+        category: "my-donation",
+        authorId: user?.id,
+      });
+      console.log(
+        "[RES GET MY DONATION]",
+        JSON.stringify(response.data, null, 2)
+      );
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerColor = (status: string) => {
+    if (status === "menunggu") {
+      return "orange";
+    } else if (status === "proses") {
+      return "white";
+    } else if (status === "berhasil") {
+      return "green";
+    } else if (status === "gagal") {
+      return "red";
+    }
+  };
+
+  const handlePress = ({
+    invoiceId,
+    donationId,
+    status,
+  }: {
+    invoiceId: string;
+    donationId: string;
+    status: string;
+  }) => {
+    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
+    if (status === "menunggu") {
+      router.push(`${url}/invoice`);
+    } else if (status === "proses") {
+      router.push(`${url}/process`);
+    } else if (status === "berhasil") {
+      router.push(`${url}/success`);
+    } else if (status === "gagal") {
+      router.push(`${url}/failed`);
     }
   };
 
   return (
     <ViewWrapper hideFooter>
-      {randomStatusData.map((item, index) => (
-        <BaseBox
-          key={index}
-          paddingTop={7}
-          paddingBottom={7}
-          onPress={() => {
-            handlePress(item.value);
-          }}
-        >
-          <Grid>
-            <Grid.Col span={5}>
-              <DummyLandscapeImage height={100} unClickPath />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <StackCustom gap={"sm"}>
-                <View>
-                  <TextCustom truncate>
-                    Judul Donasi: Lorem ipsum dolor sit amet consectetur
-                    adipisicing elit.
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Belum ada transaksi
+        </TextCustom>
+      ) : (
+        list?.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() => {
+              handlePress({
+                status: _.lowerCase(item.statusInvoice),
+                invoiceId: item.id,
+                donationId: item.donasiId,
+              });
+            }}
+          >
+            <Grid>
+              <Grid.Col span={5}>
+                <DummyLandscapeImage
+                  height={100}
+                  unClickPath
+                  imageId={item.imageId}
+                />
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <StackCustom>
+                  <TextCustom truncate={2} bold>
+                    {item.title || "-"}
                   </TextCustom>
-                </View>
-                <View>
-                  <TextCustom>Donasi Saya</TextCustom>
+
                   <TextCustom bold color="yellow">
-                    Rp. 7.500.000
+                    Rp. {formatCurrencyDisplay(item.nominal)}
                   </TextCustom>
-                </View>
-                <BadgeCustom variant="light" color={item.color} fullWidth>
-                  {item.label}
-                </BadgeCustom>
-              </StackCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    fullWidth
+                  >
+                    {item.statusInvoice}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/donation/(tabs)/status.tsx

@@ -1,12 +1,48 @@
-import { ScrollableCustom, ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
-import { useState } from "react";
+import { apiDonationGetByStatus } from "@/service/api-client/api-donation";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationStatus() {
+  const { user } = useAuth();
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [activeCategory])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListData(null);
+    } finally {
+      setLoadList(false);
+    }
+  };
 
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
@@ -26,13 +62,19 @@ export default function DonationStatus() {
   );
   return (
     <ViewWrapper hideFooter headerComponent={scrollComponent}>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Donasi_BoxStatus
-          key={index}
-          id={index.toString()}
-          status={activeCategory as string}
-        />
-      ))}
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData?.map((item: any, index: number) => (
+          <Donasi_BoxStatus
+            key={index}
+            data={item}
+            status={activeCategory as string}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
@@ -9,17 +10,120 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetNewsById,
+  apiDonationUpdateNews,
+} from "@/service/api-client/api-donation";
+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 Toast from "react-native-toast-message";
 
 export default function DonationEditNews() {
+  const { news } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    let newData;
+    if (!data.title || !data.deskripsi) {
+      Toast.show({
+        type: "error",
+        text1: "Judul dan deskripsi harus diisi",
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      newData = {
+        title: data?.title,
+        deskripsi: data?.deskripsi,
+      };
+
+      if (image && image?.uri) {
+        const uploadNewImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          title: data?.title,
+          deskripsi: data?.deskripsi,
+          newImageId: uploadNewImage.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateNews({
+        id: news as string,
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate berita",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil diperbarui",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            image
+              ? image.uri
+              : data && data.imageId
+              ? API_STRORAGE.GET({ fileId: data.imageId })
+              : undefined
+          }
+        />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
           }}
           icon="upload"
         >
@@ -30,6 +134,8 @@ export default function DonationEditNews() {
           label="Judul Berita"
           placeholder="Masukan judul berita"
           required
+          value={data?.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
         <TextAreaCustom
           label="Deskripsi Berita"
@@ -37,12 +143,16 @@ export default function DonationEditNews() {
           required
           showCount
           maxLength={1000}
+          value={data?.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          disabled={!data?.title || !data?.deskripsi}
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update

app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
   BackButton,
@@ -12,13 +13,45 @@ import {
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
-import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiDonationDeleteNews,
+  apiDonationGetNewsById,
+} from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationNews() {
-  const { id, news } = useLocalSearchParams();
+  const { user } = useAuth();
+  const { news } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   return (
     <>
@@ -26,28 +59,28 @@ export default function DonationNews() {
         options={{
           title: "Detail Kabar",
           headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
       <ViewWrapper>
         <BaseBox>
           <StackCustom>
             <TextCustom style={{ alignSelf: "flex-end" }}>
-              {dayjs().format("DD MMM YYYY")}
+              {formatChatTime(data?.createdAt)}
             </TextCustom>
 
-            <DummyLandscapeImage />
+            {data && data.imageId && (
+              <DummyLandscapeImage imageId={data.imageId} />
+            )}
 
             <TextCustom bold size="large" align="center">
-              Judul Berita
+              {data?.title || "-"}
             </TextCustom>
 
-            <TextCustom>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
-              est id temporibus perferendis eos reiciendis reprehenderit tempora
-              ut quibusdam dolores facilis rerum exercitationem recusandae quis
-              neque, adipisci dolorum, aspernatur labore?
-            </TextCustom>
+            <TextCustom>{data?.deskripsi || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
       </ViewWrapper>
@@ -62,12 +95,12 @@ export default function DonationNews() {
             {
               icon: <IconEdit />,
               label: "Edit Berita",
-              path: `/donation/${id}/(news)/${news}/edit-news` as any,
+              path: `/donation/[id]/(news)/${news}/edit-news` as any,
             },
             {
               icon: <IconTrash />,
               label: "Hapus Berita",
-              path: `` as any,
+              path: "",
               color: "red",
             },
           ]}
@@ -79,7 +112,23 @@ export default function DonationNews() {
                 message: "Apakah Anda yakin ingin menghapus berita ini?",
                 textLeft: "Batal",
                 textRight: "Hapus",
-                onPressRight: () => {
+                onPressRight: async () => {
+                  const response = await apiDonationDeleteNews({
+                    id: news as string,
+                  });
+
+                  if (!response.success) {
+                    Toast.show({
+                      type: "error",
+                      text1: "Gagal menghapus berita",
+                    });
+                    return;
+                  }
+
+                  Toast.show({
+                    type: "success",
+                    text1: "Berita berhasil dihapus",
+                  });
                   router.back();
                 },
               });

app/(application)/(user)/donation/[id]/(news)/add-news.tsx

@@ -9,17 +9,79 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiDonationCreateNews } from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationAddNews() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    title: "",
+    deskripsi: "",
+  });
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    let newData: any = { ...data };
+    try {
+      setLoading(true);
+      if (image) {
+        const responseUploadImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          ...newData,
+          imageId: responseUploadImage.data.id,
+        };
+      }
+
+      const response = await apiDonationCreateNews({
+        id: id as string,
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambah berita",
+        });
+
+        return
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil ditambahkan",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image?.uri} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
           }}
           icon="upload"
         >
@@ -30,6 +92,13 @@ export default function DonationAddNews() {
           label="Judul Berita"
           placeholder="Masukan judul berita"
           required
+          value={data.title}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              title: value,
+            });
+          }}
         />
         <TextAreaCustom
           label="Deskripsi Berita"
@@ -37,12 +106,21 @@ export default function DonationAddNews() {
           required
           showCount
           maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => {
+            setData({
+              ...data,
+              deskripsi: value,
+            });
+          }}
         />
-        
+
         <Spacing />
         <ButtonCustom
+          disabled={!data.title || !data.deskripsi}
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmit();
           }}
         >
           Simpan

app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx

@@ -1,45 +1,88 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BackButton,
-    BaseBox,
-    DrawerCustom,
-    Grid,
-    MenuDrawerDynamicGrid,
-    TextCustom,
-    ViewWrapper
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
-import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
 
   return (
     <>
       <Stack.Screen
         options={{
           title: "Daftar Kabar",
-          headerLeft: () => <BackButton />, }}
+          headerLeft: () => <BackButton />,
+        }}
       />
       <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
-            <Grid>
-              <Grid.Col span={8}>
-                <TextCustom truncate bold>
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small">
-                  {dayjs().format("DD MMM YYYY")}
-                </TextCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx

@@ -1,21 +1,55 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   BaseBox,
   DotButton,
   DrawerCustom,
   Grid,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
-import dayjs from "dayjs";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
 
   return (
     <>
@@ -27,20 +61,30 @@ export default function DonationRecapOfNews() {
         }}
       />
       <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
-            <Grid>
-              <Grid.Col span={8}>
-                <TextCustom truncate bold>
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                <TextCustom size="small">{dayjs().format("DD MMM YYYY")}</TextCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx

@@ -0,0 +1,222 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import CopyButton from "@/components/Button/CoyButton";
+import { MainColor } from "@/constants/color-palet";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetInvoiceById,
+  apiDonationUpdateInvoice,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";
+
+export default function DonationInvoice() {
+  const { invoiceId } = useLocalSearchParams();
+  console.log("invoiceId", invoiceId);
+  const [data, setData] = useState<any>(null);
+  const [image, setImage] = useState<any>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerUpdateInvoice = async () => {
+    try {
+      setLoading(true);
+      const responseUploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.donasi_bukti_transfer,
+        imageUri: image?.uri,
+      });
+
+      console.log("[RESPONSE UPLOAD IMAGE]", responseUploadImage);
+
+      if (!responseUploadImage?.data?.id) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      const fileId = responseUploadImage?.data?.id;
+
+      const response = await apiDonationUpdateInvoice({
+        id: invoiceId as string,
+        fileId: fileId,
+        status: "proses",
+      });
+
+      console.log("[RESPONSE UPDATE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berhasil mengunggah bukti transfer",
+      });
+      router.replace(`/donation/[id]/(transaction-flow)/${invoiceId}/process`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox
+            text={`Mohon transfer donasi anda ke rekening dibawah`}
+          />
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom bold>
+                BANK: {data?.DonasiMaster_Bank?.name}
+              </TextCustom>
+              {/* <TextCustom>{data?.DonasiMaster_Bank?.accountName}</TextCustom> */}
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      {data?.DonasiMaster_Bank?.norek}
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <CopyButton textToCopy={data?.DonasiMaster_Bank?.norek} />
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom>Jumlah Transaksi</TextCustom>
+
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      Rp. {formatCurrencyDisplay(data?.nominal) || "-"}
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <CopyButton textToCopy={data?.nominal} />
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom>
+              <TextCustom bold align="center" size={"small"} color="gray">
+                Upload bukti transfer anda.
+              </TextCustom>
+              {image ? (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 10,
+                    paddingInline: 20,
+                  }}
+                >
+                  <TextCustom bold align="center" truncate>
+                    {image?.name}
+                  </TextCustom>
+                </View>
+              ) : null}
+              <ButtonCenteredOnly
+                onPress={() => {
+                  pickFile({
+                    allowedType: "image",
+                    setImageUri(file) {
+                      setImage(file);
+                    },
+                  });
+                }}
+                icon="upload"
+              >
+                Upload
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+
+          <ButtonCustom
+            disabled={!image}
+            isLoading={isLoading}
+            onPress={() => {
+              handlerUpdateInvoice();
+            }}
+          >
+            Simpan
+          </ButtonCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx

@@ -1,13 +1,6 @@
-import {
-  BaseBox,
-  Grid,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { Ionicons } from "@expo/vector-icons";
-import { ActivityIndicator } from "react-native";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
+import { View } from "react-native";
 
 export default function DonationProcess() {
   return (
@@ -16,13 +9,16 @@ export default function DonationProcess() {
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
-              Admin sedang memproses transaksi donasimu
+              Admin sedang memvalidasi data dan bukti transfer anda. Mohon
+              tunggu proses ini selesai.
             </TextCustom>
-            <ActivityIndicator size="large" color={MainColor.yellow} />
+            <View style={{ alignItems: "center", justifyContent: "center" }}>
+              <MoneyTransferAnimation />
+            </View>
           </StackCustom>
         </BaseBox>
 
-        <BaseBox>
+        {/* <BaseBox>
           <Grid>
             <Grid.Col span={10} style={{ justifyContent: "center" }}>
               <TextCustom size="small">
@@ -38,7 +34,7 @@ export default function DonationProcess() {
               />
             </Grid.Col>
           </Grid>
-        </BaseBox>
+        </BaseBox> */}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx

@@ -1,110 +0,0 @@
-import {
-  BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  Grid,
-  InformationBox,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { router, useLocalSearchParams } from "expo-router";
-
-export default function DonationInvoice() {
-  const { id, transaction } = useLocalSearchParams();
-  return (
-    <>
-      <ViewWrapper>
-        <StackCustom>
-          <InformationBox text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${transaction}`} />
-          <BaseBox>
-            <StackCustom gap={"xs"}>
-              <TextCustom>Nama BANK</TextCustom>
-              <TextCustom>Nama Penerima</TextCustom>
-              <Spacing height={10} />
-
-              <BaseBox backgroundColor={MainColor.soft_darkblue}>
-                <Grid containerStyle={{ justifyContent: "center" }}>
-                  <Grid.Col
-                    span={8}
-                    style={{
-                      justifyContent: "center",
-                    }}
-                  >
-                    <TextCustom size="xlarge" bold color="yellow">
-                      4567898765433567
-                    </TextCustom>
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{
-                      alignItems: "flex-end",
-                    }}
-                  >
-                    <ButtonCustom>Salin</ButtonCustom>
-                  </Grid.Col>
-                </Grid>
-              </BaseBox>
-            </StackCustom>
-          </BaseBox>
-
-          <BaseBox>
-            <StackCustom gap={"xs"}>
-              <TextCustom>Jumlah Transaksi</TextCustom>
-
-              <Spacing height={10} />
-
-              <BaseBox backgroundColor={MainColor.soft_darkblue}>
-                <Grid containerStyle={{ justifyContent: "center" }}>
-                  <Grid.Col
-                    span={8}
-                    style={{
-                      justifyContent: "center",
-                    }}
-                  >
-                    <TextCustom size="xlarge" bold color="yellow">
-                      Rp. 1.000.000
-                    </TextCustom>
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{
-                      alignItems: "flex-end",
-                    }}
-                  >
-                    <ButtonCustom>Salin</ButtonCustom>
-                  </Grid.Col>
-                </Grid>
-              </BaseBox>
-            </StackCustom>
-          </BaseBox>
-
-          <BaseBox>
-            <StackCustom>
-              <TextCustom>Upload bukti transfer anda.</TextCustom>
-              <ButtonCenteredOnly
-                onPress={() => {
-                  router.push("/(application)/(image)/take-picture/123");
-                }}
-                icon="upload"
-              >
-                Upload
-              </ButtonCenteredOnly>
-            </StackCustom>
-          </BaseBox>
-
-          <ButtonCustom
-            onPress={() => {
-              router.push(`/donation/${id}/(transaction-flow)/process`);
-            }}
-          >
-            Saya Sudah Transfer
-          </ButtonCustom>
-        </StackCustom>
-        <Spacing />
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx

@@ -9,15 +9,43 @@ import {
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { Ionicons } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
 
 export default function InvestmentInputDonation() {
   const { id } = useLocalSearchParams();
+  const [nominal, setNominal] = useState<number>(0);
+
+  const handlerSubmit = async () => {
+    try {
+      await AsyncStorage.setItem(
+        LOCAL_STORAGE_KEY.transactionDonation,
+        JSON.stringify({ nominal: nominal.toString() })
+      );
+      router.replace(`/donation/${id}/select-bank`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const displayJumlah = formatCurrencyDisplay(nominal);
+
+  const handleChangeCurrency = (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setNominal(Number(numeric));
+  };
+
   const bottomComponent = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => router.replace(`/donation/${id}/select-bank`)}
+        disabled={nominal < 10000 || nominal === 0}
+        onPress={() => {
+          handlerSubmit();
+        }}
       >
         Lanjutan
       </ButtonCustom>
@@ -27,7 +55,7 @@ export default function InvestmentInputDonation() {
     <>
       <ViewWrapper footerComponent={bottomComponent}>
         {listData.map((item, i) => (
-          <BaseBox key={i}>
+          <BaseBox key={i} onPress={() => setNominal(item.value)}>
             <Grid>
               <Grid.Col span={8}>
                 <TextCustom bold size="large">
@@ -48,9 +76,12 @@ export default function InvestmentInputDonation() {
 
         <BaseBox>
           <TextInputCustom
+            keyboardType="numeric"
             label="Nominal lainnya"
             placeholder="0"
             iconLeft="Rp."
+            value={displayJumlah}
+            onChangeText={(value) => handleChangeCurrency(value)}
           />
           <TextCustom size="small" color="gray">
             Minimal donasi Rp. 10.000

app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx

@@ -5,24 +5,84 @@ import {
   ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
-import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDonationCreateInvoice } from "@/service/api-client/api-donation";
+import { apiMasterBank } from "@/service/api-client/api-master";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 
 export default function DonationSelectBank() {
-  const { id, transaction } = useLocalSearchParams();
-  const [value, setValue] = useState<any | number>("");
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [select, setSelect] = useState<any | number>("");
+  const [listBank, setListBank] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    loadListBank();
+  }, []);
+
+  const loadListBank = async () => {
+    try {
+      const response = await apiMasterBank();
+
+      setListBank(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListBank([]);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+      const dataStorage = await AsyncStorage.getItem(
+        LOCAL_STORAGE_KEY.transactionDonation
+      );
+
+      if (dataStorage) {
+        const storage = JSON.parse(dataStorage);
+        const newData = {
+          ...storage,
+          bankId: select,
+          authorId: user?.id,
+        };
+
+        const response = await apiDonationCreateInvoice({
+          id: id as string,
+          data: newData,
+        });
+
+        if (response.success) {
+          const invoiceId = response.data.id;
+
+          await AsyncStorage.removeItem(LOCAL_STORAGE_KEY.transactionDonation);
+
+          router.replace(
+            `/(application)/(user)/donation/[id]/(transaction-flow)/${invoiceId}/invoice`
+          );
+        } else {
+          console.log("[FAILED]", response);
+        }
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonSubmit = () => {
     return (
       <>
         <BoxButtonOnFooter>
           <ButtonCustom
-            onPress={() =>
-              router.replace(
-                `/(application)/(user)/donation/${id}/(transaction-flow)/${transaction}/invoice`
-              )
-            }
+            isLoading={isLoading}
+            disabled={!select}
+            onPress={() => handlerSubmit()}
           >
             Pilih
           </ButtonCustom>
@@ -32,12 +92,14 @@ export default function DonationSelectBank() {
   };
   return (
     <ViewWrapper footerComponent={buttonSubmit()}>
-      <RadioGroup value={value} onChange={setValue}>
-        {dummyMasterBank.map((item) => (
-          <BaseBox key={item.name}>
-            <RadioCustom label={item.name} value={item.code} />
-          </BaseBox>
-        ))}
+      <RadioGroup value={select} onChange={setSelect}>
+        {_.isEmpty(listBank)
+          ? []
+          : listBank?.map((item: any, index: number) => (
+              <BaseBox key={index}>
+                <RadioCustom label={item.namaBank} value={item.id} />
+              </BaseBox>
+            ))}
       </RadioGroup>
     </ViewWrapper>
   );

app/(application)/(user)/donation/[id]/[status]/detail.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
@@ -14,16 +15,43 @@ import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
 import { FontAwesome6 } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
 import _ from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function DonasiDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
 
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
     router.navigate(item.path as any);
@@ -46,13 +74,22 @@ export default function DonasiDetailStatus() {
       />
       <ViewWrapper>
         <Donation_ComponentBoxDetailData
+          data={data}
           bottomSection={
-            status === "publish" && <Donation_ProgressSection id={id as string} />
+            status === "publish" && (
+              <Donation_ProgressSection id={id as string} />
+            )
           }
         />
-        <Donation_ComponentStoryFunrising id={id as string} />
+        <Donation_ComponentStoryFunrising
+          id={id as string}
+          dataStory={data?.CeritaDonasi}
+        />
         <Spacing />
-        <Donation_ButtonStatusSection status={status as string} />
+        <Donation_ButtonStatusSection
+          id={id as string}
+          status={status as string}
+        />
         <Spacing />
       </ViewWrapper>
 

app/(application)/(user)/donation/[id]/detail-story.tsx

@@ -1,27 +1,42 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   DummyLandscapeImage,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { useLocalSearchParams } from "expo-router";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonationDetailStory() {
   const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data.CeritaDonasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
   return (
     <ViewWrapper>
       <StackCustom>
-        <TextCustom>
-          Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
-          quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
-          fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
-        </TextCustom>
-        <DummyLandscapeImage />
-        <TextCustom>
-          Lorem {id} ipsum dolor, sit amet consectetur adipisicing elit. Fuga
-          quasi nam nesciunt nisi corporis alias modi, pariatur sit totam rem
-          fugiat ex similique magni, aliquam maiores officiis iure at adipisci.
-        </TextCustom>
+        <TextCustom>{data?.pembukaan || "-"}</TextCustom>
+        <DummyLandscapeImage imageId={data?.imageId} />
+        <TextCustom>{data?.cerita || "-"}</TextCustom>
       </StackCustom>
     </ViewWrapper>
   );

app/(application)/(user)/donation/[id]/edit-rekening.tsx

@@ -1,7 +1,80 @@
-import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
-import { router } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ViewWrapper,
+  StackCustom,
+  InformationBox,
+  TextInputCustom,
+  Spacing,
+  ButtonCustom,
+} from "@/components";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditRekening() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    namaBank: "",
+    rekening: "",
+  });
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      const resData = response.data;
+      console.log("[RESPONSE]", JSON.stringify(resData, null, 2));
+
+      setData({
+        namaBank: resData.namaBank,
+        rekening: resData.rekening,
+      });
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    try {
+      setLoading(true);
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: data,
+        category: "edit-bank-account",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate data bank",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Data bank berhasil diupdate",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -10,17 +83,22 @@ export default function DonationEditRekening() {
           label="Nama Bank"
           placeholder="Masukkan nama bank"
           required
+          value={data.namaBank}
+          onChangeText={(value) => setData({ ...data, namaBank: value })}
         />
         <TextInputCustom
           label="Nomor Rekening"
           placeholder="Masukkan nomor rekening"
           required
+          value={data.rekening}
+          onChangeText={(value) => setData({ ...data, rekening: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update
@@ -29,4 +107,4 @@ export default function DonationEditRekening() {
       <Spacing />
     </ViewWrapper>
   );
-}
+}

app/(application)/(user)/donation/[id]/edit-story.tsx

@@ -1,16 +1,97 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCenteredOnly,
-    ButtonCustom,
-    InformationBox,
-    LandscapeFrameUploaded,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    ViewWrapper
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditStory() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  const [imageStory, setImageStory] = useState<string | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data.CeritaDonasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    let newData;
+    try {
+      setLoading(true);
+
+      newData = {
+        ...data,
+      };
+
+      if (imageStory) {
+        const responseUploadImageDonasi = await uploadFileService({
+          imageUri: imageStory,
+          dirId: DIRECTORY_ID.donasi_cerita_image,
+        });
+
+        newData = {
+          ...data,
+          newImageId: responseUploadImageDonasi.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit-story",
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil disimpan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -21,12 +102,23 @@ export default function DonationEditStory() {
           required
           showCount
           maxLength={1000}
+          value={data?.pembukaan}
+          onChangeText={(value) => setData({ ...data, pembukaan: value })}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            imageStory ? imageStory : API_IMAGE.GET({ fileId: data?.imageId })
+          }
+        />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImageStory(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -39,12 +131,15 @@ export default function DonationEditStory() {
           required
           showCount
           maxLength={1000}
+          value={data?.cerita}
+          onChangeText={(value) => setData({ ...data, cerita: value })}
         />
 
         <Spacing height={40} />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update

app/(application)/(user)/donation/[id]/edit.tsx

@@ -1,78 +1,275 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCenteredOnly,
-    ButtonCustom,
-    InformationBox,
-    LandscapeFrameUploaded,
-    SelectCustom,
-    Spacing,
-    StackCustom,
-    TextInputCustom,
-    ViewWrapper,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  LoaderCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
-import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
-import { router } from "expo-router";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { apiMasterDonation } from "@/service/api-client/api-master";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+interface IEditDonation {
+  donasiMaster_KategoriId: string;
+  donasiMaster_DurasiId: string;
+  title: string;
+  target: string;
+  imageId: string;
+}
 
 export default function DonationEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IEditDonation>({
+    donasiMaster_DurasiId: "",
+    donasiMaster_KategoriId: "",
+    title: "",
+    target: "",
+    imageId: "",
+  });
+
+  const [image, setImage] = useState<string | null>(null);
+  const [listCategory, setListCategory] = useState<any[]>([]);
+  const [listDuration, setListDuration] = useState<any[]>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState(false);
+
+  const displayTarget = formatCurrencyDisplay(data?.target);
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev: any) => ({ ...prev, [field]: numeric }));
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      if (response.success) {
+        setData({
+          donasiMaster_DurasiId: response.data.donasiMaster_DurasiId,
+          donasiMaster_KategoriId: response.data.donasiMaster_KategoriId,
+          title: response.data.title,
+          target: response.data.target,
+          imageId: response.data.imageId,
+        });
+      }
+
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiMasterDonation({ category: "" });
+
+      setListCategory(response.data.category);
+      setListDuration(response.data.duration);
+    } catch (error) {
+      console.log(["ERROR"], error);
+      setListCategory([]);
+      setListDuration([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const validateData = async () => {
+    if (
+      !data.donasiMaster_DurasiId ||
+      !data.donasiMaster_KategoriId ||
+      !data.title ||
+      !data.target ||
+      !data.imageId
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Harap lengkapi data",
+      });
+
+      return false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmitUpdate = async () => {
+    const isValid = await validateData();
+    if (!isValid) {
+      return;
+    }
+
+    try {
+      let newData;
+
+      newData = {
+        ...data,
+      };
+      setLoading(true);
+
+      if (image && image) {
+        const uploadNewImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_image,
+          imageUri: image,
+        });
+
+        if (!uploadFileService) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        newData = {
+          ...data,
+          newImageId: uploadNewImage.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit-donation",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil diperbarui",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE DONASI]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+      <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+      {!data || loadList ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            label="Judul Donasi"
+            placeholder="Masukkan Judul Donasi"
+            required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
+          <TextInputCustom
+            iconLeft="Rp."
+            label="Target Donasi"
+            placeholder="Masukkan Target Donasi"
+            required
+            keyboardType="numeric"
+            value={displayTarget}
+            onChangeText={handleChangeCurrency("target")}
+          />
 
-        <TextInputCustom
-          label="Judul Donasi"
-          placeholder="Masukkan Judul Donasi"
-          required
-        />
-        <TextInputCustom
-          label="Target Donasi"
-          placeholder="Masukkan Target Donasi"
-          required
-          keyboardType="numeric"
-        />
+          <LandscapeFrameUploaded
+            image={image ? image : API_IMAGE.GET({ fileId: data?.imageId })}
+          />
+          <ButtonCenteredOnly
+            onPress={() => {
+              pickFile({
+                setImageUri: ({ uri }) => {
+                  setImage(uri);
+                },
+                allowedType: "image",
+              });
+            }}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
+          <Spacing />
 
-        <LandscapeFrameUploaded />
-        <ButtonCenteredOnly
-          onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
-          }}
-          icon="upload"
-        >
-          Upload
-        </ButtonCenteredOnly>
-        <Spacing />
+          <SelectCustom
+            data={
+              _.isEmpty(listCategory)
+                ? []
+                : listCategory?.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Kategori Donasi"
+            placeholder="Pilih Kategori Donasi"
+            required
+            value={data?.donasiMaster_KategoriId}
+            onChange={(value: any) =>
+              setData({ ...data, donasiMaster_KategoriId: value })
+            }
+          />
 
-        <SelectCustom
-          data={dummyDonasiKategori.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Kategori Donasi"
-          placeholder="Pilih Kategori Donasi"
-          required
-        />
+          <SelectCustom
+            data={
+              _.isEmpty(listDuration)
+                ? []
+                : listDuration?.map((item) => ({
+                    label: item.name + " hari",
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Durasi Donasi"
+            placeholder="Pilih Durasi Donasi"
+            required
+            value={data?.donasiMaster_DurasiId}
+            onChange={(value: any) =>
+              setData({ ...data, donasiMaster_DurasiId: value })
+            }
+          />
 
-        <SelectCustom
-          data={dummyDonasiDurasi.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Durasi Donasi"
-          placeholder="Pilih Durasi Donasi"
-          required
-        />
-
-        <Spacing />
-        <ButtonCustom
-          onPress={() => {
-            router.back();
-          }}
-        >
-          Update
-        </ButtonCustom>
-      </StackCustom>
+          <Spacing />
+          <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Update
+          </ButtonCustom>
+        </StackCustom>
+      )}
       <Spacing />
     </ViewWrapper>
   );

app/(application)/(user)/donation/[id]/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   BoxButtonOnFooter,
@@ -9,24 +10,54 @@ import {
   ViewWrapper,
 } from "@/components";
 import { IconNews } from "@/components/_Icon";
+import { useAuth } from "@/hooks/use-auth";
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonasiDetailBeranda() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
+  console.log("ID ", id);
   const [openDrawer, setOpenDrawer] = useState(false);
 
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      console.log("[RES GET ONE]", JSON.stringify(response.data, null, 2));
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const buttonSection = (
     <>
       <BoxButtonOnFooter>
         <ButtonCustom
-          onPress={() =>
-            router.navigate(`/donation/${id}/(transaction-flow)`)
-          }
+          onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
         >
           Donasi
         </ButtonCustom>
@@ -40,16 +71,23 @@ export default function DonasiDetailBeranda() {
         options={{
           title: `Detail Donasi`,
           headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data?.Author?.id ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
+            data={data}
             bottomSection={<Donation_ProgressSection id={id as string} />}
           />
-          <Donation_ComponentInfoFundrising id={id as string} />
-          <Donation_ComponentStoryFunrising id={id as string} />
+          <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
+          <Donation_ComponentStoryFunrising
+            id={id as string}
+            dataStory={data?.CeritaDonasi}
+          />
         </StackCustom>
       </ViewWrapper>
 

app/(application)/(user)/donation/[id]/infromation-fundrising.tsx

@@ -1,32 +1,68 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarCustom,
+  AvatarComp,
   BaseBox,
   ButtonCustom,
-  CenterCustom,
   Grid,
+  LoaderCustom,
   Spacing,
   TextCustom,
   ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import React from "react";
+import { apiDonationFundrising } from "@/service/api-client/api-donation";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function DonationInformationFunrising() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationFundrising({ id: id as string });
+
+      setData(response?.data?.user);
+      setList(response?.data?.donasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
         <BaseBox>
           <Grid>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
-              <CenterCustom>
-                <AvatarCustom size="lg" />
+              <View
+                style={{
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 10,
+                }}
+              >
+                <AvatarComp size="lg" fileId={data?.Profile?.imageId} />
                 <TextCustom bold size="large" truncate>
-                  @Username
+                  @{data?.username}
                 </TextCustom>
-              </CenterCustom>
+              </View>
             </Grid.Col>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
-              <ButtonCustom href={`/profile/1234`}>
+              <ButtonCustom href={`/profile/${data?.Profile?.id}`}>
                 Kunjungi Profile
               </ButtonCustom>
             </Grid.Col>
@@ -35,9 +71,15 @@ export default function DonationInformationFunrising() {
 
         <Spacing />
 
-        {Array.from({ length: 10 }).map((_, index) => (
-          <Donation_BoxPublish key={index} id={index.toString()} />
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray" size="small">Belum ada data</TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Donation_BoxPublish key={index} id={item?.id} data={item} />
+          ))
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/donation/create-story.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
@@ -9,9 +10,107 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiDonationCreate,
+  apiDonationGetOne,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationCreateStory() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [temporary, setTemporary] = useState<any>();
+  const [data, setData] = useState({
+    pembukaan: "",
+    cerita: "",
+    namaBank: "",
+    rekening: "",
+  });
+  const [imageStory, setImageStory] = useState<string | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "temporary",
+      });
+
+      setTemporary(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    if (_.values(data).includes("")) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const responseUploadImageDonasi = await uploadFileService({
+        imageUri: imageStory,
+        dirId: DIRECTORY_ID.donasi_cerita_image,
+      });
+
+      const newData = {
+        // Data Donasi
+        temporaryId: temporary?.id,
+        authorId: user?.id,
+        title: temporary?.title,
+        target: temporary?.target,
+        donasiMaster_KategoriId: temporary?.donasiMaster_KategoriId,
+        donasiMaster_DurasiId: temporary?.donasiMaster_DurasiId,
+        imageId: temporary?.imageId,
+        // Data Bank
+        namaBank: data.namaBank,
+        rekening: data.rekening,
+        // Data Cerita
+        imageCeritaId: responseUploadImageDonasi.data.id,
+        pembukaan: data.pembukaan,
+        cerita: data.cerita,
+      };
+
+      const response = await apiDonationCreate({
+        data: newData,
+        category: "permanent",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil disimpan",
+      });
+      router.replace("/donation/status");
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -22,6 +121,8 @@ export default function DonationCreateStory() {
           required
           showCount
           maxLength={1000}
+          value={data.pembukaan}
+          onChangeText={(value) => setData({ ...data, pembukaan: value })}
         />
         <TextAreaCustom
           label="Tujuan Donasi"
@@ -29,12 +130,19 @@ export default function DonationCreateStory() {
           required
           showCount
           maxLength={1000}
+          value={data.cerita}
+          onChangeText={(value) => setData({ ...data, cerita: value })}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={imageStory || ""} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImageStory(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -47,17 +155,23 @@ export default function DonationCreateStory() {
           label="Nama Bank"
           placeholder="Masukkan nama bank"
           required
+          value={data.namaBank}
+          onChangeText={(value) => setData({ ...data, namaBank: value })}
         />
         <TextInputCustom
           label="Nomor Rekening"
           placeholder="Masukkan nomor rekening"
           required
+          keyboardType="numeric"
+          value={data.rekening}
+          onChangeText={(value) => setData({ ...data, rekening: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.replace(`/donation/(tabs)/status`);
+            handlerSubmit();
           }}
         >
           Simpan

app/(application)/(user)/donation/create.tsx

@@ -3,17 +3,127 @@ import {
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  LoaderCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
-import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiDonationCreate } from "@/service/api-client/api-donation";
+import { apiMasterDonation } from "@/service/api-client/api-master";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationCreate() {
+  const [listCategory, setListCategory] = useState<any[]>([]);
+  const [listDuration, setListDuration] = useState<any[]>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [image, setImage] = useState<string | null>(null);
+  const [data, setData] = useState({
+    kategoriId: "",
+    title: "",
+    target: "",
+    durasiId: "",
+  });
+
+  const displayTarget = formatCurrencyDisplay(data.target);
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev) => ({ ...prev, [field]: numeric }));
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiMasterDonation({ category: "" });
+
+      setListCategory(response.data.category);
+      setListDuration(response.data.duration);
+    } catch (error) {
+      console.log(["ERROR"], error);
+      setListCategory([]);
+      setListDuration([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const validateData = () => {
+    if (!data.title || !data.target || !data.durasiId || !data.kategoriId) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmit = async () => {
+    if (!validateData()) {
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.donasi_image,
+      });
+
+      if (!responseUploadImage.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+
+      const imageId = responseUploadImage.data.id;
+
+      const newData = {
+        title: data.title,
+        target: data.target,
+        durasiId: data.durasiId,
+        kategoriId: data.kategoriId,
+        imageId: imageId,
+      };
+
+      const response = await apiDonationCreate({
+        data: newData,
+        category: "temporary",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+        return;
+      }
+
+      router.push(`/donation/create-story?id=${response.data.id}`);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -23,18 +133,28 @@ export default function DonationCreate() {
           label="Judul Donasi"
           placeholder="Masukkan Judul Donasi"
           required
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
         <TextInputCustom
+          iconLeft="Rp."
           label="Target Donasi"
           placeholder="Masukkan Target Donasi"
           required
           keyboardType="numeric"
+          value={displayTarget}
+          onChangeText={handleChangeCurrency("target")}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image || ""} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImage(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -42,31 +162,52 @@ export default function DonationCreate() {
         </ButtonCenteredOnly>
         <Spacing />
 
-        <SelectCustom
-          data={dummyDonasiKategori.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Kategori Donasi"
-          placeholder="Pilih Kategori Donasi"
-          required
-        />
+        {loadList ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            data={
+              _.isEmpty(listCategory)
+                ? []
+                : listCategory?.map((item: any) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Kategori Donasi"
+            placeholder="Pilih Kategori Donasi"
+            required
+            value={data.kategoriId}
+            onChange={(value: any) => setData({ ...data, kategoriId: value })}
+          />
+        )}
+
+        {loadList ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            data={
+              _.isEmpty(listDuration)
+                ? []
+                : listDuration?.map((item: any) => ({
+                    label: item.name + `${" hari"}`,
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Durasi Donasi"
+            placeholder="Pilih Durasi Donasi"
+            required
+            value={data.durasiId}
+            onChange={(value: any) => setData({ ...data, durasiId: value })}
+          />
+        )}
 
-        <SelectCustom
-          data={dummyDonasiDurasi.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Durasi Donasi"
-          placeholder="Pilih Durasi Donasi"
-          required
-        />
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.replace("/donation/create-story");
+            handlerSubmit();
+            // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
           }}
         >
           Selanjutnya

app/(application)/(user)/forum/[id]/edit.tsx

@@ -1,37 +1,98 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  LoaderCustom,
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
-import { useState } from "react";
+import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumEdit() {
+  const { id } = useLocalSearchParams();
   const [text, setText] = useState("");
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const buttonFooter = (
-    <BoxButtonOnFooter>
-      <ButtonCustom
-        onPress={() => {
-          console.log("Posting", text);
-          router.back();
-        }}
-      >
-        Update
-      </ButtonCustom>
-    </BoxButtonOnFooter>
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
   );
 
+  const onLoadData = async (id: string) => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiForumGetOne({ id });
+
+      setText(response.data.diskusi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlerUpdateData = async () => {
+    if (!text) {
+      Toast.show({
+        type: "error",
+        text1: "Harap masukkan diskusi",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiForumUpdate({
+        id: id as string,
+        data: text,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil diupdate",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonFooter = () => {
+    return (
+      <>
+        {!loadingGetData && (
+          <BoxButtonOnFooter>
+            <ButtonCustom isLoading={isLoading} onPress={handlerUpdateData}>
+              Update
+            </ButtonCustom>
+          </BoxButtonOnFooter>
+        )}
+      </>
+    );
+  };
+
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
-      <TextAreaCustom
-        placeholder="Ketik diskusi anda..."
-        maxLength={1000}
-        showCount
-        value={text}
-        onChangeText={setText}
-      />
+    <ViewWrapper footerComponent={buttonFooter()}>
+      {!loadingGetData ? (
+        <TextAreaCustom
+          placeholder="Ketik diskusi anda..."
+          maxLength={1000}
+          showCount
+          value={text}
+          onChangeText={(value) => {
+            setText(value);
+          }}
+        />
+      ) : (
+        <LoaderCustom />
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/forum/[id]/forumku.tsx

@@ -1,35 +1,86 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
-  AvatarCustom,
+  AvatarComp,
   ButtonCustom,
   CenterCustom,
   DrawerCustom,
+  FloatingButton,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Forumku() {
   const { id } = useLocalSearchParams();
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [listData, setListData] = useState<any | null>(null);
+  const [dataUser, setDataUser] = useState<any | null>(null);
+  const [loadingGetList, setLoadingGetList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(id as string);
+    }, [id])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    try {
+      const response = await apiUser(id);
+
+      setDataUser(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({
+        search: "",
+        authorId: id as string,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };
 
   return (
     <>
-      <ViewWrapper>
+      <ViewWrapper
+        floatingButton={
+          user?.id === id && (
+            <FloatingButton
+              onPress={() =>
+                router.navigate("/(application)/(user)/forum/create")
+              }
+            />
+          )
+        }
+      >
         <StackCustom>
           <CenterCustom>
-            <AvatarCustom
-              href={`/(application)/(image)/preview-image/${id}`}
+            <AvatarComp
+              fileId={dataUser?.Profile?.imageId}
+              href={`/(application)/(image)/preview-image/${dataUser?.Profile?.imageId}`}
               size="xl"
             />
           </CenterCustom>
@@ -37,32 +88,43 @@ export default function Forumku() {
           <Grid>
             <Grid.Col span={6}>
               <TextCustom bold truncate>
-                @bagas_banuna
+                @{dataUser?.username || "-"}
               </TextCustom>
-              <TextCustom>1 postingan</TextCustom>
+              <TextCustom>{listData?.length || "0"} postingan</TextCustom>
             </Grid.Col>
             <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <ButtonCustom href={`/profile/${id}`}>
+              <ButtonCustom href={`/profile/${dataUser?.Profile?.id}`}>
                 Kunjungi Profile
               </ButtonCustom>
             </Grid.Col>
           </Grid>
-          {listDummyDiscussionForum.map((e, i) => (
-            <Forum_BoxDetailSection
-              key={i}
-              data={e}
-              setOpenDrawer={setOpenDrawer}
-              setStatus={setStatus}
-              isTruncate={true}
-              href={`/forum/${id}`}
-            />
-          ))}
+          {loadingGetList ? (
+            <LoaderCustom />
+          ) : _.isEmpty(listData) ? (
+            <TextCustom> Tidak ada diskusi</TextCustom>
+          ) : (
+            <>
+              {listData?.map((item: any, index: number) => (
+                <Forum_BoxDetailSection
+                  isRightComponent={false}
+                  key={index}
+                  data={item}
+                  isTruncate={true}
+                  href={`/forum/${item.id}`}
+                  onSetData={(value) => {
+                    setOpenDrawer(value.setOpenDrawer);
+                    setStatus(value.setStatus);
+                  }}
+                />
+              ))}
+            </>
+          )}
         </StackCustom>
       </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
@@ -72,42 +134,9 @@ export default function Forumku() {
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
+          authorId={id as string}
         />
       </DrawerCustom>
-
-      {/* Alert Komponen Eksternal */}
-      <AlertCustom
-        isVisible={alertStatus}
-        onLeftPress={() => setAlertStatus(false)}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        onLeftPress={() => setDeleteAlert(false)}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/forum/[id]/index.tsx

@@ -1,176 +1,263 @@
 import {
-  AlertCustom,
   ButtonCustom,
   DrawerCustom,
+  LoaderCustom,
   Spacing,
   TextAreaCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyCommentarForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
 import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  apiForumCreateComment,
+  apiForumGetComment,
+  apiForumGetOne,
+  apiForumUpdateStatus,
+} from "@/service/api-client/api-forum";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+
+interface CommentProps {
+  id: string;
+  isActive: boolean;
+  komentar: string;
+  createdAt: Date;
+  authorId: string;
+  Author: {
+    id: string;
+    username: string;
+    Profile: {
+      id: string;
+      imageId: string;
+    };
+  };
+}
 
 export default function ForumDetail() {
   const { id } = useLocalSearchParams();
-  console.log(id);
+  const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [listComment, setListComment] = useState<CommentProps[] | null>(null);
+  const [isLoadingComment, setLoadingComment] = useState(false);
+
+  // Status
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
   const [text, setText] = useState("");
+  const [authorId, setAuthorId] = useState("");
+  const [dataId, setDataId] = useState("");
 
   // Comentar
   const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [alertDeleteCommentar, setAlertDeleteCommentar] = useState(false);
+  const [commentId, setCommentId] = useState("");
+  const [commentAuthorId, setCommentAuthorId] = useState("");
 
-  const dataDummy = {
-    name: "Bagas",
-    status: "Open",
-    date: "14/07/2025",
-    deskripsi:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae inventore iure pariatur, libero omnis excepturi. Ullam ad officiis deleniti quos esse odit nesciunt, ipsam adipisci cumque aliquam corporis culpa fugit?",
-    jumlahBalas: 2,
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  const onLoadData = async (id: string) => {
+    try {
+      const response = await apiForumGetOne({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  useEffect(() => {
+    onLoadListComment(id as string);
+  }, [id]);
+
+  const onLoadListComment = async (id: string) => {
+    try {
+      const response = await apiForumGetComment({
+        id: id as string,
+      });
+      setListComment(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Update Status
+  const handlerUpdateStatus = async (value: any) => {
+    try {
+      const response = await apiForumUpdateStatus({
+        id: id as string,
+        data: value,
+      });
+      if (response.success) {
+        setStatus(response.data);
+        setData({
+          ...data,
+          ForumMaster_StatusPosting: {
+            status: response.data,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Create Commentar
+  const handlerCreateCommentar = async () => {
+    const newData = {
+      comment: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setLoadingComment(true);
+      const response = await apiForumCreateComment({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        setText("");
+        const newComment = {
+          id: response.data.id,
+          isActive: response.data.isActive,
+          komentar: response.data.komentar,
+          createdAt: response.data.createdAt,
+          authorId: response.data.authorId,
+          Author: response.data.Author,
+        };
+        setListComment((prev) => [newComment, ...(prev || [])]);
+        setData({
+          ...data,
+          count: data.count + 1,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingComment(false);
+    }
   };
 
   return (
     <>
       <ViewWrapper>
-        {/* <StackCustom>
-        </StackCustom> */}
-        <Forum_BoxDetailSection
-          data={dataDummy}
-          setOpenDrawer={setOpenDrawer}
-          setStatus={setStatus}
-        />
+        {!data && !listComment ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            {/* Box Posting */}
+            <Forum_BoxDetailSection
+              data={data}
+              onSetData={() => {
+                setOpenDrawer(true);
+                setStatus(data.ForumMaster_StatusPosting?.status);
+                setAuthorId(data.Author?.id);
+                setDataId(data.id);
+              }}
+            />
 
-        <TextAreaCustom
-          placeholder="Ketik diskusi anda..."
-          maxLength={1000}
-          showCount
-          value={text}
-          onChangeText={setText}
-          style={{
-            marginBottom: 0,
-          }}
-        />
-        <ButtonCustom
-          style={{
-            alignSelf: "flex-end",
-          }}
-          onPress={() => {
-            console.log("Posting", text);
-            router.back();
-          }}
-        >
-          Balas
-        </ButtonCustom>
+            {/* Area Commentar */}
+            {data?.ForumMaster_StatusPosting?.status === "Open" && (
+              <>
+                <TextAreaCustom
+                  placeholder="Ketik diskusi anda..."
+                  maxLength={1000}
+                  showCount
+                  value={text}
+                  onChangeText={setText}
+                  style={{
+                    marginBottom: 0,
+                  }}
+                />
+                <ButtonCustom
+                  isLoading={isLoadingComment}
+                  style={{
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    handlerCreateCommentar();
+                  }}
+                >
+                  Balas
+                </ButtonCustom>
+              </>
+            )}
+            <Spacing height={40} />
 
-        <Spacing height={40} />
-
-        {listDummyCommentarForum.map((e, i) => (
-          <Forum_CommentarBoxSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawerCommentar}
-          />
-        ))}
+            {/* List Commentar */}
+            {_.isEmpty(listComment) ? (
+              <TextCustom align="center" color="gray" size={"small"}>
+                Tidak ada komentar
+              </TextCustom>
+            ) : (
+              <TextCustom color="gray">Komentar :</TextCustom>
+            )}
+            <Spacing height={5} />
+            {listComment?.map((item: any, index: number) => (
+              <Forum_CommentarBoxSection
+                key={index}
+                data={item}
+                onSetData={(value) => {
+                  setCommentId(value.setCommentId);
+                  setOpenDrawerCommentar(value.setOpenDrawer);
+                  setCommentAuthorId(value.setCommentAuthorId);
+                }}
+              />
+            ))}
+          </>
+        )}
       </ViewWrapper>
 
+      {/* Posting Drawer */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
         <Forum_MenuDrawerBerandaSection
-          id={id as string}
+          id={dataId}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
+          authorId={authorId}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
         />
       </DrawerCustom>
 
-      {/* Alert Status */}
-      <AlertCustom
-        isVisible={alertStatus}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
-
-      {/* Commentar */}
+      {/* Commentar Drawer */}
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawerCommentar}
         closeDrawer={() => setOpenDrawerCommentar(false)}
       >
         <Forum_MenuDrawerCommentar
-          id={id as string}
+          id={commentId as string}
+          commentId={commentId}
+          commentAuthorId={commentAuthorId}
           setIsDrawerOpen={() => {
             setOpenDrawerCommentar(false);
           }}
-          setShowDeleteAlert={setAlertDeleteCommentar}
+          listComment={listComment}
+          setListComment={setListComment}
+          countComment={data?.count}
+          setCountComment={(val: any) => {
+            setData((prev: any) => ({
+              ...prev,
+              count: val,
+            }));
+          }}
         />
       </DrawerCustom>
-
-      {/* Alert Delete Commentar */}
-      <AlertCustom
-        isVisible={alertDeleteCommentar}
-        title="Hapus Komentar"
-        message="Apakah Anda yakin ingin menghapus komentar ini?"
-        onLeftPress={() => {
-          setOpenDrawerCommentar(false);
-          setAlertDeleteCommentar(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawerCommentar(false);
-          setAlertDeleteCommentar(false);
-          console.log("Hapus commentar");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -5,27 +5,69 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreateReportCommentar } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumOtherReportCommentar() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [value, setValue] = useState<string>("");
+
+  const handlerSubmitReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      description: value,
+    };
+
+    try {
+      const response = await apiForumCreateReportCommentar({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   const handleSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!value}
         backgroundColor={MainColor.red}
         textColor={MainColor.white}
         onPress={() => {
-          console.log("Report lainnya");
-          router.back();
+          handlerSubmitReport();
         }}
       >
         Report
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
   return (
     <>
       <ViewWrapper footerComponent={handleSubmit}>
-        <TextAreaCustom placeholder="Laporkan Komentar" />
+        <TextAreaCustom
+          placeholder="Laporkan Komentar"
+          value={value}
+          onChangeText={setValue}
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -5,17 +5,54 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { router } from "expo-router";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreateReportPosting } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumOtherReportPosting() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [value, setValue] = useState<string>("");
+
+  const handlerSubmitReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      description: value,
+    };
+
+    try {
+      const response = await apiForumCreateReportPosting({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   const handleSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!value}
         backgroundColor={MainColor.red}
         textColor={MainColor.white}
         onPress={() => {
-          console.log("Report lainnya");
-          router.back();
+          handlerSubmitReport();
         }}
       >
         Report
@@ -25,7 +62,11 @@ export default function ForumOtherReportPosting() {
   return (
     <>
       <ViewWrapper footerComponent={handleSubmit}>
-        <TextAreaCustom placeholder="Laporkan Diskusi" />
+        <TextAreaCustom
+          placeholder="Laporkan Diskusi"
+          value={value}
+          onChangeText={setValue}
+        />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -1,41 +1,105 @@
 import {
-    ButtonCustom,
-    Spacing,
-    StackCustom,
-    ViewWrapper
+  ButtonCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
 } from "@/components";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { router } from "expo-router";
+import { apiForumCreateReportCommentar, apiMasterForumReportList } from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState, useEffect } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumReportCommentar() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [selectReport, setSelectReport] = useState<string>("");
+  const [listMaster, setListMaster] = useState<any[] | null>(null);
+  const [isLoadingList, setIsLoadingList] = useState(false);
+
+  useEffect(() => {
+    onLoadListMaster();
+  }, []);
+
+  const onLoadListMaster = async () => {
+    try {
+      setIsLoadingList(true);
+      const response = await apiMasterForumReportList();
+
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingList(false);
+    }
+  };
+
+  const handlerReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      categoryId: selectReport,
+    };
+
+    try {
+      const response = await apiForumCreateReportCommentar({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
-        <StackCustom>
-          <Forum_ReportListSection />
-          <ButtonCustom
-            backgroundColor={MainColor.red}
-            textColor={MainColor.white}
-            onPress={() => {
-              console.log("Report");
-              router.back();
-            }}
-          >
-            Report
-          </ButtonCustom>
-          <ButtonCustom
-            backgroundColor={AccentColor.blue}
-            textColor={MainColor.white}
-            onPress={() => {
-              console.log("Lainnya");
-              router.replace("/forum/[id]/other-report-commentar");
-            }}
-          >
-            Lainnya
-          </ButtonCustom>
-          <Spacing/>
-        </StackCustom>
+        {isLoadingList ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            <Forum_ReportListSection
+              listMaster={listMaster}
+              selectReport={selectReport}
+              setSelectReport={setSelectReport}
+            />
+            <ButtonCustom
+              disabled={!selectReport}
+              backgroundColor={MainColor.red}
+              textColor={MainColor.white}
+              onPress={() => {
+                handlerReport();
+              }}
+            >
+              Report
+            </ButtonCustom>
+            <ButtonCustom
+              backgroundColor={AccentColor.blue}
+              textColor={MainColor.white}
+              onPress={() => {
+                router.replace(`/forum/${id}/other-report-commentar`);
+              }}
+            >
+              Lainnya
+            </ButtonCustom>
+            <Spacing />
+          </StackCustom>
+        )}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/forum/[id]/report-posting.tsx

@@ -1,20 +1,103 @@
-import { ViewWrapper, StackCustom, ButtonCustom, Spacing } from "@/components";
-import { MainColor, AccentColor } from "@/constants/color-palet";
+import {
+  AlertDefaultSystem,
+  ButtonCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  ViewWrapper,
+} from "@/components";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { router } from "expo-router";
+import {
+  apiForumCreateReportPosting,
+  apiMasterForumReportList,
+} from "@/service/api-client/api-master";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumReportPosting() {
-    return (
-      <>
-        <ViewWrapper>
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [selectReport, setSelectReport] = useState<string>("");
+  const [listMaster, setListMaster] = useState<any[] | null>(null);
+  const [isLoadingList, setIsLoadingList] = useState(false);
+
+  useEffect(() => {
+    onLoadListMaster();
+  }, []);
+
+  const onLoadListMaster = async () => {
+    try {
+      setIsLoadingList(true);
+      const response = await apiMasterForumReportList();
+
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingList(false);
+    }
+  };
+
+  const handlerReport = async () => {
+    const newData = {
+      authorId: user?.id,
+      categoryId: selectReport,
+    };
+
+    try {
+      const response = await apiForumCreateReportPosting({
+        id: id as string,
+        data: newData,
+      });
+
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Laporan berhasil dikirim",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Laporan gagal dikirim",
+      });
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {isLoadingList ? (
+          <LoaderCustom />
+        ) : (
           <StackCustom>
-            <Forum_ReportListSection />
+            <Forum_ReportListSection
+              listMaster={listMaster}
+              selectReport={selectReport}
+              setSelectReport={setSelectReport}
+            />
+
             <ButtonCustom
+              disabled={!selectReport}
               backgroundColor={MainColor.red}
               textColor={MainColor.white}
               onPress={() => {
-                console.log("Report");
-                router.back();
+                AlertDefaultSystem({
+                  title: "Laporan Posting",
+                  message: "Apakah anda yakin ingin melaporkan postingan ini?",
+                  textLeft: "Batal",
+                  textRight: "Laporkan",
+                  onPressRight: () => {
+                    handlerReport();
+                  },
+                });
               }}
             >
               Report
@@ -23,15 +106,15 @@ export default function ForumReportPosting() {
               backgroundColor={AccentColor.blue}
               textColor={MainColor.white}
               onPress={() => {
-                console.log("Lainnya");
-                router.replace("/forum/[id]/other-report-posting");
+                router.replace(`/forum/${id}/other-report-posting`);
               }}
             >
               Lainnya
             </ButtonCustom>
             <Spacing />
           </StackCustom>
-        </ViewWrapper>
-      </>
-    );
-}
+        )}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/create.tsx

@@ -4,18 +4,47 @@ import {
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreate } from "@/service/api-client/api-forum";
 import { router } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumCreate() {
+  const { user } = useAuth();
   const [text, setText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    const newData = {
+      diskusi: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setIsLoading(true);
+      const response = await apiForumCreate({ data: newData });
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Posting berhasil",
+        });
+        setText("");
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Posting", text);
-          router.back();
+          handlerSubmit();
         }}
       >
         Posting

app/(application)/(user)/forum/index.tsx

@@ -1,25 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
-  AvatarCustom,
+  AvatarComp,
   BackButton,
   DrawerCustom,
+  LoaderCustom,
   SearchInput,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { router, Stack } from "expo-router";
-import { useState } from "react";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, Stack, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Forum() {
-  const id = "test-id-forum";
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const { user } = useAuth();
+  const [dataUser, setDataUser] = useState<any>();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetList, setLoadingGetList] = useState(false);
+  const [search, setSearch] = useState("");
+  const [dataId, setDataId] = useState("");
+  const [authorId, setAuthorId] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(user?.id as string);
+    }, [user?.id, search])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    const response = await apiUser(id);
+    setDataUser(response.data);
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({ search: search });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };
 
   return (
     <>
@@ -27,12 +60,23 @@ export default function Forum() {
         options={{
           title: "Forum",
           headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
+          headerRight: () => (
+            <AvatarComp
+              fileId={dataUser?.Profile?.imageId}
+              size="base"
+              href={`/forum/${user?.id}/forumku`}
+            />
+          ),
         }}
       />
 
       <ViewWrapper
-        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
+        headerComponent={
+          <SearchInput
+            placeholder="Cari topik diskusi"
+            onChangeText={(e) => setSearch(e)}
+          />
+        }
         floatingButton={
           <FloatingButton
             onPress={() =>
@@ -41,73 +85,45 @@ export default function Forum() {
           />
         }
       >
-        {listDummyDiscussionForum.map((e, i) => (
-          <Forum_BoxDetailSection
-            key={i}
-            data={e}
-            setOpenDrawer={setOpenDrawer}
-            setStatus={setStatus}
-            isTruncate={true}
-            href={`/forum/${id}`}
-          />
-        ))}
+        {loadingGetList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada diskusi
+          </TextCustom>
+        ) : (
+          listData?.map((e: any, i: number) => (
+            <Forum_BoxDetailSection
+              key={i}
+              data={e}
+              onSetData={() => {
+                setDataId(e.id);
+                setOpenDrawer(true);
+                setStatus(e.ForumMaster_StatusPosting?.status);
+                setAuthorId(e.Author?.id);
+              }}
+              isTruncate={true}
+              href={`/forum/${e.id}`}
+              isRightComponent={false}
+            />
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
         <Forum_MenuDrawerBerandaSection
-          id={id}
+          id={dataId}
+          authorId={authorId}
           status={status}
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
-          setShowAlertStatus={setAlertStatus}
         />
       </DrawerCustom>
-
-      {/* Alert Status */}
-      <AlertCustom
-        isVisible={alertStatus}
-        title="Ubah Status Forum"
-        message="Apakah Anda yakin ingin mengubah status forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setAlertStatus(false);
-          console.log("Ubah status forum");
-        }}
-        textLeft="Batal"
-        textRight="Ubah"
-        colorRight={MainColor.green}
-      />
-
-      {/* Alert Delete */}
-      <AlertCustom
-        isVisible={deleteAlert}
-        title="Hapus Forum"
-        message="Apakah Anda yakin ingin menghapus forum ini?"
-        onLeftPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Batal");
-        }}
-        onRightPress={() => {
-          setOpenDrawer(false);
-          setDeleteAlert(false);
-          console.log("Hapus forum");
-        }}
-        textLeft="Batal"
-        textRight="Hapus"
-        colorRight={MainColor.red}
-      />
     </>
   );
 }

app/(application)/(user)/investment/(tabs)/index.tsx

@@ -2,18 +2,46 @@ import {
   BaseBox,
   FloatingButton,
   Grid,
+  LoaderCustom,
   ProgressCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
+import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
 import { Image } from "expo-image";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function InvestmentBursa() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll();
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -21,40 +49,77 @@ export default function InvestmentBursa() {
         <FloatingButton onPress={() => router.push("/investment/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7} href={`/investment/${index}`}>
-          <Grid>
-            <Grid.Col span={5}>
-              <Image
-                source={DUMMY_IMAGE.background}
-                style={{ width: "auto", height: 100, borderRadius: 10 }}
-              />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <StackCustom>
-                <TextCustom truncate={2}>
-                  Title here : Lorem ipsum dolor sit amet consectetur
-                  adipisicing elit. Omnis, exercitationem, sequi enim quod
-                  distinctio maiores laudantium amet, quidem atque repellat sit
-                  vitae qui aliquam est veritatis laborum eum voluptatum totam!
-                </TextCustom>
-                <ProgressCustom value={index % 5 * 20} size="lg" />
-                <TextCustom>
-                  Sisa waktu: {dayjs().diff(dayjs(), "day")} hari
-                </TextCustom>
-              </StackCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom>Belum ada data</TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            href={`/investment/${item.id}`}
+          >
+            <Grid>
+              <Grid.Col span={5}>
+                <Image
+                  source={
+                    item && item.imageId
+                      ? API_STRORAGE.GET({ fileId: item.imageId })
+                      : DUMMY_IMAGE.background
+                  }
+                  style={{ width: "auto", height: 100, borderRadius: 10 }}
+                />
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <StackCustom>
+                  <TextCustom truncate={2}>{item.title}</TextCustom>
+                  <ProgressCustom
+                    label={`${item.progress}%`}
+                    value={item.progress}
+                    size="lg"
+                  />
+                  {Number(item?.pencarianInvestor) -
+                    dayjs().diff(dayjs(item.countDown), "days") <=
+                  0 ? (
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 5,
+                      }}
+                    >
+                      <Ionicons
+                        name="alert-circle-outline"
+                        size={16}
+                        color="red"
+                      />
+                      <TextCustom color="red" size="small">
+                        Periode Investasi Selesai
+                      </TextCustom>
+                    </View>
+                  ) : (
+                    <TextCustom>
+                      Sisa waktu:{" "}
+                      {Number(item?.pencarianInvestor) -
+                        dayjs().diff(dayjs(item.countDown), "days")}{" "}
+                      hari
+                    </TextCustom>
+                  )}
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }
 
-
 //   <View style={{ padding: 20, gap: 16 }}>
 //     <TextCustom>Progress 70%</TextCustom>
 //     <ProgressCustom value={70} color="primary" size="md" />
@@ -78,4 +143,4 @@ export default function InvestmentBursa() {
 //     <ProgressCustom value={90} color="warning" size="lg" showLabel={false} />
 
 //     <ProgressCustom value={null} color="error" size="sm" label="Loading..." />
-//   </View>;
+//   </View>;

app/(application)/(user)/investment/(tabs)/portofolio.tsx

@@ -1,13 +1,48 @@
-import { ScrollableCustom, ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import Investment_StatusBox from "@/screens/Invesment/StatusBox";
-import { useState } from "react";
+import { apiInvestmentGetByStatus } from "@/service/api-client/api-investment";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentPortofolio() {
+  const { user } = useAuth();
   const [activeCategory, setActiveCategory] = useState<string | null>(
     "publish"
   );
 
+  const [listData, setListData] = useState<any[]>([]);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   const handlePress = (item: any) => {
     setActiveCategory(item.value);
     // tambahkan logika lain seperti filter dsb.
@@ -26,14 +61,20 @@ export default function InvestmentPortofolio() {
   );
   return (
     <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Investment_StatusBox
-          key={index}
-          id={index.toString()}
-          status={activeCategory as string}
-          href={`/investment/${index}/${activeCategory}/detail`}
-        />
-      ))}
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Investment_StatusBox
+            key={index}
+            data={item}
+            status={activeCategory as string}
+            href={`/investment/${item.id}/${activeCategory}/detail`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/investment/(tabs)/transaction.tsx

@@ -1,81 +1,123 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BadgeCustom,
   BaseBox,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
 import { GStyles } from "@/styles/global-styles";
-import dayjs from "dayjs";
-import { router } from "expo-router";
+import { formatChatTime } from "@/utils/formatChatTime";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function InvestmentTransaction() {
-  const randomStatusData = Array.from({ length: 10 }, () => {
-    const randomIndex = Math.floor(
-      Math.random() * dummyMasterStatusTransaction.length
-    );
-    return dummyMasterStatusTransaction[randomIndex];
-  });
+  const { user } = useAuth();
+  const [list, setList] = useState<any>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
 
-  const handlePress = (value: string) => {
-    if (value === "menunggu") {
-      router.push(`/investment/${value}/(transaction-flow)/invoice`);
-    } else if (value === "proses") {
-      router.push(`/investment/${value}/(transaction-flow)/process`);
-    } else if (value === "berhasil") {
-      router.push(`/investment/${value}/(transaction-flow)/success`);
-    } else if (value === "gagal") {
-      router.push(`/investment/${value}/(transaction-flow)/failed`);
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [user?.id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetInvoice({
+        authorId: user?.id as string,
+        category: "transaction",
+      });
+      console.log("[RESPONSE LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerColor = (status: string) => {
+    if (status === "menunggu") {
+      return "orange";
+    } else if (status === "proses") {
+      return "white";
+    } else if (status === "berhasil") {
+      return "green";
+    } else if (status === "gagal") {
+      return "red";
+    }
+  };
+
+  const handlePress = ({ id, status }: { id: string; status: string }) => {
+    if (status === "menunggu") {
+      router.push(`/investment/${id}/(transaction-flow)/invoice`);
+    } else if (status === "proses") {
+      router.push(`/investment/${id}/(transaction-flow)/process`);
+    } else if (status === "berhasil") {
+      router.push(`/investment/${id}/(transaction-flow)/success`);
+    } else if (status === "gagal") {
+      router.push(`/investment/${id}/(transaction-flow)/failed`);
     }
   };
 
   return (
     <ViewWrapper hideFooter>
-      {randomStatusData.map((item, i) => (
-        <BaseBox
-          key={i}
-          paddingTop={7}
-          paddingBottom={7}
-          onPress={() => {
-            handlePress(item.value);
-          }}
-        >
-          <Grid>
-            <Grid.Col span={6}>
-              <StackCustom gap={"xs"}>
-                <TextCustom truncate>
-                  Title Investment: Lorem ipsum dolor sit amet consectetur
-                  adipisicing elit. Am culpa excepturi deleniti soluta animi
-                  porro amet ducimus.
-                </TextCustom>
-                <TextCustom color="gray" size="small">
-                  {dayjs().format("DD/MM/YYYY")}
-                </TextCustom>
-              </StackCustom>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={5} style={{ alignItems: "flex-end" }}>
-              <StackCustom gap={"xs"}>
-                <TextCustom bold truncate>
-                  Rp. 7.500.000
-                </TextCustom>
-                <BadgeCustom
-                  variant="light"
-                  color={item.color}
-                  style={GStyles.alignSelfFlexEnd}
-                >
-                  {item.label}
-                </BadgeCustom>
-              </StackCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-      ))}
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom>Tidak ada data</TextCustom>
+      ) : (
+        list.map((item: any, i: number) => (
+          <BaseBox
+            key={i}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() => {
+              handlePress({
+                id: item.id,
+                status: _.lowerCase(item.statusInvoice),
+              });
+            }}
+          >
+            <Grid>
+              <Grid.Col span={6}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom truncate>{item?.title || "-"}</TextCustom>
+                  <TextCustom color="gray" size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </StackCustom>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={5} style={{ alignItems: "flex-end" }}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold truncate>
+                    Rp. {formatCurrencyDisplay(item?.nominal) || "-"}
+                  </TextCustom>
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    style={GStyles.alignSelfFlexEnd}
+                  >
+                    {item?.statusInvoice || "-"}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/add-document.tsx

@@ -7,17 +7,78 @@ import {
   InformationBox,
   Spacing,
   StackCustom,
+  TextCustom,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiInvestmentUpsertDocument } from "@/service/api-client/api-investment";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentAddDocument() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    title: "",
+  });
+  const [pdf, setPdf] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+      const responseUploadFile = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_dokumen,
+        imageUri: pdf.uri,
+      });
+
+      if (!responseUploadFile.success) {
+        throw new Error(responseUploadFile.message);
+      }
+
+      const newData = {
+        title: data.title,
+        fileId: responseUploadFile.data.id,
+      };
+
+      const response = await apiInvestmentUpsertDocument({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil disimpan",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal menyimpan data",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Simpan</ButtonCustom>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={!pdf || data.title.length <= 0}
+        onPress={handlerSubmit}
+      >
+        Simpan
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
@@ -31,22 +92,33 @@ export default function InvestmentAddDocument() {
             label="Judul Dokumen"
             placeholder="Masukan judul dokumen"
             required
+            value={data.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
           />
 
           <BaseBox>
             <CenterCustom>
-              <FontAwesome5
-                name="file-pdf"
-                size={30}
-                color={MainColor.disabled}
-              />
+              {pdf ? (
+                <TextCustom truncate>{pdf.name}</TextCustom>
+              ) : (
+                <FontAwesome5
+                  name="file-pdf"
+                  size={30}
+                  color={MainColor.disabled}
+                />
+              )}
             </CenterCustom>
           </BaseBox>
 
           <ButtonCenteredOnly
             icon="upload"
             onPress={() =>
-              router.push("/(application)/(image)/take-picture/123")
+              pickFile({
+                allowedType: "pdf",
+                setPdfUri(file) {
+                  setPdf(file);
+                },
+              })
             }
           >
             Upload

app/(application)/(user)/investment/[id]/(document)/edit-document.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -7,17 +8,99 @@ import {
   InformationBox,
   Spacing,
   StackCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetDocument,
+  apiInvestmentUpsertDocument,
+} from "@/service/api-client/api-investment";
+import { deleteFileService, uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentEditDocument() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [pdf, setPdf] = useState<any>(null);
+  const [titleFile, setTitleFile] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "one-document",
+      });
+      setData(response.data);
+      setTitleFile(response.data.title);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerUpdate = async () => {
+    const prevFileId = data.fileId;
+    try {
+      setIsLoading(true);
+      const responseUploadFile = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_dokumen,
+        imageUri: pdf.uri,
+      });
+
+      if (!responseUploadFile.success) {
+        throw new Error(responseUploadFile.message);
+      }
+
+      const newData = {
+        title: data.title,
+        fileId: responseUploadFile.data.id,
+      };
+
+      const response = await apiInvestmentUpsertDocument({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        const delPrevFile = await deleteFileService({
+          id: prevFileId,
+        });
+
+        console.log("[DEL PREV FILE]", delPrevFile);
+
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil diupdate",
+        });
+
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal mengupdate data",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+      <ButtonCustom isLoading={isLoading} disabled={!pdf} onPress={handlerUpdate}>
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
 
@@ -31,22 +114,29 @@ export default function InvestmentEditDocument() {
             label="Judul Dokumen"
             placeholder="Masukan judul dokumen"
             required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
           />
 
           <BaseBox>
             <CenterCustom>
-              <FontAwesome5
-                name="file-pdf"
-                size={30}
-                color={MainColor.disabled}
-              />
+              {pdf ? (
+                <TextCustom truncate>{pdf.name}</TextCustom>
+              ) : (
+                <TextCustom truncate>{_.snakeCase(titleFile || "")}.pdf</TextCustom>
+              )}
             </CenterCustom>
           </BaseBox>
 
           <ButtonCenteredOnly
             icon="upload"
             onPress={() =>
-              router.push("/(application)/(image)/take-picture/123")
+              pickFile({
+                allowedType: "pdf",
+                setPdfUri(file) {
+                  setPdf(file);
+                },
+              })
             }
           >
             Upload

app/(application)/(user)/investment/[id]/(document)/list-of-document.tsx

@@ -1,16 +1,58 @@
-import { ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { LoaderCustom, TextCustom, ViewWrapper } from "@/components";
 import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import { apiInvestmentGetDocument } from "@/service/api-client/api-investment";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfDocument() {
+  const { id } = useLocalSearchParams();
+  console.log("ID >> ", id);
+
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Investment_BoxDetailDocument
-          key={index}
-          title={`Judul Dokumen ${index + 1}`}
-          href={`/(file)/${index + 1}`}
-        />
-      ))}
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Tidak ada data
+        </TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Investment_BoxDetailDocument
+            key={index}
+            title={item.title}
+            href={`/(file)/${item.fileId}`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx

@@ -1,23 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
   BackButton,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import {
+  apiInvestmentDeleteDocument,
+  apiInvestmentGetDocument,
+} from "@/service/api-client/api-investment";
 import { AntDesign, Ionicons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentRecapOfDocument() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerBox, setOpenDrawerBox] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [selectId, setSelectId] = useState<string | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerDeleteDocument = async () => {
+    try {
+      const response = await apiInvestmentDeleteDocument({
+        id: selectId as string,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil dihapus",
+        });
+        setList((prev: any[] | null) => {
+          if (!prev) return null;
+          return prev.filter((item: any) => item.id !== selectId);
+        });
+        setOpenDrawerBox(false);
+        setSelectId(null);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal menghapus data",
+      });
+    }
+  };
 
   return (
     <>
@@ -37,25 +104,36 @@ export default function InvestmentRecapOfDocument() {
       />
 
       <ViewWrapper>
-        {Array.from({ length: 10 }).map((_, index) => (
-          <Investment_BoxDetailDocument
-            key={index}
-            title={`Judul Dokumen ${index + 1}`}
-            leftIcon={
-              <Ionicons
-                name="ellipsis-horizontal-outline"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.white}
-                style={{
-                  zIndex: 10,
-                  alignSelf: "flex-end",
-                }}
-                onPress={() => setOpenDrawerBox(true)}
-              />
-            }
-            href={`/(file)/${id}`}
-          />
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Investment_BoxDetailDocument
+              key={index}
+              title={item.title}
+              leftIcon={
+                <Ionicons
+                  name="ellipsis-horizontal-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                  style={{
+                    zIndex: 10,
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    setSelectId(item.id);
+                    setOpenDrawerBox(true);
+                  }}
+                />
+              }
+              href={`/(file)/${item.fileId}`}
+            />
+          ))
+        )}
       </ViewWrapper>
 
       {/* Drawer On Header */}
@@ -69,7 +147,7 @@ export default function InvestmentRecapOfDocument() {
             {
               icon: (
                 <AntDesign
-                  name="pluscircle"
+                  name="plus-circle"
                   size={ICON_SIZE_SMALL}
                   color={MainColor.white}
                 />
@@ -96,7 +174,7 @@ export default function InvestmentRecapOfDocument() {
             {
               icon: <IconEdit />,
               label: "Edit Dokumen",
-              path: `/investment/${id}/(document)/edit-document`,
+              path: `/investment/${selectId}/(document)/edit-document`,
             },
             {
               icon: (
@@ -119,12 +197,14 @@ export default function InvestmentRecapOfDocument() {
                 textLeft: "Batal",
                 textRight: "Hapus",
                 onPressRight: () => {
-                  setOpenDrawerBox(false);
+                  handlerDeleteDocument();
                 },
               });
+            } else {
+              router.push(item.path as any);
             }
-            router.push(item.path as any);
-            setOpenDrawer(false);
+
+            setOpenDrawerBox(false);
           }}
         />
       </DrawerCustom>

app/(application)/(user)/investment/[id]/(news)/[news]/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
   BackButton,
@@ -8,37 +9,71 @@ import {
   MenuDrawerDynamicGrid,
   StackCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { IconTrash } from "@/components/_Icon/IconTrash";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiInvestmentDeleteNews,
+  apiInvestmentGetNews,
+} from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentNews() {
-  const { id, news } = useLocalSearchParams();
+  const { user } = useAuth();
+  const { news } = useLocalSearchParams();
+  const id = news as string;
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetNews({
+        id: id,
+        category: "one-news",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <>
       <Stack.Screen
         options={{
           title: "Detail Berita",
           headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
       <ViewWrapper>
         <BaseBox>
           <StackCustom>
-            <DummyLandscapeImage />
+            {data && data?.imageId && (
+              <DummyLandscapeImage imageId={data?.imageId || ""} />
+            )}
             <TextCustom bold align="center" size="large">
-              Judul Berita {news} Terbaru
-            </TextCustom>
-            <TextCustom>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
-              fuga mollitia laboriosam voluptatibus quos molestias, illo fugiat
-              esse repellat, ad officia earum numquam? Aliquid corrupti quam
-              tempora cum harum est!
+              {(data && data?.title) || "-"}
             </TextCustom>
+            <TextCustom>{(data && data?.deskripsi) || "-"}</TextCustom>
           </StackCustom>
         </BaseBox>
       </ViewWrapper>
@@ -52,7 +87,7 @@ export default function InvestmentNews() {
           data={[
             {
               label: "Hapus Berita",
-              path: `/investment/${id}/add-news`,
+              path: ``,
               icon: <IconTrash />,
               color: "red",
             },
@@ -63,9 +98,26 @@ export default function InvestmentNews() {
               message: "Apakah Anda yakin ingin menghapus berita ini?",
               textLeft: "Batal",
               textRight: "Hapus",
-              onPressRight: () => {
-                router.back();
-                setOpenDrawer(false);
+              onPressRight: async () => {
+                try {
+                  const response = await apiInvestmentDeleteNews({ id });
+                
+                  if (response.success) {
+                    Toast.show({
+                      type: "success",
+                      text1: "Berita berhasil dihapus",
+                    });
+                    router.back();
+                    setOpenDrawer(false);
+                  } else {
+                    Toast.show({
+                      type: "error",
+                      text1: "Gagal menghapus berita",
+                    });
+                  }
+                } catch (error) {
+                  console.log("[ERROR]", error);
+                }
               },
             });
           }}

app/(application)/(user)/investment/[id]/(news)/add-news.tsx

@@ -9,17 +9,89 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiInvestmentCreateNews } from "@/service/api-client/api-investment";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentAddNews() {
+  const { id } = useLocalSearchParams();
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [data, setData] = useState({
+    title: "",
+    deskripsi: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    let imageId = "";
+
+    if (!data.title || !data.deskripsi) {
+      Toast.show({
+        type: "error",
+        text1: "Judul dan deskripsi harus diisi",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      if (image) {
+        const uploadImage = await uploadFileService({
+          dirId: DIRECTORY_ID.investasi_berita,
+          imageUri: image.uri,
+        });
+
+        imageId = uploadImage.data.id;
+      }
+
+      const newData = {
+        id: id as string,
+        title: data.title,
+        deskripsi: data.deskripsi,
+        imageId: imageId,
+      };
+
+      const response = await apiInvestmentCreateNews({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berita berhasil disimpan",
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menyimpan berita",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Pengunggahan foto ke aplikasi bersifat opsional dan tidak diwajibkan, Anda dapat menyimpan berita tanpa mengunggah foto." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image?.uri} />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
           }}
           icon="upload"
         >
@@ -30,6 +102,8 @@ export default function InvestmentAddNews() {
           label="Judul Berita"
           placeholder="Masukan judul berita"
           required
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
         <TextAreaCustom
           label="Deskripsi Berita"
@@ -37,13 +111,11 @@ export default function InvestmentAddNews() {
           required
           showCount
           maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
-        <ButtonCustom
-          onPress={() => {
-            router.back();
-          }}
-        >
+        <ButtonCustom isLoading={isLoading} onPress={handlerSubmit}>
           Simpan
         </ButtonCustom>
       </StackCustom>

app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx

@@ -1,18 +1,51 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BackButton,
-    BaseBox,
-    DrawerCustom,
-    MenuDrawerDynamicGrid,
-    TextCustom,
-    ViewWrapper
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfNews() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetNews({
+        id: id as string,
+        category: "all-news",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
   return (
     <>
       <Stack.Screen
@@ -22,16 +55,25 @@ export default function InvestmentListOfNews() {
           //   headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
+
       <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox
-            key={index}
-            paddingBlock={5}
-            href={`/investment/${id}/(news)/${index + 1}`}
-          >
-            <TextCustom bold>Berita Terbaru {index + 1}</TextCustom>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/investment/[id]/(news)/${item.id}`}
+            >
+              <TextCustom bold>{item.title}</TextCustom>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/investment/[id]/(news)/recap-of-news.tsx

@@ -1,19 +1,53 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   BaseBox,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 import { IconPlus } from "@/components/_Icon";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentRecapOfNews() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetNews({
+        id: id as string,
+        category: "all-news",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <Stack.Screen
@@ -24,15 +58,23 @@ export default function InvestmentRecapOfNews() {
         }}
       />
       <ViewWrapper>
-        {Array.from({ length: 15 }).map((_, index) => (
-          <BaseBox
-            key={index}
-            paddingBlock={5}
-            href={`/investment/${id}/(news)/${index + 1}`}
-          >
-            <TextCustom bold>Berita Terbaru {index + 1}</TextCustom>
-          </BaseBox>
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/investment/[id]/(news)/${item.id}`}
+            >
+              <TextCustom bold>{item.title}</TextCustom>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/investment/[id]/(transaction-flow)/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -9,16 +10,89 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router, useLocalSearchParams } from "expo-router";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function InvestmentInvest() {
   const { id } = useLocalSearchParams();
+  // console.log("[ID]", id);
+  const [data, setData] = useState<any>(null);
+  const [jumlah, setJumlah] = useState<number>(0);
+  const [total, setTotal] = useState<number>(0);
+  const [sisaLembar, setSisaLembar] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+
+      setData(response.data);
+      setSisaLembar(response.data?.sisaLembar);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleTextChange = (text: string) => {
+    // Izinkan input kosong → anggap sebagai 0 (atau abaikan, tergantung UX)
+    if (text === "") {
+      setJumlah(0);
+      setTotal(0);
+      return;
+    }
+
+    // Regex: hanya digit (angka bulat positif)
+    const integerRegex = /^\d+$/;
+
+    if (integerRegex.test(text)) {
+      const numValue = Number(text);
+      // Karena regex sudah pastikan hanya angka, isNaN biasanya false
+      // Tapi tetap aman untuk cek
+      if (!isNaN(numValue)) {
+        setJumlah(numValue);
+        setTotal(numValue * Number(data?.hargaLembar));
+        console.log("[VALUE]", numValue);
+      }
+    }
+    // Jika input tidak valid (misal: "12a", "12."), abaikan → state tidak berubah
+  };
 
   const buttonSubmit = () => {
     return (
       <>
         <BoxButtonOnFooter>
-          <ButtonCustom onPress={() => router.push(`/investment/${id}/select-bank`)}>Beli</ButtonCustom>
+          <ButtonCustom
+            isLoading={isLoading}
+            disabled={jumlah < 10 || jumlah > sisaLembar}
+            onPress={async () => {
+              try {
+                setIsLoading(true);
+                await AsyncStorage.setItem(
+                  LOCAL_STORAGE_KEY.transactionInvestment,
+                  JSON.stringify({ jumlah, total })
+                );
+                router.push(`/investment/${id}/select-bank`);
+              } catch (error) {
+                console.log("[ERROR]", error);
+              } finally {
+                setIsLoading(false);
+              }
+            }}
+          >
+            Beli
+          </ButtonCustom>
         </BoxButtonOnFooter>
       </>
     );
@@ -34,7 +108,7 @@ export default function InvestmentInvest() {
                 <TextCustom>Sisa Lembar Saham</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>3.000</TextCustom>
+                <TextCustom>{data?.sisaLembar || "-"}</TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>
@@ -42,7 +116,7 @@ export default function InvestmentInvest() {
                 <TextCustom>Harga Per Lembar</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>Rp. 1.000</TextCustom>
+                <TextCustom>{data?.hargaLembar || "-"}</TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>
@@ -69,6 +143,10 @@ export default function InvestmentInvest() {
                   }}
                   placeholder="0"
                   keyboardType="numeric"
+                  value={jumlah.toString()}
+                  onChangeText={(value) => {
+                    handleTextChange(value);
+                  }}
                 />
               </Grid.Col>
             </Grid>
@@ -78,7 +156,7 @@ export default function InvestmentInvest() {
                 <TextCustom>Total Harga</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>Rp. 1.000</TextCustom>
+                <TextCustom> Rp. {formatCurrencyDisplay(total)}</TextCustom>
               </Grid.Col>
             </Grid>
           </StackCustom>

app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   ButtonCenteredOnly,
@@ -9,11 +10,96 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import CopyButton from "@/components/Button/CoyButton";
 import { MainColor } from "@/constants/color-palet";
-import { router, useLocalSearchParams } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetInvoice,
+  apiInvestmentUpdateInvoice,
+} from "@/service/api-client/api-investment";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentInvoice() {
   const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+  const [data, setData] = useState<any>({});
+  const [image, setImage] = useState<IFileData>({
+    name: "",
+    uri: "",
+    size: 0,
+  });
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetInvoice({
+        id: id as string,
+        category: "invoice",
+      });
+
+      console.log("[RES INVOICE]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_bukti_transfer,
+        imageUri: image?.uri,
+      });
+
+      console.log("[RESPONSE UPLOAD IMAGE]", responseUploadImage);
+
+      if (!responseUploadImage?.data?.id) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      const response = await apiInvestmentUpdateInvoice({
+        id: id as string,
+        data: {
+          imageId: responseUploadImage?.data?.id,
+        },
+        status: "proses",
+      });
+
+      if (response.success) {
+        console.log(
+          "[RESPONSE UPDATE]",
+          JSON.stringify(response.data, null, 2)
+        );
+        Toast.show({
+          type: "success",
+          text1: "Berhasil mengunggah bukti transfer",
+        });
+        router.push(`/investment/${id}/(transaction-flow)/process`);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
@@ -21,9 +107,23 @@ export default function InvestmentInvoice() {
           <InformationBox text="Mohon transfer ke rekening dibawah" />
           <BaseBox>
             <StackCustom gap={"xs"}>
-              <TextCustom>Nama BANK</TextCustom>
-              <TextCustom>Nama Penerima</TextCustom>
+              <Grid>
+                <Grid.Col span={4}>
+                  <TextCustom>Bank</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{data?.MasterBank?.namaBank}</TextCustom>
+                </Grid.Col>
+              </Grid>
               <Spacing height={10} />
+              <Grid>
+                <Grid.Col span={4}>
+                  <TextCustom>Nama Akun</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{data?.MasterBank?.namaAkun}</TextCustom>
+                </Grid.Col>
+              </Grid>
 
               <BaseBox backgroundColor={MainColor.soft_darkblue}>
                 <Grid containerStyle={{ justifyContent: "center" }}>
@@ -34,7 +134,7 @@ export default function InvestmentInvoice() {
                     }}
                   >
                     <TextCustom size="xlarge" bold color="yellow">
-                      4567898765433567
+                      {data?.MasterBank?.norek}
                     </TextCustom>
                   </Grid.Col>
                   <Grid.Col
@@ -43,7 +143,7 @@ export default function InvestmentInvoice() {
                       alignItems: "flex-end",
                     }}
                   >
-                    <ButtonCustom>Salin</ButtonCustom>
+                    <CopyButton textToCopy={data?.MasterBank?.norek} />
                   </Grid.Col>
                 </Grid>
               </BaseBox>
@@ -65,7 +165,7 @@ export default function InvestmentInvoice() {
                     }}
                   >
                     <TextCustom size="xlarge" bold color="yellow">
-                      Rp. 1.000.000
+                      Rp. {formatCurrencyDisplay(data?.nominal)}
                     </TextCustom>
                   </Grid.Col>
                   <Grid.Col
@@ -74,7 +174,7 @@ export default function InvestmentInvoice() {
                       alignItems: "flex-end",
                     }}
                   >
-                    <ButtonCustom>Salin</ButtonCustom>
+                    <CopyButton textToCopy={data?.nominal} />
                   </Grid.Col>
                 </Grid>
               </BaseBox>
@@ -83,10 +183,37 @@ export default function InvestmentInvoice() {
 
           <BaseBox>
             <StackCustom>
-              <TextCustom>Upload bukti transfer anda.</TextCustom>
+              <TextCustom align="center">
+                Upload bukti transfer anda.
+              </TextCustom>
+              {image ? (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 10,
+                    paddingInline: 20,
+                  }}
+                >
+                  <TextCustom bold align="center" truncate>
+                    {image?.name}
+                  </TextCustom>
+                </View>
+              ) : (
+                <TextCustom align="center">
+                  Tidak ada gambar yang diunggah
+                </TextCustom>
+              )}
               <ButtonCenteredOnly
                 onPress={() => {
-                  router.push("/(application)/(image)/take-picture/123");
+                  pickFile({
+                    allowedType: "image",
+                    setImageUri(file: any) {
+                      console.log("[IMAGE]", file);
+                      setImage(file);
+                    },
+                  });
                 }}
                 icon="upload"
               >
@@ -96,14 +223,16 @@ export default function InvestmentInvoice() {
           </BaseBox>
 
           <ButtonCustom
+            isLoading={isLoading}
+            disabled={!image}
             onPress={() => {
-              router.push(`/investment/${id}/(transaction-flow)/process`);
+              handlerSubmitUpdate();
             }}
           >
             Saya Sudah Transfer
           </ButtonCustom>
         </StackCustom>
-        <Spacing/>
+        <Spacing />
       </ViewWrapper>
     </>
   );

app/(application)/(user)/investment/[id]/(transaction-flow)/process.tsx

@@ -1,13 +1,6 @@
-import {
-  BaseBox,
-  Grid,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { Ionicons } from "@expo/vector-icons";
-import { ActivityIndicator } from "react-native";
+import { BaseBox, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import MoneyTransferAnimation from "@/components/_ShareComponent/MoneyTransferAnimation";
+import { View } from "react-native";
 
 export default function InvestmentProcess() {
   return (
@@ -16,21 +9,24 @@ export default function InvestmentProcess() {
         <BaseBox>
           <StackCustom>
             <TextCustom align="center" bold>
-              Admin sedang memproses transaksi investasimu
+              Admin sedang memvalidasi data dan bukti transfer anda. Mohon
+              tunggu proses ini selesai.
             </TextCustom>
-            <ActivityIndicator size="large" color={MainColor.yellow} />
+            <View style={{ alignItems: "center", justifyContent: "center" }}>
+              <MoneyTransferAnimation />
+            </View>
           </StackCustom>
         </BaseBox>
 
-        <BaseBox>
+        {/* <BaseBox>
           <Grid>
-            <Grid.Col span={10} style={{justifyContent: 'center'}}>
+            <Grid.Col span={10} style={{ justifyContent: "center" }}>
               <TextCustom size="small">
                 Hubungi admin jika tidak kunjung di proses! Klik pada logo
                 Whatsapp ini.
               </TextCustom>
             </Grid.Col>
-            <Grid.Col span={2} style={{alignItems: "flex-end"}}>
+            <Grid.Col span={2} style={{ alignItems: "flex-end" }}>
               <Ionicons
                 name="logo-whatsapp"
                 size={50}
@@ -38,7 +34,7 @@ export default function InvestmentProcess() {
               />
             </Grid.Col>
           </Grid>
-        </BaseBox>
+        </BaseBox> */}
       </ViewWrapper>
     </>
   );

app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx

@@ -5,35 +5,97 @@ import {
   ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
-import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentCreateInvoice } from "@/service/api-client/api-investment";
+import { apiMasterBank } from "@/service/api-client/api-master";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 
 export default function InvestmentSelectBank() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
-  const [value, setValue] = useState<any | number>("");
+  const [select, setSelect] = useState<any | number>("");
+  const [listBank, setListBank] = useState<any>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    loadListBank();
+  }, []);
+
+  const loadListBank = async () => {
+    try {
+      const response = await apiMasterBank();
+
+      setListBank(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListBank([]);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+      const dataCheckout = await AsyncStorage.getItem(
+        LOCAL_STORAGE_KEY.transactionInvestment
+      );
+      if (dataCheckout) {
+        const storage = JSON.parse(dataCheckout);
+        const newData = {
+          ...storage,
+          bankId: select,
+          authorId: user?.id,
+        };
+
+        const response = await apiInvestmentCreateInvoice({
+          id: id as string,
+          data: newData,
+        });
+
+        if (response.success) {
+          console.log("[RESPONSE >>]", response);
+          const invoiceId = response.data.id;
+
+          const delStorage = await AsyncStorage.removeItem(
+            LOCAL_STORAGE_KEY.transactionInvestment
+          );
+          
+          console.log("[DEL STORAGE]", delStorage);
+          router.replace(`/investment/${invoiceId}/invoice`);
+        } else {
+          console.log("[FAILED]", response);
+        }
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonSubmit = () => {
     return (
       <>
         <BoxButtonOnFooter>
-          <ButtonCustom
-            onPress={() => router.replace(`/investment/${id}/invoice`)}
-          >
-            Pilih
-          </ButtonCustom>
+          <ButtonCustom isLoading={isLoading} onPress={() => handlerSubmit()}>Pilih</ButtonCustom>
         </BoxButtonOnFooter>
       </>
     );
   };
+
   return (
     <ViewWrapper footerComponent={buttonSubmit()}>
-      <RadioGroup value={value} onChange={setValue}>
-        {dummyMasterBank.map((item) => (
-          <BaseBox key={item.name}>
-            <RadioCustom label={item.name} value={item.code} />
-          </BaseBox>
-        ))}
+      <RadioGroup value={select} onChange={setSelect}>
+        {_.isEmpty(listBank)
+          ? []
+          : listBank?.map((item: any) => (
+              <BaseBox key={item.id}>
+                <RadioCustom label={item.namaBank} value={item.id} />
+              </BaseBox>
+            ))}
       </RadioGroup>
     </ViewWrapper>
   );

app/(application)/(user)/investment/[id]/[status]/detail.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
@@ -9,19 +10,47 @@ import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
 import _ from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetailStatus() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
 
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, status])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const handlePressDraft = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
     router.navigate(item.path as any);
@@ -36,13 +65,14 @@ export default function InvestmentDetailStatus() {
 
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
-      id={id as string}
+      id={data?.id}
+      prospectusId={data?.prospektusFileId}
       status={status as string}
     />
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection id={id as string} isMine={false} />
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
   );
 
   return (
@@ -63,6 +93,7 @@ export default function InvestmentDetailStatus() {
       <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={status as string}
+          data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />

app/(application)/(user)/investment/[id]/edit-prospectus.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -5,38 +6,149 @@ import {
   ButtonCustom,
   CenterCustom,
   InformationBox,
+  LoaderCustom,
   Spacing,
   StackCustom,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetOne,
+  apiInvestmentUpdateData,
+} from "@/service/api-client/api-investment";
+import { deleteFileService, uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentEditProspectus() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [loadingGet, setLoadingGet] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [pdf, setPdf] = useState<IFileData | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGet(true);
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGet(false);
+    }
+  };
+
+  const handleSubmitUpdate = async () => {
+    const prevProspectusFileId = data?.prospektusFileId;
+    try {
+      setIsLoading(true);
+
+      const responseUploadImage = await uploadFileService({
+        imageUri: pdf?.uri as any,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!responseUploadImage.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+      const prospektusFileId = responseUploadImage.data.id;
+
+      const responseUpdate = await apiInvestmentUpdateData({
+        id: id as string,
+        data: prospektusFileId,
+        category: "prospectus",
+      });
+
+      if (responseUpdate.success) {
+        const deletePrevImage = await deleteFileService({
+          id: prevProspectusFileId as any,
+        });
+
+        if (!deletePrevImage.success) {
+          console.log("[ERROR DELETE PREV IMAGE]", deletePrevImage.message);
+          return;
+        }
+
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil diupdate",
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: responseUpdate.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
-      <ButtonCustom onPress={() => router.back()}>Update</ButtonCustom>
+      <ButtonCustom
+        disabled={pdf === null}
+        isLoading={isLoading}
+        onPress={handleSubmitUpdate}
+      >
+        Update
+      </ButtonCustom>
     </BoxButtonOnFooter>
   );
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <ViewWrapper footerComponent={!loadingGet && buttonFooter}>
       <StackCustom gap={"xs"}>
         <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan." />
         <Spacing />
 
         <BaseBox>
           <CenterCustom>
-            <FontAwesome5
-              name="file-pdf"
-              size={30}
-              color={MainColor.disabled}
-            />
+            {loadingGet ? (
+              <LoaderCustom />
+            ) : pdf ? (
+              <TextCustom truncate>{pdf.name}</TextCustom>
+            ) : (
+              <TextCustom truncate>
+                {_.snakeCase(data?.title || "").replace(/_/g, "-")}.pdf
+              </TextCustom>
+            )}
           </CenterCustom>
         </BaseBox>
         <ButtonCenteredOnly
+          disabled={loadingGet}
           icon="upload"
-          onPress={() => router.push("/(application)/(image)/take-picture/123")}
+          onPress={() => {
+            pickFile({
+              allowedType: "pdf",
+              setPdfUri(file: any) {
+                setPdf({
+                  uri: file.uri,
+                  name: file.name,
+                  size: file.size,
+                });
+              },
+            });
+          }}
         >
           Upload
         </ButtonCenteredOnly>

app/(application)/(user)/investment/[id]/edit.tsx

@@ -1,40 +1,224 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  LoaderCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
-import dummyPembagianDeviden from "@/lib/dummy-data/investment/pembagian-deviden";
-import dummyListPencarianInvestor from "@/lib/dummy-data/investment/pencarian-investor";
-import dummyPeriodeDeviden from "@/lib/dummy-data/investment/periode-deviden";
-import { router } from "expo-router";
-import { useState } from "react";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetOne,
+  apiInvestmentUpdateData,
+} from "@/service/api-client/api-investment";
+import { apiMasterInvestment } from "@/service/api-client/api-master";
+import {
+  deleteFileService,
+  uploadFileService,
+} from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+interface IInvestment {
+  title?: string;
+  targetDana?: string;
+  hargaLembar?: string;
+  totalLembar?: string;
+  roi?: string;
+  masterPencarianInvestorId?: string;
+  masterPeriodeDevidenId?: string;
+  masterPembagianDevidenId?: string;
+  authorId?: string;
+  imageId?: string;
+  prospektusFileId?: string;
+}
 
 export default function InvestmentEdit() {
-  const [data, setData] = useState({
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IInvestment>({
     title: "",
-    targetDana: 0,
-    hargaPerLembar: 0,
-    totalLembar: 0,
-    rasioKeuntungan: 0,
-    pencarianInvestor: "",
-    periodeDeviden: "",
-    pembagianDeviden: "",
+    targetDana: "",
+    hargaLembar: "",
+    totalLembar: "",
+    roi: "",
+    masterPencarianInvestorId: "",
+    masterPeriodeDevidenId: "",
+    masterPembagianDevidenId: "",
+    authorId: "",
+    imageId: "",
+    prospektusFileId: "",
   });
 
+  const [image, setImage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingMaster, setLoadingMaster] = useState(false);
+  const [listPencarianInvestor, setListPencarianInvestor] = useState<any[]>([]);
+  const [listPeriodeDeviden, setListPeriodeDeviden] = useState<any[]>([]);
+  const [listPembagianDeviden, setListPembagianDeviden] = useState<any[]>([]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMaster();
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadMaster = async () => {
+    try {
+      setLoadingMaster(true);
+      const response = await apiMasterInvestment({ category: "" });
+
+      setListPencarianInvestor(response.data.pencarianInvestor);
+      setListPeriodeDeviden(response.data.periodeDeviden);
+      setListPembagianDeviden(response.data.pembagianDeviden);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingMaster(false);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const displayTargetDana = formatCurrencyDisplay(data?.targetDana);
+  const displayHargaPerLembar = formatCurrencyDisplay(data?.hargaLembar);
+  const realTotalLembar = Number(data?.targetDana) / Number(data?.hargaLembar);
+  const displayTotalLembar = formatCurrencyDisplay(realTotalLembar);
+
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev) => ({ ...prev, [field]: numeric }));
+  };
+
+  const validateData = () => {
+    if (
+      !data.title ||
+      !data.targetDana ||
+      !data.hargaLembar ||
+      !data.totalLembar ||
+      !data.roi ||
+      !data.masterPencarianInvestorId ||
+      !data.masterPeriodeDevidenId ||
+      !data.masterPembagianDevidenId
+    ) {
+      Toast.show({
+        type: "info",
+        text1: "Harap isi semua data",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmitUpdate = async () => {
+    let newData = {
+      ...data,
+      totalLembar: realTotalLembar.toString(),
+    };
+
+    if (!validateData()) {
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      if (image) {
+        const responseUploadImage = await uploadFileService({
+          imageUri: image,
+          dirId: DIRECTORY_ID.investasi_image,
+        });
+
+        if (!responseUploadImage.success) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const deletePrevImage = await deleteFileService({
+          id: data?.imageId as any,
+        });
+
+        if (!deletePrevImage.success) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal menghapus gambar",
+          });
+          return;
+        }
+
+        newData = {
+          ...newData,
+          imageId: responseUploadImage.data.id,
+        };
+      }
+
+      const responseUpdate = await apiInvestmentUpdateData({
+        id: id as string,
+        data: newData,
+        category: "data"
+      });
+
+      if (responseUpdate.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil diupdate",
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: responseUpdate.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            image ? image : API_STRORAGE.GET({ fileId: data?.imageId as any })
+          }
+        />
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.push("/take-picture/1")}
+          onPress={() => {
+            pickFile({
+              setImageUri: ({ uri }) => {
+                setImage(uri);
+              },
+              allowedType: "image",
+            });
+          }}
         >
           Upload
         </ButtonCenteredOnly>
@@ -47,7 +231,7 @@ export default function InvestmentEdit() {
           required
           placeholder="Judul"
           label="Judul"
-          value={data.title}
+          value={data?.title}
           onChangeText={(value) => setData({ ...data, title: value })}
         />
 
@@ -57,22 +241,8 @@ export default function InvestmentEdit() {
           placeholder="0"
           label="Target Dana"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
-        />
-
-        <TextInputCustom
-          required
-          iconLeft="Rp."
-          placeholder="0"
-          label="Target Dana"
-          keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("targetDana")}
+          value={displayTargetDana}
         />
 
         <TextInputCustom
@@ -81,10 +251,8 @@ export default function InvestmentEdit() {
           placeholder="0"
           label="Harga Per Lembar"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("hargaLembar")}
+          value={displayHargaPerLembar}
         />
 
         <TextInputCustom
@@ -92,10 +260,8 @@ export default function InvestmentEdit() {
           placeholder="0"
           label="Total Lembar"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, totalLembar: Number(value) })
-          }
-          value={data.totalLembar === 0 ? "" : data.totalLembar.toString()}
+          onChangeText={(value) => setData({ ...data, totalLembar: value })}
+          value={displayTotalLembar}
         />
 
         <TextInputCustom
@@ -104,57 +270,78 @@ export default function InvestmentEdit() {
           label="Rasio Keuntungan / ROI %"
           placeholder="0"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, rasioKeuntungan: Number(value) })
-          }
-          value={
-            data.rasioKeuntungan === 0 ? "" : data.rasioKeuntungan.toString()
-          }
+          onChangeText={(value) => setData({ ...data, roi: value })}
+          value={data?.roi === "" ? "" : data?.roi}
         />
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pencarian Investor"
-          data={dummyListPencarianInvestor.map((item) => ({
-            label: item.name + `${" "}hari`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pencarianInvestor: value as any })
-          }
-          value={data.pencarianInvestor}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pencarian Investor"
+            data={
+              _.isEmpty(listPencarianInvestor)
+                ? []
+                : listPencarianInvestor.map((item) => ({
+                    label: item.name + `${" "}hari`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, masterPencarianInvestorId: value as any })
+            }
+            value={data.masterPencarianInvestorId}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Periode Deviden"
-          data={dummyPeriodeDeviden.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, periodeDeviden: value as any })
-          }
-          value={data.periodeDeviden}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Periode Deviden"
+            data={
+              _.isEmpty(listPeriodeDeviden)
+                ? []
+                : listPeriodeDeviden.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, masterPeriodeDevidenId: value as any })
+            }
+            value={data.masterPeriodeDevidenId}
+          />
+        )}
+
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Pembagian Deviden"
+            data={
+              _.isEmpty(listPembagianDeviden)
+                ? []
+                : listPembagianDeviden.map((item) => ({
+                    label: item.name + `${" "}bulan`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, masterPembagianDevidenId: value as any })
+            }
+            value={data.masterPembagianDevidenId}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Pembagian Deviden"
-          data={dummyPembagianDeviden.map((item) => ({
-            label: item.name + `${" "}bulan`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pembagianDeviden: value as any })
-          }
-          value={data.pembagianDeviden}
-        />
         <Spacing />
-        <ButtonCustom onPress={() => router.replace("/investment/portofolio")}>
+        <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
           Simpan
         </ButtonCustom>
       </StackCustom>

app/(application)/(user)/investment/[id]/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   DotButton,
@@ -9,18 +10,45 @@ import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvestasiSection";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
 import _ from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetail() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, status])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetOne({
+        id: id as string,
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   const handlePressDraft = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -37,11 +65,14 @@ export default function InvestmentDetail() {
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
       id={id as string}
-      status={'publish'}
+      prospectusId={data?.prospektusFileId}
+      status={"publish"}
     />
   );
 
-  const buttonSection = <Investment_ButtonInvestasiSection id={id as string} isMine={true} />;
+  const buttonSection = (
+    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
+  );
 
   return (
     <>
@@ -61,6 +92,7 @@ export default function InvestmentDetail() {
       <ViewWrapper>
         <Invesment_DetailDataPublishSection
           status={"publish"}
+          data={data}
           bottomSection={bottomSection}
           buttonSection={buttonSection}
         />

app/(application)/(user)/investment/create.tsx

@@ -1,76 +1,235 @@
 import {
-    BaseBox,
-    ButtonCenteredOnly,
-    ButtonCustom,
-    CenterCustom,
-    InformationBox,
-    LandscapeFrameUploaded,
-    SelectCustom,
-    Spacing,
-    StackCustom,
-    TextInputCustom,
-    ViewWrapper,
+  BaseBox,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  CenterCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  LoaderCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import dummyPembagianDeviden from "@/lib/dummy-data/investment/pembagian-deviden";
-import dummyListPencarianInvestor from "@/lib/dummy-data/investment/pencarian-investor";
-import dummyPeriodeDeviden from "@/lib/dummy-data/investment/periode-deviden";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentCreate } from "@/service/api-client/api-investment";
+import { apiMasterInvestment } from "@/service/api-client/api-master";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile, { IFileData } from "@/utils/pickFile";
 import { FontAwesome5 } from "@expo/vector-icons";
-import { router } from "expo-router";
-import { useState } from "react";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentCreate() {
+  const { user } = useAuth();
   const [data, setData] = useState({
     title: "",
-    targetDana: 0,
-    hargaPerLembar: 0,
-    totalLembar: 0,
-    rasioKeuntungan: 0,
+    targetDana: "",
+    hargaPerLembar: "",
+    totalLembar: "",
+    rasioKeuntungan: "",
     pencarianInvestor: "",
     periodeDeviden: "",
     pembagianDeviden: "",
+    authorId: "",
+    imageId: "",
+    prospektusFileId: "",
   });
+  const [image, setImage] = useState<string | null>(null);
+  const [pdf, setPdf] = useState<IFileData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-//   const [coba, setCoba] = useState(""); 
+  const [loadingMaster, setLoadingMaster] = useState(false);
+  const [listPencarianInvestor, setListPencarianInvestor] = useState<any[]>([]);
+  const [listPeriodeDeviden, setListPeriodeDeviden] = useState<any[]>([]);
+  const [listPembagianDeviden, setListPembagianDeviden] = useState<any[]>([]);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMaster();
+    }, [])
+  );
+
+  const onLoadMaster = async () => {
+    try {
+      setLoadingMaster(true);
+      const response = await apiMasterInvestment({ category: "" });
+
+      setListPencarianInvestor(response.data.pencarianInvestor);
+      setListPeriodeDeviden(response.data.periodeDeviden);
+      setListPembagianDeviden(response.data.pembagianDeviden);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingMaster(false);
+    }
+  };
+
+  const displayTargetDana = formatCurrencyDisplay(data.targetDana);
+  const displayHargaPerLembar = formatCurrencyDisplay(data.hargaPerLembar);
+  const realTotalLembar = Number(data.targetDana) / Number(data.hargaPerLembar);
+  const displayTotalLembar = formatCurrencyDisplay(realTotalLembar);
+
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev) => ({ ...prev, [field]: numeric }));
+  };
+
+  const validateData = () => {
+    if (
+      !data.title ||
+      !data.targetDana ||
+      !data.hargaPerLembar ||
+      !data.rasioKeuntungan ||
+      !data.pencarianInvestor ||
+      !data.periodeDeviden ||
+      !data.pembagianDeviden
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Harap isi semua data",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = async () => {
+    if (!validateData()) {
+      return;
+    }
+
+    if (!image || !pdf) {
+      Toast.show({
+        type: "error",
+        text1: "Harap upload gambar dan file PDF",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.investasi_image,
+      });
+
+      if (!responseUploadImage.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah gambar",
+        });
+        return;
+      }
+
+      const imageId = responseUploadImage.data.id;
+      const responseUploadPdf = await uploadFileService({
+        imageUri: pdf.uri,
+        dirId: DIRECTORY_ID.investasi_prospektus,
+      });
+
+      if (!responseUploadPdf.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah file PDF",
+        });
+        return;
+      }
+
+      const pdfId = responseUploadPdf.data.id;
+      const newData = {
+        title: data.title,
+        targetDana: data.targetDana,
+        hargaLembar: data.hargaPerLembar,
+        totalLembar: realTotalLembar.toString(),
+        roi: data.rasioKeuntungan,
+        masterPencarianInvestorId: data.pencarianInvestor,
+        masterPembagianDevidenId: data.pembagianDeviden,
+        masterPeriodeDevidenId: data.periodeDeviden,
+        authorId: user?.id,
+        imageId: imageId,
+        prospektusFileId: pdfId,
+      };
+
+      const response = await apiInvestmentCreate({ data: newData });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: response.message,
+        });
+        router.replace("/investment/portofolio");
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Info",
+          text2: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("error", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  //   const [coba, setCoba] = useState("");
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
-        {/* <View style={GStyles.inputContainerInput}>
-          <TextInput
-            style={{
-              ...GStyles.inputText,
-            }}
-            onChangeText={(value) => setCoba(value)}
-            value={coba}
-            keyboardType="decimal-pad"
-          />
-        </View> */}
-
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded image={image as string} />
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.push("/take-picture/1")}
+          onPress={() => {
+            pickFile({
+              setImageUri: ({ uri }) => {
+                setImage(uri);
+              },
+              allowedType: "image",
+            });
+          }}
         >
           Upload
         </ButtonCenteredOnly>
 
         <Spacing />
 
-        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya." />
+        <InformationBox text="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepannya. Gunakan format PDF." />
 
         <BaseBox>
           <CenterCustom>
-            <FontAwesome5
-              name="file-pdf"
-              size={30}
-              color={MainColor.disabled}
-            />
+            {pdf ? (
+              <TextCustom>{pdf.name}</TextCustom>
+            ) : (
+              <FontAwesome5
+                name="file-pdf"
+                size={30}
+                color={MainColor.disabled}
+              />
+            )}
           </CenterCustom>
         </BaseBox>
         <ButtonCenteredOnly
           icon="upload"
-          onPress={() => router.push("/take-picture/1")}
+          onPress={() => {
+            pickFile({
+              setPdfUri: ({ uri, name, size }) => {
+
+                setPdf({ uri, name, size });
+              },
+              allowedType: "pdf",
+            });
+          }}
         >
           Upload File
         </ButtonCenteredOnly>
@@ -90,22 +249,8 @@ export default function InvestmentCreate() {
           placeholder="0"
           label="Target Dana"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
-        />
-
-        <TextInputCustom
-          required
-          iconLeft="Rp."
-          placeholder="0"
-          label="Target Dana"
-          keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("targetDana")}
+          value={displayTargetDana}
         />
 
         <TextInputCustom
@@ -114,22 +259,24 @@ export default function InvestmentCreate() {
           placeholder="0"
           label="Harga Per Lembar"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, targetDana: Number(value) })
-          }
-          value={data.targetDana === 0 ? "" : data.targetDana.toString()}
+          onChangeText={handleChangeCurrency("hargaPerLembar")}
+          value={displayHargaPerLembar}
         />
 
-        <TextInputCustom
-          required
-          placeholder="0"
-          label="Total Lembar"
-          keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, totalLembar: Number(value) })
-          }
-          value={data.totalLembar === 0 ? "" : data.totalLembar.toString()}
-        />
+        <StackCustom gap={0}>
+          <TextInputCustom
+            required
+            placeholder="0"
+            label="Total Lembar"
+            keyboardType="numeric"
+            // onChangeText={handleChangeCurrency("totalLembar")}
+            value={displayTotalLembar}
+          />
+          <TextCustom size={"small"} color="gray">
+            *Total lembar dihitung dari, Target Dana / Harga Perlembar
+          </TextCustom>
+        </StackCustom>
+        <Spacing />
 
         <TextInputCustom
           required
@@ -137,57 +284,80 @@ export default function InvestmentCreate() {
           label="Rasio Keuntungan / ROI %"
           placeholder="0"
           keyboardType="numeric"
-          onChangeText={(value) =>
-            setData({ ...data, rasioKeuntungan: Number(value) })
-          }
+          onChangeText={(value) => setData({ ...data, rasioKeuntungan: value })}
           value={
-            data.rasioKeuntungan === 0 ? "" : data.rasioKeuntungan.toString()
+            data.rasioKeuntungan === "" ? "" : data.rasioKeuntungan.toString()
           }
         />
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pencarian Investor"
-          data={dummyListPencarianInvestor.map((item) => ({
-            label: item.name + `${" "}hari`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pencarianInvestor: value as any })
-          }
-          value={data.pencarianInvestor}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pencarian Investor"
+            data={
+              _.isEmpty(listPencarianInvestor)
+                ? []
+                : listPencarianInvestor.map((item) => ({
+                    label: item.name + `${" "}hari`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, pencarianInvestor: value as any })
+            }
+            value={data.pencarianInvestor}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Periode Deviden"
-          data={dummyPeriodeDeviden.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, periodeDeviden: value as any })
-          }
-          value={data.periodeDeviden}
-        />
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Periode Deviden"
+            data={
+              _.isEmpty(listPeriodeDeviden)
+                ? []
+                : listPeriodeDeviden.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, periodeDeviden: value as any })
+            }
+            value={data.periodeDeviden}
+          />
+        )}
+
+        {loadingMaster ? (
+          <LoaderCustom />
+        ) : (
+          <SelectCustom
+            required
+            placeholder="Pilih batas waktu"
+            label="Pilih Pembagian Deviden"
+            data={
+              _.isEmpty(listPembagianDeviden)
+                ? []
+                : listPembagianDeviden.map((item) => ({
+                    label: item.name + `${" "}bulan`,
+                    value: item.id,
+                  }))
+            }
+            onChange={(value) =>
+              setData({ ...data, pembagianDeviden: value as any })
+            }
+            value={data.pembagianDeviden}
+          />
+        )}
 
-        <SelectCustom
-          required
-          placeholder="Pilih batas waktu"
-          label="Pilih Pembagian Deviden"
-          data={dummyPembagianDeviden.map((item) => ({
-            label: item.name + `${" "}bulan`,
-            value: item.id,
-          }))}
-          onChange={(value) =>
-            setData({ ...data, pembagianDeviden: value as any })
-          }
-          value={data.pembagianDeviden}
-        />
         <Spacing />
-        <ButtonCustom onPress={() => router.replace("/investment/portofolio")}>
+        <ButtonCustom isLoading={isLoading} onPress={() => handleSubmit()}>
           Simpan
         </ButtonCustom>
       </StackCustom>

app/(application)/(user)/job/[id]/edit.tsx

@@ -1,23 +1,23 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  DummyLandscapeImage,
-  InformationBox,
-  LandscapeFrameUploaded,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextAreaCustom,
-  TextInputCustom,
-  ViewWrapper,
+    BaseBox,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    DummyLandscapeImage,
+    InformationBox,
+    LandscapeFrameUploaded,
+    LoaderCustom,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextInputCustom,
+    ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
 import {
-  deleteImageService,
-  uploadImageService,
+    deleteFileService,
+    uploadFileService,
 } from "@/service/upload-service";
 import pickImage from "@/utils/pickImage";
 import { router, useLocalSearchParams } from "expo-router";
@@ -69,7 +69,7 @@ export default function JobEdit() {
       let newImageId = "";
 
       if (imageUri) {
-        const responseUploadImage = await uploadImageService({
+        const responseUploadImage = await uploadFileService({
           imageUri: imageUri,
           dirId: DIRECTORY_ID.job_image,
         });
@@ -80,7 +80,7 @@ export default function JobEdit() {
       }
 
       if (data?.imageId) {
-        const responseDeleteImage = await deleteImageService({
+        const responseDeleteImage = await deleteFileService({
           id: data.imageId,
         });
 

app/(application)/(user)/job/[id]/index.tsx

@@ -4,6 +4,7 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Job_BoxDetailSection from "@/screens/Job/BoxDetailSection";
 import { apiJobGetOne } from "@/service/api-client/api-job";
+import { BASE_URL } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
 import * as Clipboard from "expo-clipboard";
 import { useLocalSearchParams } from "expo-router";
@@ -32,7 +33,8 @@ export default function JobDetail() {
     }
   };
 
-  const linkUrl = `http://192.168.1.83:3000/job-vacancy/`;
+  const baseUrl = BASE_URL;
+  const linkUrl = `${baseUrl}/job-vacancy/`;
 
   const OpenLinkButton = ({ id }: { id: string }) => {
     const jobUrl = `${linkUrl}${id}`;

app/(application)/(user)/job/create.tsx

@@ -12,7 +12,7 @@ import {
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import { apiJobCreate } from "@/service/api-client/api-job";
-import { uploadImageService } from "@/service/upload-service";
+import { uploadFileService } from "@/service/upload-service";
 import pickImage from "@/utils/pickImage";
 import { router } from "expo-router";
 import { useState } from "react";
@@ -66,7 +66,7 @@ export default function JobCreate() {
         return;
       }
 
-      const responseUploadImage = await uploadImageService({
+      const responseUploadImage = await uploadFileService({
         imageUri: image,
         dirId: DIRECTORY_ID.job_image,
       });

app/(application)/(user)/maps/[id]/edit.tsx

@@ -1,54 +1,226 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BaseBox,
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  MapCustom,
   Spacing,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
-import { router, useLocalSearchParams } from "expo-router";
+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";
 
+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
-        onPress={() => {
-          console.log(`Simpan maps ${id}`);
-          router.back()
-        }}
+        disabled={!data.namePin}
+        onPress={handleSubmit}
+        isLoading={isLoading}
       >
-        Simpan
+        Update
       </ButtonCustom>
     </BoxButtonOnFooter>
   );
+
   return (
     <ViewWrapper footerComponent={buttonFooter}>
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
-      <BaseBox>
-        <MapCustom />
-      </BaseBox>
+      <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 />
+      <LandscapeFrameUploaded
+        image={
+          image
+            ? image?.uri
+            : API_IMAGE.GET({ fileId: data?.imageId as string })
+        }
+      />
       <ButtonCenteredOnly
         icon="upload"
         onPress={() => {
-          console.log("Upload foto ");
-          router.navigate(`/take-picture/${id}`);
+          pickFile({
+            allowedType: "image",
+            setImageUri(file) {
+              setImage(file);
+            },
+          });
         }}
       >
         Upload
@@ -57,3 +229,16 @@ export default function MapsEdit() {
     </ViewWrapper>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: "#f5f5f5",
+    overflow: "hidden",
+    borderRadius: 8,
+    marginBottom: 20,
+  },
+  map: {
+    flex: 1,
+  },
+});

app/(application)/(user)/maps/create.tsx

@@ -6,21 +6,96 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   Spacing,
-  TextCustom,
   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";
 
 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
-        onPress={() => {
-          console.log(`Simpan maps ${id}`);
-          router.replace(`/portofolio/${id}`);
-        }}
+        isLoading={isLoading}
+        disabled={!selectedLocation || name === ""}
+        onPress={handleSubmit}
       >
         Simpan
       </ButtonCustom>
@@ -30,25 +105,34 @@ export default function MapsCreate() {
     <ViewWrapper footerComponent={buttonFooter}>
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
-      <BaseBox style={{ height: 400 }}>
-        <TextCustom>Maps Her</TextCustom>
+      <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 />
+      <LandscapeFrameUploaded image={image?.uri} />
       <ButtonCenteredOnly
         icon="upload"
         onPress={() => {
-          console.log("Upload foto ");
-          router.navigate(`/take-picture/${id}`);
+          pickFile({
+            allowedType: "image",
+            setImageUri(file) {
+              setImage(file);
+            },
+          });
         }}
       >
         Upload

app/(application)/(user)/maps/index.tsx

@@ -1,19 +1,234 @@
-import { MapCustom, ViewWrapper } from "@/components";
+import {
+  ButtonCustom,
+  DrawerCustom,
+  DummyLandscapeImage,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import API_IMAGE from "@/constants/api-storage";
+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 from "react-native-maps";
+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 Maps() {
+  const [list, setList] = useState<any[] | 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);
+    }
+  };
+
   return (
-    <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
-      {/* <MapCustom height={"100%"} /> */}
-      <View style={{ flex: 1 }}>
-        <MapView
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      </View>
-    </ViewWrapper>
+    <>
+      <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 style={{}}>
+                      <Image
+                        source={{
+                          uri: API_IMAGE.GET({
+                            fileId: item?.Portofolio?.logoId,
+                          }),
+                        }}
+                        style={{
+                          width: 30,
+                          height: 30,
+                          borderRadius: 100,
+                          borderWidth: 1,
+                        }}
+                      />
+                    </View>
+                  </Marker>
+                );
+              })}
+            </MapView>
+          )}
+        </View>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <DummyLandscapeImage height={200} imageId={selected.imageId} />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <FontAwesome
+                name="building-o"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{selected.namePin}</TextCustom>}
+          />
+
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="list-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{selected.bidangBisnis}</TextCustom>}
+          />
+
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="call-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{selected.nomorTelepon}</TextCustom>}
+          />
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="location-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<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>
+    </>
   );
 }

app/(application)/(user)/portofolio/[id]/edit-logo.tsx

@@ -1,9 +1,9 @@
 import {
-  BaseBox,
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  ViewWrapper
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    ViewWrapper
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -11,10 +11,10 @@ import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiFileDelete } from "@/service/api-client/api-file";
 import {
-  apiGetOnePortofolio,
-  apiUpdatePortofolio,
+    apiGetOnePortofolio,
+    apiUpdatePortofolio,
 } from "@/service/api-client/api-portofolio";
-import { uploadImageService } from "@/service/upload-service";
+import { uploadFileService } from "@/service/upload-service";
 import pickImage from "@/utils/pickImage";
 import { Image } from "expo-image";
 import { router, useLocalSearchParams } from "expo-router";
@@ -45,7 +45,7 @@ export default function PortofolioEditLogo() {
     try {
       setIsLoading(true);
 
-      const response = await uploadImageService({
+      const response = await uploadFileService({
         imageUri,
         dirId: DIRECTORY_ID.portofolio_logo,
       });

app/(application)/(user)/portofolio/[id]/index.tsx

@@ -1,8 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { DrawerCustom, LoaderCustom, Spacing, StackCustom } from "@/components";
+import {
+  ButtonCustom,
+  DrawerCustom,
+  DummyLandscapeImage,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
 import Portofolio_BusinessLocation from "@/screens/Portofolio/BusinessLocationSection";
 import Portofolio_ButtonDelete from "@/screens/Portofolio/ButtonDelete";
@@ -13,19 +23,20 @@ import Portofolio_SocialMediaSection from "@/screens/Portofolio/SocialMediaSecti
 import { apiGetOnePortofolio } from "@/service/api-client/api-portofolio";
 import { apiUser } from "@/service/api-client/api-user";
 import { GStyles } from "@/styles/global-styles";
-import { Ionicons } from "@expo/vector-icons";
+import { openInDeviceMaps } from "@/utils/openInDeviceMaps";
+import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import { TouchableOpacity } from "react-native";
 
 export default function Portofolio() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [isLoadingDelete, setIsLoadingDelete] = useState(false);
   const [data, setData] = useState<any>();
   const [profileId, setProfileId] = useState<any>();
-
-  const { user } = useAuth();
+  const [openDrawerLocation, setOpenDrawerLocation] = useState(false);
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -43,19 +54,13 @@ export default function Portofolio() {
 
   async function onLoadData(id: string) {
     const response = await apiGetOnePortofolio({ id: id });
-    console.log(
-      "[PROFILE ID]>>",
-      JSON.stringify(response.data.Profile.id, null, 2)
-    );
+
     setData(response.data);
   }
 
   const onLoadUserByToken = async () => {
     const response = await apiUser(user?.id as string);
-    console.log(
-      "[PROFILE LOGIN]>>",
-      JSON.stringify(response.data?.Profile.id, null, 2)
-    );
+
     setProfileId(response?.data?.Profile?.id);
   };
 
@@ -89,15 +94,21 @@ export default function Portofolio() {
               data={data}
               listSubBidang={data?.Portofolio_BidangDanSubBidangBisnis as any[]}
             />
-            <Portofolio_BusinessLocation />
+            <Portofolio_BusinessLocation
+              data={data?.BusinessMaps}
+              imageId={data?.logoId}
+              setOpenDrawerLocation={setOpenDrawerLocation}
+            />
             <Portofolio_SocialMediaSection
               data={data?.Portofolio_MediaSosial}
             />
-            <Portofolio_ButtonDelete
-              id={id as string}
-              isLoadingDelete={isLoadingDelete}
-              setIsLoadingDelete={setIsLoadingDelete}
-            />
+            {data?.Profile?.id !== profileId ? null : (
+              <Portofolio_ButtonDelete
+                id={id as string}
+                isLoadingDelete={isLoadingDelete}
+                setIsLoadingDelete={setIsLoadingDelete}
+              />
+            )}
             <Spacing />
           </StackCustom>
         )}
@@ -110,10 +121,93 @@ export default function Portofolio() {
         height={"auto"}
       >
         <Portofolio_MenuDrawerSection
-          drawerItems={drawerItemsPortofolio({ id: id as string })}
+          drawerItems={drawerItemsPortofolio({
+            id: id as string,
+            maps: data?.BusinessMaps,
+          })}
           setIsDrawerOpen={setIsDrawerOpen}
         />
       </DrawerCustom>
+
+      {/* Drawer Lokasi */}
+      <DrawerCustom
+        isVisible={openDrawerLocation}
+        closeDrawer={() => setOpenDrawerLocation(false)}
+        height={"auto"}
+      >
+        <DummyLandscapeImage
+          height={200}
+          imageId={data?.BusinessMaps?.imageId}
+        />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <FontAwesome
+                name="building-o"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{data?.BusinessMaps?.namePin}</TextCustom>}
+          />
+
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="list-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={
+              <TextCustom>{data?.MasterBidangBisnis?.name}</TextCustom>
+            }
+          />
+
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="call-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{data?.tlpn}</TextCustom>}
+          />
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="location-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{data?.alamatKantor}</TextCustom>}
+          />
+
+          <Spacing />
+          <ButtonCustom
+            onPress={() => {
+              openInDeviceMaps({
+                latitude: data?.BusinessMaps?.latitude,
+                longitude: data?.BusinessMaps?.longitude,
+                title: data?.BusinessMaps?.namePin,
+              });
+            }}
+          >
+            Buka Maps
+          </ButtonCustom>
+        </StackCustom>
+      </DrawerCustom>
     </>
   );
 }

app/(application)/(user)/profile/[id]/index.tsx

@@ -26,7 +26,7 @@ export default function Profile() {
   const [dataToken, setDataToken] = useState<IProfile>();
   const [listPortofolio, setListPortofolio] = useState<any[]>();
 
-  const { logout, isAdmin, user } = useAuth();
+  const { token, logout, isAdmin, user, userData } = useAuth();
 
   const openDrawer = () => {
     setIsDrawerOpen(true);
@@ -42,7 +42,8 @@ export default function Profile() {
       onLoadPortofolio(id as string);
       onLoadUserByToken();
       isUserCheck();
-    }, [id])
+      userData(token as string);
+    }, [id, token])
   );
 
   const isUserCheck = () => {
@@ -136,10 +137,7 @@ const ButtonnDot = ({
 }) => {
   const isId = id === undefined || id === null;
 
-  console.log("ID CHECK", id);
-
   if (isId) {
-    console.log("ID UNDEFINED", id);
     return (
       <>
         <TouchableOpacity onPress={logout}>

app/(application)/(user)/profile/[id]/update-background.tsx

@@ -1,8 +1,8 @@
 import {
-  BaseBox,
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCenteredOnly,
+    ButtonCustom,
 } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
@@ -11,7 +11,7 @@ import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiFileDelete } from "@/service/api-client/api-file";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
-import { uploadImageService } from "@/service/upload-service";
+import { uploadFileService } from "@/service/upload-service";
 import { IProfile } from "@/types/Type-Profile";
 import pickImage from "@/utils/pickImage";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -45,7 +45,7 @@ export default function UpdateBackgroundProfile() {
     try {
       setIsLoading(true);
 
-      const response = await uploadImageService({
+      const response = await uploadFileService({
         imageUri,
         dirId: DIRECTORY_ID.profile_background,
       });

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -8,16 +8,16 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { useAuth } from "@/hooks/use-auth";
+import { apiFileDelete } from "@/service/api-client/api-file";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
-import { uploadImageService } from "@/service/upload-service";
+import { uploadFileService } from "@/service/upload-service";
 import { IProfile } from "@/types/Type-Profile";
 import pickImage from "@/utils/pickImage";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import { Image } from "react-native";
 import Toast from "react-native-toast-message";
-import { useAuth } from "@/hooks/use-auth";
-import { apiFileDelete } from "@/service/api-client/api-file";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
@@ -46,7 +46,7 @@ export default function UpdatePhotoProfile() {
     try {
       setIsLoading(true);
 
-      const response = await uploadImageService({
+      const response = await uploadFileService({
         imageUri,
         dirId: DIRECTORY_ID.profile_foto,
       });

app/(application)/(user)/profile/create.tsx

@@ -1,12 +1,12 @@
 import {
-  BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  SelectCustom,
-  Spacing,
-  StackCustom,
-  TextInputCustom,
-  ViewWrapper,
+    BaseBox,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    SelectCustom,
+    Spacing,
+    StackCustom,
+    TextInputCustom,
+    ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
@@ -15,7 +15,7 @@ import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCreateProfile } from "@/service/api-client/api-profile";
 import { apiValidationEmail } from "@/service/api-client/api-validation";
-import { uploadImageService } from "@/service/upload-service";
+import { uploadFileService } from "@/service/upload-service";
 import pickImage from "@/utils/pickImage";
 import { router } from "expo-router";
 import { useState } from "react";
@@ -69,7 +69,7 @@ export default function CreateProfile() {
 
       if (imagePhoto) {
         try {
-          const responseUploadPhoto = await uploadImageService({
+          const responseUploadPhoto = await uploadFileService({
             imageUri: imagePhoto,
             dirId: DIRECTORY_ID.profile_foto,
           });
@@ -90,7 +90,7 @@ export default function CreateProfile() {
 
       if (imageBackground) {
         try {
-          const responseUploadBackground = await uploadImageService({
+          const responseUploadBackground = await uploadFileService({
             imageUri: imageBackground,
             dirId: DIRECTORY_ID.profile_background,
           });

app/(application)/(user)/waiting-room.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
+import { apiUser } from "@/service/api-client/api-user";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import Toast from "react-native-toast-message";
@@ -19,12 +20,25 @@ export default function WaitingRoom() {
   async function handleCheck() {
     try {
       const response = await userData(token as string);
+
       if (response.active) {
-        Toast.show({
-          type: "success",
-          text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
-        });
-        router.replace(`/(application)/(user)/profile/create`);
+        const checkProfile = await apiUser(response.id);
+
+        if (checkProfile?.data?.Profile) {
+          Toast.show({
+            type: "success",
+            text1: "Akun anda telah aktif kembali", // text2: "Anda berhasil login",
+          });
+          router.replace(`/(application)/(user)/home`);
+        } else {
+          Toast.show({
+            type: "success",
+            text1: "Akun anda telah aktif", // text2: "Anda berhasil login",
+          });
+          router.replace(`/(application)/(user)/profile/create`);
+        }
+
+        // router.replace(`/(application)/(user)/profile/create`);
       } else {
         Toast.show({
           type: "error",

app/(application)/admin/_layout.tsx

@@ -15,7 +15,10 @@ import {
   ICON_SIZE_XLARGE,
 } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
-import { adminListMenu } from "@/screens/Admin/listPageAdmin";
+import {
+  adminListMenu,
+  superAdminListMenu,
+} from "@/screens/Admin/listPageAdmin";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -24,8 +27,11 @@ import { useState } from "react";
 export default function AdminLayout() {
   const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
   const [openDrawerUser, setOpenDrawerUser] = useState(false);
+  // const [user, setUser] = useState(null);
 
-  const { logout } = useAuth();
+  const { logout, user } = useAuth();
+
+  console.log("[USER LAYOUT]", JSON.stringify(user, null, 2));
 
   return (
     <>
@@ -56,58 +62,58 @@ export default function AdminLayout() {
           ),
         }}
       >
-        <Stack.Screen name="dashboard" />
+        {/* <Stack.Screen name="dashboard" /> */}
         {/* ================== Investment Start ================== */}
-        <Stack.Screen name="investment/index" />
+        {/* <Stack.Screen name="investment/index" /> */}
         {/* ================== Investment End ================== */}
 
         {/* ================== Maps Start ================== */}
-        <Stack.Screen name="maps" />
+        {/* <Stack.Screen name="maps" /> */}
         {/* ================== Maps End ================== */}
 
         {/* ================== App Information Start ================== */}
-        <Stack.Screen name="app-information/index" />
+        {/* <Stack.Screen name="app-information/index" /> */}
         {/* ================== App Information End ================== */}
 
         {/* ================== Job Start ================== */}
-        <Stack.Screen name="job/index" />
+        {/* <Stack.Screen name="job/index" /> */}
         {/* <Stack.Screen name="job/publish" />
         <Stack.Screen name="job/review" />
         <Stack.Screen name="job/reject" /> */}
-        <Stack.Screen name="job/[status]/status" />
-        <Stack.Screen name="job/[id]/[status]/index" />
+        {/* <Stack.Screen name="job/[status]/status" />
+        <Stack.Screen name="job/[id]/[status]/index" /> */}
 
         {/* ================== Collaboration Start ================== */}
-        <Stack.Screen name="collaboration/index" />
-        <Stack.Screen name="collaboration/publish" />
+        {/* <Stack.Screen name="collaboration/index" /> */}
+        {/* <Stack.Screen name="collaboration/publish" />
         <Stack.Screen name="collaboration/group" />
         <Stack.Screen name="collaboration/reject" />
         <Stack.Screen name="collaboration/[id]/[status]" />
-        <Stack.Screen name="collaboration/[id]/group" />
+        <Stack.Screen name="collaboration/[id]/group" /> */}
         {/* ================== Collaboration End ================== */}
 
         {/* ================== Forum Start ================== */}
-        <Stack.Screen name="forum/index" />
-        <Stack.Screen name="forum/[id]/index" />
+        {/* <Stack.Screen name="forum/index" /> */}
+        {/* <Stack.Screen name="forum/[id]/index" />
         <Stack.Screen name="forum/report-comment" />
         <Stack.Screen name="forum/report-posting" />
         <Stack.Screen name="forum/[id]/list-report-posting" />
-        <Stack.Screen name="forum/[id]/list-report-comment" />
+        <Stack.Screen name="forum/[id]/list-report-comment" /> */}
         {/* ================== Forum End ================== */}
 
         {/* ================== Voting Start ================== */}
-        <Stack.Screen name="voting/index" />
+        {/* <Stack.Screen name="voting/index" />
         <Stack.Screen name="voting/[status]/status" />
         <Stack.Screen name="voting/[id]/[status]/index" />
-        <Stack.Screen name="voting/[id]/reject-input" />
+        <Stack.Screen name="voting/[id]/reject-input" /> */}
         {/* ================== Voting End ================== */}
 
         {/* ================== Event Start ================== */}
-        <Stack.Screen name="event/index" />
+        {/* <Stack.Screen name="event/index" />
         <Stack.Screen name="event/[status]/status" />
         <Stack.Screen name="event/type-of-event" />
         <Stack.Screen name="event/type-create" />
-        <Stack.Screen name="event/type-update" />
+        <Stack.Screen name="event/type-update" /> */}
         {/* <Stack.Screen name="event/[id]/[status]/index" />
         <Stack.Screen name="event/[id]/reject-input"/> */}
         {/* ================== Event End ================== */}
@@ -134,7 +140,11 @@ export default function AdminLayout() {
           />
 
           <NavbarMenu
-            items={adminListMenu}
+            items={
+              user?.masterUserRoleId === "2"
+                ? adminListMenu
+                : superAdminListMenu
+            }
             onClose={() => setOpenDrawerNavbar(false)}
           />
         </StackCustom>
@@ -155,7 +165,7 @@ export default function AdminLayout() {
               />
             }
           >
-            <TextCustom>Username</TextCustom>
+            <TextCustom>{user?.username || "-"}</TextCustom>
           </GridComponentView>
           <GridComponentView
             leftIcon={
@@ -166,7 +176,13 @@ export default function AdminLayout() {
               />
             }
           >
-            <TextCustom>User Role</TextCustom>
+            <TextCustom>
+              {user
+                ? user?.masterUserRoleId === "2"
+                  ? "Admin"
+                  : "Super Admin"
+                : "-"}
+            </TextCustom>
           </GridComponentView>
 
           <MenuDrawerDynamicGrid

app/(application)/admin/app-information/business-field/[id]/index.tsx

@@ -1,18 +1,89 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BoxButtonOnFooter,
   ButtonCustom,
   StackCustom,
+  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { router } from "expo-router";
+import { MainColor } from "@/constants/color-palet";
+import {
+  apiAdminMasterBusinessFieldById,
+  apiAdminMasterBusinessFieldUpdate,
+} from "@/service/api-admin/api-master-admin";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Switch } from "react-native-paper";
+import Toast from "react-native-toast-message";
 
 export default function AdminAppInformation_BusinessFieldDetail() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadDetail();
+    }, [id])
+  );
+
+  const onLoadDetail = async () => {
+    try {
+      const response = await apiAdminMasterBusinessFieldById({
+        id: id as string,
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setData(null);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    if (!data.name) {
+      Toast.show({
+        type: "error",
+        text1: "Lengkapi Data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const response = await apiAdminMasterBusinessFieldUpdate({
+        id: id as string,
+        data: data,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal update data",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Data berhasil di update",
+      });
+      router.back();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => router.back()}
+        disabled={!data?.name}
+        isLoading={isLoading}
+        onPress={() => handlerSubmit()}
       >
         Update
       </ButtonCustom>
@@ -28,6 +99,15 @@ export default function AdminAppInformation_BusinessFieldDetail() {
             label="Nama Bidang Bisnis"
             placeholder="Masukan Nama Bidang Bisnis"
             required
+            value={data?.name}
+            onChangeText={(value) => setData({ ...data, name: value })}
+          />
+
+          <TextCustom>Status Aktivasi</TextCustom>
+          <Switch
+            color={MainColor.yellow}
+            value={data?.active}
+            onValueChange={(value) => setData({ ...data, active: value })}
           />
         </StackCustom>
       </ViewWrapper>

app/(application)/admin/app-information/business-field/create.tsx

@@ -6,13 +6,52 @@ import {
     ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { apiAdminMasterBusinessFieldCreate } from "@/service/api-admin/api-master-admin";
 import { router } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function AdminAppInformation_BusinessFieldCreate() {
+  const [data, setData] = useState<any>({
+    name: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    if (!data.name) {
+      Toast.show({
+        type: "error",
+        text1: "Lengkapi Data",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiAdminMasterBusinessFieldCreate({ data: data });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil di tambah",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal tambah data",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => router.back()}
+        onPress={() => handlerSubmit()}
+        isLoading={isLoading}
       >
         Tambah
       </ButtonCustom>
@@ -28,6 +67,8 @@ export default function AdminAppInformation_BusinessFieldCreate() {
             label="Nama Bidang Bisnis"
             placeholder="Masukan Nama Bidang Bisnis"
             required
+            value={data.name}
+            onChangeText={(value) => setData({ ...data, name: value })}
           />
         </StackCustom>
       </ViewWrapper>

app/(application)/admin/app-information/index.tsx

@@ -1,8 +1,4 @@
-import {
-  ScrollableCustom,
-  StackCustom,
-  ViewWrapper
-} from "@/components";
+import { ScrollableCustom, StackCustom, ViewWrapper } from "@/components";
 import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
@@ -10,6 +6,7 @@ import AdminAppInformation_Bank from "@/screens/Admin/App-Information/Informatio
 import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
 import { router } from "expo-router";
 import { useState } from "react";
+import { Alert } from "react-native";
 
 export default function AdminInformation() {
   const [activeCategory, setActiveCategory] = useState<string | null>("bank");
@@ -57,7 +54,8 @@ export default function AdminInformation() {
                 } else if (activeCategory === "business") {
                   router.push("/admin/app-information/business-field/create");
                 } else if (activeCategory === "sticker") {
-                  router.push("/admin/app-information/sticker/create");
+                  Alert.alert("Coming Soon", "Next Update");
+                  // router.push("/admin/app-information/sticker/create");
                 }
               }}
             />

app/(application)/admin/app-information/information-bank/[id]/index.tsx

@@ -1,18 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BoxButtonOnFooter,
-    ButtonCustom,
-    StackCustom,
-    TextInputCustom,
-    ViewWrapper,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  CenterCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { router } from "expo-router";
+import { MainColor } from "@/constants/color-palet";
+import {
+  apiAdminMasterBankById,
+  apiAdminMasterBankUpdate,
+} from "@/service/api-admin/api-master-admin";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Switch } from "react-native-paper";
+import Toast from "react-native-toast-message";
 
 export default function AdminAppInformation_BankDetail() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      const response = await apiAdminMasterBankById({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerUpdate = async () => {
+    if (!data.namaBank || !data.namaAkun || !data.norek) {
+      Toast.show({
+        type: "error",
+        text1: "Lengkapi Data",
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const response = await apiAdminMasterBankUpdate({
+        id: id as string,
+        data: data,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal update data",
+        });
+      } else {
+        Toast.show({
+          type: "success",
+          text1: "Success",
+          text2: "Data berhasil di update",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => router.back()}
+        disabled={!data?.namaBank || !data?.namaAkun || !data?.norek}
+        isLoading={isLoading}
+        onPress={() => handlerUpdate()}
       >
         Update
       </ButtonCustom>
@@ -25,22 +97,46 @@ export default function AdminAppInformation_BankDetail() {
           <AdminBackButtonAntTitle title="Update Bank" />
 
           <StackCustom>
-            <TextInputCustom
-              label="Nama Bank"
-              placeholder="Masukan Nama Bank"
-              required
-            />
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInputCustom
+                  label="Nama Bank"
+                  placeholder="Masukan Nama Bank"
+                  required
+                  value={data?.namaBank}
+                  onChangeText={(value) =>
+                    setData({ ...data, namaBank: value })
+                  }
+                />
+              </Grid.Col>
+              <Grid.Col span={6} style={{ alignItems: "center" }}>
+                <TextCustom>Status Aktivasi</TextCustom>
+                <CenterCustom>
+                  <Switch
+                    onValueChange={(value) =>
+                      setData({ ...data, isActive: value })
+                    }
+                    color={MainColor.yellow}
+                    value={data?.isActive}
+                  />
+                </CenterCustom>
+              </Grid.Col>
+            </Grid>
 
             <TextInputCustom
               label="Nama Rekening"
               placeholder="Masukan Nama Rekening"
               required
+              value={data?.namaAkun}
+              onChangeText={(value) => setData({ ...data, namaAkun: value })}
             />
 
             <TextInputCustom
               label="Nomor Rekening"
               placeholder="Masukan Nomor Rekening"
               required
+              value={data?.norek}
+              onChangeText={(value) => setData({ ...data, norek: value })}
             />
           </StackCustom>
         </StackCustom>

app/(application)/admin/app-information/information-bank/create.tsx

@@ -1,19 +1,51 @@
 import {
-    BoxButtonOnFooter,
-    ButtonCustom,
-    StackCustom,
-    TextInputCustom,
-    ViewWrapper
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { apiAdminMasterBankCreate } from "@/service/api-admin/api-master-admin";
 import { router } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function AdminAppInformation_BankCreate() {
+  const [data, setData] = useState<any>({
+    namaBank: "",
+    namaAkun: "",
+    norek: "",
+  });
+
+  const [isLoading, setLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminMasterBankCreate({ data: data });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil di tambah",
+        });
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal tambah data",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const buttonSubmit = (
     <BoxButtonOnFooter>
-      <ButtonCustom
-        onPress={() => router.back()}
-      >
+      <ButtonCustom isLoading={isLoading} onPress={handlerSubmit}>
         Tambah
       </ButtonCustom>
     </BoxButtonOnFooter>
@@ -29,18 +61,25 @@ export default function AdminAppInformation_BankCreate() {
               label="Nama Bank"
               placeholder="Masukan Nama Bank"
               required
+              value={data.namaBank}
+              onChangeText={(value) => setData({ ...data, namaBank: value })}
             />
 
             <TextInputCustom
               label="Nama Rekening"
               placeholder="Masukan Nama Rekening"
               required
+              value={data.namaAkun}
+              onChangeText={(value) => setData({ ...data, namaAkun: value })}
             />
 
             <TextInputCustom
+              keyboardType="numeric"
               label="Nomor Rekening"
               placeholder="Masukan Nomor Rekening"
               required
+              value={data.norek}
+              onChangeText={(value) => setData({ ...data, norek: value })}
             />
           </StackCustom>
         </StackCustom>

app/(application)/admin/collaboration/[id]/[status].tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   BoxButtonOnFooter,
@@ -9,17 +10,43 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { MainColor } from "@/constants/color-palet";
-import { useLocalSearchParams } from "expo-router";
+import { apiAdminCollaborationGetById } from "@/service/api-admin/api-admin-collaboration";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminCollaborationPublish() {
   const { id, status } = useLocalSearchParams();
-  console.log("params:", id, status);
+  const [data, setData] = useState<any | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [status])
+  );
+
+  const handlerLoadData = async () => {
+    try {
+      const response = await apiAdminCollaborationGetById({
+        id: id as string,
+        category: status as "publish" | "reject" | "group",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const bottomFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
         backgroundColor={MainColor.red}
         textColor="white"
-        onPress={() => {}}
+        onPress={() => {
+          router.push(`/admin/collaboration/${id}/reject-input`);
+        }}
       >
         Reject
       </ButtonCustom>
@@ -29,12 +56,12 @@ export default function AdminCollaborationPublish() {
   return (
     <>
       <ViewWrapper
-        headerComponent={<AdminBackButtonAntTitle title={`Detail ${status}`} />}
+        headerComponent={<AdminBackButtonAntTitle title={`Detail`} />}
         footerComponent={bottomFooter}
       >
         <BaseBox>
           <StackCustom>
-            {listData.map((item, i) => (
+            {listData(data)?.map((item, i) => (
               <Grid key={i}>
                 <Grid.Col
                   span={4}
@@ -54,36 +81,33 @@ export default function AdminCollaborationPublish() {
   );
 }
 
-const listData = [
+const listData = (data: any) => [
   {
     label: "Username",
-    value: "Bagas Banuna",
+    value: (data && data?.Author?.username) || "-",
   },
   {
     label: "Judul Proyek",
-    value:
-      "Judul Proyek: Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    value: (data && data?.title) || "-",
   },
   {
     label: "Industri",
-    value: "Kesehatan",
+    value: (data && data?.ProjectCollaborationMaster_Industri?.name) || "-",
   },
   {
     label: "Jumlah Partisipan ",
-    value: "0",
+    value: (data && data?.ProjectCollaboration_Partisipasi.length) || "0",
   },
   {
     label: "Lokasi",
-    value: "Kuta Selatan, Bali",
+    value: (data && data?.lokasi) || "-",
   },
   {
     label: "Tujuan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: (data && data?.purpose) || "-",
   },
   {
     label: "Keuntungan",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    value: (data && data?.benefit) || "-",
   },
 ];

app/(application)/admin/collaboration/[id]/reject-input.tsx

@@ -0,0 +1,56 @@
+import {
+  AlertDefaultSystem,
+  BoxButtonOnFooter,
+  TextAreaCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function AdminCollaborationRejectInput() {
+  const { id } = useLocalSearchParams();
+  const [value, setValue] = useState(id as string);
+
+  const buttonSubmit = (
+    <BoxButtonOnFooter>
+      <AdminButtonReject
+        title="Reject"
+        onReject={() =>
+          AlertDefaultSystem({
+            title: "Reject",
+            message: "Apakah anda yakin ingin menolak data ini?",
+            textLeft: "Batal",
+            textRight: "Ya",
+            onPressLeft: () => {
+              router.back();
+            },
+            onPressRight: () => {
+              console.log("value:", value);
+              // router.replace(`/admin/job/reject/status`);
+            },
+          })
+        }
+      />
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={buttonSubmit}
+        headerComponent={<AdminBackButtonAntTitle title="Penolakan Collaboration" />}
+      >
+        <TextAreaCustom
+          value={value}
+          onChangeText={setValue}
+          placeholder="Masukan alasan"
+          required
+          showCount
+          maxLength={1000}
+        />
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/collaboration/index.tsx

@@ -2,14 +2,45 @@ import { StackCustom, ViewWrapper } from "@/components";
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
 import { Entypo, FontAwesome } from "@expo/vector-icons";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminCollaboration() {
+  const [list, setList] = useState<any | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminCollaboration({
+        category: "dashboard",
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
         <StackCustom gap={"xs"}>
-          {listData.map((item, i) => (
+          {listData(list as any).map((item, i) => (
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
@@ -18,20 +49,23 @@ export default function AdminCollaboration() {
   );
 }
 
-const listData = [
-  {
-    label: "Publish",
-    value: 4,
-    icon: <Entypo name="publish" size={25} color={MainColor.green} />,
-  },
-  {
-    label: "Group",
-    value: 7,
-    icon: <FontAwesome name="group" size={25} color={MainColor.yellow} />,
-  },
-  {
-    label: "Reject",
-    value: 7,
-    icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
-  },
-];
+const listData = (list: any) => {
+  console.log("[LIST masuk]", JSON.stringify(list, null, 2));
+  return [
+    {
+      label: "Publish",
+      value: (list && list?.publish) || "0",
+      icon: <Entypo name="publish" size={25} color={MainColor.green} />,
+    },
+    {
+      label: "Group",
+      value: (list && list?.group) || "0",
+      icon: <FontAwesome name="group" size={25} color={MainColor.yellow} />,
+    },
+    {
+      label: "Reject",
+      value: (list && list?.reject) || "0",
+      icon: <FontAwesome name="warning" size={25} color={MainColor.red} />,
+    },
+  ];
+};

app/(application)/admin/collaboration/publish.tsx

@@ -1,7 +1,6 @@
 import {
   ActionIcon,
-  BaseBox,
-  Spacing,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
@@ -11,26 +10,59 @@ import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminCollaboration } from "@/service/api-admin/api-admin-collaboration";
 import { Octicons } from "@expo/vector-icons";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { Divider } from "react-native-paper";
 
 export default function AdminCollaborationPublish() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminCollaboration({
+        category: "publish",
+      });
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
   return (
     <>
       <ViewWrapper headerComponent={<AdminTitlePage title="Collaboration" />}>
         <StackCustom gap={"xs"}>
           <AdminComp_BoxTitle title="Publish" />
-          <BaseBox>
-            <AdminTitleTable
-              title1="Aksi"
-              title2="Username"
-              title3="Judul Proyek"
-            />
-            <Spacing height={10} />
-            <Divider />
 
-            {Array.from({ length: 10 }).map((_, index) => (
+          <AdminTitleTable
+            title1="Aksi"
+            title2="Username"
+            title3="Judul Proyek"
+          />
+          {/* <Spacing height={10} /> */}
+          <Divider />
+
+          {loadList ? (
+            <LoaderCustom />
+          ) : _.isEmpty(list) ? (
+            <TextCustom>Belum ada data</TextCustom>
+          ) : (
+            list?.map((item: any, index: number) => (
               <AdminTableValue
                 key={index}
                 value1={
@@ -43,28 +75,25 @@ export default function AdminCollaborationPublish() {
                       />
                     }
                     onPress={() => {
-                      router.push(`/admin/collaboration/${index}/publish`);
+                      router.push(`/admin/collaboration/${item?.id}/publish`);
                     }}
                   />
                 }
                 value2={
-                  <TextCustom truncate={1}>Username username </TextCustom>
+                  <TextCustom align="center" truncate={1}>
+                    {item?.Author?.username || "-"}{" "}
+                  </TextCustom>
                 }
                 value3={
-                  <TextCustom truncate={2}>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Blanditiis asperiores quidem deleniti architecto eaque et
-                    nostrum, ad consequuntur eveniet quisquam quae voluptatum
-                    ducimus! Dolorem nobis modi officia debitis, beatae
-                    mollitia.
+                  <TextCustom align="center" truncate={2}>
+                    {item?.title || "-"}
                   </TextCustom>
                 }
               />
-            ))}
-          </BaseBox>
+            ))
+          )}
         </StackCustom>
       </ViewWrapper>
     </>
   );
 }
-

app/(application)/admin/dashboard.tsx

@@ -1,13 +1,31 @@
-import {
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
+import { StackCustom, TextCustom, ViewWrapper } from "@/components";
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminMainDashboardGetAll } from "@/service/api-admin/api-admin-main-dashboard";
 import { Ionicons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
 
 export default function AdminDashboard() {
+  const [countUser, setCountUser] = useState(0);
+  const [countPortofolio, setCountPortofolio] = useState(0);
+
+  useEffect(() => {
+    onLoadData();
+  }, []);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminMainDashboardGetAll();
+
+      if (response.success) {
+        setCountUser(response.data.user);
+        setCountPortofolio(response.data.portofolio);
+      }
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
@@ -15,7 +33,7 @@ export default function AdminDashboard() {
           <TextCustom bold size={30}>
             Main Dashboard
           </TextCustom>
-          {listData.map((item, i) => (
+          {listData(countUser, countPortofolio).map((item, i) => (
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
@@ -24,15 +42,15 @@ export default function AdminDashboard() {
   );
 }
 
-const listData = [
+const listData = (countUser: number, countPortofolio: number) => [
   {
     label: "User",
-    value: 4,
+    value: countUser,
     icon: <Ionicons name="people" size={30} color={MainColor.yellow} />,
   },
   {
     label: "Portofolio",
-    value: 7,
+    value: countPortofolio,
     icon: (
       <Ionicons name="id-card-outline" size={30} color={MainColor.yellow} />
     ),

app/(application)/admin/maps.tsx

@@ -1,11 +1,224 @@
-import { MapCustom, ViewWrapper } from "@/components";
+import { ButtonCustom, DrawerCustom, DummyLandscapeImage, Grid, Spacing, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import API_IMAGE from "@/constants/api-storage";
+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);
+  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);
+    }
+  };
+
   return (
     <>
-      <ViewWrapper>
-        <MapCustom height={"100%"} />
+      <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>
       </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <DummyLandscapeImage height={200} imageId={selected.imageId} />
+        <Spacing />
+        <StackCustom gap={"xs"}>
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <FontAwesome
+                name="building-o"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{selected.namePin}</TextCustom>}
+          />
+
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="list-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>{selected.bidangBisnis}</TextCustom>}
+          />
+
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="call-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<TextCustom>+{selected.nomorTelepon}</TextCustom>}
+          />
+          <GridTwoView
+            spanLeft={2}
+            spanRight={10}
+            leftIcon={
+              <Ionicons
+                name="location-outline"
+                size={ICON_SIZE_SMALL}
+                color="white"
+              />
+            }
+            rightIcon={<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>
     </>
   );
 }

app/(application)/admin/super-admin/[id]/index.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import {
+  apiAdminUserAccessGetById,
+  apiAdminUserAccessUpdateStatus,
+} from "@/service/api-admin/api-admin-user-access";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function SuperAdminDetail() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [loadData, setLoadData] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminUserAccessGetById({ id: id as string });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminUserAccessUpdateStatus({
+        id: id as string,
+        role: data?.masterUserRoleId === "2" ? "user" : "admin",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Update role gagal",
+        });
+        return;
+      }
+      Toast.show({
+        type: "success",
+        text1: "Update role berhasil ",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE STATUS]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
+        footerComponent={
+          data && (
+            <BoxButtonOnFooter>
+              <ButtonCustom
+                isLoading={isLoading}
+                backgroundColor={
+                  data?.masterUserRoleId === "2" ? "red" : "green"
+                }
+                textColor={"white"}
+                onPress={handlerSubmit}
+              >
+                {data?.masterUserRoleId === "2"
+                  ? "Hapus akses admin"
+                  : "Tambah sebagai admin"}
+              </ButtonCustom>
+            </BoxButtonOnFooter>
+          )
+        }
+      >
+        {loadData ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            {listData(data && data)?.map((item: any, index: number) => (
+              <GridTwoView
+                key={index}
+                spanLeft={4}
+                spanRight={8}
+                leftIcon={<TextCustom bold>{item?.label}</TextCustom>}
+                rightIcon={<TextCustom>{item?.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        )}
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = (data: any) => [
+  {
+    label: "Username",
+    value: (data && data?.username) || "-",
+  },
+  {
+    label: "Role",
+    value: data && data?.masterUserRoleId === "2" ? "Admin" : "User",
+  },
+  {
+    label: "Nomor",
+    value: (data && `+${data?.nomor}`) || "-",
+  },
+];

app/(application)/admin/super-admin/index.tsx

@@ -0,0 +1,148 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  CenterCustom,
+  Divider,
+  SearchInput,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
+import { Ionicons } from "@expo/vector-icons";
+
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function SuperAdmin_ListUser() {
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [search])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminUserAccessGetAll({
+        search: search,
+        category: "all-role",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    }
+  };
+
+  const rightComponent = () => {
+    return (
+      <>
+        <SearchInput
+          containerStyle={{ width: "100%", marginBottom: 0 }}
+          placeholder="Cari Username"
+          onChangeText={(text) => setSearch(text)}
+        />
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title={"Super Admin"}
+            rightComponent={rightComponent()}
+          />
+        }
+      >
+        <GridViewCustomSpan
+          span1={2}
+          span2={5}
+          span3={5}
+          component1={
+            <TextCustom align="center" bold>
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom align="center" bold>
+              Username
+            </TextCustom>
+          }
+          component3={
+            <TextCustom align="center" bold>
+              Role
+            </TextCustom>
+          }
+        />
+
+        <Divider />
+
+        <StackCustom>
+          {_.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray" size={"small"}>
+              Tidak ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item: any, index: number) => (
+              <GridViewCustomSpan
+                key={index}
+                span1={2}
+                span2={5}
+                span3={5}
+                component1={
+                  <CenterCustom>
+                    <Ionicons
+                      onPress={() =>
+                        router.push(`/admin/super-admin/${item?.id}`)
+                      }
+                      name="open"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.yellow}
+                    />
+                  </CenterCustom>
+
+                  // <ButtonCustom
+                  //   onPress={() =>
+                  //     router.push(`/admin/super-admin/${item?.id}`)
+                  //   }
+                  // >
+                  //   Detail
+                  // </ButtonCustom>
+                }
+                component2={
+                  <TextCustom bold truncate>
+                    {item?.username || "-"}
+                  </TextCustom>
+                }
+                component3={
+                  <CenterCustom>
+                    {item?.masterUserRoleId === "2" ? (
+                      <BadgeCustom color={AccentColor.blue}>Admin</BadgeCustom>
+                    ) : (
+                      <BadgeCustom color={AccentColor.softblue}>
+                        User
+                      </BadgeCustom>
+                    )}
+                  </CenterCustom>
+                }
+                style3={{ alignItems: "center", justifyContent: "center" }}
+              />
+            ))
+          )}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/user-access.tsx

@@ -1,117 +0,0 @@
-import {
-    ButtonCustom,
-    Divider,
-    Grid,
-    SearchInput,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
-import { Ionicons } from "@expo/vector-icons";
-
-export default function AdminUserAccess() {
-  const rightComponent = () => {
-    return (
-      <>
-        <SearchInput
-          containerStyle={{ width: "100%", marginBottom: 0 }}
-          placeholder="Cari User"
-        />
-      </>
-    );
-  };
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminComp_BoxTitle
-            title="User Access"
-            rightComponent={rightComponent()}
-          />
-        }
-      >
-        <Grid>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Aksi</TextCustom>
-          </Grid.Col>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Username</TextCustom>
-          </Grid.Col>
-          <Grid.Col span={4} style={{ alignItems: "center" }}>
-            <TextCustom bold>Nomor</TextCustom>
-          </Grid.Col>
-        </Grid>
-
-        <Divider />
-
-        <StackCustom>
-          {Array.from({ length: 10 }).map((_, index) => (
-            <Grid key={index}>
-              <Grid.Col
-                span={4}
-                style={{
-                  alignItems: "center",
-                  paddingLeft: 5,
-                  paddingRight: 5,
-                }}
-              >
-                <TextCustom bold>
-                  <ButtonCustom
-                    iconLeft={
-                      <Ionicons
-                        name={
-                          index % 2 === 0
-                            ? "checkmark-outline"
-                            : "close-circle-outline"
-                        }
-                        size={ICON_SIZE_MEDIUM}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {}}
-                    backgroundColor={
-                      index % 2 === 0 ? MainColor.green : MainColor.red
-                    }
-                  >
-                    <TextCustom size={"small"} color={"black"}>
-                      {index % 2 === 0 ? "Berikan Akses" : "Hapus Akses"}
-                    </TextCustom>
-                  </ButtonCustom>
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col
-                span={4}
-                style={{
-                  alignItems: "center",
-                  justifyContent: "center",
-                  paddingLeft: 5,
-                  paddingRight: 5,
-                }}
-              >
-                <TextCustom bold truncate>
-                  Useraname
-                </TextCustom>
-              </Grid.Col>
-              <Grid.Col
-                span={4}
-                style={{
-                  alignItems: "center",
-                  justifyContent: "center",
-                  paddingLeft: 5,
-                  paddingRight: 5,
-                }}
-              >
-                <TextCustom bold truncate>
-                  08123456789
-                </TextCustom>
-              </Grid.Col>
-            </Grid>
-          ))}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/admin/user-access/[id]/index.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import {
+  apiAdminUserAccessGetById,
+  apiAdminUserAccessUpdateStatus,
+} from "@/service/api-admin/api-admin-user-access";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function AdminUserAccessDetail() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [loadData, setLoadData] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminUserAccessGetById({ id: id as string });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  const handlerSubmit = async () => {
+    try {
+      setLoading(true);
+      const response = await apiAdminUserAccessUpdateStatus({
+        id: id as string,
+        active: !data?.active,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Update aktifasi gagal",
+        });
+        return;
+      }
+      Toast.show({
+        type: "success",
+        text1: "Update aktifasi berhasil ",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE STATUS]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
+        footerComponent={
+          data && (
+            <BoxButtonOnFooter>
+              <ButtonCustom
+                isLoading={isLoading}
+                backgroundColor={data?.active ? "red" : "green"}
+                textColor={"white"}
+                onPress={handlerSubmit}
+              >
+                {data?.active ? "Hapus Akses" : "Berikan Akses"}
+              </ButtonCustom>
+            </BoxButtonOnFooter>
+          )
+        }
+      >
+        {loadData ? (
+          <LoaderCustom />
+        ) : (
+          <StackCustom>
+            {listData(data && data)?.map((item: any, index: number) => (
+              <GridTwoView
+                key={index}
+                spanLeft={4}
+                spanRight={8}
+                leftIcon={<TextCustom bold>{item?.label}</TextCustom>}
+                rightIcon={<TextCustom>{item?.value}</TextCustom>}
+              />
+            ))}
+          </StackCustom>
+        )}
+      </ViewWrapper>
+    </>
+  );
+}
+
+const listData = (data: any) => [
+  {
+    label: "Username",
+    value: (data && data?.username) || "-",
+  },
+  {
+    label: "Aktivasi",
+    value: data && data?.active ? "Aktif" : "Tidak Aktif",
+  },
+  {
+    label: "Nomor",
+    value: (data && `+${data?.nomor}`) || "-",
+  },
+];

app/(application)/admin/user-access/index.tsx

@@ -0,0 +1,143 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  CenterCustom,
+  Divider,
+  SearchInput,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
+import { Ionicons } from "@expo/vector-icons";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function AdminUserAccess() {
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [search])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminUserAccessGetAll({
+        search: search,
+        category: "only-user",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR LOAD DATA]", error);
+    }
+  };
+
+  const rightComponent = () => {
+    return (
+      <>
+        <SearchInput
+          containerStyle={{ width: "100%", marginBottom: 0 }}
+          placeholder="Cari User"
+          onChangeText={(text) => setSearch(text)}
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminComp_BoxTitle
+            title="User Access"
+            rightComponent={rightComponent()}
+          />
+        }
+      >
+        <GridViewCustomSpan
+          span1={2}
+          span2={5}
+          span3={5}
+          component1={
+            <TextCustom align="center" bold>
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom align="center" bold>
+              Username
+            </TextCustom>
+          }
+          component3={
+            <TextCustom align="center" bold>
+              Status Akses
+            </TextCustom>
+          }
+        />
+
+        <Divider />
+
+        <StackCustom>
+          {_.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray" size={"small"}>
+              Tidak ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item: any, index: number) => (
+              <GridViewCustomSpan
+                key={index}
+                span1={2}
+                span2={5}
+                span3={5}
+                component1={
+                  <CenterCustom>
+                    <Ionicons
+                      onPress={() =>
+                        router.push(`/admin/user-access/${item?.id}`)
+                      }
+                      name="open"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.yellow}
+                    />
+                  </CenterCustom>
+                  // <ButtonCustom
+                  //   onPress={() =>
+                  //     router.push(`/admin/user-access/${item?.id}`)
+                  //   }
+                  // >
+                  //   Detail
+                  // </ButtonCustom>
+                }
+                component2={
+                  <TextCustom bold truncate>
+                    {item?.username || "-"}
+                  </TextCustom>
+                }
+                component3={
+                  <CenterCustom>
+                    {item?.active ? (
+                      <BadgeCustom color="green">Aktif</BadgeCustom>
+                    ) : (
+                      <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
+                    )}
+                  </CenterCustom>
+                }
+                style3={{ alignItems: "center", justifyContent: "center" }}
+              />
+            ))
+          )}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/coba/screen-upload.tsx

@@ -1,13 +1,13 @@
 import {
-  AvatarCustom,
-  BoxButtonOnFooter,
-  ButtonCustom,
-  StackCustom,
-  ViewWrapper,
+    AvatarCustom,
+    BoxButtonOnFooter,
+    ButtonCustom,
+    StackCustom,
+    ViewWrapper,
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
-import { uploadImageService } from "@/service/upload-service";
+import { uploadFileService } from "@/service/upload-service";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router } from "expo-router";
 import { useState } from "react";
@@ -21,7 +21,7 @@ export default function ScreenUpload() {
   async function onUpload() {
     setIsLoading(true);
     try {
-      const response = await uploadImageService({
+      const response = await uploadFileService({
         imageUri,
         dirId: DIRECTORY_ID.profile_foto,
       });

bun.lock

@@ -23,7 +23,7 @@
         "expo-constants": "~18.0.8",
         "expo-dev-client": "~6.0.12",
         "expo-document-picker": "~14.0.7",
-        "expo-file-system": "~19.0.12",
+        "expo-file-system": "^19.0.15",
         "expo-font": "~14.0.8",
         "expo-haptics": "~15.0.7",
         "expo-image": "~3.0.8",
@@ -42,6 +42,7 @@
         "react-native-dotenv": "^3.4.11",
         "react-native-gesture-handler": "~2.28.0",
         "react-native-international-phone-number": "^0.9.3",
+        "react-native-keyboard-controller": "^1.18.6",
         "react-native-maps": "1.20.1",
         "react-native-otp-entry": "^1.8.5",
         "react-native-pager-view": "6.9.1",
@@ -1170,7 +1171,7 @@
 
     "expo-document-picker": ["expo-document-picker@14.0.7", "", { "peerDependencies": { "expo": "*" } }, "sha512-81Jh8RDD0GYBUoSTmIBq30hXXjmkDV1ZY2BNIp1+3HR5PDSh2WmdhD/Ezz5YFsv46hIXHsQc+Kh1q8vn6OLT9Q=="],
 
-    "expo-file-system": ["expo-file-system@19.0.12", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-gqpxpnjfhzXLcqMOi49isB5S1Af49P9410fsaFfnLZWN3X6Dwc8EplDwbaolOI/wnGwP81P+/nDn5RNmU6m7mQ=="],
+    "expo-file-system": ["expo-file-system@19.0.15", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-sRLW+3PVJDiuoCE2LuteHhC7OxPjh1cfqLylf1YG1TDEbbQXnzwjfsKeRm6dslEPZLkMWfSLYIrVbnuq5mF7kQ=="],
 
     "expo-font": ["expo-font@14.0.8", "", { "dependencies": { "fontfaceobserver": "^2.1.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-bTUHaJWRZ7ywP8dg3f+wfOwv6RwMV3mWT2CDUIhsK70GjNGlCtiWOCoHsA5Od/esPaVxqc37cCBvQGQRFStRlA=="],
 
@@ -1876,6 +1877,8 @@
 
     "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.2.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q=="],
 
+    "react-native-keyboard-controller": ["react-native-keyboard-controller@1.18.6", "", { "dependencies": { "react-native-is-edge-to-edge": "^1.2.1" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-reanimated": ">=3.0.0" } }, "sha512-K/RMw3MdtuykkACFN5d9RTapAcO0v4T34gmSyHkEraU5UsX+fxEHd6j4MvL7KUihvmLLod0NV/mQC0nL4cOurw=="],
+
     "react-native-maps": ["react-native-maps@1.20.1", "", { "dependencies": { "@types/geojson": "^7946.0.13" }, "peerDependencies": { "react": ">= 17.0.1", "react-native": ">= 0.64.3", "react-native-web": ">= 0.11" }, "optionalPeers": ["react-native-web"] }, "sha512-NZI3B5Z6kxAb8gzb2Wxzu/+P2SlFIg1waHGIpQmazDSCRkNoHNY4g96g+xS0QPSaG/9xRBbDNnd2f2/OW6t6LQ=="],
 
     "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],
@@ -2564,6 +2567,8 @@
 
     "expo/babel-preset-expo": ["babel-preset-expo@54.0.0", "", { "dependencies": { "@babel/helper-module-imports": "^7.25.9", "@babel/plugin-proposal-decorators": "^7.12.9", "@babel/plugin-proposal-export-default-from": "^7.24.7", "@babel/plugin-syntax-export-default-from": "^7.24.7", "@babel/plugin-transform-class-static-block": "^7.27.1", "@babel/plugin-transform-export-namespace-from": "^7.25.9", "@babel/plugin-transform-flow-strip-types": "^7.25.2", "@babel/plugin-transform-modules-commonjs": "^7.24.8", "@babel/plugin-transform-object-rest-spread": "^7.24.7", "@babel/plugin-transform-parameters": "^7.24.7", "@babel/plugin-transform-private-methods": "^7.24.7", "@babel/plugin-transform-private-property-in-object": "^7.24.7", "@babel/plugin-transform-runtime": "^7.24.7", "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.0", "@react-native/babel-preset": "0.81.4", "babel-plugin-react-compiler": "^19.1.0-rc.2", "babel-plugin-react-native-web": "~0.21.0", "babel-plugin-syntax-hermes-parser": "^0.25.1", "babel-plugin-transform-flow-enums": "^0.0.2", "debug": "^4.3.4", "resolve-from": "^5.0.0" }, "peerDependencies": { "@babel/runtime": "^7.20.0", "expo": "*", "react-refresh": ">=0.14.0 <1.0.0" }, "optionalPeers": ["@babel/runtime", "expo"] }, "sha512-a0Ej4ik6xzvtrA4Ivblov3XVvfntIoqnXOy2jG2k/3hzWqzrJxKyY2gUW9ZCMAicGevj2ju28q+TsK29uTe0eQ=="],
 
+    "expo/expo-file-system": ["expo-file-system@19.0.12", "", { "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-gqpxpnjfhzXLcqMOi49isB5S1Af49P9410fsaFfnLZWN3X6Dwc8EplDwbaolOI/wnGwP81P+/nDn5RNmU6m7mQ=="],
+
     "expo-module-scripts/typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
 
     "expo-modules-autolinking/commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],