Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/_global/component/comp_author_name_and_avatar.tsx

@@ -38,7 +38,7 @@ export default function ComponentGlobal_AvatarAndAuthorName({
             onClick={() => {
               if (dataUser?.Profile?.id) {
                 setVisible(true);
-                router.push(RouterProfile.katalog + dataUser?.Profile?.id);
+                router.push(RouterProfile.katalogOLD + dataUser?.Profile?.id);
               } else {
                 ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
               }

src/app_modules/_global/component/comp_avatar_and_username.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ActionIcon, Avatar, Grid, Stack, Text } from "@mantine/core";
+import { Prisma } from "@prisma/client";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
+import ComponentGlobal_Loader from "./loader";
+import { funGlobal_CheckProfile } from "../fun/get";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
+
+type IFontSize = "xs" | "sm" | "md" | "lg" | "xl"
+export function ComponentGlobal_AvatarAndUsername({
+  profile,
+  component,
+  sizeAvatar,
+  fontSize
+}: {
+  profile: Prisma.ProfileSelect;
+  component?: React.ReactNode;
+  sizeAvatar?: number;
+  fontSize?: IFontSize | {}
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  async function onCheckProfile() {
+    const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
+
+    if (res !== null) {
+      setVisible(true);
+      router.push(RouterProfile.katalog({ id: profile.id as any }));
+    } else {
+      ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+    }
+  }
+
+  return (
+    <>
+      <Grid align="flex-start" justify="space-around">
+        <Grid.Col span={"content"} style={{ minHeight: 50 }}>
+          <ActionIcon
+            radius={"xl"}
+            variant="transparent"
+            onClick={() => onCheckProfile()}
+          >
+            {visible ? (
+              <Avatar radius={"xl"} size={40}>
+                <ComponentGlobal_Loader />
+              </Avatar>
+            ) : (
+              <ComponentGlobal_LoaderAvatar
+                fileId={profile.imageId as any}
+                sizeAvatar={sizeAvatar}
+              />
+            )}
+          </ActionIcon>
+        </Grid.Col>
+        <Grid.Col span={"auto"} style={{ minHeight: 50 }} >
+          <Stack justify="center"  h={30}>
+            <Text
+              fw={"bold"}
+              fz={fontSize ? fontSize : "md"}
+              lineClamp={1}
+              onClick={() => onCheckProfile()}
+            >
+              {profile?.name}
+            </Text>
+          </Stack>
+        </Grid.Col>
+
+        {component && (
+          <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
+            {component}
+          </Grid.Col>
+        )}
+      </Grid>
+    </>
+  );
+}

src/app_modules/_global/component/comp_box_upload_image.tsx

@@ -5,12 +5,12 @@ import { Box } from "@mantine/core";
  * 
  * @param  children
  * @tutorial | 
-<AspectRatio ratio={1 / 1}  mt={5} maw={300} mx={"auto"} >
+* <AspectRatio ratio={1 / 1}  mt={5} maw={300} mx={"auto"} >
 <Image
 style={{ maxHeight: 250 }}
 alt="Avatar"
 src={image ? image : APIs.GET({ fileId: profile.imageId as any })}/>
-</AspectRatio> 
+* </AspectRatio> 
  * @returns folllow like this
  */
 export function ComponentGlobal_BoxUploadImage({

src/app_modules/_global/component/comp_card_box_and_background.tsx

@@ -27,8 +27,8 @@ export function ComponentGlobal_CardStyles({
             ? backgroundColor
             : AccentColor.darkblue,
           border: `2px solid ${border ? border : AccentColor.blue}`,
-          paddingInline: "15px",
-          paddingBlock: "15px",
+          paddingInline: "16px",
+          paddingBlock: "20px",
           borderRadius: "10px",
           color: color ? color : "white",
           height: height ? height : "auto",

src/app_modules/_global/component/comp_load_avatar.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Avatar, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import ComponentGlobal_Loader from "./loader";
+import { APIs } from "@/app/lib";
+
+export function ComponentGlobal_LoaderAvatar({
+  fileId,
+  imageSize,
+  sizeAvatar,
+}: {
+  fileId: string;
+  imageSize?: string;
+  sizeAvatar?: number;
+}) {
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+
+  const url = APIs.GET({ fileId: fileId, size: imageSize });
+
+  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 (
+    <>
+      {isImage === null ? (
+        // <Avatar size={sizeAvatar ? sizeAvatar : 40} radius={"100%"}>
+        //   <ComponentGlobal_Loader />
+        // </Avatar>
+        <Avatar
+          size={sizeAvatar ? sizeAvatar : 40}
+          radius={"100%"}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+          }}
+        >
+          <ComponentGlobal_Loader />
+        </Avatar>
+      ) : (
+        <Avatar
+          size={sizeAvatar ? sizeAvatar : 40}
+          radius={"100%"}
+          src={isImage ? url : "/aset/global/avatar.png"}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+          }}
+        />
+      )}
+    </>
+  );
+}

src/app_modules/_global/component/comp_load_image.tsx

@@ -1,23 +1,31 @@
 "use client";
 
-import { AspectRatio, Box, Center, Image } from "@mantine/core";
+import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import ComponentGlobal_Loader from "./loader";
+import { useRouter } from "next/navigation";
+import { APIs } from "@/app/lib";
+import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
 
 type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_LoadImage({
-  url,
+  fileId,
   maw,
   h,
   radius,
 }: {
-  url: string;
+  fileId: string;
   maw?: number | string;
   h?: number;
   radius?: IRadius;
 }) {
+  const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const url = APIs.GET({ fileId: fileId });
 
   useShallowEffect(() => {
     onLoadImage();
@@ -37,40 +45,55 @@ export function ComponentGlobal_LoadImage({
 
   if (isImage === null)
     return (
-      <Center h={250}>
-        <ComponentGlobal_Loader variant="dots" size={50} />
+      // <Center h={250}>
+      //   <ComponentGlobal_Loader variant="dots" size={50} />
+      // </Center>
+      <Center>
+        <Skeleton h={250} radius={"sm"} w={200} />
       </Center>
     );
 
   if (!isImage)
     return (
       <>
-        <Center h={250} >
-          <Image
-            alt="No Image"
-            maw={150}
-            m={"auto"}
-            p={"xs"}
-            src={"/aset/global/no-image.svg"}
-          />
+        <Center h={250}>
+          <Image alt="No Image" maw={150} src={pathAssetImage.no_image} />
         </Center>
       </>
     );
 
   return (
     <>
-      <Box h={h ? h : 250}>
-        <Center h={"100%"}>
+      <Center h={"100%"}>
+        <Image
+          onClick={() => {
+            setIsLoading(true);
+            router.push(routerImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          opacity={isLoading ? 0.5 : 1}
+          radius={radius ? radius : 0}
+          alt="Image"
+          maw={maw ? maw : 200}
+          miw={200}
+          src={url}
+        />
+
+        {isLoading ? (
           <Image
-            radius={radius ? radius : 0}
-            alt="Image"
-            maw={maw ? maw : 200}
-            m={"auto"}
-            p={"xs"}
-            src={url}
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
           />
-        </Center>
-      </Box>
+        ) : (
+          ""
+        )}
+      </Center>
     </>
   );
 }

src/app_modules/_global/component/comp_loading_card.tsx

@@ -1,4 +1,5 @@
 import { Overlay, Center, Loader } from "@mantine/core";
+import { MainColor } from "../color";
 
 export default function ComponentGlobal_CardLoadingOverlay({
   size,
@@ -13,8 +14,8 @@ export default function ComponentGlobal_CardLoadingOverlay({
         <Center h={"100%"}>
           <Loader
             variant={variant ? variant : "dots"}
-            size={size ? size : 20}
-            color="white"
+            size={size ? size : 40}
+            color={MainColor.yellow}
           />
         </Center>
       </Overlay>

src/app_modules/_global/component/index.ts

@@ -1,8 +1,10 @@
 import { ComponentGlobal_ButtonUploadFileImage } from "../button/comp_button_upload_photo";
 import ComponentGlobal_BoxInformation from "./box_information";
 import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
+import { ComponentGlobal_AvatarAndUsername } from "./comp_avatar_and_username";
 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_CardLoadingOverlay from "./comp_loading_card";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
@@ -21,3 +23,5 @@ export { ComponentGlobal_BoxUploadImage };
 export { ComponentGlobal_LoadImage };
 export { ComponentGlobal_ErrorInput };
 export { ComponentGlobal_ButtonUploadFileImage };
+export { ComponentGlobal_LoaderAvatar };
+export { ComponentGlobal_AvatarAndUsername };