Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

src/app_modules/_global/author_name_on_header.tsx

@@ -43,7 +43,7 @@ export default function ComponentGlobal_AuthorNameAndAvatar({
             onClick={() => {
               if (profileId) {
                 setVisible(true);
-                router.push(RouterProfile.katalog + profileId);
+                router.push(RouterProfile.katalogOLD + profileId);
               } else {
                 ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
               }

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 };

src/app_modules/_global/fun/get/fun_check_profile.tsx

@@ -0,0 +1,17 @@
+"use server";
+
+import { prisma } from "@/app/lib";
+
+export async function funGlobal_CheckProfile({
+  profileId,
+}: {
+  profileId: string;
+}) {
+  const res = await prisma.profile.findUnique({
+    where: {
+      id: profileId,
+    },
+  });
+
+  return res;
+}

src/app_modules/_global/fun/get/index.ts

@@ -1,4 +1,5 @@
 import { funCheckToken } from "./fun_cek_token";
+import { funGlobal_CheckProfile } from "./fun_check_profile";
 import { funGlobal_getNomorAdmin } from "./fun_get_nomor_admin";
 import { funGetUserIdByToken } from "./fun_get_user_id_by_token";
 import { funGlobal_getMasterKategoriApp } from "./fun_master_kategori_app";
@@ -7,3 +8,4 @@ export { funGlobal_getMasterKategoriApp };
 export { funGlobal_getNomorAdmin };
 export { funCheckToken };
 export { funGetUserIdByToken };
+export { funGlobal_CheckProfile };

src/app_modules/_global/ui/index.ts

@@ -1,5 +1,6 @@
 import UIGlobal_Drawer from "./ui_drawer";
 import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
+import { UIGlobal_ImagePreview } from "./ui_image_preview";
 import UIGlobal_LayoutTamplate from "./ui_layout_tamplate";
 import UIGlobal_Modal from "./ui_modal";
 import UIGlobal_SplashScreen from "./ui_splash";
@@ -9,3 +10,4 @@ export { UIGlobal_LayoutHeaderTamplate };
 export { UIGlobal_Drawer };
 export { UIGlobal_Modal };
 export { UIGlobal_SplashScreen };
+export { UIGlobal_ImagePreview };

src/app_modules/_global/ui/ui_drawer.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import {
   ActionIcon,
   Drawer,

src/app_modules/_global/ui/ui_header_tamplate.tsx

@@ -26,6 +26,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
   iconRight,
   routerRight,
   customButtonRight,
+  backgroundColor,
 }: {
   title: string;
   posotion?: any;
@@ -38,6 +39,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
   iconRight?: any;
   routerRight?: any;
   customButtonRight?: React.ReactNode;
+  backgroundColor?: string;
 }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
@@ -52,7 +54,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
           //   borderBottom: `1px solid ${AccentColor.blue}`,
           borderStyle: "none",
         }}
-        bg={MainColor.darkblue}
+        bg={backgroundColor ? backgroundColor : MainColor.darkblue}
       >
         <Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
           {hideButtonLeft ? (

src/app_modules/_global/ui/ui_image_preview.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import {
+  ActionIcon,
+  Box,
+  Center,
+  Container,
+  Image,
+  rem,
+  Skeleton,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MainColor } from "../color";
+import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
+import { UIHeader } from "./ui_layout_tamplate";
+
+export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+
+  const url = APIs.GET({ fileId: fileId });
+
+  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 (
+    <>
+      <Box
+        w={"100%"}
+        h={"100%"}
+        style={{
+          overflowY: "auto",
+          overflowX: "auto",
+          backgroundColor: MainColor.black,
+          position: "fixed",
+        }}
+      >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
+          <UIHeader
+            header={
+              <UIGlobal_LayoutHeaderTamplate
+                title="Preview Image"
+                hideButtonLeft
+                customButtonRight={
+                  <ActionIcon
+                    onClick={() => router.back()}
+                    variant="transparent"
+                  >
+                    <IconX color={MainColor.yellow} />
+                  </ActionIcon>
+                }
+              />
+            }
+          />
+
+          <Box style={{ zIndex: 0 }} h={"92vh"} pos={"static"} px={"lg"}>
+            {isImage === null ? (
+              <Skeleton height={200} radius={"sm"} />
+            ) : isImage ? (
+              <Center>
+                <Image alt="Image" src={url} maw={400} miw={200} />
+              </Center>
+            ) : (
+              <Box
+                bg={"gray"}
+                style={{
+                  borderColor: "white",
+                  borderStyle: "solid",
+                  borderWidth: "0.5px",
+                  borderRadius: "5px",
+                  height: 300,
+                }}
+              >
+                <Center h={"100%"}>
+                  <Image
+                    alt="Image"
+                    height={100}
+                    width={100}
+                    src={pathAssetImage.no_image}
+                  />
+                </Center>
+              </Box>
+            )}
+          </Box>
+        </Container>
+      </Box>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_layout_tamplate.tsx

@@ -32,7 +32,7 @@ export default function UIGlobal_LayoutTamplate({
           position: "fixed",
         }}
       >
-        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue} >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
           <BackgroundImage
             src={"/aset/global/main_background.png"}
             h={"100vh"}
@@ -50,7 +50,7 @@ export default function UIGlobal_LayoutTamplate({
   );
 }
 
-function UIHeader({ header }: { header: React.ReactNode }) {
+export function UIHeader({ header }: { header: React.ReactNode }) {
   return (
     <>
       {header ? (
@@ -72,7 +72,7 @@ function UIHeader({ header }: { header: React.ReactNode }) {
   );
 }
 
-function UIChildren({
+export function UIChildren({
   children,
   footer,
 }: {
@@ -95,8 +95,11 @@ function UIFooter({ footer }: { footer: React.ReactNode }) {
     <>
       {footer ? (
         <Box
+          // w dihilangkan kalau relative
+          w={"100%"}
           style={{
-            position: "relative",
+            // position: "relative",
+            position: "fixed",
             bottom: 0,
             height: "10vh",
             zIndex: 10,
@@ -104,16 +107,20 @@ function UIFooter({ footer }: { footer: React.ReactNode }) {
             borderTop: `2px solid ${AccentColor.blue}`,
             borderRight: `1px solid ${AccentColor.blue}`,
             borderLeft: `1px solid ${AccentColor.blue}`,
+            // maxWidth dihilangkan kalau relative
+            maxWidth: rem(500),
           }}
           bg={AccentColor.darkblue}
         >
           <Box
             h={"100%"}
+            // maw dihilangkan kalau relative
+            maw={rem(500)}
             style={{
               borderRadius: "20px 20px 0px 0px",
               width: "100%",
             }}
-            pos={"absolute"}
+            // pos={"absolute"}
           >
             {footer}
           </Box>

src/app_modules/_global/ui/ui_modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Modal, Stack, Title, Group, Button, Box } from "@mantine/core";
 import { MainColor, AccentColor } from "../color/color_pallet";