QC Investasi

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

src/app_modules/investasi/create/view.tsx

@@ -18,9 +18,17 @@ import {
   Stack,
   Text,
   TextInput,
+  Grid,
+  Tooltip,
+  ActionIcon,
 } from "@mantine/core";
-import { IconCamera, IconPdf, IconUpload } from "@tabler/icons-react";
-import _ from "lodash";
+import {
+  IconCamera,
+  IconPdf,
+  IconQuestionMark,
+  IconUpload,
+} from "@tabler/icons-react";
+import _, { toNumber } from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { funCreateInvestasi } from "../fun/fun_create_investasi";
@@ -29,6 +37,11 @@ import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { useAtom } from "jotai";
 import { gs_StatusPortoInvestasi, gs_investasiFooter } from "../g_state";
 import { useShallowEffect } from "@mantine/hooks";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import {
+  ComponentGlobal_WarningMaxUpload,
+  maksimalUploadFile,
+} from "@/app_modules/component_global/variabel_global";
 
 export default function InvestasiCreate({
   id,
@@ -50,6 +63,7 @@ export default function InvestasiCreate({
   const [changeColor, setChangeColor] = useAtom(gs_investasiFooter);
   const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
   const [totalLembar, setTotalLembar] = useState(0);
+  const [isLoading, setLoading] = useState(false);
 
   const [value, setValue] = useState({
     title: "",
@@ -60,6 +74,8 @@ export default function InvestasiCreate({
     periodeDevidenId: "",
     pembagianDevidenId: "",
   });
+  const [target, setTarget] = useState("");
+  const [harga, setHarga] = useState("");
 
   async function onSubmit() {
     const body = {
@@ -73,31 +89,41 @@ export default function InvestasiCreate({
       masterPembagianDevidenId: value.pembagianDevidenId,
       masterPencarianInvestorId: value.pencarianInvestorId,
     };
-    // toast("Berhasil disimpan")
 
-   // if (_.values(body).includes("")) return toast("Lengkapi data");
-   if (!fl) return toast("Gambar Kosong");
-   if (!pdf) return toast("File Kosong");
+    // if (_.values(body).includes("")) return toast("Lengkapi data");
+    if (!fl) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
+    if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
 
-   const gmbr = new FormData();
-   gmbr.append("file", fl);
+    const gmbr = new FormData();
+    gmbr.append("file", fl as any);
 
-   const flPdf = new FormData();
-   flPdf.append("file", pdf as any);
+    const flPdf = new FormData();
+    flPdf.append("file", fl as any);
 
-   await funCreateInvestasi(gmbr, flPdf, body as any).then((res) => {
-     if (res.status === 201) {
-       // toast(res.message);
-       setChangeColor(1);
-       setActiveTab("Review");
-       router.push(RouterInvestasi.dialog_create);
-     } else {
-       toast(res.message);
-     }
-   });
+    await funCreateInvestasi(gmbr, flPdf, body as any).then((res) => {
+      if (res.status === 201) {
+        setChangeColor(1);
+        setActiveTab("Review");
+        setLoading(true);
+        router.push(RouterInvestasi.dialog_create);
+      } else {
+        toast(res.message);
+      }
+    });
   }
 
-  async function onTotalLembar(target: any, harga: any) {
+  async function onTotalLembar({
+    target,
+    harga,
+  }: {
+    target: number;
+    harga: number;
+  }) {
+    // console.log(target, "ini target");
+    // console.log(harga, "ini harga");
+
+    // if (harga === +"Nan") setTotalLembar(0);
+
     const hasil: any = target / harga;
     setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
   }
@@ -121,12 +147,21 @@ export default function InvestasiCreate({
           <Group position="center" mb={"md"}>
             <FileButton
               onChange={async (files: any) => {
-                const buffer = URL.createObjectURL(
-                  new Blob([new Uint8Array(await files.arrayBuffer())])
-                );
-                // console.log(files);
-                setImg(buffer);
-                setFl(files);
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  console.log(files.size);
+
+                  if (files.size > maksimalUploadFile) {
+                    ComponentGlobal_WarningMaxUpload({});
+                  } else {
+                    setImg(buffer);
+                    setFl(files);
+                  }
+                } catch (error) {
+                  console.log(error);
+                }
               }}
               accept="image/png,image/jpeg"
             >
@@ -159,12 +194,20 @@ export default function InvestasiCreate({
             <FileButton
               accept="application/pdf"
               onChange={async (files: any) => {
-                const buffer = URL.createObjectURL(
-                  new Blob([new Uint8Array(await files.arrayBuffer())])
-                );
-                // console.log(files.name)
-                setFilePdf(buffer);
-                setPdf(files);
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+
+                  if (files.size > maksimalUploadFile) {
+                    ComponentGlobal_WarningMaxUpload({});
+                  } else {
+                    setFilePdf(buffer);
+                    setPdf(files);
+                  }
+                } catch (error) {
+                  console.log(error);
+                }
               }}
             >
               {(props) => (
@@ -183,6 +226,8 @@ export default function InvestasiCreate({
           <TextInput
             withAsterisk
             label="Judul Investasi"
+            placeholder="Judul investasi"
+            maxLength={100}
             onChange={(val) => {
               setValue({
                 ...value,
@@ -190,10 +235,12 @@ export default function InvestasiCreate({
               });
             }}
           />
-          <NumberInput
+
+          {/* <NumberInput
             withAsterisk
             type="number"
             label="Dana Dibutuhkan"
+            placeholder="Masukan nominal dana"
             onChange={(val: any) => {
               setValue({
                 ...value,
@@ -201,17 +248,81 @@ export default function InvestasiCreate({
               });
             }}
           />
-
           <NumberInput
             label="Harga Per Lembar"
             type="number"
+            placeholder="Masukan nominal harga"
             onChange={(val) => {
-              //console.log(val)
               setValue({
                 ...value,
                 hargaLembar: +val,
               });
-              onTotalLembar(value.targetDana, val);
+              onTotalLembar({ target: value.targetDana, harga: +val });
+            }}
+          /> */}
+
+          <TextInput
+            icon={<Text fw={"bold"}>Rp.</Text>}
+            min={0}
+            withAsterisk
+            label="Dana Dibutuhkan"
+            placeholder="0"
+            value={target}
+            onChange={(val) => {
+              // console.log(typeof val)
+              const match = val.currentTarget.value
+                .replace(/\./g, "")
+                .match(/^[0-9]+$/);
+
+              if (val.currentTarget.value === "") return setTarget(0 + "");
+              if (!match?.[0]) return null;
+
+              const nilai = val.currentTarget.value.replace(/\./g, "");
+              const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+              setTarget(targetNilai);
+              setValue({
+                ...value,
+                targetDana: +nilai,
+              });
+            }}
+          />
+
+          <TextInput
+            icon={<Text fw={"bold"}>Rp.</Text>}
+            min={0}
+            withAsterisk
+            label="Harga Per Lembar"
+            placeholder="0"
+            value={harga}
+            onChange={(val) => {
+              try {
+                // console.log(typeof +val.currentTarget.value);
+
+                const match = val.currentTarget.value
+                  .replace(/\./g, "")
+                  .match(/^[0-9]+$/);
+
+                if (val.currentTarget.value === "") return setHarga(0 + "");
+
+                if (!match?.[0]) return null;
+
+                const nilai = val.currentTarget.value.replace(/\./g, "");
+                const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+                onTotalLembar({
+                  target: value.targetDana,
+                  harga: +nilai,
+                });
+
+                setHarga(targetNilai);
+                setValue({
+                  ...value,
+                  hargaLembar: +nilai,
+                });
+              } catch (error) {
+                console.log(error);
+              }
             }}
           />
 
@@ -223,25 +334,33 @@ export default function InvestasiCreate({
               <Text>{totalLembar}</Text>
               <Divider />
             </Stack>
-            <Text c={"blue"} fz={10}>
+            <Text c={"gray"} fz={10} fs={"italic"}>
               *Total lembar dihitung dari, Target Dana : Harga Perlembar
             </Text>
           </Stack>
 
-          <NumberInput
+          <TextInput
+            rightSection={
+              <Text fw={"bold"} c={"gray"}>
+                %
+              </Text>
+            }
             withAsterisk
             type="number"
-            label="Rasio Keuntungan / ROI"
-            onChange={(val: any) => {
+            label={"Rasio Keuntungan / ROI %"}
+            placeholder="Masukan rasio keuntungan"
+            onChange={(val) => {
               setValue({
                 ...value,
-                roi: val,
+                roi: _.toNumber(val.target.value),
               });
             }}
           />
+
           <Select
             withAsterisk
             label="Pencarian Investor"
+            placeholder="Pilih batas waktu"
             data={pencarianInvestor.map((e) => ({
               value: e.id,
               label: e.name + " " + "hari",
@@ -256,6 +375,7 @@ export default function InvestasiCreate({
           <Select
             withAsterisk
             label="Periode Deviden"
+            placeholder="Pilih batas waktu"
             data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
             onChange={(val) => {
               setValue({
@@ -267,6 +387,7 @@ export default function InvestasiCreate({
           <Select
             withAsterisk
             label="Pembagian Deviden"
+            placeholder="Pilih batas waktu"
             data={pembagianDeviden.map((e) => ({
               value: e.id,
               label: e.name + " " + "bulan",
@@ -282,6 +403,24 @@ export default function InvestasiCreate({
 
         <Center my={"lg"}>
           <Button
+            style={{
+              transition: "0.5s",
+            }}
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            disabled={
+              value.title === "" ||
+              value.hargaLembar === 0 ||
+              value.targetDana === 0 ||
+              value.roi === 0 ||
+              value.pencarianInvestorId === "" ||
+              value.periodeDevidenId === "" ||
+              value.pembagianDevidenId === "" ||
+              fl === null ||
+              filePdf === null
+                ? true
+                : false
+            }
             w={300}
             radius={50}
             bg={Warna.biru}