From 8cb0054580d02e2908e42daa5eff42a260942003 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Thu, 24 Jul 2025 10:25:33 +0800
Subject: [PATCH] fix Feature: Add : - Collaboration/BoxDetailSection -
 detail-participant - /detail-project-main

Fix:
- participant

# No Issue
---
 app/(application)/(user)/_layout.tsx          |  15 ++
 .../collaboration/(tabs)/participant.tsx      | 101 ++++++------
 .../collaboration/[id]/detail-participant.tsx | 146 ++++++++++++++++++
 .../[id]/detail-project-main.tsx              |  13 ++
 .../(user)/collaboration/[id]/index.tsx       |  65 ++------
 screens/Collaboration/BoxDetailSection.tsx    |  54 +++++++
 6 files changed, 293 insertions(+), 101 deletions(-)
 create mode 100644 app/(application)/(user)/collaboration/[id]/detail-participant.tsx
 create mode 100644 app/(application)/(user)/collaboration/[id]/detail-project-main.tsx
 create mode 100644 screens/Collaboration/BoxDetailSection.tsx

diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 7384317..461c287 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -131,6 +131,21 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="collaboration/[id]/detail-participant"
+          options={{
+            title: "Partisipasi Proyek",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        <Stack.Screen
+          name="collaboration/[id]/detail-project-main"
+          options={{
+            title: "Proyek Saya",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== End Collaboration Section ========= */}
 
diff --git a/app/(application)/(user)/collaboration/(tabs)/participant.tsx b/app/(application)/(user)/collaboration/(tabs)/participant.tsx
index 3e96ec7..082792c 100644
--- a/app/(application)/(user)/collaboration/(tabs)/participant.tsx
+++ b/app/(application)/(user)/collaboration/(tabs)/participant.tsx
@@ -6,52 +6,53 @@ import { useState } from "react";
 import { View } from "react-native";
 
 export default function CollaborationParticipans() {
-    const [activeCategory, setActiveCategory] = useState<string | null>(
-      "participant"
-    );
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "participant"
+  );
 
-    const handlePress = (item: any) => {
-        setActiveCategory(item);
-        // tambahkan logika lain seperti filter dsb.
-      };
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
 
-       const headerComponent = (
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              padding: 5,
-              backgroundColor: MainColor.soft_darkblue,
-              borderRadius: 50,
-              width: "100%",
-            }}
-          >
-            <ButtonCustom
-              backgroundColor={
-                activeCategory === "participant" ? MainColor.yellow : AccentColor.blue
-              }
-              textColor={activeCategory === "participant" ? MainColor.black : MainColor.white}
-              style={{ width: "49%" }}
-              onPress={() => handlePress("participant")}
-            >
-              Partisipasi Proyek
-            </ButtonCustom>
-            <Spacing width={"2%"} />
-            <ButtonCustom
-              backgroundColor={
-                activeCategory === "main" ? MainColor.yellow : AccentColor.blue
-              }
-              textColor={
-                activeCategory === "main" ? MainColor.black : MainColor.white
-              }
-              style={{ width: "49%" }}
-              onPress={() => handlePress("main")}
-            >
-             Proyek Saya
-            </ButtonCustom>
-          </View>
-        );
-      
+  const headerComponent = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 5,
+        backgroundColor: MainColor.soft_darkblue,
+        borderRadius: 50,
+        width: "100%",
+      }}
+    >
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "participant" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "participant" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("participant")}
+      >
+        Partisipasi Proyek
+      </ButtonCustom>
+      <Spacing width={"2%"} />
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "main" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("main")}
+      >
+        Proyek Saya
+      </ButtonCustom>
+    </View>
+  );
 
   return (
     <ViewWrapper hideFooter headerComponent={headerComponent}>
@@ -59,8 +60,16 @@ export default function CollaborationParticipans() {
         <Collaboration_BoxPublishSection
           key={index.toString()}
           id={index.toString()}
-          username={` ${activeCategory === "participant" ? "Partisipasi Proyek" : "Proyek Saya"}`}
-          href={`/collaboration/create` }
+          username={` ${
+            activeCategory === "participant"
+              ? "Partisipasi Proyek"
+              : "Proyek Saya"
+          }`}
+          href={
+            activeCategory === "participant"
+              ? `/collaboration/${index}/detail-participant`
+              : `/collaboration/${index}/detail-project-main`
+          }
         />
       ))}
     </ViewWrapper>
