Fix: Investasi

Deskripsi:
- Upload gambar investasi ke storage wibu
- Upload bukti transfer ke storage wibu
# No Issue

src/app_modules/investasi/create/view.tsx

@@ -1,43 +1,34 @@
 "use client";
 
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import {
   ComponentGlobal_WarningMaxUpload,
   maksimalUploadFile,
 } from "@/app_modules/_global/component/waring_popup";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/model_default_master";
-import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
-import mqtt_client from "@/util/mqtt_client";
 import {
   AspectRatio,
   Box,
   Button,
   Center,
-  Divider,
   FileButton,
+  Grid,
   Group,
   Image,
-  Paper,
   Select,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-import { IconCamera, IconUpload } from "@tabler/icons-react";
-import { useAtom } from "jotai";
+import { IconCamera, IconCircleCheck, IconFileTypePdf, IconUpload } from "@tabler/icons-react";
 import _ from "lodash";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { funCreateInvestasi } from "../fun/fun_create_investasi";
-import { gs_investas_menu, gs_investasi_status } from "../g_state";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
+import { Investasi_ComponentButtonCreateNewInvestasi } from "../_component";
 
 export default function InvestasiCreate({
   pencarianInvestor,
@@ -48,16 +39,11 @@ export default function InvestasiCreate({
   periodeDeviden: MODEL_DEFAULT_MASTER_OLD[];
   pembagianDeviden: MODEL_DEFAULT_MASTER_OLD[];
 }) {
-  const router = useRouter();
-  const [file, setFile] = useState<File | null>(null);
+  const [fileImage, setFileImage] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
-  const [pdf, setPdf] = useState<File | null>(null);
-  const [filePdf, setFilePdf] = useState<any | null>(null);
-
-  const [changeColor, setChangeColor] = useAtom(gs_investas_menu);
-  const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
+  const [filePdf, setFilePdf] = useState<File | null>(null);
+  const [fPdf, setFPdf] = useState<any | null>(null);
   const [totalLembar, setTotalLembar] = useState(0);
-  const [isLoading, setLoading] = useState(false);
 
   const [value, setValue] = useState({
     title: "",
@@ -71,76 +57,27 @@ export default function InvestasiCreate({
   const [target, setTarget] = useState("");
   const [harga, setHarga] = useState("");
 
-  async function onSubmit() {
-    const body = {
-      title: value.title,
-      targetDana: value.targetDana,
-      hargaLembar: value.hargaLembar,
-      totalLembar: totalLembar,
-      roi: value.roi,
-      masterPeriodeDevidenId: value.periodeDevidenId,
-      masterPembagianDevidenId: value.pembagianDevidenId,
-      masterPencarianInvestorId: value.pencarianInvestorId,
-    };
-
-    // if (_.values(body).includes("")) return toast("Lengkapi data");
-    if (!file) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
-    if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
-
-    const gmbr = new FormData();
-    gmbr.append("file", file as any);
-
-    const flPdf = new FormData();
-    flPdf.append("file", pdf as any);
-
-    const res = await funCreateInvestasi(gmbr, flPdf, body as any);
-    if (res.status === 201) {
-      const dataNotif = {
-        appId: res.data?.id,
-        status: res.data?.MasterStatusInvestasi?.name,
-        userId: res.data?.authorId,
-        pesan: res.data?.title,
-        kategoriApp: "INVESTASI",
-        title: "Investasi baru",
-      };
-
-      const notif = await notifikasiToAdmin_funCreate({
-        data: dataNotif as any,
-      });
-
-      if (notif.status === 201) {
-        mqtt_client.publish(
-          "ADMIN",
-          JSON.stringify({
-            count: 1,
-          })
-        );
-        setChangeColor(1);
-        setActiveTab("Review");
-        setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        router.push(RouterInvestasi_OLD.portofolio);
-      }
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  }
-
   async function onTotalLembar({
     target,
     harga,
   }: {
-    target: number;
-    harga: number;
+    target?: number | any;
+    harga?: number | any;
   }) {
-    const hasil: any = target / harga;
-    setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
+    if (target !== 0 && harga !== 0) {
+      const hasil: any = target / harga;
+      setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
+    }
   }
 
   return (
     <>
-      <Stack px={"xs"}>
+      <Stack px={"xs"} spacing={40}>
+        {/* Upload Image */}
         <Stack spacing={0}>
+          <Box mb={"sm"}>
+            <ComponentGlobal_BoxInformation informasi="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi" />
+          </Box>
           <ComponentGlobal_BoxUploadImage>
             {img ? (
               <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -162,7 +99,7 @@ export default function InvestasiCreate({
           </ComponentGlobal_BoxUploadImage>
 
           {/* Upload Foto */}
-          <Group position="center" mb={"md"}>
+          <Group position="center">
             <FileButton
               onChange={async (files: any) => {
                 try {
@@ -175,7 +112,7 @@ export default function InvestasiCreate({
                     ComponentGlobal_WarningMaxUpload({});
                   } else {
                     setImg(buffer);
-                    setFile(files);
+                    setFileImage(files);
                   }
                 } catch (error) {
                   console.log(error);
@@ -200,8 +137,31 @@ export default function InvestasiCreate({
         </Stack>
 
         {/* Upload File */}
-        <Group position="center">
-          {!pdf ? (
+        <Stack spacing={"sm"}>
+          <ComponentGlobal_BoxInformation informasi="File prospektus wajib untuk diupload, agar calon investor paham dengan prospek investasi yang akan anda jalankan kedepan !" />
+          <ComponentGlobal_CardStyles marginBottom={"0px"}>
+            {!filePdf ? (
+              <Text lineClamp={1} align="center" c={"gray"}>
+                Upload File Prospektus
+              </Text>
+            ) : (
+              <Grid align="center">
+                <Grid.Col span={2}></Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Text lineClamp={1} align="center">
+                    {filePdf.name}
+                  </Text>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Center>
+                    <IconCircleCheck color="green" />
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            )}
+          </ComponentGlobal_CardStyles>
+
+          {/* {!pdf ? (
             <Paper
               w={"100%"}
               style={{
@@ -227,256 +187,240 @@ export default function InvestasiCreate({
             >
               <Text lineClamp={1}>{pdf.name}</Text>
             </Paper>
-          )}
+          )} */}
           {/* {JSON.stringify(filePdf)} */}
-          <FileButton
-            accept={"application/pdf"}
-            onChange={async (files: any) => {
-              try {
-                const buffer = URL.createObjectURL(
-                  new Blob([new Uint8Array(await files.arrayBuffer())])
-                );
-
-                if (files.size > maksimalUploadFile) {
-                  ComponentGlobal_WarningMaxUpload({});
-                } else {
-                  setFilePdf(buffer);
-                  setPdf(files);
+          <Group position="center">
+            <FileButton
+              accept={"application/pdf"}
+              onChange={async (files: any) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  setFPdf(buffer);
+                  setFilePdf(files);
+                } catch (error) {
+                  console.log(error);
                 }
-              } catch (error) {
-                console.log(error);
-              }
+              }}
+            >
+              {(props) => (
+                <Button
+                  leftIcon={<IconCamera />}
+                  {...props}
+                  radius={"xl"}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload File
+                </Button>
+              )}
+            </FileButton>
+          </Group>
+        </Stack>
+
+        <Stack>
+          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
             }}
-          >
-            {(props) => (
-              <Button
-                leftIcon={<IconUpload size={12} />}
-                {...props}
-                radius={"xl"}
-                bg={MainColor.yellow}
-                color="yellow"
-                c={"black"}
-              >
-                Upload File
-              </Button>
-            )}
-          </FileButton>
-        </Group>
-        <TextInput
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          withAsterisk
-          label="Judul Investasi"
-          placeholder="Judul investasi"
-          maxLength={100}
-          onChange={(val) => {
-            setValue({
-              ...value,
-              title: val.target.value,
-            });
-          }}
-        />
-
-        <TextInput
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          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
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          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);
+            withAsterisk
+            label="Judul Investasi"
+            placeholder="Judul investasi"
+            maxLength={100}
+            onChange={(val) => {
+              setValue({
+                ...value,
+                title: val.target.value,
+              });
+            }}
+          />
 
+          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            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 setHarga(0 + "");
-
+              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);
 
               onTotalLembar({
-                target: value.targetDana,
-                harga: +nilai,
+                target: +nilai,
+                harga: +value.hargaLembar,
               });
 
-              setHarga(targetNilai);
+              setTarget(targetNilai);
               setValue({
                 ...value,
-                hargaLembar: +nilai,
+                targetDana: +nilai,
               });
-            } catch (error) {
-              console.log(error);
-            }
-          }}
-        />
+            }}
+          />
 
-        <Stack spacing={3} style={{ color: "white" }}>
-          <Text fz={"sm"} fw={500}>
-            Total Lembar
-          </Text>
-          <Stack spacing={0}>
-            <Text>{totalLembar}</Text>
-            <Divider />
-          </Stack>
-          <Text fz={10} fs={"italic"}>
-            *Total lembar dihitung dari, Target Dana : Harga Perlembar
-          </Text>
+          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            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({
+                  harga: +nilai,
+                  target: +value.targetDana,
+                });
+
+                setHarga(targetNilai);
+                setValue({
+                  ...value,
+                  hargaLembar: +nilai,
+                });
+              } catch (error) {
+                console.log(error);
+              }
+            }}
+          />
+
+          <TextInput
+            description="*Total lembar dihitung dari, Target Dana / Harga Perlembar"
+            label="Total Lembar"
+            value={harga === "0" ? "0" : target === "0" ? 0 : totalLembar}
+            readOnly
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+          />
+
+          <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            rightSection={
+              <Text fw={"bold"} c={"gray"}>
+                %
+              </Text>
+            }
+            withAsterisk
+            type="number"
+            label={"Rasio Keuntungan / ROI %"}
+            placeholder="Masukan rasio keuntungan"
+            onChange={(val) => {
+              setValue({
+                ...value,
+                roi: _.toNumber(val.target.value),
+              });
+            }}
+          />
+
+          <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            withAsterisk
+            label="Pencarian Investor"
+            placeholder="Pilih batas waktu"
+            data={pencarianInvestor.map((e) => ({
+              value: e.id,
+              label: e.name + " " + "hari",
+            }))}
+            onChange={(val) => {
+              setValue({
+                ...(value as any),
+                pencarianInvestorId: val,
+              });
+            }}
+          />
+
+          <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            withAsterisk
+            label="Periode Deviden"
+            placeholder="Pilih batas waktu"
+            data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
+            onChange={(val) => {
+              setValue({
+                ...(value as any),
+                periodeDevidenId: val,
+              });
+            }}
+          />
+
+          <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            withAsterisk
+            label="Pembagian Deviden"
+            placeholder="Pilih batas waktu"
+            data={pembagianDeviden.map((e) => ({
+              value: e.id,
+              label: e.name + " " + "bulan",
+            }))}
+            onChange={(val) => {
+              setValue({
+                ...(value as any),
+                pembagianDevidenId: val,
+              });
+            }}
+          />
         </Stack>
 
-        <TextInput
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          rightSection={
-            <Text fw={"bold"} c={"gray"}>
-              %
-            </Text>
-          }
-          withAsterisk
-          type="number"
-          label={"Rasio Keuntungan / ROI %"}
-          placeholder="Masukan rasio keuntungan"
-          onChange={(val) => {
-            setValue({
-              ...value,
-              roi: _.toNumber(val.target.value),
-            });
-          }}
+        <Investasi_ComponentButtonCreateNewInvestasi
+          data={value}
+          totalLembar={totalLembar}
+          fileImage={fileImage as any}
+          filePdf={filePdf as any}
         />
-
-        <Select
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          withAsterisk
-          label="Pencarian Investor"
-          placeholder="Pilih batas waktu"
-          data={pencarianInvestor.map((e) => ({
-            value: e.id,
-            label: e.name + " " + "hari",
-          }))}
-          onChange={(val) => {
-            setValue({
-              ...(value as any),
-              pencarianInvestorId: val,
-            });
-          }}
-        />
-        <Select
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          withAsterisk
-          label="Periode Deviden"
-          placeholder="Pilih batas waktu"
-          data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
-          onChange={(val) => {
-            setValue({
-              ...(value as any),
-              periodeDevidenId: val,
-            });
-          }}
-        />
-        <Select
-          styles={{
-            label: {
-              color: "white",
-            },
-          }}
-          withAsterisk
-          label="Pembagian Deviden"
-          placeholder="Pilih batas waktu"
-          data={pembagianDeviden.map((e) => ({
-            value: e.id,
-            label: e.name + " " + "bulan",
-          }))}
-          onChange={(val) => {
-            setValue({
-              ...(value as any),
-              pembagianDevidenId: val,
-            });
-          }}
-        />
-
-        <Button
-          my={"xl"}
-          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 === "" ||
-            file === null ||
-            filePdf === null
-              ? true
-              : false
-          }
-          radius={50}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-          onClick={() => onSubmit()}
-        >
-          Simpan
-        </Button>
       </Stack>
     </>
   );