# feat :
## Deskripsi : - Notifikasi investasi ## Issue : Gerbang pembayaran
This commit is contained in:
@@ -32,6 +32,8 @@ import { MODEL_Transaksi_Investasi } from "../model/model_investasi";
|
||||
import { useState } from "react";
|
||||
import moment from "moment";
|
||||
import _ from "lodash";
|
||||
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
|
||||
|
||||
export default function DetailSahamTerbeli({
|
||||
dataTransaksi,
|
||||
@@ -46,278 +48,332 @@ export default function DetailSahamTerbeli({
|
||||
{
|
||||
id: 1,
|
||||
name: "Prospektus",
|
||||
icon: <IconBookDownload size={70} />,
|
||||
icon: <IconBookDownload size={70} color="white" />,
|
||||
route: RouterInvestasi.detail_prospektus,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Dokumen",
|
||||
icon: <IconFileDescription size={70} />,
|
||||
icon: <IconFileDescription size={70} color="white" />,
|
||||
route: RouterInvestasi.detail_dokumen,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Berita",
|
||||
icon: <IconSpeakerphone size={70} />,
|
||||
icon: <IconSpeakerphone size={70} color="white" />,
|
||||
route: RouterInvestasi.berita,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group position="apart" mb={"md"}>
|
||||
<Flex align={"center"} gap={"xs"}>
|
||||
<Avatar radius={"xl"} bg={"gray"}>
|
||||
{(() => {
|
||||
const usr = investasi.Investasi.author.username;
|
||||
const splt = usr.split("");
|
||||
const Up = _.upperCase(splt[0]);
|
||||
<Stack>
|
||||
{/* Saham Terbeli */}
|
||||
<Stack
|
||||
style={{
|
||||
padding: "15px",
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
|
||||
return Up;
|
||||
})()}
|
||||
</Avatar>
|
||||
<Text>{investasi.Investasi.author.username}</Text>
|
||||
</Flex>
|
||||
{(() => {
|
||||
if (
|
||||
Number(investasi.Investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(new Date(investasi.createdAt), "days") <=
|
||||
0
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Group position="right">
|
||||
<IconCircleCheck color="green" />
|
||||
<Text c={"green"}>Selesai</Text>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
{(() => {
|
||||
if (
|
||||
Number(investasi.Investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.Investasi.countDown),
|
||||
"days"
|
||||
) <=
|
||||
0
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<IconCircleCheck color="green" />
|
||||
<Text
|
||||
truncate
|
||||
variant="text"
|
||||
c={Warna.hijau_tua}
|
||||
sx={{ fontFamily: "Greycliff CF, sans-serif" }}
|
||||
ta="center"
|
||||
fz="md"
|
||||
fw={700}
|
||||
>
|
||||
Waktu Habis
|
||||
</Text>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<Text>Sisa waktu:</Text>
|
||||
<Text truncate>
|
||||
{Number(
|
||||
investasi.Investasi.MasterPencarianInvestor.name
|
||||
) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.Investasi.countDown),
|
||||
"days"
|
||||
)}
|
||||
</Text>
|
||||
<Text truncate>Hari</Text>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
|
||||
{/* Gambar Investasi */}
|
||||
<Paper withBorder mb={"md"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${investasi.Investasi.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Paper>
|
||||
|
||||
{/* Title dan Persentase */}
|
||||
<Box mb={"md"}>
|
||||
<Title order={4} mb={"xs"}>
|
||||
{investasi.Investasi.title}
|
||||
</Title>
|
||||
<Progress
|
||||
label={
|
||||
"" +
|
||||
(
|
||||
((+investasi.Investasi.totalLembar -
|
||||
+investasi.Investasi.sisaLembar) /
|
||||
+investasi.Investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(1) +
|
||||
"%"
|
||||
}
|
||||
value={
|
||||
+(
|
||||
((+investasi.Investasi.totalLembar -
|
||||
+investasi.Investasi.sisaLembar) /
|
||||
+investasi.Investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(2)
|
||||
}
|
||||
color="teal"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Rincian Data */}
|
||||
<Grid p={"md"}>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
{/* <Box>
|
||||
<Text>Terkumpul</Text>
|
||||
<Text>Rp. </Text>
|
||||
</Box> */}
|
||||
<Box>
|
||||
<Text>Dana Dibutuhkan</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.targetDana)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Harga Per Lembar</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.hargaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Jadwal Pembagian</Text>
|
||||
<Text>
|
||||
{investasi.Investasi.MasterPembagianDeviden.name} bulan{" "}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Pembagian Deviden</Text>
|
||||
<Text>{investasi.Investasi.MasterPeriodeDeviden.name}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text>Investor</Text>
|
||||
<Text>{new Intl.NumberFormat("id-ID", {maximumSignificantDigits: 10}).format(investor)} </Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>ROI</Text>
|
||||
<Text>{investasi.Investasi.roi}%</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Total Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.totalLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Sisa Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.sisaLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Divider my={"md"} />
|
||||
|
||||
{/* Saham Terbeli */}
|
||||
<Box>
|
||||
<Center>
|
||||
<Title order={5}>Saham Anda</Title>
|
||||
</Center>
|
||||
<Grid p={"md"}>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text>Total Pembelian</Text>
|
||||
<Group position="apart">
|
||||
<Group w={"40%"} position="center">
|
||||
<Stack spacing={5} align="center">
|
||||
<Text fw={'bold'}>Total Pembelian</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.gross_amount)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text>Lembar Dibeli</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
|
||||
<Group w={"40%"} position="center">
|
||||
<Stack spacing={5} align="center">
|
||||
<Text fw={"bold"}>Lembar Dibeli</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.quantity)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
{/* List Box */}
|
||||
<Grid mb={"sm"} justify="center">
|
||||
{listBox.map((e) => (
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
key={e.id}
|
||||
onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
|
||||
>
|
||||
<Center>
|
||||
<Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
|
||||
<Stack
|
||||
style={{
|
||||
padding: "15px",
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<Group position="apart" mb={"md"}>
|
||||
<ComponentGlobal_AuthorNameOnHeader
|
||||
authorName={investasi?.Investasi?.author?.username}
|
||||
imagesId={investasi?.Investasi?.author?.Profile?.imagesId}
|
||||
profileId={investasi?.Investasi?.author?.Profile?.id}
|
||||
/>
|
||||
{(() => {
|
||||
if (
|
||||
Number(investasi.Investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.createdAt),
|
||||
"days"
|
||||
) <=
|
||||
0
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Group position="right">
|
||||
<IconCircleCheck color="green" />
|
||||
<Text c={"green"}>Selesai</Text>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
{(() => {
|
||||
if (
|
||||
Number(
|
||||
investasi.Investasi.MasterPencarianInvestor.name
|
||||
) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.Investasi.countDown),
|
||||
"days"
|
||||
) <=
|
||||
0
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<IconCircleCheck color="green" />
|
||||
<Text
|
||||
truncate
|
||||
variant="text"
|
||||
c={Warna.hijau_tua}
|
||||
sx={{
|
||||
fontFamily: "Greycliff CF, sans-serif",
|
||||
}}
|
||||
ta="center"
|
||||
fz="md"
|
||||
fw={700}
|
||||
>
|
||||
Waktu Habis
|
||||
</Text>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<Text>Sisa waktu:</Text>
|
||||
<Text truncate>
|
||||
{Number(
|
||||
investasi.Investasi.MasterPencarianInvestor
|
||||
.name
|
||||
) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.Investasi.countDown),
|
||||
"days"
|
||||
)}
|
||||
</Text>
|
||||
<Text truncate>Hari</Text>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
|
||||
{/* Gambar Investasi */}
|
||||
<AspectRatio ratio={1 / 1} mah={250} mx={"sm"}>
|
||||
<Image
|
||||
radius={"sm"}
|
||||
height={250}
|
||||
width={"100%"}
|
||||
alt=""
|
||||
src={
|
||||
RouterInvestasi.api_gambar + `${investasi.Investasi.imagesId}`
|
||||
}
|
||||
/>
|
||||
</AspectRatio>
|
||||
|
||||
{/* Title dan Persentase */}
|
||||
<Box mb={"md"}>
|
||||
<Title align="center" order={3} mb={"xs"}>
|
||||
{investasi.Investasi.title}
|
||||
</Title>
|
||||
<Progress
|
||||
label={
|
||||
"" +
|
||||
(
|
||||
((+investasi.Investasi.totalLembar -
|
||||
+investasi.Investasi.sisaLembar) /
|
||||
+investasi.Investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(1) +
|
||||
"%"
|
||||
}
|
||||
value={
|
||||
+(
|
||||
((+investasi.Investasi.totalLembar -
|
||||
+investasi.Investasi.sisaLembar) /
|
||||
+investasi.Investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(2)
|
||||
}
|
||||
color="teal"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Rincian Data */}
|
||||
<Grid p={"md"}>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
{/* <Box>
|
||||
<Text>Terkumpul</Text>
|
||||
<Text>Rp. </Text>
|
||||
</Box> */}
|
||||
<Box>
|
||||
<Text>Dana Dibutuhkan</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.targetDana)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Harga Per Lembar</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.hargaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Jadwal Pembagian</Text>
|
||||
<Text>
|
||||
{investasi.Investasi.MasterPembagianDeviden.name} bulan{" "}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Pembagian Deviden</Text>
|
||||
<Text>{investasi.Investasi.MasterPeriodeDeviden.name}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text>Investor</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(investor)}{" "}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>ROI</Text>
|
||||
<Text>{investasi.Investasi.roi}%</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Total Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.totalLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Sisa Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.Investasi.sisaLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* List Box */}
|
||||
<Group position="apart" px={"lg"}>
|
||||
{listBox.map((e, i) => (
|
||||
<Paper
|
||||
key={i}
|
||||
style={{
|
||||
padding: "15px",
|
||||
backgroundColor: AccentColor.blue,
|
||||
border: `2px solid ${AccentColor.softblue}`,
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Flex direction={"column"} align={"center"} justify={"center"}>
|
||||
<Text fz={12}>{e.name}</Text>
|
||||
<ActionIcon variant="transparent" size={60}>
|
||||
<ActionIcon
|
||||
radius={"xl"}
|
||||
variant="transparent"
|
||||
size={60}
|
||||
onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
))}
|
||||
</Group>
|
||||
|
||||
{/*
|
||||
<Grid mb={"sm"} justify="center">
|
||||
{listBox.map((e) => (
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
key={e.id}
|
||||
onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
|
||||
>
|
||||
<Center>
|
||||
<Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
align={"center"}
|
||||
justify={"center"}
|
||||
>
|
||||
<Text fz={12}>{e.name}</Text>
|
||||
<ActionIcon variant="transparent" size={60}>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid> */}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user