Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/katalog/profile/_component/button/comp_button_update_background_profile.tsx

@@ -21,12 +21,15 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   async function onUpdate() {
+    setLoading(true);
     const uploadFile = await funGlobal_UploadToStorage({
       file: file,
       dirId: DIRECTORY_ID.profile_background,
     });
-    if (!uploadFile.success)
+    if (!uploadFile.success) {
+      setLoading(false);
       return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
+    }
 
     const res = await profile_funUpdateBackground({
       profileId: profileId,
@@ -37,6 +40,7 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
       ComponentGlobal_NotifikasiBerhasil(res.message);
       router.back();
     } else {
+      setLoading(false);
       ComponentGlobal_NotifikasiGagal(res.message);
     }
   }

src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx

@@ -23,12 +23,15 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   async function onUpdate() {
+    setLoading(true);
     const uploadPhoto = await funGlobal_UploadToStorage({
       file: file,
       dirId: DIRECTORY_ID.profile_foto,
     });
-    if (!uploadPhoto.success)
+    if (!uploadPhoto.success) {
+      setLoading(false);
       return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
+    }
 
     const res = await profile_funUpdatePhoto({
       fileId: uploadPhoto.data.id,
@@ -39,6 +42,7 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
       ComponentGlobal_NotifikasiBerhasil(res.message);
       router.back();
     } else {
+      setLoading(false);
       ComponentGlobal_NotifikasiGagal(res.message);
     }
   }

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

@@ -1,20 +1,25 @@
 "use client";
 
+import { APIs } from "@/app/lib";
+import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { AccentColor } from "@/app_modules/_global/color";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { Avatar, Box, Center, Image, Paper, Skeleton } from "@mantine/core";
+import { Avatar, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 import { CSSProperties, useState } from "react";
 
 export function Profile_ComponentAvatarProfile({
-  url,
+  fileId,
   style,
 }: {
-  url: string;
+  fileId: string;
   style?: CSSProperties;
 }) {
+  const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
+  const url = APIs.GET({ fileId: fileId, size: "200" });
+
   useShallowEffect(() => {
     onLoadImage();
   }, []);
@@ -70,12 +75,12 @@ export function Profile_ComponentAvatarProfile({
         style={style}
         radius={"50%"}
         size={100}
-        sx={{
-          borderStyle: "solid",
-          borderWidth: "0.5px",
-          borderColor: "white",
-        }}
         src={url}
+        onClick={() =>
+          router.push(routerImagePreview.main({ id: fileId }), {
+            scroll: false,
+          })
+        }
       />
     </>
   );

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

@@ -1,19 +1,23 @@
 "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 { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function Profile_ComponentLoadBackgroundImage({
-  url,
-  radius,
+  fileId,
 }: {
-  url: string;
-  radius?: IRadius;
+  fileId: string;
 }) {
+  const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
+  const url = APIs.GET({ fileId: fileId });
+
   useShallowEffect(() => {
     onLoadImage();
   }, []);
@@ -35,7 +39,7 @@ export function Profile_ComponentLoadBackgroundImage({
   if (!isImage)
     return (
       <>
-        <Center h={200} bg={"white"} style={{borderRadius: "10px"}} >
+        <Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
           <Image
             alt="No Image"
             maw={150}
@@ -49,7 +53,23 @@ export function Profile_ComponentLoadBackgroundImage({
 
   return (
     <>
-      <Image height={200} radius={radius ? radius : 0} alt="Image" src={url} />
+      <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}
+      />
     </>
   );
 }