QC Investasi
# fix Tampilan admin investasi Tampilan admin donasi ## No issuee
This commit is contained in:
@@ -3,6 +3,8 @@
|
||||
import { ApiHipmi } from "@/app/lib/api";
|
||||
import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/model_default_master";
|
||||
import {
|
||||
ActionIcon,
|
||||
Affix,
|
||||
AspectRatio,
|
||||
Badge,
|
||||
Box,
|
||||
@@ -21,17 +23,25 @@ import {
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
rem,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import dataDummy from "../dummy/data_dummy.json";
|
||||
import moment from "moment";
|
||||
import { IconCheck, IconCircleCheck, IconXboxX } from "@tabler/icons-react";
|
||||
import {
|
||||
IconCheck,
|
||||
IconCircleCheck,
|
||||
IconPencilPlus,
|
||||
IconXboxX,
|
||||
} from "@tabler/icons-react";
|
||||
import { MODEL_Investasi } from "../model/model_investasi";
|
||||
import _ from "lodash";
|
||||
import { useState } from "react";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
|
||||
import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import { Warna } from "@/app/lib/warna";
|
||||
import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
|
||||
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
|
||||
|
||||
export default function MainInvestasi({
|
||||
listData,
|
||||
@@ -48,169 +58,194 @@ export default function MainInvestasi({
|
||||
const [invesDone, setInvesDone] = useState(dataSelesai);
|
||||
const [invesFail, setInvesFail] = useState(dataWaktuHabis);
|
||||
const [statusPublish, setStatusPublish] = useState(false);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [isLoadingDetail, setLoadingDetail] = useState(false);
|
||||
const [scroll, scrollTo] = useWindowScroll();
|
||||
|
||||
// console.log(dataWaktuHabis)
|
||||
|
||||
if (_.isEmpty(investasi) && _.isEmpty(invesDone) && _.isEmpty(invesFail))
|
||||
return (
|
||||
<>
|
||||
{" "}
|
||||
<Center h={"80vh"}>
|
||||
<Text>BURSA KOSONG</Text>
|
||||
</Center>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{investasi.map((e) => (
|
||||
<Card
|
||||
// sx={{ borderStyle: "solid", borderColor: "black", borderWidth: "0.5px" }}
|
||||
radius={"md"}
|
||||
key={e.id}
|
||||
mb={"lg"}
|
||||
bg={"dark.1"}
|
||||
<Affix position={{ bottom: rem(150), right: rem(30) }}>
|
||||
<ActionIcon
|
||||
loading={isLoading ? true : false}
|
||||
opacity={scroll.y > 0 ? 0.5 : ""}
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
size={"xl"}
|
||||
radius={"xl"}
|
||||
variant="transparent"
|
||||
bg={"blue"}
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(RouterInvestasi.create);
|
||||
}}
|
||||
>
|
||||
<CardSection p={"md"}>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"md"}>
|
||||
{e.imagesId ? (
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
) : (
|
||||
<Image alt="" src={"/aset/no-img.png"} />
|
||||
)}
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
<IconPencilPlus color="white" />
|
||||
</ActionIcon>
|
||||
</Affix>
|
||||
|
||||
<CardSection p={"lg"}>
|
||||
<Stack>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
<Progress
|
||||
label={(+e.progress).toFixed(2) + " %"}
|
||||
value={+e.progress}
|
||||
color="teal"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
/>
|
||||
</Stack>
|
||||
</CardSection>
|
||||
<CardSection p={"md"}>
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<Center>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text truncate>Dana Dibutuhkan</Text>
|
||||
<Text truncate>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.targetDana)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text truncate>Harga Per Lembar</Text>
|
||||
<Text truncate>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.hargaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Center>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text truncate>ROI</Text>
|
||||
<Text truncate>{e.roi}%</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text truncate>Sisa Lembar</Text>
|
||||
<Text truncate>
|
||||
{new Intl.NumberFormat("id-ID").format(+e.sisaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider color="dark.4" />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="apart">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
compact
|
||||
bg={Warna.hijau_muda}
|
||||
color="green"
|
||||
onClick={() => router.push(RouterInvestasi.detail + `${e.id}`)}
|
||||
>
|
||||
Details
|
||||
</Button>
|
||||
|
||||
{e.progress === "100" ? (
|
||||
<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>
|
||||
) : (
|
||||
<Box>
|
||||
{+e.MasterPencarianInvestor.name -
|
||||
moment(new Date()).diff(new Date(e.countDown), "days") <=
|
||||
0 ? (
|
||||
<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>
|
||||
{_.isEmpty(investasi) && _.isEmpty(invesDone) && _.isEmpty(invesFail) ? (
|
||||
<ComponentInvestasi_IsEmptyData text="Tidak ada data" />
|
||||
) : (
|
||||
investasi.map((e) => (
|
||||
<Card
|
||||
// sx={{ borderStyle: "solid", borderColor: "black", borderWidth: "0.5px" }}
|
||||
radius={"sm"}
|
||||
key={e.id}
|
||||
mb={"lg"}
|
||||
withBorder
|
||||
p={"xl"}
|
||||
shadow="lg"
|
||||
>
|
||||
<CardSection>
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<Paper radius={"sm"} withBorder>
|
||||
{e.imagesId ? (
|
||||
<Image
|
||||
alt=""
|
||||
src={RouterInvestasi.api_gambar + `${e.imagesId}`}
|
||||
/>
|
||||
) : (
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<Text truncate>Sisa waktu:</Text>
|
||||
<Text truncate>
|
||||
{Number(e.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(
|
||||
new Date(e.countDown),
|
||||
"days"
|
||||
)}
|
||||
</Text>
|
||||
<Text truncate>Hari</Text>
|
||||
</Group>
|
||||
<Image alt="" src={"/aset/no-img.png"} />
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
))}
|
||||
</Paper>
|
||||
</AspectRatio>
|
||||
</CardSection>
|
||||
|
||||
<CardSection p={"sm"}>
|
||||
<Stack>
|
||||
<Title order={4}>{e.title}</Title>
|
||||
<Progress
|
||||
label={(+e.progress).toFixed(2) + " %"}
|
||||
value={+e.progress}
|
||||
color="teal"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
/>
|
||||
</Stack>
|
||||
</CardSection>
|
||||
<CardSection p={"sm"}>
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<Center>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text truncate>Dana Dibutuhkan</Text>
|
||||
<Text truncate>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.targetDana)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text truncate>Harga Per Lembar</Text>
|
||||
<Text truncate>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+e.hargaLembar)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Center>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Text truncate>ROI</Text>
|
||||
<Text truncate>{e.roi}%</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text truncate>Sisa Lembar</Text>
|
||||
<Text truncate>
|
||||
{new Intl.NumberFormat("id-ID").format(
|
||||
+e.sisaLembar
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
</CardSection>
|
||||
<Divider color="gray.4" />
|
||||
<CardSection p={"md"}>
|
||||
<Group position="apart">
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoadingDetail ? true : false}
|
||||
radius={"xl"}
|
||||
compact
|
||||
bg={Warna.hijau_muda}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
setLoadingDetail(true);
|
||||
router.push(RouterInvestasi.detail + `${e.id}`);
|
||||
}}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
|
||||
{e.progress === "100" ? (
|
||||
<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>
|
||||
) : (
|
||||
<Box>
|
||||
{+e.MasterPencarianInvestor.name -
|
||||
moment(new Date()).diff(new Date(e.countDown), "days") <=
|
||||
0 ? (
|
||||
<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>
|
||||
) : (
|
||||
<Group position="right" spacing={"xs"}>
|
||||
<Text truncate>Sisa waktu:</Text>
|
||||
<Text truncate>
|
||||
{Number(e.MasterPencarianInvestor.name) -
|
||||
moment(new Date()).diff(
|
||||
new Date(e.countDown),
|
||||
"days"
|
||||
)}
|
||||
</Text>
|
||||
<Text truncate>Hari</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
</CardSection>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user