fix

Feature:
Add :
- Collaboration/BoxDetailSection
- detail-participant
-
/detail-project-main

Fix:
- participant

# No Issue

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 ========= */}
 

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>(
+  const [activeCategory, setActiveCategory] = useState<string | null>(
-      "participant"
+    "participant"
-    );
+  );
 
-    const handlePress = (item: any) => {
+  const handlePress = (item: any) => {
-        setActiveCategory(item);
+    setActiveCategory(item);
-        // tambahkan logika lain seperti filter dsb.
+    // 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"}`}
+          username={` ${
-          href={`/collaboration/create` }
+            activeCategory === "participant"
+              ? "Partisipasi Proyek"
+              : "Proyek Saya"
+          }`}
+          href={
+            activeCategory === "participant"
+              ? `/collaboration/${index}/detail-participant`
+              : `/collaboration/${index}/detail-project-main`
+          }
         />
       ))}
     </ViewWrapper>

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,
+  },
+});

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>
+    </>
+  );
+}

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

@@ -1,19 +1,14 @@
 import {
-    AlertDefaultSystem,
+  AlertDefaultSystem,
-    AvatarUsernameAndOtherComponent,
+  BackButton,
-    BackButton,
+  ButtonCustom,
-    BoxWithHeaderSection,
+  DotButton,
-    ButtonCustom,
+  DrawerCustom,
-    DotButton,
+  MenuDrawerDynamicGrid,
-    DrawerCustom,
+  TextAreaCustom,
-    Grid,
+  ViewWrapper,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    TextCustom,
-    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>
+        <Collaboration_BoxDetailSection id={id as string} />
-          <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>
 
         <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.",
-  },
-];

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.",
+  },
+];