From d437365b5e1885cc77ad79771632a594a91fe729 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Mon, 4 Aug 2025 11:28:21 +0800
Subject: [PATCH] Donation Add: - screens/Donation/ - donation/[id]/

Fix:
- donation/(tabs)/status.tsx
- donation/create-story.tsx
- donation/create.tsx

## No Issue
---
 app/(application)/(user)/_layout.tsx          |  30 +++++
 .../(user)/donation/(tabs)/status.tsx         |  48 +------
 .../(user)/donation/[id]/[status]/detail.tsx  |  86 +++++++++++++
 .../(user)/donation/[id]/edit-rekening.tsx    |  32 +++++
 .../(user)/donation/[id]/edit-story.tsx       |  56 ++++++++
 .../(user)/donation/[id]/edit.tsx             |  79 ++++++++++++
 .../(user)/donation/[id]/index.tsx            |   9 ++
 .../(user)/donation/create-story.tsx          |   7 +-
 app/(application)/(user)/donation/create.tsx  |  31 +++--
 .../_ShareComponent/DummyLandscapeImage.tsx   |   6 +-
 screens/Donation/BoxStatus.tsx                |  50 ++++++++
 screens/Donation/ButtonStatusSection.tsx      | 121 ++++++++++++++++++
 screens/Donation/ComponentBoxDetailData.tsx   |  46 +++++++
 screens/Donation/ComponentStoryFunrising.tsx  |  38 ++++++
 14 files changed, 583 insertions(+), 56 deletions(-)
 create mode 100644 app/(application)/(user)/donation/[id]/[status]/detail.tsx
 create mode 100644 app/(application)/(user)/donation/[id]/edit-rekening.tsx
 create mode 100644 app/(application)/(user)/donation/[id]/edit-story.tsx
 create mode 100644 app/(application)/(user)/donation/[id]/edit.tsx
 create mode 100644 app/(application)/(user)/donation/[id]/index.tsx
 create mode 100644 screens/Donation/BoxStatus.tsx
 create mode 100644 screens/Donation/ButtonStatusSection.tsx
 create mode 100644 screens/Donation/ComponentBoxDetailData.tsx
 create mode 100644 screens/Donation/ComponentStoryFunrising.tsx

diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 1f557d5..f912b2b 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -362,6 +362,36 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="donation/[id]/index"
+          options={{
+            title: "Detail Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit"
+          options={{
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit-story"
+          options={{
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/edit-rekening"
+          options={{
+            title: "Edit Rekening",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        
+        
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}
diff --git a/app/(application)/(user)/donation/(tabs)/status.tsx b/app/(application)/(user)/donation/(tabs)/status.tsx
index 7fd35ad..0bd0bfd 100644
--- a/app/(application)/(user)/donation/(tabs)/status.tsx
+++ b/app/(application)/(user)/donation/(tabs)/status.tsx
@@ -1,15 +1,7 @@
-import {
-  Grid,
-  BaseBox,
-  DummyLandscapeImage,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
+import { ScrollableCustom, ViewWrapper } from "@/components";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function DonationStatus() {
   const [activeCategory, setActiveCategory] = useState<string | null>(
@@ -35,39 +27,11 @@ export default function DonationStatus() {
   return (
     <ViewWrapper hideFooter headerComponent={scrollComponent}>
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox
+        <Donasi_BoxStatus
           key={index}
-          paddingTop={7}
-          paddingBottom={7}
-          href={`/investment/${index}`}
-        >
-          <Grid>
-            <Grid.Col span={5}>
-              <DummyLandscapeImage height={100} />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <StackCustom>
-                <TextCustom truncate>
-                  Judul Donasi: {activeCategory} Lorem ipsum dolor sit amet
-                  consectetur adipisicing elit.
-                </TextCustom>
-
-                <View>
-                  <TextCustom>Target Dana</TextCustom>
-                  <TextCustom bold color="yellow">
-                    Rp. 7.500.000
-                  </TextCustom>
-                </View>
-                {/* <TextCustom>
-                 Terkumpul : Rp 300.000
-                </TextCustom> */}
-              </StackCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
+          id={index.toString()}
+          status={activeCategory as string}
+        />
       ))}
     </ViewWrapper>
   );
diff --git a/app/(application)/(user)/donation/[id]/[status]/detail.tsx b/app/(application)/(user)/donation/[id]/[status]/detail.tsx
new file mode 100644
index 0000000..bcf6f2c
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/[status]/detail.tsx
@@ -0,0 +1,86 @@
+import {
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
+import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
+import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
+import { FontAwesome6 } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+
+export default function DonasiDetailStatus() {
+  const { id, status } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handlePress = (item: IMenuDrawerItem) => {
+    console.log("PATH ", item.path);
+    router.navigate(item.path as any);
+    setOpenDrawer(false);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
+        }}
+      />
+      <ViewWrapper>
+        <Donation_ComponentBoxDetailData />
+        <Donation_ComponentStoryFunrising />
+        <Spacing />
+        <Donation_ButtonStatusSection status={status as string} />
+        <Spacing />
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Donasi",
+              path: `/donation/${id}/edit`,
+            },
+            {
+              icon: <IconEdit />,
+              label: "Edit Cerita Penggalang",
+              path: `/donation/${id}/edit-story`,
+            },
+            {
+              icon: (
+                <FontAwesome6
+                  name="credit-card"
+                  color={MainColor.white}
+                  size={ICON_SIZE_SMALL}
+                />
+              ),
+              label: "Edit Rekening",
+              path: `/donation/${id}/edit-rekening`,
+            },
+          ]}
+          columns={4}
+          onPressItem={handlePress as any}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/donation/[id]/edit-rekening.tsx b/app/(application)/(user)/donation/[id]/edit-rekening.tsx
new file mode 100644
index 0000000..915a7b9
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/edit-rekening.tsx
@@ -0,0 +1,32 @@
+import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditRekening() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
+        <TextInputCustom
+          label="Nama Bank"
+          placeholder="Masukkan nama bank"
+          required
+        />
+        <TextInputCustom
+          label="Nomor Rekening"
+          placeholder="Masukkan nomor rekening"
+          required
+        />
+
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}
\ No newline at end of file
diff --git a/app/(application)/(user)/donation/[id]/edit-story.tsx b/app/(application)/(user)/donation/[id]/edit-story.tsx
new file mode 100644
index 0000000..d21bfad
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/edit-story.tsx
@@ -0,0 +1,56 @@
+import {
+    ButtonCenteredOnly,
+    ButtonCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    ViewWrapper
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditStory() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
+        <TextAreaCustom
+          label="Pembukaan Cerita"
+          placeholder="Masukkan pembukaan cerita"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextAreaCustom
+          label="Tujuan Donasi"
+          placeholder="Masukkan tujuan donasi"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <Spacing height={40} />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/donation/[id]/edit.tsx b/app/(application)/(user)/donation/[id]/edit.tsx
new file mode 100644
index 0000000..7856b6b
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/edit.tsx
@@ -0,0 +1,79 @@
+import {
+    ButtonCenteredOnly,
+    ButtonCustom,
+    InformationBox,
+    LandscapeFrameUploaded,
+    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";
+
+export default function DonationEdit() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+
+        <TextInputCustom
+          label="Judul Donasi"
+          placeholder="Masukkan Judul Donasi"
+          required
+        />
+        <TextInputCustom
+          label="Target Donasi"
+          placeholder="Masukkan Target Donasi"
+          required
+          keyboardType="numeric"
+        />
+
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </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
+        />
+
+        <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 />
+    </ViewWrapper>
+  );
+}
diff --git a/app/(application)/(user)/donation/[id]/index.tsx b/app/(application)/(user)/donation/[id]/index.tsx
new file mode 100644
index 0000000..4d7a487
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -0,0 +1,9 @@
+import { TextCustom } from "@/components";
+
+export default function DonasiBeranda() {
+  return (
+    <>
+      <TextCustom>Detail Donasi</TextCustom>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/donation/create-story.tsx b/app/(application)/(user)/donation/create-story.tsx
index ffc7d6d..ded0208 100644
--- a/app/(application)/(user)/donation/create-story.tsx
+++ b/app/(application)/(user)/donation/create-story.tsx
@@ -32,7 +32,12 @@ export default function DonationCreateStory() {
         />
 
         <LandscapeFrameUploaded />
-        <ButtonCenteredOnly onPress={() => {}} icon="upload">
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
           Upload
         </ButtonCenteredOnly>
 
diff --git a/app/(application)/(user)/donation/create.tsx b/app/(application)/(user)/donation/create.tsx
index 98f95d7..998ceeb 100644
--- a/app/(application)/(user)/donation/create.tsx
+++ b/app/(application)/(user)/donation/create.tsx
@@ -7,7 +7,7 @@ import {
   Spacing,
   StackCustom,
   TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
 import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
@@ -31,6 +31,17 @@ export default function DonationCreate() {
           keyboardType="numeric"
         />
 
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+
         <SelectCustom
           data={dummyDonasiKategori.map((item) => ({
             label: item.label,
@@ -52,17 +63,15 @@ export default function DonationCreate() {
           placeholder="Pilih Durasi Donasi"
           required
         />
-
-        <LandscapeFrameUploaded />
-        <ButtonCenteredOnly onPress={() => {
-          router.push("/(application)/(image)/take-picture/123")
-        }} icon="upload">
-          Upload
-        </ButtonCenteredOnly>
         <Spacing />
-        <ButtonCustom onPress={() => {
-          router.push("/donation/create-story")
-        }}>Selanjutnya</ButtonCustom>
+        <ButtonCustom
+          onPress={() => {
+            router.push("/donation/create-story");
+          }}
+        >
+          Selanjutnya
+        </ButtonCustom>
+        <Spacing />
       </StackCustom>
       <Spacing />
     </ViewWrapper>
diff --git a/components/_ShareComponent/DummyLandscapeImage.tsx b/components/_ShareComponent/DummyLandscapeImage.tsx
index 6a5cc38..d4ee613 100644
--- a/components/_ShareComponent/DummyLandscapeImage.tsx
+++ b/components/_ShareComponent/DummyLandscapeImage.tsx
@@ -5,11 +5,13 @@ import { StyleSheet } from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import { router } from "expo-router";
 
-export default function DummyLandscapeImage({height}: {height?: number}) {
+export default function DummyLandscapeImage({height, unClickPath}: {height?: number, unClickPath?: boolean}) {
   return (
     <ClickableCustom
       onPress={() => {
-        router.push("/(application)/(image)/preview-image/1");
+        if (!unClickPath) {
+          router.push("/(application)/(image)/preview-image/1");
+        }
       }}
     >
       <Image source={DUMMY_IMAGE.background} style={[styles.backgroundImage, {height: height || 200}]} />
diff --git a/screens/Donation/BoxStatus.tsx b/screens/Donation/BoxStatus.tsx
new file mode 100644
index 0000000..74e0ccb
--- /dev/null
+++ b/screens/Donation/BoxStatus.tsx
@@ -0,0 +1,50 @@
+import {
+  BaseBox,
+  Grid,
+  DummyLandscapeImage,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { View } from "react-native";
+
+export default function Donasi_BoxStatus({
+  id,
+  status,
+}: {
+  id: string;
+  status: string;
+}) {
+  return (
+    <>
+      <BaseBox
+        paddingTop={7}
+        paddingBottom={7}
+        href={`/donation/${id}/${status}/detail`}
+      >
+        <Grid>
+          <Grid.Col span={5}>
+            <DummyLandscapeImage unClickPath height={100} />
+          </Grid.Col>
+          <Grid.Col span={1}>
+            <View />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <StackCustom>
+              <TextCustom truncate>
+                Judul Donasi: {status} Lorem ipsum dolor sit amet consectetur
+                adipisicing elit.
+              </TextCustom>
+
+              <View>
+                <TextCustom>Target Dana</TextCustom>
+                <TextCustom bold color="yellow">
+                  Rp. 7.500.000
+                </TextCustom>
+              </View>
+            </StackCustom>
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}
diff --git a/screens/Donation/ButtonStatusSection.tsx b/screens/Donation/ButtonStatusSection.tsx
new file mode 100644
index 0000000..f8d40b2
--- /dev/null
+++ b/screens/Donation/ButtonStatusSection.tsx
@@ -0,0 +1,121 @@
+import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
+import { router } from "expo-router";
+
+export default function Donation_ButtonStatusSection({
+  status,
+}: {
+  status: string;
+}) {
+  const handleBatalkanReview = () => {
+    AlertDefaultSystem({
+      title: "Batalkan Review",
+      message: "Apakah Anda yakin ingin batalkan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleAjukanReview = () => {
+    AlertDefaultSystem({
+      title: "Ajukan Review",
+      message: "Apakah Anda yakin ingin ajukan review ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleEditKembali = () => {
+    AlertDefaultSystem({
+      title: "Edit Kembali",
+      message: "Apakah Anda yakin ingin edit kembali ini?",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const handleOpenDeleteAlert = () => {
+    AlertDefaultSystem({
+      title: "Hapus",
+      message: "Apakah Anda yakin ingin menghapus data ini?",
+      textLeft: "Batal",
+      textRight: "Hapus",
+      onPressRight: () => {
+        console.log("Hapus");
+        router.back();
+      },
+    });
+  };
+
+  const DeleteButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          backgroundColor="red"
+          textColor="white"
+          onPress={handleOpenDeleteAlert}
+        >
+          Hapus
+        </ButtonCustom>
+      </>
+    );
+  };
+
+  switch (status) {
+    case "publish":
+      return <></>;
+
+    case "review":
+      return (
+        <ButtonCustom onPress={handleBatalkanReview}>
+          Batalkan Review
+        </ButtonCustom>
+      );
+
+    case "draft":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleAjukanReview}>
+                Ajukan Review
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
+            </Grid.Col>
+          </Grid>
+        </>
+      );
+
+    case "reject":
+      return (
+        <>
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom onPress={handleEditKembali}>
+                Edit Kembali
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              {DeleteButton()}
+            </Grid.Col>
+          </Grid>
+        </>
+      );
+
+    default:
+      return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
+  }
+}
diff --git a/screens/Donation/ComponentBoxDetailData.tsx b/screens/Donation/ComponentBoxDetailData.tsx
new file mode 100644
index 0000000..9011048
--- /dev/null
+++ b/screens/Donation/ComponentBoxDetailData.tsx
@@ -0,0 +1,46 @@
+import {
+  BaseBox,
+  StackCustom,
+  DummyLandscapeImage,
+  TextCustom,
+  Grid,
+} from "@/components";
+import { View } from "react-native";
+
+export default function Donation_ComponentBoxDetailData() {
+  return (
+    <>
+      <BaseBox>
+        <StackCustom>
+          <DummyLandscapeImage />
+          <View>
+            <TextCustom bold size="large">
+              Judul Donasi: Lorem, ipsum dolor sit amet consectetur adipisicing
+              elit.
+            </TextCustom>
+            <TextCustom size="small">Durasi: 30 hari</TextCustom>
+          </View>
+
+          <Grid>
+            <Grid.Col span={6}>
+              <View>
+                <TextCustom size="small">Target Dana</TextCustom>
+                <TextCustom truncate={2} size="large" bold color="yellow">
+                  Rp. 7.500.000
+                </TextCustom>
+              </View>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <View>
+                <TextCustom size="small">Kategori</TextCustom>
+                <TextCustom size="large" bold color="yellow">
+                  Kegiatan Sosial
+                </TextCustom>
+              </View>
+            </Grid.Col>
+          </Grid>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}
diff --git a/screens/Donation/ComponentStoryFunrising.tsx b/screens/Donation/ComponentStoryFunrising.tsx
new file mode 100644
index 0000000..0232411
--- /dev/null
+++ b/screens/Donation/ComponentStoryFunrising.tsx
@@ -0,0 +1,38 @@
+import { BaseBox, StackCustom, Grid, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function Donation_ComponentStoryFunrising() {
+    return (
+      <>
+        <BaseBox>
+          <StackCustom gap={"xs"}>
+            <Grid>
+              <Grid.Col span={10}>
+                <TextCustom bold size="large">
+                  Cerita Penggalang Dana
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col span={2}>
+                <Ionicons
+                  name="chevron-forward-circle-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.yellow}
+                  style={{
+                    alignSelf: "flex-end",
+                  }}
+                />
+              </Grid.Col>
+            </Grid>
+            <TextCustom truncate={3}>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,
+              iusto porro quae optio accusantium amet minima deleniti temporibus
+              cum voluptatem vel veniam doloribus blanditiis sapiente deserunt
+              distinctio eaque aliquid laboriosam?
+            </TextCustom>
+          </StackCustom>
+        </BaseBox>
+      </>
+    );
+}
\ No newline at end of file