#style:

- UI Project Collaboration
## No Issue

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

@@ -1,7 +1,5 @@
 import adminColab_getOneRoomChatById from "@/app_modules/admin/colab/fun/get/get_one_room_chat_by_id";
 import { Colab_GroupChatView } from "@/app_modules/colab";
-import ColabViewChat from "@/app_modules/colab/detail/chat";
-import colab_V2getListMessageByRoomId from "@/app_modules/colab/fun/chat/get_message_by_room_id";
 import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";

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

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

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

@@ -1,20 +0,0 @@
-import { Colab_DetailGrupDiskusi } from "@/app_modules/colab";
-import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-import _ from "lodash";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let roomId = params.id;
-  const userLoginId = await user_getOneUserId();
-  let listMsg = await colab_getMessageByRoomId({ page: 1, roomId: roomId });
-
-  return (
-    <>
-      <Colab_DetailGrupDiskusi
-        roomId={roomId}
-        listMsg={listMsg}
-        userLoginId={userLoginId}
-      />
-    </>
-  );
-}

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

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

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

@@ -1,6 +1,4 @@
 import { LayoutColab_DetailProyekSaya } from "@/app_modules/colab";
-import colab_getOneCollaborationById from "@/app_modules/colab/fun/get/get_one_by_id";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import React from "react";
 
 export default async function Layout({
@@ -11,11 +9,11 @@ export default async function Layout({
   params: { id: string };
 }) {
   let colabId = params.id;
-  const dataColab = await colab_getOneCollaborationById(colabId)
+
 
   return (
     <>
-      <LayoutColab_DetailProyekSaya dataColab={dataColab as any}>
+      <LayoutColab_DetailProyekSaya colabId={colabId}>
         {children}
       </LayoutColab_DetailProyekSaya>
     </>

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

@@ -3,7 +3,7 @@ import colab_getListAllProyek from "@/app_modules/colab/fun/get/get_list_all_pro
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
 export default async function Page() {
-  const listData = await colab_getListAllProyek();
+  const listData = await colab_getListAllProyek({page: 1});
   const userLoginId = await user_getOneUserId();
 
   return (

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

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

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

@@ -2,7 +2,7 @@ import colab_getListRoomChatByAuthorId from "@/app_modules/colab/fun/get/room_ch
 import Colab_GrupDiskus from "@/app_modules/colab/main/grup";
 
 export default async function Page() {
-  const listRoom = await colab_getListRoomChatByAuthorId();
+  const listRoom = await colab_getListRoomChatByAuthorId({page: 1});
 
   return (
     <>

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

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

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

@@ -1,10 +1,10 @@
 import { Colab_Proyek } from "@/app_modules/colab";
-import colab_getListPartisipasiProyekByAuthorId from "@/app_modules/colab/fun/get/get_list_partisipasi_proyek_by_author_id";
+import colab_getListPartisipasiProyekByAuthorId from "@/app_modules/colab/fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
-import colab_getListAllProyekSayaByAuthorId from "@/app_modules/colab/fun/get/get_list_proyek_saya_by_author_id";
+import colab_getListAllProyekSayaByAuthorId from "@/app_modules/colab/fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
 
 export default async function Page() {
-  const listPartisipasiProyek = (await colab_getListPartisipasiProyekByAuthorId()).data;
+  const listPartisipasiProyek  = await colab_getListPartisipasiProyekByAuthorId({page: 1})
-  const listProyekSaya = (await colab_getListAllProyekSayaByAuthorId()).data;
+  const listProyekSaya = await colab_getListAllProyekSayaByAuthorId({page: 1})
 
   return (
     <>

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

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

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

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

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

@@ -1,11 +1,8 @@
 "use client";
 
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Card, Center, Title, Stack, Grid, Text } from "@mantine/core";
+import { Card, Center, Grid, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 import { MODEL_COLLABORATION } from "../../model/interface";
 
 export default function ComponentColab_CardSectionData({

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

@@ -19,6 +19,7 @@ import { IconDots, IconEdit } from "@tabler/icons-react";
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import { useDisclosure } from "@mantine/hooks";
 import { useState } from "react";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 
 export default function ComponentColab_CardSectionHeaderAuthorName({
   profileId,
@@ -93,10 +94,20 @@ function ButtonAction({
   colabId: string;
 }) {
   const router = useRouter();
-  const [opened, setOpened] = useState(false);
+  const [openDrawe, setOpenDrawer] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Proyek",
+      icon: <IconEdit />,
+      path: RouterColab.edit + colabId,
+    },
+  ];
+
   return (
     <>
-      <Menu
+      {/* <Menu
         opened={opened}
         onChange={setOpened}
         position="left-start"
@@ -122,7 +133,17 @@ function ButtonAction({
             Edit
           </Menu.Item>
         </Menu.Dropdown>
-      </Menu>
+      </Menu> */}
+
+      <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+        {isAuthor ? <IconDots size={20} color="white" /> : ""}
+      </ActionIcon>
+
+      <UIGlobal_Drawer
+        opened={openDrawe}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
 }

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

@@ -0,0 +1,49 @@
+import { Card, Stack } from "@mantine/core";
+import {
+  MODEL_COLLABORATION,
+  MODEL_COLLABORATION_PARTISIPASI,
+} from "../../model/interface";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentColab_CardSectionData from "./card_section_data";
+import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
+import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+
+export function ComponentColab_CardSemuaPartisipan({
+  data,
+  path,
+}: {
+  data: MODEL_COLLABORATION_PARTISIPASI;
+  path: string;
+}) {
+  return (
+    <>
+      <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
+        <Stack>
+          <ComponentColab_CardSectionHeaderAuthorName
+            authorName={data?.ProjectCollaboration.Author.Profile.name}
+            imagesId={data?.ProjectCollaboration.Author.Profile.imagesId}
+            profileId={data?.ProjectCollaboration.Author.Profile.id}
+          />
+          <ComponentColab_CardSectionData
+            colabId={data?.ProjectCollaboration.id}
+            path={path}
+            data={data?.ProjectCollaboration}
+          />
+          <ComponentColab_JumlahPartisipan
+            jumlah={data?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Paper, Grid, Stack, Center, Loader, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentColab_CardGrup({ data }: { data: any }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [idRoom, setIdRoom] = useState("");
+
+  return (
+    <>
+      <Paper
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+        onClick={() => {
+          router.push(
+            RouterColab.group_chat + data?.ProjectCollaboration_RoomChat.id,
+            { scroll: false }
+          );
+          setIdRoom(data?.ProjectCollaboration_RoomChat.id);
+          setLoading(true);
+        }}
+      >
+        <Grid align="center" h={"100%"}>
+          <Grid.Col span={"auto"}>
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {data?.ProjectCollaboration_RoomChat?.name}
+              </Text>
+              <Text fz={"xs"} c={"white"}>
+                {
+                  data?.ProjectCollaboration_RoomChat
+                    ?.ProjectCollaboration_AnggotaRoomChat.length
+                }{" "}
+                Anggota
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+            <Center>
+              {data?.ProjectCollaboration_RoomChat?.id === idRoom ? (
+                <ComponentGlobal_Loader />
+              ) : (
+                <IconChevronRight color="white" />
+              )}
+            </Center>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}

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

@@ -1,27 +1,26 @@
 "use client";
 
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import {
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-  Stack,
-  Grid,
-  Avatar,
-  Divider,
-  Text,
-  Group,
-  ActionIcon,
-  Drawer,
-  ScrollArea,
-  Title,
-  Paper,
-  Button,
-} from "@mantine/core";
-import { useRouter } from "next/navigation";
-import moment from "moment";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { IconEyeCheck, IconZoomCheck } from "@tabler/icons-react";
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  Divider,
+  Drawer,
+  Grid,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconFileCheck } from "@tabler/icons-react";
+import { IconCaretRight, IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
 
 export default function ComponentColab_AuthorNameOnListPartisipan({
   author,
@@ -41,19 +40,52 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
         opened={opened}
         onClose={close}
         position="bottom"
-        size={"40vh"}
+        size={"auto"}
         withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
       >
         <Stack>
-          <Title order={6}>Deskripsi Diri</Title>
+          <Group position="apart">
-          <Paper withBorder p={"xs"}>
+            <Title order={5}>Deskripsi Diri</Title>
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <Paper
+            p={"xs"}
+            style={{
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px ",
+              color: "white",
+            }}
+          >
             <ScrollArea h={"20vh"} scrollbarSize={2}>
               <Text>{deskripsi}</Text>
             </ScrollArea>
           </Paper>
-          <Button radius={"xl"} onClick={close}>
+          {/* <Button radius={"xl"} onClick={close}>
             Tutup
-          </Button>
+          </Button> */}
         </Stack>
       </Drawer>
 
@@ -96,7 +128,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
                   radius={"xl"}
                   variant="transparent"
                 >
-                  <IconFileCheck color={opened ? "blue" : "gray"}/>
+                  <IconCaretRight color={opened ? "blue" : "gray"} />
                 </ActionIcon>
               ) : (
                 ""

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

@@ -1,31 +1,34 @@
 "use client";
 
 import {
-  Paper,
+  AccentColor,
-  Center,
+  MainColor,
-  Title,
+} from "@/app_modules/_global/color/color_pallet";
-  ScrollArea,
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import {
+  ActionIcon,
   Box,
+  Button,
+  Center,
+  Drawer,
+  Group,
+  Paper,
+  ScrollArea,
   Stack,
   Text,
-  Divider,
-  Button,
-  Drawer,
   Textarea,
-  Group,
+  Title
 } from "@mantine/core";
-import ComponentColab_AuthorNameOnHeader from "../header_author_name";
+import { useDisclosure } from "@mantine/hooks";
-import {
+import { IconX } from "@tabler/icons-react";
-  MODEL_COLLABORATION_MASTER,
-  MODEL_COLLABORATION_PARTISIPASI,
-} from "../../model/interface";
-import _ from "lodash";
 import { useState } from "react";
 import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
 import colab_getListPartisipanByColabId from "../../fun/get/get_list_partisipan_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import {
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+  MODEL_COLLABORATION_PARTISIPASI
-import { useDisclosure } from "@mantine/hooks";
+} from "../../model/interface";
 import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
 
 export default function ComponentColab_DetailListPartisipasiUser({
@@ -71,11 +74,37 @@ export default function ComponentColab_DetailListPartisipasiUser({
         opened={opened}
         onClose={close}
         position="bottom"
-        size={"30vh"}
+        size={"auto"}
         withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
       >
-        <Stack>
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
           <Textarea
+          maxLength={300}
             label="Deskripsi Diri"
             placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
             minRows={4}
@@ -83,11 +112,21 @@ export default function ComponentColab_DetailListPartisipasiUser({
               setDeskripsi(val.currentTarget.value);
             }}
           />
-          <Group position="center">
+          <Group position="apart">
-            <Button radius={"xl"} onClick={() => close()}>
+            {/* <Button radius={"xl"} onClick={() => close()}>
               Batal
-            </Button>
+            </Button> */}
-            <Button radius={"xl"} color="green" onClick={() => onJoin()}>
+            <ComponentGlobal_InputCountDown lengthInput={deskripsi?.length} maxInput={300}/>
+            <Button
+              disabled={!deskripsi}
+              radius={"xl"}
+              color="yellow"
+              bg={MainColor.yellow}
+              onClick={() => onJoin()}
+              style={{
+                transition: "0.5s"
+              }}
+            >
               Simpan
             </Button>
           </Group>
@@ -100,11 +139,9 @@ export default function ComponentColab_DetailListPartisipasiUser({
             <Button
               radius={"xl"}
               disabled={cekPartisipan ? true : false}
-              color={cekPartisipan ? "green" : "blue"}
+              color={cekPartisipan ? "green" : "yellow"}
-              onClick={() => {
+              onClick={open}
-                // onJoin();
+              // bg={MainColor.yellow}
-                open();
-              }}
             >
               {cekPartisipan ? "Telah Berpartisipasi" : "Partisipasi"}
             </Button>
@@ -113,7 +150,16 @@ export default function ComponentColab_DetailListPartisipasiUser({
           ""
         )}
 
-        <Paper withBorder p={"md"}>
+        <Paper
+          style={{
+            border: `2px solid ${AccentColor.softblue}`,
+            backgroundColor: AccentColor.blue,
+            color: "white",
+            borderRadius: "10px",
+            marginBottom: "20px",
+            padding: "15px",
+          }}
+        >
           <Stack spacing={"xl"}>
             <Center>
               <Title order={5}>Partispasi User ({data?.length})</Title>

src/app_modules/colab/component/header_author_name.tsx

@@ -22,7 +22,9 @@ export default function ComponentColab_AuthorNameOnHeader({
   const router = useRouter();
   return (
     <>
-      <Stack spacing={"xs"}>
+      <Stack spacing={"xs"} style={{
+        color: "white"
+      }}>
         <Grid>
           <Grid.Col
             span={"content"}
@@ -56,8 +58,11 @@ export default function ComponentColab_AuthorNameOnHeader({
           <Grid.Col span={"content"}>
             <Stack justify="center" h={"100%"}>
               {tglPublish ? (
-                <Text c={"gray"} fz={"xs"}>
+                <Text fz={"xs"}>
-                  {new Intl.DateTimeFormat("id-ID").format(tglPublish)}
+                  {new Intl.DateTimeFormat("id-ID", {
+                    dateStyle: "medium"
+
+                  }).format(tglPublish)}
                 </Text>
               ) : (
                 ""

src/app_modules/colab/create/index.tsx

@@ -39,7 +39,7 @@ export default function Colab_Create({
   });
   return (
     <>
-      <Stack px={"sm"}>
+      <Stack px={"sm"} py={"md"}>
         <TextInput
           maxLength={100}
           styles={{

src/app_modules/colab/create/layout.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import React from "react";
-import ComponentColab_HeaderTamplate from "../component/header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import React from "react";
 
 export default function LayoutColab_Create({
   children,

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

@@ -1,341 +0,0 @@
-"use client";
-
-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { evnPesan } from "@/util/evn";
-import mqtt_client from "@/util/mqtt_client";
-import {
-  ActionIcon,
-  Box,
-  Center,
-  Grid,
-  Group,
-  Loader,
-  Paper,
-  Stack,
-  Text,
-  Textarea,
-  Title
-} from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import {
-  IconChevronLeft,
-  IconCircle,
-  IconInfoSquareRounded,
-  IconSend,
-} from "@tabler/icons-react";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import useInfiniteScroll, {
-  ScrollDirection,
-  ScrollDirectionBooleanState,
-} from "react-easy-infinite-scroll-hook";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
-import {
-  MODEL_COLLABORATION_MESSAGE,
-  MODEL_COLLABORATION_ROOM_CHAT,
-} from "../../model/interface";
-
-const list = Array(100).fill(0);
-export default function ColabViewChat({
-  userLoginId,
-  listMsg,
-  dataRoom,
-}: {
-  userLoginId: string;
-  listMsg: MODEL_COLLABORATION_MESSAGE[];
-  dataRoom?: MODEL_COLLABORATION_ROOM_CHAT | any;
-}) {
-  // Tamplate app layout
-  const router = useRouter();
-  const [loadingBack, setLoadingBack] = useState(false);
-  const [loadingInfo, setLoadingInfo] = useState(false);
-
-  // State message
-  const [msg, setMsg] = useState("");
-  const [data, setData] = useState(listMsg);
-
-  // State infinite scroll
-  const [isLoading, setIsLoading] = useState(false);
-  const [totalPage, setTotalPage] = useState(1);
-  const [hasMore, setHasMore] = useState<ScrollDirectionBooleanState>({
-    up: true,
-    down: false,
-  });
-
-  const [topik, setTopic] = useState("");
-
-  useShallowEffect(() => {
-    evnPesan.on(topik, (msgg) => {
-      let dd: any[] = _.clone(data);
-      const a = [...dd, JSON.parse(msgg)];
-      // console.log(dd.length);
-      setData(a);
-    });
-  }, [data]);
-
-  // Kirim pesan
-  async function onSend() {
-    // console.log(JSON.stringify(data[0], null, 2));
-    const kiriman = {
-      id: "clw8glvt4000j12efrecoubug",
-      createdAt: "2024-05-15T23:35:05.032Z",
-      isActive: true,
-      message: msg,
-      isFile: false,
-      User: {
-        id: "clvag8xt10007134j8sapm46n",
-        Profile: {
-          id: "clvajdger000g134jhhhg21c4",
-          name: "malikkurosaki",
-        },
-      },
-    };
-    mqtt_client.publish("pesan", JSON.stringify(kiriman));
-    // await colab_funCreateMessageByUserId(msg, dataRoom.id).then(async (res) => {
-    //   if (res.status === 200) {
-    //     const newData = await colab_getMessageByRoomId({
-    //       roomId: dataRoom?.id,
-    //       page: 1,
-    //     });
-
-    //     setData(newData as any);
-    //     setHasMore({ up: true });
-
-    setMsg("");
-    //   } else {
-    //     ComponentGlobal_NotifikasiGagal(res.message);
-    //   }
-    // });
-  }
-
-  const next = async (direction: ScrollDirection) => {
-    try {
-      setIsLoading(true);
-      await new Promise((a) => setTimeout(a, 500));
-
-      const newData = await colab_getMessageByRoomId({
-        roomId: dataRoom?.id,
-        page: totalPage + 1,
-      });
-      setTotalPage(totalPage + 1);
-
-      // console.log(newData, "loading baru");
-
-      if (_.isEmpty(newData)) {
-        setHasMore({ up: false });
-      } else {
-        const d: any =
-          direction === "down" ? [...data, ...newData] : [...newData, ...data];
-        setData(d);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const ref: any = useInfiniteScroll({
-    next,
-    rowCount: data.length,
-    hasMore,
-    scrollThreshold: 0.1,
-  });
-
-  return (
-    <>
-      <Box h={"100vh"}>
-        {/* Header */}
-
-        <Box
-          style={{
-            zIndex: 99,
-          }}
-          w={"100%"}
-          pos={"fixed"}
-          top={0}
-          h={"7vh"}
-        >
-          <Stack bg={"gray.2"} h={"100%"} justify="center" px={"sm"}>
-            <Grid grow gutter={"lg"}>
-              <Grid.Col span={2}>
-                <ActionIcon
-                  loading={loadingBack ? true : false}
-                  variant="transparent"
-                  radius={"xl"}
-                  onClick={() => {
-                    setLoadingBack(true);
-                    router.back();
-                  }}
-                >
-                  <IconChevronLeft />
-                </ActionIcon>
-              </Grid.Col>
-              <Grid.Col span={8}>
-                <Center>
-                  <Title order={5} lineClamp={1}>
-                    {dataRoom?.name}
-                  </Title>
-                </Center>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Group position="right">
-                  <ActionIcon
-                    loading={loadingInfo ? true : false}
-                    variant="transparent"
-                    radius={"xl"}
-                    onClick={() => {
-                      setLoadingInfo(true);
-                      router.push(RouterColab.info_grup + dataRoom?.id);
-                    }}
-                  >
-                    <IconInfoSquareRounded />
-                  </ActionIcon>
-                </Group>
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Box>
-
-        {/* Main View */}
-
-        <Box pos={"static"}>
-          <Box
-            style={{
-              height: "7vh",
-              display: "flex",
-              flexDirection: "column-reverse",
-            }}
-          />
-          {/* Chat View */}
-          <Box h={"82vh"} px={"xs"}>
-            <Stack justify="flex-end" h={"100%"}>
-              <div
-                ref={ref as any}
-                style={{
-                  overflowY: "auto",
-                }}
-              >
-                {isLoading && (
-                  <Center>
-                    <Loader size={20} color="gray" />
-                  </Center>
-                )}
-                {_.isEmpty(data) ? (
-                  <ComponentColab_IsEmptyData text="Belum ada pesan" />
-                ) : (
-                  data.map((e, i) => (
-                    <Box key={i}>
-                      {userLoginId === e?.User?.id ? (
-                        <Group position="right">
-                          <Paper key={e?.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
-                            <Stack spacing={0}>
-                              <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                                {e?.User?.Profile?.name}
-                              </Text>
-                              <div
-                                dangerouslySetInnerHTML={{ __html: e?.message }}
-                              />
-
-                              <Group spacing={"xs"}>
-                                <Text fz={7}>
-                                  {/* {new Intl.DateTimeFormat("id-ID", {
-                                    timeStyle: "medium",
-                                  }).format(e.createdAt)} */}
-                                </Text>
-                                <IconCircle size={3} />
-                                <Text fz={7}>
-                                  {/* {new Intl.DateTimeFormat("id-ID", {
-                                    dateStyle: "medium",
-                                  }).format(e.createdAt)} */}
-                                </Text>
-                              </Group>
-                            </Stack>
-                          </Paper>
-                        </Group>
-                      ) : (
-                        <Group>
-                          <Paper key={e?.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
-                            <Stack spacing={0}>
-                              <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                                {e?.User?.Profile?.name}
-                              </Text>
-                              <div
-                                dangerouslySetInnerHTML={{ __html: e?.message }}
-                              />
-                              <Group spacing={"xs"}>
-                                <Text fz={7}>
-                                  {/* {new Intl.DateTimeFormat("id-ID", {
-                                    timeStyle: "medium",
-                                  }).format(e.createdAt)} */}
-                                </Text>
-                                <IconCircle size={3} />
-                                <Text fz={7}>
-                                  {/* {new Intl.DateTimeFormat("id-ID", {
-                                    dateStyle: "medium",
-                                  }).format(e.createdAt)} */}
-                                </Text>
-                              </Group>
-                            </Stack>
-                          </Paper>
-                        </Group>
-                      )}
-                    </Box>
-                  ))
-                )}
-              </div>
-            </Stack>
-          </Box>
-
-          <Box
-            style={{
-              height: "11vh",
-            }}
-          />
-        </Box>
-
-        {/* Footer */}
-        <Box
-          style={{
-            zIndex: 98,
-          }}
-          w={"100%"}
-          pos={"fixed"}
-          bottom={0}
-          h={"10vh"}
-          bg={"gray.2"}
-        >
-          <Stack justify="center" h={"100%"} px={"sm"}>
-            <Grid align="center">
-              <Grid.Col span={"auto"}>
-                <Textarea
-                  value={msg}
-                  minRows={1}
-                  radius={"md"}
-                  placeholder="Ketik pesan anda..."
-                  onChange={(val) => {
-                    setMsg(val.currentTarget.value);
-                  }}
-                />
-              </Grid.Col>
-              <Grid.Col span={"content"}>
-                <ActionIcon
-                  disabled={msg ? false : true}
-                  variant="filled"
-                  bg={"cyan"}
-                  radius={"xl"}
-                  size={"xl"}
-                  onClick={() => {
-                    onSend();
-                  }}
-                >
-                  <IconSend size={20} />
-                </ActionIcon>
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Box>
-      </Box>
-    </>
-  );
-}

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

@@ -1,51 +1,48 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
   Box,
-  Button,
-  Card,
   Center,
-  Code,
+  Container,
   Grid,
   Group,
-  Header,
   Loader,
   Paper,
-  ScrollArea,
+  rem,
   Stack,
   Text,
   Textarea,
   Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import {
   IconChevronLeft,
-  IconCircle,
   IconInfoSquareRounded,
   IconSend,
 } from "@tabler/icons-react";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
-import router from "next/router";
+import { useState } from "react";
-import { useRef, useState } from "react";
+import useInfiniteScroll, {
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
+import ComponentColab_IsEmptyData from "../../component/is_empty_data";
+import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
+import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
 import {
   MODEL_COLLABORATION_MESSAGE,
   MODEL_COLLABORATION_ROOM_CHAT,
 } from "../../model/interface";
-import _ from "lodash";
+import {
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
+  AccentColor,
-import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
+  MainColor,
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+} from "@/app_modules/_global/color/color_pallet";
-import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
-import { useShallowEffect } from "@mantine/hooks";
-import mqtt_client from "@/util/mqtt_client";
-import useInfiniteScroll, {
-  ScrollDirection,
-} from "react-easy-infinite-scroll-hook";
-import toast from "react-simple-toasts";
-import colab_getOneMessageById from "../../fun/get/room_chat/get_one_message_by_id";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { evnPesan } from "@/util/evn";
 
 export default function Colab_GroupChatView({
   userLoginId,
@@ -169,168 +166,184 @@ export default function Colab_GroupChatView({
 
   return (
     <>
-      <Box h={"100vh"}>
+      <Box
-        {/* Header */}
+        w={"100%"}
-
+        h={"100%"}
-        <Box
+        style={{
-          style={{
+          overflowY: "auto",
-            zIndex: 99,
+          overflowX: "auto",
-          }}
+          backgroundColor: MainColor.black,
-          w={"100%"}
+          position: "fixed",
-          pos={"fixed"}
+        }}
-          top={0}
+      >
-          h={50}
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
-        >
+          {/* Header */}
-          <Stack bg={"gray.2"} h={50} justify="center" px={"sm"}>
+          <Box
-            <Grid grow gutter={"lg"}>
+            h={"8vh"}
-              <Grid.Col span={2}>
+            style={{
-                <ActionIcon
+              zIndex: 10,
-                  loading={loadingBack ? true : false}
+            }}
-                  variant="transparent"
+            w={"100%"}
-                  radius={"xl"}
+            pos={"sticky"}
-                  onClick={() => {
+            top={0}
-                    setLoadingBack(true);
+            bg={MainColor.darkblue}
-                    router.back();
+          >
-                  }}
+            <Stack h={50} justify="center" px={"sm"}>
-                >
+              <Grid grow gutter={"lg"}>
-                  <IconChevronLeft />
+                <Grid.Col span={2}>
-                </ActionIcon>
-              </Grid.Col>
-              <Grid.Col span={8}>
-                <Center>
-                  <Title order={5} lineClamp={1}>
-                    {selectRoom?.name}
-                  </Title>
-                </Center>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Group position="right">
                   <ActionIcon
-                    loading={loadingInfo ? true : false}
                     variant="transparent"
                     radius={"xl"}
                     onClick={() => {
-                      setLoadingInfo(true);
+                      setLoadingBack(true);
-                      router.push(RouterColab.info_grup + selectRoom.id);
+                      router.back();
                     }}
                   >
-                    <IconInfoSquareRounded />
+                    {loadingBack ? (
+                      <ComponentGlobal_Loader />
+                    ) : (
+                      <IconChevronLeft color="white" />
+                    )}
                   </ActionIcon>
-                </Group>
+                </Grid.Col>
-              </Grid.Col>
+                <Grid.Col span={8}>
-            </Grid>
-          </Stack>
-        </Box>
-
-        {/* Main View */}
-        <Box py={"xs"} px={"xs"} pos={"static"}>
-          {/* Batas atas */}
-          <Box
-            style={{
-              height: 50,
-            }}
-          />
-
-          {/* Chat View */}
-          <Box h={"80vh"}>
-            <Stack justify="flex-end" h={"100%"}>
-              <div
-                ref={ref as any}
-                style={{
-                  overflowY: "auto",
-                }}
-              >
-                {isLoading && (
                   <Center>
-                    <Loader size={20} color="gray" />
+                    <Title c={"white"} order={5} lineClamp={1}>
+                      {selectRoom?.name}
+                    </Title>
                   </Center>
-                )}
+                </Grid.Col>
-                {_.isEmpty(data) ? (
+                <Grid.Col span={2}>
-                  <ComponentColab_IsEmptyData text="Belum ada pesan" />
+                  <Group position="right">
-                ) : (
+                    <ActionIcon
-                  data.map((e, i) => (
+                      variant="transparent"
-                    <Box key={i}>
+                      radius={"xl"}
-                      {userLoginId === e?.User?.id ? (
+                      onClick={() => {
-                        <Group position="right">
+                        setLoadingInfo(true);
-                          <Paper key={e?.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
+                        router.push(RouterColab.info_grup + selectRoom.id, {scroll: false});
-                            <Stack spacing={0}>
+                      }}
-                              <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                    >
-                                {e?.User?.Profile?.name}
+                      {loadingInfo ? (
-                              </Text>
+                        <ComponentGlobal_Loader />
-                              <div
-                                dangerouslySetInnerHTML={{ __html: e?.message }}
-                              />
-
-                              {/* <Group spacing={"xs"}>
-                                <Text fz={7}>
-                                  {new Intl.DateTimeFormat("id-ID", {
-                                    timeStyle: "medium",
-                                  }).format(e.createdAt)}
-                                </Text>
-                                <IconCircle size={3} />
-                                <Text fz={7}>
-                                  {new Intl.DateTimeFormat("id-ID", {
-                                    dateStyle: "medium",
-                                  }).format(e.createdAt)}
-                                </Text>
-                              </Group> */}
-                            </Stack>
-                          </Paper>
-                        </Group>
                       ) : (
-                        <Group>
+                        <IconInfoSquareRounded color="white" />
-                          <Paper key={e?.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
-                            <Stack spacing={0}>
-                              <Text lineClamp={1} fw={"bold"} fz={"xs"}>
-                                {e?.User?.Profile?.name}
-                              </Text>
-                              <div
-                                dangerouslySetInnerHTML={{ __html: e?.message }}
-                              />
-                              {/* <Group spacing={"xs"}>
-                                <Text fz={7}>
-                                  {new Intl.DateTimeFormat("id-ID", {
-                                    timeStyle: "medium",
-                                  }).format(e.createdAt)}
-                                </Text>
-                                <IconCircle size={3} />
-                                <Text fz={7}>
-                                  {new Intl.DateTimeFormat("id-ID", {
-                                    dateStyle: "medium",
-                                  }).format(e.createdAt)}
-                                </Text>
-                              </Group> */}
-                            </Stack>
-                          </Paper>
-                        </Group>
                       )}
-                    </Box>
+                    </ActionIcon>
-                  ))
+                  </Group>
-                )}
+                </Grid.Col>
-              </div>
+              </Grid>
             </Stack>
           </Box>
 
-          {/* Batas bawah */}
+          {/* Main View */}
+          <Box
+            py={"xs"}
+            px={"xs"}
+            pos={"static"}
+            style={{ zIndex: 0 }}
+            h={"82vh"}
+          >
+            {/* Chat View */}
+            <Box h={"100%"}>
+              <Stack justify="flex-end" h={"100%"}>
+                <div
+                  ref={ref as any}
+                  style={{
+                    overflowY: "auto",
+                  }}
+                >
+                  {_.isEmpty(data) ? (
+                    isLoading ? (
+                      <Center>
+                        <Loader size={20} color="yellow" />
+                      </Center>
+                    ) : (
+                      <ComponentColab_IsEmptyData text="Belum ada pesan" />
+                    )
+                  ) : (
+                    data.map((e, i) => (
+                      <Box key={i}>
+                        {userLoginId === e?.User?.id ? (
+                          <Group position="right">
+                            <Paper key={e?.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
+                              <Stack spacing={0}>
+                                <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                                  {e?.User?.Profile?.name}
+                                </Text>
+                                <div
+                                  dangerouslySetInnerHTML={{
+                                    __html: e?.message,
+                                  }}
+                                />
+
+                                {/* <Group spacing={"xs"}>
+                                <Text fz={7}>
+                                  {new Intl.DateTimeFormat("id-ID", {
+                                    timeStyle: "medium",
+                                  }).format(e.createdAt)}
+                                </Text>
+                                <IconCircle size={3} />
+                                <Text fz={7}>
+                                  {new Intl.DateTimeFormat("id-ID", {
+                                    dateStyle: "medium",
+                                  }).format(e.createdAt)}
+                                </Text>
+                              </Group> */}
+                              </Stack>
+                            </Paper>
+                          </Group>
+                        ) : (
+                          <Group>
+                            <Paper key={e?.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
+                              <Stack spacing={0}>
+                                <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                                  {e?.User?.Profile?.name}
+                                </Text>
+                                <div
+                                  dangerouslySetInnerHTML={{
+                                    __html: e?.message,
+                                  }}
+                                />
+                                {/* <Group spacing={"xs"}>
+                                <Text fz={7}>
+                                  {new Intl.DateTimeFormat("id-ID", {
+                                    timeStyle: "medium",
+                                  }).format(e.createdAt)}
+                                </Text>
+                                <IconCircle size={3} />
+                                <Text fz={7}>
+                                  {new Intl.DateTimeFormat("id-ID", {
+                                    dateStyle: "medium",
+                                  }).format(e.createdAt)}
+                                </Text>
+                              </Group> */}
+                              </Stack>
+                            </Paper>
+                          </Group>
+                        )}
+                      </Box>
+                    ))
+                  )}
+                </div>
+              </Stack>
+            </Box>
+          </Box>
+
+          {/* Footer */}
           <Box
             style={{
+              position: "relative",
+              bottom: 0,
               height: "10vh",
+              zIndex: 10,
+              // borderRadius: "20px 20px 0px 0px",
+              borderTop: `2px solid ${AccentColor.blue}`,
+              borderRight: `1px solid ${AccentColor.blue}`,
+              borderLeft: `1px solid ${AccentColor.blue}`,
             }}
-          />
+            bg={AccentColor.darkblue}
-        </Box>
+          >
-
+            {/* <Button
-        {/* Footer */}
-        <Box
-          style={{
-            zIndex: 98,
-          }}
-          w={"100%"}
-          pos={"fixed"}
-          bottom={0}
-          h={"10vh"}
-          bg={"gray.2"}
-        >
-          {/* <Button
             onClick={() => {
               const d: { [key: string]: any } = _.clone(data[0]);
               setData([...data, d]);
@@ -338,34 +351,39 @@ export default function Colab_GroupChatView({
           >
             KIzRIM PESAN
           </Button> */}
-          <Stack justify="center" h={"100%"} px={"sm"}>
+            <Stack justify="center" h={"100%"} px={"sm"}>
-            <Grid align="center">
+              <Grid align="center">
-              <Grid.Col span={"auto"}>
+                <Grid.Col span={"auto"}>
-                <Textarea
+                  <Textarea
-                  minRows={1}
+                    minRows={1}
-                  radius={"md"}
+                    radius={"md"}
-                  placeholder="Ketik pesan anda..."
+                    placeholder="Ketik pesan anda..."
-                  value={msg}
+                    value={msg}
-                  onChange={(val) => setMsg(val.currentTarget.value)}
+                    onChange={(val) => setMsg(val.currentTarget.value)}
-                />
+                  />
-              </Grid.Col>
+                </Grid.Col>
-              <Grid.Col span={"content"}>
+                <Grid.Col span={"content"}>
-                <ActionIcon
+                  <ActionIcon
-                  disabled={msg === "" ? true : false}
+                    disabled={msg === "" ? true : false}
-                  variant="filled"
+                    variant="filled"
-                  bg={"cyan"}
+                    bg={AccentColor.softblue}
-                  radius={"xl"}
+                    color={"cyan"}
-                  size={"xl"}
+                    radius={"xl"}
-                  onClick={() => {
+                    size={"xl"}
-                    onSend();
+                    onClick={() => {
-                  }}
+                      onSend();
-                >
+                    }}
-                  <IconSend size={20} />
+                    style={{
-                </ActionIcon>
+                      transition: "0.5s",
-              </Grid.Col>
+                    }}
-            </Grid>
+                  >
-          </Stack>
+                    <IconSend size={20} />
-        </Box>
+                  </ActionIcon>
+                </Grid.Col>
+              </Grid>
+            </Stack>
+          </Box>
+        </Container>
       </Box>
     </>
   );

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

@@ -1,44 +1,30 @@
 "use client";
 
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
   Affix,
-  Badge,
   Box,
-  Button,
   Center,
-  Flex,
   Grid,
   Group,
   Loader,
   Paper,
-  ScrollArea,
   Stack,
   Text,
-  TextInput,
   Textarea,
-  Transition,
+  rem
-  rem,
 } from "@mantine/core";
 import {
-  useScrollIntoView,
+  useShallowEffect
-  useShallowEffect,
-  useWindowScroll,
 } from "@mantine/hooks";
-import { useAtom } from "jotai";
+import { IconCircle, IconSend } from "@tabler/icons-react";
-import { useCallback, useState } from "react";
-import { gs_colab_pesan } from "../../global_state";
-import { IconArrowUp, IconCircle, IconSend } from "@tabler/icons-react";
-import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
 import _ from "lodash";
+import { useState } from "react";
 import ComponentColab_IsEmptyData from "../../component/is_empty_data";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
 import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
-import mqtt_client from "@/util/mqtt_client";
-import useInfiniteScroll, {
-  ScrollDirection,
-} from "react-easy-infinite-scroll-hook";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
 
 export default function Colab_DetailGrupDiskusi({
   roomId,

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

@@ -6,6 +6,9 @@ import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
 import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
 import ComponentColab_DetailData from "../../component/detail/detail_data";
 import ComponentColab_AuthorNameOnListPartisipan from "../../component/detail/header_author_list_partisipan";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Colab_DetailInfoGrup({
   dataRoom,
@@ -14,11 +17,11 @@ export default function Colab_DetailInfoGrup({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentColab_HeaderTamplate title="Info Grup" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Info Grup" />}
       >
         {<InfoGroup dataRoom={dataRoom} />}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }
@@ -26,14 +29,37 @@ export default function Colab_DetailInfoGrup({
 function InfoGroup({ dataRoom }: { dataRoom: MODEL_COLLABORATION_ROOM_CHAT }) {
   return (
     <>
-      <Stack px={"xs"}>
+      <Stack
+        px={"xs"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
         <ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
-        <Paper p={"xs"} withBorder>
+        <Paper
+
+          style={{
+            border: `2px solid ${AccentColor.softblue}`,
+            backgroundColor: AccentColor.blue,
+            color: "white",
+            borderRadius: "10px",
+            marginBottom: "20px",
+            padding: "15px",
+          }}
+        >
           <Stack>
             <Title order={6}>Anggota Grup</Title>
-            {dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e,i) => (
+            {dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
               <Box key={i}>
-                <ComponentColab_AuthorNameOnListPartisipan author={e.User} isPembatas={true} />
+                <ComponentColab_AuthorNameOnListPartisipan
+                  author={e.User}
+                  // isPembatas={true}
+                />
               </Box>
             ))}
           </Stack>

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

@@ -1,22 +1,12 @@
 "use client";
 
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import {
-  Box,
+  Stack
-  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";
+import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
+import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
 import { MODEL_COLLABORATION } from "../../model/interface";
 
 export default function Colab_MainDetail({
@@ -32,7 +22,18 @@ export default function Colab_MainDetail({
 }) {
   return (
     <>
-      <Stack px={5} spacing={"xl"}>
+      <Stack
+        px={5}
+        spacing={"xl"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
         <ComponentColab_AuthorNameOnHeader
           tglPublish={new Date()}
           authorName={dataColab?.Author?.Profile?.name}

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

@@ -5,6 +5,8 @@ import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_l
 import { IconEdit } from "@tabler/icons-react";
 import React from "react";
 import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutColab_MainDetail({
   children,
@@ -17,17 +19,17 @@ export default function LayoutColab_MainDetail({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentColab_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail"
-            icon={isAuthor ? <IconEdit /> : ""}
+            // icon={isAuthor ? <IconEdit /> : ""}
-            route2={isAuthor ? RouterColab.edit + colabId : ""}
+            // route2={isAuthor ? RouterColab.edit + colabId : ""}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 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";
@@ -15,7 +16,18 @@ export default function Colab_DetailPartisipasiProyek({
 }) {
   return (
     <>
-      <Stack px={5} spacing={"xl"}>
+      <Stack
+        px={5}
+        spacing={"xl"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
         {/* <pre>{JSON.stringify(dataColab, null,2)}</pre> */}
         <ComponentColab_AuthorNameOnHeader
           authorName={dataColab?.Author.Profile.name}
@@ -24,7 +36,9 @@ export default function Colab_DetailPartisipasiProyek({
           tglPublish={dataColab?.createdAt}
         />
         <ComponentColab_DetailData data={dataColab} />
-        <ComponentColab_DetailListPartisipasiUser listPartisipan={listPartisipan} />
+        <ComponentColab_DetailListPartisipasiUser
+          listPartisipan={listPartisipan}
+        />
       </Stack>
     </>
   );

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

@@ -2,6 +2,8 @@
 
 import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutColab_DetailPartisipasiProyek({
   children,
@@ -10,11 +12,11 @@ export default function LayoutColab_DetailPartisipasiProyek({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
-        header={<ComponentColab_HeaderTamplate title="Detail Partisipan" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Partisipan" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

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

@@ -1,9 +1,15 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
 import ComponentColab_AuthorNameOnListPartisipan from "@/app_modules/colab/component/detail/header_author_list_partisipan";
-import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
 import ComponentColab_IsEmptyData from "@/app_modules/colab/component/is_empty_data";
 import colab_funCreateRoomChat from "@/app_modules/colab/fun/create/fun_create_room_chat";
 import { gs_colab_hot_menu } from "@/app_modules/colab/global_state";
@@ -11,10 +17,8 @@ import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_PARTISIPASI,
 } from "@/app_modules/colab/model/interface";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import {
+  ActionIcon,
   Button,
   Checkbox,
   Drawer,
@@ -28,6 +32,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -42,7 +47,18 @@ export default function Colab_DetailProyekSaya({
 }) {
   return (
     <>
-      <Stack px={5} spacing={"xl"}>
+      <Stack
+        px={5}
+        spacing={"xl"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
         <ComponentColab_DetailData data={dataColab} />
         <CheckBoxPartisipan
           listPartisipan={listPartisipan}
@@ -119,22 +135,31 @@ function CheckBoxPartisipan({
     <>
       <Stack>
         {/* <pre>{JSON.stringify(listPartisipan,null,2)}</pre> */}
-        <Paper withBorder shadow="lg" p={"sm"}>
+        <Paper
+          style={{
+            border: `2px solid ${AccentColor.softblue}`,
+            backgroundColor: AccentColor.blue,
+            color: "white",
+            borderRadius: "10px",
+            marginBottom: "20px",
+            padding: "15px",
+          }}
+        >
           {/* {JSON.stringify(value, null, 2)} */}
           <Stack>
             <Stack spacing={5}>
               <Text c={"red"} fz={10}>
                 *
-                <Text px={"xs"} span inherit c={"gray"}>
+                <Text px={"xs"} span inherit c={"white"}>
                   Pilih user yang akan menjadi tim proyek anda
                 </Text>
               </Text>
-              <Text c={"red"} fz={10}>
+              {/* <Text c={"red"} fz={10}>
                 *
-                <Text px={"xs"} span inherit c={"gray"}>
+                <Text px={"xs"} span inherit c={"white"}>
                   Room chat dapat dibentuk jika ada 2 user yang dipilih
                 </Text>
-              </Text>
+              </Text> */}
             </Stack>
             <ScrollArea h={400} offsetScrollbars>
               <Checkbox.Group value={value} onChange={setValue}>
@@ -185,10 +210,8 @@ function ButtonAction({
     if (nameRoom === "")
       return ComponentGlobal_NotifikasiPeringatan("Isi Nama Grup");
     await colab_funCreateRoomChat(nameRoom, value, colabId).then((res) => {
-      console.log(res);
       if (res.status === 201) {
         setLoading(true);
-        close();
         ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
         setHotMenu(4);
         router.push(RouterColab.grup_diskusi);
@@ -206,6 +229,11 @@ function ButtonAction({
         onClick={() => {
           open();
         }}
+        bg={MainColor.yellow}
+        color="yellow"
+        style={{
+          transition: "0.5s",
+        }}
       >
         Buat Ruang Diskusi{" "}
       </Button>
@@ -214,11 +242,36 @@ function ButtonAction({
         opened={opened}
         onClose={close}
         position="bottom"
-        size={150}
+        size={"auto"}
         withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
       >
         <Stack>
-          <Title order={6}>Nama Grup Diskusi</Title>
+          <Group position="apart">
+            <Title order={6}>Nama Grup Diskusi</Title>
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
           <TextInput
             placeholder="Masukan nama grup diskusi .."
             radius={"xl"}
@@ -226,16 +279,18 @@ function ButtonAction({
               setNameRoom(val.currentTarget.value);
             }}
           />
-          <Group grow>
+          <Group position="right">
-            <Button radius={"xl"} onClick={close}>
-              Batal
-            </Button>
             <Button
+              disabled={!nameRoom}
               loaderPosition="center"
               loading={loading ? true : false}
               radius={"xl"}
-              color="green"
+              color="yellow"
+              bg={MainColor.yellow}
               onClick={() => onSave()}
+              style={{
+                transition: "0.5s",
+              }}
             >
               Simpan
             </Button>

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

@@ -4,30 +4,58 @@ import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
 import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import { AppShell } from "@mantine/core";
+import { ActionIcon, AppShell } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
+import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
-import React from "react";
+import React, { useState } from "react";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 
 export default function LayoutColab_DetailProyekSaya({
   children,
-  dataColab,
+  colabId,
 }: {
   children: React.ReactNode;
-  dataColab: MODEL_COLLABORATION;
+  colabId: string
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Proyek",
+      icon: <IconEdit />,
+      path: RouterColab.edit + colabId,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentColab_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Proyek Saya"
-            icon={<IconEdit />}
+            customButtonRight={
-            route2={RouterColab.edit + dataColab?.id}
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+                         
+
+              >
+                <IconDotsVertical />
+              </ActionIcon>
+            }
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+      opened={openDrawer}
+      close={() => setOpenDrawer(false)}
+      component={listPage}
+      
+      />
     </>
   );
 }

src/app_modules/colab/edit/index.tsx

@@ -18,6 +18,8 @@ import colab_funEditById from "../fun/edit/fun_edit_by_id";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Colab_Edit({
   selectedData,
@@ -29,9 +31,15 @@ export default function Colab_Edit({
   const [value, setValue] = useState(selectedData);
   return (
     <>
-      <Stack px={"sm"}>
+      <Stack px={"sm"} py={"md"}>
         {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
         <TextInput
+          maxLength={100}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul"
           withAsterisk
           placeholder="Masukan judul proyek"
@@ -45,6 +53,12 @@ export default function Colab_Edit({
         />
 
         <TextInput
+          maxLength={100}
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Lokasi"
           withAsterisk
           placeholder="Masukan lokasi proyek"
@@ -58,6 +72,11 @@ export default function Colab_Edit({
         />
 
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           placeholder="Pilih kategori industri"
           label="Pilih Industri"
           withAsterisk
@@ -97,32 +116,55 @@ export default function Colab_Edit({
           }}
         /> */}
 
-        <Textarea
+        <Stack spacing={5}>
-          label="Tujuan Proyek"
+          <Textarea
-          placeholder="Masukan tujuan proyek"
+            styles={{
-          withAsterisk
+              label: {
-          minRows={5}
+                color: "white",
-          value={value.purpose}
+              },
-          onChange={(val) =>
+            }}
-            setValue({
+            label="Tujuan Proyek"
-              ...value,
+            placeholder="Masukan tujuan proyek"
-              purpose: val.currentTarget.value,
+            withAsterisk
-            })
+            minRows={5}
-          }
+            value={value.purpose}
-        />
+            onChange={(val) =>
+              setValue({
+                ...value,
+                purpose: val.currentTarget.value,
+              })
+            }
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.purpose.length}
+            maxInput={500}
+          />
+        </Stack>
+
+        <Stack spacing={5}>
+          <Textarea
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
+            label="Keuntungan "
+            placeholder="Masukan keuntungan dalam proyek"
+            minRows={5}
+            value={value.benefit}
+            onChange={(val) =>
+              setValue({
+                ...value,
+                benefit: val.currentTarget.value,
+              })
+            }
+          />
+          <ComponentGlobal_InputCountDown
+            lengthInput={value.benefit.length}
+            maxInput={500}
+          />
+        </Stack>
 
-        <Textarea
-          label="Keuntungan "
-          placeholder="Masukan keuntungan dalam proyek"
-          minRows={5}
-          value={value.benefit}
-          onChange={(val) =>
-            setValue({
-              ...value,
-              benefit: val.currentTarget.value,
-            })
-          }
-        />
         <ButtonAction value={value as any} />
       </Stack>
     </>
@@ -159,11 +201,25 @@ function ButtonAction({ value }: { value: any }) {
   return (
     <>
       <Button
+        disabled={
+          !value.title ||
+          !value.lokasi ||
+          !value.purpose ||
+          !value.benefit ||
+          value.projectCollaborationMaster_IndustriId === 0
+            ? true
+            : false
+        }
         loaderPosition="center"
         loading={loading ? true : false}
         mt={"xl"}
         radius={"xl"}
         onClick={() => onUpdate()}
+        bg={MainColor.yellow}
+        color={"yellow"}
+        style={{
+          transition: "0.5s",
+        }}
       >
         Update
       </Button>

src/app_modules/colab/edit/layout.tsx

@@ -3,6 +3,8 @@
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import React from "react";
 import ComponentColab_HeaderTamplate from "../component/header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutColab_Edit({
   children,
@@ -11,9 +13,9 @@ export default function LayoutColab_Edit({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentColab_HeaderTamplate title="Edit Proyek" />}>
+      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Proyek" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/colab/fun/get/get_list_all_proyek.ts

@@ -2,8 +2,17 @@
 
 import prisma from "@/app/lib/prisma";
 
-export default async function colab_getListAllProyek() {
+export default async function colab_getListAllProyek({
+  page,
+}: {
+  page: number;
+}) {
+  const takeData = 3;
+  const skipData = page * takeData - takeData;
+
   const data = await prisma.projectCollaboration.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },

src/app_modules/colab/fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id.ts

@@ -3,16 +3,30 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function colab_getListPartisipasiProyekByAuthorId() {
+export default async function colab_getListPartisipasiProyekByAuthorId({
-  const AuthorId = await user_getOneUserId();
+  page,
+}: {
+  page: number;
+}) {
+  const authorId = await user_getOneUserId();
 
-  const get = await prisma.projectCollaboration_Partisipasi.findMany({
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.projectCollaboration_Partisipasi.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },
     where: {
-      userId: AuthorId,
+      userId: authorId,
       isActive: true,
+      AND: {
+        ProjectCollaboration: {
+          isActive: true,
+        },
+      },
     },
     select: {
       id: true,
@@ -42,6 +56,5 @@ export default async function colab_getListPartisipasiProyekByAuthorId() {
     },
   });
 
-  if (!get) return { status: 400, message: "Gagal mengambil data" };
+  return data;
-  return { data: get, status: 200, message: "Berhasil mengambil data" };
 }

src/app_modules/colab/fun/get/pasrtisipan/get_list_proyek_saya_by_author_id.ts

@@ -3,11 +3,21 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function colab_getListAllProyekSayaByAuthorId() {
+export default async function colab_getListAllProyekSayaByAuthorId({
-  const AuthorId = await user_getOneUserId();
+  page,
-  const get = await prisma.projectCollaboration.findMany({
+}: {
+  page: number;
+}) {
+  const authorId = await user_getOneUserId();
+
+  const takeData = 5;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.projectCollaboration.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: { createdAt: "desc" },
-    where: { userId: AuthorId, isActive: true },
+    where: { userId: authorId, isActive: true },
     select: {
       id: true,
       isActive: true,
@@ -31,6 +41,5 @@ export default async function colab_getListAllProyekSayaByAuthorId() {
     },
   });
 
-  if (!get) return { status: 400, message: "Gagal mengambil data" };
+  return data;
-  return { data: get, status: 200, message: "Berhasil mengambil data" };
 }

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

@@ -3,10 +3,14 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function colab_getListRoomChatByAuthorId() {
+export default async function colab_getListRoomChatByAuthorId({page}: {page: number}) {
   const userLoginId = await user_getOneUserId();
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
 
   const listRoom = await prisma.projectCollaboration_AnggotaRoomChat.findMany({
+    take: takeData,
+    skip: skipData,
     orderBy: {
       createdAt: "desc",
     },
@@ -32,34 +36,5 @@ export default async function colab_getListRoomChatByAuthorId() {
   // console.log(listRoom);
 
   return listRoom;
-  // const get = await prisma.projectCollaboration_RoomChat.findMany({
+
-  //   where: {
-  //     userId: userLoginId,
-  //     AND: [
-  //       {
-  //         ProjectCollaboration_AnggotaRoomChat: {
-  //           every: {
-  //             userId: userLoginId,
-  //           },
-  //         },
-  //       },
-  //     ],
-  //   },
-  //   select: {
-  //     id: true,
-  //     name: true,
-  //     // isActive: true,
-  //     // Author: true,
-  //     // userId: true,
-  //     // ProjectCollaboration: true,
-  //     // projectCollaborationId: true,
-  //     ProjectCollaboration_AnggotaRoomChat: {
-  //       select: {
-  //         userId: true,
-  //         User: true,
-  //       },
-  //     },
-  //   },
-  // });
-  // return get;
 }

src/app_modules/colab/main/beranda.tsx

@@ -1,22 +1,20 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import {
-  ActionIcon,
-  Affix,
-  Card,
-  Stack,
-  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_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
-import ComponentColab_JumlahPartisipan from "../component/card_view/card_section_jumlah_partisipan";
-import { MODEL_COLLABORATION } from "../model/interface";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
+import {
+  Box,
+  Center,
+  Loader
+} from "@mantine/core";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
+import { MODEL_COLLABORATION } from "../model/interface";
+import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
 
 export default function Colab_Beranda({
   listData,
@@ -25,57 +23,47 @@ export default function Colab_Beranda({
   listData: MODEL_COLLABORATION[];
   userLoginId: string;
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listData);
-  const [scroll, scrollTo] = useWindowScroll();
+  const [activePage, setActivePage] = useState(1);
-  const [loadingCreate, setLoadingCreate] = useState(false);
 
   return (
     <>
-      {/* <Affix position={{ bottom: rem(150), right: rem(30) }}>
+      <Box>
-        <ActionIcon
+        <ComponentGlobal_CreateButton path={RouterColab.create} />
-          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> */}
 
-      <ComponentGlobal_CreateButton path={RouterColab.create} />
+        {_.isEmpty(data) ? (
+          <ComponentGlobal_IsEmptyData />
+        ) : (
+          <Box>
+            <ScrollOnly
+              height="82vh"
+              renderLoading={() => (
+                <Center mt={"lg"}>
+                  <Loader color={"yellow"} />
+                </Center>
+              )}
+              data={data}
+              setData={setData}
+              moreData={async () => {
+                const loadData = await colab_getListAllProyek({
+                  page: activePage + 1,
+                });
 
-      {/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
+                setActivePage((val) => val + 1);
 
-      {listData.map((e, i) => (
+                return loadData;
-        <Card key={e.id} withBorder shadow="lg" mb={"sm"} radius={"md"}>
+              }}
-          <Stack>
+            >
-            <ComponentColab_CardSectionHeaderAuthorName
+              {(item) => (
-              authorName={e?.Author?.Profile?.name}
+                <ComponentColab_CardBeranda
-              imagesId={e?.Author?.Profile?.imagesId}
+                  data={item}
-              profileId={e?.Author?.Profile?.id}
+                  userLoginId={userLoginId}
-              isAuthor={userLoginId === e.Author.id ? true : false}
+                />
-              colabId={e.id}
+              )}
-            />
+            </ScrollOnly>
-            <ComponentColab_CardSectionData
+          </Box>
-              colabId={e.id}
+        )}
-              path={RouterColab.main_detail}
+      </Box>
-              data={e}
-            />
-            <ComponentColab_JumlahPartisipan
-              jumlah={e.ProjectCollaboration_Partisipasi}
-            />
-          </Stack>
-        </Card>
-      ))}
     </>
   );
 }

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

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  Box,
   Center,
   Grid,
   Group,
@@ -21,64 +22,52 @@ import {
 import { useState } from "react";
 import _ from "lodash";
 import ComponentColab_IsEmptyData from "../../component/is_empty_data";
+import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ScrollOnly } from "next-scroll-loader";
+import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
+import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
 
 export default function Colab_GrupDiskus({
   listRoom,
 }: {
-  listRoom?: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
+  listRoom: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
 }) {
-  const router = useRouter();
+  const [data, setData] = useState(listRoom);
-  const [loading, setLoading] = useState(false);
+  const [activePage, setActivePage] = useState(1);
-  const [idRoom, setIdRoom] = useState("");
-
-  if (_.isEmpty(listRoom))
-    return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
 
   return (
     <>
-      <Stack>
+      <Box>
-        {listRoom?.map((e, i) => (
+        {_.isEmpty(data) ? (
-          <Paper
+          <ComponentGlobal_IsEmptyData />
-            key={i}
+        ) : (
-            withBorder
+          <Box>
-            shadow="lg"
+            <ScrollOnly
-            p={"md"}
+              height="82vh"
-            onClick={() => {
+              renderLoading={() => (
-              router.push(
+                <Center mt={"lg"}>
-                RouterColab.group_chat + e?.ProjectCollaboration_RoomChat.id
+                  <Loader color={"yellow"} />
-              );
-              setIdRoom(e?.ProjectCollaboration_RoomChat.id);
-              setLoading(true);
-            }}
-          >
-            <Grid align="center" h={"100%"}>
-              <Grid.Col span={"auto"}>
-                <Stack spacing={0}>
-                  <Text fw={"bold"} lineClamp={1}>
-                    {e?.ProjectCollaboration_RoomChat?.name}
-                  </Text>
-                  <Text fz={"xs"} c={"gray"}>
-                    {
-                      e?.ProjectCollaboration_RoomChat
-                        ?.ProjectCollaboration_AnggotaRoomChat.length
-                    }{" "}
-                    Anggota
-                  </Text>
-                </Stack>
-              </Grid.Col>
-              <Grid.Col span={"content"}>
-                <Center>
-                  {e?.ProjectCollaboration_RoomChat?.id === idRoom ? (
-                    <Loader color="gray" size={20} />
-                  ) : (
-                    <IconChevronRight color="gray" />
-                  )}
                 </Center>
-              </Grid.Col>
+              )}
-            </Grid>
+              data={data}
-          </Paper>
+              setData={setData}
-        ))}
+              moreData={async () => {
-      </Stack>
+                const loadData = await colab_getListRoomChatByAuthorId({
+                  page: activePage + 1,
+                });
+
+                setActivePage((val) => val + 1);
+
+                return loadData;
+              }}
+            >
+              {(item) => <ComponentColab_CardGrup data={item} />}
+            </ScrollOnly>
+          </Box>
+        )}
+      </Box>
     </>
   );
 }

src/app_modules/colab/main/layout.tsx

@@ -66,18 +66,18 @@ export default function LayoutColab_Main({
       path: RouterColab.grup_diskusi,
       icon: <IconMessages />,
     },
-    {
+    // {
-      id: 5,
+    //   id: 5,
-      name: "Notifikasi",
+    //   name: "Notifikasi",
-      path: RouterColab.notifikasi,
+    //   path: RouterColab.notifikasi,
-      icon: cekNotif ? (
+    //   icon: cekNotif ? (
-        <Indicator processing color="orange">
+    //     <Indicator processing color="orange">
-          <IconBell />
+    //       <IconBell />
-        </Indicator>
+    //     </Indicator>
-      ) : (
+    //   ) : (
-        <IconBell />
+    //     <IconBell />
-      ),
+    //   ),
-    },
+    // },
   ];
 
   return (
@@ -90,7 +90,7 @@ export default function LayoutColab_Main({
           />
         }
         footer={
-          <SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
+          <SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
             {listFooter.map((e) => (
               <Stack key={e.id} align="center" justify="center" spacing={0}>
                 <ActionIcon

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

@@ -11,6 +11,7 @@ import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_PARTISIPASI,
 } from "../../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Colab_Proyek({
   listPartisipasiUser,
@@ -43,15 +44,36 @@ export default function Colab_Proyek({
   ];
 
   return (
-    <Tabs variant="pills" value={activeTab} onTabChange={setActiveTab}>
+    <Tabs
+      variant="pills"
+      value={activeTab}
+      onTabChange={setActiveTab}
+      styles={{
+        tabsList: {
+          backgroundColor: MainColor.darkblue,
+          position: "sticky",
+          top: 0,
+          zIndex: 99,
+        },
+      }}
+    >
       <Stack>
         <Tabs.List grow>
           {listTabs.map((e) => (
             <Tabs.Tab
               key={e.id}
               value={e.value}
-              bg={activeTab === e.value ? "blue" : "gray.2"}
+              fw={"bold"}
-              fw={activeTab === e.value ? "bold" : "normal"}
+              c={"black"}
+              style={{
+                transition: "0.5s",
+                backgroundColor:
+                  activeTab === e.value ? MainColor.yellow : "white",
+                border:
+                  activeTab === e.value
+                    ? `1px solid ${AccentColor.yellow}`
+                    : `1px solid white`,
+              }}
             >
               <Stack align="center" justify="center" spacing={0}>
                 {e.icon}

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

@@ -1,50 +1,57 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { Card, Stack } from "@mantine/core";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import { Box, Center, Loader } from "@mantine/core";
-import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
-import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
-import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
-import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import { ComponentColab_CardSemuaPartisipan } from "../../component/card_view/card_semua_partisipan";
+import colab_getListPartisipasiProyekByAuthorId from "../../fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
+import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
 
 export default function Colab_PartisipasiProyek({
   listPartisipasiUser,
 }: {
   listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
 }) {
-  if (_.isEmpty(listPartisipasiUser))
+  const [data, setData] = useState(listPartisipasiUser);
-    return <ComponentColab_IsEmptyData text="Tidak ikut berpartisipasi" />;
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {listPartisipasiUser.map((e, i) => (
+      {_.isEmpty(data) ? (
-        <Card
+        <ComponentGlobal_IsEmptyData />
-          key={i}
+      ) : (
-          withBorder
+        // --- Main component --- //
-          shadow="lg"
+        <Box>
-          mb={"lg"}
+          <ScrollOnly
-          radius={"md"}
+            height="73vh"
-          style={{ borderColor: "indigo", borderWidth: "0.5px" }}
+            renderLoading={() => (
-        >
+              <Center mt={"lg"}>
-          <Stack>
+                <Loader color={"yellow"} />
-            <ComponentColab_CardSectionHeaderAuthorName
+              </Center>
-              authorName={e?.ProjectCollaboration.Author.Profile.name}
+            )}
-              imagesId={e?.ProjectCollaboration.Author.Profile.imagesId}
+            data={data}
-              profileId={e?.ProjectCollaboration.Author.Profile.id}
+            setData={setData}
-            />
+            moreData={async () => {
-            <ComponentColab_CardSectionData
+              const loadData = await colab_getListPartisipasiProyekByAuthorId({
-              colabId={e?.ProjectCollaboration.id}
+                page: activePage + 1,
-              path={RouterColab.detail_partisipasi_proyek}
+              });
-              data={e?.ProjectCollaboration}
+              setActivePage((val) => val + 1);
-            />
+
-            <ComponentColab_JumlahPartisipan
+              return loadData;
-              jumlah={e?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
+            }}
-            />
+          >
-          </Stack>
+            {(item) => (
-        </Card>
+              <ComponentColab_CardSemuaPartisipan
-      ))}
+                data={item}
+                path={RouterColab.detail_partisipasi_proyek}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

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

@@ -1,46 +1,62 @@
 "use client";
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { Card, Stack } from "@mantine/core";
+import { Box, Card, Center, Loader, 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/card_section_jumlah_partisipan";
 import { MODEL_COLLABORATION } from "../../model/interface";
 import _ from "lodash";
 import ComponentColab_IsEmptyData from "../../component/is_empty_data";
+import { useState } from "react";
+import { ComponentColab_CardProyekSaya } from "../../component/card_view/card_proyek_saya";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { event_getAllDraft } from "@/app_modules/event/fun/get/status/get_all_draft";
+import { ScrollOnly } from "next-scroll-loader";
+import colab_getListAllProyekSayaByAuthorId from "../../fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
 
 export default function Colab_ProyekSaya({
   listProyekSaya,
 }: {
   listProyekSaya: MODEL_COLLABORATION[];
 }) {
-  if (_.isEmpty(listProyekSaya))
+  const [data, setData] = useState(listProyekSaya);
-    return <ComponentColab_IsEmptyData text="Tidak ada data" />;
+  const [activePage, setActivePage] = useState(1);
 
   return (
     <>
-      {listProyekSaya.map((e, i) => (
+      {_.isEmpty(data) ? (
-        <Card
+        <ComponentGlobal_IsEmptyData />
-          key={i}
+      ) : (
-          withBorder
+        // --- Main component --- //
-          shadow="lg"
+        <Box >
-          mb={"lg"}
+          <ScrollOnly
-          radius={"md"}
+            height="73vh"
-          style={{ borderColor: "violet", borderWidth: "0.5px" }}
+            renderLoading={() => (
-        >
+              <Center mt={"lg"}>
-          <Stack>
+                <Loader color={"yellow"} />
-            <ComponentColab_CardSectionData
+              </Center>
-              colabId={e.id}
+            )}
-              path={RouterColab.detail_proyek_saya}
+            data={data}
-              data={e}
+            setData={setData}
+            moreData={async () => {
+              const loadData = await colab_getListAllProyekSayaByAuthorId({
+                page: activePage + 1,
+              });
+              setActivePage((val) => val + 1);
 
-            />
+              return loadData;
-            <ComponentColab_JumlahPartisipan
+            }}
-              jumlah={e.ProjectCollaboration_Partisipasi}
+          >
-            />
+            {(item) => (
-          </Stack>
+              <ComponentColab_CardProyekSaya
-        </Card>
+                data={item}
-      ))}
+                path={RouterColab.detail_proyek_saya}
+              />
+            )}
+          </ScrollOnly>
+        </Box>
+      )}
     </>
   );
 }

src/app_modules/event/fun/get/get_list_all_publish.ts

@@ -6,6 +6,7 @@ import _ from "lodash";
 export async function event_getListAllPublish({ page }: { page: number }) {
   const takeData = 10;
   const skipData = page * takeData - takeData;
+  
   const data = await prisma.event.findMany({
     take: takeData,
     skip: skipData,

src/app_modules/event/main/beranda.tsx

@@ -1,47 +1,20 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import {
-  ActionIcon,
-  Affix,
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Card,
-  Center,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  Loader,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  Title,
-  rem,
-} from "@mantine/core";
-import moment from "moment";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { MODEL_EVENT } from "../model/interface";
-import ComponentEvent_BoxListStatus from "../component/box_list_status";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
-import _ from "lodash";
-import { IconCirclePlus, IconPencilPlus } from "@tabler/icons-react";
-import ComponentEvent_IsEmptyData from "../component/is_empty_data";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
-import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
-import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import {
-import ComponentVote_CardViewPublish from "@/app_modules/vote/component/card_view_publish";
+  Box,
-import { vote_getAllListPublish } from "@/app_modules/vote/fun/get/get_all_list_publish";
+  Center,
+  Loader
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
 import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
+import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
+import { MODEL_EVENT } from "../model/interface";
 
 export default function Event_Beranda({
   dataEvent,

src/app_modules/event/main/status_page/draft.tsx

@@ -1,18 +1,14 @@
 "use client";
 
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
-import { Box, Center, Group, Loader, Paper, Stack, Text, Title } from "@mantine/core";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import moment from "moment";
+import { Box, Center, Loader } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import _ from "lodash";
-import { MODEL_EVENT } from "../../model/interface";
+import { ScrollOnly } from "next-scroll-loader";
 import { useState } from "react";
 import ComponentEvent_BoxListStatus from "../../component/box_list_status";
-import _ from "lodash";
-import ComponentEvent_IsEmptyData from "../../component/is_empty_data";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { ScrollOnly } from "next-scroll-loader";
-import { event_getAllReview } from "../../fun/get/status/get_all_review";
 import { event_getAllDraft } from "../../fun/get/status/get_all_draft";
+import { MODEL_EVENT } from "../../model/interface";
 
 export default function Event_StatusDraft({
   listDraft,

src/app_modules/forum/main/layout.tsx

@@ -30,7 +30,7 @@ export default function LayoutForum_Main({
       <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
-            title="FORUM"
+            title="Forum"
             iconRight={
               <ActionIcon
                 radius={"xl"}

src/app_modules/job/main/layout.tsx

@@ -49,7 +49,7 @@ export default function LayoutJob_Main({
       <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
-            title="JOB"
+            title="Job"
             routerLeft={RouterHome.main_home}
           />
         }