Donation

Add:
- donation/[id]/fund-disbursement.tsx
- donation/[id]/(news)/list-of-news.tsx

Fix:
screens/Donation/ProgressSection.tsx

### No Issue

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

@@ -404,7 +404,21 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-
+        <Stack.Screen
+          name="donation/[id]/list-of-donatur"
+          options={{
+            title: "Daftar Donatur",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/fund-disbursement"
+          options={{
+            title: "Pencairan Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        
         <Stack.Screen
           name="donation/[id]/(news)/recap-of-news"
           options={{

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

@@ -0,0 +1,67 @@
+import {
+    BackButton,
+    BaseBox,
+    DrawerCustom,
+    Grid,
+    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";
+
+export default function DonationRecapOfNews() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Kabar",
+          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>
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/donation/[id]/fund-disbursement.tsx

@@ -0,0 +1,67 @@
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  Grid,
+  InformationBox,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function DonationFundDisbursement() {
+  const { id } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper>
+        <InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                Rp. 0
+              </TextCustom>
+              <TextCustom size="small">Total Pencairan Dana</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                0 kali
+              </TextCustom>
+              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index}>
+            <StackCustom>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                </Grid.Col>
+              </Grid>
+              <TextCustom>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
+                perferendis provident velit illo consectetur distinctio ab
+                accusantium quis earum omnis!
+              </TextCustom>
+              <ButtonCenteredOnly
+                onPress={() => {
+                  router.navigate(`/(application)/(file)/${id}`);
+                }}
+                icon="file-text"
+              >
+                Bukti Transaksi
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -40,7 +40,7 @@ export default function DonasiDetailBeranda() {
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
-            bottomSection={<Donation_ProgressSection />}
+            bottomSection={<Donation_ProgressSection id={id as string} />}
           />
           <Donation_ComponentInfoFundrising id={id as string} />
           <Donation_ComponentStoryFunrising id={id as string} />

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

@@ -1,10 +1,46 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
 
 export default function Donation_ListOfDonatur() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Daftar Donatur</TextCustom>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index}>
+            <Grid>
+              <Grid.Col
+                span={3}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <FontAwesome6
+                  name="face-smile-wink"
+                  size={50}
+                  style={{ color: MainColor.yellow }}
+                />
+              </Grid.Col>
+              <Grid.Col span={9}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold size="large">
+                    Username
+                  </TextCustom>
+                  <TextCustom>Berdonas sebesar </TextCustom>
+                  <TextCustom bold size="large" color="yellow">
+                    Rp. 100.000
+                  </TextCustom>
+                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
       </ViewWrapper>
     </>
   );

components/Button/ButtonCenteredOnly.tsx

@@ -7,7 +7,7 @@ import ButtonCustom from "./ButtonCustom";
 
 interface ButtonCenteredOnlyProps {
   children?: React.ReactNode;
-  icon?: "plus" | "upload";
+  icon?: "plus" | "upload" | string;
   onPress: () => void;
 }
 export default function ButtonCenteredOnly({
@@ -19,7 +19,7 @@ export default function ButtonCenteredOnly({
     <ButtonCustom
       onPress={onPress}
       iconLeft={
-        <Feather name={icon} size={ICON_SIZE_BUTTON} color={MainColor.black} />
+        <Feather name={icon as any} size={ICON_SIZE_BUTTON} color={MainColor.black} />
       }
       style={[GStyles.buttonCentered50Percent]}
     >

screens/Donation/ProgressSection.tsx

@@ -1,17 +1,27 @@
-import { ProgressCustom, Spacing, Grid, TextCustom } from "@/components";
+import {
+  ClickableCustom,
+  Grid,
+  ProgressCustom,
+  Spacing,
+  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 { router } from "expo-router";
 import { View } from "react-native";
 
-export default function Donation_ProgressSection() {
-    return (
-      <>
-        <View>
-          <ProgressCustom size="lg" />
-          <Spacing />
-          <Grid>
-            <Grid.Col span={4}>
+export default function Donation_ProgressSection({ id }: { id: string }) {
+  return (
+    <>
+      <View>
+        <ProgressCustom size="lg" />
+        <Spacing />
+        <Grid>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/list-of-donatur`)}
+            >
               <View style={{ alignItems: "center" }}>
                 <Ionicons
                   name="flower-sharp"
@@ -21,15 +31,11 @@ export default function Donation_ProgressSection() {
                 <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,
-              }}
+            </ClickableCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/(news)/list-of-news`)}
             >
               <View style={{ alignItems: "center" }}>
                 <Ionicons
@@ -40,8 +46,12 @@ export default function Donation_ProgressSection() {
                 <Spacing height={10} />
                 <TextCustom size="small">Kabar Terbaru</TextCustom>
               </View>
-            </Grid.Col>
-            <Grid.Col span={4}>
+            </ClickableCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/fund-disbursement`)}
+            >
               <View style={{ alignItems: "center" }}>
                 <MaterialIcons
                   name="transfer-within-a-station"
@@ -51,9 +61,10 @@ export default function Donation_ProgressSection() {
                 <Spacing height={10} />
                 <TextCustom size="small">Pencairan Dana</TextCustom>
               </View>
-            </Grid.Col>
-          </Grid>
-        </View>
-      </>
-    );
-}
+            </ClickableCustom>
+          </Grid.Col>
+        </Grid>
+      </View>
+    </>
+  );
+}