Fix: Investasi

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

src/app_modules/_global/ui/index.ts

@@ -1,4 +1,5 @@
 import UIGlobal_Drawer from "./ui_drawer";
+import UIGlobal_DrawerCustom from "./ui_drawer_custom";
 import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
 import { UIGlobal_ImagePreview } from "./ui_image_preview";
 import UIGlobal_LayoutDefault from "./ui_layout_default";
@@ -15,3 +16,4 @@ export { UIGlobal_SplashScreen };
 export { UIGlobal_ImagePreview };
 export { UIGlobal_NotUserImagePreview };
 export { UIGlobal_LayoutDefault };
+export { UIGlobal_DrawerCustom };

src/app_modules/_global/ui/ui_drawer_custom.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AccentColor } from "@/app_modules/_global/color";
+import {
+  ActionIcon,
+  Box,
+  Drawer,
+  Group,
+  SimpleGrid,
+  Stack,
+} from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import React from "react";
+
+interface MODEL_DRAWER {
+  id: string;
+  name: string;
+  icon: string;
+  path: string;
+}
+export default function UIGlobal_DrawerCustom({
+  opened,
+  close,
+  component,
+}: {
+  opened: boolean;
+  close: () => void;
+  component: React.ReactNode;
+}) {
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <Box w={"100%"} >
+            {component}
+          </Box>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_image_preview.tsx

@@ -9,6 +9,7 @@ import {
   Container,
   Image,
   rem,
+  ScrollArea,
   Skeleton,
   Text,
   Title,
@@ -20,10 +21,12 @@ import { useState } from "react";
 import { MainColor } from "../color";
 import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
 import { UIHeader } from "./ui_layout_tamplate";
+import ComponentGlobal_Loader from "../component/loader";
 
 export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   const url = APIs.GET({ fileId: fileId });
 
@@ -63,23 +66,31 @@ export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
                 hideButtonLeft
                 customButtonRight={
                   <ActionIcon
-                    onClick={() => router.back()}
+                    onClick={() => {
+                      router.back(), setIsLoading(true);
+                    }}
                     variant="transparent"
                   >
-                    <IconX color={MainColor.yellow} />
+                    {isLoading ? (
+                      <ComponentGlobal_Loader />
+                    ) : (
+                      <IconX color={MainColor.yellow} />
+                    )}
                   </ActionIcon>
                 }
               />
             }
           />
 
-          <Box style={{ zIndex: 0 }} h={"92vh"} pos={"static"} px={"lg"}>
+          <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
             {isImage === null ? (
               <Skeleton height={200} radius={"sm"} />
             ) : isImage ? (
-              <Center>
-                <Image alt="Image" src={url} maw={400} miw={200} />
-              </Center>
+              <ScrollArea h={"100%"}>
+                <Center>
+                  <Image alt="Image" src={url} maw={500} miw={200} />
+                </Center>
+              </ScrollArea>
             ) : (
               <Box
                 bg={"gray"}