494 lines
14 KiB
TypeScript
494 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
|
|
import {
|
|
AccentColor,
|
|
MainColor,
|
|
} from "@/app_modules/_global/color/color_pallet";
|
|
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,
|
|
Group,
|
|
Image,
|
|
Paper,
|
|
Select,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
} from "@mantine/core";
|
|
import { IconUpload } from "@tabler/icons-react";
|
|
import { useAtom } from "jotai";
|
|
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";
|
|
|
|
export default function InvestasiCreate({
|
|
pencarianInvestor,
|
|
periodeDeviden,
|
|
pembagianDeviden,
|
|
}: {
|
|
pencarianInvestor: MODEL_DEFAULT_MASTER_OLD[];
|
|
periodeDeviden: MODEL_DEFAULT_MASTER_OLD[];
|
|
pembagianDeviden: MODEL_DEFAULT_MASTER_OLD[];
|
|
}) {
|
|
const router = useRouter();
|
|
const [fl, setFl] = 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 [totalLembar, setTotalLembar] = useState(0);
|
|
const [isLoading, setLoading] = useState(false);
|
|
|
|
const [value, setValue] = useState({
|
|
title: "",
|
|
targetDana: 0,
|
|
hargaLembar: 0,
|
|
roi: 0,
|
|
pencarianInvestorId: "",
|
|
periodeDevidenId: "",
|
|
pembagianDevidenId: "",
|
|
});
|
|
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 (!fl) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
|
|
if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
|
|
|
|
const gmbr = new FormData();
|
|
gmbr.append("file", fl 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;
|
|
}) {
|
|
const hasil: any = target / harga;
|
|
setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box>
|
|
{/* Inputan Create */}
|
|
<Stack spacing={"sm"} px={"md"}>
|
|
{img ? (
|
|
<AspectRatio ratio={1 / 1} mah={300}>
|
|
<Paper
|
|
style={{
|
|
border: `2px solid ${AccentColor.softblue}`,
|
|
backgroundColor: AccentColor.blue,
|
|
padding: "10px",
|
|
borderRadius: "10px",
|
|
}}
|
|
>
|
|
<Image
|
|
alt="Foto"
|
|
src={img ? img : "/aset/no-img.png"}
|
|
maw={200}
|
|
/>
|
|
</Paper>
|
|
</AspectRatio>
|
|
) : (
|
|
<Center>
|
|
<Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
|
|
<Stack justify="center" align="center" h={"100%"}>
|
|
<IconUpload color="gray" />
|
|
<Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
|
|
Upload Gambar
|
|
</Text>
|
|
</Stack>
|
|
</Paper>
|
|
</Center>
|
|
)}
|
|
|
|
{/* Upload Foto */}
|
|
<Group position="center" mb={"md"}>
|
|
<FileButton
|
|
onChange={async (files: any) => {
|
|
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"
|
|
>
|
|
{(props) => (
|
|
<Button
|
|
{...props}
|
|
leftIcon={<IconUpload size={12} />}
|
|
radius={50}
|
|
bg={MainColor.yellow}
|
|
color="yellow"
|
|
c={"black"}
|
|
>
|
|
Upload Gambar
|
|
</Button>
|
|
)}
|
|
</FileButton>
|
|
</Group>
|
|
|
|
{/* Upload File */}
|
|
<Group position="center">
|
|
{!pdf ? (
|
|
<Paper
|
|
w={"100%"}
|
|
style={{
|
|
border: `2px solid gray`,
|
|
backgroundColor: "gray.1",
|
|
padding: "10px",
|
|
borderRadius: "10px",
|
|
color: "gray",
|
|
}}
|
|
>
|
|
<Text>Upload File Prospektus</Text>
|
|
</Paper>
|
|
) : (
|
|
<Paper
|
|
w={"100%"}
|
|
style={{
|
|
border: `2px solid ${AccentColor.softblue}`,
|
|
backgroundColor: AccentColor.blue,
|
|
padding: "10px",
|
|
borderRadius: "10px",
|
|
color: "white",
|
|
}}
|
|
>
|
|
<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);
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}}
|
|
>
|
|
{(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);
|
|
|
|
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);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<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>
|
|
</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),
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<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 === "" ||
|
|
fl === null ||
|
|
filePdf === null
|
|
? true
|
|
: false
|
|
}
|
|
radius={50}
|
|
bg={MainColor.yellow}
|
|
color="yellow"
|
|
c={"black"}
|
|
onClick={() => onSubmit()}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|