upd: investasi
Deskripsi: - api pada bursa investasi No Issues
This commit is contained in:
amel
@@ -0,0 +1,108 @@
|
||||
import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import { Warna } from "@/app/lib/warna";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
|
||||
import { Box, Grid, Group, Progress, Stack, Text } from "@mantine/core";
|
||||
import { IconCircleCheck, IconXboxX } from "@tabler/icons-react";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { IDataInvestasiBursa } from "../../_lib/type_investasi";
|
||||
|
||||
export function Investasi_ComponentCardBerandaNew({ data }: { data: IDataInvestasiBursa; }) {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<>
|
||||
<ComponentGlobal_CardStyles
|
||||
onClickHandler={() => {
|
||||
router.push(NEW_RouterInvestasi.detail_main({ id: data.id }), {
|
||||
scroll: false,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<ComponentGlobal_LoadImageCustom
|
||||
height={100}
|
||||
fileId={data.imageId}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Stack>
|
||||
<Text fw={"bold"} align="center" lineClamp={2}>
|
||||
{data?.title}
|
||||
</Text>
|
||||
|
||||
<Progress
|
||||
label={(+data?.progress).toFixed(2) + " %"}
|
||||
value={+data?.progress}
|
||||
color={MainColor.yellow}
|
||||
size="xl"
|
||||
radius="xl"
|
||||
styles={{
|
||||
label: { color: MainColor.black },
|
||||
}}
|
||||
/>
|
||||
<Group position="right">
|
||||
{data?.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>
|
||||
{+data?.pencarianInvestor -
|
||||
moment(new Date()).diff(
|
||||
new Date(data?.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(data?.pencarianInvestor) -
|
||||
moment(new Date()).diff(
|
||||
new Date(data?.countDown),
|
||||
"days"
|
||||
)}
|
||||
</Text>
|
||||
<Text truncate>Hari</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</ComponentGlobal_CardStyles>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -6,4 +6,9 @@ export const apiGetMasterInvestasi = async (path?: string) => {
|
||||
export const apiGetOneInvestasiById = async (path: string) => {
|
||||
const response = await fetch(`/api/new/investasi/${path}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
|
||||
export const apiGetAllInvestasi = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/investasi${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -12,4 +12,13 @@ export interface IDataInvestasi {
|
||||
masterPencarianInvestorId: string
|
||||
masterPeriodeDevidenId: string
|
||||
masterPembagianDevidenId: string
|
||||
}
|
||||
|
||||
export interface IDataInvestasiBursa {
|
||||
id: string
|
||||
title: string
|
||||
imageId: string
|
||||
progress: string
|
||||
countDown: string
|
||||
pencarianInvestor: string
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import { Investasi_UiRekapBerita } from "./detail/ui_rekap_berita";
|
||||
import { Investasi_UiCreateBerita } from "./create/ui_create_berita";
|
||||
import { Investasi_UiDetailBerita } from "./detail/ui_berita";
|
||||
import { Investasi_UiEditInvestasiNew } from "./edit/ui_edit_investasi_new";
|
||||
import { Investasi_ViewBerandaNew } from "../_view/main/view_beranda_new";
|
||||
|
||||
export { Investasi_UiProsesPembelian };
|
||||
export { Investasi_UiMetodePembayaran };
|
||||
@@ -53,3 +54,4 @@ export { Investasi_UiRekapBerita };
|
||||
export { Investasi_UiCreateBerita };
|
||||
export { Investasi_UiDetailBerita };
|
||||
export { Investasi_UiEditInvestasiNew }
|
||||
export { Investasi_ViewBerandaNew }
|
||||
|
||||
31
src/app_modules/investasi/_view/main/skeleton_beranda.tsx
Normal file
31
src/app_modules/investasi/_view/main/skeleton_beranda.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
|
||||
import { Box, Grid, Skeleton } from "@mantine/core";
|
||||
|
||||
export default function SkeletonInvestasiBursa() {
|
||||
return (
|
||||
<>
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<ComponentGlobal_CardStyles key={index}>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<Skeleton w={"100%"} height={100} radius="md" />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Box>
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Box key={i} py={5}>
|
||||
<Grid align="center">
|
||||
<Grid.Col span={12}>
|
||||
<Skeleton w={"100%"} h={23} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</ComponentGlobal_CardStyles>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
97
src/app_modules/investasi/_view/main/view_beranda_new.tsx
Normal file
97
src/app_modules/investasi/_view/main/view_beranda_new.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
'use client'
|
||||
import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
|
||||
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import { Box, Center } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { Investasi_ComponentButtonUpdateBeranda } from "../../_component";
|
||||
import { Investasi_ComponentCardBerandaNew } from "../../_component/main/com_card_beranda_new";
|
||||
import { apiGetAllInvestasi } from "../../_lib/api_interface";
|
||||
import { IDataInvestasiBursa } from "../../_lib/type_investasi";
|
||||
import SkeletonInvestasiBursa from "./skeleton_beranda";
|
||||
|
||||
export function Investasi_ViewBerandaNew() {
|
||||
const [data, setData] = useState<IDataInvestasiBursa[]>([]);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [isNewPost, setIsNewPost] = useState(false);
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useShallowEffect(() => {
|
||||
mqtt_client.subscribe("Beranda_Investasi");
|
||||
|
||||
mqtt_client.on("message", (topic, message) => {
|
||||
const newPost = JSON.parse(message.toString());
|
||||
setIsNewPost(newPost);
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
async function getDataInvestasi() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetAllInvestasi(`?cat=bursa&page=1`)
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getDataInvestasi()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isNewPost && (
|
||||
<Investasi_ComponentButtonUpdateBeranda
|
||||
onLoadData={(val) => {
|
||||
setData(val.data);
|
||||
setIsNewPost(val.isNewPost);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<ComponentGlobal_CreateButton path={RouterInvestasi_OLD.create} />
|
||||
{
|
||||
loading ? <SkeletonInvestasiBursa />
|
||||
:
|
||||
_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="82vh"
|
||||
renderLoading={() => (
|
||||
<Center>
|
||||
<ComponentGlobal_Loader size={25} />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const pageNew = activePage + 1
|
||||
const loadData = await apiGetAllInvestasi(`?cat=bursa&page=${pageNew}`);
|
||||
setActivePage((val) => val + 1);
|
||||
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{(item) => <Investasi_ComponentCardBerandaNew data={item as any} />}
|
||||
</ScrollOnly>
|
||||
)
|
||||
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user