Fix : Avatar
Deskripsi: - Ubah avatar yang image nya di ambil dari storage wibu server - Avatar forum - Avatra job - Avatar Investasi - Avatar donasi ## No Issuee
This commit is contained in:
@@ -30,13 +30,14 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { IconUpload } from "@tabler/icons-react";
|
||||
import { IconCamera, 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";
|
||||
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
|
||||
|
||||
export default function InvestasiCreate({
|
||||
pencarianInvestor,
|
||||
@@ -48,7 +49,7 @@ export default function InvestasiCreate({
|
||||
pembagianDeviden: MODEL_DEFAULT_MASTER_OLD[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [fl, setFl] = useState<File | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [img, setImg] = useState<any | null>();
|
||||
const [pdf, setPdf] = useState<File | null>(null);
|
||||
const [filePdf, setFilePdf] = useState<any | null>(null);
|
||||
@@ -83,11 +84,11 @@ export default function InvestasiCreate({
|
||||
};
|
||||
|
||||
// if (_.values(body).includes("")) return toast("Lengkapi data");
|
||||
if (!fl) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
|
||||
if (!file) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
|
||||
if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
|
||||
|
||||
const gmbr = new FormData();
|
||||
gmbr.append("file", fl as any);
|
||||
gmbr.append("file", file as any);
|
||||
|
||||
const flPdf = new FormData();
|
||||
flPdf.append("file", pdf as any);
|
||||
@@ -138,38 +139,27 @@ export default function InvestasiCreate({
|
||||
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<Stack px={"xs"}>
|
||||
<Stack spacing={0}>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{img ? (
|
||||
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
|
||||
alt="Foto"
|
||||
src={img ? img : "/aset/no-img.png"}
|
||||
maw={200}
|
||||
height={250}
|
||||
src={img}
|
||||
/>
|
||||
</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>
|
||||
)}
|
||||
</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>
|
||||
|
||||
{/* Upload Foto */}
|
||||
<Group position="center" mb={"md"}>
|
||||
@@ -185,7 +175,7 @@ export default function InvestasiCreate({
|
||||
ComponentGlobal_WarningMaxUpload({});
|
||||
} else {
|
||||
setImg(buffer);
|
||||
setFl(files);
|
||||
setFile(files);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
@@ -196,7 +186,7 @@ export default function InvestasiCreate({
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
leftIcon={<IconUpload size={12} />}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
@@ -207,287 +197,287 @@ export default function InvestasiCreate({
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
{/* 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);
|
||||
}
|
||||
{/* Upload File */}
|
||||
<Group position="center">
|
||||
{!pdf ? (
|
||||
<Paper
|
||||
w={"100%"}
|
||||
style={{
|
||||
border: `2px solid gray`,
|
||||
backgroundColor: "gray.1",
|
||||
padding: "10px",
|
||||
borderRadius: "10px",
|
||||
color: "gray",
|
||||
}}
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
leftIcon={<IconUpload size={12} />}
|
||||
{...props}
|
||||
radius={"xl"}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
<Text>Upload File Prospektus</Text>
|
||||
</Paper>
|
||||
) : (
|
||||
<Paper
|
||||
w={"100%"}
|
||||
style={{
|
||||
border: `2px solid ${AccentColor.softblue}`,
|
||||
backgroundColor: AccentColor.blue,
|
||||
padding: "10px",
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
label="Judul Investasi"
|
||||
placeholder="Judul investasi"
|
||||
maxLength={100}
|
||||
onChange={(val) => {
|
||||
setValue({
|
||||
...value,
|
||||
title: val.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
}}
|
||||
>
|
||||
<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())])
|
||||
);
|
||||
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
if (files.size > maksimalUploadFile) {
|
||||
ComponentGlobal_WarningMaxUpload({});
|
||||
} else {
|
||||
setFilePdf(buffer);
|
||||
setPdf(files);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
icon={<Text fw={"bold"}>Rp.</Text>}
|
||||
min={0}
|
||||
withAsterisk
|
||||
label="Dana Dibutuhkan"
|
||||
placeholder="0"
|
||||
value={target}
|
||||
onChange={(val) => {
|
||||
// console.log(typeof val)
|
||||
>
|
||||
{(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 setTarget(0 + "");
|
||||
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);
|
||||
|
||||
setTarget(targetNilai);
|
||||
onTotalLembar({
|
||||
target: value.targetDana,
|
||||
harga: +nilai,
|
||||
});
|
||||
|
||||
setHarga(targetNilai);
|
||||
setValue({
|
||||
...value,
|
||||
targetDana: +nilai,
|
||||
hargaLembar: +nilai,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<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 spacing={3} style={{ color: "white" }}>
|
||||
<Text fz={"sm"} fw={500}>
|
||||
Total Lembar
|
||||
</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text>{totalLembar}</Text>
|
||||
<Divider />
|
||||
</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>
|
||||
<Text fz={10} fs={"italic"}>
|
||||
*Total lembar dihitung dari, Target Dana : Harga Perlembar
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<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 === "" ||
|
||||
file === null ||
|
||||
filePdf === null
|
||||
? true
|
||||
: false
|
||||
}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
onClick={() => onSubmit()}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user