Refactor pagination implementation dan perbaikan UI

- Add default page parameter di apiAllUser
- Refactor MainView_V2.tsx dengan separate render functions
- Update pagination pageSize menjadi 10 di Forum
- Fix iOS height constant dan tab styling
- Rename Admin_ScreenPortofolioCreate ke ScreenPortofolioCreate
- Add TASKS documentation folder

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

screens/Authentication/LoginView.tsx

@@ -1,4 +1,4 @@
-import { NewWrapper } from "@/components";
+import { NewWrapper, ViewWrapper } from "@/components";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import ModalReactNative from "@/components/Modal/ModalReactNative";
 import Spacing from "@/components/_ShareComponent/Spacing";
@@ -128,7 +128,7 @@ export default function LoginView() {
   }
 
   return (
-    <NewWrapper
+    <ViewWrapper
       withBackground
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
@@ -205,6 +205,6 @@ export default function LoginView() {
           setLoadingTerm={setLoadingTerm}
         />
       </ModalReactNative>
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

screens/Forum/ViewBeranda3.tsx

@@ -18,7 +18,7 @@ import _ from "lodash";
 import { useEffect, useState } from "react";
 import { RefreshControl, TouchableOpacity, View } from "react-native";
 
-const PAGE_SIZE = 5;
+const PAGE_SIZE = 10;
 
 export default function Forum_ViewBeranda3() {
   const { user } = useAuth();

screens/Home/homeViewStyle.tsx

@@ -94,7 +94,7 @@ export const stylesHome = StyleSheet.create({
   jobVacancyHeader: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 16,
+    marginBottom: 20,
   },
   jobVacancyTitle: {
     fontSize: 18,

screens/Home/tabSection.tsx

@@ -5,7 +5,6 @@ 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]}
@@ -17,7 +16,7 @@ const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
     >
       <Ionicons
         name={icon as any}
-        size={20}
+        size={18}
         color={isActive ? "#fff" : "#666"}
       />
     </View>
@@ -30,8 +29,8 @@ const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
 export default function TabSection({ tabs }: { tabs: ITabs[] }) {
   return (
     <>
-      <View style={GStyles.tabBar}>
-        <View style={GStyles.tabContainer}>
+      <View style={GStyles.tabBar} pointerEvents="box-none">
+        <View style={GStyles.tabContainer} pointerEvents="box-none">
           {tabs.map((e) => (
             <CustomTab
               key={e.id}

screens/Portofolio/ScreenPortofolioCreate.tsx

@@ -33,7 +33,7 @@ import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import { Avatar } from "react-native-paper";
 
-export function Admin_ScreenPortofolioCreate() {
+export function ScreenPortofolioCreate() {
   const { id } = useLocalSearchParams();
   const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [inputValue, setInputValue] = useState<string>("");
@@ -72,7 +72,7 @@ export function Admin_ScreenPortofolioCreate() {
     useCallback(() => {
       onLoadMaster();
       onLoadMasterSubBidangBisnis();
-    }, [])
+    }, []),
   );
 
   const onLoadMaster = async () => {
@@ -97,7 +97,7 @@ export function Admin_ScreenPortofolioCreate() {
 
   const handlerSelectedSubBidang = ({ id }: { id: string }) => {
     const selectedList = subBidangBisnis?.filter(
-      (item) => (item?.masterBidangBisnisId as any) === id
+      (item) => (item?.masterBidangBisnisId as any) === id,
     );
     setSelectedSubBidang(selectedList as any[]);
   };
@@ -168,8 +168,7 @@ export function Admin_ScreenPortofolioCreate() {
               .filter((option: any) => {
                 const selectedValues = listSubBidangSelected.map((s) => s.id);
                 return (
-                  option.id === item.id ||
-                  !selectedValues.includes(option.id)
+                  option.id === item.id || !selectedValues.includes(option.id)
                 );
               })
               .map((e: any) => ({
@@ -188,7 +187,9 @@ export function Admin_ScreenPortofolioCreate() {
         <CenterCustom>
           <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
             <ActionIcon
-              disabled={selectedSubBidang.length === listSubBidangSelected.length}
+              disabled={
+                selectedSubBidang.length === listSubBidangSelected.length
+              }
               onPress={() => {
                 setListSubBidangSelected([
                   ...listSubBidangSelected,

screens/UserSeach/MainView_V2.tsx

@@ -12,6 +12,7 @@ import {
   ICON_SIZE_SMALL,
   PAGINATION_DEFAULT_TAKE,
 } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAllUser } from "@/service/api-client/api-user";
 import { Ionicons } from "@expo/vector-icons";
@@ -19,21 +20,89 @@ import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useRef, useState } from "react";
 import { RefreshControl, View } from "react-native";
-import { createPaginationComponents } from "@/helpers/paginationHelpers";
+
+const PAGE_SIZE = PAGINATION_DEFAULT_TAKE;
+
+/**
+ * Render header dengan search input
+ */
+const renderHeader = (search: string, setSearch: (text: string) => void) => (
+  <TextInputCustom
+    value={search}
+    onChangeText={setSearch}
+    iconLeft={
+      <Ionicons
+        name="search"
+        size={ICON_SIZE_SMALL}
+        color={MainColor.placeholder}
+      />
+    }
+    placeholder="Cari Pengguna"
+    borderRadius={50}
+    containerStyle={{ marginBottom: 0 }}
+  />
+);
+
+/**
+ * Render item user
+ */
+const renderItem = ({ item }: { item: any }) => (
+  <View
+    style={{
+      backgroundColor: MainColor.soft_darkblue,
+      borderRadius: 8,
+      padding: 12,
+      marginBottom: 10,
+      elevation: 2,
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+    }}
+  >
+    <ClickableCustom
+      onPress={() => {
+        router.push(`/profile/${item?.Profile?.id}`);
+      }}
+    >
+      <Grid>
+        <Grid.Col span={2}>
+          <AvatarComp fileId={item?.Profile?.imageId} size="base" />
+        </Grid.Col>
+        <Grid.Col span={9}>
+          <StackCustom gap={"sm"}>
+            <TextCustom size="large">{item?.username}</TextCustom>
+            <TextCustom size="small">+{item?.nomor}</TextCustom>
+            {item?.Profile?.businessField && (
+              <TextCustom size="small">
+                {item?.Profile?.businessField}
+              </TextCustom>
+            )}
+          </StackCustom>
+        </Grid.Col>
+        <Grid.Col
+          span={1}
+          style={{
+            justifyContent: "center",
+            alignItems: "flex-end",
+          }}
+        >
+          <Ionicons
+            name="chevron-forward"
+            size={ICON_SIZE_SMALL}
+            color={MainColor.placeholder}
+          />
+        </Grid.Col>
+      </Grid>
+    </ClickableCustom>
+  </View>
+);
 
 export default function UserSearchMainView_V2() {
   const isInitialMount = useRef(true);
   const [search, setSearch] = useState("");
 
-  const {
-    listData,
-    loading,
-    refreshing,
-    hasMore,
-    onRefresh,
-    loadMore,
-    isInitialLoad,
-  } = usePagination({
+  const pagination = usePagination({
     fetchFunction: async (page, searchQuery) => {
       const response = await apiAllUser({
         page: String(page),
@@ -41,7 +110,7 @@ export default function UserSearchMainView_V2() {
       });
       return response;
     },
-    pageSize: PAGINATION_DEFAULT_TAKE,
+    pageSize: PAGE_SIZE,
     searchQuery: search,
   });
 
@@ -49,119 +118,42 @@ export default function UserSearchMainView_V2() {
   useFocusEffect(
     useCallback(() => {
       if (isInitialMount.current) {
-        // Skip saat pertama kali mount
         isInitialMount.current = false;
         return;
       }
-      // Hanya refresh saat kembali dari screen lain
-      onRefresh();
-    }, [onRefresh]),
-  );
-
-  const renderHeader = () => (
-    <>
-      <TextInputCustom
-        value={search}
-        onChangeText={setSearch}
-        iconLeft={
-          <Ionicons
-            name="search"
-            size={ICON_SIZE_SMALL}
-            color={MainColor.placeholder}
-          />
-        }
-        placeholder="Cari Pengguna"
-        borderRadius={50}
-        containerStyle={{ marginBottom: 0 }}
-      />
-    </>
-  );
-
-  const renderItem = ({ item }: { item: any }) => (
-    <View
-      style={{
-        backgroundColor: MainColor.soft_darkblue,
-        borderRadius: 8,
-        padding: 12,
-        marginBottom: 10,
-        elevation: 2,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.2,
-        shadowRadius: 2,
-        // height: 100
-      }}
-    >
-      <ClickableCustom
-        onPress={() => {
-          console.log("Ke Profile");
-          router.push(`/profile/${item?.Profile?.id}`);
-        }}
-      >
-        <Grid>
-          <Grid.Col span={2}>
-            <AvatarComp fileId={item?.Profile?.imageId} size="base" />
-          </Grid.Col>
-          <Grid.Col span={9}>
-            <StackCustom gap={"sm"}>
-              <TextCustom size="large">{item?.username}</TextCustom>
-              <TextCustom size="small">+{item?.nomor}</TextCustom>
-              {item?.Profile?.businessField && (
-                <TextCustom size="small">
-                  {item?.Profile?.businessField}
-                </TextCustom>
-              )}
-            </StackCustom>
-          </Grid.Col>
-          <Grid.Col
-            span={1}
-            style={{
-              justifyContent: "center",
-              alignItems: "flex-end",
-            }}
-          >
-            <Ionicons
-              name="chevron-forward"
-              size={ICON_SIZE_SMALL}
-              color={MainColor.placeholder}
-            />
-          </Grid.Col>
-        </Grid>
-      </ClickableCustom>
-    </View>
+      pagination.onRefresh();
+    }, [pagination.onRefresh]),
   );
 
   const { ListEmptyComponent, ListFooterComponent } =
     createPaginationComponents({
-      loading,
-      refreshing,
-      listData,
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
       searchQuery: search,
       emptyMessage: "Tidak ada pengguna ditemukan",
       emptySearchMessage: "Tidak ada hasil pencarian",
       skeletonCount: PAGINATION_DEFAULT_TAKE,
       skeletonHeight: 100,
       loadingFooterText: "Memuat lebih banyak pengguna...",
-      isInitialLoad,
+      isInitialLoad: pagination.isInitialLoad,
     });
 
   return (
-    <>
-      <NewWrapper
-        headerComponent={renderHeader()}
-        listData={listData}
-        renderItem={renderItem}
-        onEndReached={loadMore}
-        refreshControl={
-          <RefreshControl
-            progressBackgroundColor={MainColor.yellow}
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-          />
-        }
-        ListFooterComponent={ListFooterComponent}
-        ListEmptyComponent={ListEmptyComponent}
-      />
-    </>
+    <NewWrapper
+      headerComponent={renderHeader(search, setSearch)}
+      listData={pagination.listData}
+      renderItem={renderItem}
+      onEndReached={pagination.loadMore}
+      refreshControl={
+        <RefreshControl
+          progressBackgroundColor={MainColor.yellow}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      ListFooterComponent={ListFooterComponent}
+      ListEmptyComponent={ListEmptyComponent}
+    />
   );
 }