Forum

Add:
- api-client/api-forum

Fix:
- Integrasi API: create dan beranda file

### No Issue

app.config.js

@@ -26,6 +26,7 @@ export default {
     },
     edgeToEdgeEnabled: true,
     package: 'com.bip.hipmimobileapp',
+    // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
   },
 
   web: {

app/(application)/(user)/_layout.tsx

@@ -118,13 +118,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-        <Stack.Screen
+        {/* <Stack.Screen
           name="collaboration/[id]/detail-participant"
           options={{
             title: "Partisipasi Proyek",
             headerLeft: () => <BackButton />,
           }}
-        />
+        /> */}
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
@@ -139,6 +139,13 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="collaboration/[id]/select-of-participants"
+          options={{
+            title: "Pilih Partisipan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Collaboration Section ========= */}
 

app/(application)/(user)/collaboration/(tabs)/group.tsx

@@ -1,38 +1,96 @@
-import { BaseBox, Grid, TextCustom } from "@/components";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
 import { Feather } from "@expo/vector-icons";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useState, useCallback } from "react";
 
 export default function CollaborationGroup() {
-  
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category: "group",
+        authorId: user?.id,
+      });
+      
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
 
   return (
     <ViewWrapper hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {loadingGetData ? (
-        <BaseBox
+        <LoaderCustom />
-          key={index}
+      ) : _.isEmpty(listData) ? (
-          paddingBlock={5}
+        <TextCustom align="center">Tidak ada data</TextCustom>
-          href={`/collaboration/${index}/${generateProjectName()}/room-chat`}
+      ) : (
-        >
+        <StackCustom>
-          <Grid>
+          {listData?.map((item: any, index: any) => (
-            <Grid.Col span={10}>
+            <BaseBox
-              <TextCustom bold>{generateProjectName()}</TextCustom>
+              key={index}
-              <TextCustom size="small">2 Anggota</TextCustom>
+              paddingBlock={5}
-            </Grid.Col>
+              href={`/collaboration/${item?.ProjectCollaboration_RoomChat?.id}/${item?.ProjectCollaboration_RoomChat?.name}/room-chat`}
-            <Grid.Col
-              span={2}
-              style={{ alignItems: "flex-end", justifyContent: "center" }}
             >
-              <Feather name="chevron-right" size={20} color={MainColor.white} />
+              <Grid>
-            </Grid.Col>
+                <Grid.Col span={10}>
-          </Grid>
+                  <TextCustom bold>
-        </BaseBox>
+                    {item?.ProjectCollaboration_RoomChat?.name}
-      ))}
+                  </TextCustom>
+                  <TextCustom size="small">
+                    {
+                      item?.ProjectCollaboration_RoomChat
+                        ?.ProjectCollaboration_AnggotaRoomChat?.length
+                    }{" "}
+                    Anggota
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "flex-end", justifyContent: "center" }}
+                >
+                  <Feather
+                    name="chevron-right"
+                    size={20}
+                    color={MainColor.white}
+                  />
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))}
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }
 
