Create dan Update

# feat
- tampilan user
- tampilan admin
## No Issue

src/app_modules/donasi/detail/detail_draft/index.tsx

@@ -27,60 +27,100 @@ import { useRouter } from "next/navigation";
 import BoxInformasiDonasi from "../../component/box_informasi";
 import { useAtom } from "jotai";
 import { gs_donasi_tabs_posting } from "../../global_state";
+import { MODEL_DONASI } from "../../model/interface";
+import { useState } from "react";
+import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
+import ComponentCeritaPenggalangDanaDonasi from "../../component/detail_main/cerita_penggalang";
+import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import { useShallowEffect } from "@mantine/hooks";
 
-export default function DetailDraftDonasi() {
-  const router = useRouter()
-  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
-    gs_donasi_tabs_posting
-  );
-  async function onClick() {
-    router.push(RouterDonasi.main_galang_dana)
-    setTabsPostingDonasi("Review")
-    
-  }
+export default function DetailDraftDonasi({
+  dataDonasi,
+}: {
+  dataDonasi: MODEL_DONASI;
+}) {
   return (
     <>
       <Stack spacing={"xl"}>
-        <DetailDonasi />
-        {/* <InformasiPenggalangDana /> */}
-        <CeritaPenggalangDana />
-        <Button
-          radius={"xl"}
-          bg={"orange"}
-          color="orange"
-          onClick={() => onClick()}
-        >
-          Ajukan Penggalangan Dana
-        </Button>
+        <DetailDonasi dataDonasi={dataDonasi} />
+        <ComponentCeritaPenggalangDanaDonasi donasi={dataDonasi} />
+        <ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
       </Stack>
     </>
   );
 }
 
-function DetailDonasi() {
+function ButtonAjukanPenggalangan({
+  dataDonasi,
+}: {
+  dataDonasi: MODEL_DONASI;
+}) {
   const router = useRouter();
+  const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
+    gs_donasi_tabs_posting
+  );
+  async function onCLick() {
+    await Donasi_funGantiStatus(dataDonasi.id, "2").then((res) => {
+      if (res.status === 200) {
+        router.push(RouterDonasi.main_galang_dana);
+        setTabsPostingDonasi("Review");
+        NotifBerhasil("Berhasil Diajukan");
+      } else {
+        NotifPeringatan(res.message);
+      }
+    });
+  }
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        bg={"orange"}
+        color="orange"
+        onClick={() => onCLick()}
+      >
+        Ajukan Penggalangan Dana
+      </Button>
+    </>
+  );
+}
+
+function DetailDonasi({ dataDonasi }: { dataDonasi: MODEL_DONASI }) {
+  const [donasi, setDonasi] = useState(dataDonasi);
+  useShallowEffect(() => {
+    setDonasi(dataDonasi);
+  }, [dataDonasi]);
   return (
     <>
       <Stack>
         <Stack>
           <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
-              <Image alt="Foto" src={"/aset/no-img.png"} />
+              <Image
+                alt="Foto"
+                src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
+              />
             </Paper>
           </AspectRatio>
-          <Title order={4}>Judul Donasi</Title>
+          <Stack spacing={0}>
+            <Title order={4}>{donasi.title}</Title>
+            <Text fz={"xs"}>
+              Durasi: {donasi.DonasiMaster_Durasi.name} hari
+            </Text>
+          </Stack>
           <Stack spacing={0}>
             <Group position="apart">
               <Stack spacing={0}>
                 <Text fz={12}>Dana dibutuhkan</Text>
                 <Title order={4} c="blue">
-                  Rp. 50.000.000
+                  <TampilanRupiahDonasi nominal={+donasi.target} />
                 </Title>
               </Stack>
               <Stack spacing={0}>
                 <Text fz={12}>Kategori</Text>
                 <Title order={4} c="blue">
-                  Kesehatan
+                  {donasi.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>
             </Group>
@@ -90,68 +130,3 @@ function DetailDonasi() {
     </>
   );
 }
-
-function InformasiPenggalangDana() {
-  const router = useRouter();
-  return (
-    <>
-      <Stack spacing={"xs"}>
-        <Title order={4}>Informasi Penggalang Dana</Title>
-        <Paper p={"sm"} withBorder>
-          <Stack>
-            <Group position="apart">
-              <Title order={5}>Penggalang Dana</Title>
-              <ActionIcon
-                variant="transparent"
-                onClick={() => router.push(RouterDonasi.penggalang_dana)}
-              >
-                <IconCircleChevronRight />
-              </ActionIcon>
-            </Group>
-            <Group>
-              <Avatar radius={"xl"} variant="filled" bg={"blue"}>
-                U
-              </Avatar>
-              <Text>Username</Text>
-            </Group>
-            <BoxInformasiDonasi
-              informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,
-                kabar penyaluran dapat dilihat di halaman kabar terbaru."
-            />
-          </Stack>
-        </Paper>
-      </Stack>
-    </>
-  );
-}
-
-function CeritaPenggalangDana() {
-  const router = useRouter();
-  return (
-    <>
-      <Stack spacing={"xs"}>
-        <Title order={4}>Cerita Penggalang Dana</Title>
-        <Paper p={"sm"} withBorder>
-          <Stack>
-            <Group position="apart">
-              <Text>1 Des 2023</Text>
-              <ActionIcon
-                variant="transparent"
-                onClick={() => router.push(RouterDonasi.cerita_penggalang)}
-              >
-                <IconCircleChevronRight />
-              </ActionIcon>
-            </Group>
-            <Text lineClamp={4}>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
-              doloremque perferendis laborum? Cupiditate sed consequatur quasi
-              doloremque, consequuntur libero? Vel nam esse fuga, sed et
-              repellat commodi nemo quia dignissimos?
-            </Text>
-            {/* <Text c={"blue"}>Baca selengkapnya</Text> */}
-          </Stack>
-        </Paper>
-      </Stack>
-    </>
-  );
-}