Merge pull request #109 from bipproduction/profile/avatar

Fix: Avatar

package.json

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

src/app/(not-user)/job-vacancy/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { Job_UiNotUserView } from "@/app_modules/job/_ui";
+import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const jobId = params.id;
+  const dataJob = await job_getOneById(jobId);
+
+  return (
+    <>
+      <Job_UiNotUserView data={dataJob} />
+    </>
+  );
+}

src/app/(not-user)/preview-image/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { UIGlobal_ImagePreview, UIGlobal_NotUserImagePreview } from "@/app_modules/_global/ui";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const fileId = params.id;
+  return (
+    <>
+      <UIGlobal_NotUserImagePreview fileId={fileId} />
+    </>
+  );
+}

src/app/api/zz-makuro/route.ts

@@ -0,0 +1,7 @@
+import { headers } from "next/headers";
+export async function GET(
+  req: Request) {
+  const origin = new URL(req.url).origin;
+
+  return new Response(JSON.stringify({ success: true, origin }));
+}

src/app/contoh/page.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import {
-  ComponentGlobal_AvatarAndUsername,
-  ComponentGlobal_LoaderAvatar,
-} from "@/app_modules/_global/component";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import {
-  UIGlobal_LayoutHeaderTamplate,
-  UIGlobal_LayoutTamplate,
-} from "@/app_modules/_global/ui";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Center,
-  Group,
-  Image,
-  Paper,
-  Text,
-} from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { IconDots } from "@tabler/icons-react";
-import { useState } from "react";
-
-export default function Page() {
-  return (
-    <>
-      <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Contoh" />}
-      >
-        <Paper p={"sm"}>
-          <ComponentGlobal_AvatarAndUsername
-            profile={{ id: "1" as any, name: "wibu" as any }}
-            component={
-              <Group position="right">
-                <Text lineClamp={1}>{Intl.DateTimeFormat("id-ID", {dateStyle: "full"}).format(new Date())}</Text>
-              </Group>
-            }
-          />
-        </Paper>
-      </UIGlobal_LayoutTamplate>
-    </>
-  );
-
-  return (
-    <>
-      <Box p={"lg"} bg={"gray"} h={"100vh"}>
-        <Center h={"100%"}>
-          <ActionIcon bg={"blue"}>
-            <Avatar
-              size={100}
-              radius={"100%"}
-              src={
-                // "https://wibu-storage.wibudev.com/api/files/cm1efheqx005vkp7jo7lqarnf"
-                "/aset/global/avatar.png"
-              }
-            />
-          </ActionIcon>
-        </Center>
-      </Box>
-    </>
-  );
-  return (
-    <>
-      <LoadImage
-        url={
-          "https://wibu-storage.wibudev.com/api/files/cm192febp004jkp7j2x1fgekw"
-        }
-      />
-    </>
-  );
-}
-
-function LoadImage({ url }: { url: string }) {
-  const [ada, setAda] = useState<boolean | null>(null);
-
-  useShallowEffect(() => {
-    load();
-  }, []);
-
-  async function load() {
-    try {
-      const res = await fetch(url);
-      if (res.ok) {
-        return setAda(true);
-      }
-      setAda(false);
-    } catch (error) {
-      console.log("");
-    }
-  }
-
-  if (ada === null)
-    return (
-      <Box w={100}>
-        <Image w={"100%"} src={"/aset/global/loading.gif"} alt="" />
-      </Box>
-    );
-  if (!ada)
-    return (
-      <Image
-        src={
-          "https://cdn.idntimes.com/content-images/community/2021/06/2318629899-0991efc170-o-cropped-56965fbaa68adf470a17cc45ea5d328d-321a5127ded916230393dbb7bf7d130e_600x400.jpg"
-        }
-        alt=""
-      />
-    );
-  return <Image src={url} alt="" />;
-}

src/app/dev/auth/login/page.tsx

@@ -1,9 +1,12 @@
 import { Login } from "@/app_modules/auth";
+import versionUpdate from "../../../../../package.json";
 
 export default async function Page() {
+  const version = versionUpdate.version;
+
   return (
     <>
-      <Login />
+      <Login version={version} />
     </>
   );
 }

src/app/dev/colab/detail/notifikasi/[id]/page.tsx

@@ -1,13 +0,0 @@
-import { Colab_DetailNotifikasi } from "@/app_modules/colab";
-import colab_getOneNotifikasiById from "@/app_modules/colab/fun/get/get_one_notifikasi_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let notifId = params.id;
-  const data = await colab_getOneNotifikasiById({ notifId: notifId });
-
-  return (
-    <>
-      <Colab_DetailNotifikasi data={data as any} />
-    </>
-  );
-}

src/app/dev/colab/detail/status/publish/[id]/layout.tsx

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

src/app/dev/colab/detail/status/publish/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/colab/detail/status/publish/[id]/page.tsx

@@ -1,9 +0,0 @@
-import { Colab_DetailStatusPublish } from "@/app_modules/colab";
-
-export default async function Page() {
-  return (
-    <>
-      <Colab_DetailStatusPublish />
-    </>
-  );
-}

src/app/dev/colab/detail/status/reject/[id]/layout.tsx

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

src/app/dev/colab/detail/status/reject/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/colab/detail/status/reject/[id]/page.tsx

@@ -1,9 +0,0 @@
-import { Colab_DetailStatusReject } from "@/app_modules/colab";
-
-export default async function Page() {
-  return (
-    <>
-      <Colab_DetailStatusReject />
-    </>
-  );
-}

src/app/dev/colab/detail/status/review/[id]/layout.tsx

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

src/app/dev/colab/detail/status/review/[id]/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/colab/detail/status/review/[id]/page.tsx

@@ -1,9 +0,0 @@
-import { Colab_DetailStatusReview } from "@/app_modules/colab";
-
-export default async function Page() {
-  return (
-    <>
-      <Colab_DetailStatusReview />
-    </>
-  );
-}

src/app/dev/colab/main/notifikasi/page.tsx

@@ -1,13 +0,0 @@
-import { Colab_NotifikasiView } from "@/app_modules/colab";
-import colab_getListNotifikasiByUserId from "@/app_modules/colab/fun/get/get_list_notifikasi_by_user_id";
-
-export default async function Page() {
-  const listNotifikasi = await colab_getListNotifikasiByUserId();
-  // console.log(listNotifikasi);
-
-  return (
-    <>
-      <Colab_NotifikasiView listNotifikasi={listNotifikasi as any} />
-    </>
-  );
-}

src/app/dev/colab/main/status/loading.tsx

@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage />
-    </>
-  );
-}

src/app/dev/colab/main/status/page.tsx

@@ -1,19 +0,0 @@
-import { Colab_Status } from "@/app_modules/colab";
-import colab_getListByStatusId from "@/app_modules/colab/fun/get/get_list_by_status_id";
-
-export default async function Page() {
-  const listPublish = (await colab_getListByStatusId(1)).data;
-  const listReview = (await colab_getListByStatusId(2)).data;
-  const listReject = (await colab_getListByStatusId(3)).data;
-
-
-  return (
-    <>
-      <Colab_Status
-        listPublish={listPublish as any}
-        listReview={listReview as any}
-        listReject={listReject as any}
-      />
-    </>
-  );
-}

src/app/dev/job/detail/main/[id]/page.tsx

@@ -1,7 +1,5 @@
-"use server";
 import { Job_MainDetail } from "@/app_modules/job";
 import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
-import app_config from "@/util/app_config";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const idJob = params.id;
@@ -9,7 +7,7 @@ export default async function Page({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <Job_MainDetail dataJob={dataJob as any} hostName={app_config.host} />
+      <Job_MainDetail dataJob={dataJob as any} />
     </>
   );
 }

src/app/dev/job/non_user_view/[id]/page.tsx

