Donasi Info Admni

# feat
- info admin
- hapus admin
## Issue: Loading data belum untuk versi alfa

src/app_modules/donasi/proses_donasi/invoice/index.tsx

@@ -5,6 +5,8 @@ import {
   Button,
   Center,
   CopyButton,
+  FileButton,
+  FileInput,
   Grid,
   Group,
   Paper,
@@ -24,6 +26,9 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
 import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
+import { Donasi_funUploadBuktiTransferById } from "../../fun/update/fun_update_invoice";
+import { buffer } from "stream/consumers";
+import { IconCamera, IconCheck, IconCircleCheck } from "@tabler/icons-react";
 
 export default function Donasi_InvoiceProses({
   dataInvoice,
@@ -32,6 +37,9 @@ export default function Donasi_InvoiceProses({
 }) {
   const [invoice, setDataInvoice] = useState(dataInvoice);
   const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [image, setImage] = useState<any | null>(null);
+
   return (
     <>
       <Stack spacing={"lg"}>
@@ -87,15 +95,13 @@ export default function Donasi_InvoiceProses({
                 <Grid.Col span={8}>
                   <Group position="left" align="center" h={"100%"}>
                     <Title order={4}>
-                      <TampilanRupiahDonasi
-                        nominal={+(+invoice.nominal + 2500)}
-                      />
+                      <TampilanRupiahDonasi nominal={+(+invoice.nominal)} />
                     </Title>
                   </Group>
                 </Grid.Col>
                 <Grid.Col span={4}>
                   <Group position="right">
-                    <CopyButton value={"" + (+invoice.nominal + 2500)}>
+                    <CopyButton value={"" + +invoice.nominal}>
                       {({ copied, copy }) => (
                         <Button
                           color={copied ? "teal" : "blue"}
@@ -117,7 +123,58 @@ export default function Donasi_InvoiceProses({
           </Stack>
         </Paper>
 
-        <Paper p={"sm"} withBorder>
+        <Paper p={"md"} withBorder>
+          <Stack spacing={"sm"}>
+            <Center>
+              <FileButton
+                onChange={async (files: any | null) => {
+                  try {
+                    // const buffer = URL.createObjectURL(
+                    //   new Blob([new Uint8Array(await files.arrayBuffer())])
+                    // );
+                    // console.log(buffer, "ini buffer");
+                    // console.log(files, " ini file");
+                    setFile(files);
+                    onUpload(invoice.id, files);
+                  } catch (error) {
+                    console.log(error);
+                  }
+                }}
+                accept="image/png,image/jpeg"
+              >
+                {(props) => (
+                  <Button
+                    {...props}
+                    radius={"xl"}
+                    variant="outline"
+                    w={150}
+                    leftIcon={<IconCamera />}
+                  >
+                    Upload
+                  </Button>
+                )}
+              </FileButton>
+            </Center>
+            {file ? (
+              <Center>
+                <Group spacing={"xs"}>
+                  <Text fz={"xs"} fs={"italic"}>
+                    Upload berhasil{" "}
+                  </Text>
+                  <IconCircleCheck color="green" />
+                </Group>
+              </Center>
+            ) : (
+              <Center>
+                <Text fz={"xs"} fs={"italic"}>
+                  Upload bukti transfer anda !
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Paper>
+
+        {/* <Paper p={"sm"} withBorder>
           <Stack>
             <Text>Detail donasi</Text>
             <Paper p={"md"} bg={"gray.2"}>
@@ -141,16 +198,28 @@ export default function Donasi_InvoiceProses({
               </Stack>
             </Paper>
           </Stack>
-        </Paper>
+        </Paper> */}
 
-        <Button
-          radius={"xl"}
-          bg={"orange"}
-          color="orange"
-          onClick={() => onClick(router, invoice.id)}
-        >
-          Saya Sudah Transfer
-        </Button>
+        {file !== null ? (
+          <Button
+            radius={"xl"}
+            bg={"orange"}
+            color="orange"
+            onClick={() => onClick(router, invoice.id)}
+          >
+            Saya Sudah Transfer
+          </Button>
+        ) : (
+          <Button
+            disabled
+            radius={"xl"}
+            //  bg={"orange"}
+            //  color="orange"
+            //  onClick={() => onClick(router, invoice.id)}
+          >
+            Menunggu Bukti Transfer
+          </Button>
+        )}
       </Stack>
     </>
   );
@@ -166,3 +235,16 @@ async function onClick(router: AppRouterInstance, invoiceId: string) {
     }
   });
 }
+
+async function onUpload(invoiceId: string, file: FormData) {
+  const gambar = new FormData();
+  gambar.append("file", file as any);
+
+  await Donasi_funUploadBuktiTransferById(invoiceId, gambar).then((res) => {
+    if (res.status === 200) {
+      NotifBerhasil(res.message);
+    } else {
+      NotifGagal(res.message);
+    }
+  });
+}