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

fix pdf to image investasi

Browse Source
This commit is contained in:
Bagasbanuna02
2025-02-26 14:49:56 +08:00
parent 32bc632387
commit 49004fb444
15 changed files with 540 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app_modules/_global/lib/api_fetch_global.ts Normal file
View File

@@ -0,0 +1,55 @@
export {
apiGetPdfToImage,
}
export interface PageData {
imageUrl: string;
pageNumber: number;
}
interface PdfResponse {
pages: PageData[];
totalPages: number;
}
const apiGetPdfToImage = async ({id}: {id: string}) => {
try {
// Fetch token from cookie
// const { token } = await fetch("/api/get-cookie").then((res) => res.json());
// if (!token) {
// console.error("No token found");
// return null;
// }
const token =
"eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7ImlkIjoiY20wdXIxeXh3MDAwMDU2bnNqbHI2MTg3cCIsIm5hbWUiOiJiYWdhcyIsImVtYWlsIjoiYmFnYXNAZ21haWwuY29tIn0sImlhdCI6MTcyNTg3MTAzNiwiZXhwIjo0ODgxNjMxMDM2fQ.wFQLcrJj66wFeqIMYk2esMx3ULaHK6RFxkiToaLCuko";
// Anda bisa menggunakan prospektusId di URL jika diperlukan
const pdfUrl = `https://wibu-storage.wibudev.com/api/pdf-to-image?url=https://wibu-storage.wibudev.com/api/files/${id}`;
const response = await fetch(pdfUrl, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error(
"Error get admin contact:",
errorData?.message || "Unknown error"
);
return null;
}
const jsonData: PdfResponse = await response.json();
return jsonData;
} catch (error) {
console.error("Error get admin contact:", error);
throw error; // Re-throw the error to handle it in the calling function
}
};

7
src/app_modules/investasi/_component/detail/comp_card_daftar_document.tsx
View File

@@ -22,10 +22,9 @@ export function Investasi_ComponentCardDaftarDocument({
justify="center"
h={"100%"}
onClick={() => {
router.push(
NEW_RouterInvestasi.file_prospektus({ id: data.fileId }),
{ scroll: false }
);
router.push(NEW_RouterInvestasi.file_dokumen({ id: data.fileId }), {
scroll: false,
});
setVisible(true);
}}
>

2
src/app_modules/investasi/_component/detail/comp_card_rekap_document.tsx
View File

@@ -97,7 +97,7 @@ export function Investasi_ComponentCardRekapDocument({
span={"auto"}
onClick={() => {
router.push(
NEW_RouterInvestasi.file_prospektus({ id: data.fileId }),
NEW_RouterInvestasi.file_dokumen({ id: data.fileId }),
{ scroll: false }
);
setVisible(true);

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

@@ -3,27 +3,85 @@
import { APIs } from "@/lib";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { Box } from "@mantine/core";
import { Box, Stack } from "@mantine/core";
import { IconX } from "@tabler/icons-react";
import dynamic from "next/dynamic";
const PdfToImage = dynamic(
() =>
import("../../_view/file_view/view_file_viewer").then((mod) => mod.default),
{ ssr: false }
);
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";
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);
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]);
export function Investasi_UiFileViewDokumen({
dokumenId,
}: {
dokumenId: string;
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
header={<UIGlobal_LayoutHeaderTamplate title="Pratinjau Dokumen" iconLeft={<IconX />} />}
>
<Box mb={"lg"}>
<PdfToImage id={dokumenId} path={APIs.GET_NO_PARAMS} />
<Box mb="lg">
{loading ? (
<CustomSkeleton height={"80vh"} width={"100%"} />
) : error ? (
<Stack>
<ComponentGlobal_IsEmptyData text="Maaf, PDF mengalami error" />
<ComponentGlobal_IsEmptyData text={error} />
</Stack>
) : (
<div
ref={pdfsRef}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
{pdfPages?.map((page, index) => (
<Image
key={`page-${index}`}
src={page.imageUrl}
alt={`Page ${page.pageNumber}`}
className="pdf-page"
width={500} // Adjust width as needed
height={707} // Adjust height as needed
style={{ width: "100%", marginBottom: "10px" }}
/>
))}
</div>
)}
</Box>
</UIGlobal_LayoutTamplate>
</>

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

@@ -1,33 +1,90 @@
"use client";
import { APIs } from "@/lib";
import { RouterInvestasi_OLD } from "@/lib/router_hipmi/router_investasi";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import {
apiGetPdfToImage,
PageData,
} from "@/app_modules/_global/lib/api_fetch_global";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { Box } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Stack } from "@mantine/core";
import { IconX } from "@tabler/icons-react";
import dynamic from "next/dynamic";
const PdfToImage = dynamic(
() =>
import("../../_view/file_view/view_file_viewer").then((mod) => mod.default),
{ ssr: false }
);
import Image from "next/image";
import { useParams } from "next/navigation";
import { useEffect, useRef, useState } from "react";
export function Investasi_UiFileViewProspektus() {
const param = useParams<{ id: string }>();
const prospektusId = 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);
useEffect(() => {
const fetchPdfData = async () => {
try {
setLoading(true);
const response = await apiGetPdfToImage({ id: prospektusId });
console.log("res:", response)
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();
}, [prospektusId]);
export function Investasi_UiFileViewProspektus({
pospektusId,
}: {
pospektusId: string;
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="" iconLeft={<IconX />} />}
>
<Box mb={"lg"}>
<PdfToImage
id={pospektusId}
path={APIs.GET_NO_PARAMS}
header={
<UIGlobal_LayoutHeaderTamplate
title="Pratinjau Prospektus"
iconLeft={<IconX />}
/>
}
>
<Box mb="lg">
{loading ? (
<CustomSkeleton height={"80vh"} width={"100%"} />
) : error ? (
<Stack>
<ComponentGlobal_IsEmptyData text="Maaf, PDF mengalami error" />
<ComponentGlobal_IsEmptyData text={error} />
</Stack>
) : (
<div
ref={pdfsRef}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
{pdfPages?.map((page, index) => (
<Image
key={`page-${index}`}
src={page.imageUrl}
alt={`Page ${page.pageNumber}`}
className="pdf-page"
width={500} // Adjust width as needed
height={707} // Adjust height as needed
style={{ width: "100%", marginBottom: "10px" }}
/>
))}
</div>
)}
</Box>
</UIGlobal_LayoutTamplate>
</>

19
src/app_modules/katalog/portofolio/component/button_more_new.tsx
View File

@@ -118,18 +118,13 @@ export default function ComponentPortofolio_ButtonMoreNew({
return (
<>
{
userLoginId === authorId && (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color={MainColor.white} />
</ActionIcon>
)
// : (
// <ActionIcon disabled variant="transparent">
// <CustomSkeleton h={20} w={20} radius={"100%"} />
// </ActionIcon>
// )
}
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>
)}
<UIGlobal_Drawer
opened={openDrawer}