Fix semua tampilan yang memiliki fungsi infitine load

UI – User Notifications
- app/(application)/(user)/notifications/index.tsx
- service/api-notifications.ts
- screens/Notification/

UI – Portofolio (User)
- app/(application)/(user)/portofolio/[id]/create.tsx
- app/(application)/(user)/portofolio/[id]/edit.tsx
- app/(application)/(user)/portofolio/[id]/list.tsx
- screens/Portofolio/BoxPortofolioView.tsx
- screens/Portofolio/ViewListPortofolio.tsx
- screens/Profile/PortofolioSection.tsx
- service/api-client/api-portofolio.ts

Forum & User Search
- screens/Forum/DetailForum2.tsx
- screens/Forum/ViewBeranda3.tsx
- screens/UserSeach/MainView_V2.tsx

Constants & Docs
- constants/constans-value.ts
- docs/prompt-for-qwen-code.md

### No Issue

app/(application)/(user)/notifications/index.tsx

@@ -1,248 +1,9 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AlertDefaultSystem,
-  BackButton,
-  BaseBox,
-  DrawerCustom,
-  MenuDrawerDynamicGrid,
-  NewWrapper,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import { IconDot } from "@/components/_Icon/IconComponent";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import { useNotificationStore } from "@/hooks/use-notification-store";
-import { apiGetNotificationsById } from "@/service/api-notifications";
-import { listOfcategoriesAppNotification } from "@/types/type-notification-category";
-import { formatChatTime } from "@/utils/formatChatTime";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { RefreshControl, View } from "react-native";
+import ScreenNotification from "@/screens/Notification/ScreenNotification";
 
