Fix: Image donasi

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

src/app_modules/donasi/edit/update_kabar/layout.tsx

@@ -1,25 +1,20 @@
 "use client";
 
+import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
 import {
-  AppShell,
-  Button,
-  Center,
-  Divider,
-  Footer,
-  Group,
-  Header,
-} from "@mantine/core";
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { UIGlobal_DrawerCustom } from "@/app_modules/_global/ui";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon, Center, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import React from "react";
-import FooterDonasi from "../../component/footer_close_donasi";
-import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { Donasi_funDeleteKabar } from "../../fun/delete/fun_delete.kabar";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifGagal } from "../../component/notifikasi/notif_gagal";
-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 { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 
 export default function LayoutUpdateKabarDonasi({
   children,
@@ -29,39 +24,77 @@ export default function LayoutUpdateKabarDonasi({
   kabarId: string;
 }) {
   const router = useRouter();
+  const [openDrawer, setOpenDrawer] = React.useState(false);
 
+  async function onDelete() {
+    const res = await Donasi_funDeleteKabar(kabarId);
+    if (res.status === 200) {
+      const deleteImage = await funGlobal_DeleteFileById({
+        fileId: res.imageId as any,
+      });
+
+      if (!deleteImage.success) {
+        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
+      }
+
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Update Kabar" />}
-        footer={
-          <Group align="center" h={"100%"} position="center" spacing={"xl"}>
-            {/* <Button radius={"xl"} variant="outline" color="green">
-                Edit
-              </Button> */}
-            <Button
-              radius={"xl"}
-              color="red"
-              onClick={() => onDelete(router, kabarId)}
-            >
-              Hapus
-            </Button>
-          </Group>
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Update Kabar"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
         }
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_DrawerCustom
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={
+          <SimpleGrid cols={2}>
+            <Center>
+              <Stack
+                align="center"
+                spacing={"xs"}
+                onClick={() => {
+                  router.push(RouterDonasi.edit_kabar({ id: kabarId }), {
+                    scroll: false,
+                  });
+                }}
+              >
+                <ActionIcon variant="transparent">
+                  <IconEdit color="white" />
+                </ActionIcon>
+                <Text color="white">Edit kabar</Text>
+              </Stack>
+            </Center>
+            <Center>
+              <Stack align="center" spacing={"xs"} onClick={() => onDelete()}>
+                <ActionIcon variant="transparent">
+                  <IconTrash color="red" />
+                </ActionIcon>
+                <Text color="red">Hapus kabar</Text>
+              </Stack>
+            </Center>
+          </SimpleGrid>
+        }
+      />
     </>
   );
 }
-
-async function onDelete(router: AppRouterInstance, kabarId: string) {
-  await Donasi_funDeleteKabar(kabarId).then((res) => {
-    if (res.status === 200) {
-      router.back();
-      NotifBerhasil(res.message);
-    } else {
-      NotifGagal(res.message);
-    }
-  });
-}