upd : investasi portofolio
Deskripsi: - api pada list investasi portofolio - semua status No Issues
This commit is contained in:
@@ -98,6 +98,38 @@ export async function GET(request: Request) {
|
||||
if (userLoginId == null) {
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
|
||||
}
|
||||
|
||||
const data = await prisma.investasi.findMany({
|
||||
take: 5,
|
||||
skip: dataSkip,
|
||||
orderBy: {
|
||||
updatedAt: "desc",
|
||||
},
|
||||
where: {
|
||||
authorId: userLoginId,
|
||||
masterStatusInvestasiId: status,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
targetDana: true,
|
||||
imageId: true,
|
||||
countDown: true,
|
||||
updatedAt: true,
|
||||
MasterPencarianInvestor: {
|
||||
select: {
|
||||
name: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dataFix = data.map((v: any) => ({
|
||||
..._.omit(v, ["MasterPencarianInvestor"]),
|
||||
pencarianInvestor: v.MasterPencarianInvestor.name
|
||||
}))
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
import { investasi_funGetPortofolioByStatusId } from "@/app_modules/investasi/_fun";
|
||||
import { Investasi_UiPortofolio } from "@/app_modules/investasi/_ui";
|
||||
import { Investasi_UiPortofolio, Investasi_UiPortofolioNew } from "@/app_modules/investasi/_ui";
|
||||
import getStatusInvestasi from "@/app_modules/investasi/fun/master/get_status_investasi";
|
||||
|
||||
export default async function Page({ params }: { params: { id: string } }) {
|
||||
const statusId = params.id;
|
||||
// const statusId = params.id;
|
||||
const listStatus = await getStatusInvestasi();
|
||||
const dataPortofolio = await investasi_funGetPortofolioByStatusId({
|
||||
page: 1,
|
||||
statusId: statusId,
|
||||
});
|
||||
// const dataPortofolio = await investasi_funGetPortofolioByStatusId({
|
||||
// page: 1,
|
||||
// statusId: statusId,
|
||||
// });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Investasi_UiPortofolio
|
||||
{/* <Investasi_UiPortofolio
|
||||
statusId={statusId}
|
||||
listStatus={listStatus as any}
|
||||
dataPortofolio={dataPortofolio as any}
|
||||
/>
|
||||
/> */}
|
||||
<Investasi_UiPortofolioNew listStatus={listStatus as any} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
|
||||
import { Grid, Stack, Text } from "@mantine/core";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { IDataInvestasiBursa } from "../../_lib/type_investasi";
|
||||
|
||||
export function Investasi_ComponentCardPortofolio_NotPublishNew({ data, }: { data: IDataInvestasiBursa; }) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<ComponentGlobal_CardStyles
|
||||
onClickHandler={() => {
|
||||
router.push(NEW_RouterInvestasi.detail_portofolio({ id: data.id }), { scroll: false });
|
||||
}}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Text fw={"bold"} lineClamp={1}>
|
||||
{" "}
|
||||
{_.startCase(data.title)}
|
||||
</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Target Dana:</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+data.targetDana)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<ComponentGlobal_LoadImageCustom
|
||||
fileId={data.imageId}
|
||||
height={80}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</ComponentGlobal_CardStyles>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import { ComponentGlobal_CardLoadingOverlay, ComponentGlobal_LoadImageCustom, } from "@/app_modules/_global/component";
|
||||
import { Box, Grid, Group, Stack, Text } from "@mantine/core";
|
||||
import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
|
||||
import _ from "lodash";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { IDataInvestasiBursa } from "../../_lib/type_investasi";
|
||||
import { Investasi_ComponentStylesCard } from "../comp_card_border_and_background";
|
||||
|
||||
export function Investasi_ComponentCardPortofolioPublishNew({ data }: { data: IDataInvestasiBursa; }) {
|
||||
const router = useRouter();
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Investasi_ComponentStylesCard
|
||||
marginBottom={"15px"}
|
||||
onClickHandler={() => {
|
||||
router.push(NEW_RouterInvestasi.detail_main({ id: data?.id }), {
|
||||
scroll: false,
|
||||
});
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<Text fw={"bold"}> {_.capitalize(data?.title)}</Text>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Target Dana:</Text>
|
||||
<Text>
|
||||
Rp.{" "}
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
maximumSignificantDigits: 10,
|
||||
}).format(+data?.targetDana)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={4}>
|
||||
<ComponentGlobal_LoadImageCustom
|
||||
height={80}
|
||||
fileId={data?.imageId}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Group position="center" mt={"md"}>
|
||||
{Number(data?.pencarianInvestor) -
|
||||
moment(new Date()).diff(new Date(data?.updatedAt), "days") <=
|
||||
0 ? (
|
||||
<Group position="right">
|
||||
<IconCircleCheck color="green" />
|
||||
<Text c={"green"}>Selesai</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Group
|
||||
position="center"
|
||||
style={{ fontSize: 10, fontWeight: "bold" }}
|
||||
>
|
||||
<Group>
|
||||
{Number(data?.pencarianInvestor) -
|
||||
moment(new Date()).diff(new Date(data?.countDown), "days") <=
|
||||
0 ? (
|
||||
<Group>
|
||||
<IconChecklist />
|
||||
<Text>Selesai</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Box>
|
||||
Sisa Waktu : {}
|
||||
{Number(data?.pencarianInvestor) -
|
||||
moment(new Date()).diff(
|
||||
new Date(data?.countDown),
|
||||
"days"
|
||||
)}{" "}
|
||||
hari
|
||||
</Box>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
)}
|
||||
</Group>
|
||||
{visible && <ComponentGlobal_CardLoadingOverlay />}
|
||||
</Investasi_ComponentStylesCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -20,5 +20,7 @@ export interface IDataInvestasiBursa {
|
||||
imageId: string
|
||||
progress: string
|
||||
countDown: string
|
||||
targetDana: string
|
||||
pencarianInvestor: string
|
||||
updatedAt: Date
|
||||
}
|
||||
@@ -26,6 +26,7 @@ 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";
|
||||
import { Investasi_UiPortofolioNew } from "./main/ui_portofolio_new";
|
||||
|
||||
export { Investasi_UiProsesPembelian };
|
||||
export { Investasi_UiMetodePembayaran };
|
||||
@@ -55,3 +56,4 @@ export { Investasi_UiCreateBerita };
|
||||
export { Investasi_UiDetailBerita };
|
||||
export { Investasi_UiEditInvestasiNew }
|
||||
export { Investasi_ViewBerandaNew }
|
||||
export { Investasi_UiPortofolioNew }
|
||||
|
||||
56
src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx
Normal file
56
src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
|
||||
import { Stack, Tabs } from "@mantine/core";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { Investasi_ViewPortofolioNew } from "../../_view/main/portofolio/view_portofolio_new";
|
||||
|
||||
export function Investasi_UiPortofolioNew({ listStatus }: { listStatus: MODEL_NEW_DEFAULT_MASTER[] }) {
|
||||
const param = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
variant="pills"
|
||||
radius="xl"
|
||||
defaultValue={param.id}
|
||||
styles={{
|
||||
tabsList: {
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 99,
|
||||
},
|
||||
}}
|
||||
value={param.id}
|
||||
onTabChange={(val: any) => {
|
||||
router.push(NEW_RouterInvestasi.portofolio({ id: val }));
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Tabs.List grow mb={"xs"}>
|
||||
{listStatus.map((e) => (
|
||||
<Tabs.Tab
|
||||
w={"20%"}
|
||||
key={e.id}
|
||||
value={e.id}
|
||||
fw={"bold"}
|
||||
style={{
|
||||
transition: "ease 0.5s ",
|
||||
backgroundColor:
|
||||
param.id === e.id ? MainColor.yellow : AccentColor.blue,
|
||||
color: param.id === e.id ? "black" : "white",
|
||||
}}
|
||||
>
|
||||
{e.name}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
|
||||
<Investasi_ViewPortofolioNew />
|
||||
</Stack>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
|
||||
import { Box, Grid, Skeleton } from "@mantine/core";
|
||||
|
||||
export default function SkeletonInvestasiPortofolio() {
|
||||
return (
|
||||
<>
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<ComponentGlobal_CardStyles key={index}>
|
||||
<Grid>
|
||||
<Grid.Col span={7}>
|
||||
<Box>
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<Box key={i} py={5}>
|
||||
<Grid align="center">
|
||||
<Grid.Col span={12}>
|
||||
<Skeleton w={"90%"} h={23} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={5}>
|
||||
<Skeleton w={"100%"} height={100} radius="md" />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</ComponentGlobal_CardStyles>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
|
||||
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
|
||||
import { Investasi_ComponentCardPortofolio_NotPublishNew } from "@/app_modules/investasi/_component/main/comp_card_portofolio_not_publish_new";
|
||||
import { Investasi_ComponentCardPortofolioPublishNew } from "@/app_modules/investasi/_component/main/comp_card_portofolio_publish_new";
|
||||
import { apiGetAllInvestasi } from "@/app_modules/investasi/_lib/api_interface";
|
||||
import { IDataInvestasiBursa } from "@/app_modules/investasi/_lib/type_investasi";
|
||||
import { Box, Center } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import SkeletonInvestasiPortofolio from "./skeleton_portofolio";
|
||||
|
||||
export function Investasi_ViewPortofolioNew() {
|
||||
const param = useParams<{ id: string }>();
|
||||
const [data, setData] = useState<IDataInvestasiBursa[]>([]);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
async function getDataInvestasi() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetAllInvestasi(`?cat=portofolio&status=${param.id}&page=1`)
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getDataInvestasi()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonInvestasiPortofolio />
|
||||
:
|
||||
_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="75vh"
|
||||
renderLoading={() => (
|
||||
<Center>
|
||||
<ComponentGlobal_Loader size={25} />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const pageNew = activePage + 1
|
||||
const loadData = await apiGetAllInvestasi(`?cat=portofolio&status=${param.id}&page=${pageNew}`)
|
||||
setActivePage((val) => val + 1);
|
||||
|
||||
return loadData;
|
||||
}}
|
||||
>
|
||||
{
|
||||
param.id == "1" ?
|
||||
(item) => (<Investasi_ComponentCardPortofolioPublishNew data={item} />)
|
||||
:
|
||||
(item) => (<Investasi_ComponentCardPortofolio_NotPublishNew data={item} />)
|
||||
}
|
||||
</ScrollOnly>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user