-
 function generateProjectName() {
   const adjectives = [
     "Blue",
@@ -65,4 +123,4 @@ function generateProjectName() {
   const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
 
   return randomAdjective + randomNoun;
-}
+}

app/(application)/(user)/collaboration/(tabs)/index.tsx

@@ -23,7 +23,9 @@ export default function CollaborationBeranda() {
   const onLoadData = async () => {
     try {
       setLoadingGetData(true);
-      const response = await apiCollaborationGetAll();
+      const response = await apiCollaborationGetAll({
+        category: "beranda",
+      });
 
       setListData(response.data);
     } catch (error) {
@@ -32,6 +34,7 @@ export default function CollaborationBeranda() {
       setLoadingGetData(false);
     }
   };
+  
   return (
     <>
       <ViewWrapper

app/(application)/(user)/collaboration/(tabs)/participant.tsx

@@ -1,15 +1,46 @@
-import { ButtonCustom, Spacing } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
-import { useState } from "react";
+import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function CollaborationParticipans() {
-  const [activeCategory, setActiveCategory] = useState<string | null>(
+  const [activeCategory, setActiveCategory] = useState<
-    "participant"
+    "participant" | "my-project"
+  >("participant");
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory])
   );
 
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetAll({
+        category:
+          activeCategory === "participant" ? "participant" : "my-project",
+        authorId: user?.id,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
   const handlePress = (item: any) => {
     setActiveCategory(item);
     // tambahkan logika lain seperti filter dsb.
@@ -41,13 +72,13 @@ export default function CollaborationParticipans() {
       <Spacing width={"2%"} />
       <ButtonCustom
         backgroundColor={
-          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+          activeCategory === "my-project" ? MainColor.yellow : AccentColor.blue
         }
         textColor={
-          activeCategory === "main" ? MainColor.black : MainColor.white
+          activeCategory === "my-project" ? MainColor.black : MainColor.white
         }
         style={{ width: "49%" }}
-        onPress={() => handlePress("main")}
+        onPress={() => handlePress("my-project")}
       >
         Proyek Saya
       </ButtonCustom>
@@ -56,22 +87,27 @@ export default function CollaborationParticipans() {
 
   return (
     <ViewWrapper hideFooter headerComponent={headerComponent}>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {loadingGetData ? (
-        <Collaboration_BoxPublishSection
+        <LoaderCustom />
-          key={index.toString()}
+      ) : _.isEmpty(listData) ? (
-          id={index.toString()}
+        <TextCustom align="center">Tidak ada data</TextCustom>
-          username={` ${
+      ) : activeCategory === "participant" ? (
-            activeCategory === "participant"
+        listData?.map((item: any, index: number) => (
-              ? "Partisipasi Proyek"
+          <Collaboration_BoxPublishSection
-              : "Proyek Saya"
+            key={index.toString()}
-          }`}
+            data={item?.ProjectCollaboration}
-          href={
+            href={`/collaboration/${item?.ProjectCollaboration?.id}/detail-participant`}
-            activeCategory === "participant"
+          />
-              ? `/collaboration/${index}/detail-participant`
+        ))
-              : `/collaboration/${index}/detail-project-main`
+      ) : (
-          }
+        listData?.map((item: any, index: number) => (
-        />
+          <Collaboration_BoxPublishSection
-      ))}
+            key={index.toString()}
+            data={item}
+            href={`/collaboration/${item?.id}/detail-project-main`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/collaboration/[id]/[detail]/info.tsx

@@ -1,17 +1,41 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   AvatarUsernameAndOtherComponent,
   BackButton,
+  BaseBox,
   BoxWithHeaderSection,
   Grid,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { Stack, useLocalSearchParams } from "expo-router";
+import { apiCollaborationGroup } from "@/service/api-client/api-collaboration";
+import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useState, useCallback } from "react";
 
 export default function CollaborationRoomInfo() {
   const { id, detail } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGroup({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <>
       <Stack.Screen
@@ -24,7 +48,7 @@ export default function CollaborationRoomInfo() {
       <ViewWrapper>
         <BoxWithHeaderSection>
           <StackCustom>
-            {listData.map((item, index) => (
+            {listData({ data }).map((item, index) => (
               <Grid key={index}>
                 <Grid.Col span={4}>
                   <TextCustom bold>{item.title}</TextCustom>
@@ -37,37 +61,42 @@ export default function CollaborationRoomInfo() {
           </StackCustom>
         </BoxWithHeaderSection>
 
-        <BoxWithHeaderSection>
+        <BaseBox>
-          {Array.from({ length: 10 }).map((_, index) => (
+          <StackCustom gap={10}>
-            <AvatarUsernameAndOtherComponent key={index} avatarHref={`/profile/${index}`} />
+            {data?.ProjectCollaboration_AnggotaRoomChat?.map(
-          ))}
+              (item: any, index: number) => (
-        </BoxWithHeaderSection>
+                <AvatarUsernameAndOtherComponent
+                  key={index}
+                  avatarHref={`/profile/${item?.User?.Profile?.id}`}
+                  name={item?.User?.username}
+                  avatar={item?.User?.Profile?.imageId}
+                />
+              )
+            )}
+          </StackCustom>
+        </BaseBox>
       </ViewWrapper>
     </>
   );
 }
 
-const listData = [
+const listData = ({ data }: { data: any }) => [
   {
     title: "Judul Proyek",
-    value: "Judul Proyek",
+    value: data?.ProjectCollaboration?.title || "-",
   },
   {
     title: "Industri",
-    value: "Pilihan Industri",
+    value:
-  },
+      data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name ||
-  {
+      "-",
-    title: "Deskripsi",
-    value: "Deskripsi Proyek",
   },
   {
     title: "Tujuan Proyek",
-    value:
+    value: data?.ProjectCollaboration?.purpose || "-",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
   {
     title: "Keuntungan Proyek",
-    value:
+    value: data?.ProjectCollaboration?.benefit || "-",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   },
 ];

app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx

@@ -1,68 +1,13 @@
-import {
+import { BackButton } from "@/components";
-  BackButton,
+import { MainColor } from "@/constants/color-palet";
-  BoxButtonOnFooter,
-  Grid,
-  TextCustom,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import { AccentColor, MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import ChatScreen from "@/screens/Collaboration/GroupChatSection";
 import { Feather } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
 
 export default function CollaborationRoomChat() {
   const { id, detail } = useLocalSearchParams();
 
-  const inputChat = () => {
-    return (
-      <>
-        <BoxButtonOnFooter>
-          {/* <View style={{flexDirection: 'row', alignItems: 'center'}}>
-            <TextInputCustom placeholder="Ketik pesan..." />
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => console.log("Send")}
-              style={{
-                backgroundColor: AccentColor.blue,
-                padding: 10,
-                borderRadius: 50,
-              }}
-            >
-              <Feather name="send" size={30} color={MainColor.white} />
-            </TouchableOpacity>
-          </View> */}
-          <Grid>
-            <Grid.Col span={9}>
-              <TextInputCustom placeholder="Ketik pesan..." />
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <View />
-            </Grid.Col>
-            <Grid.Col span={2} style={{ alignItems: "center" }}>
-              <TouchableOpacity
-                activeOpacity={0.5}
-                onPress={() => console.log("Send")}
-                style={{
-                  backgroundColor: AccentColor.blue,
-                  padding: 10,
-                  borderRadius: 50,
-                }}
-              >
-                <Feather
-                  name="send"
-                  size={30}
-                  color={MainColor.white}
-                />
-              </TouchableOpacity>
-            </Grid.Col>
-          </Grid>
-        </BoxButtonOnFooter>
-      </>
-    );
-  };
-
   return (
     <>
       <Stack.Screen
@@ -79,114 +24,8 @@ export default function CollaborationRoomChat() {
           ),
         }}
       />
-      <ViewWrapper footerComponent={inputChat()}>
+
-        {dummyData.map((item, index) => (
+      <ChatScreen id={id as string} />
-          <View
-            key={index}
-            style={[
-              styles.messageRow,
-              item.role === 1 ? styles.rightAlign : styles.leftAlign,
-            ]}
-          >
-            <View
-              style={[
-                styles.bubble,
-                item.role === 1 ? styles.bubbleRight : styles.bubbleLeft,
-              ]}
-            >
-              <TextCustom style={styles.sender}>{item.nama}</TextCustom>
-              <TextCustom style={styles.message}>{item.chat}</TextCustom>
-              <TextCustom style={styles.time}>
-                {new Date(item.time).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
-              </TextCustom>
-            </View>
-          </View>
-        ))}
-        {/* <TextInputCustom placeholder="Ketik pesan..." />
-        <Spacing/> */}
-      </ViewWrapper>
     </>
   );
 }
-
-const dummyData = [
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Hai! Kamu udah lihat dokumen proyek yang baru?",
-    time: "2025-07-24T09:01:15Z",
-  },
-  {
-    nama: "Rafi",
-    role: 2,
-    chat: "Halo! Iya, aku baru aja baca. Kayaknya kita harus revisi bagian akhir deh.",
-    time: "2025-07-24T09:02:03Z",
-  },
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Setuju. Aku juga kurang sreg sama penutupnya.",
-    time: "2025-07-24T09:02:45Z",
-  },
-  {
-    nama: "Rafi",
-    role: 2,
-    chat: "Oke, aku coba edit malam ini ya. Nanti aku share ulang versinya.",
-    time: "2025-07-24T09:03:10Z",
-  },
-  {
-    nama: "Dina",
-    role: 1,
-    chat: "Siap, makasih ya. Jangan begadang!",
-    time: "2025-07-24T09:03:30Z",
-  },
-];
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-  },
-  messageRow: {
-    flexDirection: "row",
-    marginBottom: 12,
-  },
-  rightAlign: {
-    justifyContent: "flex-end",
-  },
-  leftAlign: {
-    justifyContent: "flex-start",
-  },
-  bubble: {
-    maxWidth: "75%",
-    padding: 10,
-    borderRadius: 12,
-  },
-  bubbleRight: {
-    backgroundColor: "#DCF8C6", // hijau muda
-    borderTopRightRadius: 0,
-  },
-  bubbleLeft: {
-    backgroundColor: "#F0F0F0", // abu-abu terang
-    borderTopLeftRadius: 0,
-  },
-  sender: {
-    fontSize: 12,
-    fontWeight: "bold",
-    marginBottom: 2,
-    color: "#555",
-  },
-  message: {
-    fontSize: 15,
-    color: "#000",
-  },
-  time: {
-    fontSize: 10,
-    color: "#888",
-    textAlign: "right",
-    marginTop: 4,
-  },
-});

app/(application)/(user)/collaboration/[id]/detail-participant.tsx

@@ -1,26 +1,54 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarUsernameAndOtherComponent,
+  BackButton,
-  BaseBox,
+  DotButton,
   DrawerCustom,
-  StackCustom,
+  MenuDrawerDynamicGrid,
-  TextCustom,
+  ViewWrapper
-  ViewWrapper,
 } from "@/components";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import { MaterialIcons } from "@expo/vector-icons";
+import { apiCollaborationGetOne } from "@/service/api-client/api-collaboration";
-import { useLocalSearchParams } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
-import { useState } from "react";
+import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetailParticipant() {
   const { id } = useLocalSearchParams();
   const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+          ),
+        }}
+      />
+
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
+        <Collaboration_BoxDetailSection data={data} />
-        <BaseBox style={{ height: 500 }}>
+        {/* <BaseBox style={{ height: 500 }}>
             <TextCustom align="center" bold size="large">
               Partisipan
             </TextCustom>
@@ -39,13 +67,33 @@ export default function CollaborationDetailParticipant() {
                 }
               />
             ))}
-        </BaseBox>
+        </BaseBox> */}
       </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawerParticipant}
         closeDrawer={() => setOpenDrawerParticipant(false)}
         height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <Ionicons name="people" size={24} color="white" />,
+              label: "Daftar Partisipan",
+              path: `/collaboration/${id}/list-of-participants`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawerParticipant(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* <DrawerCustom
+        isVisible={openDrawerParticipant}
+        closeDrawer={() => setOpenDrawerParticipant(false)}
+        height={"auto"}
       >
         <StackCustom>
           <TextCustom bold>Deskripsi Diri</TextCustom>
@@ -56,7 +104,7 @@ export default function CollaborationDetailParticipant() {
             Temporibus iusto soluta necessitatibus.
           </TextCustom>
         </StackCustom>
-      </DrawerCustom>
+      </DrawerCustom> */}
     </>
   );
 }

app/(application)/(user)/collaboration/[id]/detail-project-main.tsx

@@ -1,30 +1,65 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertDefaultSystem,
   BackButton,
-  ButtonCustom,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   Spacing,
-  StackCustom,
+  ViewWrapper
-  TextCustom,
-  ViewWrapper,
 } from "@/components";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection";
+import {
-import { router, Stack, useLocalSearchParams } from "expo-router";
+  apiCollaborationGetOne
-import { useState } from "react";
+} from "@/service/api-client/api-collaboration";
+import { MaterialIcons } from "@expo/vector-icons";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function CollaborationDetailProjectMain() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+  const [data, setData] = useState<any>();
-  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
 
-  const handleEdit = () => {
+  useFocusEffect(
-    console.log("Edit collaboration");
+    useCallback(() => {
-    router.push("/(application)/(user)/collaboration/(id)/edit");
+      handlerLoadData();
+    }, [id])
+  );
+
+  const handlerLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      await onLoadData();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleSubmit = (item: any) => {
+    console.log("item :", item);
+    router.push(item.path);
+    setOpenDrawer(false);
   };
 
   return (
@@ -37,34 +72,21 @@ export default function CollaborationDetailProjectMain() {
         }}
       />
       <ViewWrapper>
-        <Collaboration_BoxDetailSection id={id as string} />
+        {loadingGetData ? (
-        <Collaboration_MainParticipanSelectedSection
+          <LoaderCustom />
-          selected={selected}
+        ) : (
-          setSelected={setSelected}
+          <>
-          setOpenDrawerParticipant={setOpenDrawerParticipant}
+            <Collaboration_BoxDetailSection data={data} />
-        />
+            {/* <Collaboration_MainParticipanSelectedSection
+              selected={selected}
+              setSelected={setSelected}
+              setOpenDrawerParticipant={setOpenDrawerParticipant}
+              listData={listData as any}
+            /> */}
 
-        <ButtonCustom
+            <Spacing />
-          onPress={() => {
+          </>
-            AlertDefaultSystem({
+        )}
-              title: "Buat Grup",
-              message:
-                "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
-              textLeft: "Tidak",
-              textRight: "Ya",
-              onPressLeft: () => {},
-              onPressRight: () => {
-                router.navigate(
-                  "/(application)/(user)/collaboration/(tabs)/group"
-                );
-                console.log("selected :", selected);
-              },
-            });
-          }}
-        >
-          Buat Grup
-        </ButtonCustom>
-        <Spacing />
       </ViewWrapper>
 
       <DrawerCustom
@@ -76,31 +98,20 @@ export default function CollaborationDetailProjectMain() {
           data={[
             {
               label: "Edit",
-              path: "/(application)/(user)/collaboration/(tabs)/group",
+              path: `/(application)/(user)/collaboration/${id}/edit`,
               icon: <IconEdit />,
             },
+            {
+              label: "Pilih Partisipan",
+              path: `/(application)/(user)/collaboration/${id}/select-of-participants`,
+              icon: <MaterialIcons name="checklist" size={24} color="white" />,
+            },
           ]}
-          onPressItem={(item) => {
+          onPressItem={(item: any) => {
-            handleEdit();
+            handleSubmit(item);
           }}
         />
       </DrawerCustom>
-
-      <DrawerCustom
-        isVisible={openDrawerParticipant}
-        closeDrawer={() => setOpenDrawerParticipant(false)}
-        height={"auto"}
-      >
-        <StackCustom>
-          <TextCustom bold>Deskripsi Diri</TextCustom>
-          <TextCustom>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi,
-            itaque adipisci. Voluptas, sed quod! Ad facere labore voluptates,
-            neque quidem aut reprehenderit ducimus mollitia quisquam temporibus!
-            Temporibus iusto soluta necessitatibus.
-          </TextCustom>
-        </StackCustom>
-      </DrawerCustom>
     </>
   );
 }

app/(application)/(user)/collaboration/[id]/edit.tsx

@@ -1,53 +1,171 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCustom,
+  LoaderCustom,
   SelectCustom,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import {
+  apiCollaborationEditData,
+  apiCollaborationGetOne,
+} from "@/service/api-client/api-collaboration";
+import { apiMasterCollaborationType } from "@/service/api-client/api-master";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function CollaborationEdit() {
+  const { id } = useLocalSearchParams();
+  console.log("id :", id);
+  const [data, setData] = useState<any>();
+  const [listMaster, setListMaster] = useState<any[]>([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      const fetchData = async () => {
+        try {
+          setLoadingData(true);
+          await onLoadData();
+          await onLoadMaster();
+        } catch (error) {
+          console.log("[ERROR]", error);
+        } finally {
+          setLoadingData(false);
+        }
+      };
+      fetchData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiCollaborationGetOne({ id: id as string });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  async function onLoadMaster() {
+    try {
+      const response = await apiMasterCollaborationType();
+      setListMaster(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  }
+
+  const handlerSubmitUpdate = async () => {
+    if (
+      !data?.title ||
+      !data?.lokasi ||
+      !data?.projectCollaborationMaster_IndustriId ||
+      !data?.purpose ||
+      !data?.benefit
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+    
+    try {
+      setIsLoading(true);
+      const response = await apiCollaborationEditData({
+        id: id as string,
+        data: data,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
+      {loadingData ? (
-        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
+        <LoaderCustom />
-        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
+      ) : (
-        <SelectCustom
+        <StackCustom gap={"xs"}>
-          label="Pilih Industri"
+          <TextInputCustom
-          data={[
+            label="Judul"
-            { label: "Industri 1", value: "industri-1" },
+            placeholder="Masukan judul"
-            { label: "Industri 2", value: "industri-2" },
+            required
-            { label: "Industri 3", value: "industri-3" },
+            value={data?.title}
-          ]}
+            onChangeText={(value) => setData({ ...data, title: value })}
-          onChange={(value) => console.log(value)}
+          />
-        />
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukan lokasi"
+            required
+            value={data?.lokasi}
+            onChangeText={(value) => setData({ ...data, lokasi: value })}
+          />
+          <SelectCustom
+            label="Pilih Industri"
+            data={listMaster?.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.projectCollaborationMaster_IndustriId}
+            onChange={(value) =>
+              setData({ ...data, projectCollaborationMaster_IndustriId: value })
+            }
+          />
 
-        <TextAreaCustom
+          <TextAreaCustom
-          required
+            required
-          label="Tujuan Proyek"
+            label="Tujuan Proyek"
-          placeholder="Masukan tujuan proyek"
+            placeholder="Masukan tujuan proyek"
-          showCount
+            showCount
-          maxLength={1000}
+            maxLength={1000}
-        />
+            value={data?.purpose}
+            onChangeText={(value) => setData({ ...data, purpose: value })}
+          />
 
-        <TextAreaCustom
+          <TextAreaCustom
-          required
+            required
-          label="Keuntungan Proyek"
+            label="Keuntungan Proyek"
-          placeholder="Masukan keuntungan proyek"
+            placeholder="Masukan keuntungan proyek"
-          showCount
+            showCount
-          maxLength={1000}
+            maxLength={1000}
-        />
+            value={data?.benefit}
+            onChangeText={(value) => setData({ ...data, benefit: value })}
+          />
 
-        <ButtonCustom
+          <ButtonCustom
-          title="Update"
+            isLoading={isLoading}
-          onPress={() => {
+            title="Update"
-            console.log("Update proyek");
+            onPress={() => {
-            router.back();
+              handlerSubmitUpdate();
-          }}
+            }}
-        />
+          />
-      </StackCustom>
+        </StackCustom>
+      )}
     </ViewWrapper>
   );
 }

app/(application)/(user)/collaboration/[id]/index.tsx

@@ -4,6 +4,7 @@ import {
   ButtonCustom,
   DotButton,
   DrawerCustom,
+  InformationBox,
   LoaderCustom,
   MenuDrawerDynamicGrid,
   ViewWrapper,
@@ -26,7 +27,7 @@ import { useCallback, useState } from "react";
 export default function CollaborationDetail() {
   const { user } = useAuth();
   const { id } = useLocalSearchParams();
-  const [data, setData] = useState();
+  const [data, setData] = useState<any>();
   const [openDrawerMenu, setOpenDrawerMenu] = useState(false);
   const [isParticipant, setIsParticipant] = useState(false);
   const [loadingIsParticipant, setLoadingIsParticipant] = useState(false);
@@ -41,6 +42,7 @@ export default function CollaborationDetail() {
   const onLoadData = async () => {
     try {
       const response = await apiCollaborationGetOne({ id: id as string });
+
       if (response.success) {
         setData(response.data);
       }
@@ -84,17 +86,25 @@ export default function CollaborationDetail() {
           <LoaderCustom />
         ) : (
           <>
+            {user?.id === data?.Author?.id && (
+              <InformationBox
+                text={
+                  "Tombol partisipasi hanya muncul pada proyek milik orang lain"
+                }
+              />
+            )}
             <Collaboration_BoxDetailSection data={data} />
-
+            {user?.id !== data?.Author?.id && (
-            <ButtonCustom
+              <ButtonCustom
-              disabled={isParticipant || loadingIsParticipant}
+                disabled={isParticipant || loadingIsParticipant}
-              onPress={() => {
+                onPress={() => {
-                router.push(`/collaboration/${id}/create-pacticipants`);
+                  router.push(`/collaboration/${id}/create-pacticipants`);
-                //  setOpenDrawerPartisipasi(true);
+                  //  setOpenDrawerPartisipasi(true);
-              }}
+                }}
-            >
+              >
-              {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"}
+                {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"}
-            </ButtonCustom>
+              </ButtonCustom>
+            )}
           </>
         )}
       </ViewWrapper>

app/(application)/(user)/collaboration/[id]/list-of-participants.tsx

@@ -51,7 +51,7 @@ export default function CollaborationListOfParticipants() {
         {loadingGetData ? (
           <LoaderCustom />
         ) : _.isEmpty(listData) ? (
-          <TextCustom align="center">Tidak ada data</TextCustom>
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
         ) : (
           listData?.map((item: any, index: number) => (
             <BaseBox key={index} paddingBlock={5}>

app/(application)/(user)/collaboration/[id]/select-of-participants.tsx

@@ -0,0 +1,251 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+    AlertDefaultSystem,
+    AvatarComp,
+    BaseBox,
+    BoxButtonOnFooter,
+    ButtonCustom,
+    CheckboxCustom,
+    CheckboxGroup,
+    DrawerCustom,
+    Grid,
+    LoaderCustom,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
+import ModalCustom from "@/components/Modal/ModalCustom";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import {
+    apiCollaborationCreateGroup,
+    apiCollaborationGetParticipants,
+} from "@/service/api-client/api-collaboration";
+import { MaterialIcons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
+
+export default function CollaborationSelectOfParticipants() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [description, setDescription] = useState("");
+  const [selected, setSelected] = useState<(string | number)[]>([]);
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [nameGroup, setNameGroup] = useState("");
+  const [openModal, setOpenModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiCollaborationGetParticipants({
+        category: "list",
+        id: id as string,
+      });
+      //   console.log("response :", JSON.stringify(response.data, null, 2));
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlerCreateGroup = async () => {
+    if (_.isEmpty(nameGroup)) {
+      Toast.show({
+        type: "error",
+        text1: "Nama grup tidak boleh kosong",
+      });
+      return;
+    }
+    try {
+      setIsLoading(true);
+      const response = await apiCollaborationCreateGroup({
+        id: id as string,
+        data: {
+          authorId: user?.id,
+          nameGroup: nameGroup,
+          listSelect: selected,
+        },
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Grup berhasil dibuat",
+        });
+        router.push("/(application)/(user)/collaboration/(tabs)/group");
+      } else {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat grup",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlerSubmit = () => {
+    return (
+      <>
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            disabled={_.isEmpty(selected)}
+            onPress={() => {
+              setOpenModal(true);
+              setNameGroup("");
+            }}
+          >
+            Buat Grup
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        footerComponent={_.isEmpty(listData) ? null : handlerSubmit()}
+      >
+        {loadingGetData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center">Tidak ada partisipan</TextCustom>
+        ) : (
+          <StackCustom>
+            <TextCustom size="default" color="red" bold>
+              *{" "}
+              <TextCustom size="small" semiBold>
+                Pilih user yang akan menjadi tim proyek anda
+              </TextCustom>
+            </TextCustom>
+
+            <CheckboxGroup
+              value={selected}
+              onChange={(val: any) => {
+                console.log("val :", val);
+                setSelected(val);
+              }}
+            >
+              {listData?.map((item: any, index: any) => (
+                <View key={index}>
+                  <Grid key={index}>
+                    <Grid.Col
+                      span={2}
+                      style={{ alignItems: "center", justifyContent: "center" }}
+                    >
+                      <CheckboxCustom valueKey={item?.User?.id} />
+                    </Grid.Col>
+                    <Grid.Col span={2} style={{ alignItems: "center" }}>
+                      <AvatarComp
+                        size="base"
+                        fileId={item?.User?.Profile?.imageId}
+                      />
+                    </Grid.Col>
+                    <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                      <TextCustom bold truncate>
+                        {item?.User?.username}
+                      </TextCustom>
+                    </Grid.Col>
+                    <Grid.Col
+                      span={2}
+                      style={{ alignItems: "center", justifyContent: "center" }}
+                    >
+                      <MaterialIcons
+                        name="notes"
+                        size={ICON_SIZE_SMALL}
+                        color="white"
+                        onPress={() => {
+                          setOpenDrawer(true);
+                          setDescription(item?.deskripsi_diri);
+                        }}
+                      />
+                    </Grid.Col>
+                  </Grid>
+                </View>
+              ))}
+            </CheckboxGroup>
+          </StackCustom>
+        )}
+      </ViewWrapper>
+
+      <ModalCustom isVisible={openModal}>
+        <StackCustom gap={0}>
+          <TextAreaCustom
+            placeholder="Nama Grup"
+            value={nameGroup}
+            onChangeText={(val) => setNameGroup(val)}
+          />
+          <Grid>
+            <Grid.Col span={6} style={{ paddingRight: 10 }}>
+              <ButtonCustom
+                backgroundColor="gray"
+                onPress={() => {
+                  setOpenModal(false);
+                }}
+              >
+                Batal
+              </ButtonCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
+              <ButtonCustom
+                isLoading={isLoading}
+                disabled={_.isEmpty(nameGroup)}
+                onPress={() => {
+                  AlertDefaultSystem({
+                    title: "Buat Grup",
+                    message:
+                      "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
+                    textLeft: "Tidak",
+                    textRight: "Ya",
+                    onPressLeft: () => {},
+                    onPressRight: () => {
+                      handlerCreateGroup();
+                    },
+                  });
+                }}
+              >
+                Simpan
+              </ButtonCustom>
+            </Grid.Col>
+          </Grid>
+        </StackCustom>
+      </ModalCustom>
+
+      {/* Drawer */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <StackCustom>
+          <TextCustom bold>Deskripsi diri</TextCustom>
+          <BaseBox>
+            <ScrollView style={{ height: "80%" }}>
+              <TextCustom>{description}</TextCustom>
+            </ScrollView>
+          </BaseBox>
+          <Spacing />
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

app/(application)/(user)/collaboration/create.tsx

@@ -81,7 +81,6 @@ export default function CollaborationCreate() {
 
     try {
       setIsLoading(true);
-      console.log("[DATA]>>", newData);
 
       const response = await apiCollaborationCreate({ data: newData });
       if (response.success) {

app/(application)/(user)/forum/[id]/forumku.tsx

@@ -22,6 +22,7 @@ export default function Forumku() {
   const [status, setStatus] = useState("");
   const [alertStatus, setAlertStatus] = useState(false);
   const [deleteAlert, setDeleteAlert] = useState(false);
+  
 
   return (
     <>

app/(application)/(user)/forum/create.tsx

@@ -4,18 +4,47 @@ import {
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiForumCreate } from "@/service/api-client/api-forum";
 import { router } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function ForumCreate() {
+  const { user } = useAuth();
   const [text, setText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlerSubmit = async () => {
+    const newData = {
+      diskusi: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setIsLoading(true);
+      const response = await apiForumCreate({ data: newData });
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Posting berhasil",
+        });
+        setText("");
+        router.back();
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        isLoading={isLoading}
         onPress={() => {
-          console.log("Posting", text);
+          handlerSubmit();
-          router.back();
         }}
       >
         Posting

app/(application)/(user)/forum/index.tsx

@@ -1,25 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertCustom,
+  AvatarComp,
-  AvatarCustom,
   BackButton,
   DrawerCustom,
+  LoaderCustom,
   SearchInput,
+  TextCustom,
   ViewWrapper,
 } from "@/components";
 import FloatingButton from "@/components/Button/FloatingButton";
-import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import { listDummyDiscussionForum } from "@/screens/Forum/list-data-dummy";
 import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { router, Stack } from "expo-router";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
-import { useState } from "react";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, Stack, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Forum() {
   const id = "test-id-forum";
   const [openDrawer, setOpenDrawer] = useState(false);
   const [status, setStatus] = useState("");
-  const [alertStatus, setAlertStatus] = useState(false);
+  const { user } = useAuth();
-  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [dataUser, setDataUser] = useState<any>();
+  const [listData, setListData] = useState<any[]>();
+  const [loadingGetList, setLoadingGetList] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadDataProfile(user?.id as string);
+    }, [user?.id, search])
+  );
+
+  const onLoadDataProfile = async (id: string) => {
+    const response = await apiUser(id);
+    setDataUser(response.data);
+  };
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetList(true);
+      const response = await apiForumGetAll({ search: search });
+      console.log("[DATA PROFILE]", JSON.stringify(response.data, null, 2));
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetList(false);
+    }
+  };
 
   return (
     <>
@@ -27,12 +60,23 @@ export default function Forum() {
         options={{
           title: "Forum",
           headerLeft: () => <BackButton />,
-          headerRight: () => <AvatarCustom href={`/forum/${id}/forumku`} />,
+          headerRight: () => (
+            <AvatarComp
+              fileId={dataUser?.Profile?.imageId}
+              size="base"
+              href={`/forum/${user?.id}/forumku`}
+            />
+          ),
         }}
       />
 
       <ViewWrapper
-        headerComponent={<SearchInput placeholder="Cari topik diskusi" />}
+        headerComponent={
+          <SearchInput
+            placeholder="Cari topik diskusi"
+            onChangeText={(e) => setSearch(e)}
+          />
+        }
         floatingButton={
           <FloatingButton
             onPress={() =>
@@ -41,20 +85,28 @@ export default function Forum() {
           />
         }
       >
-        {listDummyDiscussionForum.map((e, i) => (
+        {loadingGetList ? (
-          <Forum_BoxDetailSection
+          <LoaderCustom />
-            key={i}
+        ) : _.isEmpty(listData) ? (
-            data={e}
+          <TextCustom align="center" color="gray">
-            setOpenDrawer={setOpenDrawer}
+            Tidak ada diskusi
-            setStatus={setStatus}
+          </TextCustom>
-            isTruncate={true}
+        ) : (
-            href={`/forum/${id}`}
+          listData?.map((e: any, i: number) => (
-          />
+            <Forum_BoxDetailSection
-        ))}
+              key={i}
+              data={e}
+              setOpenDrawer={setOpenDrawer}
+              setStatus={setStatus}
+              isTruncate={true}
+              href={`/forum/${id}`}
+            />
+          ))
+        )}
       </ViewWrapper>
 
       <DrawerCustom
-        height={350}
+        height={"auto"}
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
       >
@@ -64,13 +116,13 @@ export default function Forum() {
           setIsDrawerOpen={() => {
             setOpenDrawer(false);
           }}
-          setShowDeleteAlert={setDeleteAlert}
+          setShowDeleteAlert={() => {}}
-          setShowAlertStatus={setAlertStatus}
+          setShowAlertStatus={() => {}}
         />
       </DrawerCustom>
 
       {/* Alert Status */}
-      <AlertCustom
+      {/* <AlertCustom
         isVisible={alertStatus}
         title="Ubah Status Forum"
         message="Apakah Anda yakin ingin mengubah status forum ini?"
@@ -87,10 +139,10 @@ export default function Forum() {
         textLeft="Batal"
         textRight="Ubah"
         colorRight={MainColor.green}
-      />
+      /> */}
 
       {/* Alert Delete */}
-      <AlertCustom
+      {/* <AlertCustom
         isVisible={deleteAlert}
         title="Hapus Forum"
         message="Apakah Anda yakin ingin menghapus forum ini?"
@@ -107,7 +159,7 @@ export default function Forum() {
         textLeft="Batal"
         textRight="Hapus"
         colorRight={MainColor.red}
-      />
+      /> */}
     </>
   );
 }

bun.lock

@@ -42,6 +42,7 @@
         "react-native-dotenv": "^3.4.11",
         "react-native-gesture-handler": "~2.28.0",
         "react-native-international-phone-number": "^0.9.3",
+        "react-native-keyboard-controller": "^1.18.6",
         "react-native-maps": "1.20.1",
         "react-native-otp-entry": "^1.8.5",
         "react-native-pager-view": "6.9.1",
@@ -1876,6 +1877,8 @@
 
     "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.2.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q=="],
 
+    "react-native-keyboard-controller": ["react-native-keyboard-controller@1.18.6", "", { "dependencies": { "react-native-is-edge-to-edge": "^1.2.1" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-reanimated": ">=3.0.0" } }, "sha512-K/RMw3MdtuykkACFN5d9RTapAcO0v4T34gmSyHkEraU5UsX+fxEHd6j4MvL7KUihvmLLod0NV/mQC0nL4cOurw=="],
+
     "react-native-maps": ["react-native-maps@1.20.1", "", { "dependencies": { "@types/geojson": "^7946.0.13" }, "peerDependencies": { "react": ">= 17.0.1", "react-native": ">= 0.64.3", "react-native-web": ">= 0.11" }, "optionalPeers": ["react-native-web"] }, "sha512-NZI3B5Z6kxAb8gzb2Wxzu/+P2SlFIg1waHGIpQmazDSCRkNoHNY4g96g+xS0QPSaG/9xRBbDNnd2f2/OW6t6LQ=="],
 
     "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],

components/Modal/ModalCustom.tsx

@@ -0,0 +1,92 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
+import React from "react";
+import {
+  Keyboard,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+
+interface AlertCustomProps {
+  children: React.ReactNode;
+  isVisible: boolean;
+}
+
+export default function ModalCustom({
+  children,
+  isVisible,
+}: AlertCustomProps) {
+  if (!isVisible) return null;
+
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={styles.overlay}>
+        <View style={styles.alertBox}>
+          <View style={{ width: "100%" }}>{children}</View>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+    paddingVertical: 20,
+  },
+  alertBox: {
+    width: "90%",
+    backgroundColor: MainColor.darkblue,
+    borderColor: AccentColor.blue,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 20,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    elevation: 5,
+  },
+  alertTitle: {
+    fontSize: TEXT_SIZE_LARGE,
+    fontWeight: "bold",
+    marginBottom: 20,
+    color: MainColor.white_gray,
+  },
+  alertMessage: {
+    textAlign: "center",
+    marginBottom: 20,
+    color: MainColor.white_gray,
+  },
+  alertButtons: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  alertButton: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 50,
+    marginHorizontal: 5,
+    alignItems: "center",
+  },
+  leftButton: {
+    backgroundColor: "gray",
+  },
+  rightButton: {
+    backgroundColor: MainColor.green,
+  },
+  buttonText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});

package.json

@@ -49,6 +49,7 @@
     "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-international-phone-number": "^0.9.3",
+    "react-native-keyboard-controller": "^1.18.6",
     "react-native-maps": "1.20.1",
     "react-native-otp-entry": "^1.8.5",
     "react-native-pager-view": "6.9.1",

screens/Collaboration/BoxPublishSection.tsx

@@ -28,7 +28,7 @@ function Collaboration_BoxPublishSection({
           />
 
           <StackCustom>
-            <TextCustom truncate={2} size="large" bold align="center">
+            <TextCustom truncate size="large" bold align="center">
               {data?.title || "-"}
             </TextCustom>
             <TextCustom truncate={2}>{data?.purpose || "-"}</TextCustom>

screens/Collaboration/GroupChatSection.back

@@ -0,0 +1,222 @@
+// ChatScreen.tsx
+import React, { useEffect, useRef, useState } from "react";
+import {
+    Dimensions,
+    Keyboard,
+    Platform,
+    ScrollView,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+} from "react-native";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
+
+type Message = {
+  id: string;
+  text: string;
+  sender: "me" | "other";
+  timestamp: Date;
+};
+
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+const ChatScreen: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: "1",
+      text: "Hai!",
+      sender: "other",
+      timestamp: new Date(Date.now() - 300000),
+    },
+    {
+      id: "2",
+      text: "Halo juga!",
+      sender: "me",
+      timestamp: new Date(Date.now() - 240000),
+    },
+    {
+      id: "3",
+      text: "Apa kabar?",
+      sender: "other",
+      timestamp: new Date(Date.now() - 180000),
+    },
+  ]);
+  const [inputText, setInputText] = useState<string>("");
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    const show = Keyboard.addListener("keyboardDidShow", (e) => {
+      let kbHeight = e.endCoordinates.height;
+      // Di Android dengan edge-to-edge, kadang tinggi termasuk navigation bar
+      if (Platform.OS === "android") {
+        // Batasi maksimal 60% layar
+        kbHeight = Math.min(kbHeight, SCREEN_HEIGHT * 2);
+      }
+      setKeyboardHeight(kbHeight);
+    });
+
+    const hide = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // Scroll ke bawah setelah pesan baru atau keyboard muncul
+    const timer = setTimeout(() => {
+      scrollViewRef.current?.scrollToEnd({ animated: true });
+    }, 100); // delay kecil untuk pastikan layout stabil
+    return () => clearTimeout(timer);
+  }, [messages, keyboardHeight]);
+
+  const handleSend = () => {
+    if (!inputText.trim()) return;
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: Date.now().toString(),
+        text: inputText.trim(),
+        sender: "me",
+        timestamp: new Date(),
+      },
+    ]);
+    setInputText("");
+  };
+
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      {/* Kontainer utama dengan padding bottom = tinggi keyboard */}
+      <View style={[styles.container, { paddingBottom: keyboardHeight }]}>
+        <ScrollView
+          ref={scrollViewRef}
+          style={styles.messagesContainer}
+          contentContainerStyle={styles.messagesContent}
+          keyboardShouldPersistTaps="handled"
+        >
+          {messages.map((msg) => (
+            <View
+              key={msg.id}
+              style={[
+                styles.messageBubble,
+                msg.sender === "me" ? styles.myMessage : styles.otherMessage,
+              ]}
+            >
+              <Text style={styles.messageText}>{msg.text}</Text>
+              <Text style={styles.timestamp}>
+                {msg.timestamp.toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </Text>
+            </View>
+          ))}
+        </ScrollView>
+
+        <View style={[styles.inputContainer, { paddingBottom: 10 }]}>
+          <TextInput
+            value={inputText}
+            onChangeText={setInputText}
+            placeholder="Ketik pesan..."
+            style={styles.textInput}
+            multiline
+            blurOnSubmit={false}
+            scrollEnabled={Platform.OS === "ios"} // ✅ Aktifkan scroll hanya di iOS
+            textAlignVertical="top"
+          />
+          <TouchableOpacity
+            style={styles.sendButton}
+            onPress={handleSend}
+            disabled={!inputText.trim()}
+          >
+            <Text style={styles.sendButtonText}>Kirim</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#e5ddd5",
+  },
+  container: {
+    flex: 1,
+    backgroundColor: "#e5ddd5",
+  },
+  messagesContainer: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  messagesContent: {
+    paddingBottom: 10,
+  },
+  messageBubble: {
+    maxWidth: "80%",
+    padding: 10,
+    marginVertical: 4,
+    borderRadius: 12,
+  },
+  myMessage: {
+    alignSelf: "flex-end",
+    backgroundColor: "#dcf8c6",
+  },
+  otherMessage: {
+    alignSelf: "flex-start",
+    backgroundColor: "#ffffff",
+  },
+  messageText: {
+    fontSize: 16,
+    color: "#000",
+  },
+  timestamp: {
+    fontSize: 10,
+    color: "#666",
+    textAlign: "right",
+    marginTop: 4,
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    paddingHorizontal: 10,
+    paddingTop: 8,
+    backgroundColor: "#f0f0f0",
+    borderTopWidth: 1,
+    borderTopColor: "#ddd",
+  },
+  textInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    maxHeight: 100,
+  },
+  sendButton: {
+    marginLeft: 10,
+    backgroundColor: "#34b7f1",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+  },
+  sendButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+});
+
+export default ChatScreen;

screens/Collaboration/GroupChatSection.tsx

@@ -0,0 +1,292 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+// ChatScreen.tsx
+import { LoaderCustom } from "@/components";
+import { AccentColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiCollaborationGroupMessage,
+  apiCollaborationGroupMessageCreate,
+} from "@/service/api-client/api-collaboration";
+import { formatChatTime } from "@/utils/formatChatTime";
+import { AntDesign } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dimensions,
+  Keyboard,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { ActivityIndicator } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type IMessage = {
+  id: string;
+  createdAt: Date;
+  isActive: boolean;
+  message: string;
+  isFile: boolean;
+  userId: string;
+  User: {
+    select: {
+      id: true;
+      username: true;
+    };
+  };
+};
+
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+const ChatScreen: React.FC<{ id: string }> = ({ id }) => {
+  const { user } = useAuth();
+  const [messages, setMessages] = useState<IMessage[] | null>(null);
+  const [loadingMessage, setLoadingMessage] = useState<boolean>(false);
+  const [inputText, setInputText] = useState<string>("");
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMessage();
+    }, [id])
+  );
+
+  const onLoadMessage = async () => {
+    try {
+      setLoadingMessage(true);
+      const response = await apiCollaborationGroupMessage({ id: id as string });
+      if (response.success) {
+        setMessages(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingMessage(false);
+    }
+  };
+
+  useEffect(() => {
+    const show = Keyboard.addListener("keyboardDidShow", (e) => {
+      let kbHeight = e.endCoordinates.height;
+      // Di Android dengan edge-to-edge, kadang tinggi termasuk navigation bar
+      if (Platform.OS === "android") {
+        // Batasi maksimal 60% layar
+        kbHeight = Math.min(kbHeight, SCREEN_HEIGHT * 0.6);
+      }
+      setKeyboardHeight(kbHeight);
+    });
+
+    const hide = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // Scroll ke bawah setelah pesan baru atau keyboard muncul
+    const timer = setTimeout(() => {
+      scrollViewRef.current?.scrollToEnd({ animated: true });
+    }, 100); // delay kecil untuk pastikan layout stabil
+    return () => clearTimeout(timer);
+  }, [messages, keyboardHeight]);
+
+  const handleSend = async () => {
+    if (!inputText.trim()) return;
+
+    const newData = {
+      userId: user?.id,
+      message: inputText.trim(),
+    };
+
+    try {
+      const response = await apiCollaborationGroupMessageCreate({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        setMessages((prev: IMessage | any) => [
+          ...prev,
+          {
+            id: Date.now().toString(),
+            createdAt: new Date(),
+            isActive: true,
+            message: inputText.trim(),
+            isFile: false,
+            userId: user?.id,
+            User: {
+              username: user?.username,
+            },
+          },
+        ]);
+        setInputText("");
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.safeArea} edges={["bottom"]}>
+      {/* Kontainer utama dengan padding bottom = tinggi keyboard */}
+      <View style={[styles.container, { paddingBottom: keyboardHeight }]}>
+        <ScrollView
+          ref={scrollViewRef}
+          style={styles.messagesContainer}
+          contentContainerStyle={styles.messagesContent}
+          keyboardShouldPersistTaps="handled"
+        >
+          {loadingMessage ? (
+            <ActivityIndicator color="black" size={"large"} />
+          ) : _.isEmpty(messages) ? (
+            <Text style={styles.isEmptyMessage}>
+              Belum ada pesan
+            </Text>
+          ) : (
+            messages?.map((item: any) => (
+              <View
+                key={item.id}
+                style={[
+                  styles.messageBubble,
+                  item.userId === user?.id
+                    ? styles.myMessage
+                    : styles.otherMessage,
+                ]}
+              >
+                <Text style={styles.name}>{item?.User?.username}</Text>
+                <Text style={styles.messageText}>{item.message}</Text>
+                <Text style={styles.timestamp}>
+                  {formatChatTime(item.createdAt)}
+                </Text>
+              </View>
+            ))
+          )}
+        </ScrollView>
+
+        <View style={[styles.inputContainer, { paddingBottom: 10 }]}>
+          <TextInput
+            value={inputText}
+            onChangeText={setInputText}
+            placeholder="Ketik pesan..."
+            style={styles.textInput}
+            multiline
+            blurOnSubmit={false}
+            scrollEnabled={Platform.OS === "ios"} // ✅ Aktifkan scroll hanya di iOS
+            textAlignVertical="top"
+          />
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={styles.sendButton}
+            onPress={handleSend}
+            disabled={!inputText.trim()}
+          >
+            <AntDesign name="send" size={ICON_SIZE_SMALL} color="white"/>
+            {/* <Text style={styles.sendButtonText}>Kirim</Text> */}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#e5ddd5",
+  },
+  container: {
+    flex: 1,
+    backgroundColor: "#e5ddd5",
+  },
+  isEmptyMessage: {
+    alignSelf: "center",
+    color: "#666",
+    marginTop: 20,
+  },
+  messagesContainer: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  messagesContent: {
+    paddingBottom: 10,
+  },
+  messageBubble: {
+    maxWidth: "80%",
+    padding: 10,
+    marginVertical: 4,
+    borderRadius: 12,
+  },
+  name: {
+    fontSize: 12,
+    color: "#666",
+    marginBottom: 4,
+  },
+  myMessage: {
+    alignSelf: "flex-end",
+    backgroundColor: "#dcf8c6",
+  },
+  otherMessage: {
+    alignSelf: "flex-start",
+    backgroundColor: "#ffffff",
+  },
+  messageText: {
+    fontSize: 16,
+    color: "#000",
+  },
+  timestamp: {
+    fontSize: 10,
+    color: "#666",
+    textAlign: "right",
+    marginTop: 4,
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    paddingHorizontal: 10,
+    paddingTop: 8,
+    backgroundColor: "#f0f0f0",
+    borderTopWidth: 1,
+    borderTopColor: "#ddd",
+  },
+  textInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    maxHeight: 100,
+  },
+  sendButton: {
+    marginLeft: 10,
+    backgroundColor: AccentColor.blue,
+    // paddingHorizontal: 16, 
+    // paddingVertical: 10,
+    borderRadius: "100%",
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignContent: "center",
+    alignItems: "center",
+  },
+  sendButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+});
+
+export default ChatScreen;

screens/Collaboration/ProjectMainSelectedSection.tsx

@@ -15,10 +15,12 @@ export default function Collaboration_ProjectMainSelectedSection({
   selected,
   setSelected,
   setOpenDrawerParticipant,
+  listData,
 }: {
   selected: (string | number)[];
   setSelected: (value: (string | number)[]) => void;
   setOpenDrawerParticipant: (value: boolean) => void;
+  listData: any[];
 }) {
   return (
     <BaseBox style={{ height: 500 }}>
@@ -31,7 +33,7 @@ export default function Collaboration_ProjectMainSelectedSection({
         </TextCustom>
 
         <CheckboxGroup value={selected} onChange={setSelected}>
-          {Array.from({ length: 5 }).map((_, index) => (
+          {listData?.map((item: any, index: any) => (
             <View key={index}>
               <Grid key={index}>
                 <Grid.Col

screens/Forum/DiscussionBoxSection.tsx

@@ -1,10 +1,10 @@
 import {
-  AvatarCustom,
+  AvatarComp,
   BaseBox,
   ClickableCustom,
   Grid,
   Spacing,
-  TextCustom,
+  TextCustom
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -31,12 +31,13 @@ export default function Forum_BoxDetailSection({
         backgroundColor: MainColor.soft_darkblue,
         padding: 8,
         borderRadius: 8,
+        paddingBlock: 20,
       }}
     >
       {isTruncate ? (
-        <TextCustom truncate={2}>{data.deskripsi}</TextCustom>
+        <TextCustom truncate={2}>{data?.diskusi}</TextCustom>
       ) : (
-        <TextCustom>{data.deskripsi}</TextCustom>
+        <TextCustom>{data?.diskusi}</TextCustom>
       )}
     </View>
   );
@@ -47,17 +48,21 @@ export default function Forum_BoxDetailSection({
         <View>
           <Grid>
             <Grid.Col span={2}>
-              <AvatarCustom href={`/profile/${data.id}`} />
+              <AvatarComp
+                fileId={data?.Author?.Profile?.imageId}
+                href={`/profile/${data?.Author?.Profile?.id}`}
+                size={"base"}
+              />
             </Grid.Col>
             <Grid.Col span={8}>
-              <TextCustom>{data.name}</TextCustom>
+              <TextCustom>{data?.Author?.username}</TextCustom>
-              {data.status === "Open" ? (
+              {data?.ForumMaster_StatusPosting?.status === "Open" ? (
                 <TextCustom bold size="small" color="green">
-                  {data.status}
+                  {data?.ForumMaster_StatusPosting?.status}
                 </TextCustom>
               ) : (
                 <TextCustom bold size="small" color="red">
-                  {data.status}
+                  {data?.ForumMaster_StatusPosting?.status}
                 </TextCustom>
               )}
             </Grid.Col>
@@ -71,7 +76,7 @@ export default function Forum_BoxDetailSection({
               <ClickableCustom
                 onPress={() => {
                   setOpenDrawer(true);
-                  setStatus(data.status);
+                  setStatus(data?.ForumMaster_StatusPosting?.status);
                 }}
                 style={{
                   alignItems: "flex-end",
@@ -86,6 +91,7 @@ export default function Forum_BoxDetailSection({
             </Grid.Col>
           </Grid>
 
+
           {href ? (
             <ClickableCustom onPress={() => router.push(href as any)}>
               {deskripsiView}
@@ -110,7 +116,7 @@ export default function Forum_BoxDetailSection({
                   size={ICON_SIZE_SMALL}
                   color={MainColor.white}
                 />
-                <TextCustom>{data.jumlahBalas}</TextCustom>
+                <TextCustom>{data?.Forum_Komentar?.length}</TextCustom>
               </View>
             </Grid.Col>
             <Grid.Col span={6} style={{ alignItems: "flex-end" }}>

screens/Forum/MenuDrawerSection.tsx/MenuBeranda.tsx

@@ -2,6 +2,7 @@ import { IMenuDrawerItem } from "@/components/_Interface/types";
 import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
 import { router } from "expo-router";
 import { drawerItemsForumBeranda } from "../ListPage";
+import { AlertDefaultSystem } from "@/components";
 
 export default function Forum_MenuDrawerBerandaSection({
   id,
@@ -13,14 +14,26 @@ export default function Forum_MenuDrawerBerandaSection({
   id: string;
   status: string;
   setIsDrawerOpen: (value: boolean) => void;
-  setShowDeleteAlert: (value: boolean) => void;
+  setShowDeleteAlert?: (value: boolean) => void;
-  setShowAlertStatus: (value: boolean) => void;
+  setShowAlertStatus?: (value: boolean) => void;
 }) {
   const handlePress = (item: IMenuDrawerItem) => {
     if (item.label === "Hapus") {
-      setShowDeleteAlert(true);
+      AlertDefaultSystem({
+        title: "Hapus",
+        message: "Apakah Anda yakin ingin menghapus forum ini?",
+        textLeft: "Batal",
+        textRight: "Hapus",
+        onPressRight: () => {},
+      });
     } else if (item.label === "Buka forum" || item.label === "Tutup forum") {
-      setShowAlertStatus(true);
+      AlertDefaultSystem({
+        title: "Ubah Status",
+        message: "Apakah Anda yakin ingin mengubah status forum ini?",
+        textLeft: "Batal",
+        textRight: "Ubah",
+        onPressRight: () => {},
+      });
     } else {
       router.push(item.path as any);
     }
@@ -34,7 +47,7 @@ export default function Forum_MenuDrawerBerandaSection({
       <MenuDrawerDynamicGrid
         data={drawerItemsForumBeranda({ id, status })}
         columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
-        onPressItem={handlePress}
+        onPressItem={handlePress as any}
       />
     </>
   );

service/api-client/api-collaboration.ts

@@ -11,9 +11,18 @@ export async function apiCollaborationCreate({ data }: { data: any }) {
   }
 }
 
-export async function apiCollaborationGetAll() {
+export async function apiCollaborationGetAll({
+  category,
+  authorId,
+}: {
+  category: "beranda" | "participant" | "my-project" | "group";
+  authorId?: string;
+}) {
   try {
-    const response = await apiConfig.get(`/mobile/collaboration`);
+    const authorQuery = authorId ? `&authorId=${authorId}` : "";
+    const response = await apiConfig.get(
+      `/mobile/collaboration?category=${category}${authorQuery}`
+    );
     return response.data;
   } catch (error) {
     throw error;
@@ -32,7 +41,6 @@ export async function apiCollaborationGetOne({ id }: { id: string }) {
 export async function apiCollaborationCreatePartisipasi({
   id,
   data,
-  
 }: {
   id: string;
   data: any;
@@ -69,3 +77,75 @@ export async function apiCollaborationGetParticipants({
     throw error;
   }
 }
+
+export async function apiCollaborationCreateGroup({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/collaboration/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiCollaborationEditData({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/collaboration/${id}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiCollaborationGroup({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/collaboration/${id}/group`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiCollaborationGroupMessage({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(`/mobile/collaboration/${id}/message`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiCollaborationGroupMessageCreate({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.post(
+      `/mobile/collaboration/${id}/message`,
+      {
+        data: data,
+      }
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

service/api-client/api-forum.ts

@@ -0,0 +1,21 @@
+import { apiConfig } from "../api-config";
+
+export async function apiForumCreate({ data }: { data: any }) {
+  try {
+    const response = await apiConfig.post(`/mobile/forum`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiForumGetAll({search}: {search: string}) {
+  try {
+    const response = await apiConfig.get(`/mobile/forum?search=${search}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}

utils/formatChatTime.ts

@@ -0,0 +1,35 @@
+// utils/formatChatTime.ts
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/id';
+
+dayjs.extend(relativeTime);
+dayjs.locale('id');
+
+/**
+ * Format waktu pesan untuk tampilan chat
+ * @param date ISO string atau Date object
+ * @returns string formatted time
+ */
+export const formatChatTime = (date: string | Date): string => {
+  const messageDate = dayjs(date);
+  const now = dayjs();
+
+  // Jika hari ini
+  if (messageDate.isSame(now, 'day')) {
+    return messageDate.format('HH.mm'); // contoh: "14.30"
+  }
+
+  // Jika kemarin
+  if (messageDate.isSame(now.subtract(1, 'day'), 'day')) {
+    return 'Kemarin';
+  }
+
+  // Jika dalam 7 hari terakhir (tapi bukan kemarin/ hari ini)
+  if (now.diff(messageDate, 'day') < 7) {
+    return messageDate.format('dddd HH:mm'); // contoh: "Senin 14:30"
+  }
+
+  // Lebih dari seminggu lalu → tampilkan tanggal
+  return messageDate.format('D MMM YYYY'); // contoh: "12 Mei 2024"
+};