feature

deskripsi:
- new component select
- fix styles login dan verifikasi

app/(application)/_layout.tsx

@@ -1,4 +1,5 @@
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
@@ -7,16 +8,16 @@ export default function ApplicationLayout() {
     <>
       <Stack
         screenOptions={{
-          headerStyle: { backgroundColor: MainColor.darkblue },
-          headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           contentStyle: {
             borderBottomColor: AccentColor.blue,
             borderBottomWidth: 2,
           },
-          headerLargeStyle: {
-            backgroundColor: MainColor.darkblue,
-          },
+          // headerLargeStyle: {
+          //   backgroundColor: MainColor.darkblue,
+          // },
         }}
       >
         <Stack.Screen
@@ -28,7 +29,7 @@ export default function ApplicationLayout() {
                 name="search"
                 size={20}
                 color={MainColor.yellow}
-                onPress={() => router.back()}
+                onPress={() => router.push("/(application)/user-search")}
               />
             ),
             headerRight: () => (
@@ -36,7 +37,7 @@ export default function ApplicationLayout() {
                 name="notifications"
                 size={20}
                 color={MainColor.yellow}
-                onPress={() => router.back()}
+                onPress={() => router.push("/(application)/notifications")}
               />
             ),
           }}
@@ -73,7 +74,7 @@ export default function ApplicationLayout() {
         />
 
         <Stack.Screen
-          name="market-place/index"
+          name="marketplace/index"
           options={{
             title: "Market Place",
             headerLeft: () => (
@@ -87,10 +88,74 @@ export default function ApplicationLayout() {
           }}
         />
 
+        {/* Profile */}
         <Stack.Screen
-          name="profile/index"
+          name="profile"
           options={{
-            title: "Profile",
+            headerShown: false,
+          }}
+        />
+
+        {/* Portofolio */}
+        <Stack.Screen
+          name="portofolio"
+          options={{
+            headerShown: false,
+          }}
+        />
+
+        {/* Event */}
+        <Stack.Screen
+          name="event/(tabs)"
+          options={{
+            title: "Event",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.push("/(application)/home")}
+              />
+            ),
+          }}
+        />
+
+        <Stack.Screen
+          name="event/detail/[id]"
+          options={{
+            title: "Detail",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+          }}
+        />
+
+        {/* User Search */}
+        <Stack.Screen
+          name="user-search/index"
+          options={{
+            title: "Pencarian Pengguna",
+            headerLeft: () => (
+              <Ionicons
+                name="arrow-back"
+                size={20}
+                color={MainColor.yellow}
+                onPress={() => router.back()}
+              />
+            ),
+          }}
+        />
+
+        {/* Notification */}
+        <Stack.Screen
+          name="notifications/index"
+          options={{
+            title: "Notifikasi",
             headerLeft: () => (
               <Ionicons
                 name="arrow-back"

app/(application)/coba/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
 import {
   View,
@@ -86,7 +85,7 @@ const CustomTabNavigator = () => {
       activeIcon: "notifications",
       label: "Forum",
       component: NotificationScreen,
-      path: "/(application)/(home-tabs)/forum",
+      path: "/forum",
     },
     {
       id: "profile",
@@ -94,7 +93,7 @@ const CustomTabNavigator = () => {
       activeIcon: "person",
       label: "Katalog",
       component: ProfileScreen,
-      path: "/(application)/(home-tabs)/katalog",
+      path: "/profile",
     },
   ];
 
@@ -102,7 +101,7 @@ const CustomTabNavigator = () => {
   // Function untuk handle tab press
   const handleTabPress = (tabId: string) => {
     setActiveTab(tabId);
-    // setShowHome(false); // Hide home when any tab is pressed
+    setShowHome(false); // Hide home when any tab is pressed
   };
   
   // Determine which component to show
@@ -110,8 +109,9 @@ const CustomTabNavigator = () => {
     if (showHome || activeTab === "home") {
       return HomeScreen;
     }
-    const selectedTab = tabs.find((tab) => tab.id === activeTab);
-    return selectedTab ? selectedTab.component : HomeScreen;
+    // const selectedTab = tabs.find((tab) => tab.id === activeTab);
+    // return selectedTab ? selectedTab.component : HomeScreen;
+    return HomeScreen
   };
 
   const ActiveComponent = getActiveComponent();
@@ -135,7 +135,7 @@ const CustomTabNavigator = () => {
               label={e.label}
               isActive={activeTab === e.id && !showHome}
               onPress={() => {
-                // handleTabPress(e.id);
+                handleTabPress(e.id);
                 router.push(e.path as any);
               }}
             />

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

@@ -0,0 +1,64 @@
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function EventLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: MainColor.yellow,
+        tabBarInactiveTintColor: MainColor.white,
+        tabBarStyle: {
+          backgroundColor: MainColor.darkblue,
+        },
+        //   tabBarButton: HapticTab,
+        //   tabBarBackground: BlurTabBarBackground,
+        //   tabBarStyle: Platform.select({
+        //     ios: {
+        //       // Use a transparent background on iOS to show the blur effect
+        //       position: "absolute",
+        //     },
+        //     default: {},
+        //   }),
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="home" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Status",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="list" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="kontribusi"
+        options={{
+          title: "Kontribusi",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="extension-puzzle" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="riwayat"
+        options={{
+          title: "Riwayat",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome5 size={20} name="history" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(application)/event/(tabs)/index.tsx

@@ -0,0 +1,25 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
+import { router } from "expo-router";
+import { Text, TouchableHighlight, View } from "react-native";
+
+export default function Event() {
+  return (
+    <ViewWrapper>
+      <TouchableHighlight onPress={() => router.push("/event/detail/1")}>
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: MainColor.darkblue,
+            borderRadius: 10,
+            borderColor: AccentColor.blue,
+            borderWidth: 1,
+          }}
+        >
+          <Text style={GStyles.textLabel}>Event</Text>
+        </View>
+      </TouchableHighlight>
+    </ViewWrapper>
+  );
+}

app/(application)/event/(tabs)/kontribusi.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { GStyles } from "@/styles/global-styles";
+import { Text } from "react-native";
+
+export default function Kontribusi() {
+  return (
+    <ViewWrapper>
+      <Text style={GStyles.textLabel}>Kontribusi</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/(tabs)/riwayat.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { GStyles } from "@/styles/global-styles";
+import { Text } from "react-native";
+
+export default function Riwayat() {
+  return (
+    <ViewWrapper>
+      <Text style={GStyles.textLabel}>Riwayat</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/(tabs)/status.tsx

@@ -0,0 +1,11 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { GStyles } from "@/styles/global-styles";
+import { Text } from "react-native";
+
+export default function Status() {
+  return (
+    <ViewWrapper>
+      <Text style={GStyles.textLabel}>Status</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/event/detail/[id].tsx

@@ -0,0 +1,14 @@
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { GStyles } from "@/styles/global-styles";
+import { useLocalSearchParams } from "expo-router";
+import { Text } from "react-native";
+
+export default function DetailEvent() {
+  const { id } = useLocalSearchParams();
+  console.log("id event >", id);
+  return (
+    <ViewWrapper>
+      <Text style={GStyles.textLabel}>Detail Event {id}</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/home.tsx

@@ -1,9 +1,9 @@
-import NewHomeView from "@/screens/Home/UiHome";
+import UiHome from "@/screens/Home/UiHome";
 
 export default function Application() {
   return (
     <>
-      <NewHomeView />
+      <UiHome />
     </>
   );
 }

app/(application)/notifications/index.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function Notifications() {
+  return (
+    <View>
+      <Text>Notifications</Text>
+    </View>
+  );
+}

app/(application)/portofolio/[id]/create.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function PortofolioCreate() {
+    const { id } = useLocalSearchParams();
+    return (
+        <View>
+            <Text>Portofolio Create {id}</Text>
+        </View> 
+    );
+}

app/(application)/portofolio/[id]/index.tsx

@@ -0,0 +1,32 @@
+import BackButton from "@/components/Button/BackButton";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { GStyles } from "@/styles/global-styles";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { Text } from "react-native";
+
+export default function Portofolio() {
+    const { id } = useLocalSearchParams();
+  return (
+    <ViewWrapper>
+      {/* Header */}
+      <Stack.Screen
+        options={{
+          title: "Portofolio",
+          headerLeft: () => <BackButton />,
+        //   headerRight: () => (
+        //     <TouchableOpacity onPress={openDrawer}>
+        //       <Ionicons
+        //         name="ellipsis-vertical"
+        //         size={20}
+        //         color={MainColor.yellow}
+        //       />
+        //     </TouchableOpacity>
+        //   ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+        }}
+      />
+      <Text style={GStyles.textLabel}>Portofolio {id}</Text>
+    </ViewWrapper>
+  );
+}

app/(application)/portofolio/_layout.tsx

@@ -0,0 +1,26 @@
+
+import BackButton from "@/components/Button/BackButton";
+import { GStyles } from "@/styles/global-styles";
+import { Stack } from "expo-router";
+
+export default function PortofolioLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+          headerTitleAlign: "center",
+          headerBackButtonDisplayMode: "minimal",
+          headerLeft: () => <BackButton />,
+        }}
+      >
+        {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}
+        <Stack.Screen
+          name="[id]/create"
+          options={{ title: "Tambah Portofolio" }}
+        />
+      </Stack>
+    </>
+  );
+}

app/(application)/profile/[id]/edit.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  ButtonCustom,
+  SelectCustom,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { StyleSheet, Text } from "react-native";
+
+export default function ProfileEdit() {
+  const { id } = useLocalSearchParams();
+
+  const [nama, setNama] = useState("Bagas Banuna");
+  const [email, setEmail] = useState("bagasbanuna@gmail.com");
+  const [alamat, setAlamat] = useState("Bandar Lampung");
+
+  const [selectedValue, setSelectedValue] = useState<string | number>("");
+
+  const options = [
+    { label: "React", value: "react" },
+    { label: "Vue", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+    { label: "Next.js", value: "nextjs" },
+    { label: "Nuxt.js", value: "nuxtjs" },
+    { label: "Remix", value: "remix" },
+    { label: "Sapper", value: "sapper" },
+    { label: "SvelteKit", value: "sveltekit" },
+  ];
+
+  return (
+    <ViewWrapper
+      bottomBarComponent={
+        <ButtonCustom
+          disabled={!nama || !email || !alamat || !selectedValue}
+          onPress={() => {
+            console.log("data >>", nama, email, alamat, selectedValue);
+            router.back();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
+      }
+    >
+      <StackCustom gap={"xs"}>
+        <SelectCustom
+          label="Framework"
+          placeholder="Pilih framework favoritmu"
+          data={options}
+          value={selectedValue}
+          onChange={setSelectedValue}
+        />
+        {/* {selectedValue && (
+        <Text style={styles.result}>Terpilih: {selectedValue}</Text>
+      )} */}
+
+        <TextInputCustom
+          label="Nama"
+          placeholder="Nama"
+          value={nama}
+          onChangeText={(text) => {
+            setNama(text);
+          }}
+          required
+        />
+        <TextInputCustom
+          label="Email"
+          placeholder="Email"
+          value={email}
+          onChangeText={(text) => {
+            setEmail(text);
+          }}
+          required
+        />
+        <TextInputCustom
+          label="Alamat"
+          placeholder="Alamat"
+          value={alamat}
+          onChangeText={(text) => {
+            setAlamat(text);
+          }}
+          required
+        />
+      </StackCustom>
+    </ViewWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    padding: 20,
+  },
+  result: {
+    marginTop: 20,
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

app/(application)/profile/[id]/index.tsx

@@ -0,0 +1,131 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import AlertCustom from "@/components/Alert/AlertCustom";
+import BackButton from "@/components/Button/BackButton";
+import DrawerCustom from "@/components/Drawer/DrawerCustom";
+import { MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+import Profile_MenuDrawerSection from "@/screens/Profile/MenuDrawerSection";
+import ProfilSection from "@/screens/Profile/ProfilSection";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import React, { useRef, useState } from "react";
+import { Animated, InteractionManager, TouchableOpacity } from "react-native";
+
+export default function Profile() {
+  const { id } = useLocalSearchParams();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [showLogoutAlert, setShowLogoutAlert] = useState(false);
+
+  const drawerItems: IMenuDrawerItem[] = [
+    {
+      icon: "create",
+      label: "Edit profile",
+      path: `/(application)/profile/${id}/edit`,
+    },
+    {
+      icon: "camera",
+      label: "Ubah foto profile",
+      path: `/(application)/profile/${id}/update-photo`,
+    },
+    {
+      icon: "image",
+      label: "Ubah latar belakang",
+      path: `/(application)/profile/${id}/update-background`,
+    },
+    {
+      icon: "add-circle",
+      label: "Tambah portofolio",
+      path: `/(application)/portofolio/${id}/create`,
+    },
+    // {
+    //   icon: "settings",
+    //   label: "Dashboard Admin",
+    //   path: `/(application)/profile/dashboard-admin`,
+    // },
+    { icon: "log-out", label: "Keluar", color: "red", path: "" },
+  ];
+
+  // Animasi menggunakan translateY (lebih kompatibel)
+  const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
+
+  const openDrawer = () => {
+    setIsDrawerOpen(true);
+    Animated.timing(drawerAnim, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const closeDrawer = () => {
+    Animated.timing(drawerAnim, {
+      toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      InteractionManager.runAfterInteractions(() => {
+        setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
+      });
+    });
+  };
+
+  const handleLogout = () => {
+    console.log("User logout");
+    router.replace("/");
+    setShowLogoutAlert(false);
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {/* Header */}
+        <Stack.Screen
+          options={{
+            title: "Profile",
+            headerLeft: () => <BackButton />,
+            headerRight: () => (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
+            headerStyle: GStyles.headerStyle,
+            headerTitleStyle: GStyles.headerTitleStyle,
+          }}
+        />
+        <ProfilSection />
+       
+      </ViewWrapper>
+
+      {/* Drawer Komponen Eksternal */}
+      <DrawerCustom
+        height={350}
+        isVisible={isDrawerOpen}
+        drawerAnim={drawerAnim}
+        closeDrawer={closeDrawer}
+      >
+        <Profile_MenuDrawerSection
+          drawerItems={drawerItems}
+          setShowLogoutAlert={setShowLogoutAlert}
+          setIsDrawerOpen={setIsDrawerOpen}
+        />
+      </DrawerCustom>
+
+      {/* Alert Komponen Eksternal */}
+      <AlertCustom
+        isVisible={showLogoutAlert}
+        onLeftPress={() => setShowLogoutAlert(false)}
+        onRightPress={handleLogout}
+        title="Apakah anda yakin ingin keluar?"
+        textLeft="Batal"
+        textRight="Keluar"
+        colorRight={MainColor.red}
+      />
+    </>
+  );
+}

app/(application)/profile/[id]/update-background.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function UpdatePhotoBackground() {
+    const { id } = useLocalSearchParams();
+    return (
+        <View>
+            <Text>Update Photo Background {id}</Text>
+        </View>
+    )
+}

app/(application)/profile/[id]/update-photo.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+export default function UpdatePhotoProfile() {
+  const { id } = useLocalSearchParams();
+  return (
+    <View>
+      <Text>Update Photo Profile {id}</Text>
+    </View>
+  );
+}

app/(application)/profile/_layout.tsx

@@ -0,0 +1,30 @@
+import { BackButton } from "@/components";
+import { GStyles } from "@/styles/global-styles";
+import { Stack } from "expo-router";
+
+export default function ProfileLayout() {
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
+          headerTitleAlign: "center",
+          headerBackButtonDisplayMode: "minimal",
+          headerLeft: () => <BackButton />,
+        }}
+      >
+        {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
+        <Stack.Screen name="[id]/edit" options={{ title: "Edit Profile" }} />
+        <Stack.Screen
+          name="[id]/update-photo"
+          options={{ title: "Update Foto" }}
+        />
+        <Stack.Screen
+          name="[id]/update-background"
+          options={{ title: "Update Latar Belakang" }}
+        />
+      </Stack>
+    </>
+  );
+}

app/(application)/profile/index.tsx

@@ -1,9 +0,0 @@
-import { Text, View } from "react-native";
-
-export default function Profile() {
-    return (
-        <View>
-            <Text>Profile</Text>
-        </View>
-    );
-}

app/(application)/user-search/index.tsx

@@ -1,9 +1,9 @@
 import { Text, View } from "react-native";
 
-export default function Event() {
+export default function UserSearch() {
     return (
         <View>
-            <Text>Event</Text>
+            <Text>User Search</Text>
         </View>
     )
 }

app/_layout.tsx

@@ -1,34 +1,71 @@
 import { MainColor } from "@/constants/color-palet";
 import { Stack } from "expo-router";
+import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function RootLayout() {
   return (
-    <SafeAreaProvider
-      style={{
-        backgroundColor: MainColor.darkblue,
-      }}
-    >
-      <Stack
-        screenOptions={{
-          headerStyle: { backgroundColor: MainColor.darkblue },
-          headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
-          headerTitleAlign: "center",
-          // contentStyle: {
-          //   borderBottomColor: AccentColor.blue,
-          //   borderBottomWidth: 2,
-          // },
-          // headerLargeStyle: {
-          //   backgroundColor: MainColor.darkblue,
-          // },
-          // headerShadowVisible: false,
-        }}
-      >
-        <Stack.Screen name="index" options={{ headerShown: false }} />
-        <Stack.Screen name="verification" options={{ headerShown: false }} />
-        <Stack.Screen name="register" options={{ headerShown: false }} />
-        <Stack.Screen name="(application)" options={{ headerShown: false }} />
-      </Stack>
-    </SafeAreaProvider>
+    <>
+      <SafeAreaProvider>
+        <Stack
+          screenOptions={{
+            headerStyle: { backgroundColor: MainColor.darkblue },
+            headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+            headerTitleAlign: "center",
+            // contentStyle: {
+            //   borderBottomColor: AccentColor.blue,
+            //   borderBottomWidth: 2,
+            // },
+            // headerLargeStyle: {
+            //   backgroundColor: MainColor.darkblue,
+            // },
+            // headerShadowVisible: false,
+          }}
+        >
+          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="verification" options={{ headerShown: false }} />
+          <Stack.Screen name="register" options={{ headerShown: false }} />
+          <Stack.Screen name="(application)" options={{ headerShown: false }} />
+        </Stack>
+      </SafeAreaProvider>
+    </>
+    // <SafeAreaProvider
+    //   style={{
+    //     backgroundColor: AccentColor.darkblue,
+    //   }}
+    // >
+    //   <SafeAreaView
+    //     edges={[
+    //       "bottom",
+    //       // "top",
+    //     ]}
+    //     style={{
+    //       flex: 1,
+    //       // paddingTop: StatusBar.currentHeight,
+    //       // backgroundColor: MainColor.darkblue,
+    //     }}
+    //   >
+    //     <Stack
+    //       screenOptions={{
+    //         headerStyle: { backgroundColor: MainColor.darkblue },
+    //         headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
+    //         headerTitleAlign: "center",
+    //         // contentStyle: {
+    //         //   borderBottomColor: AccentColor.blue,
+    //         //   borderBottomWidth: 2,
+    //         // },
+    //         // headerLargeStyle: {
+    //         //   backgroundColor: MainColor.darkblue,
+    //         // },
+    //         // headerShadowVisible: false,
+    //       }}
+    //     >
+    //       <Stack.Screen name="index" options={{ headerShown: false }} />
+    //       <Stack.Screen name="verification" options={{ headerShown: false }} />
+    //       <Stack.Screen name="register" options={{ headerShown: false }} />
+    //       <Stack.Screen name="(application)" options={{ headerShown: false }} />
+    //     </Stack>
+    //   </SafeAreaView>
+    // </SafeAreaProvider>
   );
 }

bun.lock

@@ -6,18 +6,19 @@
       "dependencies": {
         "@expo/vector-icons": "^14.1.0",
         "@react-navigation/bottom-tabs": "^7.4.2",
+        "@react-navigation/drawer": "^7.5.2",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.21",
         "@types/react-native-vector-icons": "^6.4.18",
-        "expo": "~53.0.12",
+        "expo": "53.0.13",
         "expo-blur": "~14.1.5",
         "expo-constants": "~17.1.6",
         "expo-font": "~13.3.1",
         "expo-haptics": "~14.1.4",
         "expo-image": "~2.3.0",
         "expo-linking": "~7.1.5",
-        "expo-router": "~5.1.0",
+        "expo-router": "~5.1.1",
         "expo-splash-screen": "~0.30.9",
         "expo-status-bar": "~2.2.3",
         "expo-symbols": "~0.4.5",
@@ -390,6 +391,8 @@
 
     "@react-navigation/core": ["@react-navigation/core@7.11.0", "", { "dependencies": { "@react-navigation/routers": "^7.4.1", "escape-string-regexp": "^4.0.0", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-LfYPtxsMjldJ80BBeedaDCN0LE81WU1NP4V9Ia3wSrCPTAXt11y6holaBUrmUMVQVqpEyPRQrjwrT1QkfGKquw=="],
 
+    "@react-navigation/drawer": ["@react-navigation/drawer@7.5.2", "", { "dependencies": { "@react-navigation/elements": "^2.5.2", "color": "^4.2.3", "react-native-drawer-layout": "^4.1.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "react-native-reanimated": ">= 2.0.0", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-1FSo+DyJe2zlIcQBhHcayZCe2aAF2JF+rpn7HnVnTV2HaCEpgJ0/zgHIa9MZByKntp/aSexL9YkDFQhQj2+7ag=="],
+
     "@react-navigation/elements": ["@react-navigation/elements@2.4.5", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-rzoQQ07dZGA3h608imB1nAZ2rPw9vZ2xc2K36XSZoV/7IZRDxI4BCIj38Wc4saQaYhfJIoeVssK4+6IwhZBedg=="],
 
     "@react-navigation/native": ["@react-navigation/native@7.1.12", "", { "dependencies": { "@react-navigation/core": "^7.11.0", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-ezHzrZN+9SE4Co6/H8MgDWlBxfJbVc5xi8szRi2QW8eJlsZsAvgGqtKs4YECraV4Yr9zW8RCzNuUxYiQiPMtEQ=="],
@@ -802,7 +805,7 @@
 
     "exec-async": ["exec-async@2.2.0", "", {}, "sha512-87OpwcEiMia/DeiKFzaQNBNFeN3XkkpYIh9FyOqq5mS2oKv3CBE67PXoEKcr6nodWdXNogTiQ0jE2NGuoffXPw=="],
 
-    "expo": ["expo@53.0.12", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "0.24.15", "@expo/config": "~11.0.10", "@expo/config-plugins": "~10.0.3", "@expo/fingerprint": "0.13.1", "@expo/metro-config": "0.20.15", "@expo/vector-icons": "^14.0.0", "babel-preset-expo": "~13.2.1", "expo-asset": "~11.1.5", "expo-constants": "~17.1.6", "expo-file-system": "~18.1.10", "expo-font": "~13.3.1", "expo-keep-awake": "~14.1.4", "expo-modules-autolinking": "2.1.12", "expo-modules-core": "2.4.0", "react-native-edge-to-edge": "1.6.0", "whatwg-url-without-unicode": "8.0.0-3" }, "peerDependencies": { "@expo/dom-webview": "*", "@expo/metro-runtime": "*", "react": "*", "react-native": "*", "react-native-webview": "*" }, "optionalPeers": ["@expo/dom-webview"], "bin": { "expo": "bin/cli", "expo-modules-autolinking": "bin/autolinking", "fingerprint": "bin/fingerprint" } }, "sha512-dtmED749hkxDWCcvtD++tb8bAm3Twv8qnUOXzVyXA5owNG0mwDIz0HveJTpWK1UzkY4HcTVRezDf0tflZJ+JXQ=="],
+    "expo": ["expo@53.0.13", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "0.24.15", "@expo/config": "~11.0.10", "@expo/config-plugins": "~10.0.3", "@expo/fingerprint": "0.13.1", "@expo/metro-config": "0.20.15", "@expo/vector-icons": "^14.0.0", "babel-preset-expo": "~13.2.1", "expo-asset": "~11.1.5", "expo-constants": "~17.1.6", "expo-file-system": "~18.1.10", "expo-font": "~13.3.1", "expo-keep-awake": "~14.1.4", "expo-modules-autolinking": "2.1.12", "expo-modules-core": "2.4.0", "react-native-edge-to-edge": "1.6.0", "whatwg-url-without-unicode": "8.0.0-3" }, "peerDependencies": { "@expo/dom-webview": "*", "@expo/metro-runtime": "*", "react": "*", "react-native": "*", "react-native-webview": "*" }, "optionalPeers": ["@expo/dom-webview", "@expo/metro-runtime", "react-native-webview"], "bin": { "expo": "bin/cli", "fingerprint": "bin/fingerprint", "expo-modules-autolinking": "bin/autolinking" } }, "sha512-QDdEEbFErUmm2IHR/UPKKIRLN3z5MmN2QLx0aPlOEGOx295buSUE42u6f7TppkgJn0BUX3f7wFaHRo86+G+Trg=="],
 
     "expo-asset": ["expo-asset@11.1.5", "", { "dependencies": { "@expo/image-utils": "^0.7.4", "expo-constants": "~17.1.5" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-GEQDCqC25uDBoXHEnXeBuwpeXvI+3fRGvtzwwt0ZKKzWaN+TgeF8H7c76p3Zi4DfBMFDcduM0CmOvJX+yCCLUQ=="],
 
@@ -826,7 +829,7 @@
 
     "expo-modules-core": ["expo-modules-core@2.4.0", "", { "dependencies": { "invariant": "^2.2.4" } }, "sha512-Ko5eHBdvuMykjw9P9C9PF54/wBSsGOxaOjx92I5BwgKvEmUwN3UrXFV4CXzlLVbLfSYUQaLcB220xmPfgvT7Fg=="],
 
-    "expo-router": ["expo-router@5.1.0", "", { "dependencies": { "@expo/metro-runtime": "5.0.4", "@expo/server": "^0.6.2", "@radix-ui/react-slot": "1.2.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/native": "^7.1.6", "@react-navigation/native-stack": "^7.3.10", "client-only": "^0.0.1", "invariant": "^2.2.4", "react-fast-compare": "^3.2.2", "react-native-is-edge-to-edge": "^1.1.6", "schema-utils": "^4.0.1", "semver": "~7.6.3", "server-only": "^0.0.1", "shallowequal": "^1.1.0" }, "peerDependencies": { "@react-navigation/drawer": "^7.3.9", "expo": "*", "expo-constants": "*", "expo-linking": "*", "react-native-reanimated": "*", "react-native-safe-area-context": "*", "react-native-screens": "*" }, "optionalPeers": ["@react-navigation/drawer"] }, "sha512-mnKpw35W6kKPpZm+ZxQei6HGUx2JO3znzqJZInzqrTZMgfAcHGgvP9AQFjg/Qi/Qy1CxunB9aQnqE9JPbSwbpw=="],
+    "expo-router": ["expo-router@5.1.1", "", { "dependencies": { "@expo/metro-runtime": "5.0.4", "@expo/server": "^0.6.3", "@radix-ui/react-slot": "1.2.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/native": "^7.1.6", "@react-navigation/native-stack": "^7.3.10", "client-only": "^0.0.1", "invariant": "^2.2.4", "react-fast-compare": "^3.2.2", "react-native-is-edge-to-edge": "^1.1.6", "schema-utils": "^4.0.1", "semver": "~7.6.3", "server-only": "^0.0.1", "shallowequal": "^1.1.0" }, "peerDependencies": { "@react-navigation/drawer": "^7.3.9", "expo": "*", "expo-constants": "*", "expo-linking": "*", "react-native-reanimated": "*", "react-native-safe-area-context": "*", "react-native-screens": "*" }, "optionalPeers": ["@react-navigation/drawer", "react-native-reanimated"] }, "sha512-KYAp/SwkPVgY+8OI+UPGENZG4j+breoOMXmZ01s99U7X0dpSihKGSNpK6LkEoU31MXMLuUHGYYwD00zm9aqcSg=="],
 
     "expo-splash-screen": ["expo-splash-screen@0.30.9", "", { "dependencies": { "@expo/prebuild-config": "^9.0.6" }, "peerDependencies": { "expo": "*" } }, "sha512-curHUaZxUTZ2dWvz32ao3xPv5mJr1LBqn5V8xm/IULAehB9RGCn8iKiROMN1PYebSG+56vPMuJmBm9P+ayvJpA=="],
 
@@ -1352,6 +1355,8 @@
 
     "react-native-country-codes-picker": ["react-native-country-codes-picker@2.3.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-dDQhd0bVvlmgb84NPhTOmTk5UVYPHtk3lqZI+BPb61H1rC2IDrTvPWENg6u1DMGliqWHQDBYpeH37zvxxQL71w=="],
 
+    "react-native-drawer-layout": ["react-native-drawer-layout@4.1.11", "", { "dependencies": { "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "react-native-reanimated": ">= 2.0.0" } }, "sha512-31gilubSKPLToy31/bb0hhgOOenHYJq4JC7g/JkIEqBqSWzoCgiOlccDHlBRG+MV37UtXZnJN2spj3VusdCd4A=="],
+
     "react-native-edge-to-edge": ["react-native-edge-to-edge@1.6.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-2WCNdE3Qd6Fwg9+4BpbATUxCLcouF6YRY7K+J36KJ4l3y+tWN6XCqAC4DuoGblAAbb2sLkhEDp4FOlbOIot2Og=="],
 
     "react-native-gesture-handler": ["react-native-gesture-handler@2.24.0", "", { "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ZdWyOd1C8axKJHIfYxjJKCcxjWEpUtUWgTOVY2wynbiveSQDm8X/PDyAKXSer/GOtIpjudUbACOndZXCN3vHsw=="],
@@ -1770,6 +1775,8 @@
 
     "@react-navigation/bottom-tabs/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
 
+    "@react-navigation/drawer/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
+
     "@react-navigation/native-stack/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
 
     "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
@@ -1820,10 +1827,6 @@
 
     "expo-modules-autolinking/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": "dist/esm/bin.mjs" }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
 
-    "expo-router/@react-navigation/bottom-tabs": ["@react-navigation/bottom-tabs@7.3.16", "", { "dependencies": { "@react-navigation/elements": "^2.4.5", "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-BOVtrq5J3zV3T9CeQexX20JrjECWwIgUJj0Uj0DTVuZdvPIf1AHKHDQSWcG6XqDsbqFQu9yCAfRlnt0WwdRP2w=="],
-
-    "expo-router/@react-navigation/native-stack": ["@react-navigation/native-stack@7.3.17", "", { "dependencies": { "@react-navigation/elements": "^2.4.5", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-nPJv5E/7MYZ5NPD0sFP9DjSawEQ1fYXe0sCZT1C5EHGWK08p3+5HkVScXofDDqUtI/q6UU23uE1YoxVWgRbDRw=="],
-
     "expo-router/semver": ["semver@7.6.3", "", { "bin": "bin/semver.js" }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

components/Alert/AlertCustom.tsx

@@ -0,0 +1,127 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+interface AlertCustomProps {
+  isVisible: boolean;
+  onLeftPress: () => void;
+  onRightPress: () => void;
+  title?: string;
+  message?: string;
+  textLeft?: string;
+  textRight?: string;
+  colorLeft?: string;
+  colorRight?: string;
+}
+
+export default function AlertCustom({
+  isVisible,
+  onLeftPress,
+  onRightPress,
+  title,
+  message,
+  textLeft,
+  textRight,
+  colorLeft,
+  colorRight,
+}: AlertCustomProps) {
+  if (!isVisible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.alertBox}>
+        {title && message ? (
+          <>
+            <Text style={styles.alertTitle}>{title}</Text>
+            <Text style={styles.alertMessage}>{message}</Text>
+          </>
+        ) : title ? (
+          <Text style={styles.alertTitle}>{title}</Text>
+        ) : (
+          <Text style={styles.alertMessage}>{message}</Text>
+        )}
+        <View style={styles.alertButtons}>
+          <TouchableOpacity
+            style={[
+              styles.alertButton,
+              colorLeft ? { backgroundColor: colorLeft } : styles.leftButton,
+            ]}
+            onPress={onLeftPress}
+          >
+            <Text style={styles.buttonText}>{textLeft}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.alertButton,
+              colorRight ? { backgroundColor: colorRight } : styles.rightButton,
+            ]}
+            onPress={onRightPress}
+          >
+            <Text style={styles.buttonText}>{textRight}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+  alertBox: {
+    width: "90%",
+    backgroundColor: MainColor.darkblue,
+    borderColor: AccentColor.blue,
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 20,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    elevation: 5,
+  },
+  alertTitle: {
+    fontSize: TEXT_SIZE_LARGE,
+    fontWeight: "bold",
+    marginBottom: 20,
+    color: MainColor.white,
+  },
+  alertMessage: {
+    textAlign: "center",
+    marginBottom: 20,
+    color: MainColor.white,
+  },
+  alertButtons: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  alertButton: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 5,
+    marginHorizontal: 5,
+    alignItems: "center",
+  },
+  leftButton: {
+    backgroundColor: "gray",
+  },
+  rightButton: {
+    backgroundColor: MainColor.green,
+  },
+  buttonText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});

components/Avatar/AvatarCustom.tsx

@@ -0,0 +1,55 @@
+import { MainColor } from "@/constants/color-palet";
+import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+
+type Size = "base" | "sm" | "md" | "lg";
+
+interface AvatarCustomProps {
+  source?: ImageSourcePropType;
+  size?: Size;
+}
+
+const sizeMap = {
+  base: 40,
+  sm: 60,
+  md: 80,
+  lg: 100,
+};
+
+export default function AvatarCustom({
+  source = require("@/assets/images/dummy/dummy-avatar.png"),
+  size = "base",
+}: AvatarCustomProps) {
+  const dimension = sizeMap[size];
+
+  return (
+    <Image
+      source={source}
+      style={[
+        styles.overlappingAvatar,
+        {
+          width: dimension,
+          height: dimension,
+          borderRadius: dimension / 2,
+        },
+      ]}
+      resizeMode="cover"
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  overlappingAvatar: {
+    borderWidth: 2,
+    borderColor: "#fff",
+    backgroundColor: MainColor.white,
+    // shadowColor: "#000",
+    // shadowOffset: { width: 0, height: 2 },
+    // shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+});

components/Box/BaseBox.tsx

@@ -0,0 +1,59 @@
+import { AccentColor } from "@/constants/color-palet";
+import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
+
+interface BaseBoxProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  marginBottom?: number;
+  padding?: number;
+  paddingInline?: number;
+}
+
+export default function BaseBox({
+  children,
+  style,
+  onPress,
+  marginBottom = 16,
+  padding = 12,
+}: BaseBoxProps) {
+  return (
+    <>
+      {onPress ? (
+        <TouchableHighlight
+          onPress={onPress}
+          style={[
+            {
+              backgroundColor: AccentColor.darkblue,
+              borderColor: AccentColor.blue,
+              borderWidth: 1,
+              borderRadius: 10,
+              marginBottom,
+              padding,
+            },
+            style,
+          ]}
+          // activeOpacity={0.7}
+        >
+          <View>{children}</View>
+        </TouchableHighlight>
+      ) : (
+        <View
+          style={[
+            {
+              backgroundColor: AccentColor.darkblue,
+              borderColor: AccentColor.blue,
+              borderWidth: 1,
+              borderRadius: 10,
+              marginBottom,
+              padding,
+            },
+            style,
+          ]}
+        >
+          {children}
+        </View>
+      )}
+    </>
+  );
+}

components/Button/BackButton.tsx

@@ -0,0 +1,16 @@
+import { Ionicons } from "@expo/vector-icons";
+import { MainColor } from "@/constants/color-palet";
+import { router } from "expo-router";
+
+const BackButton = () => {
+  return (
+    <Ionicons
+      name="arrow-back"
+      size={20}
+      color={MainColor.yellow}
+      onPress={() => router.back()}
+    />
+  );
+};
+
+export default BackButton;

components/Button/ButtonCustom.tsx

@@ -2,44 +2,44 @@
 
 import React from "react";
 import { Text, TouchableOpacity } from "react-native";
-import buttonStyles from "./buttonStyles";
+import buttonStyles from "./buttonCustomStyles";
+import { radiusMap } from "@/constants/radius-value";
+import { MainColor } from "@/constants/color-palet";
 
-// Definisi props dengan TypeScript
+// Import radiusMap
+
+
+// Definisi type untuk radius
+type RadiusType = keyof typeof radiusMap | number;
 
 interface ButtonProps {
-  onPress: () => void;
+  children?: React.ReactNode;
+  onPress?: () => void;
   title?: string;
   backgroundColor?: string;
   textColor?: string;
-  radius?: number;
+  radius?: RadiusType; // ← bisa string enum atau number
   disabled?: boolean;
   iconLeft?: React.ReactNode;
 }
 
-/**
- * Props untuk ButtonCustom
- * @param onPress: () => void
- * @param title?: string
- * @param backgroundColor?: string
- * @param textColor?: string
- * @param radius?: number
- * @param disabled?: boolean
- * @param iconLeft?: React.ReactNode
- * @example iconLeft={<Icon name="arrow-right" size={20} color={MainColor.black}/>
- */
 const ButtonCustom: React.FC<ButtonProps> = ({
+  children,
   onPress,
   title = "Button",
-  backgroundColor = "#007AFF",
-  textColor = "#FFFFFF",
-  radius = 8,
+  backgroundColor = MainColor.yellow,
+  textColor = MainColor.black,
+  radius = "full", // default md
   disabled = false,
   iconLeft,
 }) => {
+  const borderRadius =
+    typeof radius === "number" ? radius : radiusMap[radius ?? "md"]; // fallback ke 'md'
+
   const styles = buttonStyles({
     backgroundColor,
     textColor,
-    borderRadius: radius,
+    borderRadius,
   });
 
   return (
@@ -51,7 +51,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}
-      <Text style={styles.buttonText}>{title}</Text>
+      <Text style={styles.buttonText}>{children || title}</Text>
     </TouchableOpacity>
   );
 };

components/Drawer/DrawerCustom.tsx

@@ -0,0 +1,163 @@
+import React, { useRef } from "react";
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  View,
+  InteractionManager,
+} from "react-native";
+
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { DRAWER_HEIGHT } from "@/constants/constans-value";
+
+interface DrawerCustomProps {
+  children?: React.ReactNode;
+  height?: number;
+  isVisible: boolean;
+  drawerAnim: Animated.Value;
+  closeDrawer: () => void;
+  //   openLogoutAlert: () => void;
+}
+
+
+/**
+ * 
+ * @param drawerAnim 
+ * @example   const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
+ */
+export default function DrawerCustom({
+  children,
+  height,
+  isVisible,
+  drawerAnim,
+  closeDrawer,
+}: //   openLogoutAlert,
+DrawerCustomProps) {
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return gestureState.dy > 10; // gesek ke bawah
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const offset = gestureState.dy;
+        if (offset >= 0 && offset <= DRAWER_HEIGHT) {
+          drawerAnim.setValue(offset);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 200) {
+          InteractionManager.runAfterInteractions(() => {
+            closeDrawer();
+          });
+        } else {
+          Animated.spring(drawerAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  if (!isVisible) return null;
+
+  return (
+    <>
+      {/* Overlay Gelap */}
+      <View
+        style={styles.overlay}
+        pointerEvents="auto"
+        onTouchStart={() => {
+          InteractionManager.runAfterInteractions(() => {
+            closeDrawer();
+          });
+        }}
+      />
+
+      {/* Custom Bottom Drawer */}
+      <Animated.View
+        style={[
+          styles.drawer,
+          {
+            height: height || DRAWER_HEIGHT,
+            transform: [{ translateY: drawerAnim }],
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        <View
+          style={[styles.headerBar, { backgroundColor: MainColor.white }]}
+        />
+
+        {children}
+
+        {/* <TouchableOpacity
+          style={styles.menuItem}
+          onPress={() => {
+            alert("Pilihan 1 diklik");
+            closeDrawer();
+          }}
+        >
+          <Text>Menu Item 1</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.menuItem}
+          onPress={() => {
+            alert("Pilihan 2 diklik");
+            closeDrawer();
+          }}
+        >
+          <Text>Menu Item 2</Text>
+        </TouchableOpacity>
+
+
+        <TouchableOpacity
+          style={styles.menuItem}
+          onPress={() => alert("Logout via Alert bawaan")}
+        >
+          <Text style={{ color: "red" }}>Keluar</Text>
+        </TouchableOpacity> */}
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "black",
+    opacity: 0.6,
+    zIndex: 998,
+  },
+  drawer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: AccentColor.darkblue,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.2,
+    elevation: 5,
+    zIndex: 999,
+  },
+  headerBar: {
+    width: 40,
+    height: 5,
+    backgroundColor: MainColor.white,
+    borderRadius: 5,
+    alignSelf: "center",
+    marginVertical: 10,
+  },
+  menuItem: {
+    padding: 15,
+  },
+});

components/Drawer/MenuDrawerDynamicGird.tsx

@@ -0,0 +1,57 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_MEDIUM, TEXT_SIZE_SMALL } from "@/constants/constans-value";
+import { Ionicons } from "@expo/vector-icons";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
+  const numColumns = columns;
+
+  return (
+    <View style={styles.container}>
+      {data.map((item: any, index: any) => (
+        <TouchableOpacity
+          key={index}
+          style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}
+          onPress={() => onPressItem?.(item)}
+        >
+          <View style={styles.iconContainer}>
+            <Ionicons
+              name={item.icon}
+              size={ICON_SIZE_MEDIUM}
+              color={item.color || MainColor.white}
+            />
+          </View>
+          <Text style={styles.label}>{item.label}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+export default MenuDrawerDynamicGrid;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    padding: 0,
+  },
+  itemContainer: {
+    padding: 10,
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: AccentColor.blue,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  label: {
+    marginTop: 10,
+    fontSize: TEXT_SIZE_SMALL,
+    textAlign: "center",
+    color: MainColor.white,
+  },
+});

components/Grid/GridCustom.tsx

@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { StyleSheet, useWindowDimensions, View, ViewStyle } from "react-native";
+
+// Tipe untuk span
+type SpanValue = {
+  base?: number;
+  md?: number;
+  lg?: number;
+};
+
+// Props untuk Grid.Col
+interface ColProps {
+  children: React.ReactNode;
+  span?: number | SpanValue;
+  style?: ViewStyle;
+}
+
+// Props untuk Grid
+interface GridProps {
+  children: React.ReactNode;
+  gap?: number;
+  columns?: number;
+  containerStyle?: ViewStyle;
+}
+
+// Context untuk menyimpan konfigurasi grid
+type GridContextType = {
+  gap: number;
+  columns: number;
+};
+
+const GridContext = createContext<GridContextType>({
+  gap: 0,
+  columns: 12,
+});
+
+const useGrid = () => useContext(GridContext);
+
+// Helper untuk menentukan span berdasarkan lebar layar
+const getSpan = (
+  spanProp: number | SpanValue | undefined,
+  width: number
+): number => {
+  if (typeof spanProp === "number") return spanProp;
+
+  const span = spanProp || { base: 12 };
+
+  if (width >= 992 && span.lg) return span.lg;
+  if (width >= 768 && span.md) return span.md;
+  return span.base ?? 12;
+};
+
+// Grid Component
+const GridComponent: React.FC<GridProps> = ({
+  children,
+  gap = 6,
+  columns = 12,
+  containerStyle,
+}) => {
+  const contextValue = useMemo(() => ({ gap, columns }), [gap, columns]);
+
+  return (
+    <GridContext.Provider value={contextValue}>
+      <View
+        style={[
+          styles.container,
+          { marginHorizontal: -gap / 2 },
+          containerStyle,
+        ]}
+      >
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<ColProps>, {})
+            : child
+        )}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+// Grid.Col Component
+const Col: React.FC<ColProps> = ({ children, span, style }) => {
+  const { gap, columns } = useGrid();
+  const { width } = useWindowDimensions();
+
+  const colSpan = getSpan(span, width);
+  const margin = gap / 2;
+
+  const styles = StyleSheet.create({
+    col: {
+      flexBasis: `${(100 / columns) * colSpan}%`,
+      paddingVertical: margin,
+    //   marginBottom: gap,
+      marginBlock: gap,
+    },
+  });
+
+  return <View style={[styles.col, style]}>{children}</View>;
+};
+
+// Export bersama-sama
+const Grid = Object.assign(GridComponent, { Col });
+
+export default Grid;
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+  },
+});

components/Select/SelectCustom.tsx

@@ -0,0 +1,123 @@
+// components/Select.tsx
+import { MainColor } from "@/constants/color-palet";
+import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+
+type SelectItem = {
+  label: string;
+  value: string | number;
+};
+
+type SelectProps = {
+  label?: string;
+  placeholder?: string;
+  data: SelectItem[];
+  value?: string | number | null;
+  onChange: (value: string | number) => void;
+};
+
+const SelectCustom: React.FC<SelectProps> = ({
+  label,
+  placeholder = "Pilih opsi",
+  data,
+  value,
+  onChange,
+}) => {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const selectedItem = data.find((item) => item.value === value);
+
+  return (
+    <View style={styles.container}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <Pressable style={styles.input} onPress={() => setModalVisible(true)}>
+        <Text style={selectedItem ? styles.text : styles.placeholder}>
+          {selectedItem?.label || placeholder}
+        </Text>
+      </Pressable>
+
+      <Modal visible={modalVisible} transparent animationType="fade">
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPressOut={() => setModalVisible(false)}
+        >
+          <View style={styles.modalContent}>
+            <FlatList
+              data={data}
+              keyExtractor={(item) => String(item.value)}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={() => {
+                    onChange(item.value);
+                    setModalVisible(false);
+                  }}
+                >
+                  <Text>{item.label}</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+};
+
+export default SelectCustom;
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    marginBottom: 4,
+    color: MainColor.white,
+    fontWeight: "500",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    padding: 12,
+    borderRadius: 8,
+    minHeight: 48,
+    justifyContent: "center",
+    backgroundColor: MainColor.white,
+  },
+  text: {
+    fontSize: TEXT_SIZE_MEDIUM,
+  },
+  placeholder: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    color: MainColor.placeholder,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContent: {
+    width: "80%",
+    maxHeight: 300,
+    backgroundColor: "white",
+    borderRadius: 8,
+    overflow: "hidden",
+  },
+  option: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#eee",
+  },
+});

components/Stack/StackCustom.tsx

@@ -0,0 +1,66 @@
+// components/Stack.tsx
+
+import React from "react";
+import { View, ViewStyle, StyleSheet } from "react-native";
+
+import { AlignType, GapSizeType, JustifyType } from "@/components/Stack/stack-types";
+
+interface StackProps {
+  children: React.ReactNode;
+  align?: AlignType;
+  justify?: JustifyType;
+  gap?: GapSizeType;
+  direction?: "row" | "column";
+  style?: ViewStyle | ViewStyle[];
+}
+
+const StackCustom: React.FC<StackProps> = ({
+  children,
+  align = "stretch",
+  justify = "flex-start",
+  gap = "md",
+  direction = "column",
+  style,
+}) => {
+  const spacing = convertToSpacing(gap);
+
+  return (
+    <View
+      style={[
+        // styles.stack,
+        {
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          gap: spacing,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+// Fungsi untuk mengubah nilai gap ke dalam ukuran pixel
+const convertToSpacing = (value: GapSizeType): number => {
+  if (typeof value === "number") return value;
+
+  const sizes: Record<string, number> = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  };
+
+  return sizes[value] || 16; // default md
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    flex: 1,
+  },
+});
+
+export default StackCustom;

components/Stack/stack-types.ts

@@ -0,0 +1,19 @@
+// types/stack.types.ts
+
+export type AlignType =
+  | "stretch"
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "baseline";
+
+export type JustifyType =
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+export type GapSizeType = "xs" | "sm" | "md" | "lg" | "xl" | number;
+// | string;

components/Text/TextCustom.tsx

@@ -0,0 +1,104 @@
+import { MainColor } from "@/constants/color-palet";
+import {
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_MEDIUM,
+  TEXT_SIZE_SMALL,
+} from "@/constants/constans-value";
+import React from "react";
+import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
+
+// Tambahkan type TextAlignProps agar lebih type-safe
+type TextAlign = "left" | "center" | "right";
+
+interface TextCustomProps {
+  children: string | React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  bold?: boolean;
+  semiBold?: boolean;
+  size?: "default" | "large" | "small";
+  color?: "default" | "yellow" | "red";
+  align?: TextAlign; // Prop untuk alignment
+  truncate?: boolean | number;
+}
+
+const TextCustom: React.FC<TextCustomProps> = ({
+  children,
+  style,
+  bold = false,
+  semiBold = false,
+  size = "default",
+  color = "default",
+  align = "left", // Default alignment
+  truncate = false,
+}) => {
+  const getStyle = () => {
+    let selectedStyles = [];
+
+    // Base style
+    selectedStyles.push(styles.default);
+
+    // Font weight
+    if (bold) selectedStyles.push(styles.bold);
+    else if (semiBold) selectedStyles.push(styles.semiBold);
+
+    // Size
+    if (size === "large") selectedStyles.push(styles.large);
+    else if (size === "small") selectedStyles.push(styles.small);
+
+    // Color
+    if (color === "yellow") selectedStyles.push(styles.yellow);
+    else if (color === "red") selectedStyles.push(styles.red);
+
+    // Alignment
+    if (align) {
+      selectedStyles.push({ textAlign: align });
+    }
+
+    // Override with passed style
+    if (style) selectedStyles.push(style);
+
+    return selectedStyles;
+  };
+
+  return (
+    <RNText
+      numberOfLines={
+        typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+      }
+      ellipsizeMode="tail"
+      style={getStyle()}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export default TextCustom;
+
+export const styles = StyleSheet.create({
+  default: {
+    fontSize: TEXT_SIZE_MEDIUM,
+    color: MainColor.white,
+    fontFamily: "Poppins-Regular",
+  },
+  bold: {
+    fontFamily: "Poppins-Bold",
+    fontWeight: "700",
+  },
+  semiBold: {
+    fontFamily: "Poppins-SemiBold",
+    fontWeight: "500",
+  },
+  large: {
+    fontSize: TEXT_SIZE_LARGE,
+  },
+  small: {
+    fontSize: TEXT_SIZE_SMALL,
+  },
+  yellow: {
+    color: MainColor.yellow,
+  },
+  red: {
+    color: MainColor.red,
+  },
+});

components/TextInput/index.ts

@@ -0,0 +1,3 @@
+import { TextInputCustom } from "./TextInputCustom";
+
+export { TextInputCustom };

components/TextInput/textInputStyles.ts

@@ -34,7 +34,7 @@ export const textInputStyles = StyleSheet.create({
     alignItems: "center",
     borderWidth: 1,
     borderColor: AccentColor.white,
-    backgroundColor: MainColor.login,
+    backgroundColor: MainColor.white,
     paddingHorizontal: 12,
     height: 50,
   },

components/_Interface/types.ts

@@ -0,0 +1,27 @@
+import { Href } from "expo-router";
+
+export { ICustomTab, ITabs, IMenuDrawerItem };
+
+interface ICustomTab {
+  icon: string;
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+}
+
+interface ITabs {
+  id: string;
+  icon: string;
+  activeIcon: string;
+  label: string;
+  path: Href;
+  isActive: boolean;
+  disabled?: boolean;
+}
+
+interface IMenuDrawerItem {
+  icon: string;
+  label: string;
+  path?: string;
+  color?: string;
+}

components/_ShareComponent/ViewWrapper.tsx

@@ -1,22 +1,25 @@
-import { Styles } from "@/styles/global-styles";
+import { MainColor } from "@/constants/color-palet";
+import { GStyles } from "@/styles/global-styles";
 import { ImageBackground, ScrollView, View } from "react-native";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 interface ViewWrapperProps {
   children: React.ReactNode;
   withBackground?: boolean;
   tabBarComponent?: React.ReactNode;
+  bottomBarComponent?: React.ReactNode;
 }
 
 const ViewWrapper = ({
   children,
   withBackground = false,
   tabBarComponent,
+  bottomBarComponent,
 }: ViewWrapperProps) => {
   const assetBackground = require("../../assets/images/main-background.png");
 
   return (
-    <SafeAreaProvider>
+    <>
       <SafeAreaView
         edges={[
           "bottom",
@@ -25,6 +28,7 @@ const ViewWrapper = ({
         style={{
           flex: 1,
           // paddingTop: StatusBar.currentHeight,
+          backgroundColor: MainColor.darkblue,
         }}
       >
         <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
@@ -32,17 +36,53 @@ const ViewWrapper = ({
             <ImageBackground
               source={assetBackground}
               resizeMode="cover"
-              style={Styles.imageBackground}
+              style={GStyles.imageBackground}
             >
-              <View style={Styles.containerWithBackground}>{children}</View>
+              <View style={GStyles.containerWithBackground}>{children}</View>
             </ImageBackground>
           ) : (
-            <View style={Styles.container}>{children}</View>
+            <View style={GStyles.container}>{children}</View>
           )}
         </ScrollView>
-        {tabBarComponent}
+        {tabBarComponent ? tabBarComponent : null}
+        {bottomBarComponent ? (
+          <View style={GStyles.bottomBar}>
+            <View style={GStyles.bottomBarContainer}>
+              {bottomBarComponent}
+            </View>
+          </View>
+        ) : null}
       </SafeAreaView>
-    </SafeAreaProvider>
+    </>
+
+    // <SafeAreaProvider>
+    //   <SafeAreaView
+    //     edges={[
+    //       "bottom",
+    //       // "top",
+    //     ]}
+    //     style={{
+    //       flex: 1,
+    //       // paddingTop: StatusBar.currentHeight,
+    //       backgroundColor: MainColor.darkblue,
+    //     }}
+    //   >
+    //     <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+    //       {withBackground ? (
+    //         <ImageBackground
+    //           source={assetBackground}
+    //           resizeMode="cover"
+    //           style={Styles.imageBackground}
+    //         >
+    //           <View style={Styles.containerWithBackground}>{children}</View>
+    //         </ImageBackground>
+    //       ) : (
+    //         <View style={Styles.container}>{children}</View>
+    //       )}
+    //     </ScrollView>
+    //     {tabBarComponent}
+    //   </SafeAreaView>
+    // </SafeAreaProvider>
   );
 };
 

components/index.ts

@@ -0,0 +1,52 @@
+// Alert
+import AlertCustom from "./Alert/AlertCustom";
+// Button
+import BackButton from "./Button/BackButton";
+import ButtonCustom from "./Button/ButtonCustom";
+// Drawer
+import DrawerCustom from "./Drawer/DrawerCustom";
+import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
+// ShareComponent
+import ViewWrapper from "./_ShareComponent/ViewWrapper";
+import Spacing from "./_ShareComponent/Spacing";
+// Text
+import TextCustom from "./Text/TextCustom";
+// TextInput
+import { TextInputCustom } from "./TextInput/TextInputCustom";
+// Grid
+import Grid from "./Grid/GridCustom";
+// Box
+import BaseBox from "./Box/BaseBox";
+// Avatar
+import AvatarCustom from "./Avatar/AvatarCustom"
+// Stack
+import StackCustom from "./Stack/StackCustom";
+// Select
+import SelectCustom from "./Select/SelectCustom";
+
+export {
+  AlertCustom,
+  // Button
+  BackButton,
+  ButtonCustom,
+  // Drawer
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  // ShareComponent
+  Spacing,
+  ViewWrapper,
+  // Text
+  TextCustom,
+  // TextInput
+  TextInputCustom,
+  // Grid
+  Grid,
+  // Box
+  BaseBox,
+  // Avatar
+  AvatarCustom,
+  // Stack
+  StackCustom,
+  // Select
+  SelectCustom,
+};

constants/color-palet.ts

@@ -7,7 +7,8 @@ export const MainColor = {
   red: "#FF4B4C",
   orange: "#FF7043",
   green: "#4CAF4F",
-  login: "#EDEBEBFF",
+  text_input: "#EDEBEBFF",
+  placeholder: "#999",
   disabled: "#606360",
 };
 

constants/constans-value.ts

@@ -0,0 +1,17 @@
+export {
+  TEXT_SIZE_SMALL,
+  TEXT_SIZE_MEDIUM,
+  TEXT_SIZE_LARGE,
+  ICON_SIZE_SMALL,
+  ICON_SIZE_MEDIUM,
+  DRAWER_HEIGHT,
+  RADIUS_BUTTON,
+};
+
+const TEXT_SIZE_SMALL = 12;
+const TEXT_SIZE_MEDIUM = 14;
+const TEXT_SIZE_LARGE = 16;
+const ICON_SIZE_SMALL = 20;
+const ICON_SIZE_MEDIUM = 24;
+const DRAWER_HEIGHT = 500; // tinggi drawer5
+const RADIUS_BUTTON = 50

constants/radius-value.ts

@@ -0,0 +1,10 @@
+// constants/radius.ts
+
+export const radiusMap = {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 100,
+} as const;

eas.build.android

@@ -0,0 +1 @@
+eas build --profile preview

eas.json

@@ -1,6 +1,6 @@
 {
   "cli": {
-    "version": ">= 16.12.0",
+    "version": ">= 16.10.0",
     "appVersionSource": "remote"
   },
   "build": {
@@ -9,7 +9,10 @@
       "distribution": "internal"
     },
     "preview": {
-      "distribution": "internal"
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
     },
     "production": {
       "autoIncrement": true

package.json

@@ -13,18 +13,19 @@
   "dependencies": {
     "@expo/vector-icons": "^14.1.0",
     "@react-navigation/bottom-tabs": "^7.4.2",
+    "@react-navigation/drawer": "^7.5.2",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
     "@react-navigation/native-stack": "^7.3.21",
     "@types/react-native-vector-icons": "^6.4.18",
-    "expo": "~53.0.12",
+    "expo": "53.0.13",
     "expo-blur": "~14.1.5",
     "expo-constants": "~17.1.6",
     "expo-font": "~13.3.1",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.3.0",
     "expo-linking": "~7.1.5",
-    "expo-router": "~5.1.0",
+    "expo-router": "~5.1.1",
     "expo-splash-screen": "~0.30.9",
     "expo-status-bar": "~2.2.3",
     "expo-symbols": "~0.4.5",

screens/Authentication/LoginView.tsx

@@ -1,13 +1,12 @@
+import ButtonCustom from "@/components/Button/ButtonCustom";
+import Spacing from "@/components/_ShareComponent/Spacing";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { router } from "expo-router";
 import { useState } from "react";
 import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
-import ButtonCustom from "@/components/Button/ButtonCustom";
-import Spacing from "@/components/_ShareComponent/Spacing";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-
 
 export default function LoginView() {
   const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
@@ -24,18 +23,28 @@ export default function LoginView() {
   function handleLogin() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
-    console.log(fixNumber);
-    router.push("/verification");
+    // console.log("fixNumber", fixNumber); 
+    
+    const randomAlfabet = Math.random().toString(36).substring(2, 8);
+    const randomNumber = Math.floor(Math.random() * 1000000);
+    const id = randomAlfabet + randomNumber + fixNumber;
+    console.log("user id :", id);
+    
+    router.navigate("/verification");
+    // router.navigate(`/(application)/profile/${id}`);
+    // router.navigate("/(application)/home");
+    // router.navigate(`/(application)/profile/${id}/edit`);
+
   }
 
   return (
     <ViewWrapper withBackground>
-      <View style={Styles.authContainer}>
+      <View style={GStyles.authContainer}>
         <View>
-          <View style={Styles.authContainerTitle}>
-            <Text style={Styles.authSubTitle}>WELCOME TO</Text>
+          <View style={GStyles.authContainerTitle}>
+            <Text style={GStyles.authSubTitle}>WELCOME TO</Text>
             <Spacing height={5} />
-            <Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
+            <Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
             <Spacing height={5} />
           </View>
           <Spacing height={50} />
@@ -65,13 +74,7 @@ export default function LoginView() {
 
         <Spacing height={20} />
 
-        <ButtonCustom
-          title="Login"
-          backgroundColor={MainColor.yellow}
-          textColor={MainColor.black}
-          radius={10}
-          onPress={handleLogin}
-        />
+        <ButtonCustom onPress={handleLogin}>Login</ButtonCustom>
       </View>
     </ViewWrapper>
   );

screens/Authentication/RegisterView.tsx

@@ -3,20 +3,25 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
 import { MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { Text, View } from "react-native";
-
+import { useState } from "react";
 
 export default function RegisterView() {
+  const [username, setUsername] = useState("Bagas Banuna");
+  const handleRegister = () => {
+    console.log("Success register", username);
+    router.push("/(application)/home");
+  };
   return (
     <>
       <ViewWrapper withBackground>
-        <View style={Styles.authContainer}>
+        <View style={GStyles.authContainer}>
           <View>
-            <View style={Styles.authContainerTitle}>
-              <Text style={Styles.authTitle}>REGISTRASI</Text>
+            <View style={GStyles.authContainerTitle}>
+              <Text style={GStyles.authTitle}>REGISTRASI</Text>
               <Spacing />
               <MaterialCommunityIcons
                 name="account"
@@ -25,35 +30,29 @@ export default function RegisterView() {
               />
               <Spacing />
 
-              <Text style={Styles.textLabel}>
+              <Text style={GStyles.textLabel}>
                 Anda akan terdaftar dengan nomor
               </Text>
-              <Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
+              <Text style={GStyles.textLabel}>+6282xxxxxxxxx</Text>
               <Spacing />
             </View>
-            <TextInputCustom placeholder="Masukkan username" />
+            <TextInputCustom
+              placeholder="Masukkan username"
+              value={username}
+              onChangeText={(text) => setUsername(text)}
+            />
 
+            <ButtonCustom onPress={handleRegister}>Daftar</ButtonCustom>
+            {/* <Spacing />
             <ButtonCustom
-              title="Daftar"
+              title="Coba"
               backgroundColor={MainColor.yellow}
               textColor={MainColor.black}
-              radius={10}
-              onPress={() => (
-                console.log("Success register"),
-                router.push("/(application)/home")
-              )}
-            />
-            <Spacing />
-            {/* <ButtonCustom
-            title="Home"
-            backgroundColor={MainColor.yellow}
-            textColor={MainColor.black}
-            radius={10}
-            onPress={() => {
-              console.log("Home clicked");
-              router.push("/(application)/home");
-            }}
-          /> */}
+              onPress={() => {
+                console.log("Home clicked");
+                router.push("/(application)/coba");
+              }}
+            /> */}
           </View>
         </View>
       </ViewWrapper>

screens/Authentication/VerificationView.tsx

@@ -2,22 +2,26 @@ import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import { MainColor } from "@/constants/color-palet";
-import { Styles } from "@/styles/global-styles";
+import { GStyles } from "@/styles/global-styles";
 import { router } from "expo-router";
 import { Text, View } from "react-native";
 import { OtpInput } from "react-native-otp-entry";
 
 export default function VerificationView() {
+  const handleVerification = () => {
+    console.log("Verification clicked");
+    router.push("/register");
+  };
   return (
     <>
       <ViewWrapper withBackground>
-        <View style={Styles.authContainer}>
+        <View style={GStyles.authContainer}>
           <View>
-            <View style={Styles.authContainerTitle}>
-              <Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
+            <View style={GStyles.authContainerTitle}>
+              <Text style={GStyles.authTitle}>Verifikasi KOde OTP</Text>
               <Spacing height={30} />
-              <Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
-              <Text style={Styles.textLabel}>
+              <Text style={GStyles.textLabel}>Masukan 4 digit kode otp</Text>
+              <Text style={GStyles.textLabel}>
                 Yang di kirim ke +6282xxxxxxxxx
               </Text>
               <Spacing height={30} />
@@ -25,7 +29,7 @@ export default function VerificationView() {
                 numberOfDigits={4}
                 theme={{
                   pinCodeContainerStyle: {
-                    backgroundColor: MainColor.login,
+                    backgroundColor: MainColor.text_input,
                     borderRadius: 10,
                     borderWidth: 1,
                     borderColor: MainColor.yellow,
@@ -39,21 +43,21 @@ export default function VerificationView() {
                 }}
               />
               <Spacing height={30} />
-              <Text style={Styles.textLabel}>
+              <Text style={GStyles.textLabel}>
                 Tidak menerima kode ?{" "}
-                <Text style={Styles.textLabel}>Kirim Ulang</Text>
+                <Text style={GStyles.textLabel}>Kirim Ulang</Text>
               </Text>
             </View>
             <Spacing height={30} />
           </View>
 
           <ButtonCustom
-            title="Verifikasi"
             backgroundColor={MainColor.yellow}
             textColor={MainColor.black}
-            radius={10}
-            onPress={() => router.push("/register")}
-          />
+            onPress={() => handleVerification()}
+          >
+            Verifikasi
+          </ButtonCustom>
         </View>
       </ViewWrapper>
     </>

screens/Home/HomeView.tsx

@@ -1,120 +0,0 @@
-import Spacing from "@/components/_ShareComponent/Spacing";
-import { Styles } from "@/styles/global-styles";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { router } from "expo-router";
-import { ScrollView, Text, TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
-import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
-import { stylesHome } from "./homeViewStyle";
-
-export default function HomeView() {
-  return (
-    <>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <View style={Styles.homeContainer}>
-          <Spacing height={20} />
-          <View
-            style={{
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "#fff",
-              borderRadius: 10,
-            }}
-          >
-            <Image
-              source={require("@/assets/images/constants/home-hipmi.png")}
-              // placeholder={{ blurhash: "" }}
-              contentFit="cover"
-              transition={1000}
-              style={{
-                width: "100%",
-                height: 120,
-                borderRadius: 10,
-              }}
-            />
-          </View>
-
-          <Spacing height={10} />
-
-          {/* Grid Section */}
-          <View style={stylesHome.gridContainer}>
-            <TouchableOpacity
-              style={stylesHome.gridItem}
-              onPress={() => router.push("/(application)/event")}
-            >
-              <Ionicons name="analytics" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Event</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="share" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Collaboration</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="cube" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Voting</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={stylesHome.gridItem}>
-              <Ionicons name="heart" size={48} color="white" />
-              <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
-            </TouchableOpacity>
-          </View>
-
-          <Spacing height={10} />
-
-          {/* Job Vacancy Section */}
-          <View style={stylesHome.jobVacancyContainer}>
-            <View style={stylesHome.jobVacancyHeader}>
-              <Icon name="briefcase" size={24} color="white" />
-              <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
-            </View>
-
-            <View style={stylesHome.vacancyList}>
-              {/* Vacancy Item 1 */}
-              <View style={stylesHome.vacancyItem}>
-                {/* <Icon name="user" size={20} color="#FFD700" /> */}
-                <View style={stylesHome.vacancyDetails}>
-                  <DynamicTruncatedText
-                    text="Bagas_banuna"
-                    fontSize={14}
-                    fontFamily="System"
-                    style={stylesHome.vacancyName}
-                  />
-                  <Spacing height={5} />
-                  <DynamicTruncatedText
-                    text="Dicari perawat kucing"
-                    fontSize={12}
-                    fontFamily="System"
-                    style={stylesHome.vacancyDescription}
-                  />
-                </View>
-              </View>
-
-              {/* Vacancy Item 2 */}
-              <View style={stylesHome.vacancyItem}>
-                {/* <Icon name="user" size={20} color="#FFD700" /> */}
-                <View style={stylesHome.vacancyDetails}>
-                  <DynamicTruncatedText
-                    text="fibramarcell"
-                    fontSize={14}
-                    fontFamily="System"
-                    style={stylesHome.vacancyName}
-                  />
-                  <Spacing height={5} />
-                  <DynamicTruncatedText
-                    text="Di Butuhkan Seorang..."
-                    fontSize={12}
-                    fontFamily="System"
-                    style={stylesHome.vacancyDescription}
-                  />
-                </View>
-              </View>
-            </View>
-          </View>
-
-          <Spacing height={20} />
-        </View>
-      </ScrollView>
-    </>
-  );
-}

screens/Home/UiHome.tsx

@@ -1,112 +1,26 @@
-/* eslint-disable no-unused-expressions */
+// import { ITabs } from "@/components/_Interface/types";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { Ionicons } from "@expo/vector-icons";
-import { Href, router } from "expo-router";
-import React from "react";
-import {
-  Dimensions,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { useNavigation } from "expo-router";
+import React, { useEffect } from "react";
 import Home_BottomFeatureSection from "./bottomFeatureSection";
 import Home_ImageSection from "./imageSection";
+import TabSection from "./tabSection";
+import { tabsHome } from "./tabsList";
 import Home_FeatureSection from "./topFeatureSection";
 
-interface Tabs {
-  id: string;
-  icon: string;
-  activeIcon: string;
-  label: string;
-  path: Href;
-  isActive: boolean;
-  disabled: boolean;
-}
+export default function UiHome() {
+  const navigation = useNavigation();
 
-const { width } = Dimensions.get("window");
+  useEffect(() => {
+    navigation.setOptions({});
+  }, [navigation]);
 
-export default function NewHomeView() {
-  const tabs: Tabs[] = [
-    {
-      id: "forum",
-      icon: "chatbubble-ellipses-outline",
-      activeIcon: "chatbubble-ellipses",
-      label: "Forum",
-      path: "/forum",
-      isActive: true,
-      disabled: false,
-    },
-    {
-      id: "marketplace",
-      icon: "cart-outline",
-      activeIcon: "cart",
-      label: "Marketplace",
-      path: "/market-place",
-      isActive: false,
-      disabled: true,
-    },
-    {
-      id: "maps",
-      icon: "map-outline",
-      activeIcon: "map",
-      label: "Maps",
-      path: "/maps",
-      isActive: true,
-      disabled: false,
-    },
-    {
-      id: "profile",
-      icon: "person-outline",
-      activeIcon: "person",
-      label: "Profile",
-      path: "/profile",
-      isActive: true,
-      disabled: false,
-    },
-  ];
-
-  const CustomTab = ({ icon, label, isActive, onPress, disabled }: any) => (
-    <TouchableOpacity
-      style={[styles.tabItem, isActive && styles.activeTab]}
-      onPress={onPress}
-      activeOpacity={0.7}
-    >
-      <View
-        style={[styles.iconContainer, isActive && styles.activeIconContainer]}
-      >
-        <Ionicons name={icon} size={20} color={isActive ? "#fff" : "#666"} />
-      </View>
-      <Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
-        {label}
-      </Text>
-      {isActive && <View style={styles.activeIndicator} />}
-    </TouchableOpacity>
-  );
 
   return (
     <>
-      <ViewWrapper
-        tabBarComponent={
-          <View style={styles.tabBar}>
-            <View style={styles.tabContainer}>
-              {tabs.map((e) => (
-                <CustomTab
-                  key={e.id}
-                  icon={e.icon}
-                  label={e.label}
-                  isActive={e.isActive}
-                  onPress={() => {
-                    e.disabled ? console.log("disabled") : router.push(e.path);
-                  }}
-                />
-              ))}
-            </View>
-          </View>
-        }
-      >
+      <ViewWrapper tabBarComponent={<TabSection tabs={tabsHome} />}>
+        {/* Content Image */}
         <Home_ImageSection />
         <Spacing height={10} />
 
@@ -121,74 +35,3 @@ export default function NewHomeView() {
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBar: {
-    backgroundColor: MainColor.darkblue,
-    borderTopColor: AccentColor.blue,
-    borderTopWidth: 1,
-    // borderTopEndRadius: 10,
-    // borderTopStartRadius: 10,
-    // tintColor: MainColor.yellow
-    // paddingBottom: 20,
-    // paddingTop: 10,
-    // shadowColor: AccentColor.blue,
-    // shadowOffset: {
-    //   width: 0,
-    //   height: -2,
-    // },
-    // shadowOpacity: 0.9,
-    // shadowRadius: 3,
-    // elevation: 5,
-  },
-  tabContainer: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    alignItems: "center",
-    paddingHorizontal: 0,
-  },
-  tabItem: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    minWidth: width / 5,
-    position: "relative",
-  },
-  activeTab: {
-    transform: [{ scale: 1.05 }],
-  },
-  iconContainer: {
-    padding: 8,
-    borderRadius: 20,
-    // marginBottom: 4,
-  },
-  activeIconContainer: {
-    // backgroundColor: "#007AFF",
-    // shadowColor: "#007AFF",
-    // shadowOffset: {
-    //   width: 0,
-    //   height: 2,
-    // },
-    // shadowOpacity: 0.3,
-    // shadowRadius: 4,
-    // elevation: 4,
-  },
-  tabLabel: {
-    fontSize: 10,
-    color: "#666",
-    fontWeight: "500",
-  },
-  activeTabLabel: {
-    color: MainColor.white,
-    fontWeight: "600",
-  },
-  activeIndicator: {
-    position: "absolute",
-    bottom: -2,
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: "#007AFF",
-  },
-});

screens/Home/bottomFeatureSection.tsx

@@ -1,6 +1,7 @@
+import { TextCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
-import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
-import { Text, View } from "react-native";
+import React from "react";
+import { View } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 import { stylesHome } from "./homeViewStyle";
 
@@ -10,7 +11,10 @@ export default function Home_BottomFeatureSection() {
       <View style={stylesHome.jobVacancyContainer}>
         <View style={stylesHome.jobVacancyHeader}>
           <Icon name="briefcase" size={24} color="white" />
-          <Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
+          <Spacing width={10}/>
+          <TextCustom bold size="large">
+            Job Vacancy
+          </TextCustom>
         </View>
 
         <View style={stylesHome.vacancyList}>
@@ -18,19 +22,13 @@ export default function Home_BottomFeatureSection() {
           <View style={stylesHome.vacancyItem}>
             {/* <Icon name="user" size={20} color="#FFD700" /> */}
             <View style={stylesHome.vacancyDetails}>
-              <DynamicTruncatedText
-                text="Bagas_banuna"
-                fontSize={14}
-                fontFamily="System"
-                style={stylesHome.vacancyName}
-              />
+              <TextCustom bold color="yellow" truncate size="large">
+                Bagas_banuna
+              </TextCustom>
               <Spacing height={5} />
-              <DynamicTruncatedText
-                text="Dicari perawat kucing"
-                fontSize={12}
-                fontFamily="System"
-                style={stylesHome.vacancyDescription}
-              />
+              <TextCustom truncate={2}>
+                Dicari perawat kucing dan perawat anjing
+              </TextCustom>
             </View>
           </View>
 
@@ -38,19 +36,13 @@ export default function Home_BottomFeatureSection() {
           <View style={stylesHome.vacancyItem}>
             {/* <Icon name="user" size={20} color="#FFD700" /> */}
             <View style={stylesHome.vacancyDetails}>
-              <DynamicTruncatedText
-                text="fibramarcell"
-                fontSize={14}
-                fontFamily="System"
-                style={stylesHome.vacancyName}
-              />
+              <TextCustom bold color="yellow" truncate size="large">
+                fibramarcell
+              </TextCustom>
               <Spacing height={5} />
-              <DynamicTruncatedText
-                text="Di Butuhkan Seorang..."
-                fontSize={12}
-                fontFamily="System"
-                style={stylesHome.vacancyDescription}
-              />
+              <TextCustom truncate={2}>
+                Di Butuhkan Seorang Programer dan Designer
+              </TextCustom>
             </View>
           </View>
         </View>

screens/Home/tabSection.tsx

@@ -0,0 +1,51 @@
+import { ICustomTab, ITabs } from "@/components/_Interface/types";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+
+const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
+  <TouchableOpacity
+    style={[GStyles.tabItem, isActive && GStyles.activeTab]}
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <View
+      style={[GStyles.iconContainer, isActive && GStyles.activeIconContainer]}
+    >
+      <Ionicons
+        name={icon as any}
+        size={20}
+        color={isActive ? "#fff" : "#666"}
+      />
+    </View>
+    <Text style={[GStyles.tabLabel, isActive && GStyles.activeTabLabel]}>
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
+
+export default function TabSection({ tabs }: { tabs: ITabs[] }) {
+  return (
+    <>
+      <View style={GStyles.tabBar}>
+        <View style={GStyles.tabContainer}>
+          {tabs.map((e) => (
+            <CustomTab
+              key={e.id}
+              icon={e.icon}
+              label={e.label}
+              isActive={e.isActive}
+              onPress={() => {
+                // eslint-disable-next-line no-unused-expressions
+                e.disabled ? console.log("disabled") : router.push(e.path);
+              }}
+            />
+          ))}
+        </View>
+      </View>
+    </>
+  );
+}

screens/Home/tabsList.ts

@@ -0,0 +1,40 @@
+import { ITabs } from "@/components/_Interface/types";
+
+export  const tabsHome: ITabs[] = [
+  {
+    id: "forum",
+    icon: "chatbubble-ellipses-outline",
+    activeIcon: "chatbubble-ellipses",
+    label: "Forum",
+    path: "/forum",
+    isActive: true,
+    disabled: false,
+  },
+  {
+    id: "marketplace",
+    icon: "cart-outline",
+    activeIcon: "cart",
+    label: "Marketplace",
+    path: "/marketplace",
+    isActive: false,
+    disabled: true,
+  },
+  {
+    id: "maps",
+    icon: "map-outline",
+    activeIcon: "map",
+    label: "Maps",
+    path: "/maps",
+    isActive: true,
+    disabled: false,
+  },
+  {
+    id: "profile",
+    icon: "person-outline",
+    activeIcon: "person",
+    label: "Profile",
+    path: "/profile/id-percoban-123456",
+    isActive: true,
+    disabled: false,
+  },
+];

screens/Home/topFeatureSection.tsx

@@ -9,7 +9,7 @@ export default function Home_FeatureSection() {
       <View style={stylesHome.gridContainer}>
         <TouchableOpacity
           style={stylesHome.gridItem}
-          onPress={() => router.push("/(application)/event")}
+          onPress={() => router.push("/(application)/event/(tabs)")}
         >
           <Ionicons name="analytics" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Event</Text>
@@ -28,7 +28,7 @@ export default function Home_FeatureSection() {
         </TouchableOpacity>
       </View>
 
-      <View style={stylesHome.gridContainer}>
+      {/* <View style={stylesHome.gridContainer}>
         <TouchableOpacity
           style={stylesHome.gridItem}
           onPress={() => router.push("/(application)/event")}
@@ -48,7 +48,7 @@ export default function Home_FeatureSection() {
           <Ionicons name="heart" size={48} color="white" />
           <Text style={stylesHome.gridLabel}>Crowdfunding</Text>
         </TouchableOpacity>
-      </View>
+      </View> */}
     </>
   );
 }

screens/Profile/AvatarAndBackground.tsx

@@ -0,0 +1,51 @@
+import { AvatarCustom } from "@/components";
+import { AccentColor } from "@/constants/color-palet";
+import { View, ImageBackground, StyleSheet } from "react-native";
+
+const AvatarAndBackground = () => {
+  return (
+    <View style={styles.container}>
+      <ImageBackground
+        source={require("@/assets/images/logo-hipmi.png")}
+        style={styles.backgroundImage}
+        resizeMode="contain"
+      />
+      {/* Background Image */}
+
+      {/* Avatar yang sedikit keluar */}
+      <View style={styles.avatarOverlap}>
+        <AvatarCustom
+          source={require("@/assets/images/react-logo.png")}
+          size="lg"
+        />
+      </View>
+    </View>
+  );
+};
+
+export default AvatarAndBackground;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  backgroundImage: {
+    width: "100%",
+    height: 150, // Tinggi background sesuai kebutuhan
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 6,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: AccentColor.blue,
+    backgroundColor: "white",
+  },
+  avatarOverlap: {
+    position: "absolute", // Meletakkan avatar di atas background
+    top: 90, // Posisi avatar sedikit keluar dari background
+    left: "50%", // Sentralisasi horizontal
+    transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
+  },
+});

screens/Profile/menuDrawerSection.tsx

@@ -0,0 +1,35 @@
+import { IMenuDrawerItem } from "@/components/_Interface/types";
+import MenuDrawerDynamicGrid from "@/components/Drawer/MenuDrawerDynamicGird";
+import { router } from "expo-router";
+
+export default function Profile_MenuDrawerSection({
+  drawerItems,
+  setShowLogoutAlert,
+  setIsDrawerOpen,
+}: {
+  drawerItems: IMenuDrawerItem[];
+  setShowLogoutAlert: (value: boolean) => void;
+  setIsDrawerOpen: (value: boolean) => void;
+}) {
+  const handlePress = (item: IMenuDrawerItem) => {
+    if (item.label === "Keluar") {
+      //   console.log("Logout clicked");
+      setShowLogoutAlert(true);
+    } else {
+      console.log("PATH >> ", item.path);
+      router.push(item.path as any);
+    }
+    setIsDrawerOpen(false);
+  };
+
+  return (
+    <>
+      {/* Menu Items */}
+      <MenuDrawerDynamicGrid
+        data={drawerItems}
+        columns={4} // Ubah ke 2 jika ingin 2 kolom per baris
+        onPressItem={handlePress}
+      />
+    </>
+  );
+}

screens/Profile/profilSection.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { BaseBox, Grid, Spacing, TextCustom } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { useLocalSearchParams } from "expo-router";
+import { View } from "react-native";
+import AvatarAndBackground from "./AvatarAndBackground";
+
+export default function ProfilSection() {
+  const { id } = useLocalSearchParams();
+
+  const listData = [
+    {
+      icon: (
+        <Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
+      ),
+      label: "+6282340374412",
+    },
+    {
+      icon: (
+        <Ionicons name="mail-outline" size={ICON_SIZE_SMALL} color="white" />
+      ),
+      label: "bagasbanuna@gmail.com",
+    },
+    {
+      icon: (
+        <Ionicons
+          name="location-outline"
+          size={ICON_SIZE_SMALL}
+          color="white"
+        />
+      ),
+      label: "Jalan Raya Sesetan No. 123, Bandung, Indonesia",
+    },
+    {
+      icon: (
+        <FontAwesome5 name="transgender" size={ICON_SIZE_SMALL} color="white" />
+      ),
+      label: "Laki-laki",
+    },
+  ];
+
+  return (
+    <>
+      <BaseBox>
+        <AvatarAndBackground />
+        <Spacing height={50} />
+
+        <View style={{ alignItems: "center" }}>
+          <TextCustom bold size="large" align="center">
+            Nama User
+          </TextCustom>
+          <Spacing height={5} />
+          <TextCustom size="small">@Username</TextCustom>
+        </View>
+        <Spacing height={30} />
+
+        {listData.map((item, index) => (
+          <Grid key={index}>
+            <Grid.Col
+              span={2}
+              style={{
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {item.icon}
+            </Grid.Col>
+            <Grid.Col span={10}>
+              <TextCustom bold>{item.label}</TextCustom>
+            </Grid.Col>
+          </Grid>
+        ))}
+      </BaseBox>
+
+      <BaseBox>
+        <View>
+          <TextCustom bold size="large" align="center">
+            Portofolio
+          </TextCustom>
+          <Spacing />
+
+          {Array.from({ length: 2 }).map((_, index) => (
+            <BaseBox
+              key={index}
+              style={{ backgroundColor: MainColor.darkblue }}
+              onPress={() => console.log("pressed")}
+            >
+              <Grid>
+                <Grid.Col
+                  span={10}
+                  style={{ justifyContent: "center", backgroundColor: "" }}
+                >
+                  <TextCustom bold size="large" truncate={1}>
+                    Nama usaha portofolio
+                  </TextCustom>
+                  <TextCustom size="small" color="yellow">
+                    #id-porofolio12345
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col
+                  span={2}
+                  style={{ alignItems: "flex-end", justifyContent: "center" }}
+                >
+                  <Ionicons
+                    name="caret-forward"
+                    size={ICON_SIZE_SMALL}
+                    color="white"
+                  />
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))}
+        </View>
+      </BaseBox>
+    </>
+  );
+}
+
+

styles/global-styles.ts

@@ -1,23 +1,26 @@
-import { StyleSheet } from "react-native";
-import { MainColor } from "../constants/color-palet";
+import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import { Dimensions, StyleSheet } from "react-native";
+import { AccentColor, MainColor } from "../constants/color-palet";
 
-export const Styles = StyleSheet.create({
+const { width } = Dimensions.get("window");
+
+export const GStyles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingInline: 25,
+    paddingInline: 20,
     paddingBlock: 10,
     backgroundColor: MainColor.darkblue,
   },
   containerWithBackground: {
     flex: 1,
-    paddingInline: 25,
+    paddingInline: 20,
     paddingBlock: 10,
   },
   imageBackground: {
     height: "100%",
     width: "100%",
   },
-  
+
   // AUTHENTICATION
   authContainer: {
     flex: 1,
@@ -37,17 +40,17 @@ export const Styles = StyleSheet.create({
     color: MainColor.yellow,
     fontWeight: "bold",
   },
-  
+
   // TEXT & LABEL
   textLabel: {
-    fontSize: 14,
+    fontSize: TEXT_SIZE_MEDIUM,
     color: MainColor.white,
     fontWeight: "normal",
   },
 
   // Stack Header Style
   headerStyle: {
-    backgroundColor: MainColor.darkblue,
+    backgroundColor: AccentColor.darkblue,
   },
   headerTitleStyle: {
     color: MainColor.yellow,
@@ -61,4 +64,95 @@ export const Styles = StyleSheet.create({
     paddingBlock: 10,
     backgroundColor: MainColor.darkblue,
   },
+
+  // =============== TAB =============== //
+  tabBar: {
+    backgroundColor: MainColor.darkblue,
+    borderTopColor: AccentColor.blue,
+    borderTopWidth: 1,
+    // borderTopEndRadius: 10,
+    // borderTopStartRadius: 10,
+    // tintColor: MainColor.yellow
+    // paddingBottom: 20,
+    // paddingTop: 10,
+    // shadowColor: AccentColor.blue,
+    // shadowOffset: {
+    //   width: 0,
+    //   height: -2,
+    // },
+    // shadowOpacity: 0.9,
+    // shadowRadius: 3,
+    // elevation: 5,
+  },
+  tabContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    paddingHorizontal: 0,
+  },
+  tabItem: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    minWidth: width / 5,
+    position: "relative",
+  },
+  activeTab: {
+    transform: [{ scale: 1.05 }],
+  },
+  iconContainer: {
+    padding: 8,
+    borderRadius: 20,
+    // marginBottom: 4,
+  },
+  activeIconContainer: {
+    // backgroundColor: "#007AFF",
+    // shadowColor: "#007AFF",
+    // shadowOffset: {
+    //   width: 0,
+    //   height: 2,
+    // },
+    // shadowOpacity: 0.3,
+    // shadowRadius: 4,
+    // elevation: 4,
+  },
+  tabLabel: {
+    fontSize: 10,
+    color: "#666",
+    fontWeight: "500",
+  },
+  activeTabLabel: {
+    color: MainColor.white,
+    fontWeight: "600",
+  },
+  activeIndicator: {
+    position: "absolute",
+    bottom: -2,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#007AFF",
+  },
+  // =============== TAB =============== //
+
+  // =============== BOTTOM BAR =============== //
+  bottomBar: {
+    backgroundColor: MainColor.darkblue,
+    borderTopColor: AccentColor.blue,
+    borderTopWidth: 1,
+    // shadowColor: AccentColor.blue,
+    // shadowOffset: {
+    //   width: 0,
+    //   height: -1,
+    // },
+    // shadowOpacity: 0.9,
+    // shadowRadius: 5,
+    // elevation: 5,
+  },
+  bottomBarContainer: {
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  // =============== BOTTOM BAR =============== //
 });