-const selectedCategory = (value: string) => {
-  const category = listOfcategoriesAppNotification.find(
-    (c) => c.value === value
-  );
-  return category?.label;
-};
-
-const fixPath = ({
-  deepLink,
-  categoryApp,
-}: {
-  deepLink: string;
-  categoryApp: string;
-}) => {
-  if (categoryApp === "OTHER") {
-    return deepLink;
-  }
-
-  const separator = deepLink.includes("?") ? "&" : "?";
-
-  const fixedPath = `${deepLink}${separator}from=notifications&category=${_.lowerCase(
-    categoryApp
-  )}`;
-
-  console.log("Fix Path", fixedPath);
-
-  return fixedPath;
-};
-
-const BoxNotification = ({
-  data,
-  activeCategory,
-}: {
-  data: any;
-  activeCategory: string | null;
-}) => {
-  // console.log("DATA NOTIFICATION", JSON.stringify(data, null, 2));
-  const { markAsRead } = useNotificationStore();
+export default function Notification() {
   return (
     <>
-      <BaseBox
-        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
-        onPress={() => {
-          // console.log(
-          //   "Notification >",
-          //   selectedCategory(activeCategory as string)
-          // );
-          const newPath = fixPath({
-            deepLink: data.deepLink,
-            categoryApp: data.kategoriApp,
-          });
-
-          router.navigate(newPath as any);
-          selectedCategory(activeCategory as string);
-
-          if (!data.isRead) {
-            markAsRead(data.id);
-          }
-        }}
-      >
-        <StackCustom>
-          <TextCustom truncate={2} bold>
-            {data.title}
-          </TextCustom>
-
-          <TextCustom truncate={2}>{data.pesan}</TextCustom>
-
-          <TextCustom size="small" color="gray">
-            {formatChatTime(data.createdAt)}
-          </TextCustom>
-        </StackCustom>
-      </BaseBox>
-    </>
-  );
-};
-
-export default function Notifications() {
-  const { user } = useAuth();
-  const { category } = useLocalSearchParams<{ category?: string }>();
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    category || "event"
-  );
-  const [listData, setListData] = useState<any[]>([]);
-  const [refreshing, setRefreshing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [openDrawer, setOpenDrawer] = useState(false);
-
-  const { markAsReadAll } = useNotificationStore();
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      fecthData();
-    }, [activeCategory])
-  );
-
-  const fecthData = async () => {
-    try {
-      setLoading(true);
-      const response = await apiGetNotificationsById({
-        id: user?.id as any,
-        category: activeCategory as any,
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      } else {
-        setListData([]);
-      }
-    } catch (error) {
-      console.log("Error Notification", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onRefresh = () => {
-    setRefreshing(true);
-    fecthData();
-    setRefreshing(false);
-  };
-
-  return (
-    <>
-     <Stack.Screen
-        options={{
-          title: "Notifikasi",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <IconDot
-              color={MainColor.yellow}
-              onPress={() => setOpenDrawer(true)}
-            />
-          ),
-        }}
-      />
-
-      <NewWrapper
-        headerComponent={
-          <ScrollableCustom
-            data={listOfcategoriesAppNotification.map((e, i) => ({
-              id: i,
-              label: e.label,
-              value: e.value,
-            }))}
-            onButtonPress={handlePress}
-            activeId={activeCategory as string}
-          />
-        }
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-      >
-        {loading ? (
-          <ListSkeletonComponent />
-        ) : _.isEmpty(listData) ? (
-          <NoDataText text="Belum ada notifikasi" />
-        ) : (
-          listData.map((e, i) => (
-            <View key={i}>
-              <BoxNotification
-                data={e}
-                activeCategory={activeCategory as any}
-              />
-            </View>
-          ))
-        )}
-      </NewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              label: "Tandai Semua Dibaca",
-              value: "read-all",
-              icon: (
-                <Ionicons
-                  name="reader-outline"
-                  size={ICON_SIZE_SMALL}
-                  color={MainColor.white}
-                />
-              ),
-              path: "",
-            },
-          ]}
-          onPressItem={(item: any) => {
-            console.log("Item", item.value);
-            if (item.value === "read-all") {
-              AlertDefaultSystem({
-                title: "Tandai Semua Dibaca",
-                message:
-                  "Apakah Anda yakin ingin menandai semua notifikasi dibaca?",
-                textLeft: "Batal",
-                textRight: "Ya",
-                onPressRight: () => {
-                  markAsReadAll(user?.id as any);
-                  const data = _.cloneDeep(listData);
-                  data.forEach((e) => {
-                    e.isRead = true;
-                  });
-                  setListData(data);
-                  onRefresh();
-                  setOpenDrawer(false);
-                },
-              });
-            }
-          }}
-        />
-      </DrawerCustom>
+      <ScreenNotification />
     </>
   );
 }

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

@@ -7,6 +7,7 @@ import {
   CenterCustom,
   Grid,
   InformationBox,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -120,7 +121,7 @@ export default function PortofolioCreate() {
   };
 
   return (
-    <ViewWrapper
+    <NewWrapper
       footerComponent={
         <Portofolio_ButtonCreate
           id={id as string}
@@ -357,8 +358,8 @@ export default function PortofolioCreate() {
             setDataMedsos({ ...dataMedsos, youtube: value })
           }
         />
-        <Spacing />
+        {/* <Spacing /> */}
       </StackCustom>
-    </ViewWrapper>
+    </NewWrapper>
   );
 }

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

@@ -4,14 +4,15 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
 import {
@@ -238,7 +239,7 @@ export default function PortofolioEdit() {
     return !dataArray.some(
       (item: any) =>
         !item.MasterSubBidangBisnis.id ||
-        item.MasterSubBidangBisnis.id.trim() === ""
+        item.MasterSubBidangBisnis.id.trim() === "",
     );
   }
 
@@ -319,16 +320,16 @@ export default function PortofolioEdit() {
   if (!bidangBisnis || !subBidangBisnis) {
     return (
       <>
-        <ViewWrapper>
-          <ActivityIndicator size="large" color={MainColor.yellow} />
-        </ViewWrapper>
+        <NewWrapper>
+          <ListSkeletonComponent height={80} />
+        </NewWrapper>
       </>
     );
   }
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonUpdate}>
+      <NewWrapper footerComponent={buttonUpdate}>
         <StackCustom gap={"xs"}>
           <TextInputCustom
             required
@@ -471,7 +472,7 @@ export default function PortofolioEdit() {
           />
           <Spacing />
         </StackCustom>
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/(user)/portofolio/[id]/list.tsx

@@ -1,28 +1,9 @@
-import { TextCustom, ViewWrapper } from "@/components";
-import Portofolio_BoxView from "@/screens/Portofolio/BoxPortofolioView";
-import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useCallback, useState } from "react";
+import ViewListPortofolio from "@/screens/Portofolio/ViewListPortofolio";
 
 export default function ListPortofolio() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any[]>([]);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadPortofolio(id as string);
-    }, [id])
-  );
-
-  const onLoadPortofolio = async (id: string) => {
-    const response = await apiGetPortofolio({ id: id });
-    setData(response.data);
-  };
   return (
-    <ViewWrapper>
-      {data ? data?.map((item: any, index: number) => (
-        <Portofolio_BoxView key={index} data={item} />
-      )) : <TextCustom>Tidak ada portofolio</TextCustom>}
-    </ViewWrapper>
+    <>
+      <ViewListPortofolio />
+    </>
   );
 }

