Donasi Info Admni

# feat - info admin - hapus admin ## Issue: Loading data belum untuk versi alfa
2024-01-15 11:29:39 +08:00
parent 4af3f74a97
commit 01da30bdb5
128 changed files with 2316 additions and 507 deletions
--- a/src/app_modules/donasi/proses_donasi/invoice/index.tsx
+++ b/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);
+    }
+  });
+}
--- a/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/layout.tsx
@@ -2,7 +2,7 @@

 import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconChevronLeft, IconX } from "@tabler/icons-react";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { gs_donasi_hot_menu } from "../../global_state";
--- a/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/masukan_donasi/layout.tsx
@@ -2,7 +2,7 @@

 import { AppShell } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";

 export default function LayoutMasukanDonasi({
  children,
@@ -12,7 +12,7 @@ export default function LayoutMasukanDonasi({
  return (
    <>
      <AppShell
-        header={<HeaderTamplateDonasi title="Masukan Nominal Donasi" />}
+        header={<ComponentDonasi_HeaderTamplate title="Masukan Nominal Donasi" />}
      >
        {children}
      </AppShell>
--- a/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/metode_pembayaran/layout.tsx
@@ -1,6 +1,6 @@
 "use client"

-import HeaderTamplateDonasi from "@/app_modules/donasi/component/header_tamplate"
+import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate"
 import { AppShell } from "@mantine/core"
 import React from "react"

@@ -8,7 +8,7 @@ import React from "react"
 export default function LayoutDonasi_MetodePembayaran({children}: {children: React.ReactNode}){
    return<>
    <AppShell
-    header={<HeaderTamplateDonasi title="Pilih Metode Pembayaran"/>}
+    header={<ComponentDonasi_HeaderTamplate title="Pilih Metode Pembayaran"/>}
    >
        {children}
    </AppShell>
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
@@ -1,6 +1,7 @@
 "use client";

 import {
+  ActionIcon,
  Avatar,
  Box,
  Button,
@@ -11,6 +12,7 @@ import {
  Loader,
  Paper,
  Stack,
+  Text,
  Title,
 } from "@mantine/core";
 import invoice from "../invoice";
@@ -22,6 +24,10 @@ import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { useAtom } from "jotai";
 import { gs_donasi_hot_menu } from "../../global_state";
+import moment from "moment";
+import { IconBrandWhatsapp } from "@tabler/icons-react";
+import { Warna } from "@/app/lib/warna";
+import Link from "next/link";

 export default function Donasi_ProsesTransaksi({
  dataInvoice,
@@ -30,6 +36,7 @@ export default function Donasi_ProsesTransaksi({
 }) {
  const [invoice, setInvoice] = useState(dataInvoice);
  const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
+  const [countD, setCountD] = useState<Date | any>();
  const interval = useInterval(
    () =>
      reloadData(invoice.id).then((res) =>
@@ -47,28 +54,75 @@ export default function Donasi_ProsesTransaksi({
    return res;
  }

+  //-------------------------------------------------//
+
+  // const inter2 = useInterval(
+  //   () => cekCD().then((res) => console.log(res)),
+  //   1000
+  // );
+
+  // useShallowEffect(() => {
+  //   inter2.start();
+  // }, []);
+
+  async function cekCD() {
+    const date = new Date().getTime();
+    // const jam = date.toTimeString()
+    // const cd = moment(jam).diff((invoice.createdAt), "hour")
+    var a = moment.duration(date).asSeconds();
+    return a;
+  }
+
  if (invoice.donasiMaster_StatusInvoiceId === "1") {
-    
    redirect(RouterDonasi.detail_donasi_saya + `${invoice.id}`);
  }

  return (
    <>
-      <Paper p={"sm"} withBorder>
-        <Stack spacing={"md"}>
-          <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
-            <Stack align="center" justify="center">
-              <Title order={6}>Admin sedang memproses transaksimu</Title>
-              <Paper radius={1000} w={100} h={100}>
-                <Center h={"100%"}>
-                  <Loader size={"lg"} color="orange" variant="bars" />
-                </Center>
-              </Paper>
-              <Title order={6}>Mohon menunggu !</Title>
-            </Stack>
+      <Stack>
+        <Paper p={"sm"} withBorder>
+          <Stack spacing={"md"}>
+            <Paper bg={"gray.1"} p={"sm"} radius={"md"}>
+              <Stack align="center" justify="center">
+                <Title order={6}>Admin sedang memproses transaksimu</Title>
+                <Paper radius={1000} w={100} h={100}>
+                  <Center h={"100%"}>
+                    <Loader size={"lg"} color="orange" variant="bars" />
+                  </Center>
+                </Paper>
+                <Title order={6}>Mohon menunggu !</Title>
+              </Stack>
+            </Paper>
+          </Stack>
+        </Paper>
+        <Paper p={"sm"} withBorder>
+          <Paper bg={"gray.1"} p={5} radius={"md"}>
+            <Group position="center">
+              <Stack spacing={0}>
+                <Text fz={"xs"} fs={"italic"}>
+                  Hubungi admin jika tidak kunjung di proses!
+                </Text>
+                <Text fz={"xs"} fs={"italic"}>
+                  Klik pada logo Whatsapp ini.
+                </Text>
+              </Stack>
+              <Link
+                color="white"
+                style={{
+                  color: "black",
+                  textDecoration: "none",
+                }}
+                target="_blank"
+                href={
+                  "https://wa.me/+6289697338821?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!"
+                }
+              >
+                <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
+              </Link>
+            </Group>
          </Paper>
-        </Stack>
-      </Paper>
+        </Paper>
+      </Stack>
    </>
  );
 }
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/layout.tsx
@@ -2,7 +2,7 @@

 import { ActionIcon, AppShell, Group, Header, Title } from "@mantine/core";
 import React from "react";
-import HeaderTamplateDonasi from "../../component/header_tamplate";
+import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
 import { IconX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";