Fix: User search & Event

Deskripsi:
- Tampilan avatar dan username
## NO Issue

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