Fix: Image donasi

Deksripsi:
- Tampilan image dari server wibu
- Upload image ke server wibu
## No Issue

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

@@ -1,34 +0,0 @@
-"use client";
-
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { AspectRatio, Box, Image, Paper, Stack, Text, Title } from "@mantine/core";
-import moment from "moment";
-import kabar from "../detail_main/kabar";
-import { MODEL_DONASI_KABAR } from "../../model/interface";
-import { useState } from "react";
-
-export default function Donasi_DetailNotif({dataKabar}: {dataKabar: MODEL_DONASI_KABAR}) {
-  const [kabar, setKabar] = useState(dataKabar)
-  return <>
-   <Stack>
-        <Stack>
-          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-          <Title order={5}>{kabar.title}</Title>
-          {kabar.imagesId === null ? (
-            ""
-          ) : (
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
-                <Image
-                  alt="Foro"
-                  src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
-                />
-              </Paper>
-            </AspectRatio>
-          )}
-          <Text>{kabar.deskripsi}</Text>
-        </Stack>
-      </Stack>
-
-  </>;
-}

src/app_modules/donasi/detail/deail_notif/layout.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import { Button, Center, Footer } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import React from "react";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-
-export default function LayoutDonasi_DetailNotif({
-  children,
-  donasiId,
-}: {
-  children: React.ReactNode;
-  donasiId: string;
-}) {
-  const router = useRouter();
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Detail Pemberitahuan" />}
-        footer={
-          <Footer height={70} p={"md"}>
-            <Center h={"100%"}>
-              <Button
-                w={"100%"}
-                radius={"xl"}
-                onClick={() =>
-                  router.push(RouterDonasi.detail_main + `${donasiId}`)
-                }
-              >
-                Lihat Donasi
-              </Button>
-            </Center>
-          </Footer>
-        }
-      >
-        {children}
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}

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

