# Project Collaboration

## feat
- Tampilan beranda & detailnya
- Tampilan status & detailnya
- Tampilan partisipasi & detailnya
- Tampilan grup diskusi & detailnya
### No issue

package.json

@@ -48,6 +48,7 @@
     "lodash": "^4.17.21",
     "midtrans-client": "^1.3.1",
     "moment": "^2.29.4",
+    "mqtt": "^5.5.0",
     "next": "^13.5.4-canary.8",
     "postcss": "8.4.27",
     "react": "18.2.0",

src/app/dev/admin/forum/main/page.tsx

@@ -1,12 +1,23 @@
 import { AdminForum_Main } from "@/app_modules/admin/forum";
+import { adminForum_countLaporanKomentar } from "@/app_modules/admin/forum/fun/count/fun_count_laporan_komentar";
+import { adminForum_countLaporanPosting } from "@/app_modules/admin/forum/fun/count/fun_count_laporan_posting";
+import { adminForum_countPublish } from "@/app_modules/admin/forum/fun/count/fun_count_publish";
 
 export default async function Page() {
 //   await new Promise((a, b) => {
 //     setTimeout(a, 4000);
 //   });
+  const countPublish = await adminForum_countPublish();
+  const countLaporanPosting = await adminForum_countLaporanPosting()
+   const countLaporanKomentar = await adminForum_countLaporanKomentar();
+
   return (
     <>
-      <AdminForum_Main />
+      <AdminForum_Main
+        countPublish={countPublish}
+        countLaporanPosting={countLaporanPosting}
+        countLaporanKomentar={countLaporanKomentar}
+      />
     </>
   );
 }

src/app/dev/colab/create/layout.tsx

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

src/app/dev/colab/create/page.tsx

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { Colab_MainDetail } from "@/app_modules/colab";
+import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let colabId = params.id
+  const userLoginId = await User_getUserId()
+
+  return (
+    <>
+      <Colab_MainDetail />
+    </>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { LayoutColab_DetailPartisipasiProyek } from "@/app_modules/colab";
+
+export default async function Layout({ children }: { children: any }) {
+  return (
+    <>
+      <LayoutColab_DetailPartisipasiProyek>{children}</LayoutColab_DetailPartisipasiProyek>
+    </>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/dev/colab/edit/[id]/layout.tsx

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

src/app/dev/colab/edit/[id]/page.tsx

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

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

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

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

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

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

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

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

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

src/app/dev/colab/main/layout.tsx

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

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

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

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

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

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

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

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

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

src/app/dev/colab/splash/page.tsx

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

src/app/dev/forum/main/page.tsx

@@ -1,3 +1,4 @@
+
 import { Forum_Beranda } from "@/app_modules/forum";
 import { forum_getListAllPosting } from "@/app_modules/forum/fun/get/get_list_all_posting";
 import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
@@ -7,7 +8,10 @@ export default async function Page() {
   const userLoginId = await User_getUserId();
   return (
     <>
-      <Forum_Beranda listForum={listForum as any} userLoginId={userLoginId} />
+      <Forum_Beranda
+        listForum={listForum as any}
+        userLoginId={userLoginId}
+      />
     </>
   );
 }

src/app/dev/forum/proyek/layout.tsx

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

src/app/dev/forum/proyek/page.tsx

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

src/app/layout.tsx

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

src/app/lib/router_hipmi/router_colab.ts

@@ -0,0 +1,24 @@
+export const RouterColab = {
+  //splash
+  splash: "/dev/colab/splash",
+
+  //main
+  beranda: "/dev/colab/main/beranda",
+  status: "/dev/colab/main/status",
+  proyek: "/dev/colab/main/proyek",
+  grup_diskusi: "/dev/colab/main/grup",
+
+  // create
+  create: "/dev/colab/create",
+  edit: "/dev/colab/edit/",
+
+  //detail
+  main_detail: "/dev/colab/detail/main_detail/",
+  status_review: "/dev/colab/detail/status/review/",
+  status_reject: "/dev/colab/detail/status/reject/",
+  status_publish: "/dev/colab/detail/status/publish/",
+  partisipasi_proyek: "/dev/colab/detail/proyek/partisipasi/",
+  detail_grup: "/dev/colab/detail/grup/",
+
+  // proyek
+};

src/app/makuro/gs_coba.ts

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

src/app/makuro/page.tsx

@@ -1,8 +1,58 @@
-import { Text } from "@mantine/core";
+"use client";
+
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
 import ViewMakuro from "./_server/makuro_view";
+import mqtt_client from "@/util/mqtt_client";
+import { useState } from "react";
+import { useAtom } from "jotai";
+import { gs_coba_chat } from "./gs_coba";
 
 export default function Page() {
-    return <>
-        <ViewMakuro />
+  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 /> */}
     </>
-}
+  );
+}

src/app_modules/admin/forum/fun/count/fun_count_laporan_komentar.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function adminForum_countLaporanKomentar() {
+  const count = await prisma.forum_ReportKomentar.count({
+    where: {
+      isActive: true,
+    },
+  });
+
+  return count;
+}

src/app_modules/admin/forum/fun/count/fun_count_laporan_posting.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function adminForum_countLaporanPosting() {
+  const count = await prisma.forum_ReportPosting.count({
+    where: {
+      isActive: true,
+    },
+  });
+
+  return count;
+}

src/app_modules/admin/forum/fun/count/fun_count_publish.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function adminForum_countPublish() {
+  const count = await prisma.forum_Posting.count({
+    where: {
+      isActive: true,
+    },
+  });
+
+  return count;
+}

src/app_modules/admin/forum/main/index.tsx

