Donation

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

Fix:
- /donation/[id]/index.tsx

## No Issue

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

@@ -362,13 +362,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-        <Stack.Screen
+        {/* <Stack.Screen
           name="donation/[id]/index"
           options={{
             title: "Detail Donasi",
             headerLeft: () => <BackButton />,
           }}
-        />
+        /> */}
         <Stack.Screen
           name="donation/[id]/edit"
           options={{
@@ -405,6 +405,28 @@ export default function UserLayout() {
           }}
         />
 
+        <Stack.Screen
+          name="donation/[id]/(news)/recap-of-news"
+          options={{
+            title: "Rekap Kabar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(news)/add-news"
+          options={{
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/(news)/[news]/edit-news"
+          options={{
+            title: "Edit Berita",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}

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

@@ -0,0 +1,54 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationEditNews() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextInputCustom
+          label="Judul Berita"
+          placeholder="Masukan judul berita"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi Berita"
+          placeholder="Masukan deskripsi berita"
+          required
+          showCount
+          maxLength={1000}
+        />
+
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Update
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,95 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  DummyLandscapeImage,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} 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";
+
+export default function DonationNews() {
+  const { id, news } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Detail Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        <BaseBox>
+          <StackCustom>
+            <TextCustom style={{ alignSelf: "flex-end" }}>
+              {dayjs().format("DD MMM YYYY")}
+            </TextCustom>
+
+            <DummyLandscapeImage />
+
+            <TextCustom bold size="large" align="center">
+              Judul Berita
+            </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>
+          </StackCustom>
+        </BaseBox>
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Berita",
+              path: `/donation/${id}/(news)/${news}/edit-news` as any,
+            },
+            {
+              icon: <IconTrash />,
+              label: "Hapus Berita",
+              path: `` as any,
+              color: "red",
+            },
+          ]}
+          onPressItem={(item) => {
+            if ((item.path as any) === "") {
+              setOpenDrawer(false);
+              AlertDefaultSystem({
+                title: "Hapus Berita",
+                message: "Apakah Anda yakin ingin menghapus berita ini?",
+                textLeft: "Batal",
+                textRight: "Hapus",
+                onPressRight: () => {
+                  router.back();
+                },
+              });
+            } else {
+              router.navigate(item.path as any);
+              setOpenDrawer(false);
+            }
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

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

@@ -0,0 +1,54 @@
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function DonationAddNews() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
+        <LandscapeFrameUploaded />
+        <ButtonCenteredOnly
+          onPress={() => {
+            router.push("/(application)/(image)/take-picture/123");
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing />
+        <TextInputCustom
+          label="Judul Berita"
+          placeholder="Masukan judul berita"
+          required
+        />
+        <TextAreaCustom
+          label="Deskripsi Berita"
+          placeholder="Masukan deskripsi berita"
+          required
+          showCount
+          maxLength={1000}
+        />
+        
+        <Spacing />
+        <ButtonCustom
+          onPress={() => {
+            router.back();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      </StackCustom>
+      <Spacing />
+    </ViewWrapper>
+  );
+}

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

@@ -0,0 +1,68 @@
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  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: "Rekap Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <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]/index.tsx

@@ -1,17 +1,24 @@
 import {
+  BackButton,
   BoxButtonOnFooter,
   ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
   StackCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
+import { IconNews } from "@/components/_Icon";
 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";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
 
 export default function DonasiDetailBeranda() {
   const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
 
   const buttonSection = (
     <>
@@ -23,6 +30,13 @@ export default function DonasiDetailBeranda() {
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: `Detail Donasi`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
@@ -32,6 +46,27 @@ export default function DonasiDetailBeranda() {
           <Donation_ComponentStoryFunrising id={id as string} />
         </StackCustom>
       </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconNews />,
+              label: "Rekap Kabar",
+              path: `/donation/${id}/(news)/recap-of-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
     </>
   );
 }

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function Donation_ListOfDonatur() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom>Daftar Donatur</TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}