Fix: admin investasi

Deskripsi:
- Fix image dari server wibu
## No Issue

src/app_modules/admin/_admin_global/_component/comp_admin_load_image.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { APIs, RouterAdminGlobal } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function Admin_ComponentLoadImageLandscape({
+  fileId,
+}: {
+  fileId: string;
+}) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setLoading] = useState(false);
+  const url = APIs.GET({ fileId: fileId });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null) return <Skeleton h={200} w={"100%"} />;
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={200} bg={"white"} style={{ borderRadius: "5px" }}>
+          <Image
+            alt="No Image"
+            maw={150}
+            m={"auto"}
+            p={"xs"}
+            src={pathAssetImage.no_image}
+          />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      <Center>
+        <Image
+          onClick={() => {
+            setLoading(true);
+
+            router.push(RouterAdminGlobal.preview_image({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+            borderRadius: "5px",
+          }}
+          radius={"4px"}
+          height={200}
+          alt="Image"
+          opacity={isLoading ? 0.5 : 1}
+          src={url}
+        />
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/admin/_admin_global/_component/comp_admin_modal_report.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Modal, Stack, Textarea, Group, Button } from "@mantine/core";
+import React from "react";
+
+export function Admin_ComponentModalReport({
+  opened,
+  onClose,
+  title,
+  onHandlerChange,
+  buttonKanan,
+  buttonKiri,
+}: {
+  opened: any;
+  onClose: () => void;
+  title: string;
+  onHandlerChange: (val: any) => void;
+  buttonKanan: React.ReactNode;
+  buttonKiri: React.ReactNode;
+}) {
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={onClose}
+        title={title}
+        size={"sm"}
+        centered
+        withCloseButton={false}
+      >
+        <Stack>
+          <Textarea
+            autosize
+            minRows={3}
+            maxRows={5}
+            placeholder="Masukan alasan penolakan"
+            onChange={onHandlerChange}
+          />
+          <Group position="right">
+            {buttonKiri}
+            {buttonKanan}
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/admin/_admin_global/_component/index.ts

@@ -1,5 +1,7 @@
 import { ComponentAdminGlobal_TitlePage } from "./title_page";
 import { ComponentAdminGlobal_TampilanRupiah } from "./comp_admin_tampilan_rupiah";
+import { Admin_ComponentModalReport } from "./comp_admin_modal_report";
 
 export { ComponentAdminGlobal_TampilanRupiah };
 export { ComponentAdminGlobal_TitlePage };
+export { Admin_ComponentModalReport };

src/app_modules/admin/_admin_global/_ui/ui_admin_image_preview.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { APIs, pathAssetImage } from "@/app/lib";
+import { Box, Center, Image, ScrollArea, Skeleton, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import AdminGlobal_ComponentBackButton from "../back_button";
+
+export function Admin_UiImagePreview({ fileId }: { fileId: string }) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const url = APIs.GET({ fileId: fileId });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    const res = await fetch(url);
+    try {
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  return (
+    <>
+      <Stack>
+        <AdminGlobal_ComponentBackButton />
+
+        <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
+          {isImage === null ? (
+            <Skeleton height={200} radius={"sm"} />
+          ) : isImage ? (
+            <ScrollArea h={"100%"}>
+              <Center>
+                <Image alt="Image" src={url} maw={500} miw={200} />
+              </Center>
+            </ScrollArea>
+          ) : (
+            <Box
+              bg={"gray"}
+              style={{
+                borderColor: "white",
+                borderStyle: "solid",
+                borderWidth: "0.5px",
+                borderRadius: "5px",
+                height: 300,
+              }}
+            >
+              <Center h={"100%"}>
+                <Image
+                  alt="Image"
+                  height={100}
+                  width={100}
+                  src={pathAssetImage.no_image}
+                />
+              </Center>
+            </Box>
+          )}
+        </Box>
+      </Stack>
+    </>
+  );
+}

src/app_modules/admin/_admin_global/back_button.tsx

@@ -5,7 +5,7 @@ import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function ComponentAdminGlobal_BackButton({
+export default function AdminGlobal_ComponentBackButton({
   path,
 }: {
   path?: string;

src/app_modules/admin/_admin_global/index.ts

@@ -0,0 +1,5 @@
+import { Admin_ComponentLoadImageLandscape } from "./_component/comp_admin_load_image";
+import { Admin_UiImagePreview } from "./_ui/ui_admin_image_preview";
+
+export { Admin_ComponentLoadImageLandscape };
+export { Admin_UiImagePreview };