Collaboration: Room chat

# feat
- chatting antar user
- lihat info grup
## No issue

package.json

@@ -37,6 +37,7 @@
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.4",
     "autoprefixer": "10.4.14",
+    "bufferutil": "^4.0.8",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
@@ -64,6 +65,7 @@
     "socket.io-client": "^4.7.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
+    "utf-8-validate": "^6.0.3",
     "uuid": "^9.0.1",
     "yaml": "^2.3.2"
   }

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

@@ -11,11 +11,14 @@ export default async function Layout({
   params: { id: string };
 }) {
   let roomId = params.id;
-  // const listAnggota = await colab_getListAnggotaByRoomId(roomId);
+  const dataRoom = await colab_getListAnggotaByRoomId(roomId);
+  
 
   return (
     <>
-      <LayoutColab_DetailGrupDiskusi>{children}</LayoutColab_DetailGrupDiskusi>
+      <LayoutColab_DetailGrupDiskusi dataRoom={dataRoom as any}>
+        {children}
+      </LayoutColab_DetailGrupDiskusi>
     </>
   );
 }

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

@@ -1,15 +1,18 @@
 import { Colab_DetailGrupDiskusi } 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 _ from "lodash";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let roomId = params.id;
-  const listMsg = await colab_getMessageByRoomId(roomId);
   const userLoginId = await user_getOneUserId()
+  let listMsg = await colab_getMessageByRoomId(roomId);
+  const reserveMsg = _.reverse(listMsg)
+  
 
   return (
     <>
-      <Colab_DetailGrupDiskusi roomId={roomId} listMsg={listMsg} userLoginId={userLoginId}/>
+      <Colab_DetailGrupDiskusi roomId={roomId} listMsg={reserveMsg} userLoginId={userLoginId}/>
     </>
   );
 }

src/app/dev/colab/detail/info-grup/[id]/page.tsx

@@ -0,0 +1,14 @@
+import prisma from "@/app/lib/prisma";
+import { Colab_DetailInfoGrup } from "@/app_modules/colab";
+import colab_getListAnggotaByRoomId from "@/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let roomId = params.id;
+  const dataRoom = await colab_getListAnggotaByRoomId(roomId)
+
+  return (
+    <>
+      <Colab_DetailInfoGrup dataRoom={dataRoom as any} />
+    </>
+  );
+}

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

