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

@@ -15,9 +15,9 @@ export default function CollaborationTabsLayout() {
         }}
       />
       <Tabs.Screen
-        name="participans"
+        name="participant"
         options={{
-          title: "Participans",
+          title: "Partisipan",
           tabBarIcon: ({ color }) => (
             <Ionicons size={20} name="people" color={color} />
           ),
@@ -26,7 +26,7 @@ export default function CollaborationTabsLayout() {
       <Tabs.Screen
         name="group"
         options={{
-          title: "Group",
+          title: "Grup",
           tabBarIcon: ({ color }) => (
             <Ionicons size={20} name="chatbox-ellipses" color={color} />
           ),

app/(application)/(user)/collaboration/(tabs)/group.tsx

@@ -1,10 +1,27 @@
-import { TextCustom } from "@/components";
+import { BaseBox, Grid, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { Feather } from "@expo/vector-icons";
 
 export default function CollaborationGroup() {
   return (
-    <ViewWrapper>
-      <TextCustom>CollaborationGroup</TextCustom>
+    <ViewWrapper hideFooter>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <BaseBox key={index} paddingBlock={5}>
+          <Grid>
+            <Grid.Col span={10}>
+              <TextCustom bold>Nama Grup</TextCustom>
+              <TextCustom size="small">2 Anggota</TextCustom>
+            </Grid.Col>
+            <Grid.Col
+              span={2}
+              style={{ alignItems: "flex-end", justifyContent: "center" }}
+            >
+              <Feather name="chevron-right" size={20} color={MainColor.white} />
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+      ))}
     </ViewWrapper>
   );
 }

app/(application)/(user)/collaboration/(tabs)/participans.tsx

@@ -1,10 +0,0 @@
-import { TextCustom } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-
-export default function CollaborationParticipans() {
-  return (
-    <ViewWrapper>
-      <TextCustom>CollaborationParticipans</TextCustom>
-    </ViewWrapper>
-  );
-}

app/(application)/(user)/collaboration/(tabs)/participant.tsx

@@ -0,0 +1,68 @@
+import { ButtonCustom, Spacing } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
+import { useState } from "react";
+import { View } from "react-native";
+
+export default function CollaborationParticipans() {
+    const [activeCategory, setActiveCategory] = useState<string | null>(
+      "participant"
+    );
+
+    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>
+        );
+      
+
+  return (
+    <ViewWrapper hideFooter headerComponent={headerComponent}>
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Collaboration_BoxPublishSection
+          key={index.toString()}
+          id={index.toString()}
+          username={` ${activeCategory === "participant" ? "Partisipasi Proyek" : "Proyek Saya"}`}
+          href={`/collaboration/create` }
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

app/(application)/(user)/collaboration/create.tsx

@@ -1,11 +1,53 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+    ButtonCustom,
+    SelectCustom,
+    StackCustom,
+    TextAreaCustom,
+    TextInputCustom,
+    ViewWrapper
+} from "@/components";
+import { router } from "expo-router";
 
 export default function CollaborationCreate() {
   return (
     <ViewWrapper>
-      <TextCustom bold size="xlarge">
-        Tambah Koleksi
-      </TextCustom>
+      <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="Simpan"
+          onPress={() => {
+            console.log("Simpan proyek");
+            router.back();
+          }}
+        />
+      </StackCustom>
     </ViewWrapper>
   );
 }

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

@@ -1,31 +1,11 @@
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { OS_IOS_HEIGHT, OS_ANDROID_HEIGHT } from "@/constants/constans-value";
+import { TabsStyles } from "@/styles/tabs-styles";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import { Platform, View } from "react-native";
 
 export default function EventTabsLayout() {
   return (
     <Tabs
-      screenOptions={{
-        headerShown: false,
-        tabBarActiveTintColor: MainColor.yellow,
-        tabBarInactiveTintColor: MainColor.white_gray,
-        tabBarBackground: CustomTabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            borderTopWidth: 0,
-            paddingTop: 5,
-            height: OS_IOS_HEIGHT,
-          },
-          android: {
-            borderTopWidth: 0,
-            paddingTop: 5,
-            height: OS_ANDROID_HEIGHT,
-          },
-          default: {},
-        }),
-      }}
+      screenOptions={TabsStyles}
     >
       <Tabs.Screen
         name="index"
@@ -67,15 +47,3 @@ export default function EventTabsLayout() {
   );
 }
 
-function CustomTabBarBackground() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: MainColor.darkblue,
-        borderTopWidth: 1,
-        borderTopColor: AccentColor.blue,
-      }}
-    />
-  );
-}

components/Box/BaseBox.tsx

@@ -1,11 +1,10 @@
-import { AccentColor, MainColor } from "@/constants/color-palet";
+import { AccentColor } from "@/constants/color-palet";
 import {
   PADDING_MEDIUM,
   PADDING_SMALL
 } from "@/constants/constans-value";
 import { Href, router } from "expo-router";
 import {
-  AccessibilityInfo,
   StyleProp,
   TouchableOpacity,
   View,