Fix : Avatar

Deskripsi:
- Ubah avatar yang image nya di ambil dari storage wibu server
- Avatar forum
- Avatra job
- Avatar Investasi
- Avatar donasi
## No Issuee

src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx

@@ -1,7 +1,7 @@
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { MainColor } from "@/app_modules/_global/color";
 import {
-    ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
@@ -20,13 +20,11 @@ export function Portofolio_ComponentButtonSelanjutnya({
   dataPortofolio,
   file,
   dataMedsos,
-  setIsFile,
 }: {
   profileId: string;
   dataPortofolio: MODEL_PORTOFOLIO_OLD;
   file: File;
   dataMedsos: any;
-  setIsFile: any;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);

src/app_modules/katalog/portofolio/create/view.tsx

@@ -4,7 +4,6 @@ import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
 import {
   AspectRatio,
@@ -49,7 +48,6 @@ export default function CreatePortofolio({
 
   const [file, setFile] = useState<File | any>(null);
   const [img, setImg] = useState<any | null>(null);
-  const [isFile, setIsFile] = useState(false);
 
   return (
     <>
@@ -186,16 +184,8 @@ export default function CreatePortofolio({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  if (files.size > 2000000) {
-                    ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
-                      3000
-                    );
-                  } else {
-                    setImg(buffer);
-                    setFile(files);
-                    setIsFile(false);
-                  }
+                  setImg(buffer);
+                  setFile(files);
                 } catch (error) {
                   console.log(error);
                 }
@@ -307,7 +297,6 @@ export default function CreatePortofolio({
           dataMedsos={dataMedsos}
           file={file}
           profileId={profileId}
-          setIsFile={setIsFile}
         />
       </Stack>
 

src/app_modules/katalog/profile/_component/comp_load_avatar.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { pathAssetImage } from "@/app/lib";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { AccentColor } from "@/app_modules/_global/color";
-import { Avatar, Image, Skeleton } from "@mantine/core";
+import { Avatar, Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { CSSProperties, useState } from "react";
@@ -17,6 +18,7 @@ export function Profile_ComponentAvatarProfile({
 }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setLoading] = useState(false);
 
   const url = APIs.GET({ fileId: fileId, size: "200" });
 
@@ -70,18 +72,33 @@ export function Profile_ComponentAvatarProfile({
 
   return (
     <>
-      <Avatar
-        bg={"white"}
-        style={style}
-        radius={"50%"}
-        size={100}
-        src={url}
-        onClick={() =>
-          router.push(routerImagePreview.main({ id: fileId }), {
-            scroll: false,
-          })
-        }
-      />
+      <Center>
+        <Avatar
+          bg={"white"}
+          style={style}
+          radius={"50%"}
+          size={100}
+          src={url}
+          opacity={isLoading ? 0.5 : 1}
+          onClick={() => {
+            router.push(RouterImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+            setLoading(true);
+          }}
+        />
+        {isLoading && (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        )}
+      </Center>
     </>
   );
 }

src/app_modules/katalog/profile/_component/comp_load_background.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
-import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { RouterImagePreview } from "@/app/lib";
+import { Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function Profile_ComponentLoadBackgroundImage({
   fileId,
 }: {
@@ -15,7 +15,7 @@ export function Profile_ComponentLoadBackgroundImage({
 }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
-
+  const [isLoading, setLoading] = useState(false);
   const url = APIs.GET({ fileId: fileId });
 
   useShallowEffect(() => {
@@ -45,7 +45,7 @@ export function Profile_ComponentLoadBackgroundImage({
             maw={150}
             m={"auto"}
             p={"xs"}
-            src={"/aset/global/no-image.svg"}
+            src={pathAssetImage.no_image}
           />
         </Center>
       </>
@@ -53,23 +53,40 @@ export function Profile_ComponentLoadBackgroundImage({
 
   return (
     <>
-      <Image
-        onClick={() =>
-          router.push(routerImagePreview.main({ id: fileId }), {
-            scroll: false,
-          })
-        }
-        style={{
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: "1px",
-          borderRadius: "5px",
-        }}
-        radius={5}
-        height={200}
-        alt="Image"
-        src={url}
-      />
+      <Center>
+        <Image
+          onClick={() => {
+            setLoading(true);
+            router.push(RouterImagePreview.main({ 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/katalog/ui/ui_profile.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { APIs } from "@/app/lib";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
 import {
@@ -70,12 +69,6 @@ export function Profile_UiView({
           <Profile_ComponentLoadBackgroundImage
             fileId={profile.imageBackgroundId as any}
           />
-          {/* <Image
-            radius={"sm"}
-            height={200}
-            alt="Background"
-            src={APIs.GET({ fileId: profile.imageBackgroundId as string })}
-          /> */}
 
           <Box
             sx={{
@@ -95,19 +88,6 @@ export function Profile_UiView({
                   borderWidth: "2px",
                 }}
               />
-              {/* <Avatar
-                bg={"gray.2"}
-                sx={{
-                  borderStyle: "solid",
-                  borderColor: AccentColor.darkblue,
-                  borderWidth: "2px",
-                }}
-                src={
-                  APIs.GET({fileId: profile.imageId as any})
-                }
-                size={100}
-                radius={"100%"}
-              /> */}
             </Center>
             <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
               <Text fw={"bold"} lineClamp={1}>