wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix investasi:

Browse Source 
- beranda progress
- admin publish and reject button
This commit is contained in:
Bagasbanuna02
2025-02-27 03:47:14 +08:00
parent f0a5b2df8b
commit bc9b68f520
14 changed files with 443 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/app_modules/investasi/_component/main/com_card_beranda_new.tsx
View File

@@ -1,109 +1,141 @@
import { NEW_RouterInvestasi } from "@/lib/router_hipmi/router_investasi";
import { Warna } from "@/lib/warna";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
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()
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 c={MainColor.white} fw={"bold"} align="center" lineClamp={2}>
{data?.title}
</Text>
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
c={MainColor.white}
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"
style={{ backgroundColor: MainColor.white }}
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 c={MainColor.white} truncate>Sisa waktu:</Text>
<Text c={MainColor.white} truncate>
{Number(data?.pencarianInvestor) -
moment(new Date()).diff(
new Date(data?.countDown),
"days"
)}
</Text>
<Text c={MainColor.white} truncate>Hari</Text>
</Group>
)}
</Box>
)}
<Progress
label={
data?.progress === "0"
? +data?.progress + " %"
: (+data?.progress).toFixed(2) + " %"
}
value={+data?.progress}
color={MainColor.yellow}
size="xl"
radius="xl"
style={{ backgroundColor: MainColor.white }}
styles={{
root: {
position: "relative",
},
label: {
color: MainColor.black,
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
textAlign: "center",
paddingLeft: "30px",
},
}}
/>
<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>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</ComponentGlobal_CardStyles>
</>
);
) : (
<Group position="right" spacing={"xs"}>
<Text c={MainColor.white} truncate>
Sisa waktu:
</Text>
<Text c={MainColor.white} truncate>
{Number(data?.pencarianInvestor) -
moment(new Date()).diff(
new Date(data?.countDown),
"days"
)}
</Text>
<Text c={MainColor.white} truncate>
Hari
</Text>
</Group>
)}
</Box>
)}
</Group>
</Stack>
</Grid.Col>
</Grid>
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

124
src/app_modules/investasi/_ui/file_view/ui_file_view_dokumen.tsx
View File

@@ -1,56 +1,89 @@
"use client";
import { APIs } from "@/lib";
import { MainColor } from "@/app_modules/_global/color";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import {
apiGetPdfToImage,
PageData,
} from "@/app_modules/_global/lib/api_fetch_global";
import { UIGlobal_DrawerCustom } from "@/app_modules/_global/ui";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { Box, Stack } from "@mantine/core";
import { IconX } from "@tabler/icons-react";
import dynamic from "next/dynamic";
import { apiGetPdfToImage, PageData } from "@/app_modules/_global/lib/api_fetch_global";
import { useParams } from "next/navigation";
import { useState, useRef, useEffect } from "react";
import PdfToImage from "../../_view/file_view/view_file_viewer";
import Image from "next/image";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ActionIcon, Box, Stack, Text } from "@mantine/core";
import { IconDotsVertical, IconDownload, IconX } from "@tabler/icons-react";
import Image from "next/image";
import { useParams } from "next/navigation";
import { useEffect, useRef, useState } from "react";
export function Investasi_UiFileViewDokumen() {
const param = useParams<{ id: string }>();
const dokumenId = param.id;
const [pdfPages, setPdfPages] = useState<PageData[] | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const pdfsRef = useRef<HTMLDivElement>(null);
const param = useParams<{ id: string }>();
const dokumenId = param.id;
useEffect(() => {
const fetchPdfData = async () => {
try {
setLoading(true);
const response = await apiGetPdfToImage({ id: dokumenId });
const [pdfPages, setPdfPages] = useState<PageData[] | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const pdfsRef = useRef<HTMLDivElement>(null);
const [isOpen, setOpen] = useState(false);
if (response) {
setPdfPages(response.pages as any);
setLoading(false);
}
} catch (err) {
console.error("Error fetching PDF:", err);
setError(
err instanceof Error ? err.message : "Unknown error occurred"
);
useEffect(() => {
const fetchPdfData = async () => {
try {
setLoading(true);
const response = await apiGetPdfToImage({ id: dokumenId });
if (response) {
setPdfPages(response.pages as any);
setLoading(false);
}
};
} catch (err) {
console.error("Error fetching PDF:", err);
setError(err instanceof Error ? err.message : "Unknown error occurred");
setLoading(false);
}
};
fetchPdfData();
}, [dokumenId]);
fetchPdfData();
}, [dokumenId]);
const handleDownloadFromAPI = async () => {
try {
const response = await fetch(
`https://wibu-storage.wibudev.com/api/files/${dokumenId}`
);
const blob = await response.blob(); // Konversi respons ke Blob
const url = window.URL.createObjectURL(blob); // Buat URL untuk Blob
const link = document.createElement("a");
link.href = url;
link.download = `file-dokumen-${new Date()}.pdf`; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url); // Bersihkan URL
} catch (error) {
console.error("Error downloading file:", error);
}
};
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Pratinjau Dokumen" iconLeft={<IconX />} />}
header={
<UIGlobal_LayoutHeaderTamplate
title="Pratinjau Dokumen"
iconLeft={<IconX />}
customButtonRight={
<ActionIcon
variant="transparent"
onClick={() => {
setOpen(true);
}}
>
<IconDotsVertical color="white" />
</ActionIcon>
}
/>
}
>
<Box mb="lg">
{loading ? (
@@ -84,6 +117,25 @@ export function Investasi_UiFileViewDokumen() {
)}
</Box>
</UIGlobal_LayoutTamplate>
<UIGlobal_DrawerCustom
close={() => setOpen(false)}
opened={isOpen}
component={
<Stack align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c={MainColor.white}
onClick={handleDownloadFromAPI}
>
<IconDownload />
</ActionIcon>
<Text fz={"sm"} align="center" color={MainColor.white}>
Download
</Text>
</Stack>
}
/>
</>
);
}

