Component

Add :
- Checkbox

Fix :
- Drawer: tinggi bisa auto
- AvataraAndOtherHeaderComponent : View pembungkus di hapus

Feature : Collaboration
Fix:
- detail-participant
- detail-project-main
(fix tampilan)

# No Issue

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

@@ -1,31 +1,20 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   AvatarUsernameAndOtherComponent,
   BaseBox,
+  DrawerCustom,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import { Feather } from "@expo/vector-icons";
-import { Image } from "expo-image";
+import { Feather, MaterialIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
-import { View, ScrollView, StyleSheet, Text } from "react-native";
-import { FlatList } from "react-native-gesture-handler";
+import { useState } from "react";
 
 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 " },
-  ];
+  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
 
   return (
     <>
@@ -36,111 +25,40 @@ export default function CollaborationDetailParticipant() {
             <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" }}>
+            {Array.from({ length: 5 }).map((_, index) => (
               <AvatarUsernameAndOtherComponent
+                key={index}
+                avatarHref={`/profile/${index}`}
                 rightComponent={
-                  <Feather name="chevron-right" size={24} color="white" />
+                  <MaterialIcons
+                    name="notes"
+                    size={ICON_SIZE_SMALL}
+                    color="white"
+                    onPress={() => setOpenDrawerParticipant(true)}
+                  />
                 }
               />
-            </View>
-          </ScrollView> */}
+            ))}
+          </StackCustom>
         </BaseBox>
       </ViewWrapper>
+
+      <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>
     </>
   );
 }
-
-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

@@ -1,13 +1,93 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  AvatarCustom,
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  DrawerCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import CheckboxCustom from "@/components/Checkbox/CheckboxCustom";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
+import { Feather, MaterialIcons } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
 
 export default function CollaborationDetailProjectMain() {
+  const { id } = useLocalSearchParams();
+  const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
+  const [agreed, setAgreed] = useState(false);
+  const [newsletter, setNewsletter] = useState(false);
+
   return (
     <>
       <ViewWrapper>
-        <TextCustom bold size="large">
-          Detail Proyek
-        </TextCustom>
+        <Collaboration_BoxDetailSection id={id as string} />
+        <BaseBox style={{ height: 500 }}>
+          <StackCustom>
+            <TextCustom size="default" color="red" bold>
+              *{" "}
+              <TextCustom size="small" semiBold>
+                Pilih user yang akan menjadi tim proyek anda
+              </TextCustom>
+            </TextCustom>
+
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Grid key={index}>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "center", justifyContent: "center" }}
+                >
+                  <CheckboxCustom
+                    value={newsletter}
+                    onChange={() => {
+                      console.log("newsletter", newsletter);
+                      setNewsletter(!newsletter);
+                    }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={2} style={{ alignItems: "center" }}>
+                  <AvatarCustom />
+                </Grid.Col>
+                <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                  <TextCustom bold truncate>
+                    Username
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "center", justifyContent: "center" }}
+                >
+                  <MaterialIcons
+                    name="notes"
+                    size={ICON_SIZE_SMALL}
+                    color="white"
+                  />
+                </Grid.Col>
+              </Grid>
+            ))}
+          </StackCustom>
+        </BaseBox>
       </ViewWrapper>
+
+      <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>
     </>
   );
 }