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

@@ -107,6 +107,25 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        {/* ========== End Event Section ========= */}
+
+        {/* ========== Collaboration Section ========= */}
+        <Stack.Screen
+          name="collaboration/(tabs)"
+          options={{
+            title: "Collaboration",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="collaboration/create"
+          options={{
+            title: "Tambah Proyek",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+
+        {/* ========== End Collaboration Section ========= */}
 
         {/* ========== Forum Section ========= */}
         <Stack.Screen
@@ -127,7 +146,7 @@ export default function UserLayout() {
           name="forum/[id]/forumku"
           options={{
             title: "Forumku",
-            headerLeft: () => <BackButton icon={'close'} />,
+            headerLeft: () => <BackButton icon={"close"} />,
           }}
         />
         <Stack.Screen

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

@@ -0,0 +1,37 @@
+import { TabsStyles } from "@/styles/tabs-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function CollaborationTabsLayout() {
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="home" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="participans"
+        options={{
+          title: "Participans",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="people" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="group"
+        options={{
+          title: "Group",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="chatbox-ellipses" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

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

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

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

@@ -0,0 +1,29 @@
+import {
+    FloatingButton,
+    ViewWrapper
+} from "@/components";
+import Collaboration_BoxPublishSection from "@/screens/Collaboration/BoxPublishSection";
+import { router } from "expo-router";
+
+export default function CollaborationBeranda() {
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton
+          onPress={() => {
+            router.push("/collaboration/create")
+          }}
+        />
+      }
+    >
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Collaboration_BoxPublishSection
+          key={index}
+          id={index.toString()}
+          href={`/collaboration`}
+        />
+      ))}
+    </ViewWrapper>
+  );
+}

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

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

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

@@ -0,0 +1,11 @@
+import { TextCustom, ViewWrapper } from "@/components";
+
+export default function CollaborationCreate() {
+  return (
+    <ViewWrapper>
+      <TextCustom bold size="xlarge">
+        Tambah Koleksi
+      </TextCustom>
+    </ViewWrapper>
+  );
+}

components/Box/BaseBox.tsx

@@ -1,10 +1,11 @@
-import { AccentColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import {
   PADDING_MEDIUM,
   PADDING_SMALL
 } from "@/constants/constans-value";
 import { Href, router } from "expo-router";
 import {
+  AccessibilityInfo,
   StyleProp,
   TouchableOpacity,
   View,
@@ -22,6 +23,7 @@ interface BaseBoxProps {
   paddingBottom?: number;
   paddingInline?: number;
   paddingBlock?: number;
+  backgroundColor?: string;
 }
 
 export default function BaseBox({
@@ -34,6 +36,7 @@ export default function BaseBox({
   paddingInline = PADDING_SMALL,
   paddingTop = PADDING_MEDIUM,
   paddingBottom = PADDING_MEDIUM,
+  backgroundColor = AccentColor.darkblue,
 }: BaseBoxProps) {
 
   return (
@@ -44,7 +47,7 @@ export default function BaseBox({
           onPress={href ? () => router.navigate(href) : onPress}
           style={[
             {
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor,
               borderColor: AccentColor.blue,
               borderWidth: 1,
               borderRadius: 10,
@@ -63,7 +66,7 @@ export default function BaseBox({
         <View
           style={[
             {
-              backgroundColor: AccentColor.darkblue,
+              backgroundColor,
               borderColor: AccentColor.blue,
               borderWidth: 1,
               borderRadius: 10,

components/_ShareComponent/TabBarBackground.tsx

@@ -0,0 +1,15 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { View } from "react-native";
+
+export default function TabBarBackground() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: MainColor.darkblue,
+        borderTopWidth: 1,
+        borderTopColor: AccentColor.blue,
+      }}
+    />
+  );
+}

components/index.ts

@@ -5,6 +5,7 @@ import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
 import DotButton from "./Button/DotButton";
+import FloatingButton from "./Button/FloatingButton";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
@@ -42,36 +43,46 @@ import ScrollableCustom from "./Scroll/ScrollCustom";
 import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 import Spacing from "./_ShareComponent/Spacing";
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
+import TabBarBackground from "./_ShareComponent/TabBarBackground";
+
 export {
   AlertCustom,
   // Image
   AvatarCustom,
   // ShareComponent
-  AvatarUsernameAndOtherComponent, LeftButtonCustom as BackButton,
+  AvatarUsernameAndOtherComponent,
   // Box
   BaseBox,
-  BoxButtonOnFooter, BoxWithHeaderSection,
+  BoxButtonOnFooter,
+  BoxWithHeaderSection,
   // Button
+  LeftButtonCustom as BackButton,
   ButtonCenteredOnly,
   ButtonCustom,
+  FloatingButton,
+  DotButton,
   // Center
   CenterCustom,
   // Clickable
   ClickableCustom,
   // Divider
-  DividerCustom, DotButton,
+  DividerCustom,
   // Drawer
   DrawerCustom,
   // Grid
-  Grid, InformationBox, LandscapeFrameUploaded,
+  Grid,
+  InformationBox,
+  LandscapeFrameUploaded,
   // Map
-  MapCustom, MenuDrawerDynamicGrid,
+  MapCustom,
+  MenuDrawerDynamicGrid,
   // Scroll
   ScrollableCustom,
   // Select
   SelectCustom,
   // ShareComponent
   Spacing,
+  TabBarBackground,
   // Stack
   StackCustom,
   // TextArea
@@ -81,6 +92,5 @@ export {
   // TextInput
   TextInputCustom,
   // ViewWrapper
-  ViewWrapper
+  ViewWrapper,
 };
-

screens/Authentication/LoginView.tsx

@@ -30,9 +30,9 @@ export default function LoginView() {
     const id = randomAlfabet + randomNumber + fixNumber;
     console.log("login user id :", id);
 
-    router.navigate("/verification");
+    // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    // router.navigate("/(application)/(user)/home");
+    router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);

screens/Collaboration/BoxPublishSection.tsx

@@ -0,0 +1,63 @@
+import {
+  BoxWithHeaderSection,
+  StackCustom,
+  AvatarUsernameAndOtherComponent,
+  TextCustom,
+  BaseBox,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { Href } from "expo-router";
+
+function Collaboration_BoxPublishSection({
+  id,
+  title,
+  username,
+  description,
+  href,
+
+  // Avatar
+  sourceAvatar,
+  rightComponentAvatar,
+}: {
+  id: string;
+  title?: string;
+  username?: string;
+  description?: string;
+  href: Href;
+
+  // Avatar
+  sourceAvatar?: string;
+  rightComponentAvatar?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BoxWithHeaderSection href={href}>
+        <StackCustom gap={0}>
+          <AvatarUsernameAndOtherComponent
+            avatarHref={`/profile/${id}`}
+            name={username || "Username"}
+            rightComponent={rightComponentAvatar}
+            avatar={sourceAvatar as any}
+          />
+          <BaseBox backgroundColor={MainColor.soft_darkblue}>
+            <StackCustom>
+              <TextCustom truncate={2} size="large" bold align="center">
+                {title || "Lorem ipsum dolor sit"}
+              </TextCustom>
+              <TextCustom truncate={2}>
+                {description ||
+                  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, obcaecati quia suscipit numquam, voluptates commodi porro impedit natus quos doloremque!"}
+              </TextCustom>
+            </StackCustom>
+          </BaseBox>
+
+          <TextCustom bold size="small" align="center">
+            2 Partisipan
+          </TextCustom>
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}
+
+export default Collaboration_BoxPublishSection;

screens/Home/topFeatureSection.tsx

@@ -14,7 +14,10 @@ export default function Home_FeatureSection() {
           <Ionicons name="analytics" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Event</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={stylesHome.gridItem}>
+        <TouchableOpacity
+          style={stylesHome.gridItem}
+          onPress={() => router.push("/(application)/(user)/collaboration/(tabs)")}
+        >
           <Ionicons name="share" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Collaboration</Text>
         </TouchableOpacity>

styles/tabs-styles.ts

@@ -0,0 +1,25 @@
+import { TabBarBackground } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { OS_IOS_HEIGHT, OS_ANDROID_HEIGHT } from "@/constants/constans-value";
+import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
+import { Platform } from "react-native";
+
+export const TabsStyles: BottomTabNavigationOptions = {
+  headerShown: false,
+  tabBarActiveTintColor: MainColor.yellow,
+  tabBarInactiveTintColor: MainColor.white_gray,
+  tabBarStyle: Platform.select({
+    ios: {
+      borderTopWidth: 0,
+      paddingTop: 5,
+      height: OS_IOS_HEIGHT,
+    },
+    android: {
+      borderTopWidth: 0,
+      paddingTop: 5,
+      height: OS_ANDROID_HEIGHT,
+    },
+    default: {},
+  }),
+  tabBarBackground: TabBarBackground,
+};