diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 8019694..1270427 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -449,7 +449,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: () => (
diff --git a/app/(application)/(user)/donation/(tabs)/index.tsx b/app/(application)/(user)/donation/(tabs)/index.tsx
index 0e7f85e..5d843a1 100644
--- a/app/(application)/(user)/donation/(tabs)/index.tsx
+++ b/app/(application)/(user)/donation/(tabs)/index.tsx
@@ -23,7 +23,9 @@ export default function DonationBeranda() {
   const onLoadData = async () => {
     try {
       setLoadList(true);
-      const response = await apiDonationGetAll();
+      const response = await apiDonationGetAll({
+        category: "beranda"
+      });
       console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
 
       setList(response.data);
@@ -44,7 +46,7 @@ export default function DonationBeranda() {
       {loadList ? (
         <LoaderCustom />
       ) : _.isEmpty(list) ? (
-        <TextCustom>Belum ada data</TextCustom>
+        <TextCustom align="center" color="gray">Belum ada donasi</TextCustom>
       ) : (
         list?.map((item: any, index: number) => (
           <Donation_BoxPublish data={item} key={index} id={item.id} />
diff --git a/app/(application)/(user)/donation/(tabs)/my-donation.tsx b/app/(application)/(user)/donation/(tabs)/my-donation.tsx
index b1cc12a..34697aa 100644
--- a/app/(application)/(user)/donation/(tabs)/my-donation.tsx
+++ b/app/(application)/(user)/donation/(tabs)/my-donation.tsx
@@ -3,74 +3,124 @@ import {
   BaseBox,
   DummyLandscapeImage,
   Grid,
+  LoaderCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatusTransaction } from "@/lib/dummy-data/_master/status-transaction";
-import { router } from "expo-router";
+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();
+    }, [])
+  );
+
+  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 handlePress = ({
+    invoiceId,
+    donationId,
+    status,
+  }: {
+    invoiceId: string;
+    donationId: string;
+    status: string;
+  }) => {
+    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}/invoice`;
+    if (status === "menunggu") {
+      router.push(url);
+    } else if (status === "proses") {
+      router.push(url);
+    } else if (status === "berhasil") {
+      router.push(url);
+    } else if (status === "gagal") {
+      router.push(url);
     }
   };
 
   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={item.color} fullWidth>
+                    {item.statusInvoice}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/failed.tsx b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx
similarity index 100%
rename from app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/failed.tsx
rename to app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/failed.tsx
diff --git a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
similarity index 91%
rename from app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx
rename to app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
index 51d723e..9a973af 100644
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/invoice.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/invoice.tsx
@@ -13,12 +13,15 @@ import { MainColor } from "@/constants/color-palet";
 import { router, useLocalSearchParams } from "expo-router";
 
 export default function DonationInvoice() {
-  const { id, transaction } = useLocalSearchParams();
+  const { invoiceId } = useLocalSearchParams();
+  console.log("invoiceId", invoiceId);
   return (
     <>
       <ViewWrapper>
         <StackCustom>
-          <InformationBox text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${transaction}`} />
+          <InformationBox
+            text={`Mohon transfer donasi anda ke rekening dibawah dengan Id: ${invoiceId}`}
+          />
           <BaseBox>
             <StackCustom gap={"xs"}>
               <TextCustom>Nama BANK</TextCustom>
@@ -97,7 +100,7 @@ export default function DonationInvoice() {
 
           <ButtonCustom
             onPress={() => {
-              router.push(`/donation/${id}/(transaction-flow)/process`);
+              router.push(`/donation/${invoiceId}/(transaction-flow)/process`);
             }}
           >
             Saya Sudah Transfer
diff --git a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/process.tsx b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx
similarity index 100%
rename from app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/process.tsx
rename to app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/process.tsx
diff --git a/app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/success.tsx b/app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx
similarity index 100%
rename from app/(application)/(user)/donation/[id]/(transaction-flow)/[transaction]/success.tsx
rename to app/(application)/(user)/donation/[id]/(transaction-flow)/[invoiceId]/success.tsx
diff --git a/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx b/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
index 1af686a..4a40b3d 100644
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx
@@ -9,15 +9,44 @@ 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 {
+      console.log("jumlah", nominal);
+      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 +56,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">
@@ -51,6 +80,8 @@ export default function InvestmentInputDonation() {
             label="Nominal lainnya"
             placeholder="0"
             iconLeft="Rp."
+            value={displayJumlah}
+            onChangeText={(value) => handleChangeCurrency(value)}
           />
           <TextCustom size="small" color="gray">
             Minimal donasi Rp. 10.000
diff --git a/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx b/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
index 4564373..aee0b52 100644
--- a/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
+++ b/app/(application)/(user)/donation/[id]/(transaction-flow)/select-bank.tsx
@@ -5,24 +5,93 @@ import {
   ViewWrapper,
 } from "@/components";
 import { RadioCustom, RadioGroup } from "@/components/Radio/RadioCustom";
+import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
-import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+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, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
 
 export default function DonationSelectBank() {
-  const { id, transaction } = useLocalSearchParams();
-  const [value, setValue] = useState<any | number>("");
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+
+  console.log("id", id);
+  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,
+        };
+
+        console.log("[NEW DATA]", newData);
+
+        const response = await apiDonationCreateInvoice({
+          id: id as string,
+          data: newData,
+        });
+        console.log("[RESPONSE CREATE>>]", response);
+
+        if (response.success) {
+          const invoiceId = response.data.id;
+
+          const delStorage = await AsyncStorage.removeItem(
+            LOCAL_STORAGE_KEY.transactionDonation
+          );
+
+          console.log("[DEL STORAGE]", delStorage);
+          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 +101,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>
   );
diff --git a/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx b/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
index 0fa3da8..43fc02b 100644
--- a/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
+++ b/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
@@ -1,15 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   AvatarComp,
-  AvatarCustom,
   BaseBox,
   ButtonCustom,
-  CenterCustom,
   Grid,
   LoaderCustom,
   Spacing,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
 import { apiDonationFundrising } from "@/service/api-client/api-donation";
diff --git a/service/api-client/api-donation.ts b/service/api-client/api-donation.ts
index c9e98cc..7023b50 100644
--- a/service/api-client/api-donation.ts
+++ b/service/api-client/api-donation.ts
@@ -103,20 +103,63 @@ export async function apiDonationUpdateData({
   }
 }
 
-export async function apiDonationGetAll() {
+export async function apiDonationGetAll({
+  category,
+  authorId,
+}: {
+  category: "beranda" | "my-donation";
+  authorId?: string;
+}) {
+    const authorQuery = authorId ? `&authorId=${authorId}` : "";
   try {
-    const response = await apiConfig.get(`/mobile/donation`);
+    const response = await apiConfig.get(
+      `/mobile/donation?category=${category}${authorQuery}`
+    );
     return response.data;
   } catch (error) {
     throw error;
   }
 }
 
-export async function apiDonationFundrising({id}: {id: string}) {
-    try {
-        const response = await apiConfig.get(`/mobile/donation/${id}/fundrising`);
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
+export async function apiDonationFundrising({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/donation/${id}/fundrising`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiDonationCreateDonatur({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/donation/${id}/donatur`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiDonationCreateInvoice({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/donation/${id}/invoice`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
 }