155 lines
4.3 KiB
TypeScript
155 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { ApiHipmi } from "@/app/lib/api";
|
|
import { INVESTASI } from "@/app_modules/models/investasi";
|
|
import { MODEL_ALL_MASTER } from "@/app_modules/models/model_AllMaster";
|
|
import {
|
|
AspectRatio,
|
|
Badge,
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardSection,
|
|
Divider,
|
|
Grid,
|
|
Group,
|
|
Image,
|
|
Paper,
|
|
Slider,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { useRouter } from "next/navigation";
|
|
import dataDummy from "../dummy/data_dummy.json";
|
|
import moment from "moment";
|
|
import { IconCheck, IconCircleCheck } from "@tabler/icons-react";
|
|
|
|
export default function MainInvestasi({
|
|
listData,
|
|
pencarianInvestor,
|
|
periodeDeviden,
|
|
pembagianDeviden,
|
|
}: {
|
|
listData: INVESTASI[];
|
|
pencarianInvestor: MODEL_ALL_MASTER[];
|
|
periodeDeviden: MODEL_ALL_MASTER[];
|
|
pembagianDeviden: MODEL_ALL_MASTER[];
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<>
|
|
{/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
|
|
{dataDummy.map((e) => (
|
|
<Card
|
|
key={e.id}
|
|
withBorder
|
|
mb={"lg"}
|
|
onClick={() => router.push(`/dev/investasi/detail/${e.id}`)}
|
|
>
|
|
|
|
<CardSection p={"xs"}>
|
|
<AspectRatio ratio={16 / 9}>
|
|
{e.imagesId ? (
|
|
<Image alt="" src={`/api/investasi/gambar/${e.imagesId}`} />
|
|
) : (
|
|
<Image alt="" src={"/aset/no-img.png"} />
|
|
)}
|
|
</AspectRatio>
|
|
</CardSection>
|
|
|
|
<CardSection p={"lg"}>
|
|
<Box mb={"md"}>
|
|
<Title order={4}>{e.title}</Title>
|
|
<Slider
|
|
size={10}
|
|
disabled
|
|
labelAlwaysOn
|
|
value={e.persentase}
|
|
marks={[{ value: e.persentase, label: e.persentase + `%` }]}
|
|
/>
|
|
</Box>
|
|
</CardSection>
|
|
<CardSection p={"md"} >
|
|
<Box>
|
|
<Grid>
|
|
<Grid.Col span={6}>
|
|
<Stack>
|
|
<Box>
|
|
<Text>Dana Dibutuhkan</Text>
|
|
<Text>Rp. {e.targetDana}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text>Harga Per Lembar</Text>
|
|
<Text>Rp. {e.hargaLembar}</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Grid.Col>
|
|
<Grid.Col span={6}>
|
|
<Stack>
|
|
<Box>
|
|
<Text>ROI</Text>
|
|
<Text>{e.roi}%</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text>Total Lembar</Text>
|
|
<Text>{e.totalLembar}</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Box>
|
|
</CardSection>
|
|
<Divider />
|
|
<CardSection p={"md"}>
|
|
<Group position="apart" px={"sm"}>
|
|
<Box>
|
|
{e.saham_beli === 0 ? (
|
|
""
|
|
) : (
|
|
<Badge variant="filled" color="teal">
|
|
Saham Anda
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
{(() => {
|
|
if (
|
|
e.masterPencarianInvestorId -
|
|
moment(new Date()).diff(new Date(e.createdAt), "days") <=
|
|
0
|
|
) {
|
|
return (
|
|
<>
|
|
<Group position="right">
|
|
<IconCircleCheck />
|
|
<Text>Selesai</Text>
|
|
</Group>
|
|
</>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
<Group position="right" spacing={"xs"}>
|
|
<Text>Sisa waktu:</Text>
|
|
<Text>
|
|
{e.masterPencarianInvestorId -
|
|
moment(new Date()).diff(
|
|
new Date(e.createdAt),
|
|
"days"
|
|
)}
|
|
</Text>
|
|
<Text>Hari</Text>
|
|
</Group>
|
|
</>
|
|
);
|
|
}
|
|
})()}
|
|
</Group>
|
|
</CardSection>
|
|
</Card>
|
|
))}
|
|
</>
|
|
);
|
|
}
|