diff --git a/src/app/api/admin/collaboration/[id]/route.ts b/src/app/api/admin/collaboration/[id]/route.ts
index 3a912a16..47fb3f77 100644
--- a/src/app/api/admin/collaboration/[id]/route.ts
+++ b/src/app/api/admin/collaboration/[id]/route.ts
@@ -2,65 +2,71 @@ import prisma from "@/lib/prisma";
 import backendLogger from "@/util/backendLogger";
 import { NextResponse } from "next/server";
 
-export async function GET(req: Request, { params }: { params: { id: string } }) {
-    try {
-        const { id } = params;
-        const data = await prisma.projectCollaboration.findUnique({
-            where: {
-                id: id
+export async function GET(
+  req: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.projectCollaboration.findUnique({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        isActive: true,
+        title: true,
+        lokasi: true,
+        purpose: true,
+        benefit: true,
+        createdAt: true,
+        report: true,
+        Author: {
+          select: {
+            id: true,
+            username: true,
+          },
+        },
+        ProjectCollaborationMaster_Industri: true,
+        ProjectCollaboration_Partisipasi: {
+          where: {
+            User: {
+              active: true,
             },
-            select: {
+          },
+          select: {
+            id: true,
+            User: {
+              select: {
                 id: true,
-                isActive: true,
-                title: true,
-                lokasi: true,
-                purpose: true,
-                benefit: true,
-                createdAt: true,
-                Author: {
-                    select: {
-                        id: true,
-                        username: true,
-                    },
-                },
-                ProjectCollaborationMaster_Industri: true,
-                ProjectCollaboration_Partisipasi: {
-                    where: {
-                        User: {
-                            active: true,
-                        },
-                    },
-                    select: {
-                        id: true,
-                        User: {
-                            select: {
-                                id: true,
-                                Profile: {
-                                    select: {
-                                        name: true,
-                                    },
-                                },
-                            },
-                        },
-                    },
+                Profile: {
+                  select: {
+                    name: true,
+                  },
                 },
+              },
             },
-        });
-        return NextResponse.json({
-            success: true,
-            message: "Success get collaboration",
-            data: data
+          },
         },
-            { status: 200 }
-        )
-    } catch (error) {
-        backendLogger.error("Error get collaboration >>", error);
-        return NextResponse.json({
-            success: false,
-            message: "Error get collaboration",
-            reason: (error as Error).message
-        },
-            { status: 500 }
-        )
-    }
-}
\ No newline at end of file
+      },
+    });
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get collaboration",
+        data: data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get collaboration >>", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get collaboration",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/admin/collaboration/dashboard/[name]/route.ts b/src/app/api/admin/collaboration/dashboard/[name]/route.ts
index ec8780c9..0e1dda84 100644
--- a/src/app/api/admin/collaboration/dashboard/[name]/route.ts
+++ b/src/app/api/admin/collaboration/dashboard/[name]/route.ts
@@ -13,9 +13,13 @@ export async function GET(request: Request, { params }: {
         
         if (fixStatus === "Publish") {
             fixData = await prisma.projectCollaboration.count({
-                where: {
-                    isActive: true,
+              where: {
+                isActive: true,
+                isReject: false,
+                Author: {
+                  active: true,
                 },
+              },
             });
 
         } else if (fixStatus === "Reject") {
diff --git a/src/app/api/admin/collaboration/group/[id]/route.ts b/src/app/api/admin/collaboration/group/[id]/route.ts
new file mode 100644
index 00000000..435bc2c9
--- /dev/null
+++ b/src/app/api/admin/collaboration/group/[id]/route.ts
@@ -0,0 +1,73 @@
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+
+    const data = await prisma.projectCollaboration_RoomChat.findUnique({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        name: true,
+        ProjectCollaboration: {
+          select: {
+            id: true,
+            isActive: true,
+            title: true,
+            lokasi: true,
+            purpose: true,
+            benefit: true,
+            createdAt: true,
+            ProjectCollaborationMaster_Industri: true,
+            Author: true
+          },
+        },
+        ProjectCollaboration_AnggotaRoomChat: {
+          select: {
+            User: {
+              select: {
+                username: true,
+                id: true,
+                Profile: {
+                  select: {
+                    id: true,
+                    name: true,
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get data collaboration group",
+        data: data,
+      },
+      {
+        status: 200,
+      }
+    );
+  } catch (error) {
+    backendLogger.error("Error get data collaboration group", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data collaboration group",
+        error: (error as Error).message,
+      },
+      {
+        status: 500,
+      }
+    );
+  }
+}
diff --git a/src/app/api/admin/collaboration/status/publish/route.ts b/src/app/api/admin/collaboration/status/publish/route.ts
index 3bf71a30..cf04c496 100644
--- a/src/app/api/admin/collaboration/status/publish/route.ts
+++ b/src/app/api/admin/collaboration/status/publish/route.ts
@@ -4,139 +4,138 @@ import _ from "lodash";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const page = searchParams.get("page");
+  const takeData = 10;
+  const skipData = Number(page) * takeData - takeData;
 
-    const { searchParams } = new URL(request.url);
-    const page = searchParams.get("page");
-    const takeData = 10;
-    const skipData = Number(page) * takeData - takeData;
-   
-    try {
-        let fixData;
+  try {
+    let fixData;
 
-        if (!page) {
-            fixData = await prisma.projectCollaboration.findMany({
-                orderBy: {
-                    createdAt: "desc",
-                },
-                where: {
-                    isActive: true,
-                    isReject: false,
-                    Author: {
-                        active: true,
-                    },
-                    
-                    
-                },
-                select: {
-                    id: true,
-                    createdAt: true,
-                    isActive: true,
-                    title: true,
-                    Author: {
-                        select: {
-                            id: true,
-                            username: true,
-                            Profile: true,
-                        },
-                    },
-                    projectCollaborationMaster_IndustriId: true,
-                    ProjectCollaborationMaster_Industri: true,
-                    ProjectCollaboration_Partisipasi: {
-                        where: {
-                            User: {
-                                active: true,
-                            },
-                        },
-                        // select: {
-                        //   User: {
-                        //     select: {
-                        //       id: true,
-                        //       username: true,
-                        //       Profile: true,
-                        //     },
-                        //   },
-                        // },
-                    },
-                },
-            });
-        } else {
-            const data = await prisma.projectCollaboration.findMany({
-                skip: skipData,
-                take: takeData,
-                orderBy: {
-                    createdAt: "desc",
-                },
-                where: {
-                    isActive: true,
-                    isReject: false,
-                    Author: {
-                        active: true,
-                    },
-                },
-                select: {
-                    id: true,
-                    createdAt: true,
-                    isActive: true,
-                    title: true,
-                    Author: {
-                        select: {
-                            id: true,
-                            username: true,
-                            Profile: true,
-                        },
-                    },
-                    projectCollaborationMaster_IndustriId: true,
-                    ProjectCollaborationMaster_Industri: true,
-                    ProjectCollaboration_Partisipasi: {
-                        where: {
-                            User: {
-                                active: true,
-                            },
-                        },
-                        // select: {
-                        //   User: {
-                        //     select: {
-                        //       id: true,
-                        //       username: true,
-                        //       Profile: true,
-                        //     },
-                        //   },
-                        // },
-                    },
-                },
-            });
-
-            const nCount = await prisma.projectCollaboration.count({
-                where: {
-                    isActive: true,
-                    isReject: false,
-                    Author: {
-                        active: true,
-                    },
-                },
-            });
-
-            fixData = {
-                data: data,
-                nPage: _.ceil(nCount / takeData),
-            }
-        }
-
-        return NextResponse.json({
-            success: true,
-            message: "Success get data collaboration dashboard",
-            data: fixData,
+    if (!page) {
+      fixData = await prisma.projectCollaboration.findMany({
+        orderBy: {
+          createdAt: "desc",
         },
-            { status: 200 }
-        );
-    } catch (error) {
-        backendLogger.error("Error get data collaboration dashboard >>", error);
-        return NextResponse.json({
-            success: false,
-            message: "Error get data collaboration dashboard",
-            reason: (error as Error).message
+        where: {
+          isActive: true,
+          isReject: false,
+          Author: {
+            active: true,
+          },
         },
-            { status: 500 }
-        )
+        select: {
+          id: true,
+          createdAt: true,
+          isActive: true,
+          title: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: true,
+            },
+          },
+          projectCollaborationMaster_IndustriId: true,
+          ProjectCollaborationMaster_Industri: true,
+          ProjectCollaboration_Partisipasi: {
+            where: {
+              User: {
+                active: true,
+              },
+            },
+            // select: {
+            //   User: {
+            //     select: {
+            //       id: true,
+            //       username: true,
+            //       Profile: true,
+            //     },
+            //   },
+            // },
+          },
+        },
+      });
+    } else {
+      const data = await prisma.projectCollaboration.findMany({
+        skip: skipData,
+        take: takeData,
+        orderBy: {
+          createdAt: "desc",
+        },
+        where: {
+          isActive: true,
+          isReject: false,
+          Author: {
+            active: true,
+          },
+        },
+        select: {
+          id: true,
+          createdAt: true,
+          isActive: true,
+          title: true,
+          Author: {
+            select: {
+              id: true,
+              username: true,
+              Profile: true,
+            },
+          },
+          projectCollaborationMaster_IndustriId: true,
+          ProjectCollaborationMaster_Industri: true,
+          ProjectCollaboration_Partisipasi: {
+            where: {
+              User: {
+                active: true,
+              },
+            },
+            // select: {
+            //   User: {
+            //     select: {
+            //       id: true,
+            //       username: true,
+            //       Profile: true,
+            //     },
+            //   },
+            // },
+          },
+        },
+      });
+
+      const nCount = await prisma.projectCollaboration.count({
+        where: {
+          isActive: true,
+          isReject: false,
+          Author: {
+            active: true,
+          },
+        },
+      });
+
+      fixData = {
+        data: data,
+        nPage: _.ceil(nCount / takeData),
+      };
     }
-}
\ No newline at end of file
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get data collaboration dashboard",
+        data: fixData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get data collaboration dashboard >>", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data collaboration dashboard",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/dev/admin/colab/detail/group/[id]/page.tsx b/src/app/dev/admin/colab/detail/group/[id]/page.tsx
new file mode 100644
index 00000000..1e03a6ff
--- /dev/null
+++ b/src/app/dev/admin/colab/detail/group/[id]/page.tsx
@@ -0,0 +1,11 @@
+import DetailGroup from "@/app_modules/admin/colab/detail/detail_group";
+
+async function Page() {
+  return (
+    <>
+      <DetailGroup />
+    </>
+  );
+}
+
+export default Page;
diff --git a/src/app/dev/admin/colab/detail/publish/[id]/page.tsx b/src/app/dev/admin/colab/detail/publish/[id]/page.tsx
index aad0ff7a..9004c86c 100644
--- a/src/app/dev/admin/colab/detail/publish/[id]/page.tsx
+++ b/src/app/dev/admin/colab/detail/publish/[id]/page.tsx
@@ -1,5 +1,4 @@
 import DetailPublish from '@/app_modules/admin/colab/detail/detail_publish';
-import React from 'react';
 
 function Page() {
   return (
diff --git a/src/app/dev/admin/colab/detail/reject/[id]/page.tsx b/src/app/dev/admin/colab/detail/reject/[id]/page.tsx
new file mode 100644
index 00000000..a81cf94e
--- /dev/null
+++ b/src/app/dev/admin/colab/detail/reject/[id]/page.tsx
@@ -0,0 +1,11 @@
+import DetailReject from "@/app_modules/admin/colab/detail/detail_reject";
+
+async function Page() {
+  return (
+    <>
+      <DetailReject />
+    </>
+  );
+}
+
+export default Page;
diff --git a/src/app_modules/admin/_admin_global/_component/button/detail_button.tsx b/src/app_modules/admin/_admin_global/_component/button/detail_button.tsx
index db0d770c..2a6ebda6 100644
--- a/src/app_modules/admin/_admin_global/_component/button/detail_button.tsx
+++ b/src/app_modules/admin/_admin_global/_component/button/detail_button.tsx
@@ -18,7 +18,7 @@ export default function Admin_DetailButton({ path }: { path: string }) {
         leftIcon={<IconEye size={25} color={"white"} />}
         onClick={() => {
           setLoading(true);
-          router.push(path);
+          router.push(path || "");
         }}
       >
         Detail
diff --git a/src/app_modules/admin/colab/dashboard/index.tsx b/src/app_modules/admin/colab/dashboard/index.tsx
index e8c75d52..af537ca3 100644
--- a/src/app_modules/admin/colab/dashboard/index.tsx
+++ b/src/app_modules/admin/colab/dashboard/index.tsx
@@ -1,10 +1,26 @@
 "use client";
 
-import { Stack, SimpleGrid, Paper, Group, Title, Text, Flex, ThemeIcon } from "@mantine/core";
+import {
+  Stack,
+  SimpleGrid,
+  Paper,
+  Group,
+  Title,
+  Text,
+  Flex,
+  ThemeIcon,
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { IconAlertTriangle, IconMessage2, IconUpload } from "@tabler/icons-react";
-import { AccentColor, AdminColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  IconAlertTriangle,
+  IconMessage2,
+  IconUpload,
+} from "@tabler/icons-react";
+import {
+  AccentColor,
+  AdminColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { useState } from "react";
 import { clientLogger } from "@/util/clientLogger";
 import { apiGetAdminCollaborationStatusCountDashboard } from "../lib/api_fetch_admin_collaboration";
@@ -18,10 +34,8 @@ export default function AdminColab_Dashboard() {
   const [countReject, setCountReject] = useState<number | null>(null);
   const router = useRouter();
 
- 
-
   useShallowEffect(() => {
-    handlerLoadData()
+    handlerLoadData();
   }, []);
 
   async function handlerLoadData() {
@@ -30,18 +44,18 @@ export default function AdminColab_Dashboard() {
         global_limit(() => onLoadCountPublish()),
         global_limit(() => onLoadCountRoom()),
         global_limit(() => onLoadCountReject()),
-      ]
+      ];
       const result = await Promise.all(listLoadData);
     } catch (error) {
-      clientLogger.error("Error handler load data", error)
+      clientLogger.error("Error handler load data", error);
     }
   }
   async function onLoadCountPublish() {
     try {
       const response = await apiGetAdminCollaborationStatusCountDashboard({
         name: "Publish",
-      })
-      if (response) { 
+      });
+      if (response) {
         setCountPublish(response.data);
       }
     } catch (error) {
@@ -49,14 +63,11 @@ export default function AdminColab_Dashboard() {
     }
   }
 
-
   async function onLoadCountRoom() {
     try {
-      const response = await apiGetAdminCollaborationStatusCountDashboard(
-        {
-          name: "Room",
-        }
-      )
+      const response = await apiGetAdminCollaborationStatusCountDashboard({
+        name: "Room",
+      });
       if (response) {
         setCountRoom(response.data);
       }
@@ -69,7 +80,7 @@ export default function AdminColab_Dashboard() {
     try {
       const response = await apiGetAdminCollaborationStatusCountDashboard({
         name: "Reject",
-      })
+      });
       if (response) {
         setCountReject(response.data);
       }
@@ -82,47 +93,44 @@ export default function AdminColab_Dashboard() {
     {
       id: 1,
       name: "Publish",
-      jumlah: countPublish
-      == null ? (
-        <CustomSkeleton height={40} width={40} />
-      ) : countPublish ? (
-        countPublish
-      ) : (
-        "-"
-      )
-      ,
+      jumlah:
+        countPublish == null ? (
+          <CustomSkeleton height={40} width={40} />
+        ) : countPublish ? (
+          countPublish
+        ) : (
+          "-"
+        ),
       color: "green",
-      icon: <IconUpload size={18} color="#4CAF4F" />
+      icon: <IconUpload size={18} color="#4CAF4F" />,
     },
     {
       id: 2,
       name: "Group Chat",
-      jumlah: countRoom
-      == null ? (
-        <CustomSkeleton height={40} width={40} />
-      ) : countRoom ? (
-        countRoom
-      ) : (
-        "-"
-      )
-      ,
+      jumlah:
+        countRoom == null ? (
+          <CustomSkeleton height={40} width={40} />
+        ) : countRoom ? (
+          countRoom
+        ) : (
+          "-"
+        ),
       color: "orange",
-      icon: <IconMessage2 size={18} color="#FF9800" />
+      icon: <IconMessage2 size={18} color="#FF9800" />,
     },
     {
       id: 3,
       name: "Reject",
-      jumlah: countReject
-       == null ? (
-        <CustomSkeleton height={40} width={40} />
-      ) : countReject ? (
-        countReject
-      ) : (
-        "-"
-        )
-      ,
+      jumlah:
+        countReject == null ? (
+          <CustomSkeleton height={40} width={40} />
+        ) : countReject ? (
+          countReject
+        ) : (
+          "-"
+        ),
       color: "red",
-      icon: <IconAlertTriangle size={18} color="#FF4B4C" />
+      icon: <IconAlertTriangle size={18} color="#FF4B4C" />,
     },
   ];
   return (
@@ -145,13 +153,16 @@ export default function AdminColab_Dashboard() {
               shadow="md"
               radius="md"
               p="md"
-            // sx={{ borderColor: e.color, borderStyle: "solid" }}
+              // sx={{ borderColor: e.color, borderStyle: "solid" }}
             >
-
               <Stack spacing={0}>
-                <Text fw={"bold"} c={AccentColor.white}>{e.name}</Text>
+                <Text fw={"bold"} c={AccentColor.white}>
+                  {e.name}
+                </Text>
                 <Flex align={"center"} justify={"space-between"}>
-                  <Title color={AccentColor.white}>{e.jumlah ? e.jumlah : 0}</Title>
+                  <Title color={AccentColor.white}>
+                    {e.jumlah ? e.jumlah : 0}
+                  </Title>
                   <ThemeIcon
                     radius={"xl"}
                     size={"md"}
@@ -161,7 +172,6 @@ export default function AdminColab_Dashboard() {
                   </ThemeIcon>
                 </Flex>
               </Stack>
-
             </Paper>
           ))}
         </SimpleGrid>
@@ -169,7 +179,6 @@ export default function AdminColab_Dashboard() {
     </>
   );
 }
-function apiGetAdminCollaborationStatuCountDashboard(arg0: { name: string; }) {
+function apiGetAdminCollaborationStatuCountDashboard(arg0: { name: string }) {
   throw new Error("Function not implemented.");
 }
-
diff --git a/src/app_modules/admin/colab/detail/detail_group.tsx b/src/app_modules/admin/colab/detail/detail_group.tsx
index 320640de..c4f95ea2 100644
--- a/src/app_modules/admin/colab/detail/detail_group.tsx
+++ b/src/app_modules/admin/colab/detail/detail_group.tsx
@@ -1,10 +1,176 @@
-import React from 'react';
+"use client";
+
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_COLLABORATION_ROOM_CHAT } from "@/app_modules/colab/model/interface";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  Grid,
+  Group,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import { apiGetAdminCollaborationGroupById } from "../lib/api_fetch_admin_collaboration";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { IconCaretRight } from "@tabler/icons-react";
 
 function DetailGroup() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_COLLABORATION_ROOM_CHAT | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useShallowEffect(() => {
+    loadInitialData();
+  }, []);
+
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminCollaborationGroupById({
+        id: params.id,
+      });
+
+      if (response?.success && response?.data) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Invalid data format recieved:", error);
+      setData(null);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Admin",
+      value: data?.ProjectCollaboration?.Author?.username,
+    },
+    {
+      label: "Judul",
+      value: data?.ProjectCollaboration?.title,
+    },
+    {
+      label: "Industri",
+      value:
+        data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name,
+    },
+    {
+      label: "Jumlah Partisipan",
+      value: data?.ProjectCollaboration_AnggotaRoomChat.length,
+    },
+    {
+      label: "Lokasi",
+      value: data?.ProjectCollaboration?.lokasi,
+    },
+    {
+      label: "Tujuan",
+      value: data?.ProjectCollaboration?.purpose,
+    },
+    {
+      label: "Keuntungan",
+      value: data?.ProjectCollaboration?.benefit,
+    },
+  ];
+
   return (
-    <div>
-      DetailGroup
-    </div>
+    <Stack>
+      <ComponentAdminGlobal_HeaderTamplate name={`Detail group`} />
+      <AdminGlobal_ComponentBackButton />
+
+      <Grid>
+        <Grid.Col span={6}>
+          {!data ? (
+            <CustomSkeleton height={"50vh"} width={"100%"} />
+          ) : (
+            <Admin_ComponentBoxStyle
+              style={{
+                height: 500,
+              }}
+            >
+              <ScrollArea h={450} scrollbarSize={"md"}>
+                <Stack spacing={"xs"}>
+                  {listData.map((e, i) => (
+                    <Grid c={"white"} key={i}>
+                      <Grid.Col span={4}>
+                        <Text c={AdminColor.white} fw={"bold"}>
+                          {e.label}
+                        </Text>
+                      </Grid.Col>
+                      <Grid.Col span={1}>:</Grid.Col>
+                      <Grid.Col span={"auto"}>
+                        <Text c={AdminColor.white}>{e.value}</Text>
+                      </Grid.Col>
+                    </Grid>
+                  ))}
+
+                  {/* <Group position="center">
+                <Button
+                  mt={"xl"}
+                  radius={"xl"}
+                  bg={"red"}
+                  color="red"
+                  onClick={() => {
+                    setOpenReject(true);
+                  }}
+                  leftIcon={<IconFlag2Off size={20} color="white" />}
+                >
+                  Reject
+                </Button>
+              </Group> */}
+                </Stack>
+              </ScrollArea>
+            </Admin_ComponentBoxStyle>
+          )}
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          {!data ? (
+            <CustomSkeleton height={"50vh"} width={"100%"} />
+          ) : (
+            <Admin_ComponentBoxStyle
+              style={{
+                height: 500,
+              }}
+            >
+              <Stack>
+                <Title align="center" order={6}>
+                  Anggota
+                </Title>
+
+                <ScrollArea h={400}>
+                  {data.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
+                    <Group key={i} align="flex-start" mb={"md"}>
+                      <IconCaretRight />
+
+                      <Stack spacing={0} w={"70%"}>
+                        <Grid>
+                          <Grid.Col span={3} fw={"bold"}>Username</Grid.Col>
+                          <Grid.Col span={1}>:</Grid.Col>
+                          <Grid.Col span={8}>{e.User.username}</Grid.Col>
+                        </Grid>
+
+                        <Grid>
+                          <Grid.Col span={3} fw={"bold"}>Name</Grid.Col>
+                          <Grid.Col span={1}>:</Grid.Col>
+                          <Grid.Col span={8}>{e.User.Profile.name}</Grid.Col>
+                        </Grid>
+                      </Stack>
+                    </Group>
+                  ))}
+                </ScrollArea>
+              </Stack>
+            </Admin_ComponentBoxStyle>
+          )}
+        </Grid.Col>
+      </Grid>
+    </Stack>
   );
 }
 
diff --git a/src/app_modules/admin/colab/detail/detail_publish.tsx b/src/app_modules/admin/colab/detail/detail_publish.tsx
index e738bbf9..b377f571 100644
--- a/src/app_modules/admin/colab/detail/detail_publish.tsx
+++ b/src/app_modules/admin/colab/detail/detail_publish.tsx
@@ -1,133 +1,155 @@
-'use client';
-import React, { useState } from 'react';
-import AdminGlobal_ComponentBackButton from '../../_admin_global/back_button';
-import { Button, Flex, Grid, Group, Modal, Paper, Stack, Text, Textarea, Title } from '@mantine/core';
-import { useParams } from 'next/navigation';
-import { MODEL_COLLABORATION } from '@/app_modules/colab/model/interface';
-import { useShallowEffect } from '@mantine/hooks';
-import { clientLogger } from '@/util/clientLogger';
-import { apiGetAdminCollaborationById } from '../lib/api_fetch_admin_collaboration';
-import { AdminColor } from '@/app_modules/_global/color/color_pallet';
-import CustomSkeleton from '@/app_modules/components/CustomSkeleton';
-import { ComponentGlobal_NotifikasiPeringatan } from '@/app_modules/_global/notif_global';
-import { IconCheck } from '@tabler/icons-react';
+"use client";
+
+import React, { useState } from "react";
+import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import {
+  Button,
+  Flex,
+  Grid,
+  Group,
+  Modal,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
 
 function DetailPublish() {
+  const router = useRouter();
   const params = useParams<{ id: string }>();
   const [data, setData] = useState<MODEL_COLLABORATION | null>(null);
   const [loading, setLoading] = useState(false);
   const [openReject, setOpenReject] = useState(false);
+  const [report, setReport] = useState("");
 
   useShallowEffect(() => {
     loadInitialData();
-  }, [])
+  }, []);
 
   const loadInitialData = async () => {
     try {
       const response = await apiGetAdminCollaborationById({
         id: params.id,
-      })
+      });
 
       if (response?.success && response?.data) {
         setData(response.data);
       }
-
     } catch (error) {
       clientLogger.error("Invalid data format recieved:", error);
       setData(null);
     }
-  }
+  };
 
   async function onReject() {
     try {
-      const response = await apiGetAdminCollaborationById({
-        id: params.id,
-      })
+      setLoading(true)
+      const response = await adminColab_funReportProjectById({
+        colabId: params.id,
+        report: report,
+      });
 
-      if (response?.success && response?.data) {
-        setOpenReject(true)
-        setData(response.data);
-        setLoading(false)
+      if (response.status == 200) {
+        setLoading(false);
+        router.back();
       }
     } catch (error) {
+      setLoading(false);
       ComponentGlobal_NotifikasiPeringatan("Gagal Load");
-      clientLogger.error("Invalid data format recieved:", error);
-      setData(null);
+      clientLogger.error("Invalid report collaboration", error);
     }
   }
 
+  const listData = [
+    {
+      label: "Username",
+      value: data?.Author.username,
+    },
+    {
+      label: "Judul",
+      value: data?.title,
+    },
+    {
+      label: "Industri",
+      value: data?.ProjectCollaborationMaster_Industri.name,
+    },
+    {
+      label: "Jumlah Partisipan",
+      value: data?.ProjectCollaboration_Partisipasi.length,
+    },
+    {
+      label: "Lokasi",
+      value: data?.lokasi,
+    },
+    {
+      label: "Tujuan",
+      value: data?.purpose,
+    },
+    {
+      label: "Keuntungan",
+      value: data?.benefit,
+    },
+  ];
+
   return (
     <>
       <Stack>
-        <Flex justify={"space-between"}>
+        <ComponentAdminGlobal_HeaderTamplate name={`Detail publish`} />
           <AdminGlobal_ComponentBackButton />
-          <Button radius={"xl"} bg={"red"} color='white' onClick={onReject}>
-            Reject
-          </Button>
-        </Flex>
-        {!data ? (<CustomSkeleton height={"50vh"} width={"100%"} />) : (
-          <Paper bg={AdminColor.softBlue} p={"md"}>
-            <Title pb={10} c={AdminColor.white} order={3}>Detail Publish</Title>
-            <Stack spacing={"xs"}>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Username:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>{data?.Author?.username}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Title:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>@{data?.title}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Industri:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>+ {data?.ProjectCollaborationMaster_Industri.name}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Jumlah Partisipan:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>{data?.ProjectCollaboration_Partisipasi.length}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Lokasi:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>{data?.lokasi}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Tujuan Proyek:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>{data?.purpose}</Text>
-                </Grid.Col>
-              </Grid>
-              <Grid>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white} fw={"bold"}>Keuntungan:</Text>
-                </Grid.Col>
-                <Grid.Col span={6}>
-                  <Text c={AdminColor.white}>{data?.benefit}</Text>
-                </Grid.Col>
-              </Grid>
-            </Stack>
-          </Paper>
-        )}
+        
+
+        <SimpleGrid cols={2}>
+          {!data ? (
+            <CustomSkeleton height={"50vh"} width={"100%"} />
+          ) : (
+            <Admin_ComponentBoxStyle>
+              <Stack spacing={"xs"}>
+                {listData.map((e, i) => (
+                  <Grid c={"white"} key={i}>
+                    <Grid.Col span={4}>
+                      <Text c={AdminColor.white} fw={"bold"}>
+                        {e.label}
+                      </Text>
+                    </Grid.Col>
+                    <Grid.Col span={1}>:</Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text c={AdminColor.white}>{e.value}</Text>
+                    </Grid.Col>
+                  </Grid>
+                ))}
+
+                <Group position="center">
+                  <Button
+                    mt={"xl"}
+                    radius={"xl"}
+                    bg={"red"}
+                    color="red"
+                    onClick={() => {
+                      setOpenReject(true);
+                    }}
+                    leftIcon={<IconFlag2Off size={20} color="white" />}
+                  >
+                    Reject
+                  </Button>
+                </Group>
+              </Stack>
+            </Admin_ComponentBoxStyle>
+          )}
+        </SimpleGrid>
       </Stack>
 
       {/* Reject Project */}
@@ -137,7 +159,7 @@ function DetailPublish() {
         onClose={() => setOpenReject(false)}
         centered
         withCloseButton={false}
-        size={"lg"}
+        size={"md"}
       >
         <Paper bg={AdminColor.softBlue} p={"md"}>
           <Stack>
@@ -149,16 +171,21 @@ function DetailPublish() {
               ?
             </Text>{" "}
             <Textarea
-              minRows={2}
+              minRows={3}
+              maxRows={5}
               placeholder="Ketik alasan report.."
-              // onChange={(val) => setReport(val.currentTarget.value)}
+              onChange={(val) => setReport(val.currentTarget.value)}
             />
             <Group position="right">
               <Button
+                loading={loading}
+                loaderPosition="center"
                 leftIcon={<IconCheck />}
                 radius={"xl"}
-                // onClick={() => onReport()}
-              > 
+                onClick={() => {
+                  onReject();
+                }}
+              >
                 Simpan
               </Button>
             </Group>
@@ -170,4 +197,3 @@ function DetailPublish() {
 }
 
 export default DetailPublish;
-
diff --git a/src/app_modules/admin/colab/detail/detail_reject.tsx b/src/app_modules/admin/colab/detail/detail_reject.tsx
new file mode 100644
index 00000000..986883a6
--- /dev/null
+++ b/src/app_modules/admin/colab/detail/detail_reject.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import React, { useState } from "react";
+import AdminGlobal_ComponentBackButton from "../../_admin_global/back_button";
+import {
+  Button,
+  Flex,
+  Grid,
+  Group,
+  Modal,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminCollaborationById } from "../lib/api_fetch_admin_collaboration";
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { IconCheck, IconFlag2Off } from "@tabler/icons-react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
+import adminColab_funReportProjectById from "../fun/edit/fun_report_project_by_id";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+
+function DetailReject() {
+  const router = useRouter();
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_COLLABORATION | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [openReject, setOpenReject] = useState(false);
+  const [report, setReport] = useState("");
+
+  useShallowEffect(() => {
+    loadInitialData();
+  }, []);
+
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminCollaborationById({
+        id: params.id,
+      });
+
+      if (response?.success && response?.data) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Invalid data format recieved:", error);
+      setData(null);
+    }
+  };
+
+//   async function onReject() {
+//     try {
+//       setLoading(true);
+//       const response = await adminColab_funReportProjectById({
+//         colabId: params.id,
+//         report: report,
+//       });
+
+//       if (response.status == 200) {
+//         setLoading(false);
+//         router.back();
+//       }
+//     } catch (error) {
+//       setLoading(false);
+//       ComponentGlobal_NotifikasiPeringatan("Gagal Load");
+//       clientLogger.error("Invalid report collaboration", error);
+//     }
+//   }
+
+  const listData = [
+    {
+      label: "Username",
+      value: data?.Author.username,
+    },
+    {
+      label: "Judul",
+      value: data?.title,
+    },
+    {
+      label: "Industri",
+      value: data?.ProjectCollaborationMaster_Industri.name,
+    },
+    {
+      label: "Jumlah Partisipan",
+      value: data?.ProjectCollaboration_Partisipasi.length,
+    },
+    {
+      label: "Lokasi",
+      value: data?.lokasi,
+    },
+    {
+      label: "Tujuan",
+      value: data?.purpose,
+    },
+    {
+      label: "Keuntungan",
+      value: data?.benefit,
+    },
+    {
+      label: "Catatan Report",
+      value: data?.report,
+    },
+  ];
+
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_HeaderTamplate name={`Detail reject`} />
+        <AdminGlobal_ComponentBackButton />
+
+        <SimpleGrid cols={2}>
+          {!data ? (
+            <CustomSkeleton height={"50vh"} width={"100%"} />
+          ) : (
+            <Admin_ComponentBoxStyle>
+              <Stack spacing={"xs"}>
+                {listData.map((e, i) => (
+                  <Grid c={"white"} key={i}>
+                    <Grid.Col span={4}>
+                      <Text c={AdminColor.white} fw={"bold"}>
+                        {e.label}
+                      </Text>
+                    </Grid.Col>
+                    <Grid.Col span={1}>:</Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text c={AdminColor.white}>{e.value}</Text>
+                    </Grid.Col>
+                  </Grid>
+                ))}
+
+              </Stack>
+            </Admin_ComponentBoxStyle>
+          )}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}
+
+export default DetailReject;
diff --git a/src/app_modules/admin/colab/fun/edit/fun_report_project_by_id.ts b/src/app_modules/admin/colab/fun/edit/fun_report_project_by_id.ts
index 592e5484..41b87e6e 100644
--- a/src/app_modules/admin/colab/fun/edit/fun_report_project_by_id.ts
+++ b/src/app_modules/admin/colab/fun/edit/fun_report_project_by_id.ts
@@ -30,16 +30,16 @@ export default async function adminColab_funReportProjectById({
 
   if (!projectUpdate) return { status: 400, message: "Gagal update project" };
 
-  const updateReport = await prisma.projectCollaboration_Notifikasi.create({
-    data: {
-      projectCollaborationId: colabId,
-      adminId: userLoginId as string,
-      userId: projectUpdate.userId as any,
-      note: "Project Anda Telah Direport Admin",
-    },
-  });
+  // const updateReport = await prisma.projectCollaboration_Notifikasi.create({
+  //   data: {
+  //     projectCollaborationId: colabId,
+  //     adminId: userLoginId as string,
+  //     userId: projectUpdate.userId as any,
+  //     note: "Project Anda Telah Direport Admin",
+  //   },
+  // });
 
-  if (!updateReport) return { status: 400, message: "Gagal update notifikasi" };
+  // if (!updateReport) return { status: 400, message: "Gagal update notifikasi" };
 
   revalidatePath(RouterAdminColab.table_publish);
   return { status: 200, message: "Berhasil Update" };
diff --git a/src/app_modules/admin/colab/lib/api_fetch_admin_collaboration.ts b/src/app_modules/admin/colab/lib/api_fetch_admin_collaboration.ts
index 33306ebe..57765d71 100644
--- a/src/app_modules/admin/colab/lib/api_fetch_admin_collaboration.ts
+++ b/src/app_modules/admin/colab/lib/api_fetch_admin_collaboration.ts
@@ -1,108 +1,151 @@
 export {
-    apiGetAdminCollaborationStatusCountDashboard,
-    apiGetAdminCollaborationPublish,
-    apiGetAdminCollaborationReject,
-    apiGetAdminCollaborationRoomById,
-    apiGetAdminCollaborationById
-   
-}
+  apiGetAdminCollaborationStatusCountDashboard,
+  apiGetAdminCollaborationPublish,
+  apiGetAdminCollaborationReject,
+  apiGetAdminCollaborationRoomById,
+  apiGetAdminCollaborationById,
+  apiGetAdminCollaborationGroupById,
+};
 const apiGetAdminCollaborationStatusCountDashboard = async ({
-    name
+  name,
 }: {
-        name: "Publish" | "Reject" | "Room";
+  name: "Publish" | "Reject" | "Room";
 }) => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
 
-    // console.log("Ini Token", token);
-    const response = await fetch(`/api/admin/collaboration/dashboard/${name}`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
-    // console.log("Ini Response", await response.json());
-    return await response.json().catch(() => null);
-}
-const apiGetAdminCollaborationPublish = async ({ page }: {
-    page: string,
-    
+  // console.log("Ini Token", token);
+  const response = await fetch(`/api/admin/collaboration/dashboard/${name}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  // console.log("Ini Response", await response.json());
+  return await response.json().catch(() => null);
+};
+const apiGetAdminCollaborationPublish = async ({ page }: { page: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const isPage = page ? `?page=${page}` : "";
+  const response = await fetch(
+    `/api/admin/collaboration/status/publish/${isPage}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return await response.json().catch(() => null);
+};
+
+const apiGetAdminCollaborationReject = async ({ page }: { page: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const isPage = page ? `?page=${page}` : "";
+  const response = await fetch(
+    `/api/admin/collaboration/status/reject/${isPage}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return await response.json().catch(() => null);
+};
+const apiGetAdminCollaborationRoomById = async ({
+  page,
+  search,
+}: {
+  page: string;
+  search: string;
 }) => {
-    
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const isPage = page ? `?page=${page}` : "";
+  const isSearch = search ? `&search=${search}` : "";
+  const response = await fetch(
+    `/api/admin/collaboration/group${isPage}${isSearch}`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "Access-Control-Allow-Origin": "*",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+
+  return await response.json().catch(() => null);
+};
+
+const apiGetAdminCollaborationById = async ({ id }: { id: string }) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const response = await fetch(`/api/admin/collaboration/${id}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return await response.json().catch(() => null);
+};
+
+const apiGetAdminCollaborationGroupById = async ({ id }: { id: string }) => {
+  try {
+    // Fetch token from cookie
     const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
-    
-    const isPage = page ? `?page=${page}` : "";
-    const response = await fetch(`/api/admin/collaboration/status/publish/${isPage}`, {
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
 
-    return await response.json().catch(() => null);
-}
+    const response = await fetch(`/api/admin/collaboration/group/${id}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
 
-const apiGetAdminCollaborationReject = async ({ page }: {
-    page: string,
-    
-}) => {
-    
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
-    
-    const isPage = page ? `?page=${page}` : "";
-    const response = await fetch(`/api/admin/collaboration/status/reject/${isPage}`, {
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get data collaboration group",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get data collaboration group"
+      );
+    }
 
-    return await response.json().catch(() => null);
-}
-const apiGetAdminCollaborationRoomById = async ({ page, search }: {
-    page: string,
-    search: string
-}) => {
-    
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
-    
-    const isPage = page ? `?page=${page}` : "";
-    const isSearch = search ? `&search=${search}` : "";
-    const response = await fetch(`/api/admin/collaboration/group${isPage}${isSearch}`, {
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
-
-    return await response.json().catch(() => null);
-}
-
-const apiGetAdminCollaborationById = async ({id} : {id: string}) => {
-    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
-    if (!token) return await token.json().catch(() => null);
-
-    const response = await fetch(`/api/admin/collaboration/${id}`, {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-            "Access-Control-Allow-Origin": "*",
-            Authorization: `Bearer ${token}`,
-        }
-    })
-    return await response.json().catch(() => null);
-}
+    // Return the JSON response
 
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    console.error("Error get data collaboration group", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
diff --git a/src/app_modules/admin/colab/sub_menu/group.tsx b/src/app_modules/admin/colab/sub_menu/group.tsx
index 5dbb4d6d..0b06457a 100644
--- a/src/app_modules/admin/colab/sub_menu/group.tsx
+++ b/src/app_modules/admin/colab/sub_menu/group.tsx
@@ -32,6 +32,7 @@ import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AccentColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
 
 export default function AdminColab_TableGroup({
   listGroup,
@@ -114,7 +115,11 @@ function TableMenu({ listGroup }: { listGroup: any }) {
       <td>
         <Center>
           <Stack>
-            <Button
+            <Admin_DetailButton
+              path={`/dev/admin/colab/detail/group/${e.id}`}
+            />
+
+            {/* <Button
               loading={
                 idProject === e?.id ? (loadingDetail ? true : false) : false
               }
@@ -126,8 +131,9 @@ function TableMenu({ listGroup }: { listGroup: any }) {
                 onDetailData(e?.id);
               }}
             >
-              Detail
-            </Button>
+              Detail 1
+            </Button> */}
+
             {/* <Button
               // loading={
               //   idProject === e?.id ? (loadingReject ? true : false) : false
@@ -154,19 +160,12 @@ function TableMenu({ listGroup }: { listGroup: any }) {
         <ComponentAdminGlobal_TitlePage
           name="Group Chat"
           color={AdminColor.softBlue}
-          component={
-            <></>
-          }
+          component={<></>}
         />
         <Paper p={"md"} bg={AdminColor.softBlue}>
           <Stack>
             <ScrollArea h={"65vh"}>
-              <Table
-                verticalSpacing={"xs"}
-                horizontalSpacing={"md"}
-                p={"md"}
-                
-              >
+              <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
                 <thead>
                   <tr>
                     <th>
@@ -205,7 +204,7 @@ function TableMenu({ listGroup }: { listGroup: any }) {
       </Stack>
 
       <Modal
-        styles={{ body: { backgroundColor: AccentColor.darkblue}}}
+        styles={{ body: { backgroundColor: AccentColor.darkblue } }}
         opened={openDetail}
         onClose={() => setOpenDetail(false)}
         centered
@@ -224,7 +223,9 @@ function TableMenu({ listGroup }: { listGroup: any }) {
             <ScrollArea h={"100%"}>
               <Stack>
                 <Center>
-                  <Title c={AdminColor.white} order={4}>Anggota</Title>
+                  <Title c={AdminColor.white} order={4}>
+                    Anggota
+                  </Title>
                 </Center>
                 <Stack>
                   {detailData?.ProjectCollaboration_AnggotaRoomChat?.map(
diff --git a/src/app_modules/admin/colab/sub_menu/publish.tsx b/src/app_modules/admin/colab/sub_menu/publish.tsx
index cfa20feb..67732de6 100644
--- a/src/app_modules/admin/colab/sub_menu/publish.tsx
+++ b/src/app_modules/admin/colab/sub_menu/publish.tsx
@@ -66,7 +66,6 @@ function TableMenu() {
       const response = await apiGetAdminCollaborationPublish({
         page: `${activePage}`,
       })
-      console.log("Ini Response", response)
 
       if (response?.success && response?.data?.data) {
         setData(response.data.data);
diff --git a/src/app_modules/admin/colab/sub_menu/reject.tsx b/src/app_modules/admin/colab/sub_menu/reject.tsx
index fa0fd568..ee816e8c 100644
--- a/src/app_modules/admin/colab/sub_menu/reject.tsx
+++ b/src/app_modules/admin/colab/sub_menu/reject.tsx
@@ -21,11 +21,11 @@ import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
 import adminColab_getListAllRejected from "../fun/get/get_list_all_reject";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
 import { clientLogger } from "@/util/clientLogger";
-
 import { useShallowEffect } from "@mantine/hooks";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { IconEye } from "@tabler/icons-react";
 import { apiGetAdminCollaborationReject } from "../lib/api_fetch_admin_collaboration";
+import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
 
 export default function AdminColab_TableRejected() {
   return (
@@ -52,7 +52,7 @@ function TableMenu() {
       const response = await apiGetAdminCollaborationReject({
         page: `${activePage}`,
       })
-      console.log("Ini Response", response)
+      
       if (response?.success && response?.data?.data) {
         setData(response.data.data);
         setNPage(response.data.nPage || 1);
@@ -88,9 +88,10 @@ function TableMenu() {
       <tr key={i}>
         <td>
           <Center c={AdminColor.white}>
-            <Text lineClamp={1}>{e?.Author?.Profile?.name}</Text>
+            <Text lineClamp={1}>{e?.Author.username}</Text>
           </Center>
         </td>
+
         <td>
           <Center c={AdminColor.white}>
             <Box>
@@ -100,11 +101,13 @@ function TableMenu() {
             </Box>
           </Center>
         </td>
+
         <td>
           <Center c={AdminColor.white}>
             <Text>{e?.ProjectCollaborationMaster_Industri.name}</Text>
           </Center>
         </td>
+
         <td>
           <Center c={AdminColor.white}>
             <Text>{e?.ProjectCollaboration_Partisipasi.length}</Text>
@@ -112,22 +115,7 @@ function TableMenu() {
         </td>
         <td>
           <Center>
-            <Box w={300}>
-              <Center c={AdminColor.white}>
-                <Spoiler
-                  hideLabel={"sembunyikan"}
-                  maxHeight={50}
-                  showLabel="tampilkan"
-                >
-                  {e?.report}
-                </Spoiler>
-              </Center>
-            </Box>
-          </Center>
-        </td>
-        <td>
-          <Center>
-            <Button
+            {/* <Button
               loading={loading && e?.id == idData ? true : false}
               leftIcon={<IconEye />}
               loaderPosition="center"
@@ -139,7 +127,8 @@ function TableMenu() {
               }}
             >
               Detail
-            </Button>
+            </Button> */}
+            <Admin_DetailButton path={`/dev/admin/colab/detail/reject/${e.id}`} />
           </Center>
         </td>
       </tr >
@@ -182,9 +171,6 @@ function TableMenu() {
                       <th>
                         <Center c={AdminColor.white}>Jumlah Partisipan</Center>
                       </th>
-                      <th>
-                        <Center c={AdminColor.white}>Report</Center>
-                      </th>
                       <th>
                         <Center c={AdminColor.white}>Aksi</Center>
                       </th>