@@ -1,44 +1,39 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { Button, Stack } from "@mantine/core";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";
+import { Button, Group, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import mqtt_client from "@/util/mqtt_client";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
-import { useState } from "react";
+import { Donasi_ComponentButtonDeleteDonasiById } from "../../component";
 
 export default function DetailDraftDonasi({
   dataDonasi,
 }: {
   dataDonasi: MODEL_DONASI;
 }) {
-  // const [data, setData] = useState(dataDonasi);
-
-  // useShallowEffect(() => {
-  //   loadData({ id: dataDonasi.id });
-  // }, [dataDonasi.id]);
-
-  // async function loadData({ id }: { id: string }) {
-  //   const loadData = await Donasi_getOneById(id);
-  //   setData(loadData as any);
-  // }
-
   return (
     <>
       <Stack spacing={"xl"} py={"md"}>
         <ComponentDonasi_DetailDataGalangDana donasi={dataDonasi} />
         <ComponentDonasi_CeritaPenggalangMain donasi={dataDonasi} />
-        <ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
+        <Group position="apart" grow mt={"lg"}>
+          <ButtonAjukanPenggalangan dataDonasi={dataDonasi} />
+          <Donasi_ComponentButtonDeleteDonasiById
+            donasiId={dataDonasi.id}
+            imageCeritaId={dataDonasi.CeritaDonasi.imageId}
+            imageId={dataDonasi.imageId}
+          />
+        </Group>
       </Stack>
     </>
   );
@@ -93,7 +88,7 @@ function ButtonAjukanPenggalangan({
         color="orange"
         onClick={() => onCLick()}
       >
-        Ajukan Penggalangan Dana
+        Ajukan Kembali
       </Button>
     </>
   );

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

@@ -1,56 +1,42 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import {
-  Paper,
-  Stack,
-  Group,
-  Avatar,
-  Title,
-  Text,
-  AspectRatio,
-  Image,
-  Divider,
-} from "@mantine/core";
-import moment from "moment";
-import { MODEL_DONASI_KABAR } from "../../model/interface";
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_DONASI_KABAR } from "../../model/interface";
 
-export default function DetailKabarDonasi({dataDonasi}: {dataDonasi: MODEL_DONASI_KABAR}) {
-  const [kabar, setKabar] = useState(dataDonasi)
+export default function DetailKabarDonasi({
+  dataDonasi,
+}: {
+  dataDonasi: MODEL_DONASI_KABAR;
+}) {
+  const [kabar, setKabar] = useState(dataDonasi);
   return (
     <>
-      <Stack
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "20px",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "15px",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         <Stack>
           <Group position="right">
-            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+            <Text>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                kabar.createdAt
+              )}
+            </Text>
           </Group>
-          <Title align="center" order={4}>{kabar.title}</Title>
-          {kabar.imagesId === null ? (
+
+          {kabar.imageId === null ? (
             ""
           ) : (
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"}>
-                <Image
-                  alt="Foro"
-                  src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
-                />
-              </Paper>
-            </AspectRatio>
+            <ComponentGlobal_LoadImageLandscape fileId={kabar.imageId} />
           )}
+          <Title align="center" order={4}>
+            {kabar.title}
+          </Title>
           <Text>{kabar.deskripsi}</Text>
         </Stack>
-      </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/index.tsx

@@ -1,63 +1,42 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { ComponentDonasi_CardDonatur } from "@/app_modules/donasi/component/card_view/ui_card_donatur";
-import ComponentDonasi_ListKabar from "@/app_modules/donasi/component/card_view/ui_card_kabar";
-import { donasi_funGetListDonaturById } from "@/app_modules/donasi/fun/get/get_list_donatur";
-import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
 import { MODEL_DONASI_KABAR } from "@/app_modules/donasi/model/interface";
-import { Box, Center } from "@mantine/core";
-import _ from "lodash";
-import { ScrollOnly } from "next-scroll-loader";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useState } from "react";
 
 export default function KabarDonasi({
-  listKabar,
-  donasiId,
+  dataDonasi,
 }: {
-  listKabar: MODEL_DONASI_KABAR[];
-  donasiId: string;
+  dataDonasi: MODEL_DONASI_KABAR;
 }) {
-  const [data, setData] = useState(listKabar);
-  const [activePage, setActivePage] = useState(1);
-
+  const [kabar, setKabar] = useState(dataDonasi);
   return (
     <>
-      {_.isEmpty(data) ? (
-        <ComponentGlobal_IsEmptyData />
-      ) : (
-        <Box>
-          <ScrollOnly
-            height="92vh"
-            renderLoading={() => (
-              <Center>
-                <ComponentGlobal_Loader size={25} />
-              </Center>
-            )}
-            data={data}
-            setData={setData}
-            moreData={async () => {
-              const loadData = await donasi_funGetListKabarById({
-                page: activePage + 1,
-                donasiId: donasiId,
-              });
+      <ComponentGlobal_CardStyles>
+        <Stack>
+          <Group position="right">
+            <Text>
+              {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
+                kabar.createdAt
+              )}
+            </Text>
+          </Group>
 
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
-          >
-            {(item) => (
-              <ComponentDonasi_ListKabar
-                kabar={item}
-                route={RouterDonasi.detail_kabar}
-              />
-            )}
-          </ScrollOnly>
-        </Box>
-      )}
+          {kabar.imageId === null ? (
+            ""
+          ) : (
+            <ComponentGlobal_LoadImageLandscape fileId={kabar.imageId} />
+          )}
+          <Title align="center" order={4}>
+            {kabar.title}
+          </Title>
+          <Text>{kabar.deskripsi}</Text>
+        </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/kabar/layout.tsx

@@ -12,7 +12,7 @@ export default function LayoutKabarDonasi({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Kabar Terbaru" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Kabar" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/donasi/detail/detail_main/layout.tsx

@@ -2,24 +2,64 @@
 
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import React from "react";
+import React, { useState } from "react";
 import ButtonDonasi from "../../component/footer_button_donasi";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { IconDotsVertical, IconMessageShare } from "@tabler/icons-react";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
+import { ActionIcon } from "@mantine/core";
 
 export default function LayoutDetailMainDonasi({
   children,
   donasiId,
+  authorId,
+  userLoginId,
 }: {
   children: React.ReactNode;
   donasiId: string;
+  authorId: string;
+  userLoginId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Rekap Kabar",
+      icon: <IconMessageShare />,
+      path: RouterDonasi.rekap_kabar({ id: donasiId }),
+    },
+  ];
+
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Donasi"
+            customButtonRight={
+              userLoginId !== authorId ? (
+                ""
+              ) : (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => setOpenDrawer(true)}
+                >
+                  <IconDotsVertical color="white" />
+                </ActionIcon>
+              )
+            }
+          />
+        }
         footer={<ButtonDonasi donasiId={donasiId} />}
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
 }

src/app_modules/donasi/detail/detail_publish/layout.tsx

@@ -1,18 +1,12 @@
 "use client";
 
-import { ActionIcon, AppShell } from "@mantine/core";
-import React, { useState } from "react";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-import {
-  IconDotsVertical,
-  IconEdit,
-  IconMessageShare,
-} from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon } from "@mantine/core";
+import { IconDotsVertical, IconMessageShare } from "@tabler/icons-react";
+import React, { useState } from "react";
 
 export default function LayoutDetailPublishDonasi({
   children,
@@ -26,9 +20,9 @@ export default function LayoutDetailPublishDonasi({
   const listPage = [
     {
       id: "1",
-      name: "Daftar Kabar",
+      name: "Rekap Kabar",
       icon: <IconMessageShare />,
-      path: RouterDonasi.list_kabar + donasiId,
+      path: RouterDonasi.rekap_kabar({ id: donasiId }),
     },
   ];
 
@@ -38,8 +32,6 @@ export default function LayoutDetailPublishDonasi({
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Publish"
-            // icon={<IconMessageShare />}
-            // route2={RouterDonasi.list_kabar + `${donasiId}`}
             customButtonRight={
               <ActionIcon
                 variant="transparent"

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

@@ -1,66 +1,58 @@
 "use client";
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Button,
-  Group,
-  Modal,
-  Paper,
-  Spoiler,
-  Stack,
-  Title,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import { Button, Group, Paper, Spoiler, Stack, Title } from "@mantine/core";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_DetailDataGalangDana from "../../component/detail_galang_dana/detail_data_donasi";
 import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/cerita_penggalang";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { MODEL_DONASI } from "../../model/interface";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
 
 export default function DetailRejectDonasi({
   dataReject,
+  fileIdImageCerita,
 }: {
   dataReject: MODEL_DONASI;
+  fileIdImageCerita: string;
 }) {
-  const [donasi, setDonasi] = useState(dataReject);
+  const [data, setData] = useState(dataReject);
   return (
     <>
       <Stack spacing={"xl"} py={"md"}>
-        <ComponentGlobal_BoxInformation isReport informasi={donasi.catatan} />
-        <ComponentDonasi_DetailDataGalangDana donasi={donasi} />
-        <ComponentDonasi_CeritaPenggalangMain donasi={donasi} />
-        <ButtonAction donasiId={donasi.id} />
+        <ComponentGlobal_BoxInformation isReport informasi={data.catatan} />
+        <ComponentDonasi_DetailDataGalangDana donasi={data} />
+        <ComponentDonasi_CeritaPenggalangMain donasi={data} />
+        <ButtonAction
+          donasiId={data.id}
+          fileIdImageCerita={fileIdImageCerita}
+          imageId={data.imageId}
+        />
       </Stack>
     </>
   );
 }
 
-function AlasanPenolakan({ catatan }: { catatan: string }) {
-  return (
-    <>
-      <Paper bg={"blue.1"} p={"sm"}>
-        <Title order={5}>Alasan penolakan</Title>
-        <Spoiler
-          maxHeight={50}
-          hideLabel="Sembunyikan"
-          showLabel="Selengkapnya"
-        >
-          {catatan}
-        </Spoiler>
-      </Paper>
-    </>
-  );
-}
-
-function ButtonAction({ donasiId }: { donasiId: string }) {
+function ButtonAction({
+  donasiId,
+  fileIdImageCerita,
+  imageId,
+}: {
+  donasiId: string;
+  fileIdImageCerita: string;
+  imageId: string;
+}) {
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
@@ -71,24 +63,39 @@ function ButtonAction({ donasiId }: { donasiId: string }) {
   async function onCLick() {
     await Donasi_funGantiStatus(donasiId, "3").then((res) => {
       if (res.status === 200) {
-        NotifBerhasil(res.message);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
         router.push(RouterDonasi.main_galang_dana);
       } else {
-        NotifGagal(res.message);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
     setTabsPostingDonasi("Draft");
   }
   async function onDelete() {
-    await Donasi_funDeleteDonasiById(donasiId).then((res) => {
-      if (res.status === 200) {
-        router.push(RouterDonasi.main_galang_dana);
-        setTabsPostingDonasi("Reject");
-        NotifBerhasil(res.message);
-      } else {
-        NotifGagal(res.message);
+    const del = await Donasi_funDeleteDonasiById(donasiId);
+    if (del.status === 200) {
+      const deleteImageDonasi = await funGlobal_DeleteFileById({
+        fileId: imageId as any,
+      });
+
+      if (!deleteImageDonasi.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
       }
-    });
+
+      const deleteImageCerita = await funGlobal_DeleteFileById({
+        fileId: fileIdImageCerita as any,
+      });
+
+      if (!deleteImageCerita.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      }
+
+      router.push(RouterDonasi.main_galang_dana);
+      setTabsPostingDonasi("Reject");
+      ComponentGlobal_NotifikasiBerhasil(del.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(del.message);
+    }
   }
   return (
     <>