Fix: Investasi

Deskripsi:
- Upload gambar investasi ke storage wibu
- Upload bukti transfer ke storage wibu
# No Issue

src/app_modules/_global/component/box_information.tsx

@@ -12,15 +12,16 @@ export default function ComponentGlobal_BoxInformation({
 }) {
   return (
     <>
-      {isReport ? (
-        <Paper
-          bg={"blue.3"}
-          p={10}
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `1px solid ${AccentColor.skyblue}`,
-          }}
-        >
+      <Paper
+        bg={"blue.3"}
+        p={10}
+        style={{
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.softblue}`,
+          borderRadius: "10px",
+        }}
+      >
+        {isReport ? (
           <Stack spacing={0}>
             <Text
               fz={fonsize ? fonsize : 12}
@@ -34,16 +35,7 @@ export default function ComponentGlobal_BoxInformation({
               {informasi}
             </Text>
           </Stack>
-        </Paper>
-      ) : (
-        <Paper
-          bg={"blue.3"}
-          p={10}
-          style={{
-            backgroundColor: AccentColor.blue,
-            border: `1px solid ${AccentColor.skyblue}`,
-          }}
-        >
+        ) : (
           <Group>
             <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
               *{" "}
@@ -52,8 +44,10 @@ export default function ComponentGlobal_BoxInformation({
               </Text>
             </Text>
           </Group>
-        </Paper>
-      )}
+        )}
+      </Paper>
     </>
   );
+
+  
 }

src/app_modules/_global/component/comp_box_upload_image.tsx

@@ -9,7 +9,7 @@ import { Box } from "@mantine/core";
 <Image
 style={{ maxHeight: 250 }}
 alt="Avatar"
-src={image ? image : APIs.GET({ fileId: profile.imageId as any })}/>
+src={image ? image : APIs.GET({ fileId: <imageId> })}/>
 * </AspectRatio> 
  * @returns folllow like this
  */
@@ -22,7 +22,7 @@ export function ComponentGlobal_BoxUploadImage({
 }) {
   return (
     <>
-      <ComponentGlobal_CardStyles height={height ? height : 300}>
+      <ComponentGlobal_CardStyles height={height ? height : 300} >
         <Box
           style={{
             height: "100%",

src/app_modules/_global/component/comp_load_image.tsx

@@ -44,11 +44,9 @@ export function ComponentGlobal_LoadImage({
 
   if (isImage === null)
     return (
-      // <Center h={250}>
-      //   <ComponentGlobal_Loader variant="dots" size={50} />
-      // </Center>
-      <Center>
-        <Skeleton h={250} radius={"sm"} w={200} />
+     
+      <Center h={"100%"}>
+        <Skeleton h={250} radius={"sm"} w={250} />
       </Center>
     );
 
@@ -74,6 +72,7 @@ export function ComponentGlobal_LoadImage({
           opacity={isLoading ? 0.5 : 1}
           radius={radius ? radius : 0}
           alt="Image"
+          height={h ? h : 250}
           maw={maw ? maw : 200}
           miw={200}
           src={url}

src/app_modules/_global/component/comp_load_image_custom.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { APIs } 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 ComponentGlobal_LoadImageCustom({
+  fileId,
+  height,
+}: {
+  fileId: string;
+  height: number;
+}) {
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  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={height ? height : 100} w={"100%"} />;
+
+  return (
+    <>
+      {isImage ? (
+        <Image alt="No Image" height={height} src={url} radius={"sm"} />
+      ) : (
+        <Center
+          bg={"white"}
+          p={"sm"}
+          h={height ? height : 80}
+          style={{ borderRadius: "5px" }}
+        >
+          <Image
+            alt="No Image"
+            height={50}
+            width={50}
+            src={pathAssetImage.no_image}
+          />
+        </Center>
+      )}
+    </>
+  );
+}

src/app_modules/_global/component/comp_load_image_landscape.tsx

@@ -39,7 +39,7 @@ export function ComponentGlobal_LoadImageLandscape({
   if (!isImage)
     return (
       <>
-        <Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
+        <Center h={200} bg={"white"} style={{ borderRadius: "5px" }}>
           <Image
             alt="No Image"
             maw={150}
@@ -55,6 +55,7 @@ export function ComponentGlobal_LoadImageLandscape({
     <>
       <Center>
         <Image
+
           onClick={() => {
             setLoading(true);
             router.push(RouterImagePreview.main({ id: fileId }), {

src/app_modules/_global/component/index.ts

@@ -5,6 +5,7 @@ import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
 import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
 import { ComponentGlobal_LoadImage } from "./comp_load_image";
+import { ComponentGlobal_LoadImageCustom } from "./comp_load_image_custom";
 import { ComponentGlobal_LoadImageLandscape } from "./comp_load_image_landscape";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
@@ -27,3 +28,4 @@ export { ComponentGlobal_LoaderAvatar };
 export { ComponentGlobal_AvatarAndUsername };
 export { ComponentGlobal_NotUserLoadImage };
 export { ComponentGlobal_LoadImageLandscape };
+export { ComponentGlobal_LoadImageCustom };