Component

Add :
- CheckboxGroup
- components/_Icon/

Fix:
- CheckboxCustom: penambahan fitur untuk checkbox group

Feature:
Collaboration
Add :
- ProjectMainSelectedSection

Fix :
- detail-participant
- detail-project-main

# No Issue

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

@@ -140,13 +140,14 @@ export default function UserLayout() {
         />
 
         <Stack.Screen
-          name="collaboration/[id]/detail-project-main"
+          name="collaboration/[id]/edit"
           options={{
-            title: "Proyek Saya",
+            title: "Edit Proyek",
             headerLeft: () => <BackButton />,
           }}
         />
 
+
         {/* ========== End Collaboration Section ========= */}
 
         {/* ========== Forum Section ========= */}

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

@@ -8,7 +8,7 @@ import {
 } from "@/components";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import { Feather, MaterialIcons } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 
@@ -21,7 +21,6 @@ export default function CollaborationDetailParticipant() {
       <ViewWrapper>
         <Collaboration_BoxDetailSection id={id as string} />
         <BaseBox style={{ height: 500 }}>
-          <StackCustom>
             <TextCustom align="center" bold size="large">
               Partisipan
             </TextCustom>
@@ -40,7 +39,6 @@ export default function CollaborationDetailParticipant() {
                 }
               />
             ))}
-          </StackCustom>
         </BaseBox>
       </ViewWrapper>
 

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

@@ -1,78 +1,91 @@
 import {
-  AvatarCustom,
-  AvatarUsernameAndOtherComponent,
-  BaseBox,
+  AlertDefaultSystem,
+  BackButton,
+  ButtonCustom,
+  DotButton,
   DrawerCustom,
-  Grid,
+  MenuDrawerDynamicGrid,
+  Spacing,
   StackCustom,
   TextCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
-import CheckboxCustom from "@/components/Checkbox/CheckboxCustom";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
-import { Feather, MaterialIcons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
+import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection";
+import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { View } from "react-native";
 
 export default function CollaborationDetailProjectMain() {
   const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false);
-  const [agreed, setAgreed] = useState(false);
-  const [newsletter, setNewsletter] = useState(false);
+  const [selected, setSelected] = useState<(string | number)[]>([]);
+
+  const handleEdit = () => {
+    console.log("Edit collaboration");
+    router.push("/(application)/(user)/collaboration/(id)/edit");
+  };
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          title: "Proyek Saya",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
       <ViewWrapper>
         <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>
+        <Collaboration_MainParticipanSelectedSection
+          selected={selected}
+          setSelected={setSelected}
+          setOpenDrawerParticipant={setOpenDrawerParticipant}
+        />
 
-            {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>
+        <ButtonCustom
+          onPress={() => {
+            AlertDefaultSystem({
+              title: "Buat Grup",
+              message:
+                "Apakah anda yakin ingin membuat grup untuk proyek ini ?",
+              textLeft: "Tidak",
+              textRight: "Ya",
+              onPressLeft: () => {},
+              onPressRight: () => {
+                router.navigate(
+                  "/(application)/(user)/collaboration/(tabs)/group"
+                );
+                console.log("selected :", selected);
+              },
+            });
+          }}
+        >
+          Buat Grup
+        </ButtonCustom>
+        <Spacing />
       </ViewWrapper>
 
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Edit",
+              path: "/(application)/(user)/collaboration/(tabs)/group",
+              icon: <IconEdit />,
+            },
+          ]}
+          onPressItem={(item) => {
+            handleEdit();
+          }}
+        />
+      </DrawerCustom>
+
       <DrawerCustom
         isVisible={openDrawerParticipant}
         closeDrawer={() => setOpenDrawerParticipant(false)}

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

@@ -0,0 +1,53 @@
+import {
+  ButtonCustom,
+  SelectCustom,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { router } from "expo-router";
+
+export default function CollaborationEdit() {
+  return (
+    <ViewWrapper>
+      <StackCustom gap={"xs"}>
+        <TextInputCustom label="Judul" placeholder="Masukan judul" required />
+        <TextInputCustom label="Lokasi" placeholder="Masukan lokasi" required />
+        <SelectCustom
+          label="Pilih Industri"
+          data={[
+            { label: "Industri 1", value: "industri-1" },
+            { label: "Industri 2", value: "industri-2" },
+            { label: "Industri 3", value: "industri-3" },
+          ]}
+          onChange={(value) => console.log(value)}
+        />
+
+        <TextAreaCustom
+          required
+          label="Tujuan Proyek"
+          placeholder="Masukan tujuan proyek"
+          showCount
+          maxLength={1000}
+        />
+
+        <TextAreaCustom
+          required
+          label="Keuntungan Proyek"
+          placeholder="Masukan keuntungan proyek"
+          showCount
+          maxLength={1000}
+        />
+
+        <ButtonCustom
+          title="Update"
+          onPress={() => {
+            console.log("Update proyek");
+            router.back();
+          }}
+        />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}