Fix: Avatar

Deskripsi:
- Avatar job
- Avatar collaboration
- Avatar event
## No Issuue

src/app_modules/_global/ui/index.ts

@@ -1,8 +1,10 @@
 import UIGlobal_Drawer from "./ui_drawer";
 import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
 import { UIGlobal_ImagePreview } from "./ui_image_preview";
+import UIGlobal_LayoutDefault from "./ui_layout_default";
 import UIGlobal_LayoutTamplate from "./ui_layout_tamplate";
 import UIGlobal_Modal from "./ui_modal";
+import { UIGlobal_NotUserImagePreview } from "./ui_not_user_image_preview";
 import UIGlobal_SplashScreen from "./ui_splash";
 
 export { UIGlobal_LayoutTamplate };
@@ -11,3 +13,5 @@ export { UIGlobal_Drawer };
 export { UIGlobal_Modal };
 export { UIGlobal_SplashScreen };
 export { UIGlobal_ImagePreview };
+export { UIGlobal_NotUserImagePreview };
+export { UIGlobal_LayoutDefault };

src/app_modules/_global/ui/ui_layout_default.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  BackgroundImage,
+  Box,
+  Container,
+  rem,
+  ScrollArea,
+} from "@mantine/core";
+import { MainColor } from "../color";
+
+export default function UIGlobal_LayoutDefault({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  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}>
+          <BackgroundImage
+            src={"/aset/global/main_background.png"}
+            h={"100vh"}
+            style={{ position: "relative" }}
+          >
+            <Box style={{ zIndex: 0 }} h={"100vh"} pos={"static"}>
+              <ScrollArea h={"100%"} px={"md"}>
+                {children}
+              </ScrollArea>
+            </Box>
+          </BackgroundImage>
+        </Container>
+      </Box>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_layout_tamplate.tsx

@@ -4,12 +4,11 @@ import {
   BackgroundImage,
   Box,
   Container,
-  Footer,
   rem,
-  ScrollArea,
+  ScrollArea
 } from "@mantine/core";
-import { AccentColor, MainColor } from "../color/color_pallet";
 import React from "react";
+import { AccentColor, MainColor } from "../color/color_pallet";
 
 export default function UIGlobal_LayoutTamplate({
   children,

src/app_modules/_global/ui/ui_not_user_image_preview.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import {
+    ActionIcon,
+    Box,
+    Center,
+    Container,
+    Image,
+    rem,
+    Skeleton
+} 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_NotUserImagePreview({ 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>
+    </>
+  );
+}