diff --git a/package.json b/package.json
index 772a7593..f02d79c5 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
+    "@hookstate/core": "^4.0.1",
     "@mantine/carousel": "^7.1.5",
     "@mantine/core": "^6.0.17",
     "@mantine/dates": "^6.0.17",
diff --git a/public/profile/background/847a4fa4-837d-4abd-aef2-435d8f259b4c.jpeg b/public/profile/background/847a4fa4-837d-4abd-aef2-435d8f259b4c.jpeg
new file mode 100644
index 00000000..b43c0679
Binary files /dev/null and b/public/profile/background/847a4fa4-837d-4abd-aef2-435d8f259b4c.jpeg differ
diff --git a/public/profile/foto/6452c349-66fc-4db7-99ff-37a659f351bb.jpeg b/public/profile/foto/6452c349-66fc-4db7-99ff-37a659f351bb.jpeg
new file mode 100644
index 00000000..4660498f
Binary files /dev/null and b/public/profile/foto/6452c349-66fc-4db7-99ff-37a659f351bb.jpeg differ
diff --git a/src/app/dev/colab/detail/group/[id]/page.tsx b/src/app/dev/colab/detail/group/[id]/page.tsx
index 2fecdb0c..420aa361 100644
--- a/src/app/dev/colab/detail/group/[id]/page.tsx
+++ b/src/app/dev/colab/detail/group/[id]/page.tsx
@@ -1,5 +1,8 @@
 import adminColab_getOneRoomChatById from "@/app_modules/admin/colab/fun/get/get_one_room_chat_by_id";
-import { Colab_GroupChatView } from "@/app_modules/colab";
+import {
+  Colab_DetailGrupDiskusi,
+  Colab_GroupChatView,
+} from "@/app_modules/colab";
 import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
@@ -16,14 +19,15 @@ export default async function Page({ params }: { params: { id: string } }) {
   ]);
   let listMsg = await colab_getMessageByRoomId({ roomId: roomId, page: 1 });
   const dataUserLogin = await user_getOneByUserId(userLoginId);