diff --git a/app/(application)/(user)/collaboration/[id]/detail-participant.tsx b/app/(application)/(user)/collaboration/[id]/detail-participant.tsx
new file mode 100644
index 0000000..bb7998b
--- /dev/null
+++ b/app/(application)/(user)/collaboration/[id]/detail-participant.tsx
@@ -0,0 +1,146 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
+import { Feather } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router";
+import { View, ScrollView, StyleSheet, Text } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
+
+export default function CollaborationDetailParticipant() {
+  const { id } = useLocalSearchParams();
+
+  // Mock data
+  const participantData = [
+    { id: "1", name: "Inno Insani", avatar: "https://via.placeholder.com/40 " },
+    {
+      id: "2",
+      name: "Amalia Dwi Y",
+      avatar: "https://via.placeholder.com/40 ",
+    },
+    { id: "3", name: "Bagas", avatar: "https://via.placeholder.com/40 " },
+  ];
+
+  return (
+    <>
+      <ViewWrapper>
+        <Collaboration_BoxDetailSection id={id as string} />
+        <BaseBox style={{ height: 500 }}>
+          <StackCustom>
+            <TextCustom align="center" bold size="large">
+              Partisipan
+            </TextCustom>
+          </StackCustom>
+
+          {/* <View>
+            <FlatList
+              data={participantData}
+              renderItem={({ item }) => (
+                <AvatarUsernameAndOtherComponent
+                  avatarHref={`/profile/${item.id}`}
+                />
+              )}
+              keyExtractor={(item) => item.id}
+            />
+          </View> */}
+
+          {/* <ScrollView style={{ height: "100%" }}>
+            <View style={{ backgroundColor: "transparent" }}>
+              <AvatarUsernameAndOtherComponent
+                rightComponent={
+                  <Feather name="chevron-right" size={24} color="white" />
+                }
+              />
+            </View>
+          </ScrollView> */}
+        </BaseBox>
+      </ViewWrapper>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: "#1A202C",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginRight: 10,
+  },
+  name: {
+    color: "#fff",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  detailsContainer: {
+    backgroundColor: "#2B3442",
+    borderRadius: 8,
+    padding: 16,
+  },
+  title: {
+    color: "#fff",
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 16,
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 8,
+  },
+  label: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  value: {
+    color: "#fff",
+    fontSize: 14,
+  },
+  participantsContainer: {
+    marginTop: 20,
+  },
+  participantsTitle: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  participantItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: "#374151",
+  },
+  participantAvatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginRight: 10,
+  },
+  participantName: {
+    flex: 1,
+    color: "#fff",
+    fontSize: 16,
+  },
+  arrow: {
+    color: "#fff",
+    fontSize: 16,
+  },
+});
diff --git a/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx b/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx
new file mode 100644
index 0000000..44cc01d
--- /dev/null
+++ b/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx
@@ -0,0 +1,13 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function CollaborationDetailProjectMain() {
+  return (
+    <>
+      <ViewWrapper>
+        <TextCustom bold size="large">
+          Detail Proyek
+        </TextCustom>
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/collaboration/[id]/index.tsx b/app/(application)/(user)/collaboration/[id]/index.tsx
index e506467..8a1082b 100644
--- a/app/(application)/(user)/collaboration/[id]/index.tsx
+++ b/app/(application)/(user)/collaboration/[id]/index.tsx
@@ -1,19 +1,14 @@
 import {
-    AlertDefaultSystem,
-    AvatarUsernameAndOtherComponent,
-    BackButton,
-    BoxWithHeaderSection,
-    ButtonCustom,
-    DotButton,
-    DrawerCustom,
-    Grid,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    TextCustom,
-    ViewWrapper
+  AlertDefaultSystem,
+  BackButton,
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
+import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
@@ -34,26 +29,7 @@ export default function CollaborationDetail() {
         }}
       />
       <ViewWrapper>
-        <BoxWithHeaderSection>
-          <AvatarUsernameAndOtherComponent />
-          <Spacing />
-          <StackCustom>
-            <TextCustom align="center" bold size="large">
-              Judul Proyek {id}
-            </TextCustom>
-            <Spacing height={0} />
-            {listData.map((item, index) => (
-              <Grid key={index}>
-                <Grid.Col span={4}>
-                  <TextCustom bold>{item.title}</TextCustom>
-                </Grid.Col>
-                <Grid.Col span={8}>
-                  <TextCustom>{item.value}</TextCustom>
-                </Grid.Col>
-              </Grid>
-            ))}
-          </StackCustom>
-        </BoxWithHeaderSection>
+        <Collaboration_BoxDetailSection id={id as string} />
 
         <ButtonCustom onPress={() => setOpenDrawerPartisipasi(true)}>
           Partisipasi
@@ -113,24 +89,3 @@ export default function CollaborationDetail() {
     </>
   );
 }
-
-const listData = [
-  {
-    title: "Industri",
-    value: "Pilihan Industri",
-  },
-  {
-    title: "Deskripsi",
-    value: "Deskripsi Proyek",
-  },
-  {
-    title: "Tujuan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-  },
-  {
-    title: "Keuntungan Proyek",
-    value:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-  },
-];
diff --git a/screens/Collaboration/BoxDetailSection.tsx b/screens/Collaboration/BoxDetailSection.tsx
new file mode 100644
index 0000000..7840f11
--- /dev/null
+++ b/screens/Collaboration/BoxDetailSection.tsx
@@ -0,0 +1,54 @@
+import {
+    AvatarUsernameAndOtherComponent,
+    BoxWithHeaderSection,
+    Grid,
+    StackCustom,
+    TextCustom
+} from "@/components";
+
+export default function Collaboration_BoxDetailSection({ id }: { id: string }) {
+  return (
+    <>
+      <BoxWithHeaderSection>
+        <StackCustom>
+          <AvatarUsernameAndOtherComponent />
+          <TextCustom align="center" bold size="large">
+            Judul Proyek {id}
+          </TextCustom>
+
+          {listData.map((item, index) => (
+            <Grid key={index}>
+              <Grid.Col span={4}>
+                <TextCustom bold>{item.title}</TextCustom>
+              </Grid.Col>
+              <Grid.Col span={8}>
+                <TextCustom>{item.value}</TextCustom>
+              </Grid.Col>
+            </Grid>
+          ))}
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}
+
+const listData = [
+  {
+    title: "Industri",
+    value: "Pilihan Industri",
+  },
+  {
+    title: "Deskripsi",
+    value: "Deskripsi Proyek",
+  },
+  {
+    title: "Tujuan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  {
+    title: "Keuntungan Proyek",
+    value:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+];