@@ -13,13 +13,14 @@ export default async function Layout({
   const colabId = params.id;
   const dataColab = await colab_getOneCollaborationById(colabId);
   const authorId = dataColab?.Author?.id;
-  const userLoginId = await user_getOneUserId()
+  const userLoginId = await user_getOneUserId();
-  console.log(authorId)
-  console.log(userLoginId)
 
   return (
     <>
-      <LayoutColab_MainDetail colabId={colabId} isAuthor={authorId === userLoginId ? true : false}>
+      <LayoutColab_MainDetail
+        colabId={colabId}
+        isAuthor={authorId === userLoginId ? true : false}
+      >
         {children}
       </LayoutColab_MainDetail>
     </>

src/app/layout.tsx

@@ -1,11 +1,11 @@
-// import MqttLoader from '@/util/mqtt_loader';
+import MqttLoader from '@/util/mqtt_loader';
 import RootStyleRegistry from './emotion';
 
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <RootStyleRegistry>
-      {/* <MqttLoader /> */}
+      <MqttLoader />
       {children}</RootStyleRegistry>
   );
 }

src/app/lib/router_hipmi/router_colab.ts

@@ -21,6 +21,7 @@ export const RouterColab = {
   detail_partisipasi_proyek: "/dev/colab/detail/proyek/partisipasi/",
   detail_proyek_saya: "/dev/colab/detail/proyek/saya/",
   detail_grup: "/dev/colab/detail/grup/",
+  info_grup: "/dev/colab/detail/info-grup/",
 
   // proyek
 };

src/app/makuro/page.tsx

@@ -13,104 +13,89 @@ import {
   Title,
 } from "@mantine/core";
 import _ from "lodash";
-// import ViewMakuro from "./_server/makuro_view";
+import ViewMakuro from "./_server/makuro_view";
-// import mqtt_client from "@/util/mqtt_client";
+import mqtt_client from "@/util/mqtt_client";
-// import { useState } from "react";
+import { useState } from "react";
-// import { useAtom } from "jotai";
+import { useAtom } from "jotai";
-// import { gs_coba_chat } from "./gs_coba";
+import { gs_coba_chat } from "./gs_coba";
-
+import { useShallowEffect } from "@mantine/hooks";
-// export default function Page() {
-//   const [data1, setData1] = useState("");
-//   const [data2, setData2] = useState("");
-
-//   const [msg, setMsg] = useAtom(gs_coba_chat);
-
-//   return (
-//     <>
-//       <SimpleGrid cols={2} mt={"lg"}>
-//         <Stack align="center" justify="center">
-//           <TextInput
-//             label="User 1"
-//             value={data1}
-//             onChange={(val) => setData1(val.currentTarget.value)}
-//           />
-//           <button
-//             onClick={() => {
-//               mqtt_client.publish("example_hipmi", data1);
-//               setData1("");
-//             }}
-//           >
-//             kirim
-//           </button>
-//         </Stack>
-//         <Stack align="center" justify="center">
-//           <TextInput
-//             label="User 2"
-//             value={data2}
-//             onChange={(val) => setData2(val.currentTarget.value)}
-//           />
-//           <button
-//             onClick={() => {
-//               mqtt_client.publish("example_hipmi", data2);
-//               setData2("");
-//             }}
-//           >
-//             kirim
-//           </button>
-//         </Stack>
-//       </SimpleGrid>
-//       <Stack align="center" justify="center" mt={"xl"}>
-//         <Paper withBorder shadow="lg" p={"lg"}>
-//           {msg}
-//         </Paper>
-//       </Stack>
-//       {/* <ViewMakuro /> */}
-//     </>
-//   );
-// }
 
 export default function Page() {
+  const [pesan, setPesan] = useState("");
+  const [ini, setIni] = useState("");
+
+  useShallowEffect(() => {
+    mqtt_client.subscribe("apa");
+
+    mqtt_client.on("message", (data: any, msg: any) => {
+      console.log( msg.toString());
+      setIni(msg.toString());
+    });
+  }, []);
+
   return (
-    <Box> 
+    <>
-      <Box
+      <Stack align="center" justify="center">
-        style={{
+        {ini}
-          zIndex: 99,
+        <TextInput
-        }}
+          label="User 1"
-        w={"100%"}
+          value={pesan}
-        bg={"green"}
+          onChange={(val) => setPesan(val.currentTarget.value)}
-        pos={"sticky"}
+        />
-        top={0}
+        <button
-        h={"10vh"}
+          onClick={() => {
-      >
+            mqtt_client.publish("apa", pesan);
-        header
+            setPesan("");
-      </Box>
+          }}
-
+        >
-      <Box bg={"red"} pos={"static"} >
+          kirim
-        <Stack>
+        </button>
-          {Array.from(new Array(15)).map((v, k) => (
+      </Stack>
-            <Title key={k}>Cek halaman {k+1}</Title>
+    </>
-          ))}
-          <Box style={{
-            height: "10vh"
-          }}>
-
-          </Box>
-        </Stack>
-      </Box>
-
-
-      <Text
-        style={{
-          zIndex: 98,
-        }}
-        w={"100%"}
-        bg={"blue"}
-        pos={"fixed"}
-        bottom={0}
-        h={"10vh"}
-      >
-        footer
-      </Text>
-    </Box>
   );
 }
+
+// export default function Page() {
+//   return (
+//     <Box>
+//       <Box
+//         style={{
+//           zIndex: 99,
+//         }}
+//         w={"100%"}
+//         bg={"green"}
+//         pos={"sticky"}
+//         top={0}
+//         h={"10vh"}
+//       >
+//         header
+//       </Box>
+
+//       <Box bg={"red"} pos={"static"} >
+//         <Stack>
+//           {Array.from(new Array(15)).map((v, k) => (
+//             <Title key={k}>Cek halaman {k+1}</Title>
+//           ))}
+//           <Box style={{
+//             height: "10vh"
+//           }}>
+
+//           </Box>
+//         </Stack>
+//       </Box>
+
+//       <Text
+//         style={{
+//           zIndex: 98,
+//         }}
+//         w={"100%"}
+//         bg={"blue"}
+//         pos={"fixed"}
+//         bottom={0}
+//         h={"10vh"}
+//       >
+//         footer
+//       </Text>
+//     </Box>
+//   );
+// }

src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts

@@ -3,7 +3,7 @@
 import prisma from "@/app/lib/prisma";
 
 export async function auth_funEditAktivasiKodeOtpById(otpId: string) {
-  console.log(otpId);
+  // console.log(otpId);
   const updt = await prisma.kodeOtp.update({
     where: {
       id: otpId,

src/app_modules/auth/fun/fun_login.ts

@@ -5,7 +5,7 @@ import { randomOTP } from "./rondom_otp";
 
 export async function auth_funLogin(nomor: string) {
   const codeOtp = randomOTP();
-  console.log(nomor)
+  // console.log(nomor)
 
   try {
     const res = await fetch(

src/app_modules/auth/register/view.tsx

@@ -81,6 +81,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
         await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
           if (val.status === 200) {
             ComponentGlobal_NotifikasiBerhasil(res.message);
+            setLoading(true);
             router.push(RouterHome.main_home);
           } else {
             ComponentGlobal_NotifikasiPeringatan(val.message);
@@ -94,7 +95,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-
       {/* <pre>{JSON.stringify(dataOtp,null,2)}</pre> */}
 
       <Center>
@@ -140,7 +140,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
                 color={"teal"}
                 onClick={() => {
                   onRegistarsi();
-                  setLoading(true);
                 }}
               >
                 <Text>DAFTAR</Text>

src/app_modules/auth/validasi/view.tsx

@@ -88,6 +88,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
           if (val.status === 200) {
             if (res.role === "1") {
               ComponentGlobal_NotifikasiBerhasil(res.message);
+              setLoading(true);
               router.push(RouterHome.main_home);
             } else {
               router.push(RouterAdminDashboard.splash_admin);
@@ -105,7 +106,6 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
 
   return (
     <>
-
       <Center h={"100vh"}>
         <Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
           <Center>
@@ -143,7 +143,6 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
                 color={"teal"}
                 onClick={() => {
                   onVerifikasi();
-                  setLoading(true);
                 }}
               >
                 <Text>VERIFIKASI</Text>

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

@@ -98,7 +98,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
                   <IconZoomCheck />
                 </ActionIcon>
               ) : (
-                "Invalid Data"
+                ""
               )}
             </Stack>
           </Grid.Col>

src/app_modules/colab/component/header_tamplate.tsx

@@ -47,6 +47,7 @@ export default function ComponentColab_HeaderTamplate({
             <ActionIcon variant="transparent" disabled></ActionIcon>
           ) : (
             <ActionIcon
+              radius={"xl"}
               loading={loading ? true : false}
               variant="transparent"
               onClick={() => {

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

@@ -3,6 +3,7 @@
 import {
   ActionIcon,
   Affix,
+  Badge,
   Box,
   Button,
   Grid,
@@ -20,12 +21,13 @@ import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useState } from "react";
 import { gs_colab_pesan } from "../../global_state";
-import { IconArrowUp, IconSend } from "@tabler/icons-react";
+import { IconArrowUp, IconCircle, IconSend } from "@tabler/icons-react";
 import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
 import _ from "lodash";
 import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
+import mqtt_client from "@/util/mqtt_client";
 
 export default function Colab_DetailGrupDiskusi({
   roomId,
@@ -40,17 +42,29 @@ export default function Colab_DetailGrupDiskusi({
   const [obrolan, setObrolan] = useState<any[]>(listMsg);
   const [scroll, scrollTo] = useWindowScroll();
 
-  async function onSend() {
+  useShallowEffect(() => {
-    scrollTo({ y: -0 });
+    mqtt_client.subscribe(roomId);
 
-    // await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
+    mqtt_client.on("message", (data: any, msg: any) => {
-    //   if (res.status === 200) {
+      onList(setObrolan);
-    //     await colab_getMessageByRoomId(roomId).then((val) => setObrolan(val));
+    });
-    //     setPesan("");
+  }, [setObrolan]);
-    //   } else {
+
-    //     ComponentGlobal_NotifikasiGagal(res.message);
+  async function onList(setObrolan: any) {
-    //   }
+    await colab_getMessageByRoomId(roomId).then((val) =>
-    // });
+      setObrolan(_.reverse(val))
+    );
+  }
+
+  async function onSend() {
+    await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
+      if (res.status === 200) {
+        mqtt_client.publish(roomId, pesan);
+        setPesan("");
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
   }
 
   // if (_.isEmpty(listMsg))
@@ -58,8 +72,9 @@ export default function Colab_DetailGrupDiskusi({
 
   return (
     <>
-      <Box h={"78vh"}>
+      <Box h={"79vh"}>
-        <ScrollArea h={"78vh"} scrollbarSize={2}>
+        {/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
+        <ScrollArea h={"79vh"} scrollbarSize={2}>
           <Box>
             {_.isEmpty(obrolan) ? (
               <ComponentColab_IsEmptyData text="Belum Ada Pesan" />
@@ -71,10 +86,23 @@ export default function Colab_DetailGrupDiskusi({
                       <Group position="right">
                         <Paper key={e.id} bg={"blue.2"} p={"sm"}>
                           <Stack spacing={0}>
-                            <Text fw={"bold"} fz={"xs"}>
+                            <Text lineClamp={1} fw={"bold"} fz={"xs"}>
                               {e.User.Profile.name}
                             </Text>
                             <Text>{e.message}</Text>
+                            <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>
@@ -82,10 +110,23 @@ export default function Colab_DetailGrupDiskusi({
                       <Group position="left">
                         <Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
                           <Stack spacing={0}>
-                            <Text fw={"bold"} fz={"xs"}>
+                            <Text lineClamp={1} fw={"bold"} fz={10}>
                               {e.User.Profile.name}
                             </Text>
                             <Text>{e.message}</Text>
+                            <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>
@@ -112,16 +153,18 @@ export default function Colab_DetailGrupDiskusi({
               <Textarea
                 minRows={1}
                 radius={"md"}
-                placeholder="Pesan..."
+                placeholder="Ketik pesan anda..."
                 value={pesan}
                 onChange={(val) => setPesan(val.currentTarget.value)}
               />
             </Grid.Col>
             <Grid.Col span={"content"}>
               <ActionIcon
-                variant="outline"
+                disabled={pesan === "" ? true : false}
+                variant="filled"
+                bg={"cyan"}
                 radius={"xl"}
-                size={"lg"}
+                size={"xl"}
                 onClick={() => {
                   onSend();
                 }}

src/app_modules/colab/detail/grup/layout.tsx

@@ -8,22 +8,39 @@ import {
   Footer,
   Grid,
   Group,
+  Header,
   Stack,
+  Text,
   TextInput,
   Textarea,
+  Title,
 } from "@mantine/core";
 import React, { useState } from "react";
 import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
-import { IconPlane, IconSend } from "@tabler/icons-react";
+import {
+  IconChevronLeft,
+  IconInfoSquareRounded,
+  IconPlane,
+  IconSend,
+} from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { gs_colab_pesan } from "../../global_state";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { useViewportSize } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 
 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>
@@ -38,11 +55,68 @@ export default function LayoutColab_DetailGrupDiskusi({
           top={0}
           h={50}
         >
-          <ComponentColab_HeaderTamplate title="Room Chat" bg={"gray.2"} />
+          {/* <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 p={"sm"} pos={"static"} h={"80vh"}>
+        <Box p={"sm"} pos={"static"}>
           <Box
             style={{
               height: 50,

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

@@ -0,0 +1,44 @@
+"use client";
+
+import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import { Box, Paper, Stack, Text, Title } from "@mantine/core";
+import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
+import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
+import ComponentColab_DetailData from "../../component/detail/detail_data";
+import ComponentColab_AuthorNameOnListPartisipan from "../../component/detail/header_author_list_partisipan";
+
+export default function Colab_DetailInfoGrup({
+  dataRoom,
+}: {
+  dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
+}) {
+  return (
+    <>
+      <AppComponentGlobal_LayoutTamplate
+        header={<ComponentColab_HeaderTamplate title="Info Grup" />}
+      >
+        {<InfoGroup dataRoom={dataRoom} />}
+      </AppComponentGlobal_LayoutTamplate>
+    </>
+  );
+}
+
+function InfoGroup({ dataRoom }: { dataRoom: MODEL_COLLABORATION_ROOM_CHAT }) {
+  return (
+    <>
+      <Stack px={"xs"}>
+        <ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
+        <Paper p={"xs"} withBorder>
+          <Stack>
+            <Title order={6}>Anggota Grup</Title>
+            {dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e,i) => (
+              <Box key={i}>
+                <ComponentColab_AuthorNameOnListPartisipan author={e.User} isPembatas={true} />
+              </Box>
+            ))}
+          </Stack>
+        </Paper>
+      </Stack>
+    </>
+  );
+}

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

@@ -3,22 +3,35 @@
 import prisma from "@/app/lib/prisma";
 
 export default async function colab_getListAnggotaByRoomId(roomId: string) {
-  const get = await prisma.projectCollaboration_RoomChat.findMany({
+  const get = await prisma.projectCollaboration_RoomChat.findFirst({
     where: {
       id: roomId,
     },
     select: {
       id: true,
       name: true,
-      ProjectCollaboration: true,
+      ProjectCollaboration: {
+        select: {
+          id: true,
+          isActive: true,
+          title: true,
+          lokasi: true,
+          purpose: true,
+          benefit: true,
+          createdAt: true,
+          ProjectCollaborationMaster_Industri: true,
+        },
+      },
       ProjectCollaboration_AnggotaRoomChat: {
         select: {
           User: {
             select: {
+              id: true,
               Profile: {
                 select: {
                   id: true,
                   name: true,
+                  imagesId: true
                 },
               },
             },

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

@@ -5,8 +5,9 @@ import prisma from "@/app/lib/prisma";
 export default async function colab_getMessageByRoomId(roomId: string) {
   const getList = await prisma.projectCollaboration_Message.findMany({
     orderBy: {
-      createdAt: "asc",
+      createdAt: "desc",
     },
+    take : 8,
     where: {
       projectCollaboration_RoomChatId: roomId,
     },

src/app_modules/colab/index.ts

@@ -23,6 +23,7 @@ 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";
+import Colab_DetailInfoGrup from "./detail/info_grup";
 
 export {
   Colab_Beranda,
@@ -50,4 +51,5 @@ export {
   Colab_NotifikasiView,
   Colab_DetailProyekSaya,
   LayoutColab_DetailProyekSaya,
+  Colab_DetailInfoGrup,
 };

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

@@ -29,6 +29,7 @@ export default function Colab_GrupDiskus({
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  const [idRoom, setIdRoom] = useState("");
 
   if (_.isEmpty(listRoom))
     return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
@@ -46,6 +47,7 @@ export default function Colab_GrupDiskus({
               router.push(
                 RouterColab.detail_grup + e?.ProjectCollaboration_RoomChat.id
               );
+              setIdRoom(e?.ProjectCollaboration_RoomChat.id);
               setLoading(true);
             }}
           >
@@ -66,7 +68,7 @@ export default function Colab_GrupDiskus({
               </Grid.Col>
               <Grid.Col span={"content"}>
                 <Center>
-                  {loading ? (
+                  {e?.ProjectCollaboration_RoomChat.id === idRoom ? (
                     <Loader color="gray" size={20} />
                   ) : (
                     <IconChevronRight color="gray" />

src/util/mqtt_client.ts

@@ -1,10 +1,10 @@
 import mqtt from "mqtt";
 
-// declare global {
+declare global {
-//   var mqtt_client: mqtt.MqttClient;
+  var mqtt_client: mqtt.MqttClient;
-// }
+}
 
-// const mqtt_client =
+const mqtt_client =
-//   globalThis.mqtt_client || mqtt.connect("wss://io.wibudev.com");
+  globalThis.mqtt_client || mqtt.connect("wss://io.wibudev.com");
 
-// export default mqtt_client;
+export default mqtt_client;

src/util/mqtt_loader.tsx

@@ -1,22 +1,20 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
-// import mqtt_client from "./mqtt_client";
+import mqtt_client from "./mqtt_client";
-// import { useAtom } from "jotai";
+import { useAtom } from "jotai";
-// import { gs_coba_chat } from "@/app/makuro/gs_coba";
+import { gs_coba_chat } from "@/app/makuro/gs_coba";
 
-// export default function MqttLoader() {
+export default function MqttLoader() {
-//   const [msg, setMsg] = useAtom(gs_coba_chat);
+  useEffect(() => {
-//   useEffect(() => {
+    mqtt_client.on("connect", () => {
-//     mqtt_client.on("connect", () => {
+      console.log("connected");
-//       console.log("connected");
+    //   mqtt_client.subscribe("server12");
-//       mqtt_client.subscribe("example_hipmi");
+    });
-//     });
 
-//     mqtt_client.on("message", (apa, message) => {
+    // mqtt_client.on("message", (apa) => {
-//       console.log(message.toLocaleString());
+    //   console.log("Ini yang di utils");
-//       setMsg(message.toLocaleString() as any);
+    // });
-//     });
+  }, []);
-//   }, [setMsg]);
+  return null;
-//   return null;
+}
-// }

yarn.lock

@@ -1468,6 +1468,13 @@ buffer@^6, buffer@^6.0.3:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
+bufferutil@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.8.tgz#1de6a71092d65d7766c4d8a522b261a6e787e8ea"
+  integrity sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==
+  dependencies:
+    node-gyp-build "^4.3.0"
+
 busboy@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
@@ -3287,6 +3294,11 @@ next@^13.5.4-canary.8:
     "@next/swc-win32-ia32-msvc" "13.5.6"
     "@next/swc-win32-x64-msvc" "13.5.6"
 
+node-gyp-build@^4.3.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.8.0.tgz#3fee9c1731df4581a3f9ead74664369ff00d26dd"
+  integrity sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==
+
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
@@ -4689,6 +4701,13 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+utf-8-validate@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-6.0.3.tgz#7d8c936d854e86b24d1d655f138ee27d2636d777"
+  integrity sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==
+  dependencies:
+    node-gyp-build "^4.3.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"