Fix investasi
Deksripsi: - Fix notifikasi
This commit is contained in:
@@ -10,13 +10,15 @@ import {
|
||||
ComponentGlobal_NotifikasiPeringatan,
|
||||
} from "@/app_modules/_global/notif_global";
|
||||
import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import { Button } from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { investasi_funCreateNewInvestasi } from "../../_fun";
|
||||
import { gs_investas_menu, gs_investasi_status } from "../../g_state";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import { IRealtimeData } from "@/app/lib/global_state";
|
||||
import { WibuRealtime } from "wibu-pkg";
|
||||
|
||||
export function Investasi_ComponentButtonCreateNewInvestasi({
|
||||
data,
|
||||
@@ -34,74 +36,84 @@ export function Investasi_ComponentButtonCreateNewInvestasi({
|
||||
const [activeTab, setActiveTab] = useAtom(gs_investasi_status);
|
||||
const [hotMenu, setHotMenu] = useAtom(gs_investas_menu);
|
||||
|
||||
async function onSubmit() {
|
||||
setIsLoading(true);
|
||||
const body = {
|
||||
title: data.title,
|
||||
targetDana: data.targetDana,
|
||||
hargaLembar: data.hargaLembar,
|
||||
totalLembar: totalLembar,
|
||||
roi: data.roi,
|
||||
masterPeriodeDevidenId: data.periodeDevidenId,
|
||||
masterPembagianDevidenId: data.pembagianDevidenId,
|
||||
masterPencarianInvestorId: data.pencarianInvestorId,
|
||||
};
|
||||
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: fileImage,
|
||||
dirId: DIRECTORY_ID.investasi_image,
|
||||
});
|
||||
if (!uploadImage.success) {
|
||||
setIsLoading(false);
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
}
|
||||
|
||||
const uploadFilePdf = await funGlobal_UploadToStorage({
|
||||
file: filePdf,
|
||||
dirId: DIRECTORY_ID.investasi_prospektus,
|
||||
});
|
||||
if (!uploadFilePdf.success) {
|
||||
setIsLoading(false);
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
|
||||
}
|
||||
|
||||
const res = await investasi_funCreateNewInvestasi({
|
||||
data: body as any,
|
||||
fileImageId: uploadImage.data.id,
|
||||
filePdfId: uploadFilePdf.data.id,
|
||||
});
|
||||
|
||||
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",
|
||||
async function onCreate() {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const body = {
|
||||
title: data.title,
|
||||
targetDana: data.targetDana,
|
||||
hargaLembar: data.hargaLembar,
|
||||
totalLembar: totalLembar,
|
||||
roi: data.roi,
|
||||
masterPeriodeDevidenId: data.periodeDevidenId,
|
||||
masterPembagianDevidenId: data.pembagianDevidenId,
|
||||
masterPencarianInvestorId: data.pencarianInvestorId,
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotif as any,
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: fileImage,
|
||||
dirId: DIRECTORY_ID.investasi_image,
|
||||
});
|
||||
if (!uploadImage.success) {
|
||||
setIsLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
const uploadFilePdf = await funGlobal_UploadToStorage({
|
||||
file: filePdf,
|
||||
dirId: DIRECTORY_ID.investasi_prospektus,
|
||||
});
|
||||
if (!uploadFilePdf.success) {
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file pdf");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await investasi_funCreateNewInvestasi({
|
||||
data: body as any,
|
||||
fileImageId: uploadImage.data.id,
|
||||
filePdfId: uploadFilePdf.data.id,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"ADMIN",
|
||||
JSON.stringify({
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
setActiveTab("Review");
|
||||
setHotMenu(1);
|
||||
setIsLoading(true);
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.push(NEW_RouterInvestasi.portofolio({ id: "2" }));
|
||||
if (res.status === 201) {
|
||||
const dataNotifikasi: IRealtimeData = {
|
||||
appId: res.data?.id as string,
|
||||
status: res.data?.MasterStatusInvestasi?.name as any,
|
||||
userId: res.data?.authorId as string,
|
||||
pesan: res.data?.title as string,
|
||||
kategoriApp: "INVESTASI",
|
||||
title: "Investasi baru",
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotifikasi as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
WibuRealtime.setData({
|
||||
type: "notification",
|
||||
pushNotificationTo: "ADMIN",
|
||||
});
|
||||
|
||||
WibuRealtime.setData({
|
||||
type: "trigger",
|
||||
pushNotificationTo: "ADMIN",
|
||||
dataMessage: dataNotifikasi,
|
||||
});
|
||||
|
||||
router.push(NEW_RouterInvestasi.portofolio({ id: "2" }));
|
||||
setActiveTab("Review");
|
||||
setHotMenu(1);
|
||||
setIsLoading(true);
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
}
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
clientLogger.error("Error create new investasi", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
setIsLoading(false);
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,7 +143,7 @@ export function Investasi_ComponentButtonCreateNewInvestasi({
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
onClick={() => onSubmit()}
|
||||
onClick={() => onCreate()}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
|
||||
@@ -3,29 +3,27 @@ import { Affix, Button, Center, rem } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import { investasi_funGetAllPublish } from "../../fun/get_all_investasi";
|
||||
import { data } from "autoprefixer";
|
||||
import { apiGetAllInvestasi } from "../../_lib/api_interface";
|
||||
|
||||
export function Investasi_ComponentButtonUpdateBeranda({
|
||||
onLoadData,
|
||||
}: {
|
||||
onLoadData: (val: any) => void;
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
async function onLoaded() {
|
||||
try {
|
||||
await investasi_funGetAllPublish({ page: 1 });
|
||||
setLoading(true);
|
||||
const response = await apiGetAllInvestasi(`?cat=bursa&page=1`);
|
||||
if (response.success) {
|
||||
onLoadData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.error(error);
|
||||
} finally {
|
||||
const loadData = await investasi_funGetAllPublish({ page: 1 });
|
||||
|
||||
onLoadData({
|
||||
data: loadData,
|
||||
isNewPost: false,
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client'
|
||||
"use client";
|
||||
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
|
||||
@@ -14,84 +14,87 @@ import { Investasi_ComponentCardBerandaNew } from "../../_component/main/com_car
|
||||
import { apiGetAllInvestasi } from "../../_lib/api_interface";
|
||||
import { IDataInvestasiBursa } from "../../_lib/type_investasi";
|
||||
import SkeletonInvestasiBursa from "./skeleton_beranda";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_investasiTriggerBeranda } from "@/app/lib/global_state";
|
||||
|
||||
export function Investasi_ViewBerandaNew() {
|
||||
const [data, setData] = useState<IDataInvestasiBursa[]>([]);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [isNewPost, setIsNewPost] = useState(false);
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [data, setData] = useState<IDataInvestasiBursa[]>([]);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useShallowEffect(() => {
|
||||
mqtt_client.subscribe("Beranda_Investasi");
|
||||
// Realtime
|
||||
const [isShowUpdate, setIsShowUpdate] = useState(false);
|
||||
const [isTriggerReload, setIsTriggerReload] = useAtom(
|
||||
gs_investasiTriggerBeranda
|
||||
);
|
||||
|
||||
mqtt_client.on("message", (topic, message) => {
|
||||
const newPost = JSON.parse(message.toString());
|
||||
setIsNewPost(newPost);
|
||||
});
|
||||
}, []);
|
||||
useShallowEffect(() => {
|
||||
if (isTriggerReload) {
|
||||
setIsShowUpdate(true);
|
||||
}
|
||||
}, [isTriggerReload]);
|
||||
|
||||
|
||||
async function getDataInvestasi() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetAllInvestasi(`?cat=bursa&page=1`)
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
async function getDataInvestasi() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await apiGetAllInvestasi(`?cat=bursa&page=1`);
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
setIsTriggerReload(false);
|
||||
setIsShowUpdate(false);
|
||||
getDataInvestasi();
|
||||
}, []);
|
||||
|
||||
useShallowEffect(() => {
|
||||
getDataInvestasi()
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
{isShowUpdate && (
|
||||
<Investasi_ComponentButtonUpdateBeranda
|
||||
onLoadData={(val) => {
|
||||
setData(val);
|
||||
setIsShowUpdate(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isNewPost && (
|
||||
<Investasi_ComponentButtonUpdateBeranda
|
||||
onLoadData={(val) => {
|
||||
setData(val.data);
|
||||
setIsNewPost(val.isNewPost);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box>
|
||||
<ComponentGlobal_CreateButton path={RouterInvestasi_OLD.create} />
|
||||
{loading ? (
|
||||
<SkeletonInvestasiBursa />
|
||||
) : _.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="82vh"
|
||||
renderLoading={() => (
|
||||
<Center>
|
||||
<ComponentGlobal_Loader size={25} />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const pageNew = activePage + 1;
|
||||
const loadData = await apiGetAllInvestasi(
|
||||
`?cat=bursa&page=${pageNew}`
|
||||
);
|
||||
setActivePage((val) => val + 1);
|
||||
|
||||
<Box>
|
||||
<ComponentGlobal_CreateButton path={RouterInvestasi_OLD.create} />
|
||||
{
|
||||
loading ? <SkeletonInvestasiBursa />
|
||||
:
|
||||
_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="82vh"
|
||||
renderLoading={() => (
|
||||
<Center>
|
||||
<ComponentGlobal_Loader size={25} />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const pageNew = activePage + 1
|
||||
const loadData = await apiGetAllInvestasi(`?cat=bursa&page=${pageNew}`);
|
||||
setActivePage((val) => val + 1);
|
||||
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => <Investasi_ComponentCardBerandaNew data={item as any} />}
|
||||
</ScrollOnly>
|
||||
)
|
||||
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
return loadData.data as any;
|
||||
}}
|
||||
>
|
||||
{(item) => <Investasi_ComponentCardBerandaNew data={item as any} />}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,413 +1,485 @@
|
||||
"use client";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage, ComponentGlobal_CardStyles, } from "@/app_modules/_global/component";
|
||||
import { AspectRatio, Box, Button, Center, FileButton, Grid, Group, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
|
||||
import {
|
||||
ComponentGlobal_BoxInformation,
|
||||
ComponentGlobal_BoxUploadImage,
|
||||
ComponentGlobal_CardStyles,
|
||||
} from "@/app_modules/_global/component";
|
||||
import { MAX_SIZE } from "@/app_modules/_global/lib";
|
||||
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||
import {
|
||||
AspectRatio,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
FileButton,
|
||||
Grid,
|
||||
Group,
|
||||
Image,
|
||||
Loader,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconCamera, IconCircleCheck, IconFileTypePdf, IconUpload } from "@tabler/icons-react";
|
||||
import {
|
||||
IconCamera,
|
||||
IconCircleCheck,
|
||||
IconFileTypePdf,
|
||||
IconPhoto,
|
||||
} from "@tabler/icons-react";
|
||||
import _ from "lodash";
|
||||
import { useState } from "react";
|
||||
import { Investasi_ComponentButtonCreateNewInvestasi } from "../_component";
|
||||
import { apiGetMasterInvestasi } from "../_lib/api_interface";
|
||||
|
||||
export default function InvestasiCreateNew() {
|
||||
const [loadingMasterInvestor, setLoadingMasterInvestor] = useState(true)
|
||||
const [loadingMasterPeriodeDeviden, setLoadingMasterPeriodeDeviden] = useState(true)
|
||||
const [loadingMasterPembagianDeviden, setLoadingMasterPembagianDeviden] = useState(true)
|
||||
const [periodeDeviden, setPeriodeDeviden] = useState<any[]>([]);
|
||||
const [pembagianDeviden, setPembagianDeviden] = useState<any[]>([]);
|
||||
const [pencarianInvestor, setPencarianInvestor] = useState<any[]>([]);
|
||||
const [fileImage, setFileImage] = useState<File | null>(null);
|
||||
const [img, setImg] = useState<any | null>();
|
||||
const [filePdf, setFilePdf] = useState<File | null>(null);
|
||||
const [fPdf, setFPdf] = useState<any | null>(null);
|
||||
const [totalLembar, setTotalLembar] = useState(0);
|
||||
const [value, setValue] = useState({
|
||||
title: "",
|
||||
targetDana: 0,
|
||||
hargaLembar: 0,
|
||||
roi: 0,
|
||||
pencarianInvestorId: "",
|
||||
periodeDevidenId: "",
|
||||
pembagianDevidenId: "",
|
||||
});
|
||||
const [target, setTarget] = useState("");
|
||||
const [harga, setHarga] = useState("");
|
||||
const [loadingMasterInvestor, setLoadingMasterInvestor] = useState(true);
|
||||
const [loadingMasterPeriodeDeviden, setLoadingMasterPeriodeDeviden] =
|
||||
useState(true);
|
||||
const [loadingMasterPembagianDeviden, setLoadingMasterPembagianDeviden] =
|
||||
useState(true);
|
||||
const [periodeDeviden, setPeriodeDeviden] = useState<any[]>([]);
|
||||
const [pembagianDeviden, setPembagianDeviden] = useState<any[]>([]);
|
||||
const [pencarianInvestor, setPencarianInvestor] = useState<any[]>([]);
|
||||
const [fileImage, setFileImage] = useState<File | null>(null);
|
||||
const [img, setImg] = useState<any | null>();
|
||||
const [filePdf, setFilePdf] = useState<File | null>(null);
|
||||
const [fPdf, setFPdf] = useState<any | null>(null);
|
||||
const [totalLembar, setTotalLembar] = useState(0);
|
||||
const [value, setValue] = useState({
|
||||
title: "",
|
||||
targetDana: 0,
|
||||
hargaLembar: 0,
|
||||
roi: 0,
|
||||
pencarianInvestorId: "",
|
||||
periodeDevidenId: "",
|
||||
pembagianDevidenId: "",
|
||||
});
|
||||
const [target, setTarget] = useState("");
|
||||
const [harga, setHarga] = useState("");
|
||||
|
||||
async function onTotalLembar({ target, harga, }: { target?: number | any; harga?: number | any; }) {
|
||||
if (target !== 0 && harga !== 0) {
|
||||
const hasil: any = target / harga;
|
||||
setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
|
||||
const [isLoadingImg, setIsLoadingImg] = useState(false);
|
||||
const [isLoadingPdf, setIsLoadingPdf] = useState(false);
|
||||
|
||||
async function onTotalLembar({
|
||||
target,
|
||||
harga,
|
||||
}: {
|
||||
target?: number | any;
|
||||
harga?: number | any;
|
||||
}) {
|
||||
if (target !== 0 && harga !== 0) {
|
||||
const hasil: any = target / harga;
|
||||
setTotalLembar(_.floor(hasil === Infinity ? 0 : hasil));
|
||||
}
|
||||
}
|
||||
|
||||
async function onGetMasterInvestor() {
|
||||
try {
|
||||
setLoadingMasterInvestor(true);
|
||||
const response = await apiGetMasterInvestasi("?cat=pencarian-investor");
|
||||
if (response.success) {
|
||||
setPencarianInvestor(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMasterInvestor(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function onGetMasterInvestor() {
|
||||
try {
|
||||
setLoadingMasterInvestor(true)
|
||||
const response = await apiGetMasterInvestasi("?cat=pencarian-investor")
|
||||
if (response.success) {
|
||||
setPencarianInvestor(response.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMasterInvestor(false)
|
||||
async function onGetMasterPeriodeDeviden() {
|
||||
try {
|
||||
setLoadingMasterPeriodeDeviden(true);
|
||||
const response = await apiGetMasterInvestasi("?cat=periode-deviden");
|
||||
if (response.success) {
|
||||
setPeriodeDeviden(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMasterPeriodeDeviden(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function onGetMasterPeriodeDeviden() {
|
||||
try {
|
||||
setLoadingMasterPeriodeDeviden(true)
|
||||
const response = await apiGetMasterInvestasi("?cat=periode-deviden")
|
||||
if (response.success) {
|
||||
setPeriodeDeviden(response.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMasterPeriodeDeviden(false)
|
||||
async function onGetMasterPembagianDeviden() {
|
||||
try {
|
||||
setLoadingMasterPembagianDeviden(true);
|
||||
const response = await apiGetMasterInvestasi("?cat=pembagian-deviden");
|
||||
if (response.success) {
|
||||
setPembagianDeviden(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMasterPembagianDeviden(false);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
onGetMasterInvestor();
|
||||
onGetMasterPeriodeDeviden();
|
||||
onGetMasterPembagianDeviden();
|
||||
}, []);
|
||||
|
||||
async function onGetMasterPembagianDeviden() {
|
||||
try {
|
||||
setLoadingMasterPembagianDeviden(true)
|
||||
const response = await apiGetMasterInvestasi("?cat=pembagian-deviden")
|
||||
if (response.success) {
|
||||
setPembagianDeviden(response.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMasterPembagianDeviden(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
{isLoadingImg ? (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<Loader size={150} color="yellow" />
|
||||
</Stack>
|
||||
) : img ? (
|
||||
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={img}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconPhoto size={150} color="gray" />
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
useShallowEffect(() => {
|
||||
onGetMasterInvestor()
|
||||
onGetMasterPeriodeDeviden()
|
||||
onGetMasterPembagianDeviden()
|
||||
}, [])
|
||||
{/* Upload Foto */}
|
||||
<Group position="center">
|
||||
<FileButton
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
setIsLoadingImg(true);
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={img}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconUpload color="white" />
|
||||
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
|
||||
Upload Gambar
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
if (files.size > MAX_SIZE) {
|
||||
ComponentGlobal_NotifikasiPeringatan(
|
||||
PemberitahuanMaksimalFile
|
||||
);
|
||||
setImg(null);
|
||||
|
||||
{/* Upload Foto */}
|
||||
<Group position="center">
|
||||
<FileButton
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
|
||||
setImg(buffer);
|
||||
setFileImage(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload Gambar
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
{/* Upload File */}
|
||||
<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>
|
||||
|
||||
<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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
leftIcon={<IconFileTypePdf />}
|
||||
{...props}
|
||||
radius={"xl"}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<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);
|
||||
|
||||
onTotalLembar({
|
||||
target: +nilai,
|
||||
harga: +value.hargaLembar,
|
||||
});
|
||||
|
||||
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({
|
||||
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>
|
||||
return;
|
||||
}
|
||||
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={loadingMasterInvestor ? "Loading..." : "Pilih batas waktu"}
|
||||
data={pencarianInvestor.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + "hari",
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
setValue({
|
||||
...(value as any),
|
||||
pencarianInvestorId: val,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
setImg(buffer);
|
||||
setFileImage(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsLoadingImg(false);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload Gambar
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
label="Periode Deviden"
|
||||
placeholder={loadingMasterPeriodeDeviden ? "Loading..." : "Pilih batas waktu"}
|
||||
data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
|
||||
onChange={(val) => {
|
||||
setValue({
|
||||
...(value as any),
|
||||
periodeDevidenId: val,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{/* Upload File */}
|
||||
<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"}>
|
||||
{isLoadingPdf ? (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<Loader size={50} color="yellow" />
|
||||
</Stack>
|
||||
) : !filePdf ? (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconFileTypePdf size={50} color="gray" />
|
||||
</Stack>
|
||||
) : (
|
||||
<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>
|
||||
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
label="Pembagian Deviden"
|
||||
placeholder={loadingMasterPembagianDeviden ? "Loading..." : "Pilih batas waktu"}
|
||||
data={pembagianDeviden.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + "bulan",
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
setValue({
|
||||
...(value as any),
|
||||
pembagianDevidenId: val,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Group position="center">
|
||||
<FileButton
|
||||
accept={"application/pdf"}
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
setIsLoadingPdf(true);
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
|
||||
<Investasi_ComponentButtonCreateNewInvestasi
|
||||
data={value}
|
||||
totalLembar={totalLembar}
|
||||
fileImage={fileImage as any}
|
||||
filePdf={filePdf as any}
|
||||
/>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
if (files.size > MAX_SIZE) {
|
||||
ComponentGlobal_NotifikasiPeringatan(
|
||||
PemberitahuanMaksimalFile
|
||||
);
|
||||
setFilePdf(null);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setFPdf(buffer);
|
||||
setFilePdf(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setIsLoadingPdf(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
leftIcon={<IconFileTypePdf />}
|
||||
{...props}
|
||||
radius={"xl"}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<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);
|
||||
|
||||
onTotalLembar({
|
||||
target: +nilai,
|
||||
harga: +value.hargaLembar,
|
||||
});
|
||||
|
||||
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({
|
||||
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={
|
||||
loadingMasterInvestor ? "Loading..." : "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={
|
||||
loadingMasterPeriodeDeviden ? "Loading..." : "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={
|
||||
loadingMasterPembagianDeviden ? "Loading..." : "Pilih batas waktu"
|
||||
}
|
||||
data={pembagianDeviden.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + "bulan",
|
||||
}))}
|
||||
onChange={(val) => {
|
||||
setValue({
|
||||
...(value as any),
|
||||
pembagianDevidenId: val,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Investasi_ComponentButtonCreateNewInvestasi
|
||||
data={value}
|
||||
totalLembar={totalLembar}
|
||||
fileImage={fileImage as any}
|
||||
filePdf={filePdf as any}
|
||||
/>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user