@@ -4,36 +4,56 @@ import { Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import ComponentAdminGlobal_HeaderTamplate from "../../component/header_tamplate";
 import ComponentAdminGlobal_LoadingPage from "../../component/loading_admin_page";
 
-export default function AdminForum_Main() {
+export default function AdminForum_Main({
+  countPublish,
+  countLaporanPosting,
+  countLaporanKomentar,
+}: {
+  countPublish: number;
+  countLaporanPosting: number;
+  countLaporanKomentar: number;
+}) {
   return (
     <>
       <Stack>
         <ComponentAdminGlobal_HeaderTamplate name="Forum" />
-        <ForumMain />
+        <ForumMain
+          countPublish={countPublish}
+          countLaporanPosting={countLaporanPosting}
+          countLaporanKomentar={countLaporanKomentar}
+        />
       </Stack>
       {/* <ComponentGlobalAdmin_LoadingPage /> */}
     </>
   );
 }
 
-function ForumMain() {
+function ForumMain({
+  countPublish,
+  countLaporanPosting,
+  countLaporanKomentar,
+}: {
+  countPublish: number;
+  countLaporanPosting: number;
+  countLaporanKomentar: number;
+}) {
   const listBox = [
     {
       id: 1,
       name: "Publish",
-      jumlah: 0,
+      jumlah: countPublish,
       color: "green",
     },
     {
       id: 2,
       name: "Laporan Posting",
-      jumlah: 0,
+      jumlah: countLaporanPosting,
       color: "orange",
     },
     {
       id: 3,
       name: "Laporan Komentar",
-      jumlah: 0,
+      jumlah: countLaporanKomentar,
       color: "red",
     },
   ];

src/app_modules/admin/list_page.tsx

@@ -159,16 +159,16 @@ export const listAdminPage = [
         name: "Table Posting",
         path: RouterAdminForum.publish,
       },
-      {
-        id: 73,
-        name: "Laporan Posting",
-        path: RouterAdminForum.report_posting,
-      },
-      {
-        id: 74,
-        name: "Laporan Komentar",
-        path: RouterAdminForum.report_komentar,
-      },
+      // {
+      //   id: 73,
+      //   name: "Laporan Posting",
+      //   path: RouterAdminForum.report_posting,
+      // },
+      // {
+      //   id: 74,
+      //   name: "Laporan Komentar",
+      //   path: RouterAdminForum.report_komentar,
+      // },
     ],
   },
 ];

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

@@ -0,0 +1,82 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { Card, Center, Title, Stack, Grid, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentColab_CardSectionData({
+  colabId,
+  path,
+}: {
+  colabId?: any;
+  path?: any;
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Card.Section
+        px={"md"}
+        onClick={() => {
+          if (path) {
+            router.push(path + colabId);
+          } else {
+            ComponentGlobal_NotifikasiPeringatan("Path tidak ditemukan");
+          }
+        }}
+      >
+        <Center px={"md"} mb={"lg"}>
+          <Title order={5} lineClamp={1}>
+            Judul Proyek{" "}
+          </Title>
+        </Center>
+        <Stack spacing={"xs"}>
+          <Grid>
+            <Grid.Col span={2}>
+              <Text fw={"bold"} fz={"xs"}>
+                Industri
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <Text fz={"xs"}>:</Text>
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text fz={"xs"}>Industri</Text>
+            </Grid.Col>
+          </Grid>
+
+          <Grid>
+            <Grid.Col span={2}>
+              <Text fw={"bold"} fz={"xs"}>
+                Lokasi
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <Text fz={"xs"}>:</Text>
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text fz={"xs"} lineClamp={1}>
+                Lokasi dari proyek{" "}
+              </Text>
+            </Grid.Col>
+          </Grid>
+
+          <Stack spacing={5}>
+            <Text fw={"bold"} fz={"xs"}>
+              Tujuan proyek
+            </Text>
+            <Text lineClamp={3} fz={"xs"}>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
+              repudiandae nostrum temporibus velit possimus, voluptate inventore
+              recusandae hic ipsa praesentium deserunt, fuga asperiores
+              doloremque amet incidunt explicabo ea eius earum.
+            </Text>
+          </Stack>
+        </Stack>
+      </Card.Section>
+    </>
+  );
+}

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

@@ -0,0 +1,76 @@
+"use client";
+
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { Avatar, Card, Divider, Grid, Stack, Text } from "@mantine/core";
+import ComponentColab_AuthorNameOnHeader from "../header_author_name";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { useRouter } from "next/navigation";
+
+export default function ComponentColab_CardSectionHeaderAuthorName({
+  profileId,
+  imagesId,
+  authorName,
+  tglPublish,
+  isPembatas,
+  jumlah_partisipan,
+}: {
+  profileId?: string;
+  imagesId?: string;
+  authorName?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+  jumlah_partisipan?: number;
+}) {
+  const router = useRouter();
+
+  return (
+    <>
+      <Card.Section px={"md"} pb={"md"}>
+        <Stack spacing={"xs"}>
+          <Grid>
+            <Grid.Col
+              span={"content"}
+              onClick={() => {
+                if (profileId) {
+                  router.push(RouterProfile.katalog + profileId);
+                } else {
+                  ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+                }
+              }}
+            >
+              <Avatar
+                size={30}
+                sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+                radius={"xl"}
+                bg={"gray.1"}
+                src={
+                  imagesId
+                    ? RouterProfile.api_foto_profile + imagesId
+                    : "/aset/global/avatar.png"
+                }
+              />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Stack justify="center" h={"100%"}>
+                <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                  {authorName ? authorName : "Nama author"}
+                </Text>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={"content"}>
+              <Stack justify="center" h={"100%"}>
+                <Text c={"gray"} fz={"xs"}>
+                  {jumlah_partisipan
+                    ? jumlah_partisipan + " " + "partisipan"
+                    : 0 + " " + "partisipan"}
+                </Text>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+          {isPembatas ? <Divider /> : ""}
+        </Stack>
+      </Card.Section>
+    </>
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Stack, Divider, Center, Text, Grid } from "@mantine/core";
+import { IconUsersGroup } from "@tabler/icons-react";
+
+export default function ComponentColab_JumlahPartisipan() {
+  return (
+    <>
+      <Stack>
+        <Divider />
+        <Center>
+          <Grid >
+            <Grid.Col span={"content"}>
+              <Text c={"gray"} fz={"xs"} fw={"bold"}>
+                12
+              </Text>
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Text c={"gray"} fz={"xs"} fw={"bold"}>
+                Partisipan
+              </Text>
+            </Grid.Col>
+          </Grid>
+        </Center>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+"use client";
+
+import { Center, Button } from "@mantine/core";
+import { useState } from "react";
+
+export default function ComponentColab_ButtonPartisipasi() {
+  const [apply, setApply] = useState(false);
+  return (
+    <>
+      <Center>
+        <Button
+          radius={"xl"}
+          color={apply ? "green" : "blue"}
+          onClick={() => {
+            setApply(true);
+          }}
+        >
+          {apply ? "Telah Berpartisipasi" : "Partisipasi"}
+        </Button>
+      </Center>
+    </>
+  );
+}

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

@@ -0,0 +1,72 @@
+"use client"
+
+import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
+import ComponentColab_AuthorNameOnHeader from "../header_author_name";
+
+export default function ComponentColab_DetailData() {
+  return (
+    <>
+      <Stack>
+        <Box>
+          <Center px={"md"} mb={"lg"} >
+            <Title order={4}>Judul Proyek </Title>
+          </Center>
+          <Stack spacing={"sm"}>
+            <Grid>
+              <Grid.Col span={2}>
+                <Text fw={"bold"} fz={"sm"}>
+                  Industri
+                </Text>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <Text fz={"sm"}>:</Text>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text fz={"sm"}>Industri</Text>
+              </Grid.Col>
+            </Grid>
+
+            <Grid>
+              <Grid.Col span={2}>
+                <Text fw={"bold"} fz={"sm"}>
+                  Lokasi
+                </Text>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <Text fz={"sm"}>:</Text>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text fz={"sm"} lineClamp={1}>
+                  Lokasi dari proyek{" "}
+                </Text>
+              </Grid.Col>
+            </Grid>
+
+            <Stack spacing={5}>
+              <Text fw={"bold"} fz={"sm"}>
+                Tujuan proyek
+              </Text>
+              <Text fz={"sm"}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
+                repudiandae nostrum temporibus velit possimus, voluptate
+                inventore recusandae hic ipsa praesentium deserunt, fuga
+                asperiores doloremque amet incidunt explicabo ea eius earum.
+              </Text>
+            </Stack>
+            <Stack spacing={5}>
+              <Text fw={"bold"} fz={"sm"}>
+                Keutungan
+              </Text>
+              <Text fz={"sm"}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
+                repudiandae nostrum temporibus velit possimus, voluptate
+                inventore recusandae hic ipsa praesentium deserunt, fuga
+                asperiores doloremque amet incidunt explicabo ea eius earum.
+              </Text>
+            </Stack>
+          </Stack>
+        </Box>
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client"
+
+import { Paper, Center, Title, ScrollArea, Box, Stack } from "@mantine/core";
+import ComponentColab_AuthorNameOnHeader from "../header_author_name";
+
+export default function ComponentColab_DetailListPartisipasiUser() {
+  return (
+    <>
+      <Paper withBorder p={"md"}>
+        <Center mb={"xl"}>
+          <Title order={4}>Partispasi User (12)</Title>
+        </Center>{" "}
+        <ScrollArea h={400}>
+          <Box h={400}>
+            <Stack>
+              {Array(10)
+                .fill(0)
+                .map((e, i) => (
+                  <Box key={i}>
+                    <ComponentColab_AuthorNameOnHeader isPembatas={true} />
+                  </Box>
+                ))}
+            </Stack>
+          </Box>
+        </ScrollArea>
+      </Paper>
+    </>
+  );
+}

src/app_modules/colab/component/header_author_name.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import moment from "moment";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+
+export default function ComponentColab_AuthorNameOnHeader({
+  profileId,
+  imagesId,
+  authorName,
+  tglPublish,
+  isPembatas,
+}: {
+  profileId?: string;
+  imagesId?: string;
+  authorName?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (profileId) {
+                router.push(RouterProfile.katalog + profileId);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            <Avatar
+              size={30}
+              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+              radius={"xl"}
+              bg={"gray.1"}
+              src={
+                imagesId
+                  ? RouterProfile.api_foto_profile + imagesId
+                  : "/aset/global/avatar.png"
+              }
+            />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack justify="center" h={"100%"}>
+              <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                {authorName ? authorName : "Nama author"}
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+            <Stack justify="center" h={"100%"}>
+              {tglPublish ? (
+                <Text c={"gray"} fz={"xs"}>
+                  {new Intl.DateTimeFormat("id-ID").format(tglPublish)}
+                </Text>
+              ) : (
+                ""
+              )}
+            </Stack>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

src/app_modules/colab/component/header_tamplate.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import {
+  Header,
+  Group,
+  ActionIcon,
+  Text,
+  Title,
+  Center,
+  Loader,
+} from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentColab_HeaderTamplate({
+  hideBack,
+  changeIconBack,
+  route,
+  route2,
+  title,
+  icon,
+  bg,
+}: {
+  hideBack?: boolean;
+  changeIconBack?: any;
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+  bg?: any;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  if (loading) return <ComponentGlobal_V2_LoadingPage />;
+
+  return (
+    <>
+      <Header
+        height={50}
+        sx={{ borderStyle: "none" }}
+        bg={bg === null ? "" : bg}
+      >
+        <Group h={50} position="apart" px={"md"}>
+          {hideBack ? (
+            <ActionIcon variant="transparent" disabled></ActionIcon>
+          ) : (
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                setLoading(true);
+                if (route === null || route === undefined) {
+                  return router.back();
+                } else {
+                  return router.push(route);
+                }
+              }}
+            >
+              {changeIconBack ? changeIconBack : <IconChevronLeft />}
+            </ActionIcon>
+          )}
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => router.push(route2)}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/colab/component/noted_box.tsx

@@ -0,0 +1,22 @@
+import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
+
+export default function ComponentColab_NotedBox({
+  informasi,
+}: {
+  informasi: string;
+}) {
+  return (
+    <>
+      <Paper bg={"blue.3"} p={10}>
+        <Group>
+          <Text fz={10} fs={"italic"}>
+            <Text span inherit c={"red"}>
+              *{" "}
+            </Text>
+            {informasi}
+          </Text>
+        </Group>
+      </Paper>
+    </>
+  );
+}

src/app_modules/colab/create/index.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Colab_Create() {
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput
+          label="Judul"
+          withAsterisk
+          placeholder="Masukan judul proyek"
+        />
+
+        <TextInput
+          label="Lokasi"
+          withAsterisk
+          placeholder="Masukan lokasi proyek"
+        />
+
+        <Select
+          placeholder="Pilih kategori industri"
+          label="Pilih Industri"
+          withAsterisk
+          data={[
+            { value: "1", label: "Teknologi" },
+            { value: "2", label: "Tambang Batu Bara" },
+          ]}
+        />
+
+        <Textarea
+          label="Tujuan Proyek"
+          placeholder="Masukan tujuan proyek"
+          withAsterisk
+          minRows={5}
+        />
+
+        <Textarea
+          label="Keuntungan "
+          placeholder="Masukan keuntungan dalam proyek"
+          withAsterisk
+          minRows={5}
+        />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onSave() {
+    setLoading(true);
+    router.back();
+  }
+
+  return (
+    <>
+      <Button
+        loaderPosition="center"
+        loading={loading ? true : false}
+        mt={"xl"}
+        radius={"xl"}
+        onClick={() => onSave()}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}

src/app_modules/colab/create/layout.tsx

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

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

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  ActionIcon,
+  Affix,
+  Box,
+  Button,
+  Grid,
+  ScrollArea,
+  Stack,
+  TextInput,
+  Textarea,
+  Transition,
+  rem,
+} from "@mantine/core";
+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";
+
+export default function Colab_DetailGrupDiskusi() {
+  const [pesan, setPesan] = useState("");
+  const [obrolan, setObrolan] = useState<string[]>([]);
+  const [scroll, scrollTo] = useWindowScroll();
+
+  async function onSend() {
+    // setObrolan(pesan); 
+    setPesan("")
+  }
+
+  return (
+    <>
+      <ScrollArea>{obrolan}</ScrollArea>
+
+      <Affix position={{ bottom: rem(10) }} w={"100%"}>
+        <Stack justify="center" h={"100%"} px={"sm"}>
+          <Grid align="center">
+            <Grid.Col span={"auto"}>
+              <Textarea
+                minRows={1}
+                radius={"md"}
+                placeholder="Pesan..."
+                value={pesan}
+                onChange={(val) => setPesan(val.currentTarget.value)}
+              />
+            </Grid.Col>
+            <Grid.Col span={"content"}>
+              <ActionIcon
+                variant="outline"
+                radius={"xl"}
+                size={"lg"}
+                onClick={() => {
+                  onSend();
+                }}
+              >
+                <IconSend size={20} />
+              </ActionIcon>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Affix>
+    </>
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Center,
+  Footer,
+  Grid,
+  Group,
+  Stack,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import React, { useState } from "react";
+import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
+import { IconPlane, IconSend } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { gs_colab_pesan } from "../../global_state";
+
+export default function LayoutColab_DetailGrupDiskusi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [pesan, setPesan] = useState("");
+
+  async function onSend() {
+    console.log(pesan);
+  }
+  return (
+    <>
+      <AppShell
+        header={<ComponentColab_HeaderTamplate title="Nama Grup Diskusi" />}
+        // footer={
+        //   <Footer height={60}>
+        //     <Stack justify="center" h={"100%"} px={"sm"}>
+        //       <Grid align="center">
+        //         <Grid.Col span={"auto"}>
+        //           <Textarea
+        //             minRows={1}
+        //             radius={"md"}
+        //             placeholder="Pesan..."
+        //             onChange={(val) => setPesan(val.currentTarget.value)}
+        //           />
+        //         </Grid.Col>
+        //         <Grid.Col span={"content"}>
+        //           <ActionIcon
+        //             variant="outline"
+        //             radius={"xl"}
+        //             size={"lg"}
+        //             onClick={() => onSend()}
+        //           >
+        //             <IconSend size={20} />
+        //           </ActionIcon>
+        //         </Grid.Col>
+        //       </Grid>
+        //     </Stack>
+        //   </Footer>
+        // }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  Box,
+  Button,
+  Center,
+  Grid,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
+import { useState } from "react";
+import ComponentColab_ButtonPartisipasi from "../../component/detail/button_partisipasi";
+import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
+import ComponentColab_DetailData from "../../component/detail/detail_data";
+
+export default function Colab_MainDetail() {
+  return (
+    <>
+      <Stack px={5} spacing={"lg"}>
+        <ComponentColab_AuthorNameOnHeader tglPublish={new Date}/>
+        <ComponentColab_DetailData />
+        <ComponentColab_ButtonPartisipasi />
+        <ComponentColab_DetailListPartisipasiUser />
+      </Stack>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,18 @@
+"use client";
+
+import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
+import ComponentColab_DetailListPartisipasiUser from "@/app_modules/colab/component/detail/list_partisipasi_user";
+import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
+import { Stack, Text } from "@mantine/core";
+
+export default function Colab_DetailPartisipasiProyek() {
+  return (
+    <>
+      <Stack px={5} spacing={"xl"}>
+        <ComponentColab_AuthorNameOnHeader />
+        <ComponentColab_DetailData />
+        <ComponentColab_DetailListPartisipasiUser />
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+
+export default function LayoutColab_DetailPartisipasiProyek({
+  children,
+}: {
+  children: any;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentColab_HeaderTamplate title="Detail Partisipan"/>}>{children}</AppShell>
+    </>
+  );
+}

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

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

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

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

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

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

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

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

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

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

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

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

src/app_modules/colab/edit/index.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { Stack, TextInput, Select, Textarea, Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Colab_Edit() {
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput
+          label="Judul"
+          withAsterisk
+          placeholder="Masukan judul proyek"
+        />
+
+        <TextInput
+          label="Lokasi"
+          withAsterisk
+          placeholder="Masukan lokasi proyek"
+        />
+
+        <Select
+          placeholder="Pilih kategori industri"
+          label="Pilih Industri"
+          withAsterisk
+          data={[
+            { value: "1", label: "Teknologi" },
+            { value: "2", label: "Tambang Batu Bara" },
+          ]}
+        />
+
+        <Textarea
+          label="Tujuan Proyek"
+          placeholder="Masukan tujuan proyek"
+          withAsterisk
+          minRows={5}
+        />
+
+        <Textarea
+          label="Keuntungan "
+          placeholder="Masukan keuntungan dalam proyek"
+          withAsterisk
+          minRows={5}
+        />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onUpdate() {
+    setLoading(true);
+    router.back();
+  }
+
+  return (
+    <>
+      <Button
+        loaderPosition="center"
+        loading={loading ? true : false}
+        mt={"xl"}
+        radius={"xl"}
+        onClick={() => onUpdate()}
+      >
+        Update
+      </Button>
+    </>
+  );
+}

src/app_modules/colab/edit/layout.tsx

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

src/app_modules/colab/global_state/index.tsx

@@ -0,0 +1,18 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_colab_hot_menu = atomWithStorage<number>(
+  "gs_colab_hot_menu",
+  1
+);
+export const gs_colab_status = atomWithStorage<string | any>(
+  "gs_colab_status",
+  "Publish"
+);
+export const gs_colab_proyek = atomWithStorage<string | any>(
+  "gs_colab_proyek",
+  "Partisipasi"
+);
+export const gs_colab_pesan = atomWithStorage<string | any>(
+  "gs_colab_pesan",
+  ""
+);

src/app_modules/colab/index.ts

@@ -0,0 +1,47 @@
+import Colab_Beranda from "./main/beranda";
+import LayoutColab_Main from "./main/layout";
+import Colab_Splash from "./splash";
+import Colab_Create from "./create";
+import LayoutColab_Create from "./create/layout";
+import Colab_Status from "./main/status";
+import Colab_MainDetail from "./detail/main_detail";
+import LayoutColab_MainDetail from "./detail/main_detail/layout";
+import Colab_DetailStatusReview from "./detail/status/review";
+import LayoutColab_DetailStatusReview from "./detail/status/review/layout";
+import Colab_DetailStatusReject from "./detail/status/reject";
+import LayoutColab_DetailStatusReject from "./detail/status/reject/layout";
+import Colab_Proyek from "./main/proyek";
+import Colab_DetailStatusPublish from "./detail/status/publish";
+import LayoutColab_DetailStatusPublish from "./detail/status/publish/layout";
+import Colab_Edit from "./edit";
+import LayoutColab_Edit from "./edit/layout";
+import Colab_DetailPartisipasiProyek from "./detail/proyek/partisipasi";
+import LayoutColab_DetailPartisipasiProyek from "./detail/proyek/partisipasi/layout";
+import Colab_GrupDiskus from "./main/grup";
+import Colab_DetailGrupDiskusi from "./detail/grup";
+import LayoutColab_DetailGrupDiskusi from "./detail/grup/layout";
+
+export {
+  Colab_Beranda,
+  LayoutColab_Main,
+  Colab_Splash,
+  Colab_Create,
+  LayoutColab_Create,
+  Colab_Status,
+  Colab_MainDetail,
+  LayoutColab_MainDetail,
+  Colab_DetailStatusReview,
+  LayoutColab_DetailStatusReview,
+  Colab_DetailStatusReject,
+  LayoutColab_DetailStatusReject,
+  Colab_Proyek,
+  Colab_DetailStatusPublish,
+  LayoutColab_DetailStatusPublish,
+  Colab_Edit,
+  LayoutColab_Edit,
+  Colab_DetailPartisipasiProyek,
+  LayoutColab_DetailPartisipasiProyek,
+  Colab_GrupDiskus,
+  Colab_DetailGrupDiskusi,
+  LayoutColab_DetailGrupDiskusi,
+};

src/app_modules/colab/main/beranda.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  ActionIcon,
+  Affix,
+  Card,
+  Center,
+  Grid,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+  Title,
+  rem,
+} from "@mantine/core";
+import { useWindowScroll } from "@mantine/hooks";
+import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentColab_CardSectionData from "../component/card_view/card_section_data";
+import ComponentColab_SectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
+
+export default function Colab_Beranda() {
+  const router = useRouter();
+  const [scroll, scrollTo] = useWindowScroll();
+  const [loadingCreate, setLoadingCreate] = useState(false);
+
+  return (
+    <>
+      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ActionIcon
+          loading={loadingCreate ? true : false}
+          opacity={scroll.y > 0 ? 0.5 : ""}
+          style={{
+            transition: "0.5s",
+          }}
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          bg={"blue"}
+          onClick={() => {
+            setLoadingCreate(true);
+            router.push(RouterColab.create);
+          }}
+        >
+          <IconPencilPlus color="white" />
+        </ActionIcon>
+      </Affix>
+
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card key={i} withBorder shadow="lg" mb={"lg"} radius={"md"}>
+            <ComponentColab_CardSectionHeaderAuthorName tglPublish={new Date} jumlah_partisipan={12} />
+            <ComponentColab_CardSectionData
+              colabId={i}
+              path={RouterColab.main_detail}
+            />
+          </Card>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Center, Grid, Group, Paper, Stack, Text, Title } 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";
+
+export default function Colab_GrupDiskus() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        {Array(10)
+          .fill(0)
+          .map((e, i) => (
+            <Paper
+              key={i}
+              withBorder
+              shadow="lg"
+              p={"md"}
+              onClick={() => {
+                router.push(RouterColab.detail_grup + i);
+              }}
+            >
+              <Grid align="center" h={"100%"}>
+                <Grid.Col span={"auto"}>
+                  <Title order={6}>Nama Grup Diskusi</Title>
+                </Grid.Col>
+                <Grid.Col span={"content"}>
+                  <Center>
+                    <IconChevronRight color="gray" />
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/colab/main/layout.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Center,
+  Footer,
+  Grid,
+  Stack,
+  Text,
+} from "@mantine/core";
+import React, { useState } from "react";
+import ComponentColab_HeaderTamplate from "../component/header_tamplate";
+import router from "next/router";
+import {
+  IconHistory,
+  IconHome,
+  IconMessages,
+  IconReservedLine,
+  IconUsersGroup,
+} from "@tabler/icons-react";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { gs_colab_hot_menu } from "../global_state";
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+
+export default function LayoutColab_Main({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
+  const [loading, setLoading] = useState(false);
+
+  const listFooter = [
+    {
+      id: 1,
+      name: "Beranda",
+      path: RouterColab.beranda,
+      icon: <IconHome />,
+    },
+
+    {
+      id: 2,
+      name: "Status",
+      path: RouterColab.status,
+      icon: <IconReservedLine />,
+    },
+
+    {
+      id: 3,
+      name: "Partisipasi",
+      path: RouterColab.proyek,
+      icon: <IconUsersGroup />,
+    },
+
+    {
+      id: 4,
+      name: "Grup Diskusi",
+      path: RouterColab.grup_diskusi,
+      icon: <IconMessages />,
+    },
+  ];
+
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentColab_HeaderTamplate
+            title="Project Collaboration"
+            route={RouterHome.main_home}
+            // icon={<IconUsersGroup />}
+            // route2={RouterColab.proyek}
+          />
+        }
+        footer={
+          <Footer height={70} bg={"dark"}>
+            <Grid>
+              {listFooter.map((e) => (
+                <Grid.Col
+                  key={e.id}
+                  span={"auto"}
+                  pt={"md"}
+                  onClick={() => {
+                    router.replace(e.path);
+                    setHotMenu(e.id);
+                  }}
+                >
+                  <Center>
+                    <Stack align="center" spacing={0}>
+                      <ActionIcon
+                        variant="transparent"
+                        c={hotMenu === e.id ? "blue" : "white"}
+                      >
+                        {e.icon}
+                      </ActionIcon>
+                      <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+                        {e.name}
+                      </Text>
+                    </Stack>
+                  </Center>
+                </Grid.Col>
+              ))}
+            </Grid>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+"use client";
+
+import { Stack, Tabs, Text } from "@mantine/core";
+import { IconBrandOffice, IconUsersGroup, IconUser } from "@tabler/icons-react";
+import { useState } from "react";
+import Colab_ProyekSaya from "./saya";
+import Colab_PartisipasiProyek from "./partisipasi";
+import { useAtom } from "jotai";
+import { gs_colab_proyek } from "../../global_state";
+
+export default function Colab_Proyek() {
+  const [activeTab, setActiveTab] = useAtom(gs_colab_proyek);
+
+  const listTabs = [
+    {
+      id: 1,
+      icon: <IconUsersGroup />,
+      label: "Partisipasi Proyek",
+      value: "Partisipasi",
+      path: <Colab_PartisipasiProyek />,
+    },
+    {
+      id: 2,
+      icon: <IconUser />,
+      label: "Proyek Saya",
+      value: "Saya",
+      path: <Colab_ProyekSaya />,
+    },
+  ];
+
+  return (
+    <Tabs variant="pills" value={activeTab} onTabChange={setActiveTab}>
+      <Stack>
+        <Tabs.List grow>
+          {listTabs.map((e) => (
+            <Tabs.Tab
+              key={e.id}
+              value={e.value}
+              bg={activeTab === e.value ? "blue" : "gray.2"}
+              fw={activeTab === e.value ? "bold" : "normal"}
+            >
+              <Stack align="center" justify="center" spacing={0}>
+                {e.icon}
+                <Text>{e.label}</Text>
+              </Stack>
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+
+        {listTabs.map((e) => (
+          <Tabs.Panel key={e.id} value={e.value}>
+            {e.path}
+          </Tabs.Panel>
+        ))}
+      </Stack>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { Card } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
+
+export default function Colab_PartisipasiProyek() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            style={{ borderColor: "indigo", borderWidth: "0.5px" }}
+          >
+            <ComponentColab_CardSectionHeaderAuthorName
+              tglPublish={new Date()}
+              jumlah_partisipan={12}
+            />
+            <ComponentColab_CardSectionData
+              colabId={i}
+              path={RouterColab.partisipasi_proyek}
+            />
+          </Card>
+        ))}
+    </>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,37 @@
+"use client";
+
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { Card, Stack, Grid, Text, Divider, Center, Box } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
+import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentColab_JumlahPartisipan from "../../component/card_view/jumlah_partisipan";
+
+export default function Colab_StatusPublish() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            // bg={"green.0.5"}
+            style={{ borderColor: "green", borderWidth: "0.5px" }}
+          >
+            <Stack>
+              <ComponentColab_CardSectionData
+                colabId={i}
+                path={RouterColab.status_publish}
+              />
+              <ComponentColab_JumlahPartisipan/>
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+}

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

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

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

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

src/app_modules/colab/splash/index.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { Center, Image, Paper } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_colab_hot_menu } from "../global_state";
+
+export default function Colab_Splash() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
+
+  useShallowEffect(() => {
+    setTimeout(() => {
+      setHotMenu(1);
+      // setStatus("Publish");
+      router.replace(RouterColab.beranda);
+    }, 2000);
+  }, []);
+
+  return (
+    <>
+      <Center h={"100vh"}>
+        <Paper p={{ base: 50, md: 60, lg: 80 }}>
+          <Image alt="logo" src={"/aset/colab/logo.png"} />
+        </Paper>
+      </Center>
+    </>
+  );
+}

src/app_modules/home/view.tsx

@@ -40,6 +40,7 @@ import { useState } from "react";
 import { useDisclosure } from "@mantine/hooks";
 import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
 import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 
 export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
   const router = useRouter();
@@ -77,7 +78,7 @@ export default function HomeView({ dataUser }: { dataUser: MODEL_USER }) {
       id: 5,
       name: "Project Collaboration",
       icon: <IconAffiliate size={50} />,
-      link: "",
+      link: RouterColab.splash,
     },
     {
       id: 6,

src/util/mqtt_client.ts

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

src/util/mqtt_loader.tsx

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

yarn.lock

@@ -53,6 +53,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.8", "@babel/runtime@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/types@^7.22.15":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
@@ -1043,6 +1050,14 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/readable-stream@^4.0.0", "@types/readable-stream@^4.0.5":
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-4.0.11.tgz#684f1e947c90cb6a8ad3904523d650bb66cdbb84"
+  integrity sha512-R3eUMUTTKoIoaz7UpYLxvZCrOmCRPRbAmoDDHKcimTEySltaJhF8hLzj4+EzyDifiX5eK6oDQGSfmNnXjxZzYQ==
+  dependencies:
+    "@types/node" "*"
+    safe-buffer "~5.1.1"
+
 "@types/scheduler@*":
   version "0.16.8"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
@@ -1075,6 +1090,13 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
   integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
 
+"@types/ws@^8.5.9":
+  version "8.5.10"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787"
+  integrity sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==
+  dependencies:
+    "@types/node" "*"
+
 "@typescript-eslint/parser@^5.42.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
@@ -1119,6 +1141,13 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -1379,6 +1408,16 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+bl@^6.0.8:
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-6.0.12.tgz#77c35b96e13aeff028496c798b75389ddee9c7f8"
+  integrity sha512-EnEYHilP93oaOa2MnmNEjAcovPS3JlQZOyzGXi3EyEpPhm9qWvdDp7BmAVEVusGzp8LlwQK56Av+OkDoRjzE0w==
+  dependencies:
+    "@types/readable-stream" "^4.0.0"
+    buffer "^6.0.3"
+    inherits "^2.0.4"
+    readable-stream "^4.2.0"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1411,12 +1450,17 @@ browserslist@^4.21.5:
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
 
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 buffer-from@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-0.1.2.tgz#15f4b9bcef012044df31142c14333caf6e0260d0"
   integrity sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==
 
-buffer@^6:
+buffer@^6, buffer@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
@@ -1548,11 +1592,26 @@ commander@^4.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commist@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/commist/-/commist-3.2.0.tgz#da9c8e5f245ac21510badc4b10c46b5bcc9b56cd"
+  integrity sha512-4PIMoPniho+LqXmpS5d3NuGYncG6XWlkBSVGiWycL22dd42OYdUGil2CWuzklaJoNxyxUSpO4MKIBU94viWNAw==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+concat-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
 convert-source-map@^1.5.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -2193,11 +2252,21 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
 eventemitter3@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
   integrity sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==
 
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 extend@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -2234,6 +2303,14 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-unique-numbers@^8.0.13:
+  version "8.0.13"
+  resolved "https://registry.yarnpkg.com/fast-unique-numbers/-/fast-unique-numbers-8.0.13.tgz#3c87232061ff5f408a216e1f0121232f76f695d7"
+  integrity sha512-7OnTFAVPefgw2eBJ1xj2PGGR9FwYzSUso9decayHgCDX4sJkHLdcsYTytTg+tYv+wKF3U8gJuSBz2jJpQV4u/g==
+  dependencies:
+    "@babel/runtime" "^7.23.8"
+    tslib "^2.6.2"
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@@ -2512,6 +2589,11 @@ hasown@^2.0.0, hasown@^2.0.1:
   dependencies:
     function-bind "^1.1.2"
 
+help-me@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/help-me/-/help-me-5.0.0.tgz#b1ebe63b967b74060027c2ac61f9be12d354a6f6"
+  integrity sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==
+
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -2589,7 +2671,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2892,6 +2974,11 @@ jotai@^2.4.3:
   resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.6.4.tgz#a68a76f0e5cd2b614afae7112cfc52a77dbfe038"
   integrity sha512-RniwQPX4893YlNR1muOtyUGHYaTD1fhEN4qnOuZJSrDHj6xdEMrqlRSN/hCm2fshwk78ruecB/P2l+NCVWe6TQ==
 
+js-sdsl@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
+  integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3024,6 +3111,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lru-cache@^10.0.1, "lru-cache@^9.1.1 || ^10.0.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -3031,11 +3123,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-"lru-cache@^9.1.1 || ^10.0.0":
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
-  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
-
 make-error@^1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
@@ -3093,7 +3180,7 @@ minimatch@^9.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.6, minimist@~1.2.5:
+minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8, minimist@~1.2.5:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -3108,6 +3195,38 @@ moment@^2.29.4:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
 
+mqtt-packet@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/mqtt-packet/-/mqtt-packet-9.0.0.tgz#fd841854d8c0f1f5211b00de388c4ced45b59216"
+  integrity sha512-8v+HkX+fwbodsWAZIZTI074XIoxVBOmPeggQuDFCGg1SqNcC+uoRMWu7J6QlJPqIUIJXmjNYYHxBBLr1Y/Df4w==
+  dependencies:
+    bl "^6.0.8"
+    debug "^4.3.4"
+    process-nextick-args "^2.0.1"
+
+mqtt@^5.2.0, mqtt@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/mqtt/-/mqtt-5.5.0.tgz#a1c76592f47ce348fca8d11f0240824c829213d9"
+  integrity sha512-8WGQpjEzABcCh/UwLj7XaEoLsSLHJrJK3YLu57fJoLUBdz6zPGFdxWK3i1YYdPqKDu0sU6YHt+tly/qdLsLiyg==
+  dependencies:
+    "@types/readable-stream" "^4.0.5"
+    "@types/ws" "^8.5.9"
+    commist "^3.2.0"
+    concat-stream "^2.0.0"
+    debug "^4.3.4"
+    help-me "^5.0.0"
+    lru-cache "^10.0.1"
+    minimist "^1.2.8"
+    mqtt "^5.2.0"
+    mqtt-packet "^9.0.0"
+    number-allocator "^1.0.14"
+    readable-stream "^4.4.2"
+    reinterval "^1.1.0"
+    rfdc "^1.3.0"
+    split2 "^4.2.0"
+    worker-timers "^7.1.4"
+    ws "^8.14.2"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -3183,6 +3302,14 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
+number-allocator@^1.0.14:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/number-allocator/-/number-allocator-1.0.14.tgz#1f2e32855498a7740dcc8c78bed54592d930ee4d"
+  integrity sha512-OrL44UTVAvkKdOdRQZIJpLkAdjXGTRda052sN4sO77bKEzYYqWKMBjQvrJFzqygI99gL6Z4u2xctPW1tB8ErvA==
+  dependencies:
+    debug "^4.3.1"
+    js-sdsl "4.3.0"
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -3480,11 +3607,16 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-process-nextick-args@~2.0.0:
+process-nextick-args@^2.0.1, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -3854,6 +3986,26 @@ readable-stream@^2.0.2:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^3.0.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^4.2.0, readable-stream@^4.4.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
+  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
+  dependencies:
+    abort-controller "^3.0.0"
+    buffer "^6.0.3"
+    events "^3.3.0"
+    process "^0.11.10"
+    string_decoder "^1.3.0"
+
 readable-stream@~1.0.17, readable-stream@~1.0.27-1:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -3899,6 +4051,11 @@ regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1, regexp.prototype.f
     es-errors "^1.3.0"
     set-function-name "^2.0.1"
 
+reinterval@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/reinterval/-/reinterval-1.1.0.tgz#3361ecfa3ca6c18283380dd0bb9546f390f5ece7"
+  integrity sha512-QIRet3SYrGp0HUHO88jVskiG6seqUGC5iAG7AwI/BV4ypGcuqk9Du6YQBUOUqm9c8pw1eyLoIaONifRua1lsEQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -3932,6 +4089,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rfdc@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.1.tgz#2b6d4df52dffe8bb346992a10ea9451f24373a8f"
+  integrity sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==
+
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -3966,6 +4128,11 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-regex-test@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
@@ -4081,6 +4248,11 @@ source-map@^0.5.7:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
+split2@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
+  integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
+
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
@@ -4147,6 +4319,13 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+string_decoder@^1.1.1, string_decoder@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
 string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
@@ -4433,6 +4612,11 @@ typed-array-length@^1.0.4:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
 typescript@5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
@@ -4505,7 +4689,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+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"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -4596,6 +4780,34 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+worker-timers-broker@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/worker-timers-broker/-/worker-timers-broker-6.1.5.tgz#0477aad2e9aa4cb98e2cf4eb6337748c06797604"
+  integrity sha512-DZfLypD1f1AyiItRNJZwMGEjGZpx3clwifPFO+x1UwosjbXvEVXrrQn/RwMuNO8BEEUBs/n5CNFwavG9U4Ai6g==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+    fast-unique-numbers "^8.0.13"
+    tslib "^2.6.2"
+    worker-timers-worker "^7.0.68"
+
+worker-timers-worker@^7.0.68:
+  version "7.0.68"
+  resolved "https://registry.yarnpkg.com/worker-timers-worker/-/worker-timers-worker-7.0.68.tgz#7ccfe56c9639151abe2493a0295f74c8f421f815"
+  integrity sha512-Ts3hYhX6GqVRHZzW8+9WIi9FOeL29madwSvdVytF/tRpTxcNgPxa7KHC1ryj8U5ZDlpjnw/p7+wsm1KOJHG4cA==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+    tslib "^2.6.2"
+
+worker-timers@^7.1.4:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/worker-timers/-/worker-timers-7.1.5.tgz#a9c77bf050159702b1642dc8370ad0c919337138"
+  integrity sha512-uRtPgMB1oTgKGv9dh45gmALk4z1l7EXqs/uaUfqY0SmkXvWMhvoT6u7UIPHKBXQSOZdm7nXSI2HrvP8NLzAR7g==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+    tslib "^2.6.2"
+    worker-timers-broker "^6.1.5"
+    worker-timers-worker "^7.0.68"
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
@@ -4619,6 +4831,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@^8.14.2:
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
+  integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
+
 ws@~8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"