QC Investasi

# fix
Tampilan admin investasi
Tampilan admin donasi
## No issuee

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

@@ -15,7 +15,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useAtom } from "jotai";
-import { gs_proses_donasi } from "../../global_state";
+import { gs_donasi_hot_menu, gs_proses_donasi } from "../../global_state";
 import { MODEL_DONASI, MODEL_DONASI_INVOICE } from "../../model/interface";
 import { useState } from "react";
 import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
@@ -39,6 +39,7 @@ export default function Donasi_InvoiceProses({
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
+  const [active, setActive] = useAtom(gs_donasi_hot_menu);
 
   return (
     <>
@@ -174,38 +175,12 @@ export default function Donasi_InvoiceProses({
           </Stack>
         </Paper>
 
-        {/* <Paper p={"sm"} withBorder>
-          <Stack>
-            <Text>Detail donasi</Text>
-            <Paper p={"md"} bg={"gray.2"}>
-              <Stack spacing={"lg"}>
-                <Stack spacing={"xs"}>
-                  <Title order={4}>{invoice.Donasi.title}</Title>
-                  <Stack spacing={0}>
-                    <Group spacing={5}>
-                      <Text>Kategori</Text>
-                      <Title order={5}>
-                        {invoice.Donasi.DonasiMaster_Ketegori.name}
-                      </Title>
-                    </Group>
-                    <ComponentDonasi_TampilanHitungMundur
-                      durasi={invoice.Donasi.DonasiMaster_Durasi.name}
-                      publishTime={invoice.Donasi.publishTime}
-                      textSize={16}
-                    />
-                  </Stack>
-                </Stack>
-              </Stack>
-            </Paper>
-          </Stack>
-        </Paper> */}
-
         {file !== null ? (
           <Button
             radius={"xl"}
             bg={"orange"}
             color="orange"
-            onClick={() => onClick(router, invoice.id)}
+            onClick={() => onClick(router, invoice.id, setActive)}
           >
             Saya Sudah Transfer
           </Button>
@@ -225,10 +200,15 @@ export default function Donasi_InvoiceProses({
   );
 }
 
-async function onClick(router: AppRouterInstance, invoiceId: string) {
+async function onClick(
+  router: AppRouterInstance,
+  invoiceId: string,
+  setActive: any
+) {
   await Donasi_funUpdateStatusInvoice(invoiceId, "2").then((res) => {
     if (res.status === 200) {
       NotifBerhasil(res.message);
+      setActive(2);
       router.push(RouterDonasi.proses_transaksi + `${invoiceId}`);
     } else {
       NotifGagal(res.message);

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

@@ -51,7 +51,9 @@ const listNominal = [
 
 export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
   const router = useRouter();
-  const [nominal, setNominal] = useState(0);
+  const [isLoading, setLoading] = useState(false);
+  const [nominal, setNominal] = useState("");
+  const [value, setValue] = useState(0);
   const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
 
   async function onProses(nominal: number) {
@@ -62,6 +64,7 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
       ...prosesDonasi,
       nominal: "" + nominal,
     });
+    setLoading(true);
     router.push(RouterDonasi.metode_pembayaran + `${donasiId}`);
   }
 
@@ -97,24 +100,40 @@ export default function MasukanDonasi({ donasiId }: { donasiId: string }) {
         <Paper p={"sm"} withBorder shadow="lg">
           <Stack>
             <Text>Nominal Lainnya</Text>
-            <Grid>
-              <Grid.Col span={1}>
-                <Title order={4}>Rp.</Title>
-              </Grid.Col>
-              <Grid.Col span={11}>
-                <NumberInput
-                  min={0}
-                  type="number"
-                  onChange={(val: number) => setNominal(val)}
-                />
-              </Grid.Col>
-            </Grid>
+            <TextInput
+              icon={<Text fw={"bold"}>Rp.</Text>}
+              placeholder="0"
+              min={0}
+              value={nominal}
+              onChange={(val) => {
+                const match = val.currentTarget.value
+                  .replace(/\./g, "")
+                  .match(/^[0-9]+$/);
+
+                if (val.currentTarget.value === "") return setNominal(0 + "");
+
+                if (!match?.[0]) return null;
+
+                const nilai = val.currentTarget.value.replace(/\./g, "");
+                const target = Intl.NumberFormat("id-ID").format(+nilai);
+
+                setValue(+nilai);
+                setNominal(target);
+              }}
+            />
             <Text c={"gray"} fz={"xs"}>
               Minimal Donasi Rp. 10.000
             </Text>
           </Stack>
         </Paper>
-        <Button radius={"xl"} onClick={() => onProses(nominal)}>
+        <Button
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          style={{ transition: "0.5s" }}
+          disabled={value === 0 || value < 10000}
+          radius={"xl"}
+          onClick={() => onProses(value)}
+        >
           Lanjutan Pembayaran
         </Button>
       </Stack>

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

@@ -39,13 +39,14 @@ const listBank = [
 export default function Donasi_MetodePembayaran({
   listBank,
   donasiId,
-  authorId
+  authorId,
 }: {
   listBank: Model_Nama_Bank[];
   donasiId: string;
-  authorId: string
+  authorId: string;
 }) {
   const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
   const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
   const [pilihBank, setPilihBank] = useState("1");
   const [bank, setBank] = useState(listBank);
@@ -55,13 +56,14 @@ export default function Donasi_MetodePembayaran({
       donasiId: donasiId,
       donasiMaster_BankId: pilihBank,
       nominal: prosesDonasi.nominal,
-      authorId: authorId
+      authorId: authorId,
     };
 
     // console.log(body)
 
     await Donasi_funCreateInvoice(body).then((res) => {
       if (res.status === 200) {
+        setLoading(true);
         NotifBerhasil(res.message);
         router.push(RouterDonasi.invoice + `${res.invoiceId}`);
         setProsesDonasi({
@@ -94,7 +96,13 @@ export default function Donasi_MetodePembayaran({
           ))}
         </Radio.Group>
 
-        <Button radius={"xl"} onClick={() => onProses()}>
+        <Button
+          style={{ transition: "0.5s" }}
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          radius={"xl"}
+          onClick={() => onProses()}
+        >
           Pilih
         </Button>
       </Stack>