@@ -4,11 +4,7 @@ import { job_getOneById } from "@/app_modules/job/fun/get/get_one_by_id";
 export default async function Page({ params }: { params: { id: string } }) {
   let jobId = params.id;
   const dataJob = await job_getOneById(jobId);
-  // const platform = os.platform();
+
-  // const hostName =
-  //   platform === "darwin"
-  //     ? "http://localhost:3000"
-  //     : "https://test-hipmi.wibudev.com";
   return (
     <>
       <Job_NonUserView data={dataJob as any} />

src/app/dev/vote/detail/kontribusi/[id]/layout.tsx

@@ -1,5 +1,6 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { LayoutVote_DetailKontribusi } from "@/app_modules/vote";
+import { voting_funGetOneVotingbyId } from "@/app_modules/vote/fun/get/fun_get_one_by_id";
 import React from "react";
 
 export default async function Layout({
@@ -11,12 +12,14 @@ export default async function Layout({
 }) {
   const votingId = params.id;
   const userLoginId = await funGetUserIdByToken();
+  const dataVoting = await voting_funGetOneVotingbyId(votingId);
 
   return (
     <>
       <LayoutVote_DetailKontribusi
         votingId={votingId}
         userLoginId={userLoginId}
+        dataVoting={dataVoting}
       >
         {children}
       </LayoutVote_DetailKontribusi>

src/app/dev/vote/detail/main/[id]/layout.tsx

@@ -1,5 +1,6 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { LayoutVote_MainDetail } from "@/app_modules/vote";
+import { voting_funGetOneVotingbyId } from "@/app_modules/vote/fun/get/fun_get_one_by_id";
 import React from "react";
 
 export default async function Layout({
@@ -11,10 +12,15 @@ export default async function Layout({
 }) {
   const votingId = params.id;
   const userLoginId = await funGetUserIdByToken();
+  const dataVoting = await voting_funGetOneVotingbyId(votingId);
 
   return (
     <>
-      <LayoutVote_MainDetail votingId={votingId} userLoginId={userLoginId}>
+      <LayoutVote_MainDetail
+        votingId={votingId}
+        userLoginId={userLoginId}
+        dataVoting={dataVoting}
+      >
         {children}
       </LayoutVote_MainDetail>
     </>

src/app/dev/vote/detail/publish/[id]/layout.tsx

@@ -1,6 +1,6 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { LayoutVote_DetailPublish } from "@/app_modules/vote";
-import { Voting_funGetOneVotingbyId } from "@/app_modules/vote/fun/get";
+import { voting_funGetOneVotingbyId } from "@/app_modules/vote/fun/get/fun_get_one_by_id";
 import React from "react";
 
 export default async function Layout({
@@ -13,11 +13,15 @@ export default async function Layout({
   const votingId = params.id;
   const userLoginId = await funGetUserIdByToken();
 
-  const dataVoting = await Voting_funGetOneVotingbyId(votingId);
+  const dataVoting = await voting_funGetOneVotingbyId(votingId);
 
   return (
     <>
-      <LayoutVote_DetailPublish votingId={votingId} userLoginId={userLoginId}>
+      <LayoutVote_DetailPublish
+        votingId={votingId}
+        userLoginId={userLoginId}
+        dataVoting={dataVoting}
+      >
         {children}
       </LayoutVote_DetailPublish>
     </>

src/app/dev/vote/main/beranda/page.tsx

@@ -2,11 +2,11 @@ import { Vote_Beranda } from "@/app_modules/vote";
 import { vote_getAllListPublish } from "@/app_modules/vote/fun/get/get_all_list_publish";
 
 export default async function Page() {
-    const dataVote = await vote_getAllListPublish({page: 1})
+  const dataVote = await vote_getAllListPublish({ page: 1 });
 
-    return (
+  return (
-      <>
+    <>
-        <Vote_Beranda dataVote={dataVote as any} />
+      <Vote_Beranda dataVote={dataVote as any} />
-      </>
+    </>
-    );
+  );
-}
+}

src/app/emotion.tsx

@@ -1,13 +1,9 @@
 "use client";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
 // import './globals.css'
 import { CacheProvider } from "@emotion/react";
 import {
-  Box,
-  Container,
   MantineProvider,
-  rem,
+  useEmotionCache
-  useEmotionCache,
 } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { Provider } from "jotai";

src/app/lib/index.ts

@@ -3,7 +3,9 @@ import DIRECTORY_ID from "./id-derectory";
 import prisma from "./prisma";
 import { pathAssetImage } from "./path_asset_image";
 
+
 export { DIRECTORY_ID };
 export { prisma };
 export { APIs };
 export { pathAssetImage as RouterAssetImage };
+

src/app/lib/router_hipmi/router_image_preview.ts

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

src/app/lib/router_hipmi/router_job.ts

@@ -24,4 +24,5 @@ export const RouterJob = {
 
   // non user
   non_user_view: "/dev/job/non_user_view/",
+  "job_vacancy_non_user": ({ id }: { id: string }) => `/job-vacancy/${id}`,
 };

src/app/makuro/_server/makuro_test.ts

@@ -1,4 +0,0 @@
-'use server'
-export default async function makuro_test() {
-    console.log("ini diserver")
-}

src/app/makuro/_server/makuro_view.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { Box, Button, Stack, TextInput } from "@mantine/core";
-import makuro_test from "./makuro_test";
-import { useState } from "react";
-import _, { forIn } from "lodash";
-
-export default function ViewMakuro() {
-  const [listnya, setListnya] = useState<any[]>([
-    {
-      name: "Voting",
-      value: "",
-    },
-    { name: "Voting", value: "" },
-  ]);
-
-  return (
-    <>
-      <Stack p={24}>
-        {listnya.map((e, k) => (
-          <Box key={k}>
-            <TextInput
-              onChange={(v) => {
-                const val = _.clone(listnya);
-                val[k].value = v.currentTarget.value;
-                setListnya([...val]);
-              }}
-              label={e.name}
-            />
-          </Box>
-        ))}
-        <Button
-          onClick={() => {
-            // const cek = listnya[listnya.length - 1]
-            // console.log(cek.id + 1);
-
-            if (listnya.length > 4) return console.log("ga bisa lebih");
-            setListnya([...listnya, { name: "Voting", value: "" }]);
-          }}
-        >
-          {" "}
-          Tambah
-        </Button>
-        <Button
-          onClick={() => {
-            console.log(JSON.stringify(listnya, null, 4));
-          }}
-        >
-          Hasilnya
-        </Button>
-      </Stack>
-    </>
-  );
-}

src/app/makuro/_ui/RealtimePage.tsx

@@ -1,37 +0,0 @@
-"use client";
-import { Button, Group, Stack } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useWibuRealtime } from "wibu-realtime";
-
-export function RealtimePage({ token }: { token: string }) {
-  const [data, setData] = useWibuRealtime({
-    project: "hipmi",
-    WIBU_REALTIME_TOKEN: token,
-  });
-
-  useShallowEffect(() => {
-    if (data) {
-      console.log(data);
-    }
-  }, [data]);
-
-  function onKirim() {
-    setData({
-      id: "123",
-      data: {
-        "topic":"test",
-      }
-
-    });
-  }
-  return (
-    <Stack p={"lg"}>
-      <Group>
-        <Stack>
-          {JSON.stringify(data)}
-          <Button onClick={onKirim}> Tekan Aja</Button>
-        </Stack>
-      </Group>
-    </Stack>
-  );
-}

src/app/makuro/_util.ts

@@ -1,9 +0,0 @@
-import { v4 as uuidv4 } from "uuid";
-
-export const createItems = (length = 100): string[] =>
-  Array.from({ length }).map(() => uuidv4());
-
-export const loadMore = async (length = 100): Promise<string[]> => {
-    console.log("Loading more items...");
-  return new Promise((res) => setTimeout(() => res(createItems(length)), 100));
-};

src/app/makuro/gs_coba.ts

@@ -1,3 +0,0 @@
-import { atomWithStorage } from "jotai/utils";
-
-export const gs_coba_chat = atomWithStorage<any[]>("gs_coba_chat", []);

src/app/makuro/page.tsx

@@ -1,14 +0,0 @@
-import { ServerEnv } from "../lib/server_env";
-import { RealtimePage } from "./_ui/RealtimePage";
-const env = process.env;
-const WIBU_REALTIME_KEY = process.env.WIBU_REALTIME_KEY;
-
-export default function App() {
-  return (
-    <div>
-      {/* <pre>{JSON.stringify(env, null, 2)}</pre>
-      <pre>{JSON.stringify(ServerEnv.value, null, 2)}</pre> */}
-      <RealtimePage token={WIBU_REALTIME_KEY as string} />
-    </div>
-  );
-}

src/app/page.tsx

@@ -1,5 +1,3 @@
-import { SplashScreen } from "@/app_modules/auth";
-import { redirect } from "next/navigation";
 import PageSplash from "./dev/auth/splash/page";
 
 export default async function Page() {

src/app/zz-makuro/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+
+export default function Page() {
+  const [origin, setOrigin] = useState("");
+  useShallowEffect(() => {
+    if (typeof window !== "undefined") {
+      setOrigin(window.location.origin);
+    }
+  }, []);
+  return <div>{origin}</div>;
+}

src/app_modules/_global/component/comp_avatar_and_username.tsx

@@ -10,17 +10,17 @@ import { funGlobal_CheckProfile } from "../fun/get";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
 
-type IFontSize = "xs" | "sm" | "md" | "lg" | "xl"
+type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_AvatarAndUsername({
   profile,
   component,
   sizeAvatar,
-  fontSize
+  fontSize,
 }: {
   profile: Prisma.ProfileSelect;
   component?: React.ReactNode;
   sizeAvatar?: number;
-  fontSize?: IFontSize | {}
+  fontSize?: IFontSize | {};
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
@@ -57,11 +57,11 @@ export function ComponentGlobal_AvatarAndUsername({
             )}
           </ActionIcon>
         </Grid.Col>
-        <Grid.Col span={"auto"} style={{ minHeight: 50 }} >
+        <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
-          <Stack justify="center"  h={30}>
+          <Stack justify="center" h={30}>
             <Text
               fw={"bold"}
-              fz={fontSize ? fontSize : "md"}
+              fz={fontSize ? fontSize : "sm"}
               lineClamp={1}
               onClick={() => onCheckProfile()}
             >
@@ -72,7 +72,9 @@ export function ComponentGlobal_AvatarAndUsername({
 
         {component && (
           <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
-            {component}
+            <Stack justify="center" h={30}>
+              {component}
+            </Stack>
           </Grid.Col>
         )}
       </Grid>

src/app_modules/_global/component/comp_card_box_and_background.tsx

@@ -28,11 +28,11 @@ export function ComponentGlobal_CardStyles({
             : AccentColor.darkblue,
           border: `2px solid ${border ? border : AccentColor.blue}`,
           paddingInline: "16px",
-          paddingBlock: "20px",
+          paddingBlock: "16px",
           borderRadius: "10px",
           color: color ? color : "white",
           height: height ? height : "auto",
-          marginBottom: marginBottom ? marginBottom : "0x",
+          marginBottom: marginBottom ? marginBottom : "15px",
         }}
         onClick={onClickHandler}
       >

src/app_modules/_global/component/comp_load_image.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useState } from "react";
-import ComponentGlobal_Loader from "./loader";
-import { useRouter } from "next/navigation";
 import { APIs } from "@/app/lib";
-import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
+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";
+import { useState } from "react";
 
 type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_LoadImage({

src/app_modules/_global/component/comp_not_user_load_image.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { APIs } from "@/app/lib";
+import { pathAssetImage } from "@/app/lib/path_asset_image";
+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";
+import { useState } from "react";
+
+type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
+export function ComponentGlobal_NotUserLoadImage({
+  fileId,
+  maw,
+  radius,
+}: {
+  fileId: string;
+  maw?: number | string;
+  radius?: IRadius;
+}) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const url = APIs.GET({ fileId: fileId });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  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 (
+      <Center>
+        <Skeleton h={250} radius={"sm"} w={200} />
+      </Center>
+    );
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={250}>
+          <Image alt="No Image" maw={150} src={pathAssetImage.no_image} />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      <Center h={"100%"}>
+        <Image
+          onClick={() => {
+            setIsLoading(true);
+            router.push(routerImagePreview.not_user_image({ id: fileId }), {
+              scroll: false,
+            });
+          }}
+          opacity={isLoading ? 0.5 : 1}
+          radius={radius ? radius : 0}
+          alt="Image"
+          maw={maw ? maw : 200}
+          miw={200}
+          src={url}
+        />
+
+        {isLoading ? (
+          <Image
+            alt="Loader"
+            src={pathAssetImage.new_loader}
+            height={50}
+            width={50}
+            style={{
+              position: "absolute",
+            }}
+          />
+        ) : (
+          ""
+        )}
+      </Center>
+    </>
+  );
+}

src/app_modules/_global/component/index.ts

@@ -7,6 +7,7 @@ import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 import { ComponentGlobal_LoaderAvatar } from "./comp_load_avatar";
 import { ComponentGlobal_LoadImage } from "./comp_load_image";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
+import { ComponentGlobal_NotUserLoadImage } from "./comp_not_user_load_image";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
 import ComponentGlobal_ErrorInput from "./error_input";
@@ -25,3 +26,4 @@ export { ComponentGlobal_ErrorInput };
 export { ComponentGlobal_ButtonUploadFileImage };
 export { ComponentGlobal_LoaderAvatar };
 export { ComponentGlobal_AvatarAndUsername };
+export { ComponentGlobal_NotUserLoadImage };

src/app_modules/_global/ui/index.ts

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

src/app_modules/_global/ui/ui_layout_default.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  BackgroundImage,
+  Box,
+  Container,
+  rem,
+  ScrollArea,
+} from "@mantine/core";
+import { MainColor } from "../color";
+
+export default function UIGlobal_LayoutDefault({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Box
+        w={"100%"}
+        h={"100%"}
+        style={{
+          overflowY: "auto",
+          overflowX: "auto",
+          backgroundColor: MainColor.black,
+          position: "fixed",
+        }}
+      >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
+          <BackgroundImage
+            src={"/aset/global/main_background.png"}
+            h={"100vh"}
+            style={{ position: "relative" }}
+          >
+            <Box style={{ zIndex: 0 }} h={"100vh"} pos={"static"}>
+              <ScrollArea h={"100%"} px={"md"}>
+                {children}
+              </ScrollArea>
+            </Box>
+          </BackgroundImage>
+        </Container>
+      </Box>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_layout_tamplate.tsx

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

src/app_modules/_global/ui/ui_not_user_image_preview.tsx

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

src/app_modules/auth/login/view.tsx

@@ -6,27 +6,19 @@ import {
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
-import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
-import {
-  BackgroundImage,
-  Button,
-  Center,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { PhoneInput } from "react-international-phone";
-import "react-international-phone/style.css";
-import { gs_kodeId } from "../state/state";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
+import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
+import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
+import { Box, Button, Center, Stack, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
 
-export default function Login() {
+export default function Login({ version }: { version: string }) {
   const router = useRouter();
   const [phone, setPhone] = useState("");
   const [loading, setLoading] = useState(false);
@@ -56,11 +48,7 @@ export default function Login() {
 
   return (
     <>
-      <BackgroundImage
+      <UIGlobal_LayoutDefault>
-        src={"/aset/global/main_background.png"}
-        h={"100vh"}
-        // pos={"static"}
-      >
         <Stack align="center" justify="center" h={"100vh"} spacing={100}>
           <Stack align="center" spacing={0}>
             <Title order={3} c={MainColor.yellow}>
@@ -104,8 +92,19 @@ export default function Login() {
               LOGIN
             </Button>
           </Stack>
+
+          <Box pos={"fixed"} bottom={10}>
+            <Text fw={"bold"} c={"white"} fs={"italic"} fz={"xs"}>
+              V.{version}
+            </Text>
+          </Box>
         </Stack>
-      </BackgroundImage>
+      </UIGlobal_LayoutDefault>
+      {/* <BackgroundImage
+        src={"/aset/global/main_background.png"}
+        h={"100vh"}
+        // pos={"static"}
+      ></BackgroundImage> */}
     </>
   );
 }

src/app_modules/auth/register/view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { GlobalEnv } from "@/app/lib/token";
 import {
   AccentColor,
   MainColor,
@@ -8,14 +9,14 @@ import {
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
 import {
-  BackgroundImage,
   Button,
   Center,
   Stack,
   Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
 import { useFocusTrap } from "@mantine/hooks";
 import { IconUserCircle } from "@tabler/icons-react";
@@ -24,7 +25,6 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { auth_funDeleteAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 import { Auth_funRegister } from "../fun/fun_register";
-import { GlobalEnv } from "@/app/lib/token";
 
 export default function Register({ dataOtp }: { dataOtp: any }) {
   const router = useRouter();
@@ -68,7 +68,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-      <BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"}>
+      <UIGlobal_LayoutDefault>
         <Center h={"100vh"}>
           <Stack h={"100%"} align="center" justify="center" spacing={70}>
             <Title order={2} c={MainColor.yellow}>
@@ -130,7 +130,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
             </Stack>
           </Stack>
         </Center>
-      </BackgroundImage>
+      </UIGlobal_LayoutDefault>
     </>
   );
 }

src/app_modules/auth/splash/view.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
 import {
@@ -19,11 +21,11 @@ export default function SplashScreen({ userLoginId }: { userLoginId: any }) {
   useShallowEffect(() => {
     if (!userLoginId) {
       setTimeout(() => {
-        return router.push("/dev/auth/login", { scroll: false });
+        return router.push(RouterAuth.login, { scroll: false });
       }, 1000);
     } else {
       setTimeout(() => {
-        return router.push("/dev/home", { scroll: false });
+        return router.push(RouterHome.main_home, { scroll: false });
       }, 1000);
     }
   }, []);

src/app_modules/auth/validasi/view.tsx

@@ -27,6 +27,7 @@ import { useState } from "react";
 import { auth_funDeleteAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 import { auth_funValidasi } from "../fun/fun_validasi";
 import { GlobalEnv } from "@/app/lib/token";
+import { UIGlobal_LayoutDefault } from "@/app_modules/_global/ui";
 
 export default function Validasi({ dataOtp }: { dataOtp: any }) {
   const router = useRouter();
@@ -86,11 +87,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-      <BackgroundImage
+      <UIGlobal_LayoutDefault>
-        src={"/aset/global/main_background.png"}
-        h={"100vh"}
-        // pos={"static"}
-      >
         <Stack h={"100vh"}>
           <Box
             pt={"md"}
@@ -154,7 +151,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
             </Button>
           </Stack>
         </Stack>
-      </BackgroundImage>
+      </UIGlobal_LayoutDefault>
     </>
   );
 }

src/app_modules/colab/component/card_view/card_beranda.tsx

@@ -1,12 +1,10 @@
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Card, Stack } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { MODEL_COLLABORATION } from "../../model/interface";
 import ComponentColab_CardSectionData from "./card_section_data";
 import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
 import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 export function ComponentColab_CardBeranda({
   data,
@@ -15,28 +13,14 @@ export function ComponentColab_CardBeranda({
   data: MODEL_COLLABORATION;
   userLoginId: string;
 }) {
-  const router = useRouter();
-  const [loadingCreate, setLoadingCreate] = useState(false);
-  
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
-        style={{
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          color: "white",
-          borderRadius: "10px",
-          marginBottom: "20px",
-          padding: "15px",
-        }}
-      >
         <Stack>
           <ComponentColab_CardSectionHeaderAuthorName
-            authorName={data?.Author?.Profile?.name}
-            imagesId={data?.Author?.Profile?.imagesId}
-            profileId={data?.Author?.Profile?.id}
             isAuthor={userLoginId === data.Author.id ? true : false}
             colabId={data.id}
+            profile={data.Author.Profile as any}
           />
           <ComponentColab_CardSectionData
             colabId={data.id}
@@ -47,7 +31,7 @@ export function ComponentColab_CardBeranda({
             jumlah={data.ProjectCollaboration_Partisipasi}
           />
         </Stack>
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/colab/component/card_view/card_proyek_saya.tsx

@@ -1,23 +1,14 @@
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { Card, Stack } from "@mantine/core";
+import { MODEL_COLLABORATION } from "../../model/interface";
 import ComponentColab_CardSectionData from "./card_section_data";
 import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
-import { MODEL_COLLABORATION } from "../../model/interface";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export function ComponentColab_CardProyekSaya({data, path}: {data: MODEL_COLLABORATION, path: string}) {
     return (
       <>
-        <Card
+        <ComponentGlobal_CardStyles marginBottom={"15px"}>
-          style={{
-            padding: "15px",
-            backgroundColor: AccentColor.darkblue,
-            borderRadius: "10px",
-            border: `2px solid ${AccentColor.blue}`,
-            color: "white",
-            marginBottom: "15px",
-          }}
-        >
           <Stack>
             <ComponentColab_CardSectionData
               colabId={data.id}
@@ -28,7 +19,7 @@ export function ComponentColab_CardProyekSaya({data, path}: {data: MODEL_COLLABO
               jumlah={data.ProjectCollaboration_Partisipasi}
             />
           </Stack>
-        </Card>
+        </ComponentGlobal_CardStyles>
       </>
     );
 }

src/app_modules/colab/component/card_view/card_section_data.tsx

@@ -4,6 +4,8 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
 import { Card, Center, Grid, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { MODEL_COLLABORATION } from "../../model/interface";
+import { useState } from "react";
+import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 
 export default function ComponentColab_CardSectionData({
   colabId,
@@ -15,6 +17,7 @@ export default function ComponentColab_CardSectionData({
   data?: MODEL_COLLABORATION;
 }) {
   const router = useRouter();
+  const [visible, setVisible] = useState(false);
 
   return (
     <>
@@ -22,6 +25,7 @@ export default function ComponentColab_CardSectionData({
         px={"md"}
         onClick={() => {
           if (path) {
+            setVisible(true);
             router.push(path + colabId);
           } else {
             ComponentGlobal_NotifikasiPeringatan("Path tidak ditemukan");
@@ -79,6 +83,7 @@ export default function ComponentColab_CardSectionData({
             </Text>
           </Stack>
         </Stack>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
       </Card.Section>
     </>
   );

src/app_modules/colab/component/card_view/card_section_header_author_name.tsx

@@ -1,87 +1,74 @@
 "use client";
 
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import {
-  ActionIcon,
-  Avatar,
-  Card,
-  Divider,
-  Grid,
-  Menu,
-  Stack,
-  Text,
-} from "@mantine/core";
-import ComponentColab_AuthorNameOnHeader from "../header_author_name";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { useRouter } from "next/navigation";
-import { IconDots, IconEdit } from "@tabler/icons-react";
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { useDisclosure } from "@mantine/hooks";
+import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
-import { useState } from "react";
 import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import { ActionIcon, Group, Stack } from "@mantine/core";
+import { IconDots, IconEdit } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 export default function ComponentColab_CardSectionHeaderAuthorName({
-  profileId,
-  imagesId,
-  authorName,
-  isPembatas,
   isAuthor,
   colabId,
+  profile,
 }: {
-  profileId?: string;
-  imagesId?: string;
-  authorName?: string;
-  isPembatas?: boolean;
   isAuthor?: boolean;
   colabId?: string;
+  profile?: any;
 }) {
   const router = useRouter();
 
   return (
     <>
-      <Card.Section px={"md"}>
+      <Stack spacing={"xs"}>
-        <Stack spacing={"xs"}>
+        <ComponentGlobal_AvatarAndUsername
-          <Grid>
+          profile={profile}
-            <Grid.Col
+          component={
-              span={"content"}
+            <Group position="right">
-              onClick={() => {
-                if (profileId) {
-                  router.push(RouterProfile.katalogOLD + profileId);
-                } else {
-                  ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
-                }
-              }}
-            >
-              <Avatar
-                size={30}
-                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                radius={"xl"}
-                bg={"gray.1"}
-                src={
-                  imagesId
-                    ? RouterProfile.api_foto_profile + imagesId
-                    : "/aset/global/avatar.png"
-                }
-              />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Stack justify="center" h={"100%"}>
-                <Text lineClamp={1} fz={"sm"} fw={"bold"}>
-                  {authorName ? authorName : "Nama author"}
-                </Text>
-              </Stack>
-            </Grid.Col>
-            <Grid.Col span={"content"}>
               <ButtonAction
                 isAuthor={isAuthor as any}
                 colabId={colabId as any}
               />
-            </Grid.Col>
+            </Group>
-          </Grid>
+          }
-          {isPembatas ? <Divider /> : ""}
+        />
-        </Stack>
+
-      </Card.Section>
+        {/* <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (profileId) {
+                router.push(RouterProfile.katalogOLD + profileId);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            <Avatar
+              size={30}
+              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+              radius={"xl"}
+              bg={"gray.1"}
+              src={
+                imagesId
+                  ? RouterProfile.api_foto_profile + imagesId
+                  : "/aset/global/avatar.png"
+              }
+            />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack justify="center" h={"100%"}>
+              <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                {authorName ? authorName : "Nama author"}
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+          </Grid.Col>
+        </Grid> */}
+        {/* {isPembatas ? <Divider /> : ""} */}
+      </Stack>
     </>
   );
 }
@@ -94,7 +81,7 @@ function ButtonAction({
   colabId: string;
 }) {
   const router = useRouter();
-  const [openDrawe, setOpenDrawer] = useState(false);
+  const [openDrawer, setOpenDrawer] = useState(false);
 
   const listPage = [
     {
@@ -107,40 +94,12 @@ function ButtonAction({
 
   return (
     <>
-      {/* <Menu
-        opened={opened}
-        onChange={setOpened}
-        position="left-start"
-        offset={0}
-        shadow="lg"
-        withArrow
-        arrowPosition="center"
-      >
-        <Menu.Target >
-          <Stack justify="center" h={"100%"} >
-            <ActionIcon variant="transparent">
-              {isAuthor ? <IconDots size={20} /> : ""}
-            </ActionIcon>
-          </Stack>
-        </Menu.Target>
-        <Menu.Dropdown bg={"gray.1"} >
-          <Menu.Item
-            icon={<IconEdit size={15} />}
-            onClick={() => {
-              router.push(RouterColab.edit + colabId);
-            }}
-          >
-            Edit
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu> */}
-
       <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
         {isAuthor ? <IconDots size={20} color="white" /> : ""}
       </ActionIcon>
 
       <UIGlobal_Drawer
-        opened={openDrawe}
+        opened={openDrawer}
         close={() => setOpenDrawer(false)}
         component={listPage}
       />

src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { Stack, Divider, Center, Text, Grid, Card } from "@mantine/core";
+import { Card, Center, Divider, Grid, Stack, Text } from "@mantine/core";
-import { IconUsersGroup } from "@tabler/icons-react";
 
 export default function ComponentColab_JumlahPartisipan({
   jumlah,
@@ -10,18 +9,18 @@ export default function ComponentColab_JumlahPartisipan({
 }) {
   return (
     <>
-      <Card.Section px={"md"}>
+      <Card.Section px={"md"} >
         <Stack>
           <Divider />
           <Center>
             <Grid>
               <Grid.Col span={"content"}>
-                <Text c={"gray"} fz={"xs"} fw={"bold"}>
+                <Text c={"white"} fz={"xs"} fw={"bold"}>
                   {jumlah?.length ? jumlah?.length : 0}
                 </Text>
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text c={"gray"} fz={"xs"} fw={"bold"}>
+                <Text c={"white"} fz={"xs"} fw={"bold"}>
                   Partisipan
                 </Text>
               </Grid.Col>

src/app_modules/colab/component/card_view/card_semua_partisipan.tsx

@@ -1,13 +1,11 @@
-import { Card, Stack } from "@mantine/core";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Stack } from "@mantine/core";
 import {
-  MODEL_COLLABORATION,
+  MODEL_COLLABORATION_PARTISIPASI
-  MODEL_COLLABORATION_PARTISIPASI,
 } from "../../model/interface";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import ComponentColab_CardSectionData from "./card_section_data";
 import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
 import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export function ComponentColab_CardSemuaPartisipan({
   data,
@@ -18,21 +16,11 @@ export function ComponentColab_CardSemuaPartisipan({
 }) {
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
-        style={{
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-          marginBottom: "15px",
-        }}
-      >
         <Stack>
+          {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
           <ComponentColab_CardSectionHeaderAuthorName
-            authorName={data?.ProjectCollaboration.Author.Profile.name}
+            profile={data?.ProjectCollaboration.Author.Profile}
-            imagesId={data?.ProjectCollaboration.Author.Profile.imagesId}
-            profileId={data?.ProjectCollaboration.Author.Profile.id}
           />
           <ComponentColab_CardSectionData
             colabId={data?.ProjectCollaboration.id}
@@ -43,7 +31,7 @@ export function ComponentColab_CardSemuaPartisipan({
             jumlah={data?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
           />
         </Stack>
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/colab/component/detail/header_author_list_partisipan.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
   Avatar,
-  Button,
   Divider,
   Drawer,
   Grid,
@@ -16,7 +16,7 @@ import {
   ScrollArea,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconCaretRight, IconX } from "@tabler/icons-react";
@@ -89,8 +89,27 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
         </Stack>
       </Drawer>
 
-      <Stack spacing={"xs"}>
+      <Stack spacing={"xs"} p={"xs"}>
-        <Grid>
+        <ComponentGlobal_AvatarAndUsername
+          profile={author?.Profile as any}
+          fontSize={"sm"}
+          component={
+            <Stack justify="center" align="flex-end" h={"100%"}>
+              {deskripsi ? (
+                <ActionIcon
+                  onClick={() => open()}
+                  radius={"xl"}
+                  variant="transparent"
+                >
+                  <IconCaretRight color={MainColor.yellow} />
+                </ActionIcon>
+              ) : (
+                ""
+              )}
+            </Stack>
+          }
+        />
+        {/* <Grid>
           <Grid.Col
             span={"content"}
             onClick={() => {
@@ -136,7 +155,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
             </Stack>
           </Grid.Col>
         </Grid>
-        {isPembatas ? <Divider /> : ""}
+        {isPembatas ? <Divider /> : ""} */}
       </Stack>
     </>
   );

src/app_modules/colab/component/detail/list_partisipasi_user.tsx

@@ -30,6 +30,7 @@ import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
 import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
 import mqtt_client from "@/util/mqtt_client";
+
 export default function ComponentColab_DetailListPartisipasiUser({
   listPartisipan,
   userLoginId,
@@ -117,6 +118,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
           },
         }}
       >
+        
         <Stack spacing={"xs"}>
           <Group position="right">
             <ActionIcon onClick={close} variant="transparent">
@@ -125,7 +127,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
           </Group>
           <Textarea
             maxLength={300}
-            label="Deskripsi Diri"
+            label={<Text c={"white"} mb={"sm"} fw={"bold"}>Deskripsi Diri</Text>}
             placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
             minRows={4}
             onChange={(val) => {
@@ -179,7 +181,6 @@ export default function ComponentColab_DetailListPartisipasiUser({
             backgroundColor: AccentColor.blue,
             color: "white",
             borderRadius: "10px",
-            marginBottom: "20px",
             padding: "15px",
           }}
         >

src/app_modules/colab/component/header_author_name.tsx

@@ -1,31 +1,38 @@
 "use client";
 
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
-import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
+import { Group, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import moment from "moment";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 
 export default function ComponentColab_AuthorNameOnHeader({
-  profileId,
-  imagesId,
-  authorName,
   tglPublish,
-  isPembatas,
+  profile,
 }: {
-  profileId?: string;
-  imagesId?: string;
-  authorName?: string;
   tglPublish?: Date;
-  isPembatas?: boolean;
+  profile: any;
 }) {
   const router = useRouter();
   return (
     <>
-      <Stack spacing={"xs"} style={{
+      <ComponentGlobal_AvatarAndUsername
-        color: "white"
+        profile={profile}
-      }}>
+        component={
-        <Grid>
+          <Group position="right">
+            {tglPublish ? (
+              <Text fz={"xs"}>
+                {new Intl.DateTimeFormat("id-ID", {
+                  dateStyle: "medium",
+                }).format(tglPublish)}
+              </Text>
+            ) : (
+              ""
+            )}
+          </Group>
+        }
+      />
+
+      <Stack spacing={"xs"}>
+        {/* <Grid>
           <Grid.Col
             span={"content"}
             onClick={() => {
@@ -69,8 +76,7 @@ export default function ComponentColab_AuthorNameOnHeader({
               )}
             </Stack>
           </Grid.Col>
-        </Grid>
+        </Grid> */}
-        {isPembatas ? <Divider /> : ""}
       </Stack>
     </>
   );

src/app_modules/colab/detail/info_grup/index.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import { Box, Paper, Stack, Text, Title } from "@mantine/core";
-import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
-import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
-import ComponentColab_DetailData from "../../component/detail/detail_data";
-import ComponentColab_AuthorNameOnListPartisipan from "../../component/detail/header_author_list_partisipan";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_AvatarAndUsername, ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Box, Paper, Stack, Title } from "@mantine/core";
+import ComponentColab_DetailData from "../../component/detail/detail_data";
+import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
 
 export default function Colab_DetailInfoGrup({
   dataRoom,
@@ -20,7 +18,7 @@ export default function Colab_DetailInfoGrup({
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Info Grup" />}
       >
-        {<InfoGroup dataRoom={dataRoom} />}
+        <InfoGroup dataRoom={dataRoom} />
       </UIGlobal_LayoutTamplate>
     </>
   );
@@ -29,42 +27,30 @@ export default function Colab_DetailInfoGrup({
 function InfoGroup({ dataRoom }: { dataRoom: MODEL_COLLABORATION_ROOM_CHAT }) {
   return (
     <>
-      <Stack
+      <ComponentGlobal_CardStyles>
-        px={"xs"}
+        <Stack>
-        style={{
+          <ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
-          border: `2px solid ${AccentColor.blue}`,
+          <Paper
-          backgroundColor: AccentColor.darkblue,
+            style={{
-          color: "white",
+              border: `2px solid ${AccentColor.softblue}`,
-          borderRadius: "10px",
+              backgroundColor: AccentColor.blue,
-          marginBottom: "20px",
+              color: "white",
-          padding: "15px",
+              borderRadius: "10px",
-        }}
+              padding: "15px",
-      >
+            }}
-        <ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
+          >
-        <Paper
+            <Stack>
-
+              <Title order={6}>Anggota Grup</Title>
-          style={{
+              {dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
-            border: `2px solid ${AccentColor.softblue}`,
+                <Box key={i}>
-            backgroundColor: AccentColor.blue,
+               
-            color: "white",
+                  <ComponentGlobal_AvatarAndUsername profile={e.User.Profile as any}/>
-            borderRadius: "10px",
+                </Box>
-            marginBottom: "20px",
+              ))}
-            padding: "15px",
+            </Stack>
-          }}
+          </Paper>
-        >
+        </Stack>
-          <Stack>
+      </ComponentGlobal_CardStyles>
-            <Title order={6}>Anggota Grup</Title>
-            {dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
-              <Box key={i}>
-                <ComponentColab_AuthorNameOnListPartisipan
-                  author={e.User}
-                  // isPembatas={true}
-                />
-              </Box>
-            ))}
-          </Stack>
-        </Paper>
-      </Stack>
     </>
   );
 }

src/app_modules/colab/detail/main_detail/index.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import {
+import { Stack } from "@mantine/core";
-  Stack
-} from "@mantine/core";
 import ComponentColab_DetailData from "../../component/detail/detail_data";
 import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
 import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
 import { MODEL_COLLABORATION } from "../../model/interface";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 
 export default function Colab_MainDetail({
   dataColab,
@@ -18,37 +17,26 @@ export default function Colab_MainDetail({
   dataColab?: MODEL_COLLABORATION;
   userLoginId?: string;
   listPartisipan?: any[];
-  cekPartisipan: boolean
+  cekPartisipan: boolean;
 }) {
   return (
     <>
-      <Stack
+      <ComponentGlobal_CardStyles>
-        px={5}
+        <Stack>
-        spacing={"xl"}
+          <ComponentColab_AuthorNameOnHeader
-        style={{
+            tglPublish={new Date()}
-          border: `2px solid ${AccentColor.blue}`,
+            profile={dataColab?.Author?.Profile as any}
-          backgroundColor: AccentColor.darkblue,
+          />
-          color: "white",
+          <ComponentColab_DetailData data={dataColab} />
-          borderRadius: "10px",
+          <ComponentColab_DetailListPartisipasiUser
-          marginBottom: "20px",
+            listPartisipan={listPartisipan}
-          padding: "15px",
+            userLoginId={userLoginId}
-        }}
+            authorId={dataColab?.Author.id}
-      >
+            colabId={dataColab?.id}
-        <ComponentColab_AuthorNameOnHeader
+            cekPartisipan={cekPartisipan}
-          tglPublish={new Date()}
+          />
-          authorName={dataColab?.Author?.Profile?.name}
+        </Stack>
-          imagesId={dataColab?.Author?.Profile?.imagesId}
+      </ComponentGlobal_CardStyles>
-          profileId={dataColab?.Author?.Profile?.id}
-        />
-        <ComponentColab_DetailData data={dataColab} />
-        <ComponentColab_DetailListPartisipasiUser
-          listPartisipan={listPartisipan}
-          userLoginId={userLoginId}
-          authorId={dataColab?.Author.id}
-          colabId={dataColab?.id}
-          cekPartisipan={cekPartisipan}
-        />
-      </Stack>
     </>
   );
 }

src/app_modules/colab/detail/notifikasi/index.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
-import { Center, Stack } from "@mantine/core";
-import { MODEL_COLLABORATION_NOTIFIKSI } from "../../model/interface";
-import ComponentColab_NotedBox from "../../component/noted_box";
-import ComponentColab_DetailData from "../../component/detail/detail_data";
-
-export default function Colab_DetailNotifikasi({
-  data,
-}: {
-  data: MODEL_COLLABORATION_NOTIFIKSI;
-}) {
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentColab_HeaderTamplate title="Detail Notifikasi" />}
-      >
-        <DetailNotif data={data} />
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}
-
-function DetailNotif({ data }: { data?: MODEL_COLLABORATION_NOTIFIKSI }) {
-  return (
-    <>
-      <Stack px={"sm"}>
-        <ComponentColab_NotedBox
-          informasi={data?.ProjectCollaboration.report as any}
-        />
-        <ComponentColab_DetailData data={data?.ProjectCollaboration} />
-      </Stack>
-    </>
-  );
-}

src/app_modules/colab/detail/proyek/partisipasi/index.tsx

@@ -1,10 +1,14 @@
 "use client";
 
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
 import ComponentColab_DetailListPartisipasiUser from "@/app_modules/colab/component/detail/list_partisipasi_user";
 import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
-import { MODEL_COLLABORATION, MODEL_COLLABORATION_PARTISIPASI } from "@/app_modules/colab/model/interface";
+import {
+  MODEL_COLLABORATION,
+  MODEL_COLLABORATION_PARTISIPASI,
+} from "@/app_modules/colab/model/interface";
 import { Stack, Text } from "@mantine/core";
 
 export default function Colab_DetailPartisipasiProyek({
@@ -12,34 +16,21 @@ export default function Colab_DetailPartisipasiProyek({
   listPartisipan,
 }: {
   dataColab: MODEL_COLLABORATION;
-  listPartisipan: MODEL_COLLABORATION_PARTISIPASI[]
+  listPartisipan: MODEL_COLLABORATION_PARTISIPASI[];
 }) {
   return (
     <>
-      <Stack
+      <ComponentGlobal_CardStyles>
-        px={5}
+        <Stack>
-        spacing={"xl"}
+          <ComponentColab_AuthorNameOnHeader
-        style={{
+            profile={dataColab.Author.Profile}
-          border: `2px solid ${AccentColor.blue}`,
+          />
-          backgroundColor: AccentColor.darkblue,
+          <ComponentColab_DetailData data={dataColab} />
-          color: "white",
+          <ComponentColab_DetailListPartisipasiUser
-          borderRadius: "10px",
+            listPartisipan={listPartisipan}
-          marginBottom: "20px",
+          />
-          padding: "15px",
+        </Stack>
-        }}
+      </ComponentGlobal_CardStyles>
-      >
-        {/* <pre>{JSON.stringify(dataColab, null,2)}</pre> */}
-        <ComponentColab_AuthorNameOnHeader
-          authorName={dataColab?.Author.Profile.name}
-          profileId={dataColab?.Author.Profile.id}
-          imagesId={dataColab?.Author.Profile.imagesId}
-          tglPublish={dataColab?.createdAt}
-        />
-        <ComponentColab_DetailData data={dataColab} />
-        <ComponentColab_DetailListPartisipasiUser
-          listPartisipan={listPartisipan}
-        />
-      </Stack>
     </>
   );
 }

src/app_modules/colab/detail/proyek/saya/index.tsx

@@ -5,6 +5,7 @@ import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
@@ -17,7 +18,7 @@ import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_PARTISIPASI,
 } from "@/app_modules/colab/model/interface";
-import { notifikasiToUser_CreateGroupCollaboration } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_collaboration";
+import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
   Button,
@@ -38,8 +39,6 @@ import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import mqtt_client from "@/util/mqtt_client";
-
 
 export default function Colab_DetailProyekSaya({
   dataColab,
@@ -50,24 +49,15 @@ export default function Colab_DetailProyekSaya({
 }) {
   return (
     <>
-      <Stack
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
-        px={5}
+        <Stack>
-        spacing={"xl"}
+          <ComponentColab_DetailData data={dataColab} />
-        style={{
+          <CheckBoxPartisipan
-          border: `2px solid ${AccentColor.blue}`,
+            listPartisipan={listPartisipan}
-          backgroundColor: AccentColor.darkblue,
+            colabId={dataColab.id}
-          color: "white",
+          />
-          borderRadius: "10px",
+        </Stack>
-          marginBottom: "20px",
+      </ComponentGlobal_CardStyles>
-          padding: "15px",
-        }}
-      >
-        <ComponentColab_DetailData data={dataColab} />
-        <CheckBoxPartisipan
-          listPartisipan={listPartisipan}
-          colabId={dataColab.id}
-        />
-      </Stack>
     </>
   );
 }
@@ -119,8 +109,8 @@ function CheckBoxPartisipan({
                   ) : (
                     listPartisipan.map((e, i) => (
                       <Grid key={i} align="center">
-                        <Grid.Col span={"content"}>
+                        <Grid.Col span={2}>
-                          <Checkbox value={e?.User?.id} />
+                          <Checkbox color={"yellow"} value={e?.User?.id} />
                         </Grid.Col>
                         <Grid.Col span={"auto"}>
                           <ComponentColab_AuthorNameOnListPartisipan

src/app_modules/colab/detail/proyek/saya/layout.tsx

@@ -16,7 +16,7 @@ export default function LayoutColab_DetailProyekSaya({
   colabId,
 }: {
   children: React.ReactNode;
-  colabId: string
+  colabId: string;
 }) {
   const [openDrawer, setOpenDrawer] = useState(false);
   const listPage = [
@@ -38,10 +38,8 @@ export default function LayoutColab_DetailProyekSaya({
               <ActionIcon
                 variant="transparent"
                 onClick={() => setOpenDrawer(true)}
-                         
-
               >
-                <IconDotsVertical />
+                <IconDotsVertical color="white" />
               </ActionIcon>
             }
           />
@@ -51,10 +49,9 @@ export default function LayoutColab_DetailProyekSaya({
       </UIGlobal_LayoutTamplate>
 
       <UIGlobal_Drawer
-      opened={openDrawer}
+        opened={openDrawer}
-      close={() => setOpenDrawer(false)}
+        close={() => setOpenDrawer(false)}
-      component={listPage}
+        component={listPage}
-      
       />
     </>
   );

src/app_modules/colab/detail/status/publish/index.tsx

@@ -1,164 +0,0 @@
-"use client";
-
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
-import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
-import { gs_colab_hot_menu } from "@/app_modules/colab/global_state";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import {
-  Button,
-  Checkbox,
-  Drawer,
-  Grid,
-  Group,
-  Paper,
-  ScrollArea,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-export default function Colab_DetailStatusPublish() {
-  return (
-    <>
-      <Stack px={5} spacing={"xl"}>
-        <ComponentColab_DetailData />
-        <CheckBoxPartisipan />
-      </Stack>
-    </>
-  );
-}
-
-function CheckBoxPartisipan() {
-  const router = useRouter();
-  const [value, setValue] = useState<string[]>([]);
-  const [opened, { open, close }] = useDisclosure(false);
-  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
-
-  const listCheck = [
-    {
-      id: 1,
-      value: "satu",
-      label: "Satu",
-    },
-    {
-      id: 2,
-      value: "dua",
-      label: "Dua",
-    },
-    {
-      id: 3,
-      value: "tiga",
-      label: "Tiga",
-    },
-    {
-      id: 4,
-      value: "empat",
-      label: "Empat",
-    },
-    {
-      id: 5,
-      value: "lima",
-      label: "Lima",
-    },
-    {
-      id: 6,
-      value: "enam",
-      label: "Enam",
-    },
-    {
-      id: 7,
-      value: "tujuh",
-      label: "Tujuh",
-    },
-    {
-      id: 8,
-      value: "delapan",
-      label: "Delapan",
-    },
-    {
-      id: 9,
-      value: "sembilan",
-      label: "Sembilan",
-    },
-    {
-      id: 10,
-      value: "sepuluh",
-      label: "Sepuluh",
-    },
-  ];
-
-  async function onSave() {
-    close();
-    ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
-    setHotMenu(4);
-    router.push(RouterColab.grup_diskusi);
-  }
-
-  return (
-    <>
-      <Stack>
-        <Paper withBorder shadow="lg" p={"sm"}>
-          <Text c={"red"} fz={10}>
-            *
-            <Text px={"xs"} span inherit c={"gray"}>
-              Pilih user yang akan menjadi tim proyek anda
-            </Text>
-          </Text>
-          <ScrollArea h={400}>
-            <Checkbox.Group value={value} onChange={setValue}>
-              <Stack mt="xs">
-                {listCheck.map((e, i) => (
-                  <Grid key={e.id} align="center">
-                    <Grid.Col span={"content"}>
-                      <Checkbox value={e.value} />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <ComponentColab_AuthorNameOnHeader isPembatas={true} />
-                    </Grid.Col>
-                  </Grid>
-                ))}
-              </Stack>
-            </Checkbox.Group>
-          </ScrollArea>
-        </Paper>
-        <Button
-          radius={"xl"}
-          disabled={_.isEmpty(value) ? true : false}
-          onClick={() => {
-            open();
-          }}
-        >
-          Buat Ruang Diskusi{" "}
-        </Button>
-      </Stack>
-
-      <Drawer
-        opened={opened}
-        onClose={close}
-        position="bottom"
-        size={150}
-        withCloseButton={false}
-      >
-        <Stack>
-          <Title order={6}>Nama Grup Diskusi</Title>
-          <TextInput placeholder="Masukan nama grup diskusi .." radius={"xl"} />
-          <Group grow>
-            <Button radius={"xl"} onClick={close}>
-              Batal
-            </Button>
-            <Button radius={"xl"} color="green" onClick={() => onSave()}>
-              Simpan
-            </Button>
-          </Group>
-        </Stack>
-      </Drawer>
-    </>
-  );
-}

src/app_modules/colab/detail/status/publish/layout.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
-import { AppShell } from "@mantine/core";
-import React from "react";
-
-export default function LayoutColab_DetailStatusPublish({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <AppShell header={<ComponentColab_HeaderTamplate title="Proyek Saya" />}>
-        {children}
-      </AppShell>
-    </>
-  );
-}

src/app_modules/colab/detail/status/reject/index.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import ComponentColab_NotedBox from "@/app_modules/colab/component/noted_box";
-import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
-import { Button, Group, Modal, Stack, Title } from "@mantine/core";
-import { IconCheck, IconTrash, IconX } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { gs_colab_status } from "@/app_modules/colab/global_state";
-import { useAtom } from "jotai";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { useDisclosure } from "@mantine/hooks";
-
-export default function Colab_DetailStatusReject() {
-  return (
-    <>
-      <Stack px={"xs"} spacing={"xl"}>
-        <ComponentColab_NotedBox informasi="Alasan penolakan" />
-        <ComponentColab_DetailData />
-        <ButtonAction />
-      </Stack>
-    </>
-  );
-}
-
-function ButtonAction() {
-  const router = useRouter();
-  const [tabsStatus, setTabsStatus] = useAtom(gs_colab_status);
-  const [opened, { open, close }] = useDisclosure(false);
-
-  async function onAjukan() {
-    setTabsStatus("Review");
-    ComponentGlobal_NotifikasiBerhasil("Ajukan Review Berhasil");
-    router.back();
-  }
-
-  async function onDelete() {
-    router.back();
-    ComponentGlobal_NotifikasiBerhasil("Berhasil Dihapus");
-  }
-
-  return (
-    <>
-      <Group grow>
-        <Button
-          radius={"xl"}
-          leftIcon={<IconCheck size={15} />}
-          onClick={() => onAjukan()}
-        >
-          Ajukan Review
-        </Button>
-        <Button
-          radius={"xl"}
-          leftIcon={<IconTrash size={15} />}
-          color="red"
-          onClick={() => open()}
-        >
-          Hapus
-        </Button>
-      </Group>
-
-      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
-        <Stack>
-          <Title order={6}>Yakin menghapus proyek ini ?</Title>
-          <Group position="center">
-            <Button
-              radius={"xl"}
-              leftIcon={<IconX size={15} />}
-              onClick={close}
-            >
-              Batal
-            </Button>
-            <Button
-              radius={"xl"}
-              leftIcon={<IconTrash size={15} />}
-              color="red"
-              onClick={() => onDelete()}
-            >
-              Hapus
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
-    </>
-  );
-}

src/app_modules/colab/detail/status/reject/layout.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
-import { AppShell } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
-import React from "react";
-
-export default function LayoutColab_DetailStatusReject({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <AppShell
-        header={
-          <ComponentColab_HeaderTamplate
-            title="Detail Reject"
-            icon={<IconEdit />}
-            route2={RouterColab.edit + 1}
-          />
-        }
-      >
-        {children}
-      </AppShell>
-    </>
-  );
-}

src/app_modules/colab/detail/status/review/index.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
-import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
-import { gs_colab_status } from "@/app_modules/colab/global_state";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { Button, Stack } from "@mantine/core";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-
-export default function Colab_DetailStatusReview() {
-  return (
-    <>
-      <Stack px={"xs"} spacing={"xl"}>
-        <ComponentColab_DetailData />
-        <ButtonAction />
-      </Stack>
-    </>
-  );
-}
-
-function ButtonAction() {
-  const router = useRouter();
-  const [tabsStatus, setTabsStatus] = useAtom(gs_colab_status);
-
-  async function onClick() {
-    setTabsStatus("Reject");
-    router.back();
-    ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
-  }
-
-  return (
-    <>
-      <Button radius={"xl"} onClick={() => onClick()}>
-        Batalkan Review
-      </Button>
-    </>
-  );
-}

src/app_modules/colab/detail/status/review/layout.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
-import { AppShell } from "@mantine/core";
-import React from "react";
-
-export default function LayoutColab_DetailStatusReview({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <AppShell
-        header={<ComponentColab_HeaderTamplate title="Detail Review" />}
-      >
-        {children}
-      </AppShell>
-    </>
-  );
-}

src/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id.ts

@@ -31,7 +31,7 @@ export default async function colab_getListAnggotaByRoomId(roomId: string) {
                 select: {
                   id: true,
                   name: true,
-                  imagesId: true
+                  imageId: true
                 },
               },
             },

src/app_modules/colab/index.ts

@@ -3,27 +3,18 @@ import LayoutColab_Main from "./main/layout";
 import Colab_Splash from "./splash";
 import Colab_Create from "./create";
 import LayoutColab_Create from "./create/layout";
-import Colab_Status from "./main/status";
 import Colab_MainDetail from "./detail/main_detail";
 import LayoutColab_MainDetail from "./detail/main_detail/layout";
-import Colab_DetailStatusReview from "./detail/status/review";
-import LayoutColab_DetailStatusReview from "./detail/status/review/layout";
-import Colab_DetailStatusReject from "./detail/status/reject";
-import LayoutColab_DetailStatusReject from "./detail/status/reject/layout";
 import Colab_Proyek from "./main/proyek";
-import Colab_DetailStatusPublish from "./detail/status/publish";
-import LayoutColab_DetailStatusPublish from "./detail/status/publish/layout";
 import Colab_Edit from "./edit";
 import LayoutColab_Edit from "./edit/layout";
 import Colab_DetailPartisipasiProyek from "./detail/proyek/partisipasi";
 import LayoutColab_DetailPartisipasiProyek from "./detail/proyek/partisipasi/layout";
 import Colab_GrupDiskus from "./main/grup";
 import Colab_DetailGrupDiskusi from "./detail/grup";
-import Colab_NotifikasiView from "./main/pemberitahuan";
 import Colab_DetailProyekSaya from "./detail/proyek/saya";
 import LayoutColab_DetailProyekSaya from "./detail/proyek/saya/layout";
 import Colab_DetailInfoGrup from "./detail/info_grup";
-import Colab_DetailNotifikasi from "./detail/notifikasi";
 import Colab_GroupChatView from "./detail/group";
 
 export {
@@ -32,26 +23,17 @@ export {
   Colab_Splash,
   Colab_Create,
   LayoutColab_Create,
-  Colab_Status,
   Colab_MainDetail,
   LayoutColab_MainDetail,
-  Colab_DetailStatusReview,
-  LayoutColab_DetailStatusReview,
-  Colab_DetailStatusReject,
-  LayoutColab_DetailStatusReject,
   Colab_Proyek,
-  Colab_DetailStatusPublish,
-  LayoutColab_DetailStatusPublish,
   Colab_Edit,
   LayoutColab_Edit,
   Colab_DetailPartisipasiProyek,
   LayoutColab_DetailPartisipasiProyek,
   Colab_GrupDiskus,
   Colab_DetailGrupDiskusi,
-  Colab_NotifikasiView,
   Colab_DetailProyekSaya,
   LayoutColab_DetailProyekSaya,
   Colab_DetailInfoGrup,
-  Colab_DetailNotifikasi,
   Colab_GroupChatView,
 };

src/app_modules/colab/main/layout.tsx

@@ -30,38 +30,18 @@ export default function LayoutColab_Main({
       path: RouterColab.beranda,
       icon: <IconHome />,
     },
-
-    // {
-    //   id: 2,
-    //   name: "Status",
-    //   path: RouterColab.status,
-    //   icon: <IconReservedLine />,
-    // },
-
     {
-      id: 3,
+      id: 2,
       name: "Partisipasi",
       path: RouterColab.proyek,
       icon: <IconUsersGroup />,
     },
     {
-      id: 4,
+      id: 3,
       name: "Grup Diskusi",
       path: RouterColab.grup_diskusi,
       icon: <IconMessages />,
     },
-    // {
-    //   id: 5,
-    //   name: "Notifikasi",
-    //   path: RouterColab.notifikasi,
-    //   icon: cekNotif ? (
-    //     <Indicator processing color="orange">
-    //       <IconBell />
-    //     </Indicator>
-    //   ) : (
-    //     <IconBell />
-    //   ),
-    // },
   ];
 
   return (

src/app_modules/colab/main/pemberitahuan/index.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import {
-  ActionIcon,
-  Center,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-import _ from "lodash";
-import { MODEL_COLLABORATION_NOTIFIKSI } from "../../model/interface";
-import { IconChevronRight } from "@tabler/icons-react";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import colab_funUpdateIsReadByNotifId from "../../fun/edit/fun_is_read_by_id";
-
-export default function Colab_NotifikasiView({
-  listNotifikasi,
-}: {
-  listNotifikasi?: MODEL_COLLABORATION_NOTIFIKSI[];
-}) {
-  const router = useRouter();
-  const [notifId, setNotifId] = useState("");
-
-  if (_.isEmpty(listNotifikasi))
-    return <ComponentColab_IsEmptyData text="Tidak ada data" />;
-
-  async function onRead(notifId: string) {
-    await colab_funUpdateIsReadByNotifId(notifId).then((res) => {
-      if (res.status === 200) {
-        setNotifId(notifId);
-        router.push(RouterColab.detail_notifikasi + notifId);
-      } else {
-        console.log(``);
-      }
-    });
-  }
-  return (
-    <>
-      <Stack>
-        {listNotifikasi?.map((e, i) => (
-          <Paper
-            key={i}
-            bg={e?.isRead ? "gray.1" : "gray.4"}
-            p={"md"}
-            onClick={() => {
-              onRead(e?.id);
-            }}
-          >
-            <Group position="apart">
-              <Stack spacing={0} w={"80%"}>
-                <Text fw={"bold"} fz={"xs"} lineClamp={1}>
-                  {e.note}
-                </Text>
-                <Text lineClamp={1}>{e.ProjectCollaboration.report}</Text>
-              </Stack>
-              <ActionIcon
-                variant="transparent"
-                loading={e?.id === notifId ? true : false}
-              >
-                <IconChevronRight />
-              </ActionIcon>
-            </Group>
-          </Paper>
-        ))}
-      </Stack>
-    </>
-  );
-}

src/app_modules/colab/main/proyek/saya.tsx

@@ -1,19 +1,14 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { Box, Card, Center, Loader, Stack } from "@mantine/core";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import { Box, Center, Loader } from "@mantine/core";
-import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
-import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
-import { MODEL_COLLABORATION } from "../../model/interface";
 import _ from "lodash";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import { ComponentColab_CardProyekSaya } from "../../component/card_view/card_proyek_saya";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { event_getAllDraft } from "@/app_modules/event/fun/get/status/get_all_draft";
-import { ScrollOnly } from "next-scroll-loader";
 import colab_getListAllProyekSayaByAuthorId from "../../fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
+import { MODEL_COLLABORATION } from "../../model/interface";
 
 export default function Colab_ProyekSaya({
   listProyekSaya,

src/app_modules/colab/main/status/index.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { Tabs, Stack, Paper } from "@mantine/core";
-import { useState } from "react";
-import Colab_StatusPublish from "./publish";
-import Colab_StatusReject from "./reject";
-import Colab_StatusReview from "./review";
-import { useAtom } from "jotai";
-import { gs_colab_status } from "../../global_state";
-
-export default function Colab_Status({
-  listPublish,
-  listReview,
-  listReject,
-}: {
-  listPublish: any[];
-  listReview: any[];
-  listReject: any[];
-}) {
-  const [tabsStatus, setTabsStatus] = useAtom(gs_colab_status);
-  const [colorTab, setColorTab] = useState<string | null>("");
-
-  const listTabs = [
-    {
-      id: 1,
-      path: <Colab_StatusPublish listPublish={listPublish as any} />,
-      value: "Publish",
-      bg: "green",
-    },
-    // {
-    //   id: 2,
-    //   path: <Colab_StatusReview />,
-    //   value: "Review",
-    //   bg: "orange",
-    // },
-    {
-      id: 3,
-      path: <Colab_StatusReject />,
-      value: "Reject",
-      bg: "red",
-    },
-  ];
-
-  return (
-    <>
-      <Tabs
-        color={
-          "blue"
-          // colorTab === "Publish"
-          // ? "green"
-          // : colorTab === "Review"
-          // ? "orange"
-          // : "red"
-        }
-        variant="pills"
-        radius={"xl"}
-        defaultValue={"Publish"}
-        value={tabsStatus}
-        onTabChange={(val) => {
-          setTabsStatus(val);
-          // setColorTab(val);
-        }}
-      >
-        <Stack>
-          <Tabs.List grow>
-            {listTabs.map((e) => (
-              <Tabs.Tab
-                key={e.id}
-                value={e.value}
-                bg={tabsStatus === e.value ? "cyan" : "gray.2"}
-                fw={tabsStatus === e.value ? "bold" : "normal"}
-              >
-                {e.value}
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
-          {listTabs.map((e) => (
-            <Tabs.Panel key={e.id} value={e.value}>
-              {e.path}
-            </Tabs.Panel>
-          ))}
-        </Stack>
-      </Tabs>
-    </>
-  );
-}

src/app_modules/colab/main/status/publish.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import { Card, Stack, Grid, Text, Divider, Center, Box } from "@mantine/core";
-import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
-import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
-import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
-import { MODEL_COLLABORATION } from "../../model/interface";
-
-export default function Colab_StatusPublish({
-  listPublish,
-}: {
-  listPublish: MODEL_COLLABORATION[];
-}) {
-  return (
-    <>
-      {listPublish.map((e, i) => (
-        <Card
-          key={i}
-          withBorder
-          shadow="lg"
-          mb={"lg"}
-          radius={"md"}
-          // bg={"green.0.5"}
-          style={{ borderColor: "green", borderWidth: "0.5px" }}
-        >
-          <Stack>
-            <ComponentColab_CardSectionData
-              colabId={e.id}
-              path={RouterColab.status_publish}
-              data={e}
-            />
-            <ComponentColab_JumlahPartisipan jumlah={e.ProjectCollaboration_Partisipasi} />
-          </Stack>
-        </Card>
-      ))}
-    </>
-  );
-}

src/app_modules/colab/main/status/reject.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { Card } from "@mantine/core";
-import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-
-export default function Colab_StatusReject() {
-  return (
-    <>
-      {Array(5)
-        .fill(0)
-        .map((e, i) => (
-          <Card
-            key={i}
-            withBorder
-            shadow="lg"
-            mb={"lg"}
-            radius={"md"}
-            // bg={"red.1"}
-
-            style={{ borderColor: "red", borderWidth: "0.5px" }}
-          >
-            <ComponentColab_CardSectionData
-              colabId={i}
-              path={RouterColab.status_reject}
-            />
-          </Card>
-        ))}
-    </>
-  );
-}

src/app_modules/colab/main/status/review.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Card } from "@mantine/core";
-import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-
-export default function Colab_StatusReview() {
-  return (
-    <>
-      {Array(5)
-        .fill(0)
-        .map((e, i) => (
-          <Card
-            key={i}
-            withBorder
-            shadow="lg"
-            mb={"lg"}
-            radius={"md"}
-            // bg={"orange.0.5"}
-            style={{ borderColor: "orange", borderWidth: "0.5px" }}
-          >
-            <ComponentColab_CardSectionData colabId={i} path={RouterColab.status_review} />
-          </Card>
-        ))}
-    </>
-  );
-}

src/app_modules/job/_ui/index.ts

@@ -0,0 +1,3 @@
+import { Job_UiNotUserView } from "./ui_not_user_view_job";
+
+export { Job_UiNotUserView };

src/app_modules/job/_ui/ui_not_user_view_job.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import {
+  UIGlobal_LayoutHeaderTamplate,
+  UIGlobal_LayoutTamplate,
+} from "@/app_modules/_global/ui";
+import { Job_ViewNotUserJobVacany } from "../_view";
+
+export function Job_UiNotUserView({ data }: { data: any }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Job Vacancy" hideButtonLeft />
+        }
+      >
+        <Job_ViewNotUserJobVacany data={data} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/job/_view/index.ts

@@ -0,0 +1,3 @@
+import { Job_ViewNotUserJobVacany } from "./view_not_user_view_job";
+
+export { Job_ViewNotUserJobVacany };

src/app_modules/job/_view/view_not_user_view_job.tsx

@@ -0,0 +1,45 @@
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_NotUserLoadImage,
+} from "@/app_modules/_global/component";
+import { Center, Stack, Text, Title } from "@mantine/core";
+
+export function Job_ViewNotUserJobVacany({ data }: { data: any }) {
+  return (
+    <>
+      {data ? (
+        <ComponentGlobal_CardStyles>
+          <Stack spacing={"xl"}>
+            {data.imageId && (
+              <ComponentGlobal_NotUserLoadImage fileId={data?.imageId} />
+            )}
+
+            <Stack>
+              <Center>
+                <Text fz={20} fw={"bold"}>
+                  {data.title}
+                </Text>
+              </Center>
+              <Stack spacing={0}>
+                <Text>
+                  <div dangerouslySetInnerHTML={{ __html: data.content }} />
+                </Text>
+                <Text>
+                  <div dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
+                </Text>
+              </Stack>
+            </Stack>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      ) : (
+        <ComponentGlobal_CardStyles>
+          <Stack spacing={"xl"}>
+            <Title order={3} align="center">
+              Data Not Found
+            </Title>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      )}
+    </>
+  );
+}

src/app_modules/job/component/beranda/card_view.tsx

@@ -1,16 +1,15 @@
 "use client";
 
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import {
-  MainColor,
+  ComponentGlobal_AvatarAndUsername,
-  AccentColor,
+  ComponentGlobal_CardLoadingOverlay,
-} from "@/app_modules/_global/color/color_pallet";
+  ComponentGlobal_CardStyles,
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+} from "@/app_modules/_global/component";
-import { Card, Grid, Center, Text } from "@mantine/core";
+import { Center, Stack, Text } from "@mantine/core";
-import { MODEL_JOB } from "../../model/interface";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { MODEL_JOB } from "../../model/interface";
 
 export default function ComponentJob_BerandaCardView({
   data,
@@ -19,52 +18,29 @@ export default function ComponentJob_BerandaCardView({
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
-  const [jobId, setJobId] = useState("");
 
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles>
-        mb={"md"}
+        <Stack>
-        shadow="lg"
+          <ComponentGlobal_AvatarAndUsername
-        p={30}
+            profile={data.Author.Profile as any}
-        radius={"md"}
-        style={{
-          backgroundColor: MainColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-        }}
-      >
-        <Card.Section style={{ zIndex: 99 }}>
-          <ComponentGlobal_AuthorNameOnHeader
-            authorName={data.Author.username}
-            imagesId={data.Author.Profile.imagesId}
-            profileId={data.Author.Profile.id}
-            isPembatas={true}
           />
-        </Card.Section>
+
-        <Card.Section
+          <Center
-          onClick={() => {
+            h={50}
-            visible ? "" : setJobId(data.id),
+            onClick={() => {
-              setVisible(true),
+              setVisible(true), router.push(RouterJob.main_detail + data.id);
-              router.push(RouterJob.main_detail + data.id);
+            }}
-          }}
+          >
-          mt={"lg"}
+            <Text fw={"bold"} fz={"xl"} lineClamp={1} c={"white"}>
-        >
+              {data.title}
-          <Grid>
+            </Text>
-            <Grid.Col span={"auto"}>
+          </Center>
-              <Center h={"100%"}>
+
-                <Text fw={"bold"} fz={"xl"} lineClamp={1} c={"white"}>
+          {visible && <ComponentGlobal_CardLoadingOverlay />}
-                  {data.title}
+        </Stack>
-                </Text>
+      </ComponentGlobal_CardStyles>
-              </Center>
-            </Grid.Col>
-          </Grid>
-        </Card.Section>
-        {visible && data.id === jobId ? (
-          <ComponentGlobal_CardLoadingOverlay />
-        ) : (
-          ""
-        )}
-      </Card>
     </>
   );
 }

src/app_modules/job/component/detail/comp_detail_data_not_user.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImage,
+  ComponentGlobal_NotUserLoadImage,
+} from "@/app_modules/_global/component";
+import {
+  Card,
+  Center,
+  Image,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { MODEL_JOB } from "../../model/interface";
+
+export default function ComponentJob_NotUserDetailData({
+  data,
+}: {
+  data?: MODEL_JOB;
+}) {
+  return (
+    <>
+      {data ? (
+        <ComponentGlobal_CardStyles>
+          <Stack spacing={"xl"}>
+            {data.imageId && (
+              <ComponentGlobal_NotUserLoadImage fileId={data?.imageId} />
+            )}
+
+            <Stack>
+              <Center>
+                <Text fz={20} fw={"bold"}>
+                  {data.title}
+                </Text>
+              </Center>
+              <Stack spacing={0}>
+                <Text>
+                  <div dangerouslySetInnerHTML={{ __html: data.content }} />
+                </Text>
+                <Text>
+                  <div dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
+                </Text>
+              </Stack>
+            </Stack>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      ) : (
+        <ComponentGlobal_CardStyles>
+          <Stack spacing={"xl"}>
+            <Title order={3} align="center">
+              Data Not Found
+            </Title>
+          </Stack>
+        </ComponentGlobal_CardStyles>
+      )}
+    </>
+  );
+}

src/app_modules/job/component/detail/detail_data.tsx

@@ -1,17 +1,17 @@
 "use client";
 
 import {
-  AccentColor,
+  ComponentGlobal_CardStyles,
-  MainColor,
+  ComponentGlobal_LoadImage,
-} from "@/app_modules/_global/color/color_pallet";
+} from "@/app_modules/_global/component";
-import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
 import {
   Card,
   Center,
   Image,
   Skeleton,
   Stack,
-  Text
+  Text,
+  Title,
 } from "@mantine/core";
 import { MODEL_JOB } from "../../model/interface";
 
@@ -20,85 +20,40 @@ export default function ComponentJob_DetailData({
 }: {
   data?: MODEL_JOB;
 }) {
-
   return (
     <>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
-
       {data ? (
-        <Card
+        <ComponentGlobal_CardStyles>
-          shadow="lg"
+          <Stack spacing={"xl"}>
-          withBorder
+            {data.imageId && (
-          p={30}
+              <ComponentGlobal_LoadImage fileId={data?.imageId} />
-          style={{
+            )}
-            backgroundColor: MainColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-          }}
-          c={"white"}
-        >
-          <Card.Section px={"xs"} pb={"lg"}>
-            <Stack spacing={"xl"}>
-              {data.imageId && (
-                <ComponentGlobal_LoadImage fileId={data?.imageId} />
-              )}
 
-              <Stack>
+            <Stack>
-                <Center>
+              <Center>
-                  <Text fz={20} fw={"bold"}>
-                    {data.title}
-                  </Text>
-                </Center>
-                <Stack spacing={0}>
-                  <Text>
-                    <div dangerouslySetInnerHTML={{ __html: data.content }} />
-                  </Text>
-                  <Text>
-                    <div dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
-                  </Text>
-                </Stack>
-              </Stack>
-            </Stack>
-          </Card.Section>
-        </Card>
-      ) : (
-        <Card shadow="lg" withBorder p={30}>
-          <Card.Section px={"xs"} pb={"lg"}>
-            <Stack spacing={"xl"}>
-              <Stack align="center">
-                <Image alt="" src={"/aset/no-file.png"} mah={500} maw={200} />
                 <Text fz={20} fw={"bold"}>
-                  Judul Lowongan Kerja
+                  {data.title}
                 </Text>
-              </Stack>
+              </Center>
-
+              <Stack spacing={0}>
-              <Stack>
+                <Text>
-                <Text fw={"bold"} fz={"xs"}>
+                  <div dangerouslySetInnerHTML={{ __html: data.content }} />
-                  Syarat & Ketentuan :
                 </Text>
-                <Stack>
+                <Text>
-                  {Array(5)
+                  <div dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
-                    .fill(0)
-                    .map((e, i) => (
-                      <Skeleton key={i} height={8} radius="xl" />
-                    ))}
-                </Stack>
-              </Stack>
-
-              <Stack>
-                <Text fw={"bold"} fz={"xs"}>
-                  Deskripsi
                 </Text>
-                <Stack>
-                  {Array(5)
-                    .fill(0)
-                    .map((e, i) => (
-                      <Skeleton key={i} height={8} radius="xl" />
-                    ))}
-                </Stack>
               </Stack>
             </Stack>
-          </Card.Section>
+          </Stack>
-        </Card>
+        </ComponentGlobal_CardStyles>
+      ) : (
+        <ComponentGlobal_CardStyles>
+          <Stack spacing={"xl"}>
+            <Title order={3} align="center">
+              Data Not Found
+            </Title>
+          </Stack>
+        </ComponentGlobal_CardStyles>
       )}
     </>
   );

src/app_modules/job/detail/main/view.tsx

@@ -1,37 +1,40 @@
 "use client";
 
+import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { Button, Center, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useState } from "react";
 import ComponentJob_DetailData from "../../component/detail/detail_data";
 import { MODEL_JOB } from "../../model/interface";
 
-export default function Job_MainDetail({
+export default function Job_MainDetail({ dataJob }: { dataJob: MODEL_JOB }) {
-  dataJob,
-  hostName,
-}: {
-  dataJob: MODEL_JOB;
-  hostName: string;
-}) {
   return (
     <>
       <Stack>
         <ComponentJob_DetailData data={dataJob} />
-        <ButtonAction jobId={dataJob.id} hostName={hostName} />
+        <ButtonAction jobId={dataJob.id} />
       </Stack>
     </>
   );
 }
 
-function ButtonAction({
+function ButtonAction({ jobId }: { jobId: string }) {
-  jobId,
+  const [origin, setOrigin] = useState("");
-  hostName,
+
-}: {
+  useShallowEffect(() => {
-  jobId: string;
+    onLoadOrigin(setOrigin);
-  hostName: string;
+    // if (typeof window !== "undefined") {
-}) {
+    //   setOrigin(window.location.origin);
-  const router = useRouter();
+    // }
+  }, [setOrigin]);
+
+  async function onLoadOrigin(setOrigin: any) {
+    const res = await fetch("/api/zz-makuro");
+    const result = await res.json();
+    setOrigin(result.origin);
+  }
 
   return (
     <>
@@ -44,8 +47,7 @@ function ButtonAction({
         >
           <Link
             style={{ textDecoration: "none", color: "white" }}
-            href={`whatsapp://send?text=Job Vacancy HIPMI BADUNG : ${hostName}/dev/job/non_user_view/${jobId}`}
+            href={`whatsapp://send?text=Job Vacancy HIPMI BADUNG : ${origin}${RouterJob.job_vacancy_non_user({ id: jobId })}`}
-            // href={`https://t.me/share/url?url={${"http://localhost:3000/dev/job/non_user_view"}}&text={Lowongan Kerja Ini}`}
           >
             Bagikan ke WhatsApp
           </Link>

src/app_modules/job/main/beranda/ui_beranda.tsx

@@ -45,7 +45,7 @@ export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
         setData(val);
       },
     });
-    
+
     mqtt_client.subscribe("Job_new_post");
     mqtt_client.on("message", (topic, message) => {
       if (topic === "Job_new_post") {

src/app_modules/job/non_user_view/layout.tsx

@@ -1,11 +1,8 @@
 "use client";
 
-import { AppShell, Center } from "@mantine/core";
-import React from "react";
-import ComponentJob_HeaderTamplate from "../component/header_tamplate";
-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 React from "react";
 
 export default function LayoutJob_NonUserView({
   children,
@@ -15,7 +12,7 @@ export default function LayoutJob_NonUserView({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Job Vacancy" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Job Vacancy" hideButtonLeft />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/job/non_user_view/view.tsx

@@ -1,84 +1,12 @@
 "use client";
 
-import {
-  Card,
-  Center,
-  Image,
-  Overlay,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
 import ComponentJob_DetailData from "../component/detail/detail_data";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
-import { data } from "autoprefixer";
 import { MODEL_JOB } from "../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import { APIs } from "@/app/lib";
 
 export default function Job_NonUserView({ data }: { data: MODEL_JOB }) {
   return (
     <>
-      <Center my={"md"}>
+      <ComponentJob_DetailData data={data} />
-        <Card
-          shadow="lg"
-          withBorder
-          p={"xl"}
-          // w={{ base: 400 }}
-          style={{
-            backgroundColor: MainColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-          }}
-        >
-          <Card.Section px={"xs"} pb={"lg"} c={"white"}>
-            <Stack spacing={"xl"}>
-              {data.imageId ? (
-                <Stack align="center">
-                  <Image
-                    radius={"sm"}
-                    alt=""
-                    src={APIs.GET({ fileId: data.imageId })}
-                    maw={200}
-                  />
-                </Stack>
-              ) : (
-                ""
-              )}
-
-              <Stack>
-                <Center>
-                  <Text fz={20} fw={"bold"}>
-                    {data.title}
-                  </Text>
-                </Center>
-                <Stack spacing={0}>
-                  <Text>
-                    <div dangerouslySetInnerHTML={{ __html: data.content }} />
-                  </Text>
-                  <Text>
-                    <div dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
-                  </Text>
-                </Stack>
-              </Stack>
-            </Stack>
-          </Card.Section>
-          {data?.isArsip === true && (
-            <Overlay color="gray" opacity={0.5} blur={1}>
-              <Stack align="center" h={"100%"} justify="center">
-                <Title c={"red"} fw={"bold"} order={3}>
-                  Mohon Maaf !
-                </Title>
-                <Title c={"red"} fw={"bold"} order={3}>
-                  Lowongan Kerja Ini Sudah Ditutup{" "}
-                </Title>
-              </Stack>
-            </Overlay>
-          )}
-        </Card>
-      </Center>
     </>
   );
 }

src/app_modules/katalog/portofolio/ui/ui_detail_portofolio.tsx

@@ -4,9 +4,8 @@ import { Stack } from "@mantine/core";
 import { ComponentPortofolio_ButtonDelete } from "../component/button_delete";
 import { MODEL_PORTOFOLIO } from "../model/interface";
 import { Portofolio_UiDetailData } from "./ui_detail_data";
-import { Portofolio_UiDetailLogo } from "./ui_detail_logo";
-import { Portofolio_UiSosialMedia } from "./ui_detail_media";
 import { Portofolio_UiMap } from "./ui_detail_map";
+import { Portofolio_UiSosialMedia } from "./ui_detail_media";
 
 export default function Portofolio_UiDetail({
   dataPorto,

src/app_modules/user_search/component/ui_user_search.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
   ActionIcon,
-  Avatar,
   Box,
   Center,
+  Grid,
   Group,
   Loader,
   Stack,
@@ -21,7 +22,6 @@ import { ScrollOnly } from "next-scroll-loader";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { userSearch_getAllUser } from "../fun/get/get_all_user";
-import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
 
 export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
   const [data, setData] = useState(listUser);
@@ -45,12 +45,12 @@ export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
           radius={"xl"}
           style={{ zIndex: 99 }}
           icon={<IconSearch size={20} />}
-          placeholder="Masukan username "
+          placeholder="Masukan nama pengguna "
           onChange={(val) => onSearch(val.target.value)}
         />
         <Box>
           {_.isEmpty(data) ? (
-            <ComponentGlobal_IsEmptyData text="Username tidak ditemukan" />
+            <ComponentGlobal_IsEmptyData text="Pengguna tidak ditemukan" />
           ) : (
             <ScrollOnly
               height="84vh"
@@ -76,7 +76,6 @@ export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
           )}
         </Box>
       </Stack>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
     </>
   );
 }
@@ -87,7 +86,47 @@ function CardView({ data }: { data: MODEL_USER }) {
 
   return (
     <>
-      <Stack
+      <Grid
+        w={"100%"}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterProfile.katalog({ id: data.Profile.id }));
+        }}
+      >
+        <Grid.Col span={2}>
+          <Group h={"100%"} align="center">
+            <ComponentGlobal_LoaderAvatar
+              fileId={data.Profile.imageId as any}
+              imageSize="100"
+            />
+          </Group>
+        </Grid.Col>
+        <Grid.Col span={"auto"} c={"white"}>
+          <Stack spacing={0}>
+            <Text fw={"bold"} lineClamp={1}>
+              {data?.Profile.name}
+            </Text>
+            <Text fz={"sm"} fs={"italic"}>
+              +{data?.nomor}
+            </Text>
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={2}>
+          <Group position="right" align="center" h={"100%"}>
+            <Center>
+              <ActionIcon variant="transparent">
+                {loading ? (
+                  <ComponentGlobal_Loader />
+                ) : (
+                  <IconChevronRight color="white" />
+                )}
+              </ActionIcon>
+            </Center>
+          </Group>
+        </Grid.Col>
+      </Grid>
+
+      {/* <Stack
         spacing={"xs"}
         c="white"
         py={"xs"}
@@ -96,8 +135,9 @@ function CardView({ data }: { data: MODEL_USER }) {
           router.push(RouterProfile.katalogOLD + `${data?.Profile?.id}`);
         }}
       >
-        <Group position="apart">
+
-          <Group position="left">
+        <Group position="apart" grow>
+          <Group position="left" bg={"blue"}>
             <ComponentGlobal_LoaderAvatar
               fileId={data.Profile.imageId as any}
               imageSize="100"
@@ -105,7 +145,7 @@ function CardView({ data }: { data: MODEL_USER }) {
 
             <Stack spacing={0}>
               <Text fw={"bold"} lineClamp={1}>
-                {data?.username}
+                {data?.Profile.name}d sdasd sdas 
               </Text>
               <Text fz={"sm"} fs={"italic"}>
                 +{data?.nomor}
@@ -125,7 +165,7 @@ function CardView({ data }: { data: MODEL_USER }) {
             </Center>
           </Group>
         </Group>
-      </Stack>
+      </Stack> */}
     </>
   );
 }

src/app_modules/user_search/fun/get/get_all_user.ts

@@ -24,10 +24,13 @@ export async function userSearch_getAllUser({
     where: {
       active: true,
       masterUserRoleId: "1",
-      username: {
+      Profile: {
-        contains: search,
+        name: {
-        mode: "insensitive",
+          contains: search,
+          mode: "insensitive",
+        },
       },
+
       NOT: {
         Profile: null,
       },

src/app_modules/vote/_view/view_detail_kontributor_voting.tsx

@@ -1,20 +1,10 @@
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { AccentColor } from "@/app_modules/_global/color";
-import { ComponentGlobal_AvatarAndAuthorName } from "@/app_modules/_global/component";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import {
-  Card,
+  ComponentGlobal_AvatarAndUsername,
-  Stack,
+  ComponentGlobal_CardStyles,
-  Center,
+} from "@/app_modules/_global/component";
-  Title,
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-  Grid,
+import { Badge, Group, Stack, Text } from "@mantine/core";
-  Avatar,
-  Badge,
-  Divider,
-  Text,
-} from "@mantine/core";
 import _ from "lodash";
-import router from "next/router";
 import { MODEL_VOTE_KONTRIBUTOR } from "../model/interface";
 
 export function Voting_ViewDetailKontributorVoting({
@@ -24,40 +14,32 @@ export function Voting_ViewDetailKontributorVoting({
 }) {
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles>
-        p={30}
+        {_.isEmpty(listKontributor) ? (
-        style={{
+          <ComponentGlobal_IsEmptyData text="Tidak ada kontributor" />
-          backgroundColor: AccentColor.darkblue,
+        ) : (
-          borderRadius: "10px",
+          <Stack spacing={"lg"}>
-          border: `2px solid ${AccentColor.blue}`,
+            {listKontributor?.map((e, i) => (
-          color: "white",
+              <ComponentGlobal_AvatarAndUsername
-        }}
+                key={e.id}
-      >
+                profile={e.Author.Profile as any}
-        <Card.Section>
+                component={
-          {_.isEmpty(listKontributor) ? (
+                  <Group position="right">
-            <ComponentGlobal_IsEmptyData text="Tidak ada kontributor" />
-          ) : (
-            <Stack>
-              {listKontributor?.map((e, i) => (
-                <ComponentGlobal_AvatarAndAuthorName
-                  key={e.id}
-                  dataUser={e.Author}
-                  componentRight={
                     <Badge w={130}>
                       <Text
-                      lineClamp={1}
+                        lineClamp={1}
                         fz={e.Voting_DaftarNamaVote.value.length > 10 ? 8 : 10}
                       >
                         {e.Voting_DaftarNamaVote.value}
                       </Text>
                     </Badge>
-                  }
+                  </Group>
-                />
+                }
-              ))}
+              />
-            </Stack>
+            ))}
-          )}
+          </Stack>
-        </Card.Section>
+        )}
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/vote/component/card_view_publish.tsx

@@ -23,7 +23,11 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { toNumber } from "lodash";
 import { useState } from "react";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
 
 export default function ComponentVote_CardViewPublish({
   data,
@@ -45,140 +49,125 @@ export default function ComponentVote_CardViewPublish({
 
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
-        radius={"md"}
+        <Stack>
-        px={30}
+          {/* Header name */}
-        pt={authorName ? 30 : 10}
+          {authorName ? (
-        pb={30}
+            <ComponentGlobal_AvatarAndUsername
-        mb={"lg"}
+              profile={data?.Author.Profile as any}
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-        }}
-      >
-        {/* Header name */}
-        {authorName ? (
-          <Card.Section>
-            <ComponentGlobal_AuthorNameOnHeader
-              authorName={data?.Author ? data?.Author.Profile.name : ""}
-              imagesId={data?.Author ? data?.Author.Profile.imagesId : ""}
-              profileId={data?.Author ? data?.Author.Profile.id : ""}
             />
-          </Card.Section>
+          ) : (
-        ) : (
+            ""
-          ""
+          )}
-        )}
 
-        {/* Isi deskripsi */}
+          {/* Isi deskripsi */}
-        <Card.Section
+          <Box
-          py={authorName ? "sm" : 0}
+            onClick={() => {
-          onClick={() => {
+              if (data?.id === undefined) {
-            if (data?.id === undefined) {
+                ComponentGlobal_NotifikasiPeringatan("Halaman tidak ditemukan");
-              ComponentGlobal_NotifikasiPeringatan("Halaman tidak ditemukan");
+              } else {
-            } else {
+                setVisible(true);
-              setVisible(true);
+                router.push(path + data?.id);
-              router.push(path + data?.id);
+              }
-            }
+            }}
-          }}
+          >
-        >
+            <Stack spacing={"xl"}>
-          <Stack spacing={"xl"}>
+              <Stack align="center">
-            <Stack align="center">
+                <Text align="center" fw={"bold"}>
-              <Text align="center" fw={"bold"}>
+                  {data ? data.title : "Judul Voting"}
-                {data ? data.title : "Judul Voting"}
+                </Text>
-              </Text>
+                <Badge
-              <Badge
+                  styles={{
-                styles={{
+                    root: {
-                  root: {
+                      backgroundColor: AccentColor.blue,
-                    backgroundColor: AccentColor.blue,
+                      border: `1px solid ${AccentColor.skyblue}`,
-                    border: `1px solid ${AccentColor.skyblue}`,
+                      color: "white",
-                    color: "white",
+                      width: "80%",
-                    width: "80%",
+                    },
-                  },
+                  }}
-                }}
+                >
-              >
+                  <Group>
-                <Group>
+                    <Text>
-                  <Text>
+                      {data
-                    {data
+                        ? data?.awalVote.toLocaleDateString(["id-ID"], {
-                      ? data?.awalVote.toLocaleDateString(["id-ID"], {
+                            dateStyle: "medium",
-                          dateStyle: "medium",
+                          })
-                        })
+                        : "tgl awal voting"}
-                      : "tgl awal voting"}
+                    </Text>
-                  </Text>
+                    <Text>-</Text>
-                  <Text>-</Text>
+                    <Text>
-                  <Text>
+                      {data
-                    {data
+                        ? data?.akhirVote.toLocaleDateString(["id-ID"], {
-                      ? data?.akhirVote.toLocaleDateString(["id-ID"], {
+                            dateStyle: "medium",
-                          dateStyle: "medium",
+                          })
-                        })
+                        : "tgl akhir voting"}
-                      : "tgl akhir voting"}
+                    </Text>
-                  </Text>
+                  </Group>
-                </Group>
+                </Badge>
-              </Badge>
+              </Stack>
+              {data ? (
+                <Stack>
+                  <Center>
+                    <Title order={5}>Hasil Voting</Title>
+                  </Center>
+
+                  <Grid justify="center">
+                    {data?.Voting_DaftarNamaVote.map((e) => (
+                      <Grid.Col
+                        key={e.id}
+                        span={data?.Voting_DaftarNamaVote?.length >= 4 ? 6 : 4}
+                      >
+                        <Stack align="center">
+                          <Avatar
+                            radius={100}
+                            size={70}
+                            variant="outline"
+                            color="yellow"
+                          >
+                            <Text>{e.jumlah}</Text>
+                          </Avatar>
+                          <Text fz={"xs"} align="center">
+                            {e.value}
+                          </Text>
+                        </Stack>
+                      </Grid.Col>
+                    ))}
+                  </Grid>
+                </Stack>
+              ) : (
+                ""
+              )}
             </Stack>
-            {data ? (
-              <Stack>
-                <Center>
-                  <Title order={5}>Hasil Voting</Title>
-                </Center>
 
-                <Grid justify="center">
+            {pilihanSaya ? (
-                  {data?.Voting_DaftarNamaVote.map((e) => (
+              <Stack align="center" spacing={0} mt="md">
-                    <Grid.Col
+                <Text mb={"xs"} fw={"bold"} fz={"xs"}>
-                      key={e.id}
+                  Pilihan anda:
-                      span={data?.Voting_DaftarNamaVote?.length >= 4 ? 6 : 4}
+                </Text>
-                    >
+                <Badge size="lg">
-                      <Stack align="center">
+                  <Text truncate fz={"xs"}>
-                        <Avatar
+                    {namaPilihan}
-                          radius={100}
+                  </Text>
-                          size={70}
+                </Badge>
-                          variant="outline"
-                          color="yellow"
-                        >
-                          <Text>{e.jumlah}</Text>
-                        </Avatar>
-                        <Text fz={"xs"} align="center">
-                          {e.value}
-                        </Text>
-                      </Stack>
-                    </Grid.Col>
-                  ))}
-                </Grid>
               </Stack>
             ) : (
               ""
             )}
-          </Stack>
 
-          {pilihanSaya ? (
+            {statusArsip ? (
-            <Stack align="center" spacing={0} mt="md">
+              <Center mt="md">
-              <Text mb={"xs"} fw={"bold"} fz={"xs"}>
+                <Badge color={data?.isArsip ? "gray" : "green"}>
-                Pilihan anda:
+                  {data?.isArsip ? "Arsip" : "Publish"}
-              </Text>
+                </Badge>
-              <Badge size="lg">
+              </Center>
-                <Text truncate fz={"xs"}>
+            ) : (
-                  {namaPilihan}
+              ""
-                </Text>
+            )}
-              </Badge>
-            </Stack>
-          ) : (
-            ""
-          )}
 
-          {statusArsip ? (
+            {visible && <ComponentGlobal_CardLoadingOverlay />}
-            <Center mt="md">
+          </Box>
-              <Badge color={data?.isArsip ? "gray" : "green"}>
+        </Stack>
-                {data?.isArsip ? "Arsip" : "Publish"}
+      </ComponentGlobal_CardStyles>
-              </Badge>
-            </Center>
-          ) : (
-            ""
-          )}
-
-          {visible && <ComponentGlobal_CardLoadingOverlay />}
-        </Card.Section>
-      </Card>
     </>
   );
 }

src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx

@@ -1,8 +1,9 @@
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
 import { AccentColor } from "@/app_modules/_global/color";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { UIGlobal_Modal } from "@/app_modules/_global/ui";
-import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import {
   ActionIcon,
@@ -13,47 +14,48 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import { IconArchive, IconUsersGroup, IconX } from "@tabler/icons-react";
+import {
-import { IconDots, IconDotsVertical } from "@tabler/icons-react";
+  IconArchive,
+  IconDotsVertical,
+  IconUsersGroup,
+  IconX,
+} from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { voting_funGetOneVotingbyId } from "../../fun/get/fun_get_one_by_id";
-import { useShallowEffect } from "@mantine/hooks";
-import { MODEL_VOTING } from "../../model/interface";
 import { voting_funUpdateIsArsipById } from "../../fun";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { MODEL_VOTING } from "../../model/interface";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { voting_funGetOneVotingbyId } from "../../fun/get/fun_get_one_by_id";
 
 export function Voting_ComponentLayoutHeaderDetailPublish({
   votingId,
   title,
   userLoginId,
+  dataVoting,
 }: {
   votingId: string;
   title: string;
   userLoginId: string;
+  dataVoting: any;
 }) {
-  const [data, setData] = useState<MODEL_VOTING>();
+  const [data, setData] = useState<MODEL_VOTING>(dataVoting);
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openModal, setOpenModal] = useState(false);
 
-  useShallowEffect(() => {
-    onLoadData({ onSetData: setData });
-  }, [setData]);
-
-  async function onLoadData({ onSetData }: { onSetData: any }) {
-    const dataVoting = await voting_funGetOneVotingbyId(votingId);
-    onSetData(dataVoting);
-  }
-
   async function onUpdateStatusArsip({ isArsip }: { isArsip: boolean }) {
     const res = await voting_funUpdateIsArsipById({
       votingId,
       isArsip: isArsip,
     });
     if (res.status === 200) {
-      setOpenModal(false);
+      try {
-      ComponentGlobal_NotifikasiBerhasil(res.message);
+        const loadData = await voting_funGetOneVotingbyId(votingId);
+        setData(loadData as any);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setOpenModal(false);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+      }
     } else {
       ComponentGlobal_NotifikasiGagal(res.message);
     }

src/app_modules/vote/component/detail/detail_daftar_kontributor.tsx

@@ -1,21 +1,21 @@
 "use client";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import {
-  Avatar,
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import {
   Badge,
-  Card,
+  Box,
   Center,
-  Divider,
+  Group,
-  Grid,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { MODEL_VOTE_KONTRIBUTOR } from "../../model/interface";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function ComponentVote_DaftarKontributorVoter({
   listKontributor,
@@ -25,63 +25,29 @@ export default function ComponentVote_DaftarKontributorVoter({
   const router = useRouter();
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles>
-        p={30}
+        <Stack>
-        style={{
+          <Center>
-          backgroundColor: AccentColor.darkblue,
+            <Title order={5}>Daftar Kontributor</Title>
-          borderRadius: "10px",
+          </Center>
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-        }}
-      >
-        <Card.Section>
-          <Stack>
-            <Center>
-              <Title order={5}>Daftar Kontributor</Title>
-            </Center>
 
-            {_.isEmpty(listKontributor) ? (
+          {_.isEmpty(listKontributor) ? (
-              <ComponentGlobal_IsEmptyData
+            <ComponentGlobal_IsEmptyData
-                height={20}
+              height={20}
-                text="Tidak ada kontributor"
+              text="Tidak ada kontributor"
-              />
+            />
-            ) : (
+          ) : (
-              <Stack>
+            <Stack>
-                {listKontributor?.map((e, i) => (
+              {listKontributor?.map((e, i) => (
-                  <Stack spacing={"xs"} key={i}>
+                <Box key={e.id}>
-                    <Grid>
+                  <ComponentGlobal_AvatarAndUsername
-                      <Grid.Col
+                    profile={e.Author.Profile as any}
-                        span={2}
+                    sizeAvatar={30}
-                        onClick={() =>
+                    component={
-                          router.push(
+                      <Group position="right" align="center" h={"100%"}>
-                            RouterProfile.katalogOLD + e.Author.Profile.id
-                          )
-                        }
-                      >
-                        <Avatar
-                          size={30}
-                          sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
-                          radius={"xl"}
-                          bg={"gray.1"}
-                          src={
-                            e
-                              ? RouterProfile.api_foto_profile +
-                                e.Author.Profile.imagesId
-                              : "/aset/global/avatar.png"
-                          }
-                        />
-                      </Grid.Col>
-                      <Grid.Col span={5}>
-                        <Stack justify="center" h={"100%"}>
-                          <Text truncate fz={"sm"} fw={"bold"}>
-                            {e ? e.Author.Profile.name : "Nama author"}
-                          </Text>
-                        </Stack>
-                      </Grid.Col>
-                      <Grid.Col span={5}>
                         <Badge w={130}>
                           <Text
-                            truncate
+                            lineClamp={1}
                             fz={
                               e.Voting_DaftarNamaVote.value.length > 10 ? 8 : 10
                             }
@@ -89,16 +55,15 @@ export default function ComponentVote_DaftarKontributorVoter({
                             {e.Voting_DaftarNamaVote.value}
                           </Text>
                         </Badge>
-                      </Grid.Col>
+                      </Group>
-                    </Grid>
+                    }
-                    <Divider />
+                  />
-                  </Stack>
+                </Box>
-                ))}
+              ))}
-              </Stack>
+            </Stack>
-            )}
+          )}
-          </Stack>
+        </Stack>
-        </Card.Section>
+      </ComponentGlobal_CardStyles>
-      </Card>
     </>
   );
 }

src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx

@@ -1,21 +1,11 @@
 "use client";
-import {
-  Card,
-  Stack,
-  Center,
-  Title,
-  Badge,
-  Group,
-  Radio,
-  Grid,
-  Text,
-} from "@mantine/core";
-import moment from "moment";
-import { MODEL_VOTING } from "../../model/interface";
-import { IconCircle } from "@tabler/icons-react";
-import _ from "lodash";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+} from "@/app_modules/_global/component";
+import { Badge, Center, Group, Stack, Text, Title } from "@mantine/core";
+import { MODEL_VOTING } from "../../model/interface";
 
 export default function ComponentVote_DetailDataSetelahPublish({
   data,
@@ -26,27 +16,15 @@ export default function ComponentVote_DetailDataSetelahPublish({
 }) {
   return (
     <>
-      <Card
+      <ComponentGlobal_CardStyles marginBottom={"0px"}>
-        p={30}
+        <Stack>
-        style={{
+          {authorName ? (
-          backgroundColor: AccentColor.darkblue,
+            <ComponentGlobal_AvatarAndUsername
-          borderRadius: "10px",
+              profile={data?.Author.Profile as any}
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-        }}
-      >
-        {authorName ? (
-          <Card.Section>
-            <ComponentGlobal_AuthorNameOnHeader
-              authorName={data?.Author.Profile.name}
-              imagesId={data?.Author.Profile.imagesId}
-              profileId={data?.Author.Profile.id}
             />
-          </Card.Section>
+          ) : (
-        ) : (
+            ""
-          ""
+          )}
-        )}
-        <Card.Section px={"xs"} py={authorName ? "sm" : 0}>
           <Stack spacing={"lg"}>
             <Center>
               <Title order={4} align="center">
@@ -87,8 +65,8 @@ export default function ComponentVote_DetailDataSetelahPublish({
               </Stack>
             </Stack>
           </Stack>
-        </Card.Section>
+        </Stack>
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/vote/detail/kontribusi/index.tsx

@@ -1,21 +1,11 @@
 "use client";
 
 import {
-  Badge,
+  Stack
-  Card,
-  Center,
-  Grid,
-  Group,
-  Radio,
-  Stack,
-  Text,
-  Title,
 } from "@mantine/core";
-import moment from "moment";
-import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
-import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_daftar_kontributor";
-import { MODEL_VOTING } from "../../model/interface";
 import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
+import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { MODEL_VOTING } from "../../model/interface";
 
 export default function Vote_DetailKontribusi({
   dataVote,