constants/constans-value.ts

@@ -24,7 +24,7 @@ export {
 
 // OS Height
 const OS_ANDROID_HEIGHT = 115
-const OS_IOS_HEIGHT = 70
+const OS_IOS_HEIGHT = 90
 const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
 
 // Text Size

docs/prompt-for-qwen-code.md

@@ -1,8 +1,16 @@
 <!-- Start Penerapan Pagination -->
-Terapkan pagination pada file: screens/Forum/DetailForum.tsx
-Component yang digunakan: hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
 
-Perbaiki fetch pada file: service/api-client/api-forum.ts
+File utama: screens/Notification/ScreenNotification.tsx
+Fun fecth: apiGetNotificationsById
+File fetch: service/api-notifications.ts
+File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
+
+Terapkan pagination pada file "File utama"
+Analisa juga file "File utama" , jika belum menggunakan NewWrapper pada file "File komponen wrapper" , maka terapkan juga dan ganti wrapper lama yaitu komponen ViewWrapper
+
+Komponen pagination yang digunaka berada pada file hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
+
+Perbaiki fetch "Fun fecth" , pada file "File fetch"
 Jika tidak ada props page maka tambahkan props page dan default page: "1"
 
 Gunakan bahasa indonesia pada cli agar saya mudah membacanya.

screens/Forum/DetailForum2.tsx

@@ -5,6 +5,7 @@ import {
   LoaderCustom,
   NewWrapper,
   Spacing,
+  StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
@@ -111,7 +112,6 @@ export default function DetailForum2() {
 
   // Create Commentar
   const handlerCreateCommentar = async () => {
-
     const cencorContent = censorText(text);
 
     const newData = {
@@ -155,7 +155,10 @@ export default function DetailForum2() {
   const headerComponent = () =>
     // Box Posting
     !data ? (
-      <CustomSkeleton height={200} />
+      <StackCustom>
+        <CustomSkeleton height={200} />
+        <CustomSkeleton height={100} />
+      </StackCustom>
     ) : (
       <>
         {/* Area Posting */}
@@ -199,10 +202,7 @@ export default function DetailForum2() {
     );
 
   // Render individual comment item
-  const renderCommentItem = ({ item }: { item: TypeForum_CommentProps }) =>
-    !data && !commentPagination.listData ? (
-      <ListSkeletonComponent />
-    ) : (
+  const renderCommentItem = ({ item }: { item: TypeForum_CommentProps }) =>(
       <Forum_CommentarBoxSection
         key={item.id}
         data={item}
@@ -212,7 +212,21 @@ export default function DetailForum2() {
           setCommentAuthorId(value.setCommentAuthorId);
         }}
       />
-    );
+  )
+    // !data || !commentPagination.listData ? (
+    //   // <ListSkeletonComponent height={120} />
+    //   <LoaderCustom />
+    // ) : (
+    //   <Forum_CommentarBoxSection
+    //     key={item.id}
+    //     data={item}
+    //     onSetData={(value) => {
+    //       setCommentId(value.setCommentId);
+    //       setOpenDrawerCommentar(value.setOpenDrawer);
+    //       setCommentAuthorId(value.setCommentAuthorId);
+    //     }}
+    //   />
+    // );
 
   // Generate pagination components using helper
   const { ListEmptyComponent, ListFooterComponent } =

screens/Forum/ViewBeranda3.tsx

@@ -102,7 +102,7 @@ export default function Forum_ViewBeranda3() {
 
       <NewWrapper
         headerComponent={
-          <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
+          <View style={{  paddingTop: 8 }}>
             <SearchInput
               placeholder="Cari topik diskusi"
               onChangeText={_.debounce((text) => setSearch(text), 500)}

screens/Notification/ScreenNotification.tsx

@@ -0,0 +1,249 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  NewWrapper,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { IconDot } from "@/components/_Icon/IconComponent";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
+import { usePagination } from "@/hooks/use-pagination";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { apiGetNotificationsById } from "@/service/api-notifications";
+import { listOfcategoriesAppNotification } from "@/types/type-notification-category";
+import { formatChatTime } from "@/utils/formatChatTime";
+import { Ionicons } from "@expo/vector-icons";
+import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+const selectedCategory = (value: string) => {
+  const category = listOfcategoriesAppNotification.find(
+    (c) => c.value === value
+  );
+  return category?.label;
+};
+
+const fixPath = ({
+  deepLink,
+  categoryApp,
+}: {
+  deepLink: string;
+  categoryApp: string;
+}) => {
+  if (categoryApp === "OTHER") {
+    return deepLink;
+  }
+
+  const separator = deepLink.includes("?") ? "&" : "?";
+
+  const fixedPath = `${deepLink}${separator}from=notifications&category=${_.lowerCase(
+    categoryApp
+  )}`;
+
+  console.log("Fix Path", fixedPath);
+
+  return fixedPath;
+};
+
+const BoxNotification = ({
+  data,
+  activeCategory,
+}: {
+  data: any;
+  activeCategory: string | null;
+}) => {
+  // console.log("DATA NOTIFICATION", JSON.stringify(data, null, 2));
+  const { markAsRead } = useNotificationStore();
+  return (
+    <>
+      <BaseBox
+        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
+        onPress={() => {
+          // console.log(
+          //   "Notification >",
+          //   selectedCategory(activeCategory as string)
+          // );
+          const newPath = fixPath({
+            deepLink: data.deepLink,
+            categoryApp: data.kategoriApp,
+          });
+
+          router.navigate(newPath as any);
+          selectedCategory(activeCategory as string);
+
+          if (!data.isRead) {
+            markAsRead(data.id);
+          }
+        }}
+      >
+        <StackCustom>
+          <TextCustom truncate={2} bold>
+            {data.title}
+          </TextCustom>
+
+          <TextCustom truncate={2}>{data.pesan}</TextCustom>
+
+          <TextCustom size="small" color="gray">
+            {formatChatTime(data.createdAt)}
+          </TextCustom>
+        </StackCustom>
+      </BaseBox>
+    </>
+  );
+};
+
+export default function ScreenNotification() {
+  const { user } = useAuth();
+  const { category } = useLocalSearchParams<{ category?: string }>();
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    category || "event"
+  );
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const { markAsReadAll } = useNotificationStore();
+
+  // Initialize pagination for notifications
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiGetNotificationsById({
+        id: user?.id as string,
+        category: activeCategory as any,
+        page: String(page), // API expects string
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [activeCategory],
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      // Reset and load first page when category changes
+      pagination.reset();
+      pagination.onRefresh();
+    }, [activeCategory])
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // Reset and load first page when category changes
+    pagination.reset();
+    pagination.onRefresh();
+  };
+
+  // Render individual notification item
+  const renderItem = ({ item }: { item: any }) => (
+    <View key={item.id}>
+      <BoxNotification
+        data={item}
+        activeCategory={activeCategory as any}
+      />
+    </View>
+  );
+
+  // Generate pagination components using helper
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    isInitialLoad: pagination.isInitialLoad,
+    emptyMessage: "Belum ada notifikasi",
+    skeletonCount: 5,
+    skeletonHeight: 100,
+  });
+
+  return (
+    <>
+     <Stack.Screen
+        options={{
+          title: "Notifikasi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <IconDot
+              color={MainColor.yellow}
+              onPress={() => setOpenDrawer(true)}
+            />
+          ),
+        }}
+      />
+
+      <NewWrapper
+        headerComponent={
+          <ScrollableCustom
+            data={listOfcategoriesAppNotification.map((e, i) => ({
+              id: i,
+              label: e.label,
+              value: e.value,
+            }))}
+            onButtonPress={handlePress}
+            activeId={activeCategory as string}
+          />
+        }
+        listData={pagination.listData}
+        renderItem={renderItem}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+          />
+        }
+        onEndReached={pagination.loadMore}
+        ListFooterComponent={ListFooterComponent}
+        ListEmptyComponent={ListEmptyComponent}
+      />
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tandai Semua Dibaca",
+              value: "read-all",
+              icon: (
+                <Ionicons
+                  name="reader-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              path: "",
+            },
+          ]}
+          onPressItem={(item: any) => {
+            console.log("Item", item.value);
+            if (item.value === "read-all") {
+              AlertDefaultSystem({
+                title: "Tandai Semua Dibaca",
+                message:
+                  "Apakah Anda yakin ingin menandai semua notifikasi dibaca?",
+                textLeft: "Batal",
+                textRight: "Ya",
+                onPressRight: () => {
+                  markAsReadAll(user?.id as any);
+                  // Reset and refresh data after marking all as read
+                  pagination.reset();
+                  pagination.onRefresh();
+                  setOpenDrawer(false);
+                },
+              });
+            }
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

screens/Portofolio/BoxPortofolioView.tsx

@@ -1,5 +1,5 @@
 import { BaseBox, Grid, TextCustom } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
@@ -8,7 +8,7 @@ export default function Portofolio_BoxView({ data }: { data: any }) {
   return (
     <>
       <BaseBox
-        style={{ backgroundColor: MainColor.darkblue }}
+        style={{ backgroundColor: AccentColor.blue}}
         onPress={() => {
           router.push(`/portofolio/${data?.id}`);
         }}

screens/Portofolio/ViewListPortofolio.tsx

@@ -0,0 +1,74 @@
+import { NewWrapper, TextCustom } from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import { MainColor } from "@/constants/color-palet";
+import { usePagination } from "@/hooks/use-pagination";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback } from "react";
+import { RefreshControl } from "react-native";
+import Portofolio_BoxView from "./BoxPortofolioView";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+
+export default function ViewListPortofolio() {
+  const { id } = useLocalSearchParams();
+
+  // Initialize pagination for portfolio items
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiGetPortofolio({
+        id: id as string,
+        page: String(page) // API expects string
+      });
+    //   return response.data;
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      // Reset and load first page when id changes
+      pagination.reset();
+      pagination.onRefresh();
+    }, [id]),
+  );
+
+  // Render individual portfolio item
+  const renderItem = ({ item }: { item: any }) => (
+    <Portofolio_BoxView key={item.id} data={item} />
+  );
+
+  // Generate pagination components using helper
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    isInitialLoad: pagination.isInitialLoad,
+    emptyMessage: "Tidak ada portofolio",
+    skeletonCount: 3,
+    skeletonHeight: 100,
+  });
+
+  return (
+    <NewWrapper
+      listData={pagination.listData}
+      renderItem={renderItem}
+      refreshControl={
+        <RefreshControl
+          // IOS
+          tintColor={MainColor.yellow}
+          // Android
+          colors={[MainColor.yellow]}
+          progressBackgroundColor={MainColor.yellow}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+    />
+  );
+}

screens/Profile/PortofolioSection.tsx

@@ -12,7 +12,7 @@ export default function Profile_PortofolioSection({
 }) {
   return (
     <>
-      <BaseBox>
+      <BaseBox >
         <View>
           <TextCustom bold size="large" align="center">
             Portofolio

screens/UserSeach/MainView_V2.tsx

@@ -1,14 +1,17 @@
 import {
-    AvatarComp,
-    ClickableCustom,
-    Grid,
-    NewWrapper,
-    StackCustom,
-    TextCustom,
-    TextInputCustom
+  AvatarComp,
+  ClickableCustom,
+  Grid,
+  NewWrapper,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL, PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import {
+  ICON_SIZE_SMALL,
+  PAGINATION_DEFAULT_TAKE,
+} from "@/constants/constans-value";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAllUser } from "@/service/api-client/api-user";
 import { Ionicons } from "@expo/vector-icons";
@@ -18,7 +21,6 @@ import { useCallback, useRef, useState } from "react";
 import { RefreshControl, View } from "react-native";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 
-
 export default function UserSearchMainView_V2() {
   const isInitialMount = useRef(true);
   const [search, setSearch] = useState("");
@@ -30,7 +32,7 @@ export default function UserSearchMainView_V2() {
     hasMore,
     onRefresh,
     loadMore,
-    isInitialLoad
+    isInitialLoad,
   } = usePagination({
     fetchFunction: async (page, searchQuery) => {
       const response = await apiAllUser({
@@ -83,7 +85,7 @@ export default function UserSearchMainView_V2() {
         padding: 12,
         marginBottom: 10,
         elevation: 2,
-        shadowColor: '#000',
+        shadowColor: "#000",
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.2,
         shadowRadius: 2,
@@ -129,18 +131,19 @@ export default function UserSearchMainView_V2() {
     </View>
   );
 
-  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
-    loading,
-    refreshing,
-    listData,
-    searchQuery: search,
-    emptyMessage: "Tidak ada pengguna ditemukan",
-    emptySearchMessage: "Tidak ada hasil pencarian",
-    skeletonCount: 5,
-    skeletonHeight: 150,
-    loadingFooterText: "Memuat lebih banyak pengguna...",
-    isInitialLoad
-  });
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading,
+      refreshing,
+      listData,
+      searchQuery: search,
+      emptyMessage: "Tidak ada pengguna ditemukan",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      skeletonCount: 5,
+      skeletonHeight: 150,
+      loadingFooterText: "Memuat lebih banyak pengguna...",
+      isInitialLoad,
+    });
 
   return (
     <>
@@ -161,14 +164,4 @@ export default function UserSearchMainView_V2() {
       />
     </>
   );
-
-  //   return (
-  //     <>
-  //       <ViewWrapper>
-  //         <View style={{ padding: 16 }}>
-  //           <TextCustom>{JSON.stringify(listData, null, 2)}</TextCustom>
-  //         </View>
-  //       </ViewWrapper>
-  //     </>
-  //   );
 }

service/api-client/api-portofolio.ts

@@ -12,9 +12,9 @@ export async function apiPortofolioCreate({ data }: { data: any }) {
   }
 }
 
-export async function apiGetPortofolio({ id }: { id: string }) {
+export async function apiGetPortofolio({ id, page = "1" }: { id: string; page?: string }) {
   try {
-    const response = await apiConfig.get(`/mobile/portofolio?id=${id}`);
+    const response = await apiConfig.get(`/mobile/portofolio?id=${id}&page=${page}`);
 
     return response.data;
   } catch (error) {

service/api-notifications.ts

@@ -41,16 +41,19 @@ export async function apiNotificationsSendById({
 export async function apiGetNotificationsById({
   id,
   category,
+  page = "1",
 }: {
   id: string;
   category: TypeNotificationCategoryApp;
+  page?: string;
 }) {
   console.log("ID", id);
   console.log("Category", category);
+  console.log("Page", page);
 
   try {
     const response = await apiConfig.get(
-      `/mobile/notification/${id}?category=${category}`
+      `/mobile/notification/${id}?category=${category}&page=${page}`
     );
 
     return response.data;