Merge pull request #110 from bipproduction/profile/avatar

Profile/avatar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": true,
   "prisma": {
     "seed": "npx tsx prisma/seed.ts"

prisma/schema.prisma

@@ -231,6 +231,9 @@ model Investasi {
   MasterProgresInvestasi   MasterProgresInvestasi? @relation(fields: [masterProgresInvestasiId], references: [id])
   masterProgresInvestasiId String?
   Investasi_Invoice        Investasi_Invoice[]
+
+  // imageId      String?
+  // prospektusId String?
 }
 
 model MasterPencarianInvestor {

src/app/dev/investasi/detail_saham_terbeli/[id]/layout.tsx

@@ -1,8 +0,0 @@
-import { LayoutDetailSahamTerbeli } from "@/app_modules/investasi";
-import React from "react";
-
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return<>
-    <LayoutDetailSahamTerbeli>{children}</LayoutDetailSahamTerbeli>
-    </>
-}

src/app/dev/investasi/detail_saham_terbeli/[id]/page.tsx

@@ -1,13 +0,0 @@
-import { DetailSahamTerbeli } from "@/app_modules/investasi";
-import funTotalInvestorByIdInvestasi from "@/app_modules/investasi/fun/fun_total_investor_by_id";
-import getOneTransaksiBerhasilByIdInvestasi from "@/app_modules/investasi/fun/get_one_transaksi_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  const dataTransaksi = await getOneTransaksiBerhasilByIdInvestasi(params.id);
-  const investor = await funTotalInvestorByIdInvestasi(
-    dataTransaksi?.Investasi.id as any
-  );
-  // console.log(investor);
-
-  return <DetailSahamTerbeli dataTransaksi={dataTransaksi as any} investor={investor} />;
-}

src/app/lib/id-derectory.ts