-  // console.log(dataUserLogin);
 
   return (
     <>
-      {/* <ColabViewChat
-        listMsg={listMsg as any}
-        dataRoom={dataRoom as any}
+      {/* <Colab_DetailGrupDiskusi
         userLoginId={userLoginId}
+        listMsg={listMsg}
+        selectRoom={dataRoom as any}
+        dataUserLogin={dataUserLogin as any}
+        roomId={roomId}
       /> */}
 
       <Colab_GroupChatView
diff --git a/src/app/dev/investasi/detail/[id]/loading.tsx b/src/app/dev/investasi/detail/[id]/loading.tsx
deleted file mode 100644
index d8a1c040..00000000
--- a/src/app/dev/investasi/detail/[id]/loading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}
diff --git a/src/app/dev/investasi/main/loading.tsx b/src/app/dev/investasi/main/loading.tsx
deleted file mode 100644
index d8a1c040..00000000
--- a/src/app/dev/investasi/main/loading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
-
-export default async function Page() {
-  return (
-    <>
-      <ComponentGlobal_V2_LoadingPage/>
-    </>
-  );
-}
diff --git a/src/app_modules/colab/component/button/button_update_beranda.tsx b/src/app_modules/colab/component/button/button_update_beranda.tsx
new file mode 100644
index 00000000..05e00f56
--- /dev/null
+++ b/src/app_modules/colab/component/button/button_update_beranda.tsx
@@ -0,0 +1,45 @@
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Affix, rem, Center, Button } from "@mantine/core";
+import { useState } from "react";
+import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
+
+export function ComponentColab_ButtonUpdateBeranda({
+  onLoad,
+  setIsNewPost,
+}: {
+  onLoad: (val: any) => void;
+  setIsNewPost: any;
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function onLoadData() {
+    const loadData = await colab_getListAllProyek({ page: 1 });
+    onLoad(loadData);
+    setIsNewPost(false);
+  }
+
+  return (
+    <>
+      <Affix position={{ top: rem(70) }} w={"100%"}>
+        <Center>
+          <Button
+            style={{
+              transition: "0.5s",
+              border: `1px solid ${AccentColor.skyblue}`,
+              backgroundColor: AccentColor.softblue,
+            }}
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={"xl"}
+            opacity={0.8}
+            onClick={() => {
+              onLoadData();
+            }}
+          >
+            Update Beranda
+          </Button>
+        </Center>
+      </Affix>
+    </>
+  );
+}
diff --git a/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx b/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
index e9577049..ca448347 100644
--- a/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
+++ b/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
@@ -128,7 +128,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
                   radius={"xl"}
                   variant="transparent"
                 >
-                  <IconCaretRight color={opened ? "blue" : "gray"} />
+                  <IconCaretRight color={"white"} />
                 </ActionIcon>
               ) : (
                 ""
diff --git a/src/app_modules/colab/component/detail/list_partisipasi_user.tsx b/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
index 6f9f4153..aab5568a 100644
--- a/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
+++ b/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
@@ -19,18 +19,17 @@ import {
   Stack,
   Text,
   Textarea,
-  Title
+  Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 import { useState } from "react";
 import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
 import colab_getListPartisipanByColabId from "../../fun/get/get_list_partisipan_by_id";
-import {
-  MODEL_COLLABORATION_PARTISIPASI
-} from "../../model/interface";
+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,
@@ -50,22 +49,43 @@ export default function ComponentColab_DetailListPartisipasiUser({
   const [deskripsi, setDeskripsi] = useState("");
 
   async function onJoin() {
-    await colab_funCreatePartisipan(
+    const res = await colab_funCreatePartisipan(
       colabId as any,
       userLoginId as any,
       deskripsi
-    ).then(async (res) => {
-      if (res.status === 201) {
-        await colab_getListPartisipanByColabId(colabId as any).then((val) => {
-          setApply(true);
-          close();
-          setData(val as any);
-          ComponentGlobal_NotifikasiBerhasil(res.message);
-        });
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
+    );
+    if (res.status === 201) {
+      const dataNotif = {
+        appId: res?.data?.ProjectCollaboration?.id,
+        userId: res?.data?.ProjectCollaboration?.userId,
+        pesan: res?.data?.ProjectCollaboration?.title,
+        status: "Partisipan Project",
+        kategoriApp: "COLLABORATION",
+        title: "Partisipan baru telah bergabung !",
+      };
+
+      const createNotifikasi = await notifikasiToUser_funCreate({
+        data: dataNotif as any,
+      });
+
+      if (createNotifikasi.status === 201) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({
+            userId: dataNotif.userId,
+            count: 1,
+          })
+        );
       }
-    });
+
+      const resList = await colab_getListPartisipanByColabId(colabId as any);
+      setApply(true);
+      close();
+      setData(resList as any);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
   }
 
   return (
@@ -104,7 +124,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
             </ActionIcon>
           </Group>
           <Textarea
-          maxLength={300}
+            maxLength={300}
             label="Deskripsi Diri"
             placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
             minRows={4}
@@ -116,7 +136,10 @@ export default function ComponentColab_DetailListPartisipasiUser({
             {/* <Button radius={"xl"} onClick={() => close()}>
               Batal
             </Button> */}
-            <ComponentGlobal_InputCountDown lengthInput={deskripsi?.length} maxInput={300}/>
+            <ComponentGlobal_InputCountDown
+              lengthInput={deskripsi?.length}
+              maxInput={300}
+            />
             <Button
               disabled={!deskripsi}
               radius={"xl"}
@@ -124,7 +147,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
               bg={MainColor.yellow}
               onClick={() => onJoin()}
               style={{
-                transition: "0.5s"
+                transition: "0.5s",
               }}
             >
               Simpan
diff --git a/src/app_modules/colab/create/index.tsx b/src/app_modules/colab/create/index.tsx
index 58597789..32c32541 100644
--- a/src/app_modules/colab/create/index.tsx
+++ b/src/app_modules/colab/create/index.tsx
@@ -1,29 +1,18 @@
 "use client";
 
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  Button,
-  NumberInput,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Textarea,
-} from "@mantine/core";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import {
-  MODEL_COLLABORATION,
-  MODEL_COLLABORATION_MASTER,
-} from "../model/interface";
-import colab_funCreateProyek from "../fun/create/fun_create_proyek";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import _ from "lodash";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+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";
+import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import colab_funCreateProyek from "../fun/create/fun_create_proyek";
+import { MODEL_COLLABORATION_MASTER } from "../model/interface";
 import mqtt_client from "@/util/mqtt_client";
+import { useHookstate } from "@hookstate/core";
+import { useGsCollabCreate } from "../global_state/state";
 
 export default function Colab_Create({
   listIndustri,
@@ -40,7 +29,7 @@ export default function Colab_Create({
   });
   return (
     <>
-      <Stack px={"sm"} py={"md"}>
+      <Stack px={"xl"} py={"md"}>
         <TextInput
           maxLength={100}
           styles={{
@@ -176,7 +165,12 @@ function ButtonAction({ value }: { value: any }) {
   const [loading, setLoading] = useState(false);
 
   async function onSave() {
-    // console.log(value.jumlah_partisipan);
+    mqtt_client.publish(
+      "Colab_create",
+      JSON.stringify({ isNewPost: true, count: 1 })
+    );
+
+    console.log(value.jumlah_partisipan);
     if (value.title === "")
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
     if (value.lokasi === "")
@@ -188,15 +182,6 @@ function ButtonAction({ value }: { value: any }) {
 
     const res = await colab_funCreateProyek(value);
     if (res.status === 201) {
-      //  const dataNotif: any = {
-      //    appId: res.data?.id as any,
-      //    kategoriApp: "VOTING",
-      //    status: create.data?.MasterStatus?.name as any,
-      //    userId: create.data?.authorId as any,
-      //    pesan: create.data?.title as any,
-      //    title: "Job baru",
-      //  };
-
       setLoading(true);
       router.back();
       ComponentGlobal_NotifikasiBerhasil(res.message);
@@ -223,9 +208,12 @@ function ButtonAction({ value }: { value: any }) {
         loading={loading ? true : false}
         mt={"xl"}
         radius={"xl"}
-        onClick={() => onSave()}
+        onClick={() => {
+          onSave();
+        }}
         bg={MainColor.yellow}
         color={"yellow"}
+        c={"black"}
         style={{
           transition: "0.5s",
         }}
diff --git a/src/app_modules/colab/detail/group/index.tsx b/src/app_modules/colab/detail/group/index.tsx
index e6724e8a..79bda42b 100644
--- a/src/app_modules/colab/detail/group/index.tsx
+++ b/src/app_modules/colab/detail/group/index.tsx
@@ -387,35 +387,4 @@ export default function Colab_GroupChatView({
       </Box>
     </>
   );
-
-  // return (
-  //   <Stack bg={"dark"}>
-  //     <Button
-  //       onClick={() => {
-  //         const dd = _.clone(data[0]);
-  //         dd.message = "apa kabar";
-  //         console.log(dd);
-  //         mqtt_client.publish(selectRoom.id, JSON.stringify(dd));
-  //       }}
-  //     >
-  //       kirim pesan
-  //     </Button>
-  //     <div
-  //       ref={ref as any}
-  //       style={{
-  //         overflowY: "auto",
-  //       }}
-  //     >
-  //       {data.map((v, k) => (
-  //         <Stack key={k}>
-  //           <Card withBorder shadow="md" mt={"md"}>
-  //             <Code>
-  //               <pre>{JSON.stringify(v, null, 2)}</pre>
-  //             </Code>
-  //           </Card>
-  //         </Stack>
-  //       ))}
-  //     </div>
-  //   </Stack>
-  // );
 }
diff --git a/src/app_modules/colab/detail/grup/index.tsx b/src/app_modules/colab/detail/grup/index.tsx
index 4a75ce60..8eb7f65b 100644
--- a/src/app_modules/colab/detail/grup/index.tsx
+++ b/src/app_modules/colab/detail/grup/index.tsx
@@ -1,199 +1,347 @@
 "use client";
 
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
-  Affix,
   Box,
   Center,
+  Container,
+  Flex,
   Grid,
   Group,
   Loader,
   Paper,
+  rem,
   Stack,
   Text,
   Textarea,
-  rem
+  Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import {
-  useShallowEffect
-} from "@mantine/hooks";
-import { IconCircle, IconSend } from "@tabler/icons-react";
+  IconChevronLeft,
+  IconCircle,
+  IconInfoSquareRounded,
+  IconSend,
+} from "@tabler/icons-react";
 import _ from "lodash";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import useInfiniteScroll, {
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
 import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
 import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
+import {
+  MODEL_COLLABORATION_MESSAGE,
+  MODEL_COLLABORATION_ROOM_CHAT,
+} from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
 
 export default function Colab_DetailGrupDiskusi({
-  roomId,
-  listMsg,
   userLoginId,
+  listMsg,
+  selectRoom,
+  dataUserLogin,
+  roomId,
 }: {
-  roomId: string;
-  listMsg?: any[];
   userLoginId: string;
+  listMsg: any;
+  selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
+  dataUserLogin: MODEL_USER;
+  roomId: string;
 }) {
   const [msg, setMsg] = useState("");
-  const [data, setData] = useState<any[]>(listMsg as any);
-  const [page, setPage] = useState(1);
+  const [newMessage, setNewMessage] = useState<any>();
+  const [data, setData] = useState<any[]>(listMsg);
+  const [totalPage, setTotalPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [isGet, setIsGet] = useState(true);
+  const [newMessageId, setIdMessage] = useState("");
 
-  // const next = async (direction: ScrollDirection) => {
-  //   try {
-  //     setIsLoading(true);
-  //     await new Promise((a) => setTimeout(a, 100));
+  const [activePage, setActivePage] = useState(1);
 
-  //     setPage(page + 1);
-  //     const newData = await colab_getMessageByRoomId(roomId, page + 1);
-
-  //     console.log(newData);
-
-  //     if (_.isEmpty(newData)) {
-  //       setIsGet(false);
-  //     } else {
-  //       setData((prev) => (direction === "up" ? [...newData, ...prev] : []));
+  // async function onSend() {
+  //   await colab_funCreateMessageByUserId(msg, selectRoom.id).then(
+  //     async (res) => {
+  //       if (res.status === 200) {
+  //         setIdMessage(res.data?.id as any);
+  //         setMsg("");
+  //         const kiriman: MODEL_COLLABORATION_MESSAGE = {
+  //           createdAt: new Date(),
+  //           id: newMessageId,
+  //           isActive: true,
+  //           message: msg,
+  //           isFile: false,
+  //           updatedAt: new Date(),
+  //           userId: dataUserLogin.id,
+  //           User: {
+  //             id: dataUserLogin.id,
+  //             Profile: {
+  //               id: dataUserLogin.Profile?.id as any,
+  //               name: dataUserLogin.Profile?.name as any,
+  //             },
+  //           },
+  //         };
+  //         mqtt_client.publish(selectRoom.id, JSON.stringify(kiriman));
+  //       } else {
+  //         ComponentGlobal_NotifikasiGagal(res.message);
+  //       }
   //     }
-  //   } finally {
-  //     setIsLoading(false);
-  //   }
-  // };
+  //   );
+  // }
 
-  // const ref = useInfiniteScroll({
-  //   next,
-  //   rowCount: data.length,
-  //   hasMore: { up: isGet },
-  //   scrollThreshold: 0.1,
-  //   initialScroll: { top: 100 },
-  // });
+  // useShallowEffect(() => {
+  //   mqtt_client.subscribe(selectRoom.id);
+  //   // mqtt_client.on("message", (topic: any, message: any) => {
+  //   //   onList(message.toString());
+  //   // });
 
-  useShallowEffect(() => {
-    mqtt_client.subscribe(roomId);
+  //   mqtt_client.on("message", (topic: any, message: any) => {
+  //     let dd = _.clone(data);
+  //     const a = [...dd, JSON.parse(message)];
+  //     // console.log(dd.length);
+  //     setData(a);
+  //   });
+  // }, [data]);
 
-    mqtt_client.on("message", (data: any, msg: any) => {
-      onList(setData);
-    });
-  }, [setData]);
-
-  async function onList(setData: any) {
-    await colab_getMessageByRoomId({ page: page, roomId: roomId }).then((val) =>
-      setData(val)
-    );
-  }
-
-  async function onSend() {
-    await colab_funCreateMessageByUserId(msg, roomId).then(async (res) => {
-      if (res.status === 200) {
-        mqtt_client.publish(roomId, msg);
-        setMsg("");
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
-  }
+  // async function onList(message: any) {
+  //   const kiriman: MODEL_COLLABORATION_MESSAGE = {
+  //     createdAt: new Date(),
+  //     id: newMessageId,
+  //     isActive: true,
+  //     message: message,
+  //     isFile: false,
+  //     updatedAt: new Date(),
+  //     userId: dataUserLogin.id,
+  //     User: {
+  //       id: dataUserLogin.id,
+  //       Profile: {
+  //         id: dataUserLogin.Profile?.id as any,
+  //         name: dataUserLogin.Profile?.name as any,
+  //       },
+  //     },
+  //   };
 
+  //   const dataLama = _.clone(data);
+  //   setData([...dataLama, { ...kiriman }]);
 
+  // }
 
   return (
     <>
-      <Box h={"80vh"} bg={"blue.1"}>
-        <Stack justify="flex-end" h={"100%"}>
-          <div
-            style={{
-              // overflow: "scroll",
-              overflowY: "auto",
-              // height: "100vh",
-              // justifyContent: "flex-end",
-              // flexDirection: "column",
-              // display: "flex",
-            }}
-          >
-            {isLoading && (
-              <Center>
-                <Loader size={20} color="gray" />
-              </Center>
-            )}
-            {_.isEmpty(data) ? (
-              <ComponentColab_IsEmptyData text="Belum ada pesan" />
-            ) : (
-              data.map((e, i) => (
-                <Box key={i}>
-                  {userLoginId === e?.User?.id ? (
-                    <Group position="right">
-                      <Paper key={e.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
-                        <Stack spacing={0}>
-                          <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                            {e.User.Profile.name}
-                          </Text>
-                          <div
-                            dangerouslySetInnerHTML={{ __html: e.message }}
-                          />
+      <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}>
+          {/* Header */}
+          <HeaderGrup selectRoom={selectRoom} />
 
-                          <Group spacing={"xs"}>
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                timeStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                            <IconCircle size={3} />
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                dateStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                          </Group>
-                        </Stack>
-                      </Paper>
-                    </Group>
-                  ) : (
-                    <Group>
-                      <Paper key={e.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
-                        <Stack spacing={0}>
-                          <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                            {e.User.Profile.name}
-                          </Text>
-                          <div
-                            dangerouslySetInnerHTML={{ __html: e.message }}
-                          />
-                          <Group spacing={"xs"}>
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                timeStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                            <IconCircle size={3} />
-                            <Text fz={7}>
-                              {new Intl.DateTimeFormat("id-ID", {
-                                dateStyle: "medium",
-                              }).format(e.createdAt)}
-                            </Text>
-                          </Group>
-                        </Stack>
-                      </Paper>
-                    </Group>
+          {/* Main View */}
+          <Box
+            py={"xs"}
+            px={"xs"}
+            pos={"static"}
+            style={{ zIndex: 0 }}
+            h={"82vh"}
+          >
+            {/* Chat View */}
+            {_.isEmpty(data) ? (
+              <ComponentGlobal_IsEmptyData />
+            ) : (
+              // --- Main component --- //
+              <Box bg={"red"}>
+                <ScrollOnly
+                  height="80vh"
+                  renderLoading={() => (
+                    <Center mt={"lg"}>
+                      <Loader color={"yellow"} />
+                    </Center>
                   )}
-                </Box>
-              ))
+                  data={data}
+                  setData={setData}
+                  moreData={async () => {
+                    let loadData = await colab_getMessageByRoomId({
+                      roomId: roomId,
+                      page: 1,
+                    });
+                    setActivePage((val) => val + 1);
+
+                    return loadData;
+                  }}
+                >
+                  {(item) => (
+                    <Flex >{item.message}</Flex>
+                    // <Flex bg={"cyan"} align={"flex-end"}>
+                    //   {userLoginId === item?.User?.id ? (
+                    //     <Group position="right">
+                    //       <Paper
+                    //         key={item?.id}
+                    //         bg={"blue.2"}
+                    //         p={"sm"}
+                    //         mt={"sm"}
+                    //       >
+                    //         <Stack spacing={0}>
+                    //           <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                    //             {item?.User?.Profile?.name}
+                    //           </Text>
+                    //           <div
+                    //             dangerouslySetInnerHTML={{
+                    //               __html: item?.message,
+                    //             }}
+                    //           />
+                    //         </Stack>
+                    //       </Paper>
+                    //     </Group>
+                    //   ) : (
+                    //     <Group>
+                    //       <Paper
+                    //         key={item?.id}
+                    //         bg={"cyan.2"}
+                    //         p={"sm"}
+                    //         mt={"sm"}
+                    //       >
+                    //         <Stack spacing={0}>
+                    //           <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                    //             {item?.User?.Profile?.name}
+                    //           </Text>
+                    //           <div
+                    //             dangerouslySetInnerHTML={{
+                    //               __html: item?.message,
+                    //             }}
+                    //           />
+                    //         </Stack>
+                    //       </Paper>
+                    //     </Group>
+                    //   )}
+                    // </Flex>
+                  )}
+                </ScrollOnly>
+              </Box>
             )}
-            {/* {isLoading && (
+          </Box>
+
+          {/* Footer */}
+          <FooterGrup msg={msg} setMsg={setMsg} />
+        </Container>
+      </Box>
+    </>
+  );
+}
+
+function HeaderGrup({
+  selectRoom,
+}: {
+  selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
+}) {
+  const router = useRouter();
+  const [loadingBack, setLoadingBack] = useState(false);
+  const [loadingInfo, setLoadingInfo] = useState(false);
+  return (
+    <>
+      <Box
+        h={"8vh"}
+        style={{
+          zIndex: 10,
+        }}
+        w={"100%"}
+        pos={"sticky"}
+        top={0}
+        bg={MainColor.darkblue}
+      >
+        <Stack h={"100%"} justify="center" px={"sm"}>
+          <Grid grow gutter={"lg"}>
+            <Grid.Col span={2}>
+              <ActionIcon
+                variant="transparent"
+                radius={"xl"}
+                onClick={() => {
+                  setLoadingBack(true);
+                  router.back();
+                }}
+              >
+                {loadingBack ? (
+                  <ComponentGlobal_Loader />
+                ) : (
+                  <IconChevronLeft color="white" />
+                )}
+              </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={8}>
               <Center>
-                <Loader variant="bars" size={20} color="gray" />
+                <Title c={"white"} order={5} lineClamp={1}>
+                  {selectRoom?.name}
+                </Title>
               </Center>
-            )} */}
-          </div>
+            </Grid.Col>
+            <Grid.Col span={2}>
+              <Group position="right">
+                <ActionIcon
+                  variant="transparent"
+                  radius={"xl"}
+                  onClick={() => {
+                    setLoadingInfo(true);
+                    router.push(RouterColab.info_grup + selectRoom.id, {
+                      scroll: false,
+                    });
+                  }}
+                >
+                  {loadingInfo ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    <IconInfoSquareRounded color="white" />
+                  )}
+                </ActionIcon>
+              </Group>
+            </Grid.Col>
+          </Grid>
         </Stack>
       </Box>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}
 
-      <Affix
-        bg={"gray.2"}
-        h={"10vh"}
-        position={{ bottom: rem(0) }}
-        w={"100%"}
-        zIndex={99}
-        p={"xs"}
+function FooterGrup({
+  msg,
+  setMsg,
+}: {
+  msg: string;
+  setMsg: (val: any) => any;
+}) {
+  async function onSend() {
+    console.log(msg);
+  }
+  return (
+    <>
+      <Box
+        style={{
+          position: "relative",
+          bottom: 0,
+          height: "10vh",
+          zIndex: 10,
+          // borderRadius: "20px 20px 0px 0px",
+          borderTop: `2px solid ${AccentColor.blue}`,
+          borderRight: `1px solid ${AccentColor.blue}`,
+          borderLeft: `1px solid ${AccentColor.blue}`,
+        }}
+        bg={AccentColor.darkblue}
       >
         <Stack justify="center" h={"100%"} px={"sm"}>
           <Grid align="center">
@@ -210,11 +358,15 @@ export default function Colab_DetailGrupDiskusi({
               <ActionIcon
                 disabled={msg === "" ? true : false}
                 variant="filled"
-                bg={"cyan"}
+                bg={AccentColor.softblue}
+                color={"cyan"}
                 radius={"xl"}
                 size={"xl"}
                 onClick={() => {
-                  onSend();
+                  onSend()
+                }}
+                style={{
+                  transition: "0.5s",
                 }}
               >
                 <IconSend size={20} />
@@ -222,216 +374,7 @@ export default function Colab_DetailGrupDiskusi({
             </Grid.Col>
           </Grid>
         </Stack>
-      </Affix>
+      </Box>
     </>
   );
-
-  // "use client";
-
-  // import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-  // import {
-  //   ActionIcon,
-  //   Box,
-  //   Button,
-  //   Card,
-  //   Center,
-  //   Code,
-  //   Grid,
-  //   Group,
-  //   Header,
-  //   Loader,
-  //   Paper,
-  //   ScrollArea,
-  //   Stack,
-  //   Text,
-  //   Textarea,
-  //   Title,
-  // } from "@mantine/core";
-  // import {
-  //   IconChevronLeft,
-  //   IconCircle,
-  //   IconInfoSquareRounded,
-  //   IconSend,
-  // } from "@tabler/icons-react";
-  // import { useRouter } from "next/navigation";
-  // import router from "next/router";
-  // import { useRef, useState } from "react";
-  // import {
-  //   MODEL_COLLABORATION_MESSAGE,
-  //   MODEL_COLLABORATION_ROOM_CHAT,
-  // } from "../../model/interface";
-  // import _ from "lodash";
-  // import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-  // import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
-  // import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-  // import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
-  // import { useShallowEffect } from "@mantine/hooks";
-  // import mqtt_client from "@/util/mqtt_client";
-  // import useInfiniteScroll, {
-  //   ScrollDirection,
-  // } from "react-easy-infinite-scroll-hook";
-  // import toast from "react-simple-toasts";
-  // import colab_getOneMessageById from "../../fun/get/room_chat/get_one_message_by_id";
-
-  // const list = Array(100).fill(0);
-  // export default function ColabViewChat({
-  //   userLoginId,
-  //   listMsg,
-  //   dataRoom,
-  // }: {
-  //   userLoginId: string;
-  //   listMsg: any;
-  //   dataRoom?: MODEL_COLLABORATION_ROOM_CHAT;
-  // }) {
-  //   // Tamplate app layout
-  //   const router = useRouter();
-  //   const [loadingBack, setLoadingBack] = useState(false);
-  //   const [loadingInfo, setLoadingInfo] = useState(false);
-
-  //   // State message
-  //   const [msg, setMsg] = useState("");
-  //   const [data, setData] = useState(listMsg);
-
-  //   const [ls, setLs] = useState(list);
-
-  //   const viewport = useRef<HTMLDivElement>(null);
-
-  //   const scrollBottom = () => {
-  //     viewport.current?.scrollTo({
-  //       top: viewport.current.scrollHeight,
-  //       behavior: "smooth",
-  //     });
-  //   };
-
-  //   // Kirim pesan
-  //   async function onSend() {
-  //     setMsg("");
-  //     setLs([...[msg], ...ls]);
-  //     scrollBottom();
-  //   }
-
-  //   return (
-  //     <>
-  //       <Box h={"100vh"}>
-  //         {/* Header */}
-
-  //         <Box
-  //           style={{
-  //             zIndex: 99,
-  //           }}
-  //           w={"100%"}
-  //           pos={"fixed"}
-  //           top={0}
-  //           h={"7vh"}
-  //         >
-  //           <Stack bg={"gray.2"} h={"100%"} justify="center" px={"sm"}>
-  //             <Grid grow gutter={"lg"}>
-  //               <Grid.Col span={2}>
-  //                 <ActionIcon
-  //                   loading={loadingBack ? true : false}
-  //                   variant="transparent"
-  //                   radius={"xl"}
-  //                   onClick={() => {
-  //                     setLoadingBack(true);
-  //                     router.back();
-  //                   }}
-  //                 >
-  //                   <IconChevronLeft />
-  //                 </ActionIcon>
-  //               </Grid.Col>
-  //               <Grid.Col span={8}>
-  //                 <Center>
-  //                   <Title order={5} lineClamp={1}>
-  //                     {dataRoom?.name}
-  //                   </Title>
-  //                 </Center>
-  //               </Grid.Col>
-  //               <Grid.Col span={2}>
-  //                 <Group position="right">
-  //                   <ActionIcon
-  //                     loading={loadingInfo ? true : false}
-  //                     variant="transparent"
-  //                     radius={"xl"}
-  //                     onClick={() => {
-  //                       setLoadingInfo(true);
-  //                       router.push(RouterColab.info_grup + dataRoom?.id);
-  //                     }}
-  //                   >
-  //                     <IconInfoSquareRounded />
-  //                   </ActionIcon>
-  //                 </Group>
-  //               </Grid.Col>
-  //             </Grid>
-  //           </Stack>
-  //         </Box>
-
-  //         {/* Main View */}
-
-  //         <Box pos={"static"}>
-  //           <Box
-  //             style={{
-  //               height: "7vh",
-  //             }}
-  //           />
-  //           {/* Chat View */}
-  //           <Box h={"83vh"} bg={"blue"}>
-  //             <ScrollArea h={"100%"} viewportRef={viewport}>
-  //               {ls.map((e, i) => (
-  //                 <Text key={i}>{`${e + 1 + i++}`}</Text>
-  //               ))}
-  //             </ScrollArea>
-  //           </Box>
-
-  //           <Box
-  //             style={{
-  //               height: "10vh",
-  //             }}
-  //           />
-  //         </Box>
-
-  //         {/* Footer */}
-  //         <Box
-  //           style={{
-  //             zIndex: 98,
-  //           }}
-  //           w={"100%"}
-  //           pos={"fixed"}
-  //           bottom={0}
-  //           h={"10vh"}
-  //           bg={"gray.2"}
-  //         >
-  //           <Stack justify="center" h={"100%"} px={"sm"}>
-  //             <Grid align="center">
-  //               <Grid.Col span={"auto"}>
-  //                 <Textarea
-  //                   minRows={1}
-  //                   radius={"md"}
-  //                   placeholder="Ketik pesan anda..."
-  //                   onChange={(val) => {
-  //                     setMsg(val.currentTarget.value);
-  //                   }}
-  //                 />
-  //               </Grid.Col>
-  //               <Grid.Col span={"content"}>
-  //                 <ActionIcon
-  //                   disabled={msg ? false : true}
-  //                   variant="filled"
-  //                   bg={"cyan"}
-  //                   radius={"xl"}
-  //                   size={"xl"}
-  //                   onClick={() => {
-  //                     onSend();
-  //                   }}
-  //                 >
-  //                   <IconSend size={20} />
-  //                 </ActionIcon>
-  //               </Grid.Col>
-  //             </Grid>
-  //           </Stack>
-  //         </Box>
-  //       </Box>
-  //     </>
-  //   );
-  // }
-
 }
diff --git a/src/app_modules/colab/detail/grup/layout.tsx b/src/app_modules/colab/detail/grup/layout.tsx
deleted file mode 100644
index 57848624..00000000
--- a/src/app_modules/colab/detail/grup/layout.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client";
-
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  ActionIcon,
-  Box,
-  Center,
-  Grid,
-  Group,
-  Header,
-  Stack,
-  Title
-} from "@mantine/core";
-import {
-  IconChevronLeft,
-  IconInfoSquareRounded
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
-
-export default function LayoutColab_DetailGrupDiskusi({
-  children,
-  dataRoom,
-}: {
-  children: React.ReactNode;
-  dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
-}) {
-  const router = useRouter();
-  const [loadingBack, setLoadingBack] = useState(false);
-  const [loadingInfo, setLoadingInfo] = useState(false);
-  return (
-    <>
-      <Box>
-        {/* Header */}
-        <Box
-          style={{
-            zIndex: 99,
-          }}
-          w={"100%"}
-          bg={"black"}
-          pos={"fixed"}
-          top={0}
-          h={50}
-        >
-          {/* <ComponentColab_HeaderTamplate
-            title={dataRoom.name + " " + "fwf wfwe efewf wef"}
-            bg={"gray.2"}
-            icon={<IconInfoSquareRounded />}
-            route2={RouterColab.info_grup + dataRoom?.id}
-          /> */}
-          <Header height={50} sx={{ borderStyle: "none" }} bg={"gray.2"}>
-            <Stack h={50} justify="center" px={"sm"}>
-              <Grid grow gutter={"lg"}>
-                <Grid.Col span={2}>
-                  <ActionIcon
-                    loading={loadingBack ? true : false}
-                    variant="transparent"
-                    radius={"xl"}
-                    onClick={() => {
-                      setLoadingBack(true);
-                      router.back();
-                    }}
-                  >
-                    <IconChevronLeft />
-                  </ActionIcon>
-                </Grid.Col>
-                <Grid.Col span={8}>
-                  <Center>
-                    <Title order={5} lineClamp={1}>
-                      {dataRoom.name}
-                    </Title>
-                  </Center>
-                </Grid.Col>
-                <Grid.Col span={2}>
-                  <Group position="right">
-                    <ActionIcon
-                      loading={loadingInfo ? true : false}
-                      variant="transparent"
-                      radius={"xl"}
-                      onClick={() => {
-                        setLoadingInfo(true);
-                        router.push(RouterColab.info_grup + dataRoom?.id);
-                      }}
-                    >
-                      <IconInfoSquareRounded />
-                    </ActionIcon>
-                  </Group>
-                </Grid.Col>
-              </Grid>
-            </Stack>
-            {/* <Group position="apart" px={"sm"} h={"100%"}>
-              <ActionIcon>
-                <IconChevronLeft />
-              </ActionIcon>
-              <Box w={width > 375 ? 300 : 200}>
-                <Text truncate>ff fsafsdfdaf sadsadf asdfda ewfw wefewf</Text>
-              </Box>
-              <ActionIcon>
-                <IconInfoSquareRounded />
-              </ActionIcon>
-            </Group> */}
-          </Header>
-        </Box>
-
-        {/* Children */}
-        <Box py={"xs"} px={"xs"} pos={"static"}>
-          <Box
-            style={{
-              height: 50,
-            }}
-          ></Box>
-          <Stack>
-            {children}
-            <Box
-              style={{
-                height: "10vh",
-              }}
-            ></Box>
-          </Stack>
-        </Box>
-      </Box>
-    </>
-  );
-}
diff --git a/src/app_modules/colab/detail/proyek/saya/index.tsx b/src/app_modules/colab/detail/proyek/saya/index.tsx
index 13fa4910..2662b8d1 100644
--- a/src/app_modules/colab/detail/proyek/saya/index.tsx
+++ b/src/app_modules/colab/detail/proyek/saya/index.tsx
@@ -17,6 +17,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 {
   ActionIcon,
   Button,
@@ -37,6 +38,8 @@ 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,
@@ -78,59 +81,6 @@ function CheckBoxPartisipan({
 }) {
   const [value, setValue] = useState<string[]>([]);
 
-  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",
-    },
-  ];
-
   return (
     <>
       <Stack>
@@ -208,17 +158,29 @@ function ButtonAction({
 
   async function onSave() {
     if (nameRoom === "")
-      return ComponentGlobal_NotifikasiPeringatan("Isi Nama Grup");
-    await colab_funCreateRoomChat(nameRoom, value, colabId).then((res) => {
-      if (res.status === 201) {
-        setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
-        setHotMenu(4);
-        router.push(RouterColab.grup_diskusi);
-      } else {
-        ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Nama Grup");
+
+    // await notifikasiToUser_CreateGroupCollaboration({ colabId: colabId });
+
+    const res = await colab_funCreateRoomChat(nameRoom, value, colabId);
+    if (res.status === 201) {
+      for (let a of value) {
+        mqtt_client.publish(
+          "USER",
+          JSON.stringify({
+            userId: a,
+            count: 1,
+          })
+        );
       }
-    });
+
+      setLoading(true);
+      ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
+      setHotMenu(4);
+      router.push(RouterColab.grup_diskusi);
+    } else {
+      ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
+    }
   }
 
   return (
@@ -231,6 +193,7 @@ function ButtonAction({
         }}
         bg={MainColor.yellow}
         color="yellow"
+        c={"black"}
         style={{
           transition: "0.5s",
         }}
@@ -286,6 +249,7 @@ function ButtonAction({
               loading={loading ? true : false}
               radius={"xl"}
               color="yellow"
+              c={"black"}
               bg={MainColor.yellow}
               onClick={() => onSave()}
               style={{
diff --git a/src/app_modules/colab/edit/index.tsx b/src/app_modules/colab/edit/index.tsx
index 9ef5ff96..abee16f1 100644
--- a/src/app_modules/colab/edit/index.tsx
+++ b/src/app_modules/colab/edit/index.tsx
@@ -1,25 +1,18 @@
 "use client";
 
-import {
-  Stack,
-  TextInput,
-  Select,
-  Textarea,
-  Button,
-  Text,
-} from "@mantine/core";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+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";
+import { Button, Select, Stack, Textarea, TextInput } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import { useState } from "react";
+import colab_funEditById from "../fun/edit/fun_edit_by_id";
 import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_MASTER,
 } from "../model/interface";
-import colab_funEditById from "../fun/edit/fun_edit_by_id";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Colab_Edit({
   selectedData,
@@ -31,7 +24,7 @@ export default function Colab_Edit({
   const [value, setValue] = useState(selectedData);
   return (
     <>
-      <Stack px={"sm"} py={"md"}>
+      <Stack px={"xl"} py={"md"}>
         {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
         <TextInput
           maxLength={100}
@@ -217,6 +210,7 @@ function ButtonAction({ value }: { value: any }) {
         onClick={() => onUpdate()}
         bg={MainColor.yellow}
         color={"yellow"}
+        c={"black"}
         style={{
           transition: "0.5s",
         }}
diff --git a/src/app_modules/colab/fun/create/fun_create_partisipan_by_user_id.ts b/src/app_modules/colab/fun/create/fun_create_partisipan_by_user_id.ts
index 251b24bb..e8c3c460 100644
--- a/src/app_modules/colab/fun/create/fun_create_partisipan_by_user_id.ts
+++ b/src/app_modules/colab/fun/create/fun_create_partisipan_by_user_id.ts
@@ -13,11 +13,24 @@ export default async function colab_funCreatePartisipan(
     data: {
       projectCollaborationId: colabId,
       userId: userId,
-      deskripsi_diri: deskripsi
+      deskripsi_diri: deskripsi,
+    },
+    select: {
+      ProjectCollaboration: {
+        select: {
+          id: true,
+          title: true,
+          userId: true,
+        },
+      },
     },
   });
 
   if (!create) return { status: 400, message: "Gagal menambahkan partisipan" };
   revalidatePath(RouterColab.main_detail + colabId);
-  return { status: 201, message: "Berhasil menambahkan partisipan" };
-}
\ No newline at end of file
+  return {
+    data: create,
+    status: 201,
+    message: "Berhasil menambahkan partisipan",
+  };
+}
diff --git a/src/app_modules/colab/fun/create/fun_create_room_chat.ts b/src/app_modules/colab/fun/create/fun_create_room_chat.ts
index 99ce34eb..0d6cb1d3 100644
--- a/src/app_modules/colab/fun/create/fun_create_room_chat.ts
+++ b/src/app_modules/colab/fun/create/fun_create_room_chat.ts
@@ -32,6 +32,20 @@ export default async function colab_funCreateRoomChat(
 
     if (!createAnggota)
       return { status: 400, message: "Gagal Menambah Anggota" };
+
+    const createdNotifikasi = await prisma.notifikasi.create({
+      data: {
+        userId: v,
+        appId: createRoom.id,
+        status: "Collaboration Group",
+        title: "Grup Kolaborasi Baru",
+        pesan: createRoom.name,
+        kategoriApp: "COLLABORATION",
+        userRoleId: "1",
+      },
+    });
+    if (!createdNotifikasi)
+      return { status: 400, message: "Gagal mengirim notifikasi" };
   }
 
   const createForAuthor =
diff --git a/src/app_modules/colab/global_state/state.ts b/src/app_modules/colab/global_state/state.ts
new file mode 100644
index 00000000..5a8cd4be
--- /dev/null
+++ b/src/app_modules/colab/global_state/state.ts
@@ -0,0 +1,8 @@
+import { hookstate, useHookstate } from "@hookstate/core";
+
+const gs_colab_create = hookstate<boolean>(false);
+export function useGsCollabCreate(){
+    const state = useHookstate(gs_colab_create);
+    const value = state.get();
+    return [value, state.set] as const
+}
diff --git a/src/app_modules/colab/index.ts b/src/app_modules/colab/index.ts
index 0a927108..47fc651b 100644
--- a/src/app_modules/colab/index.ts
+++ b/src/app_modules/colab/index.ts
@@ -19,7 +19,6 @@ 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 LayoutColab_DetailGrupDiskusi from "./detail/grup/layout";
 import Colab_NotifikasiView from "./main/pemberitahuan";
 import Colab_DetailProyekSaya from "./detail/proyek/saya";
 import LayoutColab_DetailProyekSaya from "./detail/proyek/saya/layout";
@@ -49,7 +48,6 @@ export {
   LayoutColab_DetailPartisipasiProyek,
   Colab_GrupDiskus,
   Colab_DetailGrupDiskusi,
-  LayoutColab_DetailGrupDiskusi,
   Colab_NotifikasiView,
   Colab_DetailProyekSaya,
   LayoutColab_DetailProyekSaya,
diff --git a/src/app_modules/colab/main/beranda.tsx b/src/app_modules/colab/main/beranda.tsx
index 281a8e6d..1b4de513 100644
--- a/src/app_modules/colab/main/beranda.tsx
+++ b/src/app_modules/colab/main/beranda.tsx
@@ -1,20 +1,19 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
-import {
-  Box,
-  Center,
-  Loader
-} from "@mantine/core";
+import mqtt_client from "@/util/mqtt_client";
+import { Affix, Box, Button, Center, Loader, rem } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
-import { MODEL_COLLABORATION } from "../model/interface";
 import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
+import { MODEL_COLLABORATION } from "../model/interface";
+import { ComponentColab_ButtonUpdateBeranda } from "../component/button/button_update_beranda";
 
 export default function Colab_Beranda({
   listData,
@@ -26,9 +25,30 @@ export default function Colab_Beranda({
   const [data, setData] = useState(listData);
   const [activePage, setActivePage] = useState(1);
 
+  const [isNewPost, setIsNewPost] = useState(false);
+
+  useShallowEffect(() => {
+    mqtt_client.subscribe("Colab_create");
+
+    mqtt_client.on("message", (topic, message) => {
+      if (topic === "Colab_create") {
+        setIsNewPost(JSON.parse(message.toString()).isNewPost);
+      }
+    });
+  }, []);
+
   return (
     <>
       <Box>
+        {isNewPost && (
+          <ComponentColab_ButtonUpdateBeranda
+            onLoad={(val) => {
+              setData(val);
+            }}
+            setIsNewPost={setIsNewPost}
+          />
+        )}
+
         <ComponentGlobal_CreateButton path={RouterColab.create} />
 
         {_.isEmpty(data) ? (
diff --git a/src/app_modules/colab/main/grup/index.tsx b/src/app_modules/colab/main/grup/index.tsx
index f9ea7564..f7ccf26b 100644
--- a/src/app_modules/colab/main/grup/index.tsx
+++ b/src/app_modules/colab/main/grup/index.tsx
@@ -1,33 +1,19 @@
 "use client";
 
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import {
   Box,
   Center,
-  Grid,
-  Group,
-  Loader,
-  Paper,
-  Stack,
-  Text,
-  Title,
+  Loader
 } from "@mantine/core";
-import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
-import { IconChevronCompactRight, IconChevronRight } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT,
-  MODEL_COLLABORATION_ROOM_CHAT,
-} from "../../model/interface";
-import { useState } from "react";
 import _ from "lodash";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
-import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { ScrollOnly } from "next-scroll-loader";
-import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
+import { useState } from "react";
+import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
 import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
+import {
+  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT
+} from "../../model/interface";
 
 export default function Colab_GrupDiskus({
   listRoom,
diff --git a/src/app_modules/crowd/main/view.tsx b/src/app_modules/crowd/main/view.tsx
index 283ca741..2eee414e 100644
--- a/src/app_modules/crowd/main/view.tsx
+++ b/src/app_modules/crowd/main/view.tsx
@@ -63,13 +63,13 @@ export default function MainCrowd() {
               color: "white",
             }}
             onClick={() => {
-              // setLoadingInv(true);
-              // router.push(RouterCrowd.investasi);
-              // setChangeColor(0);
-              ComponentGlobal_NotifikasiPeringatan(
-                "Sementara ini sedang maintenance",
-                3000
-              );
+              setLoadingInv(true);
+              router.push(RouterCrowd.investasi);
+              setChangeColor(0);
+              // ComponentGlobal_NotifikasiPeringatan(
+              //   "Sementara ini sedang maintenance",
+              //   3000
+              // );
             }}
           >
             <Grid>
@@ -103,13 +103,13 @@ export default function MainCrowd() {
               color: "white",
             }}
             onClick={() => {
-              // setLoadingDon(true);
-              // router.push(RouterCrowd.donasi);
-              // setDonasiHotMenu(0);
-                ComponentGlobal_NotifikasiPeringatan(
-                  "Sementara ini sedang maintenance",
-                  3000
-                );
+              setLoadingDon(true);
+              router.push(RouterCrowd.donasi);
+              setDonasiHotMenu(0);
+                // ComponentGlobal_NotifikasiPeringatan(
+                //   "Sementara ini sedang maintenance",
+                //   3000
+                // );
             }}
           >
             <Grid>
diff --git a/src/app_modules/donasi/create/create_cerita_penggalang.tsx b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
index ef54df24..45cf79fd 100644
--- a/src/app_modules/donasi/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -95,7 +95,7 @@ export default function CreateCeritaPenggalangDonasi({
   }
   return (
     <>
-      <Stack spacing={50} px={"md"} py={"md"}>
+      <Stack spacing={50} px={"xl"} py={"md"}>
         {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
         <Stack spacing={"sm"}>
           <ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
diff --git a/src/app_modules/donasi/create/create_donasi.tsx b/src/app_modules/donasi/create/create_donasi.tsx
index 76a022a4..c3faa89c 100644
--- a/src/app_modules/donasi/create/create_donasi.tsx
+++ b/src/app_modules/donasi/create/create_donasi.tsx
@@ -87,7 +87,7 @@ export default function CreateDonasi({
 
   return (
     <>
-      <Stack spacing={"md"} px={"xs"}>
+      <Stack spacing={"md"} px={"xl"}>
         <ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
         <Select
           styles={{
diff --git a/src/app_modules/donasi/main/layout.tsx b/src/app_modules/donasi/main/layout.tsx
index 701c1f7d..3112a147 100644
--- a/src/app_modules/donasi/main/layout.tsx
+++ b/src/app_modules/donasi/main/layout.tsx
@@ -1,9 +1,12 @@
 "use client";
 
-import React, { useState } from "react";
+import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
 import {
   IconGiftCardFilled,
   IconHome,
@@ -11,12 +14,8 @@ import {
 } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
+import React, { useState } from "react";
 import { gs_donasi_hot_menu } from "../global_state";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 
 export default function LayoutDonasi({
   children,
diff --git a/src/app_modules/event/detail/main_detail/index.tsx b/src/app_modules/event/detail/main_detail/index.tsx
index 7ac237b2..da66795c 100644
--- a/src/app_modules/event/detail/main_detail/index.tsx
+++ b/src/app_modules/event/detail/main_detail/index.tsx
@@ -87,7 +87,7 @@ async function onJoin(
         appId: res?.data?.Event?.id,
         userId: res?.data?.Event?.authorId,
         pesan: res?.data?.Event?.title,
-        status: "Peserta event",
+        status: "Peserta Event",
         kategoriApp: "EVENT",
         title: "Peserta baru telah masuk !",
       };
diff --git a/src/app_modules/forum/main/beranda.tsx b/src/app_modules/forum/main/beranda.tsx
index 83c1fcf3..5bed8ff5 100644
--- a/src/app_modules/forum/main/beranda.tsx
+++ b/src/app_modules/forum/main/beranda.tsx
@@ -2,9 +2,9 @@
 
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import mqtt_client from "@/util/mqtt_client";
 import {
-  ActionIcon,
   Affix,
   Button,
   Center,
@@ -15,7 +15,7 @@ import {
   rem,
 } from "@mantine/core";
 import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import { IconPencilPlus, IconSearchOff } from "@tabler/icons-react";
+import { IconSearchOff } from "@tabler/icons-react";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
 import { useRouter } from "next/navigation";
@@ -23,7 +23,6 @@ import { useState } from "react";
 import ComponentForum_BerandaCardView from "../component/main_component/card_view";
 import { forum_new_getAllPosting } from "../fun/get/new_get_all_posting";
 import { MODEL_FORUM_POSTING } from "../model/interface";
-import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 
 export default function Forum_Beranda({
   listForum,
@@ -134,31 +133,6 @@ export default function Forum_Beranda({
         </Affix>
       )}
 
-      {/* <pre>{JSON.stringify(listForum, null, 2)}</pre> */}
-      {/* <Affix position={{ bottom: rem(100), right: rem(30) }}>
-        <ActionIcon
-          opacity={scroll.y > 0 ? 0.5 : ""}
-          style={{
-            transition: "0.5s",
-            border: `1px solid ${AccentColor.skyblue}`,
-          }}
-          size={"xl"}
-          radius={"xl"}
-          variant="transparent"
-          bg={AccentColor.blue}
-          onClick={() => {
-            setLoadingCreate(true);
-            router.push(RouterForum.create);
-          }}
-        >
-          {loadingCreate ? (
-            <Loader color={AccentColor.yellow} size={25} />
-          ) : (
-            <IconPencilPlus color="white" />
-          )}
-        </ActionIcon>
-      </Affix> */}
-
       <ComponentGlobal_CreateButton path={RouterForum.create} />
 
       <Stack spacing={"xl"}>
diff --git a/src/app_modules/investasi/create/layout.tsx b/src/app_modules/investasi/create/layout.tsx
index 40c9d51c..e9607ffe 100644
--- a/src/app_modules/investasi/create/layout.tsx
+++ b/src/app_modules/investasi/create/layout.tsx
@@ -2,6 +2,8 @@
 
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -12,13 +14,11 @@ export default function InvestasiCreateLayout({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={
-          <ComponentGlobal_HeaderTamplate  title="Investasi Baru" />
-        }
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Investasi Baru" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/investasi/detail/layout.tsx b/src/app_modules/investasi/detail/layout.tsx
index 509f7a4d..0386eba7 100644
--- a/src/app_modules/investasi/detail/layout.tsx
+++ b/src/app_modules/investasi/detail/layout.tsx
@@ -1,18 +1,11 @@
 "use client";
 
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import {
-  ActionIcon,
-  AppShell,
-  Group,
-  Header,
-  Text,
-  Title,
-} from "@mantine/core";
-import { IconArrowLeft, IconChevronLeft, IconEdit } from "@tabler/icons-react";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon, Group, Header, Title } from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { title } from "process";
 import React from "react";
 
 export default function LayoutDetailInvestasi({
@@ -23,34 +16,35 @@ export default function LayoutDetailInvestasi({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <Header height={50} style={{ borderStyle: "none" }}>
-            <Group h={50} position="apart" px={"md"}>
-              <ActionIcon
-                variant="transparent"
-                onClick={() => {
-                  router.back();
-                }}
-              >
-                <IconChevronLeft />
-              </ActionIcon>
-              <Title order={5}>Detail Investasi</Title>
-              <ActionIcon
-                variant="transparent"
-                disabled
-                onClick={() => {
-                  router.replace("");
-                }}
-              >
-                {/* <IconEdit /> */}
-              </ActionIcon>
-            </Group>
-          </Header>
+          <UIGlobal_LayoutHeaderTamplate title="Detail" />
+          // <Header height={50} style={{ borderStyle: "none" }}>
+          //   <Group h={50} position="apart" px={"md"}>
+          //     <ActionIcon
+          //       variant="transparent"
+          //       onClick={() => {
+          //         router.back();
+          //       }}
+          //     >
+          //       <IconChevronLeft />
+          //     </ActionIcon>
+          //     <Title order={5}>Detail Investasi</Title>
+          //     <ActionIcon
+          //       variant="transparent"
+          //       disabled
+          //       onClick={() => {
+          //         router.replace("");
+          //       }}
+          //     >
+          //       {/* <IconEdit /> */}
+          //     </ActionIcon>
+          //   </Group>
+          // </Header>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/investasi/detail/view.tsx b/src/app_modules/investasi/detail/view.tsx
index a55407dd..629987f0 100644
--- a/src/app_modules/investasi/detail/view.tsx
+++ b/src/app_modules/investasi/detail/view.tsx
@@ -2,10 +2,11 @@
 
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import { Warna } from "@/app/lib/warna";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
 import {
   ActionIcon,
   AspectRatio,
-  Avatar,
   Box,
   Button,
   Center,
@@ -15,10 +16,9 @@ import {
   Image,
   Paper,
   Progress,
-  Slider,
   Stack,
   Text,
-  Title,
+  Title
 } from "@mantine/core";
 import {
   IconBookDownload,
@@ -27,16 +27,13 @@ import {
   IconSpeakerphone,
   IconXboxX,
 } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import moment from "moment";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { MODEL_Investasi } from "../model/model_investasi";
-import moment from "moment";
-import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { gs_TransferValue } from "../g_state";
-import { useAtom } from "jotai";
-import _ from "lodash";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { MODEL_Investasi } from "../model/model_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailInvestasi({
   dataInvestasi,
@@ -92,7 +89,16 @@ export default function DetailInvestasi({
 
   return (
     <>
-      <Box px={"sm"}>
+      <Box
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
         {/* Foto username dan sisa waktu */}
         <Group position="apart" mb={"md"}>
           {/* <pre>{JSON.stringify(dataUser, null, 2)}</pre> */}
diff --git a/src/app_modules/investasi/main/layout.tsx b/src/app_modules/investasi/main/layout.tsx
index 5de43e15..c00114bb 100644
--- a/src/app_modules/investasi/main/layout.tsx
+++ b/src/app_modules/investasi/main/layout.tsx
@@ -1,14 +1,15 @@
 "use client";
 
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
 import {
   ActionIcon,
-  AppShell,
   Center,
   Flex,
   Footer,
   Grid,
-  Group,
+  SimpleGrid,
   Stack,
   Text,
 } from "@mantine/core";
@@ -16,17 +17,18 @@ import {
   IconCash,
   IconChartHistogram,
   IconChartPie,
-  IconChartPieFilled,
-  IconMoneybag,
   IconNotes,
-  IconPencilPlus,
 } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
-import React, { useState } from "react";
+import React from "react";
 import { gs_investasiFooter } from "../g_state";
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-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 { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { RouterCrowd } from "@/app/lib/router_hipmi/router_crowd";
 
 export default function LayoutMainInvestasi({
   children,
@@ -65,49 +67,79 @@ export default function LayoutMainInvestasi({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
-            route="/dev/crowd/main"
+          <UIGlobal_LayoutHeaderTamplate
+            routerLeft={RouterCrowd.main}
             title="Investasi"
             // icon={<IconPencilPlus />}
             // route2={"/dev/investasi/create"}
           />
         }
         footer={
-          <Footer height={"10vh"} bg={"black"}>
-            <Grid align="center" h={"10vh"} pt={"xs"} grow>
-              {/* Tampilan Bursa */}
-              {listFooter.map((e, k) => (
-                <Grid.Col
-                  key={e.id}
-                  span={3}
-                  onClick={() => {
-                    router.push(e.route);
-                    setActive(k);
-                  }}
+          <SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
+            {listFooter.map((e, i) => (
+              <Stack key={i} align="center" justify="center" spacing={0}>
+                <ActionIcon
+                  // disabled={e.path === "" ? true : false}
+                  variant="transparent"
+                  c={active === i ? MainColor.yellow : "white"}
+                  onClick={
+                    () => {
+                      router.push(e.route);
+                      setActive(i);
+                    }
+                    // e.route === ""
+                    //   ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                    //   : (router.replace(e.route), setActive(i))
+                  }
                 >
-                  <Center h={"100%"}>
-                    <Flex direction={"column"} align={"center"} w={"100%"}>
-                      <ActionIcon
-                        variant="transparent"
-                        c={active === k ? "blue" : "white"}
-                      >
-                        {e.icon}
-                      </ActionIcon>
-                      <Text c={active === k ? "blue" : "white"} fz={"xs"}>
-                        {e.name}
-                      </Text>
-                    </Flex>
-                  </Center>
-                </Grid.Col>
-              ))}
-            </Grid>
-          </Footer>
+                  {e.icon}
+                </ActionIcon>
+                <Text
+                  c={active === i ? MainColor.yellow : "white"}
+                  fz={"xs"}
+                  lineClamp={1}
+                >
+                  {e.name}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+
+          // <Footer height={"10vh"} bg={"black"}>
+          //   <Grid align="center" h={"10vh"} pt={"xs"} grow>
+
+          //     {listFooter.map((e, k) => (
+          //       <Grid.Col
+          //         key={e.id}
+          //         span={3}
+          //         onClick={() => {
+          //           router.push(e.route);
+          //           setActive(k);
+          //         }}
+          //       >
+          //         <Center h={"100%"}>
+          //           <Flex direction={"column"} align={"center"} w={"100%"}>
+          //             <ActionIcon
+          //               variant="transparent"
+          //               c={active === k ? "blue" : "white"}
+          //             >
+          //               {e.icon}
+          //             </ActionIcon>
+          //             <Text c={active === k ? "blue" : "white"} fz={"xs"}>
+          //               {e.name}
+          //             </Text>
+          //           </Flex>
+          //         </Center>
+          //       </Grid.Col>
+          //     ))}
+          //   </Grid>
+          // </Footer>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/investasi/main/view.tsx b/src/app_modules/investasi/main/view.tsx
index cbd50c6f..3b3d2df3 100644
--- a/src/app_modules/investasi/main/view.tsx
+++ b/src/app_modules/investasi/main/view.tsx
@@ -1,47 +1,42 @@
 "use client";
 
-import { ApiHipmi } from "@/app/lib/api";
-import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/model_default_master";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Warna } from "@/app/lib/warna";
 import {
   ActionIcon,
   Affix,
   AspectRatio,
-  Badge,
   Box,
   Button,
   Card,
   CardSection,
   Center,
   Divider,
-  Flex,
   Grid,
   Group,
   Image,
   Paper,
   Progress,
-  Slider,
   Stack,
   Text,
   Title,
   rem,
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import dataDummy from "../dummy/data_dummy.json";
-import moment from "moment";
+import { useWindowScroll } from "@mantine/hooks";
 import {
-  IconCheck,
   IconCircleCheck,
   IconPencilPlus,
   IconXboxX,
 } from "@tabler/icons-react";
-import { MODEL_Investasi } from "../model/model_investasi";
 import _ from "lodash";
+import moment from "moment";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import { Warna } from "@/app/lib/warna";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
+import { MODEL_Investasi } from "../model/model_investasi";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function MainInvestasi({
   listData,
@@ -66,7 +61,7 @@ export default function MainInvestasi({
 
   return (
     <>
-      <Affix position={{ bottom: rem(150), right: rem(30) }}>
+      {/* <Affix position={{ bottom: rem(150), right: rem(30) }}>
         <ActionIcon
           loading={isLoading ? true : false}
           opacity={scroll.y > 0 ? 0.5 : ""}
@@ -84,20 +79,29 @@ export default function MainInvestasi({
         >
           <IconPencilPlus color="white" />
         </ActionIcon>
-      </Affix>
+      </Affix> */}
+
+      <ComponentGlobal_CreateButton path={RouterInvestasi.create} />
 
       {_.isEmpty(investasi) && _.isEmpty(invesDone) && _.isEmpty(invesFail) ? (
-        <ComponentInvestasi_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       ) : (
         investasi.map((e) => (
           <Card
-            // sx={{ borderStyle: "solid", borderColor: "black", borderWidth: "0.5px" }}
-            radius={"sm"}
             key={e.id}
-            mb={"lg"}
-            withBorder
-            p={"xl"}
-            shadow="lg"
+            style={{
+              padding: "15px",
+              backgroundColor: AccentColor.darkblue,
+              borderRadius: "10px",
+              border: `2px solid ${AccentColor.blue}`,
+              color: "white",
+              marginBottom: "15px",
+              marginInline: "15px",
+            }}
+            onClick={() => {
+              setLoadingDetail(true);
+              router.push(RouterInvestasi.detail + `${e.id}`);
+            }}
           >
             <CardSection>
               <AspectRatio ratio={16 / 9}>
@@ -176,8 +180,8 @@ export default function MainInvestasi({
             </CardSection>
             <Divider color="gray.4" />
             <CardSection p={"md"}>
-              <Group position="apart">
-                <Button
+              <Group position="right">
+                {/* <Button
                   loaderPosition="center"
                   loading={isLoadingDetail ? true : false}
                   radius={"xl"}
@@ -190,7 +194,7 @@ export default function MainInvestasi({
                   }}
                 >
                   Detail
-                </Button>
+                </Button> */}
 
                 {e.progress === "100" ? (
                   <Group position="right" spacing={"xs"}>
diff --git a/src/app_modules/investasi/portofolio/draft.tsx b/src/app_modules/investasi/portofolio/draft.tsx
index 2a9cf6c5..040b3281 100644
--- a/src/app_modules/investasi/portofolio/draft.tsx
+++ b/src/app_modules/investasi/portofolio/draft.tsx
@@ -20,6 +20,8 @@ import { useRouter } from "next/navigation";
 import { MODEL_Investasi } from "../model/model_investasi";
 import _ from "lodash";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Draft({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -28,7 +30,7 @@ export default function Draft({ data }: { data: MODEL_Investasi[] }) {
   if (_.isEmpty(data))
     return (
       <>
-        <ComponentInvestasi_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       </>
     );
 
@@ -37,12 +39,16 @@ export default function Draft({ data }: { data: MODEL_Investasi[] }) {
       {/* <pre> {JSON.stringify(data,null, 2)}</pre> */}
       {data.map((e) => (
         <Paper
-          // sx={{ borderStyle: "solid", borderColor: "yellow", borderWidth: "0.5px" }}
-          p={"xs"}
           key={e.id}
-          mb={"md"}
-          withBorder
           onClick={() => router.push(RouterInvestasi.detail_draft + `${e.id}`)}
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            border: `2px solid ${AccentColor.blue}`,
+            color: "white",
+            marginBottom: "15px",
+          }}
         >
           <Grid>
             <Grid.Col span={8}>
diff --git a/src/app_modules/investasi/portofolio/publish.tsx b/src/app_modules/investasi/portofolio/publish.tsx
index f86d2b67..e04dfc03 100644
--- a/src/app_modules/investasi/portofolio/publish.tsx
+++ b/src/app_modules/investasi/portofolio/publish.tsx
@@ -1,31 +1,24 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
-  Card,
-  CardSection,
   AspectRatio,
   Box,
-  Title,
-  Slider,
   Divider,
-  Group,
-  Badge,
-  Image,
-  Text,
-  Center,
   Grid,
-  Stack,
+  Group,
+  Image,
   Paper,
+  Stack,
+  Text,
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import {
-  MODEL_Investasi,
-  MODEL_Status_investasi,
-} from "../model/model_investasi";
+import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
 import _ from "lodash";
 import moment from "moment";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { IconChecklist, IconCircleCheck } from "@tabler/icons-react";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import { MODEL_Investasi } from "../model/model_investasi";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Publish({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -34,7 +27,7 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
   if (_.isEmpty(data))
     return (
       <>
-        <ComponentInvestasi_IsEmptyData text="Tidak ada data" />
+        <ComponentGlobal_IsEmptyData />
       </>
     );
 
@@ -43,12 +36,17 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
       {data.map((e) => (
         <Paper
           key={e.id}
-          withBorder
-          mb={"md"}
-          p={"xs"}
           onClick={() =>
             router.push(RouterInvestasi.detail_publish + `${e.id}`)
           }
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            border: `2px solid ${AccentColor.blue}`,
+            color: "white",
+            marginBottom: "15px",
+          }}
         >
           <Grid>
             <Grid.Col span={8}>
@@ -101,9 +99,13 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
                     <Box>
                       Sisa Waktu : {}
                       {Number(e.MasterPencarianInvestor.name) -
-                        moment(new Date()).diff(new Date(e.countDown), "days")} hari
+                        moment(new Date()).diff(
+                          new Date(e.countDown),
+                          "days"
+                        )}{" "}
+                      hari
                     </Box>
-                  )} 
+                  )}
                 </Group>
               </Group>
             )}
diff --git a/src/app_modules/investasi/portofolio/view.tsx b/src/app_modules/investasi/portofolio/view.tsx
index 637e3747..1d76e35b 100644
--- a/src/app_modules/investasi/portofolio/view.tsx
+++ b/src/app_modules/investasi/portofolio/view.tsx
@@ -1,60 +1,23 @@
 "use client";
 
 import {
-  AspectRatio,
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Card,
-  CardSection,
-  Collapse,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  ScrollArea,
-  Select,
-  Slider,
   Stack,
-  Tabs,
-  Text,
-  Title,
+  Tabs
 } from "@mantine/core";
-import dataDummy from "../dummy/data_dummy.json";
-import moment from "moment";
 import { useRouter } from "next/navigation";
-import {
-  IconCaretDown,
-  IconCircleCheck,
-  IconCirclePlus,
-} from "@tabler/icons-react";
 import { useState } from "react";
 
-import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
-import { Carousel } from "react-responsive-carousel";
-import { useDisclosure } from "@mantine/hooks";
-import { Warna } from "@/app/lib/warna";
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import {
-  IconPhoto,
-  IconMessageCircle,
-  IconSettings,
-} from "@tabler/icons-react";
-import { atomWithStorage } from "jotai/utils";
 import { useAtom } from "jotai";
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { gs_StatusPortoInvestasi } from "../g_state";
 import {
-  MODEL_Investasi,
-  MODEL_Status_investasi,
+  MODEL_Status_investasi
 } from "../model/model_investasi";
-import _ from "lodash";
 import Draft from "./draft";
-import Review from "./review";
 import Publish from "./publish";
 import Reject from "./reject";
+import Review from "./review";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function PortofolioInvestasi({
   listStatusInvestasi,
@@ -77,60 +40,59 @@ export default function PortofolioInvestasi({
   return (
     <>
       {/* <pre>{JSON.stringify(dataInvestasi, null, 2)}</pre> */}
-      <Stack>
-        {/* <Button
-          radius={"xl"}
-          bg={Warna.hijau_muda}
-          color="green"
-          leftIcon={<IconCirclePlus />}
-          onClick={() => router.push(RouterInvestasi.create)}
-        >
-          Buat Proyek Invetasi
-        </Button> */}
-        <Tabs
-          variant="pills"
-          radius="xl"
-          defaultValue="Draft"
-          value={activeTab}
-          onTabChange={setActiveTab}
-        >
-          <Stack>
-            <Tabs.List grow>
-              {status_inves.map((e) => (
-                <Tabs.Tab
-                  sx={
+      <Tabs
+        color="orange"
+        variant="pills"
+        radius="xl"
+        defaultValue="Draft"
+        value={activeTab}
+        onTabChange={setActiveTab}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+        }}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {status_inves.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.name}
+                fw={"bold"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    activeTab === e.name ? MainColor.yellow : "white",
+                  border:
                     activeTab === e.name
-                      ? {
-                          boxShadow:
-                            "0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.2)",
-                        }
-                      : {}
-                  }
-                  key={e.id}
-                  value={e.name}
-                  bg={activeTab === e.name ? "blue" : "gray.1"}
-                  fw={activeTab === e.name ? "bold" : "normal"}
-                >
-                  {e.name}
-                </Tabs.Tab>
-              ))}
-            </Tabs.List>
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
+              >
+                {e.name}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
 
-            <Tabs.Panel key={"1"} value="Draft">
-              <Draft data={dataDraft as any} />
-            </Tabs.Panel>
-            <Tabs.Panel key={"2"} value="Review">
-              <Review data={dataReview as any} />
-            </Tabs.Panel>
-            <Tabs.Panel key={"3"} value="Publish">
-              <Publish data={dataPublish as any} />
-            </Tabs.Panel>
-            <Tabs.Panel key={"4"} value="Reject">
-              <Reject data={dataReject as any} />
-            </Tabs.Panel>
-          </Stack>
-        </Tabs>
-      </Stack>
+          <Tabs.Panel key={"1"} value="Draft">
+            <Draft data={dataDraft as any} />
+          </Tabs.Panel>
+          <Tabs.Panel key={"2"} value="Review">
+            <Review data={dataReview as any} />
+          </Tabs.Panel>
+          <Tabs.Panel key={"3"} value="Publish">
+            <Publish data={dataPublish as any} />
+          </Tabs.Panel>
+          <Tabs.Panel key={"4"} value="Reject">
+            <Reject data={dataReject as any} />
+          </Tabs.Panel>
+        </Stack>
+      </Tabs>
     </>
   );
 }
diff --git a/src/app_modules/notifikasi/component/card_view.tsx b/src/app_modules/notifikasi/component/card_view.tsx
index b3d64292..79a6ce5a 100644
--- a/src/app_modules/notifikasi/component/card_view.tsx
+++ b/src/app_modules/notifikasi/component/card_view.tsx
@@ -14,6 +14,7 @@ import {
 import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
 import { redirectVotingPage } from "./path/voting";
 import { redirectEventPage } from "./path/event";
+import { redirectDetailCollaborationPage } from "./path/collaboration";
 
 export function ComponentNotifiaksi_CardView({
   data,
@@ -42,7 +43,6 @@ export function ComponentNotifiaksi_CardView({
         }}
         my={"xs"}
         onClick={async () => {
-          
           await notifikasi_funUpdateIsReadById({
             notifId: data?.id,
           });
@@ -53,6 +53,7 @@ export function ComponentNotifiaksi_CardView({
           //   });
           //   onLoadData(loadData);
           // }
+          console.log(data.status);
 
           data?.kategoriApp === "JOB" &&
             redirectJobPage({
@@ -86,6 +87,12 @@ export function ComponentNotifiaksi_CardView({
                 onSetMenu(val);
               },
             });
+
+          data?.kategoriApp === "COLLABORATION" &&
+            redirectDetailCollaborationPage({
+              data: data,
+              router: router,
+            });
         }}
       >
         {/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
diff --git a/src/app_modules/notifikasi/component/path/collaboration.ts b/src/app_modules/notifikasi/component/path/collaboration.ts
new file mode 100644
index 00000000..163be61f
--- /dev/null
+++ b/src/app_modules/notifikasi/component/path/collaboration.ts
@@ -0,0 +1,33 @@
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { MODEL_NOTIFIKASI } from "../../model/interface";
+
+export function redirectDetailCollaborationPage({
+  data,
+  router,
+}: {
+  data: MODEL_NOTIFIKASI;
+  router: AppRouterInstance;
+}) {
+  if (data.status === "Partisipan Project") {
+    const path = RouterColab.main_detail + data.appId;
+    router.push(path, { scroll: false });
+  }
+
+ 
+
+  if (data.status === "Collaboration Group") {
+    const path = RouterColab.grup_diskusi;
+    router.push(path, { scroll: false });
+  }
+
+  //   if (data.status === "Report Komentar") {
+  //     const path = RouterForum.detail_report_komentar + data.appId;
+  //     router.push(path, { scroll: false });
+  //   }
+
+  //   if (data.status === "Report Posting") {
+  //     const path = RouterForum.detail_report_posting + data.appId;
+  //     router.push(path, { scroll: false });
+  //   }
+}
diff --git a/src/app_modules/notifikasi/component/path/event.ts b/src/app_modules/notifikasi/component/path/event.ts
index 5f83f9c2..85984bf1 100644
--- a/src/app_modules/notifikasi/component/path/event.ts
+++ b/src/app_modules/notifikasi/component/path/event.ts
@@ -30,7 +30,7 @@ export function redirectEventPage({
     router.push(path, { scroll: false });
   }
 
-  if (data.status === "Peserta event") {
+  if (data.status === "Peserta Event") {
     router.push(RouterEvent.detail_main + data.appId, { scroll: false });
   }
 }
diff --git a/src/app_modules/notifikasi/fun/create/create_notif_to_user_collaboration.ts b/src/app_modules/notifikasi/fun/create/create_notif_to_user_collaboration.ts
new file mode 100644
index 00000000..549af323
--- /dev/null
+++ b/src/app_modules/notifikasi/fun/create/create_notif_to_user_collaboration.ts
@@ -0,0 +1,32 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function notifikasiToUser_CreateGroupCollaboration({
+  colabId,
+}: {
+  colabId: string;
+}) {
+  const userPartisipasi =
+    await prisma.projectCollaboration_Partisipasi.findMany({
+      where: {
+        ProjectCollaboration: {
+          id: colabId,
+        },
+      },
+      select: {
+        // User: true,
+        userId: true,
+        // ProjectCollaboration: {
+        //     select: {
+        //         id
+        //         title: true
+        //     }
+        // },
+      },
+    });
+
+   
+
+  console.log(userPartisipasi);
+}
diff --git a/src/app_modules/notifikasi/model/interface.ts b/src/app_modules/notifikasi/model/interface.ts
index 33c8e93f..4613c509 100644
--- a/src/app_modules/notifikasi/model/interface.ts
+++ b/src/app_modules/notifikasi/model/interface.ts
@@ -8,13 +8,25 @@ export interface MODEL_NOTIFIKASI {
   appId: string;
   kategoriApp: string;
   isRead: boolean;
-  title: string,
+  title: string;
   pesan: string;
   User: MODEL_USER;
   userId: string;
   Admin: MODEL_USER;
   adminId: string;
-  status?: string;
+  status?:
+    | "Publish"
+    | "Reject"
+    | "Review"
+    | "Draft"
+    | "Voting Masuk"
+    | "Voting Selesai"
+    | "Voting Selesai"
+    | "Peserta Event"
+    | "Report Komentar"
+    | "Report Posting"
+    | "Partisipan Project"
+    | "Collaboration Group";
   Role: MODEL_NEW_DEFAULT_MASTER;
   userRoleId: String;
 }
diff --git a/src/app_modules/vote/create/index.tsx b/src/app_modules/vote/create/index.tsx
index 8991f93b..78f9fe6d 100644
--- a/src/app_modules/vote/create/index.tsx
+++ b/src/app_modules/vote/create/index.tsx
@@ -128,7 +128,7 @@ export default function Vote_Create() {
 
         <Stack spacing={0}>
           <Center>
-            <Text fw={"bold"} fz={"sm"}>
+            <Text fw={"bold"} fz={"sm"} c={"white"}>
               Daftar Pilihan
             </Text>
           </Center>
diff --git a/yarn.lock b/yarn.lock
index 05af251e..3e0b8a82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -493,6 +493,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
+"@hookstate/core@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-4.0.1.tgz#6744380e96ce13fe3488c926c1cbae93bbea0ff6"
+  integrity sha512-Uh2D8Z0z/pqOJ7t+SfC+2sj13JQcB4yFhtL+T1choCaBxTSlgOS/CKRBohgJ4cjTKoxOmTT8uSQysu3gUjX+Gw==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"