QC Investasi
# fix Tampilan admin investasi Tampilan admin donasi ## No issuee
This commit is contained in:
@@ -36,6 +36,7 @@ import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import { gs_TransferValue } from "../g_state";
|
||||
import { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
|
||||
|
||||
export default function DetailInvestasi({
|
||||
dataInvestasi,
|
||||
@@ -54,6 +55,8 @@ export default function DetailInvestasi({
|
||||
const [investasi, setInvestasi] = useState(dataInvestasi);
|
||||
const [user, setUser] = useState(dataUser);
|
||||
const [transaksiValue, setTransaksiValue] = useAtom(gs_TransferValue);
|
||||
const [boxId, setBoxId] = useState(0);
|
||||
const [isLoadingBox, setLoadingBox] = useState(false);
|
||||
|
||||
const listBox = [
|
||||
{
|
||||
@@ -89,229 +92,237 @@ export default function DetailInvestasi({
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Foto username dan sisa waktu */}
|
||||
<Group position="apart" mb={"md"}>
|
||||
<Flex align={"center"} gap={"xs"}>
|
||||
<Avatar radius={"xl"} bg={"gray"}>
|
||||
{(() => {
|
||||
const usr = investasi.author.username;
|
||||
const splt = usr.split("");
|
||||
const Up = _.upperCase(splt[0]);
|
||||
<Box px={"sm"}>
|
||||
{/* Foto username dan sisa waktu */}
|
||||
<Group position="apart" mb={"md"}>
|
||||
{/* <pre>{JSON.stringify(dataUser, null, 2)}</pre> */}
|
||||
<ComponentGlobal_AuthorNameOnHeader
|
||||
authorName={dataUser?.Profile?.name}
|
||||
imagesId={dataUser?.Profile?.imagesId}
|
||||
profileId={dataUser?.Profile?.id}
|
||||
/>
|
||||
|
||||
return Up;
|
||||
})()}
|
||||
</Avatar>
|
||||
<Text>{user.username}</Text>
|
||||
</Flex>
|
||||
{investasi.MasterProgresInvestasi.id === "1" ? (
|
||||
<Box>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<Text>Sisa waktu:</Text>
|
||||
<Text>
|
||||
{Number(investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.countDown),
|
||||
"days"
|
||||
)}
|
||||
</Text>
|
||||
<Text>Hari</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
{investasi.MasterProgresInvestasi.id === "1" ? (
|
||||
<Box>
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<Text>
|
||||
Sisa waktu:{" "}
|
||||
<Text span inherit>
|
||||
{Number(investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(
|
||||
new Date(investasi.countDown),
|
||||
"days"
|
||||
)}{" "}
|
||||
Hari
|
||||
</Text>
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
) : (
|
||||
<Box>
|
||||
{investasi.MasterProgresInvestasi.id === "2" ? (
|
||||
<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}
|
||||
>
|
||||
Selesai
|
||||
</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<IconXboxX color="red" />
|
||||
<Text
|
||||
truncate
|
||||
variant="text"
|
||||
c={Warna.merah}
|
||||
sx={{ fontFamily: "Greycliff CF, sans-serif" }}
|
||||
ta="center"
|
||||
fz="md"
|
||||
fw={700}
|
||||
>
|
||||
Waktu Habis
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Paper withBorder mb={"md"} p={"xs"}>
|
||||
<AspectRatio ratio={1 / 1}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Paper>
|
||||
|
||||
{/* Title dan Progress */}
|
||||
<Box mb={"md"}>
|
||||
<Title order={4} mb={"xs"}>
|
||||
{investasi.title}
|
||||
</Title>
|
||||
<Progress
|
||||
label={
|
||||
"" +
|
||||
(
|
||||
((+investasi.totalLembar - +investasi.sisaLembar) /
|
||||
+investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(1) +
|
||||
"%"
|
||||
}
|
||||
value={
|
||||
+(
|
||||
((+investasi.totalLembar - +investasi.sisaLembar) /
|
||||
+investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(1)
|
||||
}
|
||||
color="teal"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Rincian Data */}
|
||||
<Grid p={"md"} mb={"md"}>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text>Dana Dibutuhkan</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.targetDana)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Harga Per Lembar</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.hargaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Jadwal Pembagian</Text>
|
||||
<Text>{investasi.MasterPembagianDeviden.name} bulan </Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Pembagian Deviden</Text>
|
||||
<Text>{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(totalInvestor)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>ROI</Text>
|
||||
<Text>{investasi.roi}%</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Total Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.totalLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Sisa Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.sisaLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* List Box */}
|
||||
<Grid mb={"md"}>
|
||||
{listBox.map((e, i) => (
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
key={e?.id}
|
||||
onClick={() => {
|
||||
setBoxId(e?.id);
|
||||
setLoadingBox(true);
|
||||
router.push(e.route + `${investasi.id}`);
|
||||
}}
|
||||
>
|
||||
<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
|
||||
radius={"xl"}
|
||||
loading={isLoadingBox && e?.id === boxId ? true : false}
|
||||
variant="transparent"
|
||||
size={60}
|
||||
>
|
||||
{e.icon}
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{investasi.sisaLembar === "0" ||
|
||||
Number(investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(new Date(investasi.countDown), "days") <=
|
||||
0 ? (
|
||||
<Center mb={"md"}>
|
||||
<Button disabled radius={50} w={350} variant="transparent">
|
||||
Investasi Telah Ditutup
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Box>
|
||||
{investasi.MasterProgresInvestasi.id === "2" ? (
|
||||
<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}
|
||||
>
|
||||
Selesai
|
||||
</Text>
|
||||
</Group>
|
||||
{loginUserId === investasi.authorId ? (
|
||||
<Center mb={"md"}>
|
||||
<Button disabled radius={50} w={350}>
|
||||
Investasi Ini Milik Anda
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<IconXboxX color="red" />
|
||||
<Text
|
||||
truncate
|
||||
variant="text"
|
||||
c={Warna.merah}
|
||||
sx={{ fontFamily: "Greycliff CF, sans-serif" }}
|
||||
ta="center"
|
||||
fz="md"
|
||||
fw={700}
|
||||
<Center mb={"md"}>
|
||||
<Button
|
||||
radius={50}
|
||||
w={350}
|
||||
bg={Warna.biru}
|
||||
onClick={() => {
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
Waktu Habis
|
||||
</Text>
|
||||
</Group>
|
||||
Beli Saham
|
||||
</Button>
|
||||
</Center>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Paper withBorder mb={"md"} p={"xs"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</Paper>
|
||||
|
||||
{/* Title dan Progress */}
|
||||
<Box mb={"md"}>
|
||||
<Title order={4} mb={"xs"}>
|
||||
{investasi.title}
|
||||
</Title>
|
||||
<Progress
|
||||
label={
|
||||
"" +
|
||||
(
|
||||
((+investasi.totalLembar - +investasi.sisaLembar) /
|
||||
+investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(1) +
|
||||
"%"
|
||||
}
|
||||
value={
|
||||
+(
|
||||
((+investasi.totalLembar - +investasi.sisaLembar) /
|
||||
+investasi.totalLembar) *
|
||||
100
|
||||
).toFixed(1)
|
||||
}
|
||||
color="teal"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Rincian Data */}
|
||||
<Grid p={"md"} mb={"md"}>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text>Dana Dibutuhkan</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.targetDana)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Harga Per Lembar</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.hargaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Jadwal Pembagian</Text>
|
||||
<Text>{investasi.MasterPembagianDeviden.name} bulan </Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Pembagian Deviden</Text>
|
||||
<Text>{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(totalInvestor)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>ROI</Text>
|
||||
<Text>{investasi.roi}%</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Total Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.totalLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text>Sisa Lembar</Text>
|
||||
<Text>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+investasi.sisaLembar)}{" "}
|
||||
lembar
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* List Box */}
|
||||
<Grid mb={"md"}>
|
||||
{listBox.map((e) => (
|
||||
<Grid.Col
|
||||
span={"auto"}
|
||||
key={e.id}
|
||||
onClick={() => router.push(e.route + `${investasi.id}`)}
|
||||
>
|
||||
<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>
|
||||
</Grid.Col>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{investasi.sisaLembar === "0" ||
|
||||
Number(investasi.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(new Date(investasi.countDown), "days") <=
|
||||
0 ? (
|
||||
<Center mb={"md"}>
|
||||
<Button disabled radius={50} w={350} variant="transparent">
|
||||
Investasi Telah Ditutup
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Box>
|
||||
{loginUserId === investasi.authorId ? (
|
||||
<Center mb={"md"}>
|
||||
<Button disabled radius={50} w={350}>
|
||||
Investasi Ini Milik Anda
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
<Center mb={"md"}>
|
||||
<Button
|
||||
radius={50}
|
||||
w={350}
|
||||
bg={Warna.biru}
|
||||
onClick={() => {
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
Beli Saham
|
||||
</Button>
|
||||
</Center>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user