Fix: Image donasi

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

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}
+      />
     </>
   );
 }