# style:

- UI Investasi - UI Donasi ## No issue
2024-08-01 16:48:54 +08:00
parent 810ce1c00d
commit 2ab3a8abb1
135 changed files with 2222 additions and 1652 deletions
--- a/src/app_modules/donasi/proses_donasi/invoice/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/invoice/index.tsx
@@ -29,6 +29,10 @@ import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import mqtt_client from "@/util/mqtt_client";

 export default function Donasi_InvoiceProses({
  dataInvoice,
@@ -80,7 +84,7 @@ export default function Donasi_InvoiceProses({
            </Stack>
            <Paper
              style={{
-                backgroundColor: AccentColor.softblue,
+                backgroundColor: AccentColor.darkblue,
                border: `2px solid ${AccentColor.blue}`,
                padding: "15px",
                cursor: "pointer",
@@ -107,6 +111,7 @@ export default function Donasi_InvoiceProses({
                          radius={"xl"}
                          onClick={copy}
                          color={copied ? "teal" : "yellow"}
+                          c={"black"}
                        >
                          {copied ? "Berhasil" : "Salin"}
                        </Button>
@@ -136,7 +141,7 @@ export default function Donasi_InvoiceProses({
            </Stack>
            <Paper
              style={{
-                backgroundColor: AccentColor.softblue,
+                backgroundColor: AccentColor.darkblue,
                border: `2px solid ${AccentColor.blue}`,
                padding: "15px",
                cursor: "pointer",
@@ -163,6 +168,7 @@ export default function Donasi_InvoiceProses({
                          variant="filled"
                          radius={"xl"}
                          color={copied ? "teal" : "yellow"}
+                          c={"black"}
                          onClick={copy}
                        >
                          {copied ? "Berhasil" : "Salin"}
@@ -215,6 +221,7 @@ export default function Donasi_InvoiceProses({
                    leftIcon={<IconCamera />}
                    bg={MainColor.yellow}
                    color="yellow"
+                    c={"black"}
                  >
                    Upload
                  </Button>
@@ -271,15 +278,35 @@ async function onClick(
  invoiceId: string,
  setActive: any
 ) {
-  await Donasi_funUpdateStatusInvoice(invoiceId, "2").then((res) => {
-    if (res.status === 200) {
-      NotifBerhasil(res.message);
+  const res = await Donasi_funUpdateStatusInvoice(invoiceId, "2");
+  if (res.status === 200) {
+    const dataNotif: any = {
+      appId: res.data?.Donasi?.id as any,
+      userId: res.data?.Donasi?.authorId as any,
+      pesan: res.data?.Donasi?.title as any,
+      status: res.data?.DonasiMaster_StatusInvoice?.name,
+      kategoriApp: "DONASI",
+      title: "Donatur melakukan transfer",
+    };
+
+    const notif = await notifikasiToAdmin_funCreate({
+      data: dataNotif as any,
+    });
+
+    if (notif.status === 201) {
+      mqtt_client.publish(
+        "ADMIN",
+        JSON.stringify({
+          count: 1,
+        })
+      );
+      ComponentGlobal_NotifikasiBerhasil(res.message);
      setActive(2);
      router.push(RouterDonasi.proses_transaksi + `${invoiceId}`);
-    } else {
-      NotifGagal(res.message);
    }
-  });
+  } else {
+    ComponentGlobal_NotifikasiGagal(res.message);
+  }
 }

 async function onUpload(invoiceId: string, file: FormData) {
--- a/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
@@ -16,6 +16,10 @@ import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import mqtt_client from "@/util/mqtt_client";
+import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";

 export default function Donasi_MetodePembayaran({
  listBank,
@@ -42,19 +46,39 @@ export default function Donasi_MetodePembayaran({

    // console.log(body)

-    await Donasi_funCreateInvoice(body).then((res) => {
-      if (res.status === 200) {
+    const res = await Donasi_funCreateInvoice(body);
+    if (res.status === 200) {
+      const dataNotif = {
+        appId: res.data?.Donasi?.id as any,
+        userId: res.data?.Donasi?.authorId as any,
+        pesan: res.data?.Donasi?.title as any,
+        status: res.data?.DonasiMaster_StatusInvoice?.name,
+        kategoriApp: "DONASI",
+        title: "Donatur mengirim invoice",
+      };
+
+      const notif = await notifikasiToAdmin_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (notif.status === 201) {
+        mqtt_client.publish(
+          "ADMIN",
+          JSON.stringify({
+            count: 1,
+          })
+        );
        setLoading(true);
-        NotifBerhasil(res.message);
-        router.push(RouterDonasi.invoice + `${res.invoiceId}`);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
        setProsesDonasi({
          ...prosesDonasi,
          nominal: "",
        });
-      } else {
-        NotifGagal(res.message);
+        router.push(RouterDonasi.invoice + `${res.data?.id}`);
      }
-    });
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
  }

  return (
@@ -67,7 +91,6 @@ export default function Donasi_MetodePembayaran({
          onChange={setPilihBank}
          withAsterisk
          color="yellow"
-          
        >
          {bank.map((e, i) => (
            <Paper
@@ -83,11 +106,11 @@ export default function Donasi_MetodePembayaran({
              }}
            >
              <Radio
-              styles={{
-                radio: {
-                  color: "yellow"
-                }
-              }}
+                styles={{
+                  radio: {
+                    color: "yellow",
+                  },
+                }}
                value={e.id}
                label={
                  <Title order={6} color="white">
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
@@ -1,7 +1,10 @@
 "use client";

-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { Warna } from "@/app/lib/warna";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import {
  Center,
  Group,
@@ -11,120 +14,76 @@ import {
  Text,
  Title,
 } from "@mantine/core";
-import { useInterval, useShallowEffect } from "@mantine/hooks";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
 import { useAtom } from "jotai";
-import moment from "moment";
 import Link from "next/link";
-import { redirect } from "next/navigation";
 import { useState } from "react";
-import { Donasi_getOneInvoiceById } from "../../fun/get/get_one_invoice_by_id";
 import { gs_donasi_hot_menu } from "../../global_state";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+import { redirect, useRouter } from "next/navigation";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { useShallowEffect } from "@mantine/hooks";
+import mqtt_client from "@/util/mqtt_client";
+import { donasi_getOneStatusInvoiceById } from "../../fun/get/get_one_status_invoice_by_id";

 export default function Donasi_ProsesTransaksi({
-  dataInvoice,
+  statusInvoice,
  nomorAdmin,
 }: {
-  dataInvoice: MODEL_DONASI_INVOICE;
+  statusInvoice: MODEL_DONASI_INVOICE;
  nomorAdmin: any;
 }) {
-  const [invoice, setInvoice] = useState(dataInvoice);
+  const router = useRouter();
+  const [data, setData] = useState(statusInvoice);
  const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
-  const [countD, setCountD] = useState<Date | any>();
-  const interval = useInterval(
-    () =>
-      reloadData(invoice.id).then((res) =>
-        setInvoice(res as MODEL_DONASI_INVOICE)
-      ),
-    5000
-  );
+
+  interface MODAL_DONASI_INVOICE {
+    invoiceId: string;
+    statusInvoiceId: string;
+  }

  useShallowEffect(() => {
-    interval.start();
-  }, [invoice.id]);
+    mqtt_client.subscribe("donasi_invoice");

-  function reloadData(invoiceId: string) {
-    const res = Donasi_getOneInvoiceById(invoiceId);
-    return res;
+    mqtt_client.on("message", (topic, message) => {
+      const dataClient: MODAL_DONASI_INVOICE = JSON.parse(message.toString());
+      if (topic === "donasi_invoice" && dataClient.invoiceId === data.id) {
+        // setData({
+        //   ...data,
+        //   donasiMaster_StatusInvoiceId: dataClient.statusInvoiceId,
+        // });
+        onLoad();
+      }
+    });
+  }, []);
+
+  async function onLoad() {
+    const loadData = await donasi_getOneStatusInvoiceById({
+      invoiceId: data.id,
+    });
+    setData(loadData as any);
  }

-  //-------------------------------------------------//
-
-  // 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}`);
+  if (data.DonasiMaster_StatusInvoice.id === "1") {
+    setHotMenu(2);
+    router.replace(RouterDonasi.detail_donasi_saya + `${data.id}`, {
+      scroll: false,
+    });
  }

  return (
    <>
-      <Stack>
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
-          <Stack spacing={"md"}>
-            <Paper
-              style={{
-                backgroundColor: MainColor.darkblue,
-                border: `2px solid ${AccentColor.darkblue}`,
-                padding: "15px",
-                cursor: "pointer",
-                borderRadius: "10px",
-                color: "white",
-              }}
-            >
-              <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="yellow" variant="bars" />
-                  </Center>
-                </Paper>
-                <Title order={6}>Mohon menunggu !</Title>
-              </Stack>
-            </Paper>
-          </Stack>
-        </Paper>
-        <Paper
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `2px solid ${AccentColor.darkblue}`,
-            padding: "15px",
-            cursor: "pointer",
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
+      {data.DonasiMaster_StatusInvoice.id === "1" ? (
+        <>
+          <Center h={"50vh"}>
+            <Loader color="yellow" />
+          </Center>
+        </>
+      ) : (
+        <Stack>
          <Paper
            style={{
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor: AccentColor.blue,
              border: `2px solid ${AccentColor.darkblue}`,
              padding: "15px",
              cursor: "pointer",
@@ -132,30 +91,74 @@ export default function Donasi_ProsesTransaksi({
              color: "white",
            }}
          >
-            <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"
+            <Stack spacing={"md"}>
+              <Paper
                style={{
-                  color: "black",
-                  textDecoration: "none",
+                  backgroundColor: MainColor.darkblue,
+                  border: `2px solid ${AccentColor.darkblue}`,
+                  padding: "15px",
+                  cursor: "pointer",
+                  borderRadius: "10px",
+                  color: "white",
                }}
-                target="_blank"
-                href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
              >
-                <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
-              </Link>
-            </Group>
+                <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="yellow" variant="bars" />
+                    </Center>
+                  </Paper>
+                  <Title order={6}>Mohon menunggu !</Title>
+                </Stack>
+              </Paper>
+            </Stack>
          </Paper>
-        </Paper>
-      </Stack>
+          <Paper
+            style={{
+              backgroundColor: AccentColor.blue,
+              border: `2px solid ${AccentColor.darkblue}`,
+              padding: "15px",
+              cursor: "pointer",
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
+            <Paper
+              style={{
+                backgroundColor: AccentColor.darkblue,
+                border: `2px solid ${AccentColor.darkblue}`,
+                padding: "15px",
+                cursor: "pointer",
+                borderRadius: "10px",
+                color: "white",
+              }}
+            >
+              <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/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
+                >
+                  <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
+                </Link>
+              </Group>
+            </Paper>
+          </Paper>
+        </Stack>
+      )}
    </>
  );
 }