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

@@ -390,8 +390,21 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-        
-        
+        <Stack.Screen
+          name="donation/[id]/detail-story"
+          options={{
+            title: "Cerita Penggalang",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/infromation-fundrising"
+          options={{
+            title: "Informasi Penggalang Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}

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

@@ -1,15 +1,9 @@
 import {
-    BaseBox,
-    DummyLandscapeImage,
-    FloatingButton,
-    Grid,
-    ProgressCustom,
-    StackCustom,
-    TextCustom,
-    ViewWrapper,
+  FloatingButton,
+  ViewWrapper
 } from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
 import { router } from "expo-router";
-import { View } from "react-native";
 
 export default function DonationBeranda() {
   return (
@@ -20,36 +14,7 @@ export default function DonationBeranda() {
       }
     >
       {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox
-          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>
-                <View>
-                  <TextCustom truncate>
-                    Judul Donasi: Lorem ipsum dolor sit amet consectetur
-                    adipisicing elit.
-                  </TextCustom>
-                  <TextCustom size="small">Sisa hari: 0</TextCustom>
-                </View>
-                <ProgressCustom value={(index % 5) * 20} size="lg" />
-                {/* <TextCustom>
-                 Terkumpul : Rp 300.000
-                </TextCustom> */}
-              </StackCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
+        <Donation_BoxPublish key={index} id={index.toString()}/>
       ))}
     </ViewWrapper>
   );

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

@@ -42,7 +42,7 @@ export default function DonasiDetailStatus() {
       />
       <ViewWrapper>
         <Donation_ComponentBoxDetailData />
-        <Donation_ComponentStoryFunrising />
+        <Donation_ComponentStoryFunrising id={id as string} />
         <Spacing />
         <Donation_ButtonStatusSection status={status as string} />
         <Spacing />

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

@@ -0,0 +1,28 @@
+import {
+  DummyLandscapeImage,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useLocalSearchParams } from "expo-router";
+
+export default function DonationDetailStory() {
+  const { id } = useLocalSearchParams();
+  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>
+      </StackCustom>
+    </ViewWrapper>
+  );
+}

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

@@ -1,9 +1,37 @@
-import { TextCustom } from "@/components";
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  StackCustom,
+  ViewWrapper
+} from "@/components";
+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 { useLocalSearchParams } from "expo-router";
+
+export default function DonasiDetailBeranda() {
+  const { id } = useLocalSearchParams();
+
+  const buttonSection = (
+    <>
+      <BoxButtonOnFooter>
+        <ButtonCustom>Donasi</ButtonCustom>
+      </BoxButtonOnFooter>
+    </>
+  );
 
-export default function DonasiBeranda() {
   return (
     <>
-      <TextCustom>Detail Donasi</TextCustom>
+      <ViewWrapper footerComponent={buttonSection}>
+        <StackCustom>
+          <Donation_ComponentBoxDetailData
+            bottomSection={<Donation_ProgressSection />}
+          />
+          <Donation_ComponentInfoFundrising id={id as string} />
+          <Donation_ComponentStoryFunrising id={id as string} />
+        </StackCustom>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -0,0 +1,44 @@
+import {
+  AvatarCustom,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  Grid,
+  Spacing,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
+import React from "react";
+
+export default function DonationInformationFunrising() {
+  return (
+    <>
+      <ViewWrapper>
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6} style={{ justifyContent: "center" }}>
+              <CenterCustom>
+                <AvatarCustom size="lg" />
+                <TextCustom bold size="large" truncate>
+                  @Username
+                </TextCustom>
+              </CenterCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ justifyContent: "center" }}>
+              <ButtonCustom href={`/profile/1234`}>
+                Kunjungi Profile
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        <Spacing />
+
+        {Array.from({ length: 10 }).map((_, index) => (
+          <Donation_BoxPublish key={index} id={index.toString()} />
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

screens/Donation/BoxPublish.tsx

@@ -0,0 +1,41 @@
+import {
+  BaseBox,
+  Grid,
+  DummyLandscapeImage,
+  StackCustom,
+  TextCustom,
+  ProgressCustom,
+} from "@/components";
+import { View } from "react-native";
+
+export default function Donation_BoxPublish({ id }: { id: string }) {
+  return (
+    <>
+      <BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
+        <Grid>
+          <Grid.Col span={5}>
+            <DummyLandscapeImage unClickPath height={100} />
+          </Grid.Col>
+          <Grid.Col span={1}>
+            <View />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <StackCustom>
+              <View>
+                <TextCustom truncate>
+                  Judul Donasi: Lorem ipsum dolor sit amet consectetur
+                  adipisicing elit.
+                </TextCustom>
+                <TextCustom size="small">Sisa hari: 0</TextCustom>
+              </View>
+              <ProgressCustom value={(Number(id) % 5) * 20} size="lg" />
+              {/* <TextCustom>
+                 Terkumpul : Rp 300.000
+                </TextCustom> */}
+            </StackCustom>
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/ComponentBoxDetailData.tsx

@@ -5,9 +5,14 @@ import {
   TextCustom,
   Grid,
 } from "@/components";
+import React from "react";
 import { View } from "react-native";
 
-export default function Donation_ComponentBoxDetailData() {
+export default function Donation_ComponentBoxDetailData({
+  bottomSection,
+}: {
+  bottomSection?: React.ReactNode;
+}) {
   return (
     <>
       <BaseBox>
@@ -39,6 +44,7 @@ export default function Donation_ComponentBoxDetailData() {
               </View>
             </Grid.Col>
           </Grid>
+          {bottomSection}
         </StackCustom>
       </BaseBox>
     </>

screens/Donation/ComponentInfoFundrising.tsx

@@ -0,0 +1,48 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  Grid,
+  InformationBox,
+  StackCustom,
+  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_ComponentInfoFundrising({
+  id,
+}: {
+  id: string;
+}) {
+  return (
+    <>
+      <BaseBox href={`/donation/${id}/infromation-fundrising`} style={{paddingBottom: 0}}>
+        <StackCustom gap={"xs"}>
+          <Grid>
+            <Grid.Col span={10}>
+              <TextCustom bold size="large">
+                Informasi 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>
+
+          <AvatarUsernameAndOtherComponent />
+          <InformationBox
+            text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru."
+          />
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+}

screens/Donation/ComponentStoryFunrising.tsx

@@ -3,36 +3,40 @@ 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>
-      </>
-    );
-}
+export default function Donation_ComponentStoryFunrising({
+  id,
+}: {
+  id: string;
+}) {
+  return (
+    <>
+      <BaseBox href={`/donation/${id}/detail-story`}>
+        <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>
+    </>
+  );
+}

screens/Donation/ProgressSection.tsx

@@ -0,0 +1,59 @@
+import { ProgressCustom, Spacing, Grid, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { View } from "react-native";
+
+export default function Donation_ProgressSection() {
+    return (
+      <>
+        <View>
+          <ProgressCustom size="lg" />
+          <Spacing />
+          <Grid>
+            <Grid.Col span={4}>
+              <View style={{ alignItems: "center" }}>
+                <Ionicons
+                  name="flower-sharp"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.yellow}
+                />
+                <Spacing height={10} />
+                <TextCustom size="small">Donatur</TextCustom>
+              </View>
+            </Grid.Col>
+            <Grid.Col
+              span={4}
+              style={{
+                borderLeftWidth: 1,
+                borderLeftColor: MainColor.white,
+                borderRightWidth: 1,
+                borderRightColor: MainColor.white,
+              }}
+            >
+              <View style={{ alignItems: "center" }}>
+                <Ionicons
+                  name="chatbox"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.yellow}
+                />
+                <Spacing height={10} />
+                <TextCustom size="small">Kabar Terbaru</TextCustom>
+              </View>
+            </Grid.Col>
+            <Grid.Col span={4}>
+              <View style={{ alignItems: "center" }}>
+                <MaterialIcons
+                  name="transfer-within-a-station"
+                  size={ICON_SIZE_MEDIUM}
+                  color={MainColor.yellow}
+                />
+                <Spacing height={10} />
+                <TextCustom size="small">Pencairan Dana</TextCustom>
+              </View>
+            </Grid.Col>
+          </Grid>
+        </View>
+      </>
+    );
+}