@@ -6,6 +6,7 @@ const DIRECTORY_ID = {
   map_image: "cm0yjqnxl000910njplqho07w",
   investasi_image: "cm0yjs35h000b10njb35o12h1",
   investasi_bukti_transfer: "cm0yjsflu000d10njrc3lnqho",
+  investasi_pdf: "cm1soio74003p38bjyciwf1oy",
   donasi_image: "cm0yk1coh000f10nj597a99kv",
   donasi_bukti_transfer: "cm0yk1pmh000h10njhi6m8b8t",
   job_image: "cm0ypp6zl0003kp7jf59zuvjy",

src/app/lib/index.ts

@@ -2,10 +2,12 @@ import APIs from "./APIs";
 import DIRECTORY_ID from "./id-derectory";
 import prisma from "./prisma";
 import { pathAssetImage } from "./path_asset_image";
-
+import { RouterImagePreview } from "./router_hipmi/router_image_preview";
 
 export { DIRECTORY_ID };
 export { prisma };
 export { APIs };
-export { pathAssetImage as RouterAssetImage };
+export { pathAssetImage };
 
+// Router
+export { RouterImagePreview };

src/app/lib/router_hipmi/router_image_preview.ts

@@ -1,4 +1,4 @@
-export const routerImagePreview = {
+export const RouterImagePreview = {
   main: ({ id }: { id: string }) => `/dev/image-preview/${id}`,
   not_user_image: ({ id }: { id: string }) => `/preview-image/${id}`,
 };

src/app_modules/_global/component/comp_load_image.tsx

@@ -2,7 +2,7 @@
 
 import { APIs } from "@/app/lib";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -67,7 +67,7 @@ export function ComponentGlobal_LoadImage({
         <Image
           onClick={() => {
             setIsLoading(true);
-            router.push(routerImagePreview.main({ id: fileId }), {
+            router.push(RouterImagePreview.main({ id: fileId }), {
               scroll: false,
             });
           }}

src/app_modules/_global/component/comp_load_image_landscape.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+import { RouterImagePreview } from "@/app/lib";
+import { Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentGlobal_LoadImageLandscape({
+  fileId,
+}: {
+  fileId: string;
+}) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setLoading] = useState(false);
+  const url = APIs.GET({ fileId: fileId });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null) return <Skeleton h={200} w={"100%"} />;
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
+          <Image
+            alt="No Image"
+            maw={150}
+            m={"auto"}
+            p={"xs"}
+            src={pathAssetImage.no_image}
+          />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      <Center>
+        <Image
+          onClick={() => {
+            setLoading(true);
+            router.push(RouterImagePreview.main({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          style={{
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+            borderRadius: "5px",
+          }}
+          radius={"4px"}
+          height={200}
+          alt="Image"
+          opacity={isLoading ? 0.5 : 1}
+          src={url}
+        />
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/_global/component/comp_not_user_load_image.tsx

@@ -2,7 +2,7 @@
 
 import { APIs } from "@/app/lib";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -62,7 +62,7 @@ export function ComponentGlobal_NotUserLoadImage({
         <Image
           onClick={() => {
             setIsLoading(true);
-            router.push(routerImagePreview.not_user_image({ id: fileId }), {
+            router.push(RouterImagePreview.not_user_image({ id: fileId }), {
               scroll: false,
             });
           }}

src/app_modules/_global/component/index.ts

@@ -6,6 +6,7 @@ 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_LoadImageLandscape } from "./comp_load_image_landscape";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
@@ -27,3 +28,4 @@ export { ComponentGlobal_ButtonUploadFileImage };
 export { ComponentGlobal_LoaderAvatar };
 export { ComponentGlobal_AvatarAndUsername };
 export { ComponentGlobal_NotUserLoadImage };
+export { ComponentGlobal_LoadImageLandscape };

src/app_modules/donasi/component/card_view/card_publish.tsx

@@ -2,7 +2,10 @@
 
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 import {
   AspectRatio,
   Card,
@@ -31,16 +34,8 @@ export default function ComponentDonasi_CardPublish({
 
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles
-        style={{
+        onClickHandler={() => {
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-          marginBottom: "15px",
-        }}
-        onClick={() => {
           setVisible(true);
           setDonasiId(data.id);
           router.push(path + `${data.id}`);
@@ -88,7 +83,7 @@ export default function ComponentDonasi_CardPublish({
         ) : (
           ""
         )}
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx

@@ -1,8 +1,16 @@
 "use client";
 
+import { pathAssetImage, RouterImagePreview } from "@/app/lib";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoaderAvatar,
+} from "@/app_modules/_global/component";
 import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
@@ -11,6 +19,7 @@ import {
 } from "@/app_modules/donasi/model/interface";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
+  ActionIcon,
   AspectRatio,
   Box,
   Center,
@@ -23,14 +32,10 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
-import {
+import { IconBrandGmail, IconMoodSmile, IconPhone } from "@tabler/icons-react";
-  IconBrandGmail,
-  IconMoodSmile,
-  IconPhone
-} from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -39,64 +44,73 @@ export default function PenggalangDanaDonasi({
 }: {
   dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
 }) {
-  const [value, setValue] = useState(dataPenggalang);
+  const [data, setData] = useState(dataPenggalang);
 
   return (
     <>
       <Stack>
-        <InformasiPenggalang value={value as any} />
+        <InformasiPenggalang value={data as any} />
-        {value.Donasi.map((e, i) => (
+        <Stack spacing={0}>
-          <Box key={i}>
+          {data.Donasi.map((e, i) => (
-            <ComponentDonasi_CardPublish
+            <Box key={i}>
-              data={e}
+              <ComponentDonasi_CardPublish
-              path={RouterDonasi.detail_publish}
+                data={e}
-            />
+                path={RouterDonasi.detail_publish}
-          </Box>
+              />
-        ))}
+            </Box>
+          ))}
+        </Stack>
       </Stack>
     </>
   );
 }
 
 function InformasiPenggalang({ value }: { value: MODEL_USER }) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
   return (
     <>
-      {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
+      <ComponentGlobal_CardStyles>
-      <Box
+        <Stack spacing={"xl"}>
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "20px",
-          cursor: "pointer",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "10px",
-        }}
-      >
-        <Stack
-        
-          spacing={"xl"}
-        >
           <Stack align="center" spacing={0}>
-            <Paper
+            <Box h={100}>
-              radius={"100%"}
+              <ActionIcon
-              h={100}
+                size={100}
-              w={100}
+                radius={"100%"}
-              sx={{ borderStyle: "solid" }}
+                style={{
-            >
+                  borderColor: "white",
-              <Center h={"100%"}>
+                  borderStyle: "solid",
-                <Image
+                  borderWidth: "1px",
-                  radius={"100%"}
+                }}
-                  width={100}
+                opacity={isLoading ? 0.5 : 1}
-                  height={100}
+                onClick={() => {
-                  alt="Foto"
+                  router.push(
-                  src={
+                    RouterImagePreview.main({
-                    RouterProfile.api_foto_profile + value?.Profile?.imagesId
+                      id: value.Profile.imageId as any,
-                  }
+                    }),
+                    { scroll: false }
+                  );
+                  setIsLoading(true);
+                }}
+              >
+                <ComponentGlobal_LoaderAvatar
+                  fileId={value.Profile.imageId as any}
+                  sizeAvatar={100}
                 />
-              </Center>
+
-            </Paper>
+                {isLoading && (
-            <Title order={3}>@{value?.username}</Title>
+                  <Image
+                    pos={"absolute"}
+                    height={50}
+                    width={50}
+                    alt="Photo"
+                    src={pathAssetImage.new_loader}
+                  />
+                )}
+              </ActionIcon>
+            </Box>
+            <Title order={3}>@ {value?.username}</Title>
           </Stack>
           <Stack>
             <Group>
@@ -113,64 +127,7 @@ function InformasiPenggalang({ value }: { value: MODEL_USER }) {
             </Group>
           </Stack>
         </Stack>
-      </Box>
+      </ComponentGlobal_CardStyles>
-    </>
-  );
-}
-
-function DataPengganganDana({ donasi }: { donasi: MODEL_DONASI[] }) {
-  const router = useRouter();
-  const { height, width } = useViewportSize();
-  return (
-    <>
-      <Title order={5}>Peggalangan Dana Yang Dilakukan</Title>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {donasi.map((e, i) => (
-          <Box
-            key={i}
-            onClick={() => router.push(RouterDonasi.detail_main + `${e.id}`)}
-          >
-            <Stack>
-              <Grid>
-                <Grid.Col span={7}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Paper radius={"md"}>
-                      <Image
-                        alt="Foto"
-                        src={RouterDonasi.api_gambar + `${e.imagesId}`}
-                        radius={"md"}
-                      />
-                    </Paper>
-                  </AspectRatio>
-                </Grid.Col>
-                <Grid.Col span={5}>
-                  <Stack spacing={"xs"}>
-                    <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                      {e.title}
-                    </Text>
-                    <Progress value={50} color="orange" />
-                    <Stack spacing={0}>
-                      <Text fz={"sm"}>Terkumpul</Text>
-                      <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
-                        <TampilanRupiahDonasi nominal={+e.target} />
-                      </Text>
-                    </Stack>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-              {width > 575 ? "" : <Divider />}
-            </Stack>
-          </Box>
-        ))}
-      </SimpleGrid>
     </>
   );
 }

src/app_modules/donasi/fun/get/get_author_by_id.ts

@@ -17,7 +17,7 @@ export async function Donasi_getAuthorById(authorId: string) {
           id: true,
           name: true,
           email: true,
-          imagesId: true,
+          imageId: true,
         },
       },
       Donasi: {

src/app_modules/forum/component/detail_component/detail_create_komentar.tsx

@@ -93,6 +93,11 @@ export default function ComponentForum_DetailCreateKomentar({
             onChange={(val) => {
               setValue(val);
             }}
+            style={{
+              overflowY: "auto",
+              maxHeight: 100,
+              minHeight: 50,
+            }}
           />
         </Paper>
 

src/app_modules/forum/component/detail_component/detail_header.tsx

@@ -48,6 +48,8 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export default function ComponentForum_DetailHeader({
   data,
@@ -59,6 +61,7 @@ export default function ComponentForum_DetailHeader({
   onLoadData: (val: any) => void;
 }) {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
@@ -68,30 +71,38 @@ export default function ComponentForum_DetailHeader({
             span={"content"}
             onClick={() => {
               if (data?.Author?.id) {
+                setIsLoading(true);
                 router.push(RouterForum.forumku + data?.Author?.id);
               } else {
                 ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
               }
             }}
           >
-            <Avatar
+            {isLoading ? (
-              size={40}
+              <Avatar
-              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                size={40}
-              radius={"xl"}
+                radius={"100%"}
-              bg={"gray.1"}
+                style={{
-              src={
+                  borderColor: "white",
-                data?.Author.Profile.imagesId
+                  borderStyle: "solid",
-                  ? RouterProfile.api_foto_profile +
+                  borderWidth: "1px",
-                    data?.Author.Profile.imagesId
+                }}
-                  : "/aset/global/avatar.png"
+              >
-              }
+                <ComponentGlobal_Loader variant="dots" />
-            />
+              </Avatar>
+            ) : (
+              <ComponentGlobal_LoaderAvatar
+                fileId={data?.Author.Profile?.imageId as any}
+              />
+            )}
           </Grid.Col>
 
           <Grid.Col span={"auto"}>
             <Stack spacing={3}>
               <Text lineClamp={1} fz={"sm"} fw={"bold"} color="white">
-                {data?.Author.username ? data?.Author.username : "Nama author "}
+                {data?.Author.Profile.name
+                  ? data?.Author.Profile.name
+                  : "Nama author "}
               </Text>
               <Badge
                 w={70}
@@ -102,11 +113,7 @@ export default function ComponentForum_DetailHeader({
                     : "red"
                 }
               >
-                <Text fz={10}>
+                <Text fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
-                  {(data?.ForumMaster_StatusPosting.id as any) === 1
-                    ? "Open"
-                    : "Close"}
-                </Text>
               </Badge>
             </Stack>
           </Grid.Col>

src/app_modules/forum/component/detail_component/detail_list_komentar.tsx

@@ -1,18 +1,14 @@
 "use client";
 
 import {
-  Stack,
-  Center,
-  Box,
   Card,
-  Spoiler,
   Divider,
-  Text,
+  Spoiler,
+  Stack,
+  Text
 } from "@mantine/core";
-import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
 import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentForum_KomentarView({
   data,
@@ -30,8 +26,6 @@ export default function ComponentForum_KomentarView({
       <Card mb={"xs"} bg={"transparent"}>
         <Card.Section>
           <ComponentForum_KomentarAuthorNameOnHeader
-            authorName={data?.Author?.username}
-            imagesId={data?.Author?.Profile?.imagesId}
             tglPublish={data?.createdAt}
             userId={data?.Author?.id}
             komentarId={data?.id}
@@ -39,6 +33,7 @@ export default function ComponentForum_KomentarView({
             setKomentar={setKomentar}
             postingId={postingId}
             userLoginId={userLoginId}
+            profile={data.Author.Profile}
           />
         </Card.Section>
         <Card.Section sx={{ zIndex: 0 }} p={"sm"}>

src/app_modules/forum/component/detail_component/detail_view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, Stack, Group, Text } from "@mantine/core";
+import { Card, Stack, Group, Text, Box } from "@mantine/core";
 import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_DetailHeader from "./detail_header";
@@ -8,6 +8,7 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
 export default function ComponentForum_DetailForumView({
   data,
@@ -22,19 +23,9 @@ export default function ComponentForum_DetailForumView({
 }) {
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles>
-        mb={"md"}
+        <Stack>
-        p={"xl"}
+          {/* HEADER */}
-        bg={MainColor.darkblue}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-        }}
-        radius={"md"}
-      >
-        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
-
-        {/* HEADER */}
-        <Card.Section>
           <ComponentForum_DetailHeader
             data={data}
             userLoginId={userLoginId}
@@ -42,11 +33,9 @@ export default function ComponentForum_DetailForumView({
               onLoadData(val);
             }}
           />
-        </Card.Section>
 
-        {/* CONTENT */}
+          {/* CONTENT */}
-        <Card.Section sx={{ zIndex: 0 }} p={"lg"}>
+          <Box p={"lg"} >
-          <Stack spacing={"xs"}>
             <Text fz={"sm"} color="white">
               {data?.diskusi ? (
                 <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
@@ -54,11 +43,9 @@ export default function ComponentForum_DetailForumView({
                 ""
               )}
             </Text>
-          </Stack>
+          </Box>
-        </Card.Section>
 
-        {/* FOOTER */}
+          {/* FOOTER */}
-        <Card.Section>
           <Stack>
             <Group position="apart">
               <Group spacing={"xs"} px={"sm"}>
@@ -94,8 +81,8 @@ export default function ComponentForum_DetailForumView({
               </Group>
             </Group>
           </Stack>
-        </Card.Section>
+        </Stack>
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/forum/component/forumku_component/forumku_header.tsx

@@ -9,7 +9,8 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_ForumkuMoreButton from "./forumku_more_button";
-
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 
 export default function ComponentForum_ForumkuHeaderCard({
   data,
@@ -25,7 +26,6 @@ export default function ComponentForum_ForumkuHeaderCard({
   allData: any[];
 }) {
   const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
@@ -35,29 +35,15 @@ export default function ComponentForum_ForumkuHeaderCard({
             span={"content"}
             onClick={() => {
               if (data.Author.id) {
-                setIsLoading(true);
                 router.push(RouterForum.forumku + data.Author.id);
               } else {
                 ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
               }
             }}
           >
-            {isLoading ? (
+            <ComponentGlobal_LoaderAvatar
-              <Loader color="gray" variant="dots" />
+              fileId={data.Author.Profile.imageId as any}
-            ) : (
+            />
-              <Avatar
-                size={40}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                radius={"xl"}
-                bg={"gray.1"}
-                src={
-                  data.Author.Profile.imagesId
-                    ? RouterProfile.api_foto_profile +
-                      data.Author.Profile.imagesId
-                    : "/aset/global/avatar.png"
-                }
-              />
-            )}
           </Grid.Col>
 
           <Grid.Col span={"auto"}>
@@ -82,7 +68,9 @@ export default function ComponentForum_ForumkuHeaderCard({
                     : "red"
                 }
               >
-                <Text c={"white"} fz={10}>{data?.ForumMaster_StatusPosting.status}</Text>
+                <Text c={"white"} fz={10}>
+                  {data?.ForumMaster_StatusPosting.status}
+                </Text>
               </Badge>
             </Stack>
           </Grid.Col>
@@ -90,7 +78,7 @@ export default function ComponentForum_ForumkuHeaderCard({
           <Grid.Col span={"content"}>
             <Group position="center" spacing={"xs"}>
               <Group spacing={3}>
-                <Text c={"white"} fz={"sm"} >
+                <Text c={"white"} fz={"sm"}>
                   {data.createdAt !== undefined && data?.createdAt
                     ? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
                         day: "numeric",

src/app_modules/forum/component/forumku_component/forumku_view.tsx

@@ -1,14 +1,16 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import { Box, Group, Stack, Text } from "@mantine/core";
 import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_ForumkuHeaderCard from "./forumku_header";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
-
 
 export default function ComponentForum_ForumkuMainCardView({
   data,
@@ -22,23 +24,12 @@ export default function ComponentForum_ForumkuMainCardView({
   allData: any[];
 }) {
   const router = useRouter();
-  const [loadingKomen, setLoadingKomen] = useState(false);
+  const [visable, setVisible] = useState(false);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-
-  const [postingId, setPostingId] = useState("");
 
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles>
-        mb={"md"}
+        <Stack>
-        p={"xl"}
-        bg={MainColor.darkblue}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-        }}
-        radius={"md"}
-      >
-        <Card.Section>
           <ComponentForum_ForumkuHeaderCard
             data={data}
             isMoreButton={true}
@@ -46,42 +37,40 @@ export default function ComponentForum_ForumkuMainCardView({
             onLoadData={onLoadData}
             allData={allData}
           />
-        </Card.Section>
 
-        <Card.Section
+          <Box
-          sx={{ zIndex: 0 }}
+            sx={{ zIndex: 0 }}
-          p={"lg"}
+            p={"lg"}
-          onClick={() => {
+            onClick={() => {
-            router.push(RouterForum.main_detail + data?.id);
+              setVisible(true);
-          }}
+              router.push(RouterForum.main_detail + data?.id);
-        >
+            }}
-          <Text c={"white"} fz={"sm"} lineClamp={4}>
+          >
-            <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
+            <Text c={"white"} fz={"sm"} lineClamp={4}>
-          </Text>
+              <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
-        </Card.Section>
+            </Text>
+          </Box>
 
-        <Card.Section>
+          <Group spacing={"xs"} px={"sm"}>
-          <Stack>
+            {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-            <Group spacing={"xs"} px={"sm"}>
+              <IconMessageCircle color="white" size={25} />
-              <ActionIcon
+            ) : (
-                loading={loadingKomen && data?.id === postingId ? true : false}
+              <IconMessageCircleX color="gray" size={25} />
-                variant="transparent"
+            )}
-                sx={{ zIndex: 1 }}
-              >
-                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                  <IconMessageCircle color="white" size={25} />
-                ) : (
-                  <IconMessageCircleX color="gray" size={25} />
-                )}
-              </ActionIcon>
 
-              {/* <TotalKomentar postingId={e?.id} /> */}
+            <Text
-
+              c={
-              <Text c={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" : "gray"}>{data?.Forum_Komentar.length}</Text>
+                (data?.ForumMaster_StatusPosting?.id as any) === 1
-            </Group>
+                  ? "white"
-          </Stack>
+                  : "gray"
-        </Card.Section>
+              }
-      </Card>
+            >
+              {data?.Forum_Komentar.length}
+            </Text>
+          </Group>
+          {visable && <ComponentGlobal_CardLoadingOverlay />}
+        </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx

@@ -1,50 +1,41 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import moment from "moment";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import {
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-  IconCircleFilled,
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-  IconDots,
+import { Avatar, Divider, Grid, Group, Stack, Text } from "@mantine/core";
-  IconEdit,
-  IconFlag3,
-  IconMessageCircle,
-  IconTrash,
-} from "@tabler/icons-react";
 import { IconCircle } from "@tabler/icons-react";
-import { IoIosMore } from "react-icons/io";
+import { useRouter } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import { useState } from "react";
-import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
 import ComponentForum_KomentarButtonMore from "./komentar_button_more";
+import { useState } from "react";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { data } from "autoprefixer";
+import { MODEL_PROFILE } from "@/app_modules/katalog/profile/model/interface";
 
 export default function ComponentForum_KomentarAuthorNameOnHeader({
   userId,
   komentarId,
-  imagesId,
-  authorName,
   tglPublish,
   isPembatas,
   isMoreButton,
   setKomentar,
   postingId,
   userLoginId,
+  profile,
 }: {
   userId?: string;
   komentarId?: string;
-  imagesId?: string;
-  authorName?: string;
   tglPublish?: Date;
   isPembatas?: boolean;
   isMoreButton?: boolean;
   setKomentar?: any;
   postingId?: string;
   userLoginId: string;
+  profile: MODEL_PROFILE;
 }) {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
@@ -54,30 +45,35 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
             span={"content"}
             onClick={() => {
               if (userId) {
+                setIsLoading(true);
                 router.push(RouterForum.forumku + userId);
               } else {
                 ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
               }
             }}
           >
-            <Avatar
+            {isLoading ? (
-              size={30}
+              <Avatar
-              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                size={40}
-              radius={"xl"}
+                radius={"100%"}
-              bg={"gray.1"}
+                style={{
-              src={
+                  borderColor: "white",
-                imagesId
+                  borderStyle: "solid",
-                  ? RouterProfile.api_foto_profile + imagesId
+                  borderWidth: "1px",
-                  : "/aset/global/avatar.png"
+                }}
-              }
+              >
-            />
+                <ComponentGlobal_Loader variant="dots" />
+              </Avatar>
+            ) : (
+              <ComponentGlobal_LoaderAvatar fileId={profile.imageId as any} />
+            )}
           </Grid.Col>
           <Grid.Col span={"auto"}>
             <Stack justify="center" h={"100%"}>
               <Grid>
                 <Grid.Col span={"auto"}>
                   <Text color="white" lineClamp={1} fz={"sm"} fw={"bold"}>
-                    {authorName ? authorName : "Nama author  "}
+                    {profile.name ? profile.name : "Nama author  "}
                   </Text>
                 </Grid.Col>
               </Grid>

src/app_modules/forum/component/main_component/card_header.tsx

@@ -3,20 +3,14 @@
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import {
+import { Avatar, Badge, Grid, Group, Loader, Stack, Text } from "@mantine/core";
-  Avatar,
-  Badge,
-  Grid,
-  Group,
-  Loader,
-  Stack,
-  Text
-} from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_BerandaMoreButton from "./card_more_button";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 export default function ComponentForum_BerandaHeaderCard({
   data,
@@ -50,23 +44,20 @@ export default function ComponentForum_BerandaHeaderCard({
             }}
           >
             {isLoading ? (
-              <Loader color="gray" variant="dots" />
-            ) : (
               <Avatar
                 size={40}
-                sx={{
+                radius={"100%"}
+                style={{
+                  borderColor: "white",
                   borderStyle: "solid",
                   borderWidth: "1px",
-                  borderColor: "white",
                 }}
-                radius={"xl"}
+              >
-                bg={"gray.1"}
+                <ComponentGlobal_Loader variant="dots" />
-                src={
+              </Avatar>
-                  data.Author.Profile.imagesId
+            ) : (
-                    ? RouterProfile.api_foto_profile +
+              <ComponentGlobal_LoaderAvatar
-                      data.Author.Profile.imagesId
+                fileId={data.Author.Profile.imageId as any}
-                    : "/aset/global/avatar.png"
-                }
               />
             )}
           </Grid.Col>
@@ -76,8 +67,8 @@ export default function ComponentForum_BerandaHeaderCard({
               <Grid>
                 <Grid.Col span={"auto"}>
                   <Text lineClamp={1} fz={"sm"} fw={"bold"} color={"white"}>
-                    {data.Author.username
+                    {data.Author.Profile.name
-                      ? data.Author.username
+                      ? data.Author.Profile.name
                       : "Nama author  "}
                   </Text>
                 </Grid.Col>

src/app_modules/forum/component/main_component/card_view.tsx

@@ -2,10 +2,10 @@
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import {
-  AccentColor,
+  ComponentGlobal_CardLoadingOverlay,
-  MainColor,
+  ComponentGlobal_CardStyles,
-} from "@/app_modules/_global/color/color_pallet";
+} from "@/app_modules/_global/component";
-import { ActionIcon, Card, Group, Stack, Text } from "@mantine/core";
+import { Box, Group, Stack, Text } from "@mantine/core";
 import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -24,23 +24,12 @@ export default function ComponentForum_BerandaCardView({
   allData: any[];
 }) {
   const router = useRouter();
-  const [loadingKomen, setLoadingKomen] = useState(false);
+  const [visible, setVisible] = useState(false);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-
-  const [postingId, setPostingId] = useState("");
 
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles>
-        mb={"md"}
+        <Stack>
-        p={"xl"}
-        bg={MainColor.darkblue}
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-        }}
-        radius={"md"}
-      >
-        <Card.Section>
           <ComponentForum_BerandaHeaderCard
             data={data}
             isMoreButton={true}
@@ -48,42 +37,39 @@ export default function ComponentForum_BerandaCardView({
             onLoadData={onLoadData}
             allData={allData}
           />
-        </Card.Section>
 
-        <Card.Section
+          <Box
-          sx={{ zIndex: 0 }}
+            sx={{ zIndex: 0 }}
-          p={"lg"}
+            p={"lg"}
-          onClick={() => {
+            onClick={() => {
-            router.push(RouterForum.main_detail + data?.id);
+              setVisible(true), router.push(RouterForum.main_detail + data?.id);
-          }}
+            }}
-        >
+          >
-          <Text c="white" fz={"sm"} lineClamp={4}>
+            <Text c="white" fz={"sm"} lineClamp={4}>
-            <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
+              <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
-          </Text>
+            </Text>
-        </Card.Section>
+          </Box>
 
-        <Card.Section>
+          <Group spacing={"xs"}>
-          <Stack>
+            {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-            <Group spacing={"xs"} px={"sm"}>
+              <IconMessageCircle color="white" size={25} />
-              <ActionIcon
+            ) : (
-                loading={loadingKomen && data?.id === postingId ? true : false}
+              <IconMessageCircleX color="gray" size={25} />
-                variant="transparent"
+            )}
-                sx={{ zIndex: 1 }}
-              >
-                {(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
-                  <IconMessageCircle color="white" size={25} />
-                ) : (
-                  <IconMessageCircleX color="gray" size={25} />
-                )}
-              </ActionIcon>
 
-              {/* <TotalKomentar postingId={e?.id} /> */}
+            <Text
-
+              color={
-              <Text color={(data?.ForumMaster_StatusPosting?.id as any) === 1 ? "white" :"gray"}>{data?.Forum_Komentar.length}</Text>
+                (data?.ForumMaster_StatusPosting?.id as any) === 1
-            </Group>
+                  ? "white"
-          </Stack>
+                  : "gray"
-        </Card.Section>
+              }
-      </Card>
+            >
+              {data?.Forum_Komentar.length}
+            </Text>
+          </Group>
+          {visible && <ComponentGlobal_CardLoadingOverlay />}
+        </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/forum/detail/main_detail.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { Box, Center, Loader, Stack } from "@mantine/core";
+import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
 import _ from "lodash";
 import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
-
 import mqtt_client from "@/util/mqtt_client";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
@@ -27,7 +26,6 @@ export default function Forum_MainDetail({
 }) {
   const [data, setData] = useState(dataPosting);
   const [lsKomentar, setLsKomentar] = useState(listKomentar);
-
   const [activePage, setActivePage] = useState(1);
 
   // useShallowEffect(() => {
@@ -90,9 +88,8 @@ export default function Forum_MainDetail({
           ""
         )}
 
-        <Box >
+        <Box>
           <ScrollOnly
-          
             height={"60vh"}
             renderLoading={() => (
               <Center mt={"lg"}>

src/app_modules/forum/forumku/forum_profile.tsx

@@ -1,12 +1,24 @@
 "use client";
 
+import { pathAssetImage } from "@/app/lib";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { Avatar, Button, Center, Grid, Stack, Text } from "@mantine/core";
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Grid,
+  Image,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { IconCircleFilled } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 
@@ -21,25 +33,54 @@ export default function ComponentForum_ViewForumProfile({
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  const [isLoadingImage, setIsLoadingImage] = useState(false);
 
   return (
     <>
       <Center>
-        <Avatar
+        <Box
-          bg={"gray"}
+          h={100}
-          radius={"100%"}
+          style={{ borderRadius: "50%" }}
-          sx={{
+          onClick={() => {
-            borderStyle: "solid",
+            router.push(
-            borderWidth: "0.5px",
+              RouterImagePreview.main({
-            borderColor: AccentColor.yellow,
+                id: auhtorSelectedData.Profile.imageId as any,
+              }),
+              { scroll: false }
+            );
+            setIsLoadingImage(true);
           }}
-          size={100}
+        >
-          alt="foto"
+          {isLoadingImage ? (
-          src={
+            <Avatar
-            RouterProfile.api_foto_profile +
+              size={100}
-            auhtorSelectedData?.Profile?.imagesId
+              radius={"100%"}
-          }
+              style={{
-        />
+                borderColor: "white",
+                borderStyle: "solid",
+                borderWidth: "1px",
+              }}
+              opacity={0.7}
+            >
+              <ComponentGlobal_LoaderAvatar
+                sizeAvatar={100}
+                fileId={auhtorSelectedData.Profile.imageId as any}
+              />
+              <Image
+                pos={"absolute"}
+                height={50}
+                width={50}
+                alt="Photo"
+                src={pathAssetImage.new_loader}
+              />
+            </Avatar>
+          ) : (
+            <ComponentGlobal_LoaderAvatar
+              sizeAvatar={100}
+              fileId={auhtorSelectedData.Profile.imageId as any}
+            />
+          )}
+        </Box>
       </Center>
       <Grid>
         <Grid.Col span={"auto"}>
@@ -69,7 +110,7 @@ export default function ComponentForum_ViewForumProfile({
                 border: `1px solid ${AccentColor.yellow}`,
                 backgroundColor: MainColor.yellow,
               }}
-              c="white"
+              c="black"
               loaderPosition="center"
               loading={loading ? true : false}
               radius={"xl"}

src/app_modules/forum/forumku/index.tsx

@@ -2,8 +2,7 @@
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import {
-  AccentColor,
+  AccentColor
-  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
@@ -25,6 +24,7 @@ import ComponentForum_ForumkuMainCardView from "../component/forumku_component/f
 import { forum_getAllPostingByAuhtorId } from "../fun/get/get_list_posting_by_author_id";
 import { MODEL_FORUM_POSTING } from "../model/interface";
 import ComponentForum_ViewForumProfile from "./forum_profile";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 
 export default function Forum_Forumku({
   auhtorSelectedData,
@@ -46,32 +46,8 @@ export default function Forum_Forumku({
 
   return (
     <>
-      {userLoginId === auhtorSelectedData.id ? (
+      {userLoginId === auhtorSelectedData.id && (
-        <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ComponentGlobal_CreateButton path={RouterForum.create} />
-          <ActionIcon
-            opacity={scroll.y > 0 ? 0.5 : ""}
-            style={{
-              transition: "0.5s",
-              border: `1px solid ${AccentColor.skyblue}`,
-            }}
-            size={"xl"}
-            radius={"xl"}
-            variant="transparent"
-            bg={AccentColor.blue}
-            onClick={() => {
-              setLoadingCreate(true);
-              router.push(RouterForum.create);
-            }}
-          >
-            {loadingCreate ? (
-              <Loader size={25} />
-            ) : (
-              <IconPencilPlus color="white" />
-            )}
-          </ActionIcon>
-        </Affix>
-      ) : (
-        ""
       )}
 
       <Stack spacing={"xl"}>
@@ -92,7 +68,7 @@ export default function Forum_Forumku({
         ) : (
           // --- Main component --- //
           <ScrollOnly
-            height={data.length < 5 ? "60vh" : "100vh"}
+            height={data.length < 5 ? "75vh" : "100vh"}
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />

src/app_modules/forum/forumku/layout.tsx

@@ -1,13 +1,9 @@
 "use client";
 
-import { AppShell } from "@mantine/core";
-import React from "react";
-import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { IconX } from "@tabler/icons-react";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { IconX } from "@tabler/icons-react";
+import React from "react";
 
 export default function LayoutForum_Forumku({
   children,
@@ -20,25 +16,11 @@ export default function LayoutForum_Forumku({
     <>
       <UIGlobal_LayoutTamplate
         header={
-          <UIGlobal_LayoutHeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate title={"Forum"} iconLeft={<IconX />} />
-            title={`${username}`}
-            iconLeft={<IconX />}
-          />
         }
       >
         {children}
       </UIGlobal_LayoutTamplate>
-
-      {/* <AppComponentGlobal_LayoutTamplate
-        header={
-          <ComponentForum_HeaderTamplate
-            title={`${username}`}
-            changeIconBack={<IconX />}
-          />
-        }
-      >
-        {children}
-      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/forum/fun/get/get_all_komentar_by_id.ts

@@ -34,7 +34,7 @@ export async function forum_funGetAllKomentarById({
           Profile: {
             select: {
               name: true,
-              imagesId: true,
+              imageId: true,
             },
           },
         },

src/app_modules/forum/fun/get/get_list_posting_by_author_id.ts

@@ -35,7 +35,8 @@ export async function forum_getAllPostingByAuhtorId({
           Profile: {
             select: {
               id: true,
-              imagesId: true,
+              name: true,
+              imageId: true,
             },
           },
         },

src/app_modules/forum/fun/get/new_get_all_posting.ts

@@ -39,7 +39,8 @@ export async function forum_new_getAllPosting({
           Profile: {
             select: {
               id: true,
-              imagesId: true,
+              name: true,
+              imageId: true,
             },
           },
         },

src/app_modules/forum/main/layout.tsx

@@ -1,15 +1,12 @@
 "use client";
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import {
+import { ActionIcon, Avatar } from "@mantine/core";
-  ActionIcon,
-  Avatar,
-  Loader
-} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 
@@ -21,9 +18,7 @@ export default function LayoutForum_Main({
   dataAuthor: MODEL_USER;
 }) {
   const router = useRouter();
-  const [hotMenu, setHotMenu] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
-  const [loading, setLoading] = useState(false);
-
 
   return (
     <>
@@ -36,26 +31,26 @@ export default function LayoutForum_Main({
                 radius={"xl"}
                 variant="transparent"
                 onClick={() => {
-                  setLoading(true);
+                  setIsLoading(true);
                   router.push(RouterForum.forumku + dataAuthor?.id);
                 }}
               >
-                {loading ? (
+                {isLoading ? (
-                  <Loader size={20} />
-                ) : (
                   <Avatar
-                    radius={"xl"}
                     size={30}
-                    sx={{
+                    radius={"100%"}
+                    style={{
+                      borderColor: "white",
                       borderStyle: "solid",
-                      borderWidth: "0.5px",
+                      borderWidth: "1px",
-                      borderColor: "black",
                     }}
-                    alt="foto"
+                  >
-                    src={
+                    <ComponentGlobal_Loader variant="dots" />
-                      RouterProfile.api_foto_profile +
+                  </Avatar>
-                      dataAuthor?.Profile?.imagesId
+                ) : (
-                    }
+                  <ComponentGlobal_LoaderAvatar
+                    fileId={dataAuthor.Profile.imageId as any}
+                    sizeAvatar={30}
                   />
                 )}
               </ActionIcon>
@@ -65,84 +60,6 @@ export default function LayoutForum_Main({
       >
         {children}
       </UIGlobal_LayoutTamplate>
-
-      {/* <AppComponentGlobal_LayoutTamplate
-        header={
-          <Header height={50} sx={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
-              <ActionIcon
-                variant="transparent"
-                onClick={() => {
-                  setLoading(true);
-                  return router.push(RouterHome.main_home);
-                }}
-              >
-                <IconChevronLeft />
-              </ActionIcon>
-
-              <Title order={5}>Forum</Title>
-              
-              <ActionIcon
-                loading={loading ? true : false}
-                variant="transparent"
-                onClick={() => {
-                  setLoading(true);
-                  router.push(RouterForum.forumku + dataAuthor?.id);
-                }}
-              >
-                <Avatar
-                  radius={"xl"}
-                  size={30}
-                  sx={{
-                    borderStyle: "solid",
-                    borderWidth: "0.5px",
-                    borderColor: "black",
-                  }}
-                  alt="foto"
-                  src={
-                    RouterProfile.api_foto_profile +
-                    dataAuthor?.Profile?.imagesId
-                  }
-                />
-              </ActionIcon>
-            </Group>
-          </Header>
-        }
-
-        // footer={
-        //   <Footer height={60} bg={"dark"}>
-        //     <Grid>
-        //       {listFooter.map((e) => (
-        //         <Grid.Col
-        //           key={e.id}
-        //           span={"auto"}
-        //           pt={"md"}
-        //           onClick={() => {
-        //             router.replace(e.path);
-        //             setHotMenu(e.id);
-        //           }}
-        //         >
-        //           <Center>
-        //             <Stack align="center" spacing={0}>
-        //               <ActionIcon
-        //                 variant="transparent"
-        //                 c={hotMenu === e.id ? "blue" : "white"}
-        //               >
-        //                 {e.icon}
-        //               </ActionIcon>
-        //               <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
-        //                 {e.name}
-        //               </Text>
-        //             </Stack>
-        //           </Center>
-        //         </Grid.Col>
-        //       ))}
-        //     </Grid>
-        //   </Footer>
-        // }
-      >
-        {children}
-      </AppComponentGlobal_LayoutTamplate> */}
     </>
   );
 }

src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx

@@ -1,5 +1,5 @@
 import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { ComponentGlobal_AvatarAndAuthorName } from "@/app_modules/_global/component";
+import { ComponentGlobal_AvatarAndAuthorName, ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
 import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
 import {
   Stack,
@@ -25,7 +25,7 @@ export function Investasi_ComponentBoxDetailData({
     <>
       <Investasi_ComponentStylesCard>
         <Stack>
-          <ComponentGlobal_AvatarAndAuthorName dataUser={data?.Author} />
+          <ComponentGlobal_AvatarAndUsername profile={data?.Author.Profile as any} />
           <AspectRatio ratio={1 / 1} mx={0} mah={250}>
             <Image
               alt=""

src/app_modules/investasi/_component/main/comp_card_beranda.tsx

@@ -1,6 +1,9 @@
 import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
 import { Warna } from "@/app/lib/warna";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import {
   Card,
   CardSection,
@@ -19,7 +22,10 @@ import moment from "moment";
 import { MODEL_INVESTASI } from "../../_lib/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 
 export function Investasi_ComponentCardBeranda({
   data,
@@ -32,17 +38,8 @@ export function Investasi_ComponentCardBeranda({
 
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles
-        style={{
+        onClickHandler={() => {
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-          marginBottom: "15px",
-          marginInline: "15px",
-        }}
-        onClick={() => {
           setLoadingDetail(true);
           setVisible(true);
           router.push(RouterInvestasi_OLD.detail + `${data?.id}`);
@@ -77,30 +74,9 @@ export function Investasi_ComponentCardBeranda({
               size="xl"
               radius="xl"
               styles={{
-                label:{color: MainColor.black}
+                label: { color: MainColor.black },
               }}
             />
-            {/* <Progress
-              label={
-                "" +
-                (
-                  ((+data?.totalLembar - +data?.sisaLembar) /
-                    +data?.totalLembar) *
-                  100
-                ).toFixed(1) +
-                "%"
-              }
-              value={
-                +(
-                  ((+data?.totalLembar - +data?.sisaLembar) /
-                    +data?.totalLembar) *
-                  100
-                ).toFixed(1)
-              }
-              color="teal"
-              size="xl"
-              radius="xl"
-            /> */}
           </Stack>
         </CardSection>
 
@@ -158,7 +134,20 @@ export function Investasi_ComponentCardBeranda({
           </Group>
         </CardSection>
         {visible ? <ComponentGlobal_CardLoadingOverlay /> : ""}
-      </Card>
+      </ComponentGlobal_CardStyles>
+
+      {/* <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+          marginInline: "15px",
+        }}
+       
+      ></Card> */}
     </>
   );
 }

src/app_modules/investasi/_ui/main/ui_beranda.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import mqtt_client from "@/util/mqtt_client";
-import { useShallowEffect } from "@mantine/hooks";
-import React, { useState } from "react";
-import { Investasi_ComponentButtonUpdateBeranda } from "../../_component/main/comp_update_beranda";
 import { MODEL_INVESTASI } from "../../_lib/interface";
 import { Investasi_ViewBeranda } from "../../_view";
 

src/app_modules/investasi/create/view.tsx

@@ -30,13 +30,14 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { IconUpload } from "@tabler/icons-react";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { funCreateInvestasi } from "../fun/fun_create_investasi";
 import { gs_investas_menu, gs_investasi_status } from "../g_state";
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
 
 export default function InvestasiCreate({
   pencarianInvestor,
@@ -48,7 +49,7 @@ export default function InvestasiCreate({
   pembagianDeviden: MODEL_DEFAULT_MASTER_OLD[];
 }) {
   const router = useRouter();
-  const [fl, setFl] = useState<File | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
   const [pdf, setPdf] = useState<File | null>(null);
   const [filePdf, setFilePdf] = useState<any | null>(null);
@@ -83,11 +84,11 @@ export default function InvestasiCreate({
     };
 
     // if (_.values(body).includes("")) return toast("Lengkapi data");
-    if (!fl) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
+    if (!file) return ComponentGlobal_NotifikasiPeringatan("Gambar Kosong");
     if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
 
     const gmbr = new FormData();
-    gmbr.append("file", fl as any);
+    gmbr.append("file", file as any);
 
     const flPdf = new FormData();
     flPdf.append("file", pdf as any);
@@ -138,38 +139,27 @@ export default function InvestasiCreate({
 
   return (
     <>
-      <Box>
+      <Stack px={"xs"}>
-        {/* Inputan Create */}
+        <Stack spacing={0}>
-        <Stack spacing={"sm"} px={"md"}>
+          <ComponentGlobal_BoxUploadImage>
-          {img ? (
+            {img ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.softblue}`,
-                  backgroundColor: AccentColor.blue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
                 <Image
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
                   alt="Foto"
-                  src={img ? img : "/aset/no-img.png"}
+                  height={250}
-                  maw={200}
+                  src={img}
                 />
-              </Paper>
+              </AspectRatio>
-            </AspectRatio>
+            ) : (
-          ) : (
+              <Stack justify="center" align="center" h={"100%"}>
-            <Center>
+                <IconUpload color="white" />
-              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
-                <Stack justify="center" align="center" h={"100%"}>
+                  Upload Gambar
-                  <IconUpload color="gray" />
+                </Text>
-                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+              </Stack>
-                    Upload Gambar
+            )}
-                  </Text>
+          </ComponentGlobal_BoxUploadImage>
-                </Stack>
-              </Paper>
-            </Center>
-          )}
 
           {/* Upload Foto */}
           <Group position="center" mb={"md"}>
@@ -185,7 +175,7 @@ export default function InvestasiCreate({
                     ComponentGlobal_WarningMaxUpload({});
                   } else {
                     setImg(buffer);
-                    setFl(files);
+                    setFile(files);
                   }
                 } catch (error) {
                   console.log(error);
@@ -196,7 +186,7 @@ export default function InvestasiCreate({
               {(props) => (
                 <Button
                   {...props}
-                  leftIcon={<IconUpload size={12} />}
+                  leftIcon={<IconCamera color="black" />}
                   radius={50}
                   bg={MainColor.yellow}
                   color="yellow"
@@ -207,287 +197,287 @@ export default function InvestasiCreate({
               )}
             </FileButton>
           </Group>
+        </Stack>
 
-          {/* Upload File */}
+        {/* Upload File */}
-          <Group position="center">
+        <Group position="center">
-            {!pdf ? (
+          {!pdf ? (
-              <Paper
+            <Paper
-                w={"100%"}
+              w={"100%"}
-                style={{
+              style={{
-                  border: `2px solid gray`,
+                border: `2px solid gray`,
-                  backgroundColor: "gray.1",
+                backgroundColor: "gray.1",
-                  padding: "10px",
+                padding: "10px",
-                  borderRadius: "10px",
+                borderRadius: "10px",
-                  color: "gray",
+                color: "gray",
-                }}
-              >
-                <Text>Upload File Prospektus</Text>
-              </Paper>
-            ) : (
-              <Paper
-                w={"100%"}
-                style={{
-                  border: `2px solid ${AccentColor.softblue}`,
-                  backgroundColor: AccentColor.blue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                  color: "white",
-                }}
-              >
-                <Text lineClamp={1}>{pdf.name}</Text>
-              </Paper>
-            )}
-            {/* {JSON.stringify(filePdf)} */}
-            <FileButton
-              accept={"application/pdf"}
-              onChange={async (files: any) => {
-                try {
-                  const buffer = URL.createObjectURL(
-                    new Blob([new Uint8Array(await files.arrayBuffer())])
-                  );
-
-                  if (files.size > maksimalUploadFile) {
-                    ComponentGlobal_WarningMaxUpload({});
-                  } else {
-                    setFilePdf(buffer);
-                    setPdf(files);
-                  }
-                } catch (error) {
-                  console.log(error);
-                }
               }}
             >
-              {(props) => (
+              <Text>Upload File Prospektus</Text>
-                <Button
+            </Paper>
-                  leftIcon={<IconUpload size={12} />}
+          ) : (
-                  {...props}
+            <Paper
-                  radius={"xl"}
+              w={"100%"}
-                  bg={MainColor.yellow}
+              style={{
-                  color="yellow"
+                border: `2px solid ${AccentColor.softblue}`,
-                  c={"black"}
+                backgroundColor: AccentColor.blue,
-                >
+                padding: "10px",
-                  Upload File
+                borderRadius: "10px",
-                </Button>
-              )}
-            </FileButton>
-          </Group>
-          <TextInput
-            styles={{
-              label: {
                 color: "white",
-              },
+              }}
-            }}
+            >
-            withAsterisk
+              <Text lineClamp={1}>{pdf.name}</Text>
-            label="Judul Investasi"
+            </Paper>
-            placeholder="Judul investasi"
+          )}
-            maxLength={100}
+          {/* {JSON.stringify(filePdf)} */}
-            onChange={(val) => {
+          <FileButton
-              setValue({
+            accept={"application/pdf"}
-                ...value,
+            onChange={async (files: any) => {
-                title: val.target.value,
+              try {
-              });
+                const buffer = URL.createObjectURL(
-            }}
+                  new Blob([new Uint8Array(await files.arrayBuffer())])
-          />
+                );
 
-          <TextInput
+                if (files.size > maksimalUploadFile) {
-            styles={{
+                  ComponentGlobal_WarningMaxUpload({});
-              label: {
+                } else {
-                color: "white",
+                  setFilePdf(buffer);
-              },
+                  setPdf(files);
+                }
+              } catch (error) {
+                console.log(error);
+              }
             }}
-            icon={<Text fw={"bold"}>Rp.</Text>}
+          >
-            min={0}
+            {(props) => (
-            withAsterisk
+              <Button
-            label="Dana Dibutuhkan"
+                leftIcon={<IconUpload size={12} />}
-            placeholder="0"
+                {...props}
-            value={target}
+                radius={"xl"}
-            onChange={(val) => {
+                bg={MainColor.yellow}
-              // console.log(typeof val)
+                color="yellow"
+                c={"black"}
+              >
+                Upload File
+              </Button>
+            )}
+          </FileButton>
+        </Group>
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          withAsterisk
+          label="Judul Investasi"
+          placeholder="Judul investasi"
+          maxLength={100}
+          onChange={(val) => {
+            setValue({
+              ...value,
+              title: val.target.value,
+            });
+          }}
+        />
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          icon={<Text fw={"bold"}>Rp.</Text>}
+          min={0}
+          withAsterisk
+          label="Dana Dibutuhkan"
+          placeholder="0"
+          value={target}
+          onChange={(val) => {
+            // console.log(typeof val)
+            const match = val.currentTarget.value
+              .replace(/\./g, "")
+              .match(/^[0-9]+$/);
+
+            if (val.currentTarget.value === "") return setTarget(0 + "");
+            if (!match?.[0]) return null;
+
+            const nilai = val.currentTarget.value.replace(/\./g, "");
+            const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
+
+            setTarget(targetNilai);
+            setValue({
+              ...value,
+              targetDana: +nilai,
+            });
+          }}
+        />
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          icon={<Text fw={"bold"}>Rp.</Text>}
+          min={0}
+          withAsterisk
+          label="Harga Per Lembar"
+          placeholder="0"
+          value={harga}
+          onChange={(val) => {
+            try {
+              // console.log(typeof +val.currentTarget.value);
+
               const match = val.currentTarget.value
                 .replace(/\./g, "")
                 .match(/^[0-9]+$/);
 
-              if (val.currentTarget.value === "") return setTarget(0 + "");
+              if (val.currentTarget.value === "") return setHarga(0 + "");
+
               if (!match?.[0]) return null;
 
               const nilai = val.currentTarget.value.replace(/\./g, "");
               const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
 
-              setTarget(targetNilai);
+              onTotalLembar({
+                target: value.targetDana,
+                harga: +nilai,
+              });
+
+              setHarga(targetNilai);
               setValue({
                 ...value,
-                targetDana: +nilai,
+                hargaLembar: +nilai,
               });
-            }}
+            } catch (error) {
-          />
+              console.log(error);
+            }
+          }}
+        />
 
-          <TextInput
+        <Stack spacing={3} style={{ color: "white" }}>
-            styles={{
+          <Text fz={"sm"} fw={500}>
-              label: {
+            Total Lembar
-                color: "white",
+          </Text>
-              },
+          <Stack spacing={0}>
-            }}
+            <Text>{totalLembar}</Text>
-            icon={<Text fw={"bold"}>Rp.</Text>}
+            <Divider />
-            min={0}
-            withAsterisk
-            label="Harga Per Lembar"
-            placeholder="0"
-            value={harga}
-            onChange={(val) => {
-              try {
-                // console.log(typeof +val.currentTarget.value);
-
-                const match = val.currentTarget.value
-                  .replace(/\./g, "")
-                  .match(/^[0-9]+$/);
-
-                if (val.currentTarget.value === "") return setHarga(0 + "");
-
-                if (!match?.[0]) return null;
-
-                const nilai = val.currentTarget.value.replace(/\./g, "");
-                const targetNilai = Intl.NumberFormat("id-ID").format(+nilai);
-
-                onTotalLembar({
-                  target: value.targetDana,
-                  harga: +nilai,
-                });
-
-                setHarga(targetNilai);
-                setValue({
-                  ...value,
-                  hargaLembar: +nilai,
-                });
-              } catch (error) {
-                console.log(error);
-              }
-            }}
-          />
-
-          <Stack spacing={3} style={{ color: "white" }}>
-            <Text fz={"sm"} fw={500}>
-              Total Lembar
-            </Text>
-            <Stack spacing={0}>
-              <Text>{totalLembar}</Text>
-              <Divider />
-            </Stack>
-            <Text fz={10} fs={"italic"}>
-              *Total lembar dihitung dari, Target Dana : Harga Perlembar
-            </Text>
           </Stack>
-
+          <Text fz={10} fs={"italic"}>
-          <TextInput
+            *Total lembar dihitung dari, Target Dana : Harga Perlembar
-            styles={{
+          </Text>
-              label: {
-                color: "white",
-              },
-            }}
-            rightSection={
-              <Text fw={"bold"} c={"gray"}>
-                %
-              </Text>
-            }
-            withAsterisk
-            type="number"
-            label={"Rasio Keuntungan / ROI %"}
-            placeholder="Masukan rasio keuntungan"
-            onChange={(val) => {
-              setValue({
-                ...value,
-                roi: _.toNumber(val.target.value),
-              });
-            }}
-          />
-
-          <Select
-            styles={{
-              label: {
-                color: "white",
-              },
-            }}
-            withAsterisk
-            label="Pencarian Investor"
-            placeholder="Pilih batas waktu"
-            data={pencarianInvestor.map((e) => ({
-              value: e.id,
-              label: e.name + " " + "hari",
-            }))}
-            onChange={(val) => {
-              setValue({
-                ...(value as any),
-                pencarianInvestorId: val,
-              });
-            }}
-          />
-          <Select
-            styles={{
-              label: {
-                color: "white",
-              },
-            }}
-            withAsterisk
-            label="Periode Deviden"
-            placeholder="Pilih batas waktu"
-            data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
-            onChange={(val) => {
-              setValue({
-                ...(value as any),
-                periodeDevidenId: val,
-              });
-            }}
-          />
-          <Select
-            styles={{
-              label: {
-                color: "white",
-              },
-            }}
-            withAsterisk
-            label="Pembagian Deviden"
-            placeholder="Pilih batas waktu"
-            data={pembagianDeviden.map((e) => ({
-              value: e.id,
-              label: e.name + " " + "bulan",
-            }))}
-            onChange={(val) => {
-              setValue({
-                ...(value as any),
-                pembagianDevidenId: val,
-              });
-            }}
-          />
-
-          <Button
-            my={"xl"}
-            style={{
-              transition: "0.5s",
-            }}
-            loaderPosition="center"
-            loading={isLoading ? true : false}
-            disabled={
-              value.title === "" ||
-              value.hargaLembar === 0 ||
-              value.targetDana === 0 ||
-              value.roi === 0 ||
-              value.pencarianInvestorId === "" ||
-              value.periodeDevidenId === "" ||
-              value.pembagianDevidenId === "" ||
-              fl === null ||
-              filePdf === null
-                ? true
-                : false
-            }
-            radius={50}
-            bg={MainColor.yellow}
-            color="yellow"
-            c={"black"}
-            onClick={() => onSubmit()}
-          >
-            Simpan
-          </Button>
         </Stack>
-      </Box>
+
+        <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          rightSection={
+            <Text fw={"bold"} c={"gray"}>
+              %
+            </Text>
+          }
+          withAsterisk
+          type="number"
+          label={"Rasio Keuntungan / ROI %"}
+          placeholder="Masukan rasio keuntungan"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              roi: _.toNumber(val.target.value),
+            });
+          }}
+        />
+
+        <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          withAsterisk
+          label="Pencarian Investor"
+          placeholder="Pilih batas waktu"
+          data={pencarianInvestor.map((e) => ({
+            value: e.id,
+            label: e.name + " " + "hari",
+          }))}
+          onChange={(val) => {
+            setValue({
+              ...(value as any),
+              pencarianInvestorId: val,
+            });
+          }}
+        />
+        <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          withAsterisk
+          label="Periode Deviden"
+          placeholder="Pilih batas waktu"
+          data={periodeDeviden.map((e) => ({ value: e.id, label: e.name }))}
+          onChange={(val) => {
+            setValue({
+              ...(value as any),
+              periodeDevidenId: val,
+            });
+          }}
+        />
+        <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
+          withAsterisk
+          label="Pembagian Deviden"
+          placeholder="Pilih batas waktu"
+          data={pembagianDeviden.map((e) => ({
+            value: e.id,
+            label: e.name + " " + "bulan",
+          }))}
+          onChange={(val) => {
+            setValue({
+              ...(value as any),
+              pembagianDevidenId: val,
+            });
+          }}
+        />
+
+        <Button
+          my={"xl"}
+          style={{
+            transition: "0.5s",
+          }}
+          loaderPosition="center"
+          loading={isLoading ? true : false}
+          disabled={
+            value.title === "" ||
+            value.hargaLembar === 0 ||
+            value.targetDana === 0 ||
+            value.roi === 0 ||
+            value.pencarianInvestorId === "" ||
+            value.periodeDevidenId === "" ||
+            value.pembagianDevidenId === "" ||
+            file === null ||
+            filePdf === null
+              ? true
+              : false
+          }
+          radius={50}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          onClick={() => onSubmit()}
+        >
+          Simpan
+        </Button>
+      </Stack>
     </>
   );
 }

src/app_modules/investasi/detail/view.tsx

@@ -119,8 +119,8 @@ export default function DetailInvestasi({
         }}
       >
         {/* Foto username dan sisa waktu */}
-        <ComponentGlobal_AvatarAndAuthorName
+        {/* <ComponentGlobal_AvatarAndAuthorName
-          dataUser={dataInvestasi.author as any}
+          dataUser={dataInvestasi.author.Profile as any}
           componentRight={
             data.MasterProgresInvestasi.id === "1" ? (
               <Box>
@@ -174,7 +174,7 @@ export default function DetailInvestasi({
               </Box>
             )
           }
-        />
+        /> */}
 
         <AspectRatio ratio={1 / 1} mx={"sm"} mah={250}>
           <Image

src/app_modules/investasi/detail_saham_terbeli/layout.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import React from "react";
-
-export default function LayoutDetailSahamTerbeli({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Saham Terbeli" />}>
-        {children}
-      </UIGlobal_LayoutTamplate>
-    </>
-  );
-}

src/app_modules/investasi/detail_saham_terbeli/view.tsx

@@ -1,379 +0,0 @@
-"use client";
-
-import { RouterInvestasi_OLD } from "@/app/lib/router_hipmi/router_investasi";
-import { Warna } from "@/app/lib/warna";
-import {
-  ActionIcon,
-  AspectRatio,
-  Avatar,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Progress,
-  Slider,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconBookDownload,
-  IconCircleCheck,
-  IconFileDescription,
-  IconSpeakerphone,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { MODEL_Transaksi_Investasi } from "../_lib/interface";
-import { useState } from "react";
-import moment from "moment";
-import _ from "lodash";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-
-export default function DetailSahamTerbeli({
-  dataTransaksi,
-  investor,
-}: {
-  dataTransaksi: MODEL_Transaksi_Investasi;
-  investor: number;
-}) {
-  const router = useRouter();
-  const [investasi, setINvestasi] = useState(dataTransaksi);
-  const listBox = [
-    {
-      id: 1,
-      name: "Prospektus",
-      icon: <IconBookDownload size={70} color="white" />,
-      route: RouterInvestasi_OLD.detail_prospektus,
-    },
-    {
-      id: 2,
-      name: "Dokumen",
-      icon: <IconFileDescription size={70} color="white" />,
-      route: RouterInvestasi_OLD.detail_dokumen,
-    },
-    {
-      id: 3,
-      name: "Berita",
-      icon: <IconSpeakerphone size={70} color="white" />,
-      route: RouterInvestasi_OLD.daftar_berita,
-    },
-  ];
-
-  return (
-    <>
-      <Stack>
-        {/* Saham Terbeli */}
-        <Stack
-          style={{
-            padding: "15px",
-            backgroundColor: AccentColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-            borderRadius: "10px",
-            color: "white",
-          }}
-        >
-
-          <Group position="apart">
-            <Group w={"40%"} position="center">
-              <Stack spacing={5} align="center">
-                <Text fw={'bold'}>Total Pembelian</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.gross_amount)}
-                </Text>
-              </Stack>
-            </Group>
-
-            <Group w={"40%"} position="center">
-              <Stack spacing={5} align="center">
-                <Text fw={"bold"}>Lembar Dibeli</Text>
-                <Text>
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.quantity)}{" "}
-                  lembar
-                </Text>
-              </Stack>
-            </Group>
-          </Group>
-        </Stack>
-
-        <Stack
-          style={{
-            padding: "15px",
-            backgroundColor: AccentColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-            borderRadius: "10px",
-            color: "white",
-            marginBottom: "15px",
-          }}
-        >
-          <Group position="apart" mb={"md"}>
-            <ComponentGlobal_AuthorNameOnHeader
-              authorName={investasi?.Investasi?.author?.username}
-              imagesId={investasi?.Investasi?.author?.Profile?.imagesId}
-              profileId={investasi?.Investasi?.author?.Profile?.id}
-            />
-            {(() => {
-              if (
-                Number(investasi.Investasi.MasterPencarianInvestor.name) -
-                  moment(new Date()).diff(
-                    new Date(investasi.createdAt),
-                    "days"
-                  ) <=
-                0
-              ) {
-                return (
-                  <>
-                    <Group position="right">
-                      <IconCircleCheck color="green" />
-                      <Text c={"green"}>Selesai</Text>
-                    </Group>
-                  </>
-                );
-              } else {
-                return (
-                  <>
-                    <Group position="right" spacing={"xs"}>
-                      {(() => {
-                        if (
-                          Number(
-                            investasi.Investasi.MasterPencarianInvestor.name
-                          ) -
-                            moment(new Date()).diff(
-                              new Date(investasi.Investasi.countDown),
-                              "days"
-                            ) <=
-                          0
-                        ) {
-                          return (
-                            <>
-                              <Group position="right" spacing={"xs"}>
-                                <IconCircleCheck color="green" />
-                                <Text
-                                  truncate
-                                  variant="text"
-                                  c={Warna.hijau_tua}
-                                  sx={{
-                                    fontFamily: "Greycliff CF, sans-serif",
-                                  }}
-                                  ta="center"
-                                  fz="md"
-                                  fw={700}
-                                >
-                                  Waktu Habis
-                                </Text>
-                              </Group>
-                            </>
-                          );
-                        } else {
-                          return (
-                            <>
-                              <Group position="right" spacing={"xs"}>
-                                <Text>Sisa waktu:</Text>
-                                <Text truncate>
-                                  {Number(
-                                    investasi.Investasi.MasterPencarianInvestor
-                                      .name
-                                  ) -
-                                    moment(new Date()).diff(
-                                      new Date(investasi.Investasi.countDown),
-                                      "days"
-                                    )}
-                                </Text>
-                                <Text truncate>Hari</Text>
-                              </Group>
-                            </>
-                          );
-                        }
-                      })()}
-                    </Group>
-                  </>
-                );
-              }
-            })()}
-          </Group>
-
-          {/* Gambar Investasi */}
-          <AspectRatio ratio={1 / 1} mah={250} mx={"sm"}>
-            <Image
-              radius={"sm"}
-              height={250}
-              width={"100%"}
-              alt=""
-              src={
-                RouterInvestasi_OLD.api_gambar + `${investasi.Investasi.imagesId}`
-              }
-            />
-          </AspectRatio>
-
-          {/* Title dan Persentase */}
-          <Box mb={"md"}>
-            <Title align="center" order={3} mb={"xs"}>
-              {investasi.Investasi.title}
-            </Title>
-            <Progress
-              label={
-                "" +
-                (
-                  ((+investasi.Investasi.totalLembar -
-                    +investasi.Investasi.sisaLembar) /
-                    +investasi.Investasi.totalLembar) *
-                  100
-                ).toFixed(1) +
-                "%"
-              }
-              value={
-                +(
-                  ((+investasi.Investasi.totalLembar -
-                    +investasi.Investasi.sisaLembar) /
-                    +investasi.Investasi.totalLembar) *
-                  100
-                ).toFixed(2)
-              }
-              color="teal"
-              size="xl"
-              radius="xl"
-            />
-          </Box>
-
-          {/* Rincian Data */}
-          <Grid p={"md"}>
-            <Grid.Col span={6}>
-              <Stack>
-                {/* <Box>
-              <Text>Terkumpul</Text>
-              <Text>Rp. </Text>
-            </Box> */}
-                <Box>
-                  <Text>Dana Dibutuhkan</Text>
-                  <Text>
-                    Rp.{" "}
-                    {new Intl.NumberFormat("id-ID", {
-                      maximumSignificantDigits: 10,
-                    }).format(+investasi.Investasi.targetDana)}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text>Harga Per Lembar</Text>
-                  <Text>
-                    Rp.{" "}
-                    {new Intl.NumberFormat("id-ID", {
-                      maximumSignificantDigits: 10,
-                    }).format(+investasi.Investasi.hargaLembar)}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text>Jadwal Pembagian</Text>
-                  <Text>
-                    {investasi.Investasi.MasterPembagianDeviden.name} bulan{" "}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text>Pembagian Deviden</Text>
-                  <Text>{investasi.Investasi.MasterPeriodeDeviden.name}</Text>
-                </Box>
-              </Stack>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Stack>
-                <Box>
-                  <Text>Investor</Text>
-                  <Text>
-                    {new Intl.NumberFormat("id-ID", {
-                      maximumSignificantDigits: 10,
-                    }).format(investor)}{" "}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text>ROI</Text>
-                  <Text>{investasi.Investasi.roi}%</Text>
-                </Box>
-                <Box>
-                  <Text>Total Lembar</Text>
-                  <Text>
-                    {new Intl.NumberFormat("id-ID", {
-                      maximumSignificantDigits: 10,
-                    }).format(+investasi.Investasi.totalLembar)}{" "}
-                    lembar
-                  </Text>
-                </Box>
-                <Box>
-                  <Text>Sisa Lembar</Text>
-                  <Text>
-                    {new Intl.NumberFormat("id-ID", {
-                      maximumSignificantDigits: 10,
-                    }).format(+investasi.Investasi.sisaLembar)}{" "}
-                    lembar
-                  </Text>
-                </Box>
-              </Stack>
-            </Grid.Col>
-          </Grid>
-
-          {/* List Box */}
-          <Group position="apart" px={"lg"}>
-            {listBox.map((e, i) => (
-              <Paper
-                key={i}
-                style={{
-                  padding: "15px",
-                  backgroundColor: AccentColor.blue,
-                  border: `2px solid ${AccentColor.softblue}`,
-                  borderRadius: "10px",
-                  color: "white",
-                }}
-              >
-                <Flex direction={"column"} align={"center"} justify={"center"}>
-                  <Text fz={12}>{e.name}</Text>
-                  <ActionIcon
-                    radius={"xl"}
-                    variant="transparent"
-                    size={60}
-                    onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
-                  >
-                    {e.icon}
-                  </ActionIcon>
-                </Flex>
-              </Paper>
-            ))}
-          </Group>
-
-          {/* 
-        <Grid mb={"sm"} justify="center">
-          {listBox.map((e) => (
-            <Grid.Col
-              span={"auto"}
-              key={e.id}
-              onClick={() => router.push(e.route + `${investasi.Investasi.id}`)}
-            >
-              <Center>
-                <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
-                  <Flex
-                    direction={"column"}
-                    align={"center"}
-                    justify={"center"}
-                  >
-                    <Text fz={12}>{e.name}</Text>
-                    <ActionIcon variant="transparent" size={60}>
-                      {e.icon}
-                    </ActionIcon>
-                  </Flex>
-                </Paper>
-              </Center>
-            </Grid.Col>
-          ))}
-        </Grid> */}
-        </Stack>
-      </Stack>
-    </>
-  );
-}

src/app_modules/investasi/index.ts

@@ -22,8 +22,6 @@ import EditDokumenInvestasi from "./edit_dokumen/view";
 import LayoutEditDokumenInvestasi from "./edit_dokumen/layout";
 import EditBeritaInvestasi from "./edit_berita/view";
 import LayoutEditBeritaInvestasi from "./edit_berita/layout";
-import DetailSahamTerbeli from "./detail_saham_terbeli/view";
-import LayoutDetailSahamTerbeli from "./detail_saham_terbeli/layout";
 import DetailPropektus from "./detail_prospektus/view";
 import LayoutDetailPropektus from "./detail_prospektus/layout";
 import DetailDokumenInvestasi from "./detail_dokumen/view";
@@ -91,8 +89,6 @@ export {
   LayoutEditDokumenInvestasi,
   EditBeritaInvestasi,
   LayoutEditBeritaInvestasi,
-  DetailSahamTerbeli,
-  LayoutDetailSahamTerbeli,
   DetailPropektus,
   LayoutDetailPropektus,
   DetailDokumenInvestasi,

src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx

@@ -1,7 +1,7 @@
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { MainColor } from "@/app_modules/_global/color";
 import {
-    ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
@@ -20,13 +20,11 @@ export function Portofolio_ComponentButtonSelanjutnya({
   dataPortofolio,
   file,
   dataMedsos,
-  setIsFile,
 }: {
   profileId: string;
   dataPortofolio: MODEL_PORTOFOLIO_OLD;
   file: File;
   dataMedsos: any;
-  setIsFile: any;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);

src/app_modules/katalog/portofolio/create/view.tsx

@@ -4,7 +4,6 @@ import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
 import {
   AspectRatio,
@@ -49,7 +48,6 @@ export default function CreatePortofolio({
 
   const [file, setFile] = useState<File | any>(null);
   const [img, setImg] = useState<any | null>(null);
-  const [isFile, setIsFile] = useState(false);
 
   return (
     <>
@@ -186,16 +184,8 @@ export default function CreatePortofolio({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  if (files.size > 2000000) {
+                  setImg(buffer);
-                    ComponentGlobal_NotifikasiPeringatan(
+                  setFile(files);
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
-                      3000
-                    );
-                  } else {
-                    setImg(buffer);
-                    setFile(files);
-                    setIsFile(false);
-                  }
                 } catch (error) {
                   console.log(error);
                 }
@@ -307,7 +297,6 @@ export default function CreatePortofolio({
           dataMedsos={dataMedsos}
           file={file}
           profileId={profileId}
-          setIsFile={setIsFile}
         />
       </Stack>
 

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

@@ -1,9 +1,10 @@
 "use client";
 
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { pathAssetImage } from "@/app/lib";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { AccentColor } from "@/app_modules/_global/color";
-import { Avatar, Image, Skeleton } from "@mantine/core";
+import { Avatar, Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { CSSProperties, useState } from "react";
@@ -17,6 +18,7 @@ export function Profile_ComponentAvatarProfile({
 }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setLoading] = useState(false);
 
   const url = APIs.GET({ fileId: fileId, size: "200" });
 
@@ -70,18 +72,33 @@ export function Profile_ComponentAvatarProfile({
 
   return (
     <>
-      <Avatar
+      <Center>
-        bg={"white"}
+        <Avatar
-        style={style}
+          bg={"white"}
-        radius={"50%"}
+          style={style}
-        size={100}
+          radius={"50%"}
-        src={url}
+          size={100}
-        onClick={() =>
+          src={url}
-          router.push(routerImagePreview.main({ id: fileId }), {
+          opacity={isLoading ? 0.5 : 1}
-            scroll: false,
+          onClick={() => {
-          })
+            router.push(RouterImagePreview.main({ id: fileId }), {
-        }
+              scroll: false,
-      />
+            });
+            setLoading(true);
+          }}
+        />
+        {isLoading && (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        )}
+      </Center>
     </>
   );
 }

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

@@ -1,13 +1,13 @@
 "use client";
 
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
-import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
+import { RouterImagePreview } from "@/app/lib";
+import { 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({
   fileId,
 }: {
@@ -15,7 +15,7 @@ export function Profile_ComponentLoadBackgroundImage({
 }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
-
+  const [isLoading, setLoading] = useState(false);
   const url = APIs.GET({ fileId: fileId });
 
   useShallowEffect(() => {
@@ -45,7 +45,7 @@ export function Profile_ComponentLoadBackgroundImage({
             maw={150}
             m={"auto"}
             p={"xs"}
-            src={"/aset/global/no-image.svg"}
+            src={pathAssetImage.no_image}
           />
         </Center>
       </>
@@ -53,23 +53,40 @@ export function Profile_ComponentLoadBackgroundImage({
 
   return (
     <>
-      <Image
+      <Center>
-        onClick={() =>
+        <Image
-          router.push(routerImagePreview.main({ id: fileId }), {
+          onClick={() => {
-            scroll: false,
+            setLoading(true);
-          })
+            router.push(RouterImagePreview.main({ id: fileId }), {
-        }
+              scroll: false,
-        style={{
+            });
-          borderColor: "white",
+          }}
-          borderStyle: "solid",
+          style={{
-          borderWidth: "1px",
+            borderColor: "white",
-          borderRadius: "5px",
+            borderStyle: "solid",
-        }}
+            borderWidth: "1px",
-        radius={5}
+            borderRadius: "5px",
-        height={200}
+          }}
-        alt="Image"
+          radius={"4px"}
-        src={url}
+          height={200}
-      />
+          alt="Image"
+          opacity={isLoading ? 0.5 : 1}
+          src={url}
+        />
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
     </>
   );
 }

src/app_modules/katalog/ui/ui_profile.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { APIs } from "@/app/lib";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
 import {
@@ -70,12 +69,6 @@ export function Profile_UiView({
           <Profile_ComponentLoadBackgroundImage
             fileId={profile.imageBackgroundId as any}
           />
-          {/* <Image
-            radius={"sm"}
-            height={200}
-            alt="Background"
-            src={APIs.GET({ fileId: profile.imageBackgroundId as string })}
-          /> */}
 
           <Box
             sx={{
@@ -95,19 +88,6 @@ export function Profile_UiView({
                   borderWidth: "2px",
                 }}
               />
-              {/* <Avatar
-                bg={"gray.2"}
-                sx={{
-                  borderStyle: "solid",
-                  borderColor: AccentColor.darkblue,
-                  borderWidth: "2px",
-                }}
-                src={
-                  APIs.GET({fileId: profile.imageId as any})
-                }
-                size={100}
-                radius={"100%"}
-              /> */}
             </Center>
             <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
               <Text fw={"bold"} lineClamp={1}>

src/app_modules/map/_component/comp_load_image_map.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { APIs, RouterAssetImage } from "@/app/lib";
+import { APIs, pathAssetImage } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
+import { RouterImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { Box, Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
@@ -41,7 +41,7 @@ export function ComponentMap_LoadImageMap({
       ) : isImage ? (
         <Image
           onClick={() =>
-            router.push(routerImagePreview.main({ id: fileId }), {
+            router.push(RouterImagePreview.main({ id: fileId }), {
               scroll: false,
             })
           }
@@ -74,7 +74,7 @@ export function ComponentMap_LoadImageMap({
               alt="Image"
               height={100}
               width={100}
-              src={RouterAssetImage.no_image}
+              src={pathAssetImage.no_image}
             />
           </Center>
         </Box>

src/bin/seeder/forum/master_status.json

@@ -5,6 +5,6 @@
   },
   {
     "id": 2,
-    "status": "Close"
+    "status": "Closed"
   }
 ]