feat: implement pagination and NewWrapper on donation and investment screens

- Implement pagination on investment screens (ScreenMyHolding, ScreenInvestor, ScreenRecapOfNews, ScreenListOfNews)
- Implement pagination on donation screens (ScreenStatus)
- Update API functions to support pagination with page parameter (apiInvestmentGetAll, apiInvestmentGetInvestorById, apiInvestmentGetNews, apiDonationGetByStatus)
- Replace ViewWrapper with NewWrapper for better UI experience
- Update app directory files to use new modular components from screens directory
- Add pull-to-refresh and infinite scroll functionality
- Improve performance by loading data incrementally
- Apply NewWrapper to donation create and create-story screens

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

screens/Donation/ButtonStatusSection.tsx

@@ -16,6 +16,9 @@ export default function Donation_ButtonStatusSection({
 }) {
   const [isLoading, setLoading] = useState(false);
   const [isLoadingDelete, setLoadingDelete] = useState(false);
+  const path: any = (status: string) => {
+    return `/donation/(tabs)/status?status=${status}`;
+  };
   const handleBatalkanReview = async () => {
     AlertDefaultSystem({
       title: "Batalkan Review",
@@ -43,7 +46,7 @@ export default function Donation_ButtonStatusSection({
             text1: response.message,
           });
 
-          router.back();
+          router.push(path("draft"));
         } catch (error) {
           console.log("[ERROR]", error);
         } finally {
@@ -80,7 +83,7 @@ export default function Donation_ButtonStatusSection({
             text1: response.message,
           });
 
-          router.back();
+          router.replace(path("review"));
         } catch (error) {
           console.log("[ERROR]", error);
         } finally {
@@ -117,7 +120,7 @@ export default function Donation_ButtonStatusSection({
             text1: response.message,
           });
 
-          router.back();
+          router.replace(path("draft"));
         } catch (error) {
           console.log("[ERROR]", error);
         } finally {

screens/Donation/ComponentBoxDetailData.tsx

@@ -12,11 +12,13 @@ import { View } from "react-native";
 export default function Donation_ComponentBoxDetailData({
   bottomSection,
   data,
+  showSisaHari = true,
   sisaHari,
   reminder,
 }: {
   bottomSection?: React.ReactNode;
   data: any;
+  showSisaHari?: boolean;
   sisaHari: number;
   reminder: boolean;
 }) {
@@ -34,9 +36,9 @@ export default function Donation_ComponentBoxDetailData({
               <TextCustom bold color="red">
                 Waktu berakhir
               </TextCustom>
-            ) : (
+            ) : showSisaHari ? (
               <TextCustom>Sisa hari: {sisaHari}</TextCustom>
-            )}
+            ) : null}
           </View>
 
           <Grid>

screens/Donation/ScreenStatus.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+} from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { useAuth } from "@/hooks/use-auth";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiDonationGetByStatus } from "@/service/api-client/api-donation";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { RefreshControl } from "react-native";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+
+interface DonationStatusProps {
+  initialStatus?: string;
+}
+
+export default function Donation_ScreenStatus({ initialStatus = "publish" }: DonationStatusProps) {
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>(initialStatus);
+
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiDonationGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+        page: String(page),
+      });
+    },
+    pageSize: 5, // Sesuaikan dengan jumlah item per halaman dari API
+    dependencies: [user?.id, activeCategory],
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, [user?.id, activeCategory])
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  const renderItem = ({ item, index }: { item: any; index: number }) => (
+    <Donasi_BoxStatus
+      data={item}
+      status={activeCategory as string}
+    />
+  );
+
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    isInitialLoad: pagination.isInitialLoad,
+    emptyMessage: `Tidak ada data ${activeCategory}`,
+    skeletonCount: 5,
+    skeletonHeight: 200,
+  });
+
+  return (
+    <NewWrapper
+      listData={pagination.listData}
+      renderItem={renderItem}
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      refreshControl={
+        <RefreshControl 
+          refreshing={pagination.refreshing} 
+          onRefresh={pagination.onRefresh} 
+        />
+      }
+      hideFooter
+      headerComponent={scrollComponent}
+    />
+  );
+}