57
src/app_modules/investasi/_ui/file_view/ui_file_view_prospektus.tsx
View File

@@ -1,15 +1,17 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import {
apiGetPdfToImage,
PageData,
} from "@/app_modules/_global/lib/api_fetch_global";
import { UIGlobal_DrawerCustom } from "@/app_modules/_global/ui";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Stack } from "@mantine/core";
import { IconX } from "@tabler/icons-react";
import { ActionIcon, Box, Stack, Text } from "@mantine/core";
import { IconDotsVertical, IconDownload, IconX } from "@tabler/icons-react";
import Image from "next/image";
import { useParams } from "next/navigation";
import { useEffect, useRef, useState } from "react";
@@ -22,6 +24,7 @@ export function Investasi_UiFileViewProspektus() {
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const pdfsRef = useRef<HTMLDivElement>(null);
const [isOpen, setOpen] = useState(false);
useEffect(() => {
const fetchPdfData = async () => {
@@ -29,8 +32,6 @@ export function Investasi_UiFileViewProspektus() {
setLoading(true);
const response = await apiGetPdfToImage({ id: prospektusId });
console.log("res:", response)
if (response) {
setPdfPages(response.pages as any);
setLoading(false);
@@ -45,6 +46,25 @@ export function Investasi_UiFileViewProspektus() {
fetchPdfData();
}, [prospektusId]);
const handleDownloadFromAPI = async () => {
try {
const response = await fetch(
`https://wibu-storage.wibudev.com/api/files/${prospektusId}`
);
const blob = await response.blob(); // Konversi respons ke Blob
const url = window.URL.createObjectURL(blob); // Buat URL untuk Blob
const link = document.createElement("a");
link.href = url;
link.download = `file-portofolio-${new Date()}.pdf`; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url); // Bersihkan URL
} catch (error) {
console.error("Error downloading file:", error);
}
};
return (
<>
<UIGlobal_LayoutTamplate
@@ -52,6 +72,16 @@ export function Investasi_UiFileViewProspektus() {
<UIGlobal_LayoutHeaderTamplate
title="Pratinjau Prospektus"
iconLeft={<IconX />}
customButtonRight={
<ActionIcon
variant="transparent"
onClick={() => {
setOpen(true);
}}
>
<IconDotsVertical color="white" />
</ActionIcon>
}
/>
}
>
@@ -87,6 +117,25 @@ export function Investasi_UiFileViewProspektus() {
)}
</Box>
</UIGlobal_LayoutTamplate>
<UIGlobal_DrawerCustom
close={() => setOpen(false)}
opened={isOpen}
component={
<Stack align="center" spacing={"xs"}>
<ActionIcon
onClick={handleDownloadFromAPI}
variant="transparent"
c={MainColor.white}
>
<IconDownload />
</ActionIcon>
<Text fz={"sm"} align="center" color={MainColor.white}>
Download
</Text>
</Stack>
}
/>
</>
);
}

9
src/app_modules/investasi/_view/main/view_beranda_new.tsx
View File

@@ -1,11 +1,12 @@
"use client";
import { RouterInvestasi_OLD } from "@/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 { gs_investasiTriggerBeranda } from "@/lib/global_state";
import { RouterInvestasi_OLD } from "@/lib/router_hipmi/router_investasi";
import { Box, Center } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
@@ -14,8 +15,6 @@ import { Investasi_ComponentCardBerandaNew } from "../../_component/main/com_car
import { apiGetAllInvestasi } from "../../_lib/api_interface";
import { IDataInvestasiBursa } from "../../_lib/type_investasi";
import SkeletonInvestasiBursa from "./skeleton_beranda";
import { useAtom } from "jotai";
import { gs_investasiTriggerBeranda } from "@/lib/global_state";
export function Investasi_ViewBerandaNew() {
const [data, setData] = useState<IDataInvestasiBursa[]>([]);
@@ -86,7 +85,7 @@ export function Investasi_ViewBerandaNew() {
const loadData = await apiGetAllInvestasi(
`?cat=bursa&page=${pageNew}`
);
setActivePage((val) => val + 1);
setActivePage(pageNew);
return loadData.data as any;
}}