Fix load data event

Event – User
- app/(application)/(user)/event/(tabs)/history.tsx
- app/(application)/(user)/event/(tabs)/status.tsx
- app/(application)/(user)/event/[id]/edit.tsx
- app/(application)/(user)/event/create.tsx

Event – Screens (Untracked)
- screens/Event/ScreenHistory.tsx
- screens/Event/ScreenStatus.tsx

API
- service/api-client/api-event.ts

Docs
- docs/prompt-for-qwen-code.md

### No Issue

app/(application)/(image)/preview-image/[id]/index.tsx

@@ -1,8 +1,10 @@
 import { CenterCustom, TextCustom, ViewWrapper } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { MainColor } from "@/constants/color-palet";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import React, { useState } from "react";
+import { View } from "react-native";
 
 export default function PreviewImage() {
   const { id } = useLocalSearchParams();
@@ -11,18 +13,48 @@ export default function PreviewImage() {
   return (
     <ViewWrapper>
       {id ? (
-        <Image
+        <View
-          onLoad={() => {
+          style={{
-            setIsLoading(false);
+            width: "100%",
+            height: "100%",
+            position: "relative",
           }}
-          source={
+        >
-            isLoading
+          {/* Main Image */}
-              ? require("@/assets/images/loading.gif")
+          <Image
-              : API_STRORAGE.GET({ fileId: id as string })
+            onLoad={() => {
-          }
+              setIsLoading(false);
-          contentFit="contain"
+            }}
-          style={{ width: "100%", height: "100%" }}
+            source={API_STRORAGE.GET({ fileId: id as string })}
-        />
+            contentFit="contain"
+            style={{ width: "100%", height: "100%" }}
+            // placeholder={require("@/assets/images/loading.gif")}
+          />
+
+          {/* Custom Loader Overlay */}
+          {isLoading && (
+            <View
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: MainColor.darkblue,
+                zIndex: 1,
+                opacity: 0.5,
+              }}
+            >
+              <Image
+                source={require("@/assets/images/loading.gif")}
+                contentFit="contain"
+                style={{ width: 60, height: 60 }}
+              />
+            </View>
+          )}
+        </View>
       ) : (
         <CenterCustom>
           <TextCustom>File not found</TextCustom>

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

@@ -26,7 +26,6 @@ export default function DonationBeranda() {
       const response = await apiDonationGetAll({
         category: "beranda"
       });
-      console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
 
       setList(response.data);
     } catch (error) {

app/(application)/(user)/donation/(tabs)/my-donation.tsx

@@ -16,6 +16,7 @@ import { Href, router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 import { View } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function DonationMyDonation() {
   const { user } = useAuth();
@@ -25,20 +26,25 @@ export default function DonationMyDonation() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [user?.id])
+    }, [user?.id]),
   );
 
   const onLoadData = async () => {
+    if (!user?.id) {
+      Toast.show({
+        type: "error",
+        text1: "Load data gagal, user tidak ditemukan",
+      });
+      return;
+    }
+
     try {
       setLoadList(true);
       const response = await apiDonationGetAll({
         category: "my-donation",
         authorId: user?.id,
       });
-      console.log(
+      
-        "[RES GET MY DONATION]",
-        JSON.stringify(response.data, null, 2)
-      );
 
       setList(response.data);
     } catch (error) {

app/(application)/(user)/donation/[id]/(transaction-flow)/index.tsx

@@ -10,21 +10,32 @@ import {
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { useAuth } from "@/hooks/use-auth";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { Ionicons } from "@expo/vector-icons";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentInputDonation() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [nominal, setNominal] = useState<number>(0);
 
   const handlerSubmit = async () => {
+    if (!user?.id) {
+      Toast.show({
+        type: "error",
+        text1: "User tidak ditemukan",
+      });
+
+      return;
+    }
     try {
       await AsyncStorage.setItem(
         LOCAL_STORAGE_KEY.transactionDonation,
-        JSON.stringify({ nominal: nominal.toString() })
+        JSON.stringify({ nominal: nominal.toString() }),
       );
       router.replace(`/donation/${id}/select-bank`);
     } catch (error) {

app/(application)/(user)/event/(tabs)/history.tsx

@@ -1,104 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, LoaderCustom, Spacing, TextCustom } from "@/components";
+import Event_ScreenHistory from "@/screens/Event/ScreenHistory";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { useAuth } from "@/hooks/use-auth";
-import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { apiEventGetAll } from "@/service/api-client/api-event";
-import { dateTimeView } from "@/utils/dateTimeView";
-import _ from "lodash";
-import { useEffect, useState } from "react";
-import { View } from "react-native";
 
 export default function EventHistory() {
-  const [activeCategory, setActiveCategory] = useState<string | null>("all");
-  const { user } = useAuth();
-  const [listData, setListData] = useState<any>([]);
-  const [isLoadList, setIsLoadList] = useState(false);
-
-  useEffect(() => {
-    onLoadData({ userId: user?.id });
-  }, [user?.id, activeCategory]);
-
-  async function onLoadData({ userId }: { userId?: string }) {
-    try {
-      setIsLoadList(true);
-      const response = await apiEventGetAll({
-        category: activeCategory === "all" ? "all-history" : "my-history",
-        userId: userId,
-      });
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadList(false);
-    }
-  }
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const headerComponent = (
-    <View
-      style={{
-        flexDirection: "row",
-        alignItems: "center",
-        padding: 5,
-        backgroundColor: MainColor.soft_darkblue,
-        borderRadius: 50,
-        width: "100%",
-      }}
-    >
-      <ButtonCustom
-        backgroundColor={
-          activeCategory === "all" ? MainColor.yellow : AccentColor.blue
-        }
-        textColor={activeCategory === "all" ? MainColor.black : MainColor.white}
-        style={{ width: "49%" }}
-        onPress={() => handlePress("all")}
-      >
-        Semua Riwayat
-      </ButtonCustom>
-      <Spacing width={"2%"} />
-      <ButtonCustom
-        backgroundColor={
-          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
-        }
-        textColor={
-          activeCategory === "main" ? MainColor.black : MainColor.white
-        }
-        style={{ width: "49%" }}
-        onPress={() => handlePress("main")}
-      >
-        Riwayat Saya
-      </ButtonCustom>
-    </View>
-  );
-
   return (
-    <ViewWrapper headerComponent={headerComponent} hideFooter>
+    <>
-      {isLoadList ? (
+      <Event_ScreenHistory />
-        <LoaderCustom />
+    </>
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada riwayat</TextCustom>
-      ) : (
-        listData.map((item: any, index: number) => (
-          <Event_BoxPublishSection
-            key={index.toString()}
-            data={item}
-            rightComponentAvatar={
-              <TextCustom>
-                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
-              </TextCustom>
-            }
-            href={`/event/${item.id}/history`}
-          />
-        ))
-      )}
-    </ViewWrapper>
   );
 }

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

@@ -1,101 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
+import Event_ScreenStatus from "@/screens/Event/ScreenStatus";
-  BoxWithHeaderSection,
-  Grid,
-  LoaderCustom,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { apiEventGetByStatus } from "@/service/api-client/api-event";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function EventStatus() {
-  const { user } = useAuth();
-  const { status } = useLocalSearchParams<{ status?: string }>();
-
-  const id = user?.id || "";
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
-  );
-  const [listData, setListData] = useState([]);
-  const [loadingGetData, setLoadingGetData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [activeCategory, id])
-  );
-
-  async function onLoadData() {
-    try {
-      setLoadingGetData(true);
-      const response = await apiEventGetByStatus({
-        id: id!,
-        status: activeCategory!,
-      });
-      // console.log("Response", JSON.stringify(response.data, null, 2));
-      setListData(response.data);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoadingGetData(false);
-    }
-  }
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const tabsComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
-
   return (
-    <ViewWrapper headerComponent={tabsComponent}>
+    <>
-      {loadingGetData ? (
+      <Event_ScreenStatus />
-        <LoaderCustom />
+    </>
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
-      ) : (
-        listData.map((item: any, i) => (
-          <BoxWithHeaderSection
-            key={i}
-            href={`/event/${item.id}/${activeCategory}/detail-event`}
-          >
-            <StackCustom gap={"xs"}>
-              <Grid>
-                <Grid.Col span={8}>
-                  <TextCustom truncate bold>
-                    {item?.title}
-                  </TextCustom>
-                </Grid.Col>
-                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                  <TextCustom>
-                    {new Date(item?.tanggal).toLocaleDateString()}
-                  </TextCustom>
-                </Grid.Col>
-              </Grid>
-
-              <TextCustom truncate={2}>{item?.deskripsi}</TextCustom>
-            </StackCustom>
-          </BoxWithHeaderSection>
-        ))
-      )}
-    </ViewWrapper>
   );
 }

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

@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BoxButtonOnFooter,
   ButtonCustom,
   LoaderCustom,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -10,6 +12,7 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import {
   apiEventGetOne,
@@ -48,7 +51,7 @@ export default function EventEdit() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   async function onLoadData() {
@@ -100,6 +103,15 @@ export default function EventEdit() {
     const startDate = new Date(selectedDate as any);
     const endDate = new Date(selectedEndDate as any);
 
+    if (!startDate) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Tanggal mulai tidak valid",
+      });
+      return false;
+    }
+
     if (startDate >= endDate) {
       Toast.show({
         type: "info",
@@ -146,7 +158,7 @@ export default function EventEdit() {
 
   const validateDateRange = (
     selectedDate: string | Date,
-    selectedEndDate: string | Date
+    selectedEndDate: string | Date,
   ): { isValid: boolean; error?: string } => {
     const startDate = new Date(selectedDate);
     const endDate = new Date(selectedEndDate);
@@ -174,9 +186,19 @@ export default function EventEdit() {
 
   return (
     <>
-      <ViewWrapper>
+      <NewWrapper
+        footerComponent={
+          <BoxButtonOnFooter>
+            <ButtonCustom
+              isLoading={isLoading}
+              title="Update"
+              onPress={handlerSubmit}
+            />
+          </BoxButtonOnFooter>
+        }
+      >
         {isLoadData ? (
-          <LoaderCustom />
+          <ListSkeletonComponent />
         ) : (
           <StackCustom gap={"xs"}>
             <TextInputCustom
@@ -186,26 +208,15 @@ export default function EventEdit() {
               value={data?.title}
               onChangeText={(value) => setData({ ...data, title: value })}
             />
-            <SelectCustom
+            <TextAreaCustom
-              label="Tipe Event"
+              label="Deskripsi"
-              placeholder="Pilih tipe event"
+              placeholder="Masukkan deskripsi event"
-              data={listTypeEvent.map((item: any) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data?.eventMaster_TipeAcaraId || ""}
-              onChange={(value) => {
-                console.log(value);
-                setData({ ...data, eventMaster_TipeAcaraId: value });
-              }}
-            />
-            <TextInputCustom
-              label="Lokasi"
-              placeholder="Masukkan lokasi event"
               required
-              value={data?.lokasi}
+              showCount
-              onChangeText={(value) => setData({ ...data, lokasi: value })}
+              value={data?.deskripsi}
+              onChangeText={(value) => setData({ ...data, deskripsi: value })}
             />
+
             <DateTimePickerCustom
               minimumDate={new Date(Date.now())}
               label="Tanggal & Waktu Mulai"
@@ -233,7 +244,7 @@ export default function EventEdit() {
                   {
                     validateDateRange(
                       selectedDate as any,
-                      selectedEndDate as any
+                      selectedEndDate as any,
                     ).error
                   }
                 </TextCustom>
@@ -242,31 +253,37 @@ export default function EventEdit() {
                   {
                     validateDateRange(
                       selectedDate as any,
-                      selectedEndDate as any
+                      selectedEndDate as any,
                     ).error
                   }
                 </TextCustom>
               )}
-              <Spacing />
+              {/* <Spacing /> */}
             </StackCustom>
 
-            <TextAreaCustom
+            <SelectCustom
-              label="Deskripsi"
+              label="Tipe Event"
-              placeholder="Masukkan deskripsi event"
+              placeholder="Pilih tipe event"
-              required
+              data={listTypeEvent.map((item: any) => ({
-              showCount
+                label: item.name,
-              value={data?.deskripsi}
+                value: item.id,
-              onChangeText={(value) => setData({ ...data, deskripsi: value })}
+              }))}
+              value={data?.eventMaster_TipeAcaraId || ""}
+              onChange={(value) => {
+                console.log(value);
+                setData({ ...data, eventMaster_TipeAcaraId: value });
+              }}
             />
-
+            <TextInputCustom
-            <ButtonCustom
+              label="Lokasi"
-              isLoading={isLoading}
+              placeholder="Masukkan lokasi event"
-              title="Update"
+              required
-              onPress={handlerSubmit}
+              value={data?.lokasi}
+              onChangeText={(value) => setData({ ...data, lokasi: value })}
             />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -1,12 +1,13 @@
 import {
+  BoxButtonOnFooter,
   ButtonCustom,
+  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { useAuth } from "@/hooks/use-auth";
@@ -100,7 +101,6 @@ export default function EventCreate() {
       setIsLoading(false);
     }
   };
-  
 
   const buttonSubmit = (
     <ButtonCustom
@@ -112,7 +112,9 @@ export default function EventCreate() {
 
   return (
     <>
-      <ViewWrapper>
+      <NewWrapper
+        footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
+      >
         <StackCustom gap={"xs"}>
           <TextInputCustom
             placeholder="Masukkan nama event"
@@ -121,24 +123,15 @@ export default function EventCreate() {
             onChangeText={(value: any) => setData({ ...data, title: value })}
           />
 
-          <SelectCustom
+          <TextAreaCustom
-            label="Tipe Event"
+            label="Deskripsi"
-            placeholder="Pilih tipe event"
+            placeholder="Masukkan deskripsi event"
-            data={listTypeEvent.map((item: any) => ({
-              label: item.name,
-              value: item.id,
-            }))}
-            value={data?.eventMaster_TipeAcaraId || null}
-            onChange={(value: any) =>
-              setData({ ...data, eventMaster_TipeAcaraId: value })
-            }
-          />
-
-          <TextInputCustom
-            label="Lokasi"
-            placeholder="Masukkan lokasi event"
             required
-            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+            showCount
+            value={data?.deskripsi || ""}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
           />
 
           <DateTimePickerCustom
@@ -168,22 +161,28 @@ export default function EventCreate() {
               </TextCustom>
             )}
             <Spacing />
+            <SelectCustom
+              label="Tipe Event"
+              placeholder="Pilih tipe event"
+              data={listTypeEvent.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data?.eventMaster_TipeAcaraId || null}
+              onChange={(value: any) =>
+                setData({ ...data, eventMaster_TipeAcaraId: value })
+              }
+            />
+
+            <TextInputCustom
+              label="Lokasi"
+              placeholder="Masukkan lokasi event"
+              required
+              onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+            />
           </StackCustom>
-
-          <TextAreaCustom
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi event"
-            required
-            showCount
-            value={data?.deskripsi || ""}
-            onChangeText={(value: any) =>
-              setData({ ...data, deskripsi: value })
-            }
-          />
-
-          {buttonSubmit}
         </StackCustom>
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

app/(application)/(user)/forum/[id]/index.tsx

@@ -1,258 +1,11 @@
-import {
+import DetailForum from "@/screens/Forum/DetailForum";
-  ButtonCustom,
+import DetailForum2 from "@/screens/Forum/DetailForum2";
-  DrawerCustom,
-  LoaderCustom,
-  Spacing,
-  TextAreaCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import AlertWarning from "@/components/Alert/AlertWarning";
-import { useAuth } from "@/hooks/use-auth";
-import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
-import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
-import {
-  apiForumCreateComment,
-  apiForumGetComment,
-  apiForumGetOne,
-  apiForumUpdateStatus,
-} from "@/service/api-client/api-forum";
-import { TypeForum_CommentProps } from "@/types/type-forum";
-import { isBadContent } from "@/utils/badWordsIndonesia";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
-
-
 
 export default function ForumDetail() {
-  const { id } = useLocalSearchParams();
-  const { user } = useAuth();
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [data, setData] = useState<any | null>(null);
-  const [listComment, setListComment] = useState<TypeForum_CommentProps[] | null>(null);
-  const [isLoadingComment, setLoadingComment] = useState(false);
-
-  // Status
-  const [status, setStatus] = useState("");
-  const [text, setText] = useState("");
-  const [authorId, setAuthorId] = useState("");
-  const [dataId, setDataId] = useState("");
-
-  // Comentar
-  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [commentId, setCommentId] = useState("");
-  const [commentAuthorId, setCommentAuthorId] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData(id as string);
-    }, [id])
-  );
-
-  const onLoadData = async (id: string) => {
-    try {
-      const response = await apiForumGetOne({ id });
-      setData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  useEffect(() => {
-    onLoadListComment(id as string);
-  }, [id]);
-
-  const onLoadListComment = async (id: string) => {
-    try {
-      const response = await apiForumGetComment({
-        id: id as string,
-      });
-      setListComment(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  // Update Status
-  const handlerUpdateStatus = async (value: any) => {
-    try {
-      const response = await apiForumUpdateStatus({
-        id: id as string,
-        data: value,
-      });
-      if (response.success) {
-        setStatus(response.data);
-        setData({
-          ...data,
-          ForumMaster_StatusPosting: {
-            status: response.data,
-          },
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  // Create Commentar
-  const handlerCreateCommentar = async () => {
-    if (isBadContent(text)) {
-      AlertWarning({});
-      return;
-    }
-    
-    const newData = {
-      comment: text,
-      authorId: user?.id,
-    };
-    
-    try {
-      setLoadingComment(true);
-      const response = await apiForumCreateComment({
-        id: id as string,
-        data: newData,
-      });
-
-      if (response.success) {
-        setText("");
-        const newComment = {
-          id: response.data.id,
-          isActive: response.data.isActive,
-          komentar: response.data.komentar,
-          createdAt: response.data.createdAt,
-          authorId: response.data.authorId,
-          Author: response.data.Author,
-        };
-        setListComment((prev) => [newComment, ...(prev || [])]);
-        setData({
-          ...data,
-          count: data.count + 1,
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingComment(false);
-    }
-  };
-
   return (
     <>
-      <ViewWrapper>
+     {/* <DetailForum />; */}
-        {!data && !listComment ? (
+     <DetailForum2 />
-          <LoaderCustom />
-        ) : (
-          <>
-            {/* Box Posting */}
-            <Forum_BoxDetailSection
-              data={data}
-              onSetData={() => {
-                setOpenDrawer(true);
-                setStatus(data.ForumMaster_StatusPosting?.status);
-                setAuthorId(data.Author?.id);
-                setDataId(data.id);
-              }}
-            />
-
-            {/* Area Commentar */}
-            {data?.ForumMaster_StatusPosting?.status === "Open" && (
-              <>
-                <TextAreaCustom
-                  placeholder="Ketik diskusi anda..."
-                  maxLength={1000}
-                  showCount
-                  value={text}
-                  onChangeText={setText}
-                  style={{
-                    marginBottom: 0,
-                  }}
-                />
-                <ButtonCustom
-                  isLoading={isLoadingComment}
-                  style={{
-                    alignSelf: "flex-end",
-                  }}
-                  onPress={() => {
-                    handlerCreateCommentar();
-                  }}
-                >
-                  Balas
-                </ButtonCustom>
-              </>
-            )}
-            <Spacing height={40} />
-
-            {/* List Commentar */}
-            {_.isEmpty(listComment) ? (
-              <TextCustom align="center" color="gray" size={"small"}>
-                Tidak ada komentar
-              </TextCustom>
-            ) : (
-              <TextCustom color="gray">Komentar :</TextCustom>
-            )}
-            <Spacing height={5} />
-            {listComment?.map((item: any, index: number) => (
-              <Forum_CommentarBoxSection
-                key={index}
-                data={item}
-                onSetData={(value) => {
-                  setCommentId(value.setCommentId);
-                  setOpenDrawerCommentar(value.setOpenDrawer);
-                  setCommentAuthorId(value.setCommentAuthorId);
-                }}
-              />
-            ))}
-          </>
-        )}
-      </ViewWrapper>
-
-      {/* Posting Drawer */}
-      <DrawerCustom
-        height={"auto"}
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-      >
-        <Forum_MenuDrawerBerandaSection
-          id={dataId}
-          authorUsername={data?.Author?.username as string}
-          status={status}
-          setIsDrawerOpen={() => {
-            setOpenDrawer(false);
-          }}
-          authorId={authorId}
-          handlerUpdateStatus={(value: any) => {
-            handlerUpdateStatus(value);
-          }}
-        />
-      </DrawerCustom>
-
-      {/* Commentar Drawer */}
-      <DrawerCustom
-        height={"auto"}
-        isVisible={openDrawerCommentar}
-        closeDrawer={() => setOpenDrawerCommentar(false)}
-      >
-        <Forum_MenuDrawerCommentar
-          id={commentId as string}
-          commentId={commentId}
-          commentAuthorId={commentAuthorId}
-          setIsDrawerOpen={() => {
-            setOpenDrawerCommentar(false);
-          }}
-          listComment={listComment}
-          setListComment={setListComment}
-          countComment={data?.count}
-          setCountComment={(val: any) => {
-            setData((prev: any) => ({
-              ...prev,
-              count: val,
-            }));
-          }}
-        />
-      </DrawerCustom>
     </>
-  );
+  )
 }

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

@@ -1,12 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import Forum_ViewBeranda from "@/screens/Forum/ViewBeranda";
 import Forum_ViewBeranda2 from "@/screens/Forum/ViewBeranda2";
+import Forum_ViewBeranda3 from "@/screens/Forum/ViewBeranda3";
 
 export default function Forum() {
   return (
     <>
       {/* <Forum_ViewBeranda /> */}
-      <Forum_ViewBeranda2 />
+      {/* <Forum_ViewBeranda2 /> */}
+      <Forum_ViewBeranda3 />
     </>
   );
 }

app/(application)/(user)/job/(tabs)/archive.tsx

@@ -1,57 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, LoaderCustom, TextCustom, ViewWrapper } from "@/components";
+import Job_ScreenArchive2 from "@/screens/Job/ScreenArchive2";
-import { useAuth } from "@/hooks/use-auth";
-import { apiJobGetAll } from "@/service/api-client/api-job";
-import { useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function JobArchive() {
-  const { user } = useAuth();
-  const [listData, setListData] = useState<any[]>([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiJobGetAll({
-        category: "archive",
-        authorId: user?.id,
-      });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
   return (
-    <ViewWrapper hideFooter>
+    <>
-      {isLoadData ? (
+      <Job_ScreenArchive2 />
-        <LoaderCustom />
+    </>
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Anda tidak memiliki arsip</TextCustom>
-      ) : (
-        listData.map((item, index) => (
-          <BaseBox
-            key={index}
-            paddingTop={20}
-            paddingBottom={20}
-            href={`/job/${item.id}/archive`}
-          >
-            <TextCustom align="center" bold truncate size="large">
-              {item?.title || "-"}
-            </TextCustom>
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
   );
 }

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

@@ -1,83 +1,10 @@
-import {
+import Job_ScreenBeranda from "@/screens/Job/ScreenBeranda";
-  AvatarUsernameAndOtherComponent,
+import Job_ScreenBeranda2 from "@/screens/Job/ScreenBeranda2";
-  BoxWithHeaderSection,
-  FloatingButton,
-  LoaderCustom,
-  SearchInput,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { apiJobGetAll } from "@/service/api-client/api-job";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function JobBeranda() {
-  const [listData, setListData] = useState<any[]>([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-  const [search, setSearch] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData(search);
-    }, [search])
-  );
-
-  const onLoadData = async (search: string) => {
-    try {
-      setIsLoadData(true);
-      const response = await apiJobGetAll({ search, category: "beranda" });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
-  const handleSearch = (search: string) => {
-    setSearch(search);
-    onLoadData(search);
-  };
-
   return (
-    <ViewWrapper
+    <>
-      hideFooter
+      <Job_ScreenBeranda2 />
-      floatingButton={
+    </>
-        <FloatingButton onPress={() => router.push("/job/create")} />
-      }
-      headerComponent={
-        <SearchInput placeholder="Cari pekerjaan" onChangeText={handleSearch} />
-      }
-    >
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada lowongan</TextCustom>
-      ) : (
-        listData.map((item, index) => (
-          <BoxWithHeaderSection
-            key={index}
-            onPress={() => router.push(`/job/${item.id}`)}
-          >
-            <StackCustom>
-              <AvatarUsernameAndOtherComponent
-                avatar={item?.Author?.Profile?.imageId}
-                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
-                name={item?.Author?.username}
-              />
-
-              <TextCustom truncate={2} align="center" bold size="large">
-                {item?.title || "-"}
-              </TextCustom>
-            </StackCustom>
-            <Spacing />
-          </BoxWithHeaderSection>
-        ))
-      )}
-      <Spacing />
-    </ViewWrapper>
   );
 }

app/(application)/(user)/job/(tabs)/status.tsx

@@ -1,91 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
+import Job_MainViewStatus from "@/screens/Job/MainViewStatus";
-  BaseBox,
+import Job_MainViewStatus2 from "@/screens/Job/MainViewStatus2";
-  LoaderCustom,
-  ScrollableCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { apiJobGetByStatus } from "@/service/api-client/api-job";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function JobStatus() {
-  const { user } = useAuth();
-  const { status } = useLocalSearchParams<{ status?: string }>();
-  console.log("STATUS", status);
-
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
-  );
-  const [listData, setListData] = useState<any[]>([]);
-  const [isLoadList, setIsLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id, activeCategory])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadList(true);
-      const response = await apiJobGetByStatus({
-        authorId: user?.id as string,
-        status: activeCategory as string,
-      });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadList(false);
-    }
-  };
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const scrollComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
-
   return (
     <>
-      <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {/* <Job_MainViewStatus />  */}
-        {isLoadList ? (
+      <Job_MainViewStatus2 />
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center">
-            Tidak ada data {activeCategory}
-          </TextCustom>
-        ) : (
-          listData.map((e, i) => (
-            <BaseBox
-              key={i}
-              paddingTop={20}
-              paddingBottom={20}
-              href={`/job/${e?.id}/${activeCategory}/detail`}
-            >
-              <TextCustom align="center" bold truncate size="large">
-                {e?.title}
-              </TextCustom>
-            </BaseBox>
-          ))
-        )}
-      </ViewWrapper>
     </>
   );
 }

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

@@ -1,13 +1,14 @@
 import {
+  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
-  TextInputCustom,
+  TextInputCustom
-  ViewWrapper
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
@@ -99,16 +100,17 @@ export default function JobCreate() {
   const buttonSubmit = () => {
     return (
       <>
-        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
+        <BoxButtonOnFooter>
-          Simpan
+          <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
-        </ButtonCustom>
+            Simpan
-        <Spacing />
+          </ButtonCustom>
+        </BoxButtonOnFooter>
       </>
     );
   };
 
   return (
-    <ViewWrapper>
+    <NewWrapper footerComponent={buttonSubmit()}>
       <StackCustom gap={"xs"}>
         <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
@@ -160,9 +162,7 @@ export default function JobCreate() {
           value={data.deskripsi}
           onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
-
-        {buttonSubmit()}
       </StackCustom>
-    </ViewWrapper>
+    </NewWrapper>
   );
 }

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

@@ -1,248 +1,11 @@
-/* eslint-disable react-hooks/exhaustive-deps */
+import ScreenNotification from "@/screens/Notification/ScreenNotification_V2";
-import {
+import ScreenNotification_V1 from "@/screens/Notification/ScreenNotification_V1";
-  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";
 
-const selectedCategory = (value: string) => {
+export default function Notification() {
-  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
+      <ScreenNotification />
-        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
+      {/* <ScreenNotification_V1 /> */}
-        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>
     </>
   );
 }

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>
+        <NewWrapper>
-          <ActivityIndicator size="large" color={MainColor.yellow} />
+          <ListSkeletonComponent height={80} />
-        </ViewWrapper>
+        </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 ViewListPortofolio from "@/screens/Portofolio/ViewListPortofolio";
-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";
 
 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) => (
+      <ViewListPortofolio />
-        <Portofolio_BoxView key={index} data={item} />
+    </>
-      )) : <TextCustom>Tidak ada portofolio</TextCustom>}
-    </ViewWrapper>
   );
 }

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

@@ -1,115 +1,11 @@
-import {
+import UserSearchMainView from "@/screens/UserSeach/MainView";
-  AvatarComp,
+import UserSearchMainView_V2 from "@/screens/UserSeach/MainView_V2";
-  ClickableCustom,
-  Grid,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  TextInputCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { apiAllUser } from "@/service/api-client/api-user";
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import _ from "lodash";
-import { useEffect, useState } from "react";
 
 export default function UserSearch() {
-  const [data, setData] = useState<any[]>([]);
-  const [search, setSearch] = useState<string>("");
-  const [isLoadList, setIsLoadList] = useState(false);
-
-  useEffect(() => {
-    onLoadData(search);
-  }, [search]);
-
-  const onLoadData = async (search: string) => {
-    try {
-      setIsLoadList(true);
-      const response = await apiAllUser({ search: search });
-      console.log("[DATA USER] >", JSON.stringify(response.data, null, 2));
-      setData(response.data);
-    } catch (error) {
-      console.log("Error fetching data", error);
-    } finally {
-      setIsLoadList(false);
-    }
-  };
-
-  const handleSearch = (search: string) => {
-    setSearch(search);
-    onLoadData(search);
-  };
-
   return (
     <>
-      <ViewWrapper
+      {/* <UserSearchMainView /> */}
-        headerComponent={
+      <UserSearchMainView_V2 />
-          <TextInputCustom
-            value={search}
-            onChangeText={handleSearch}
-            iconLeft={
-              <Ionicons
-                name="search"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.placeholder}
-              />
-            }
-            placeholder="Cari Pengguna"
-            borderRadius={50}
-            containerStyle={{ marginBottom: 0 }}
-          />
-        }
-      >
-        <StackCustom>
-          {isLoadList ? (
-            <LoaderCustom />
-          ) : !_.isEmpty(data) ? (
-            data?.map((e, index) => {
-              return (
-                <ClickableCustom
-                  key={index}
-                  onPress={() => {
-                    console.log("Ke Profile");
-                    router.push(`/profile/${e?.Profile?.id}`);
-                  }}
-                >
-                  <Grid>
-                    <Grid.Col span={2}>
-                      <AvatarComp fileId={e?.Profile?.imageId} size="base" />
-                    </Grid.Col>
-                    <Grid.Col span={9}>
-                      <StackCustom gap={"sm"}>
-                        <TextCustom size="large">{e?.username}</TextCustom>
-                        <TextCustom size="small">+{e?.nomor}</TextCustom>
-                      </StackCustom>
-                    </Grid.Col>
-                    <Grid.Col
-                      span={1}
-                      style={{
-                        justifyContent: "center",
-                        alignItems: "flex-end",
-                      }}
-                    >
-                      <Ionicons
-                        name="chevron-forward"
-                        size={ICON_SIZE_SMALL}
-                        color={MainColor.white}
-                      />
-                    </Grid.Col>
-                  </Grid>
-                </ClickableCustom>
-              );
-            })
-          ) : (
-            <TextCustom align="center">Tidak ditemukan</TextCustom>
-          )}
-        </StackCustom>
-        <Spacing height={50} />
-      </ViewWrapper>
     </>
   );
 }

app/(application)/admin/donation/[id]/disbursement-of-funds.tsx

@@ -14,7 +14,11 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import DIRECTORY_ID from "@/constants/directory-id";
-import { apiAdminDonationDetailById, apiAdminDonationDisbursementOfFundsCreated } from "@/service/api-admin/api-admin-donation";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiAdminDonationDetailById,
+  apiAdminDonationDisbursementOfFundsCreated,
+} from "@/service/api-admin/api-admin-donation";
 import { uploadFileService } from "@/service/upload-service";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import pickFile from "@/utils/pickFile";
@@ -25,7 +29,7 @@ import Toast from "react-native-toast-message";
 
 export default function AdminDonationDisbursementOfFunds() {
   const { id } = useLocalSearchParams();
-
+  const { user } = useAuth();
   const [data, setData] = React.useState<any | null>(null);
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -40,7 +44,7 @@ export default function AdminDonationDisbursementOfFunds() {
   useFocusEffect(
     React.useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -94,6 +98,7 @@ export default function AdminDonationDisbursementOfFunds() {
 
       const newData = {
         ...value,
+        authorId: user?.id,
         imageId: imageId,
       };
 

app/(application)/admin/notification/index.tsx

@@ -1,213 +1,10 @@
-import {
+import Admin_ScreenNotification from "@/screens/Admin/Notification-Admin/ScreenNotificationAdmin";
-  AlertDefaultSystem,
+import Admin_ScreenNotification2 from "@/screens/Admin/Notification-Admin/ScreenNotificationAdmin2";
-  BackButton,
-  BaseBox,
-  DrawerCustom,
-  MenuDrawerDynamicGrid,
-  NewWrapper,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import { IconPlus } from "@/components/_Icon";
-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 } 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 BoxNotification = ({
-  data,
-  activeCategory,
-}: {
-  data: any;
-  activeCategory: string | null;
-}) => {
-  const { markAsRead } = useNotificationStore();
-  return (
-    <>
-      <BaseBox
-        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
-        onPress={() => {
-          console.log(
-            "Notification >",
-            selectedCategory(activeCategory as string)
-          );
-          router.push(data.deepLink);
-          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 AdminNotification() {
-  const { user } = useAuth();
-  const [activeCategory, setActiveCategory] = useState<string | null>("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
+      <Admin_ScreenNotification2 />
-        options={{
-          title: "Admin 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>
     </>
   );
 }

app/(application)/admin/user-access/[id]/index.tsx

@@ -10,14 +10,10 @@ import {
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { useAuth } from "@/hooks/use-auth";
-import { routeUser } from "@/lib/routeApp";
 import {
   apiAdminUserAccessGetById,
   apiAdminUserAccessUpdateStatus,
 } from "@/service/api-admin/api-admin-user-access";
-import {
-  apiNotificationsSendById
-} from "@/service/api-notifications";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
@@ -70,20 +66,6 @@ export default function AdminUserAccessDetail() {
         text1: "Update aktifasi berhasil ",
       });
 
-      if (data.active === false) {
-        await apiNotificationsSendById({
-          data: {
-            title: "Akun anda telah diaktifkan",
-            body: "Selamat menjelajahi HIConnect",
-            userLoginId: user?.id || "",
-            kategoriApp: "OTHER",
-            type: "announcement",
-            deepLink: routeUser.home,
-          },
-          id: id as string,
-        });
-      }
-
       router.back();
     } catch (error) {
       console.log("[ERROR UPDATE STATUS]", error);

app/+not-found.tsx

@@ -5,7 +5,7 @@ export default function NotFoundScreen() {
   return (
     <>
       <Stack.Screen
-        options={{ headerShown: false, headerLeft: () => <BackButton /> }}
+        options={{ headerShown: true, title: "", headerLeft: () => <BackButton /> }}
       />
       <ViewWrapper>
         <StackCustom
@@ -17,7 +17,7 @@ export default function NotFoundScreen() {
             404
           </TextCustom>
           <TextCustom size="large" bold>
-            Sorry, File Not Found
+            Sorry, Page Not Found
           </TextCustom>
         </StackCustom>
       </ViewWrapper>

components/Image/AvatarComp.tsx

@@ -30,7 +30,6 @@ export default function AvatarComp({
   href = `/(application)/(image)/preview-image/${fileId}`,
 }: AvatarCompProps) {
   const dimension = sizeMap[size];
-
   const avatarImage = () => {
     return (
       <Avatar.Image
@@ -52,8 +51,9 @@ export default function AvatarComp({
         <TouchableOpacity
           activeOpacity={0.9}
           onPress={
-            href && fileId ? () => router.navigate(href as any) : onPress
+            href || fileId ? () => router.navigate(href as any) : onPress
           }
+          disabled={!fileId}
         >
           {avatarImage()}
         </TouchableOpacity>

constants/constans-value.ts

@@ -19,11 +19,12 @@ export {
   PADDING_SMALL,
   PADDING_MEDIUM,
   PADDING_LARGE,
+  PAGINATION_DEFAULT_TAKE
 };
 
 // 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
@@ -51,3 +52,5 @@ const PADDING_SMALL = 12
 const PADDING_MEDIUM = 16
 const PADDING_LARGE = 20
 
+// Pagination
+const PAGINATION_DEFAULT_TAKE = 10;

context/AuthContext.tsx

@@ -30,7 +30,10 @@ type AuthContextType = {
     termsOfServiceAccepted: boolean;
   }) => Promise<void>;
   userData: (token: string) => Promise<any>;
-  acceptedTerms: (nomor: string, onSetModalVisible: (visible: boolean) => void) => Promise<any>;
+  acceptedTerms: (
+    nomor: string,
+    onSetModalVisible: (visible: boolean) => void,
+  ) => Promise<any>;
 };
 
 // --- Create Context ---
@@ -80,34 +83,12 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       console.log("[RESPONSE AUTH]", JSON.stringify(response, null, 2));
 
       if (response.success && response.isAcceptTerms) {
-       
         await AsyncStorage.setItem("kode_otp", response.kodeId);
         router.push(`/verification?nomor=${nomor}`);
         return true;
       } else {
-        // router.push(`/eula?nomor=${nomor}`);
         return false;
       }
-
-      // if (response.success) {
-      //   if (response.isAcceptTerms) {
-      //     Toast.show({
-      //       type: "success",
-      //       text1: "Sukses",
-      //       text2: "Kode OTP berhasil dikirim",
-      //     });
-
-      //     await AsyncStorage.setItem("kode_otp", response.kodeId);
-      //     router.push(`/verification?nomor=${nomor}`);
-      //     return false
-      //   } else {
-      //     // router.push(`/eula?nomor=${nomor}`);
-      //     return true
-      //   }
-      // } else {
-      //   router.push(`/eula?nomor=${nomor}`);
-      //   return true;
-      // }
     } catch (error: any) {
       throw new Error(error.response?.data?.message || "Gagal kirim OTP");
     } finally {
@@ -266,29 +247,24 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
   // --- 6. Accept Terms ---
-  const acceptedTerms = async (nomor: string, onSetModalVisible: (visible: boolean) => void) => {
+  const acceptedTerms = async (
+    nomor: string,
+    onSetModalVisible: (visible: boolean) => void,
+  ) => {
     try {
       setIsLoading(true);
       const response = await apiUpdatedTermCondition({ nomor: nomor });
 
       if (response.success) {
-        router.replace(`/verification?nomor=${nomor}`);
+        return `/verification?nomor=${nomor}`;
       } else {
-        if (response.status === 404) {
+        return `/register?nomor=${nomor}`;
-          router.replace(`/register?nomor=${nomor}`);
-        } else {
-          Toast.show({
-            type: "error",
-            text1: "Error",
-            text2: response.message,
-          });
-        }
       }
     } catch (error) {
       console.log("Error accept terms", error);
     } finally {
       setIsLoading(false);
-      // onSetModalVisible(false);
+      onSetModalVisible(false);
     }
   };
 

docs/prompt-for-qwen-code.md

@@ -0,0 +1,25 @@
+<!-- Start Penerapan Pagination -->
+
+File utama: screens/Event/ScreenHistory.tsx
+Fun fecth: apiEventGetAll
+File fetch: service/api-client/api-event.ts
+File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
+File refrensi: screens/Job/MainViewStatus2.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"
+
+Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama
+
+Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
+
+<!-- End Penerapan Pagination -->
+
+<!-- Start Penerapan NewWrapper -->
+Terapkan NewWrapper pada file: screens/Forum/DetailForum.tsx
+Component yang digunakan: components/_ShareComponent/NewWrapper.tsx , karena ini adalah halaman detail saya ingin anda fokus pada props pada NewWrapper. Seperti 

helpers/PaginationGuide.md

@@ -0,0 +1,517 @@
+# 📱 Reusable Pagination untuk React Native + Expo
+
+Komponen pagination yang terintegrasi dengan **NewWrapper** untuk infinite scroll, pull-to-refresh, skeleton loading, dan empty state.
+
+---
+
+## 📦 File Structure
+
+```
+/hooks/
+  └── usePagination.tsx          # Custom hook untuk logika pagination
+
+/helpers/
+  └── paginationHelpers.tsx      # Helper functions untuk komponen UI
+
+/components/
+  └── NewWrapper.tsx             # Komponen wrapper utama (existing)
+```
+
+---
+
+## 🚀 Cara Penggunaan
+
+### **Step 1: Import Hook dan Helpers**
+
+```tsx
+import { usePagination } from "@/hooks/usePagination";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+```
+
+### **Step 2: Setup Pagination Hook**
+
+```tsx
+const pagination = usePagination({
+  // ✅ Fungsi untuk fetch data (harus return { data: T[] })
+  fetchFunction: async (page, searchQuery) => {
+    return await apiForumGetAll({
+      category: "beranda",
+      search: searchQuery || "",
+      userLoginId: user.id,
+      page: String(page),
+    });
+  },
+  
+  // ✅ Page size (harus sama dengan API)
+  pageSize: 5,
+  
+  // ✅ Query pencarian
+  searchQuery: search,
+  
+  // ✅ Dependencies (reload saat berubah)
+  dependencies: [user?.id, category],
+  
+  // ⚙️ Optional callbacks
+  onDataFetched: (data) => console.log("Loaded:", data.length),
+  onError: (error) => console.error("Error:", error),
+});
+```
+
+### **Step 3: Generate Komponen Pagination**
+
+```tsx
+const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+  loading: pagination.loading,
+  refreshing: pagination.refreshing,
+  listData: pagination.listData,
+  searchQuery: search,
+  emptyMessage: "Tidak ada data",
+  emptySearchMessage: "Tidak ada hasil pencarian",
+  skeletonCount: 5,
+  skeletonHeight: 200,
+});
+```
+
+### **Step 4: Gunakan dengan NewWrapper**
+
+```tsx
+<NewWrapper
+  // Props dari pagination hook
+  listData={pagination.listData}
+  refreshControl={
+    <RefreshControl
+      refreshing={pagination.refreshing}
+      onRefresh={pagination.onRefresh}
+    />
+  }
+  onEndReached={pagination.loadMore}
+  
+  // Komponen dari helpers
+  ListEmptyComponent={ListEmptyComponent}
+  ListFooterComponent={ListFooterComponent}
+  
+  // Render item
+  renderItem={({ item }) => <YourComponent data={item} />}
+  
+  // Props lain dari NewWrapper
+  headerComponent={<SearchInput />}
+  floatingButton={<FloatingButton />}
+/>
+```
+
+---
+
+## 📖 Contoh Implementasi Lengkap
+
+### **Contoh 1: Forum Page (Basic)**
+
+```tsx
+import { usePagination } from "@/hooks/usePagination";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+
+export default function ForumPage() {
+  const { user } = useAuth();
+  const [search, setSearch] = useState("");
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page, searchQuery) => {
+      if (!user?.id) return { data: [] };
+      
+      return await apiForumGetAll({
+        category: "beranda",
+        search: searchQuery || "",
+        userLoginId: user.id,
+        page: String(page),
+      });
+    },
+    pageSize: 5,
+    searchQuery: search,
+    dependencies: [user?.id],
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    searchQuery: search,
+    emptyMessage: "Tidak ada diskusi",
+    emptySearchMessage: "Tidak ada hasil pencarian",
+  });
+
+  return (
+    <NewWrapper
+      headerComponent={
+        <SearchInput
+          placeholder="Cari diskusi..."
+          onChangeText={_.debounce(setSearch, 500)}
+        />
+      }
+      listData={pagination.listData}
+      renderItem={({ item }) => <ForumItem data={item} />}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+    />
+  );
+}
+```
+
+### **Contoh 2: Product Page (Dengan Filter)**
+
+```tsx
+export default function ProductPage() {
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState("all");
+
+  const pagination = usePagination({
+    fetchFunction: async (page, searchQuery) => {
+      return await apiProductGetAll({
+        page: String(page),
+        search: searchQuery || "",
+        category: category !== "all" ? category : undefined,
+      });
+    },
+    pageSize: 10,
+    searchQuery: search,
+    dependencies: [category], // Reload saat category berubah
+  });
+
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    searchQuery: search,
+    emptyMessage: "Belum ada produk",
+    skeletonCount: 8,
+    skeletonHeight: 100,
+  });
+
+  return (
+    <NewWrapper
+      headerComponent={
+        <View>
+          <SearchInput onChangeText={setSearch} />
+          <CategoryFilter value={category} onChange={setCategory} />
+        </View>
+      }
+      listData={pagination.listData}
+      renderItem={({ item }) => <ProductCard product={item} />}
+      refreshControl={
+        <RefreshControl
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+    />
+  );
+}
+```
+
+---
+
+## ⚙️ API Reference
+
+### **usePagination Hook**
+
+#### Props
+
+| Prop | Type | Required | Default | Deskripsi |
+|------|------|----------|---------|-----------|
+| `fetchFunction` | `(page, search?) => Promise<{data: T[]}>` | ✅ | - | Fungsi fetch data dari API |
+| `pageSize` | `number` | ❌ | `5` | Jumlah data per halaman |
+| `searchQuery` | `string` | ❌ | `""` | Query pencarian |
+| `dependencies` | `any[]` | ❌ | `[]` | Dependencies untuk trigger reload |
+| `onDataFetched` | `(data: T[]) => void` | ❌ | - | Callback saat data berhasil di-fetch |
+| `onError` | `(error: any) => void` | ❌ | - | Callback saat terjadi error |
+
+#### Return Value
+
+```tsx
+{
+  listData: T[];              // Array data untuk NewWrapper
+  loading: boolean;           // Loading state
+  refreshing: boolean;        // Refreshing state
+  hasMore: boolean;           // Apakah masih ada data
+  page: number;               // Current page
+  onRefresh: () => void;      // Function untuk refresh
+  loadMore: () => void;       // Function untuk load more
+  reset: () => void;          // Function untuk reset state
+  setListData: (data) => void; // Function untuk set data manual
+}
+```
+
+---
+
+### **createPaginationComponents Helper**
+
+#### Props
+
+| Prop | Type | Required | Default | Deskripsi |
+|------|------|----------|---------|-----------|
+| `loading` | `boolean` | ✅ | - | Loading state |
+| `refreshing` | `boolean` | ✅ | - | Refreshing state |
+| `listData` | `any[]` | ✅ | - | List data |
+| `searchQuery` | `string` | ❌ | `""` | Query pencarian |
+| `emptyMessage` | `string` | ❌ | `"Tidak ada data"` | Pesan empty state |
+| `emptySearchMessage` | `string` | ❌ | `"Tidak ada hasil pencarian"` | Pesan empty saat search |
+| `skeletonCount` | `number` | ❌ | `5` | Jumlah skeleton items |
+| `skeletonHeight` | `number` | ❌ | `200` | Tinggi skeleton items |
+| `loadingFooterText` | `string` | ❌ | - | Text loading footer |
+
+#### Return Value
+
+```tsx
+{
+  ListEmptyComponent: React.ReactElement;  // Component untuk empty state
+  ListFooterComponent: React.ReactElement; // Component untuk loading footer
+}
+```
+
+---
+
+### **Helper Functions Lain**
+
+#### `createSkeletonList(options)`
+Generate skeleton list untuk loading state.
+
+```tsx
+const SkeletonComponent = createSkeletonList({
+  count: 5,
+  height: 200
+});
+```
+
+#### `createEmptyState(options)`
+Generate empty state component.
+
+```tsx
+const EmptyComponent = createEmptyState({
+  message: "Tidak ada data",
+  searchMessage: "Tidak ada hasil pencarian",
+  searchQuery: search
+});
+```
+
+#### `createLoadingFooter(options)`
+Generate loading footer component.
+
+```tsx
+const FooterComponent = createLoadingFooter({
+  show: loading && listData.length > 0,
+  text: "Memuat data..."
+});
+```
+
+---
+
+## 🎨 Custom Components
+
+### **Custom Empty State**
+
+```tsx
+import { createSkeletonList } from "@/helpers/paginationHelpers";
+
+const CustomEmpty = (
+  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <Text>🔍</Text>
+    <TextCustom>Data tidak ditemukan</TextCustom>
+  </View>
+);
+
+const ListEmptyComponent = 
+  pagination.loading && pagination.listData.length === 0
+    ? createSkeletonList({ count: 5, height: 200 })
+    : CustomEmpty;
+
+<NewWrapper
+  ListEmptyComponent={ListEmptyComponent}
+  // ...
+/>
+```
+
+### **Custom Loading Footer**
+
+```tsx
+import { createLoadingFooter } from "@/helpers/paginationHelpers";
+
+const CustomFooter = createLoadingFooter({
+  show: pagination.loading && !pagination.refreshing && pagination.listData.length > 0,
+  customComponent: (
+    <View style={{ padding: 20, alignItems: "center" }}>
+      <ActivityIndicator size="large" color="#007AFF" />
+      <Text style={{ marginTop: 8 }}>Loading more...</Text>
+    </View>
+  )
+});
+
+<NewWrapper
+  ListFooterComponent={CustomFooter}
+  // ...
+/>
+```
+
+---
+
+## ✨ Fitur-Fitur
+
+✅ **Infinite Scroll** - Auto load saat scroll ke bawah  
+✅ **Pull to Refresh** - Swipe down untuk refresh  
+✅ **Skeleton Loading** - Smooth loading animation  
+✅ **Empty State** - Tampilan saat data kosong  
+✅ **Search Integration** - Support search dengan debounce  
+✅ **Multi Dependencies** - Reload berdasarkan filter apapun  
+✅ **Error Handling** - Built-in error handling  
+✅ **TypeScript** - Full type safety  
+✅ **Fully Customizable** - Custom components untuk semua state  
+
+---
+
+## 🎯 Best Practices
+
+### 1. **Gunakan Debounce untuk Search**
+```tsx
+<SearchInput
+  onChangeText={_.debounce((text) => setSearch(text), 500)}
+/>
+```
+
+### 2. **Sesuaikan Page Size dengan API**
+```tsx
+const pagination = usePagination({
+  pageSize: 5, // Harus sama dengan takeData di API
+});
+```
+
+### 3. **Tambahkan Dependencies yang Relevan**
+```tsx
+const pagination = usePagination({
+  dependencies: [userId, category, sortBy], // Reload saat berubah
+});
+```
+
+### 4. **Handle Error dengan Baik**
+```tsx
+const pagination = usePagination({
+  onError: (error) => {
+    console.error("Error:", error);
+    Alert.alert("Error", "Gagal memuat data");
+  },
+});
+```
+
+### 5. **Pastikan API Return Format yang Benar**
+```tsx
+// ❌ SALAH
+fetchFunction: async () => [data1, data2];
+
+// ✅ BENAR
+fetchFunction: async () => ({ data: [data1, data2] });
+```
+
+---
+
+## 🔧 Troubleshooting
+
+### **Data tidak muncul?**
+- Pastikan `fetchFunction` return `{ data: T[] }`
+- Cek apakah API return format yang benar
+- Pastikan `pageSize` sesuai dengan API
+
+### **Infinite scroll tidak jalan?**
+- Pastikan API return data sesuai `pageSize`
+- Cek `hasMore` state
+- Pastikan `onEndReachedThreshold` tidak terlalu kecil (default 0.5)
+
+### **Skeleton terus muncul?**
+- Cek `loading` state
+- Pastikan `fetchFunction` resolve dengan benar
+- Cek error di console
+
+### **Refresh tidak bekerja?**
+- Pastikan `RefreshControl` menggunakan `pagination.refreshing` dan `pagination.onRefresh`
+- Cek apakah API dipanggil saat pull-to-refresh
+
+---
+
+## 📝 Migration Guide
+
+### **Dari Code Lama ke Code Baru**
+
+#### **BEFORE:**
+```tsx
+const [listData, setListData] = useState([]);
+const [loading, setLoading] = useState(false);
+const [refreshing, setRefreshing] = useState(false);
+const [hasMore, setHasMore] = useState(true);
+const [page, setPage] = useState(1);
+
+const fetchData = async (pageNumber, clear) => {
+  // ... 30+ lines of code
+};
+
+useEffect(() => {
+  setPage(1);
+  setListData([]);
+  setHasMore(true);
+  fetchData(1, true);
+}, [search, user?.id]);
+
+const onRefresh = useCallback(() => {
+  fetchData(1, true);
+}, [search, user?.id]);
+
+const loadMore = useCallback(() => {
+  if (hasMore && !loading && !refreshing) {
+    fetchData(page + 1, false);
+  }
+}, [hasMore, loading, refreshing, page, search, user?.id]);
+
+// ... skeleton, empty, footer components
+```
+
+#### **AFTER:**
+```tsx
+const pagination = usePagination({
+  fetchFunction: async (page, search) => await apiGetData({ page, search }),
+  pageSize: 5,
+  searchQuery: search,
+  dependencies: [user?.id]
+});
+
+const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+  loading: pagination.loading,
+  refreshing: pagination.refreshing,
+  listData: pagination.listData,
+  searchQuery: search,
+});
+```
+
+**Result:** 50+ lines → 15 lines! 🎉
+
+---
+
+## 👨‍💻 Author
+
+Created by Full-Stack Developer  
+React Native + Expo Specialist
+
+---
+
+## 📄 License
+
+MIT License - Feel free to use in your projects!

helpers/paginationHelpers.tsx

@@ -0,0 +1,280 @@
+import { View } from "react-native";
+import { LoaderCustom, TextCustom, StackCustom } from "@/components";
+import SkeletonCustom from "@/components/_ShareComponent/SkeletonCustom";
+import _ from "lodash";
+
+/**
+ * Pagination Helpers
+ * 
+ * Helper functions untuk membuat komponen-komponen pagination
+ * yang sering digunakan (Skeleton, Empty State, Loading Footer)
+ */
+
+interface SkeletonListOptions {
+  /**
+   * Jumlah skeleton items
+   * @default 5
+   */
+  count?: number;
+  
+  /**
+   * Tinggi setiap skeleton item
+   * @default 200
+   */
+  height?: number;
+}
+
+/**
+ * Generate Skeleton List Component untuk loading state
+ * 
+ * @example
+ * ```tsx
+ * <NewWrapper
+ *   listData={listData}
+ *   ListEmptyComponent={
+ *     loading && _.isEmpty(listData) 
+ *       ? createSkeletonList({ count: 5, height: 200 })
+ *       : createEmptyState({ message: "Tidak ada data" })
+ *   }
+ * />
+ * ```
+ */
+export const createSkeletonList = (options: SkeletonListOptions = {}) => {
+  const { count = 5, height = 200 } = options;
+  
+  return (
+    <View style={{ flex: 1 }}>
+      <StackCustom>
+        {Array.from({ length: count }).map((_, i) => (
+          <SkeletonCustom height={height} key={i} />
+        ))}
+      </StackCustom>
+    </View>
+  );
+};
+
+interface EmptyStateOptions {
+  /**
+   * Pesan untuk empty state
+   * @default "Tidak ada data"
+   */
+  message?: string;
+  
+  /**
+   * Pesan untuk empty state saat search
+   */
+  searchMessage?: string;
+  
+  /**
+   * Query pencarian (untuk menentukan pesan mana yang ditampilkan)
+   */
+  searchQuery?: string;
+  
+  /**
+   * Custom component untuk empty state
+   */
+  customComponent?: React.ReactElement;
+}
+
+/**
+ * Generate Empty State Component
+ * 
+ * @example
+ * ```tsx
+ * ListEmptyComponent={
+ *   createEmptyState({
+ *     message: "Tidak ada diskusi",
+ *     searchMessage: "Tidak ada hasil pencarian",
+ *     searchQuery: search
+ *   })
+ * }
+ * ```
+ */
+export const createEmptyState = (options: EmptyStateOptions = {}) => {
+  const {
+    message = "Tidak ada data",
+    searchMessage = "Tidak ada hasil pencarian",
+    searchQuery = "",
+    customComponent,
+  } = options;
+  
+  if (customComponent) return customComponent;
+  
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+      }}
+    >
+      <TextCustom align="center" color="gray">
+        {searchQuery ? searchMessage : message}
+      </TextCustom>
+    </View>
+  );
+};
+
+interface LoadingFooterOptions {
+  /**
+   * Tampilkan loading footer
+   */
+  show: boolean;
+  
+  /**
+   * Custom text untuk loading footer
+   */
+  text?: string;
+  
+  /**
+   * Custom component untuk loading footer
+   */
+  customComponent?: React.ReactElement;
+}
+
+/**
+ * Generate Loading Footer Component
+ * 
+ * @example
+ * ```tsx
+ * ListFooterComponent={
+ *   createLoadingFooter({
+ *     show: loading && !refreshing && listData.length > 0,
+ *     text: "Memuat data..."
+ *   })
+ * }
+ * ```
+ */
+export const createLoadingFooter = (options: LoadingFooterOptions) => {
+  const { show, text, customComponent } = options;
+  
+  if (!show) return null;
+  
+  if (customComponent) return customComponent;
+  
+  return (
+    <View style={{ paddingVertical: 16, alignItems: "center" }}>
+      {text ? (
+        <TextCustom color="gray">
+          {text}
+        </TextCustom>
+      ) : (
+        <LoaderCustom />
+      )}
+    </View>
+  );
+};
+
+interface PaginationComponentsOptions {
+  /**
+   * Loading state
+   */
+  loading: boolean;
+  
+  /**
+   * Refreshing state
+   */
+  refreshing: boolean;
+  
+  /**
+   * List data
+   */
+  listData: any[];
+  
+  /**
+   * Query pencarian
+   */
+  searchQuery?: string;
+  
+  /**
+   * Pesan empty state
+   */
+  emptyMessage?: string;
+  
+  /**
+   * Pesan empty state saat search
+   */
+  emptySearchMessage?: string;
+  
+  /**
+   * Jumlah skeleton items
+   */
+  skeletonCount?: number;
+  
+  /**
+   * Tinggi skeleton items
+   */
+  skeletonHeight?: number;
+  
+  /**
+   * Text loading footer
+   */
+  loadingFooterText?: string;
+  
+  /**
+   * Loading pertama
+   */
+  isInitialLoad?: boolean;
+}
+
+/**
+ * Generate semua komponen pagination sekaligus
+ * 
+ * @example
+ * ```tsx
+ * const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+ *   loading,
+ *   refreshing,
+ *   listData,
+ *   searchQuery: search,
+ *   emptyMessage: "Tidak ada diskusi",
+ *   emptySearchMessage: "Tidak ada hasil pencarian",
+ *   skeletonCount: 5,
+ *   skeletonHeight: 200
+ * });
+ * 
+ * <NewWrapper
+ *   listData={listData}
+ *   ListEmptyComponent={ListEmptyComponent}
+ *   ListFooterComponent={ListFooterComponent}
+ * />
+ * ```
+ */
+export const createPaginationComponents = (
+  options: PaginationComponentsOptions
+) => {
+  const {
+    loading,
+    refreshing,
+    listData,
+    searchQuery = "",
+    emptyMessage = "Tidak ada data",
+    emptySearchMessage = "Tidak ada hasil pencarian",
+    skeletonCount = 5,
+    skeletonHeight = 200,
+    loadingFooterText,
+    isInitialLoad,
+  } = options;
+
+  // Empty Compotnent: Skeleton saat loading pertama, Empty State saat data kosong
+  const ListEmptyComponent =
+    loading && _.isEmpty(listData)
+      ? createSkeletonList({ count: skeletonCount, height: skeletonHeight })
+      : createEmptyState({
+          message: emptyMessage,
+          searchMessage: emptySearchMessage,
+          searchQuery,
+        });
+
+  // Footer Component: Loading indicator saat load more
+  const ListFooterComponent = createLoadingFooter({
+    show: loading && !refreshing && listData.length > 0,
+    text: loadingFooterText,
+  });
+
+  return {
+    ListEmptyComponent,
+    ListFooterComponent,
+  };
+};

hooks/use-pagination.tsx

@@ -0,0 +1,184 @@
+import { useState, useCallback, useEffect } from "react";
+
+interface UsePaginationProps<T> {
+  /**
+   * Fungsi API untuk fetch data
+   * @param page - nomor halaman
+   * @param search - query pencarian (opsional)
+   * @returns Promise dengan response API (bukan langsung array)
+   */
+  fetchFunction: (page: number, search?: string) => Promise<{ data: T[] }>;
+
+  /**
+   * Jumlah data per halaman (harus sama dengan API)
+   * @default 5
+   */
+  pageSize?: number;
+
+  /**
+   * Query pencarian
+   */
+  searchQuery?: string;
+
+  /**
+   * Dependencies tambahan untuk trigger reload
+   * Contoh: [userId, categoryId]
+   */
+  dependencies?: any[];
+
+  /**
+   * Callback saat data berhasil di-fetch
+   */
+  onDataFetched?: (data: T[]) => void;
+
+  /**
+   * Callback saat terjadi error
+   */
+  onError?: (error: any) => void;
+}
+
+interface UsePaginationReturn<T> {
+  // Data state
+  listData: T[];
+  loading: boolean;
+  refreshing: boolean;
+  hasMore: boolean;
+  page: number;
+
+  // Actions
+  onRefresh: () => void;
+  loadMore: () => void;
+  reset: () => void;
+  setListData: React.Dispatch<React.SetStateAction<T[]>>;
+  isInitialLoad: boolean;
+}
+
+/**
+ * Custom Hook untuk menangani pagination dengan infinite scroll
+ *
+ * Hook ini mengembalikan props yang siap digunakan langsung dengan NewWrapper
+ *
+ * @example
+ * ```tsx
+ * const pagination = usePagination({
+ *   fetchFunction: async (page, search) => {
+ *     return await apiForumGetAll({
+ *       category: "beranda",
+ *       search: search || "",
+ *       userLoginId: user.id,
+ *       page: String(page),
+ *     });
+ *   },
+ *   pageSize: 5,
+ *   searchQuery: search,
+ *   dependencies: [user?.id]
+ * });
+ *
+ * // Lalu gunakan langsung di NewWrapper:
+ * <NewWrapper
+ *   listData={pagination.listData}
+ *   refreshControl={<RefreshControl refreshing={pagination.refreshing} onRefresh={pagination.onRefresh} />}
+ *   onEndReached={pagination.loadMore}
+ *   // ... props lainnya
+ * />
+ * ```
+ */
+export function usePagination<T = any>({
+  fetchFunction,
+  pageSize = 5,
+  searchQuery = "",
+  dependencies = [],
+  onDataFetched,
+  onError,
+}: UsePaginationProps<T>): UsePaginationReturn<T> {
+  const [listData, setListData] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true); // Set true untuk initial load
+  const [isInitialLoad, setIsInitialLoad] = useState(true); // Track initial load
+  const [refreshing, setRefreshing] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(1);
+
+  /**
+   * Fungsi utama untuk fetch data
+   */
+  const fetchData = async (pageNumber: number, clear: boolean) => {
+    // Cegah multiple call
+    if (!clear && (loading || refreshing)) return;
+
+    const isRefresh = clear;
+    if (isRefresh) setRefreshing(true);
+    if (!isRefresh) setLoading(true);
+
+    try {
+      const response = await fetchFunction(pageNumber, searchQuery);
+      const newData = response.data || [];
+      //   console.log("newData", newData);
+      setListData((prev) => {
+        const current = Array.isArray(prev) ? prev : [];
+        return clear ? newData : [...current, ...newData];
+      });
+      //   setTimeout(() => {
+      //   }, 4000);
+
+      setHasMore(newData.length === pageSize);
+      setPage(pageNumber);
+
+      // Callback jika ada
+      onDataFetched?.(newData);
+    } catch (error) {
+      console.error("[usePagination] Error fetching data:", error);
+      setHasMore(false);
+      onError?.(error);
+    } finally {
+      setRefreshing(false);
+      setLoading(false);
+      setIsInitialLoad(false); // Set false setelah initial load
+    }
+  };
+
+  /**
+   * Reset dan reload saat search atau dependencies berubah
+   */
+  useEffect(() => {
+    reset();
+    fetchData(1, true);
+  }, [searchQuery, ...dependencies]);
+
+  /**
+   * Pull-to-refresh
+   */
+  const onRefresh = useCallback(() => {
+    fetchData(1, true);
+  }, [searchQuery, ...dependencies]);
+
+  /**
+   * Load more (infinite scroll)
+   */
+  const loadMore = useCallback(() => {
+    if (hasMore && !loading && !refreshing) {
+      fetchData(page + 1, false);
+    }
+  }, [hasMore, loading, refreshing, page, searchQuery, ...dependencies]);
+
+  /**
+   * Reset state pagination
+   */
+  const reset = useCallback(() => {
+    setPage(1);
+    setListData([]);
+    setHasMore(true);
+  }, []);
+
+  return {
+    listData,
+    loading,
+    refreshing,
+    hasMore,
+    page,
+    onRefresh,
+    loadMore,
+    reset,
+    setListData,
+    isInitialLoad
+  };
+}

screens/Admin/Notification-Admin/ScreenNotificationAdmin.tsx

@@ -0,0 +1,213 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  NewWrapper,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+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 } 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 BoxNotification = ({
+  data,
+  activeCategory,
+}: {
+  data: any;
+  activeCategory: string | null;
+}) => {
+  const { markAsRead } = useNotificationStore();
+  return (
+    <>
+      <BaseBox
+        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
+        onPress={() => {
+          console.log(
+            "Notification >",
+            selectedCategory(activeCategory as string)
+          );
+          router.push(data.deepLink);
+          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 Admin_ScreenNotification() {
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>("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: "Admin 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>
+    </>
+  );
+}

screens/Admin/Notification-Admin/ScreenNotificationAdmin2.tsx

@@ -0,0 +1,222 @@
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  NewWrapper,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { IconDot } from "@/components/_Icon/IconComponent";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
+import { usePagination } from "@/hooks/use-pagination";
+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 } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+const PAGE_SIZE = 10;
+
+const selectedCategory = (value: string) => {
+  const category = listOfcategoriesAppNotification.find(
+    (c) => c.value === value,
+  );
+  return category?.label;
+};
+
+const BoxNotification = ({
+  data,
+  activeCategory,
+  setListData,
+}: {
+  data: any;
+  activeCategory: string | null;
+  setListData: (data: any) => void;
+}) => {
+  const { markAsRead } = useNotificationStore();
+  return (
+    <>
+      <BaseBox
+        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
+        onPress={() => {
+          console.log(
+            "Notification >",
+            selectedCategory(activeCategory as string),
+          );
+          router.push(data.deepLink);
+          markAsRead(data.id);
+          setListData((prev: any) =>
+            prev.map((item: any) =>
+              item.id === data.id ? { ...item, isRead: true } : item,
+            ),
+          );
+        }}
+      >
+        <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 Admin_ScreenNotification2() {
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>("event");
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const { markAsReadAll } = useNotificationStore();
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!user?.id) return { data: [] };
+
+      return await apiGetNotificationsById({
+        id: user?.id as any,
+        category: activeCategory as any,
+        page: String(page),
+      });
+    },
+    pageSize: PAGE_SIZE,
+    dependencies: [user?.id, activeCategory],
+    onError: (error) =>
+      console.error("[ERROR] Fetch admin notifications:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada notifikasi",
+      skeletonCount: 5,
+      skeletonHeight: 100,
+    });
+
+  // Render item notification
+  const renderNotificationItem = ({ item }: { item: any }) => (
+    <View key={item.id}>
+      <BoxNotification
+        data={item}
+        activeCategory={activeCategory as any}
+        setListData={pagination.setListData}
+      />
+    </View>
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // Reset pagination saat kategori berubah
+    pagination.reset();
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Admin 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={renderNotificationItem}
+        refreshControl={
+          <RefreshControl
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+          />
+        }
+        onEndReached={pagination.loadMore}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+      />
+
+      <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(pagination.listData);
+                  data.forEach((e) => {
+                    e.isRead = true;
+                  });
+                  pagination.setListData(data);
+                  pagination.onRefresh();
+                  setOpenDrawer(false);
+                },
+              });
+            }
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

screens/Authentication/EULASection.tsx

@@ -7,13 +7,21 @@ import {
   StyleSheet,
 } from "react-native";
 import { useState, useRef } from "react";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { router, useLocalSearchParams, useRouter } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import Toast from "react-native-toast-message";
 
-
+export default function EULASection({
-export default function EULASection({ nomor, onSetModalVisible }: { nomor: string, onSetModalVisible: (visible: boolean) => void }) {
+  nomor,
+  onSetModalVisible,
+  setLoadingTerm,
+}: {
+  nomor: string;
+  onSetModalVisible: (visible: boolean) => void;
+  setLoadingTerm: (loading: boolean) => void;
+}) {
   const { acceptedTerms } = useAuth();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
@@ -35,12 +43,26 @@ export default function EULASection({ nomor, onSetModalVisible }: { nomor: strin
       if (!isAtBottom) return;
 
       setIsLoading(true);
-      await acceptedTerms(nomor as string, onSetModalVisible);
+      const responseAccept = await acceptedTerms(
+        nomor as string,
+        onSetModalVisible,
+      );
+
+      console.log("Accept terms", responseAccept);
+      setLoadingTerm(true);
+
+      setTimeout(() => {
+        router.replace(responseAccept);
+      }, 500);
     } catch (error) {
       console.log("Error accept terms", error);
+      Toast.show({
+        type: "error",
+        text1: "Error",
+        text2: "Terjadi kesalahan saat menerima syarat dan ketentuan",
+      });
     } finally {
       setIsLoading(false);
-      
     }
   };
 

screens/Authentication/LoginView.tsx

@@ -1,18 +1,16 @@
-import { NewWrapper, TextCustom } from "@/components";
+import { NewWrapper } from "@/components";
 import ButtonCustom from "@/components/Button/ButtonCustom";
 import ModalReactNative from "@/components/Modal/ModalReactNative";
 import Spacing from "@/components/_ShareComponent/Spacing";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { apiVersion, BASE_URL } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
 import { openBrowser } from "@/utils/openBrower";
 import versionBadge from "@/utils/viersionBadge";
-import VersionBadge from "@/utils/viersionBadge";
 import { Redirect } from "expo-router";
 import { useEffect, useState } from "react";
-import { Modal, RefreshControl, Text, View } from "react-native";
+import { RefreshControl, Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import Toast from "react-native-toast-message";
 import EULASection from "./EULASection";
@@ -26,6 +24,7 @@ export default function LoginView() {
   const [refreshing, setRefreshing] = useState<boolean>(false);
   const [modalVisible, setModalVisible] = useState(false);
   const [numberToEULA, setNumberToEULA] = useState<string>("");
+  const [loadingTerm, setLoadingTerm] = useState<boolean>(false);
 
   const { loginWithNomor, token, isAdmin, isUserActive } = useAuth();
 
@@ -90,7 +89,6 @@ export default function LoginView() {
     let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
 
     const realNumber = callingCode + fixNumber;
-    
 
     try {
       setLoading(true);
@@ -137,7 +135,6 @@ export default function LoginView() {
       }
     >
       <View style={GStyles.authContainer}>
-      
         <View>
           <View style={GStyles.authContainerTitle}>
             <Text style={GStyles.authSubTitle}>WELCOME TO</Text>
@@ -172,21 +169,15 @@ export default function LoginView() {
 
         <Spacing />
 
-        <ButtonCustom onPress={handleLogin} isLoading={loading}>
+        <ButtonCustom
+          onPress={handleLogin}
+          disabled={loadingTerm}
+          isLoading={loading || loadingTerm}
+        >
           Login
         </ButtonCustom>
         <Spacing height={50} />
 
-        {/* <ButtonCustom
-          onPress={() => {
-            setModalVisible(true);
-            console.log("Show modal", modalVisible);
-          }}
-        >
-          Show Modal
-        </ButtonCustom> */}
-        {/* <CheckboxCustom value={term} onChange={() => setTerm(!term)} /> */}
-
         <Text
           style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}
         >
@@ -208,7 +199,11 @@ export default function LoginView() {
       </View>
 
       <ModalReactNative isVisible={modalVisible}>
-        <EULASection nomor={numberToEULA || ""} onSetModalVisible={setModalVisible} />
+        <EULASection
+          nomor={numberToEULA || ""}
+          onSetModalVisible={setModalVisible}
+          setLoadingTerm={setLoadingTerm}
+        />
       </ModalReactNative>
     </NewWrapper>
   );

screens/Event/ScreenHistory.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, Spacing, TextCustom } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import _ from "lodash";
+import { useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+const PAGE_SIZE = 5;
+
+export default function Event_ScreenHistory() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+  const { user } = useAuth();
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiEventGetAll({
+        category: activeCategory === "all" ? "all-history" : "my-history",
+        userId: user?.id,
+        page: String(page),
+      });
+    },
+    pageSize: PAGE_SIZE,
+    dependencies: [user?.id, activeCategory],
+    onError: (error) => console.error("[ERROR] Fetch event history:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    emptyMessage: "Belum ada riwayat",
+    skeletonCount: 5,
+    skeletonHeight: 100,
+  });
+
+  // Render item event
+  const renderEventItem = ({ item }: { item: any }) => (
+    <Event_BoxPublishSection
+      key={item.id}
+      data={item}
+      rightComponentAvatar={
+        <TextCustom>
+          {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+        </TextCustom>
+      }
+      href={`/event/${item.id}/history`}
+    />
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // Reset pagination saat kategori berubah
+    pagination.reset();
+  };
+
+  const headerComponent = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 5,
+        backgroundColor: MainColor.soft_darkblue,
+        borderRadius: 50,
+        width: "100%",
+      }}
+    >
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "all" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={activeCategory === "all" ? MainColor.black : MainColor.white}
+        style={{ width: "49%" }}
+        onPress={() => handlePress("all")}
+      >
+        Semua Riwayat
+      </ButtonCustom>
+      <Spacing width={"2%"} />
+      <ButtonCustom
+        backgroundColor={
+          activeCategory === "main" ? MainColor.yellow : AccentColor.blue
+        }
+        textColor={
+          activeCategory === "main" ? MainColor.black : MainColor.white
+        }
+        style={{ width: "49%" }}
+        onPress={() => handlePress("main")}
+      >
+        Riwayat Saya
+      </ButtonCustom>
+    </View>
+  );
+
+  return (
+    <NewWrapper
+      headerComponent={headerComponent}
+      listData={pagination.listData}
+      renderItem={renderEventItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      hideFooter
+    />
+  );
+}

screens/Event/ScreenStatus.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxWithHeaderSection,
+  Grid,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { apiEventGetByStatus } from "@/service/api-client/api-event";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+const PAGE_SIZE = 10;
+
+export default function Event_ScreenStatus() {
+  const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+
+  const id = user?.id || "";
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    status || "publish"
+  );
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!id) return { data: [] };
+
+      return await apiEventGetByStatus({
+        id: id!,
+        status: activeCategory!,
+        page: String(page),
+      });
+    },
+    pageSize: PAGE_SIZE,
+    dependencies: [id, activeCategory],
+    onError: (error) => console.error("[ERROR] Fetch event by status:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    emptyMessage: `Tidak ada data ${activeCategory}`,
+    skeletonCount: 5,
+    skeletonHeight: 100,
+  });
+
+  // Render item event
+  const renderEventItem = ({ item }: { item: any }) => (
+    <BoxWithHeaderSection
+      key={item.id}
+      href={`/event/${item.id}/${activeCategory}/detail-event`}
+    >
+      <StackCustom gap={"xs"}>
+        <Grid>
+          <Grid.Col span={8}>
+            <TextCustom truncate bold>
+              {item?.title}
+            </TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+            <TextCustom>
+              {new Date(item?.tanggal).toLocaleDateString()}
+            </TextCustom>
+          </Grid.Col>
+        </Grid>
+
+        <TextCustom truncate={2}>{item?.deskripsi}</TextCustom>
+      </StackCustom>
+    </BoxWithHeaderSection>
+  );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // Reset pagination saat kategori berubah
+    pagination.reset();
+  };
+
+  const tabsComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  return (
+    <NewWrapper
+      headerComponent={
+        <View style={{ paddingTop: 8 }}>
+          {tabsComponent}
+        </View>
+      }
+      listData={pagination.listData}
+      renderItem={renderEventItem}
+      refreshControl={
+        <RefreshControl
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+    />
+  );
+}

screens/Forum/DetailForum.tsx

@@ -0,0 +1,276 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  DrawerCustom,
+  LoaderCustom,
+  NewWrapper,
+  Spacing,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import AlertWarning from "@/components/Alert/AlertWarning";
+import { useAuth } from "@/hooks/use-auth";
+import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
+import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
+import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
+import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
+import {
+  apiForumCreateComment,
+  apiForumGetComment,
+  apiForumGetOne,
+  apiForumUpdateStatus,
+} from "@/service/api-client/api-forum";
+import { TypeForum_CommentProps } from "@/types/type-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+
+export default function DetailForum() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [listComment, setListComment] = useState<
+    TypeForum_CommentProps[] | null
+  >(null);
+  const [isLoadingComment, setLoadingComment] = useState(false);
+
+  // Status
+  const [status, setStatus] = useState("");
+  const [text, setText] = useState("");
+  const [authorId, setAuthorId] = useState("");
+  const [dataId, setDataId] = useState("");
+
+  // Comentar
+  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
+  const [commentId, setCommentId] = useState("");
+  const [commentAuthorId, setCommentAuthorId] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      setTimeout(() => {
+        onLoadData(id as string);
+      }, 3000);
+    }, [id]),
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      onLoadListComment(id as string);
+    }, 3000);
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    try {
+      const response = await apiForumGetOne({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadListComment = async (id: string) => {
+    try {
+      const response = await apiForumGetComment({
+        id: id as string,
+      });
+      setListComment(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Update Status
+  const handlerUpdateStatus = async (value: any) => {
+    try {
+      const response = await apiForumUpdateStatus({
+        id: id as string,
+        data: value,
+      });
+      if (response.success) {
+        setStatus(response.data);
+        setData({
+          ...data,
+          ForumMaster_StatusPosting: {
+            status: response.data,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Create Commentar
+  const handlerCreateCommentar = async () => {
+    if (isBadContent(text)) {
+      AlertWarning({});
+      return;
+    }
+
+    const newData = {
+      comment: text,
+      authorId: user?.id,
+    };
+
+    try {
+      setLoadingComment(true);
+      const response = await apiForumCreateComment({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        setText("");
+        const newComment = {
+          id: response.data.id,
+          isActive: response.data.isActive,
+          komentar: response.data.komentar,
+          createdAt: response.data.createdAt,
+          authorId: response.data.authorId,
+          Author: response.data.Author,
+        };
+        setListComment((prev) => [newComment, ...(prev || [])]);
+        setData({
+          ...data,
+          count: data.count + 1,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingComment(false);
+    }
+  };
+
+  const headerComponent = () =>
+    // Box Posting
+    !data && !listComment ? (
+      <CustomSkeleton height={200} />
+    ) : (
+      <>
+        <Forum_BoxDetailSection
+          data={data}
+          onSetData={() => {
+            setOpenDrawer(true);
+            setStatus(data.ForumMaster_StatusPosting?.status);
+            setAuthorId(data.Author?.id);
+            setDataId(data.id);
+          }}
+        />
+
+        {data?.ForumMaster_StatusPosting?.status === "Open" && (
+          <>
+            <TextAreaCustom
+              placeholder="Ketik diskusi anda..."
+              maxLength={1000}
+              showCount
+              value={text}
+              onChangeText={setText}
+              style={{
+                marginBottom: 0,
+              }}
+            />
+            <ButtonCustom
+              isLoading={isLoadingComment}
+              style={{
+                alignSelf: "flex-end",
+              }}
+              onPress={() => {
+                handlerCreateCommentar();
+              }}
+            >
+              Balas
+            </ButtonCustom>
+          </>
+        )}
+      </>
+    );
+
+  return (
+    <>
+      <NewWrapper
+      // headerComponent={headerComponent()}
+      >
+        {!data && !listComment ? (
+          <LoaderCustom />
+        ) : (
+          <>
+            {/* Area Commentar */}
+            {headerComponent()}
+            <Spacing height={40} />
+            {/* List Commentar */}
+            {_.isEmpty(listComment) ? (
+              <TextCustom align="center" color="gray" size={"small"}>
+                Tidak ada komentar
+              </TextCustom>
+            ) : (
+              <TextCustom color="gray">Komentar :</TextCustom>
+            )}
+            <Spacing height={5} />
+            {listComment?.map((item: any, index: number) => (
+              <Forum_CommentarBoxSection
+                key={index}
+                data={item}
+                onSetData={(value) => {
+                  setCommentId(value.setCommentId);
+                  setOpenDrawerCommentar(value.setOpenDrawer);
+                  setCommentAuthorId(value.setCommentAuthorId);
+                }}
+              />
+            ))}
+          </>
+        )}
+      </NewWrapper>
+
+      {/* Posting Drawer */}
+      <DrawerCustom
+        height={"auto"}
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={dataId}
+          authorUsername={data?.Author?.username as string}
+          status={status}
+          setIsDrawerOpen={() => {
+            setOpenDrawer(false);
+          }}
+          authorId={authorId}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Commentar Drawer */}
+      <DrawerCustom
+        height={"auto"}
+        isVisible={openDrawerCommentar}
+        closeDrawer={() => setOpenDrawerCommentar(false)}
+      >
+        <Forum_MenuDrawerCommentar
+          id={commentId as string}
+          commentId={commentId}
+          commentAuthorId={commentAuthorId}
+          setIsDrawerOpen={() => {
+            setOpenDrawerCommentar(false);
+          }}
+          listComment={listComment}
+          setListComment={setListComment}
+          countComment={data?.count}
+          setCountComment={(val: any) => {
+            setData((prev: any) => ({
+              ...prev,
+              count: val,
+            }));
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

screens/Forum/DetailForum2.tsx

@@ -0,0 +1,320 @@
+import {
+  BoxButtonOnFooter,
+  ButtonCustom,
+  DrawerCustom,
+  LoaderCustom,
+  NewWrapper,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import AlertWarning from "@/components/Alert/AlertWarning";
+import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
+import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
+import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
+import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
+import {
+  apiForumCreateComment,
+  apiForumGetComment,
+  apiForumGetOne,
+  apiForumUpdateStatus,
+} from "@/service/api-client/api-forum";
+import { TypeForum_CommentProps } from "@/types/type-forum";
+import { censorText, isBadContent } from "@/utils/badWordsIndonesia";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { RefreshControl } from "react-native";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+
+export default function DetailForum2() {
+  const { id } = useLocalSearchParams();
+  const { user } = useAuth();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [isLoadingComment, setLoadingComment] = useState(false);
+
+  // Status
+  const [status, setStatus] = useState("");
+  const [text, setText] = useState("");
+  const [authorId, setAuthorId] = useState("");
+  const [dataId, setDataId] = useState("");
+
+  // Comentar
+  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
+  const [commentId, setCommentId] = useState("");
+  const [commentAuthorId, setCommentAuthorId] = useState("");
+
+  // Initialize pagination for comments
+  const commentPagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiForumGetComment({
+        id: id as string,
+        page: String(page), // API expects string
+      });
+    },
+    pageSize: 5,
+    dependencies: [id],
+    onError: (error) => console.error("[ERROR] Fetch forum comment:", error),
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      setTimeout(() => {
+        onLoadData(id as string);
+      }, 3000);
+    }, [id]),
+  );
+
+  useEffect(() => {
+    // Reset and load first page of comments when id changes
+    commentPagination.reset();
+    commentPagination.onRefresh();
+  }, [id]);
+
+  const onLoadData = async (id: string) => {
+    try {
+      const response = await apiForumGetOne({ id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Update Status
+  const handlerUpdateStatus = async (value: any) => {
+    try {
+      const response = await apiForumUpdateStatus({
+        id: id as string,
+        data: value,
+      });
+      if (response.success) {
+        setStatus(response.data);
+        setData({
+          ...data,
+          ForumMaster_StatusPosting: {
+            status: response.data,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Create Commentar
+  const handlerCreateCommentar = async () => {
+    const cencorContent = censorText(text);
+
+    const newData = {
+      comment: cencorContent,
+      authorId: user?.id,
+    };
+
+    try {
+      setLoadingComment(true);
+      const response = await apiForumCreateComment({
+        id: id as string,
+        data: newData,
+      });
+
+      if (response.success) {
+        setText("");
+        const newComment = {
+          id: response.data.id,
+          isActive: response.data.isActive,
+          komentar: response.data.komentar,
+          createdAt: response.data.createdAt,
+          authorId: response.data.authorId,
+          Author: response.data.Author,
+        };
+
+        // Add new comment to the top of the list
+        commentPagination.setListData((prev) => [newComment, ...prev]);
+
+        setData({
+          ...data,
+          count: data.count + 1,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingComment(false);
+    }
+  };
+
+  const headerComponent = () =>
+    // Box Posting
+    !data ? (
+      <StackCustom>
+        <CustomSkeleton height={200} />
+        <CustomSkeleton height={100} />
+      </StackCustom>
+    ) : (
+      <>
+        {/* Area Posting */}
+        <Forum_BoxDetailSection
+          data={data}
+          onSetData={() => {
+            setOpenDrawer(true);
+            setStatus(data.ForumMaster_StatusPosting?.status);
+            setAuthorId(data.Author?.id);
+            setDataId(data.id);
+          }}
+        />
+
+        {/* Area Commentar */}
+        {data?.ForumMaster_StatusPosting?.status === "Open" && (
+          <>
+            <TextAreaCustom
+              placeholder="Ketik diskusi anda..."
+              maxLength={1000}
+              showCount
+              value={text}
+              onChangeText={setText}
+              style={{
+                marginBottom: 0,
+              }}
+            />
+            <ButtonCustom
+              isLoading={isLoadingComment}
+              style={{
+                alignSelf: "flex-end",
+              }}
+              onPress={() => {
+                handlerCreateCommentar();
+              }}
+            >
+              Balas
+            </ButtonCustom>
+          </>
+        )}
+      </>
+    );
+
+  // Render individual comment item
+  const renderCommentItem = ({ item }: { item: TypeForum_CommentProps }) =>(
+      <Forum_CommentarBoxSection
+        key={item.id}
+        data={item}
+        onSetData={(value) => {
+          setCommentId(value.setCommentId);
+          setOpenDrawerCommentar(value.setOpenDrawer);
+          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 } =
+    createPaginationComponents({
+      loading: commentPagination.loading,
+      refreshing: commentPagination.refreshing,
+      listData: commentPagination.listData,
+      isInitialLoad: commentPagination.isInitialLoad,
+      emptyMessage: "Tidak ada komentar",
+      skeletonCount: 3,
+      skeletonHeight: 120,
+    });
+
+  return (
+    <>
+      <NewWrapper
+        // headerComponent={}
+        listData={commentPagination.listData}
+        renderItem={renderCommentItem}
+        refreshControl={
+          <RefreshControl
+            // IOS
+            tintColor={MainColor.yellow}
+            // Android
+            colors={[MainColor.yellow]}
+            progressBackgroundColor={MainColor.yellow}
+            refreshing={commentPagination.refreshing}
+            onRefresh={commentPagination.onRefresh}
+          />
+        }
+        onEndReached={commentPagination.loadMore}
+        ListHeaderComponent={
+          <>
+            {/* <Spacing height={40} />
+            <TextCustom color="gray">Komentar :</TextCustom>
+            <Spacing height={5} /> */}
+            {headerComponent()}
+            <Spacing />
+          </>
+        }
+        ListFooterComponent={ListFooterComponent}
+        ListEmptyComponent={ListEmptyComponent}
+      />
+
+      {/* Posting Drawer */}
+      <DrawerCustom
+        height={"auto"}
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+      >
+        <Forum_MenuDrawerBerandaSection
+          id={dataId}
+          authorUsername={data?.Author?.username as string}
+          status={status}
+          setIsDrawerOpen={() => {
+            setOpenDrawer(false);
+          }}
+          authorId={authorId}
+          handlerUpdateStatus={(value: any) => {
+            handlerUpdateStatus(value);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Commentar Drawer */}
+      <DrawerCustom
+        height={"auto"}
+        isVisible={openDrawerCommentar}
+        closeDrawer={() => setOpenDrawerCommentar(false)}
+      >
+        <Forum_MenuDrawerCommentar
+          id={commentId as string}
+          commentId={commentId}
+          commentAuthorId={commentAuthorId}
+          setIsDrawerOpen={() => {
+            setOpenDrawerCommentar(false);
+          }}
+          listComment={commentPagination.listData}
+          setListComment={commentPagination.setListData}
+          countComment={data?.count}
+          setCountComment={(val: any) => {
+            setData((prev: any) => ({
+              ...prev,
+              count: val,
+            }));
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}

screens/Forum/ViewBeranda3.tsx

@@ -0,0 +1,136 @@
+import {
+  AvatarComp,
+  BackButton,
+  FloatingButton,
+  SearchInput
+} from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
+import { apiForumGetAll } from "@/service/api-client/api-forum";
+import { apiUser } from "@/service/api-client/api-user";
+import { router, Stack } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { RefreshControl, TouchableOpacity, View } from "react-native";
+
+const PAGE_SIZE = 5;
+
+export default function Forum_ViewBeranda3() {
+  const { user } = useAuth();
+  const [dataUser, setDataUser] = useState<any>(null);
+  const [search, setSearch] = useState("");
+
+  // Load data profil user
+  useEffect(() => {
+    if (user?.id) {
+      apiUser(user.id).then((res) => setDataUser(res.data));
+    }
+  }, [user?.id]);
+
+  // Setup pagination (menggantikan 50+ lines code!)
+  const pagination = usePagination({
+    fetchFunction: async (page, searchQuery) => {
+      if (!user?.id) return { data: [] };
+
+      return await apiForumGetAll({
+        category: "beranda",
+        search: searchQuery || "",
+        userLoginId: user.id,
+        page: String(page),
+      });
+    },
+    pageSize: PAGE_SIZE,
+    searchQuery: search,
+    dependencies: [user?.id],
+    onError: (error) => console.error("[ERROR] Fetch forum:", error),
+  });
+
+  // Generate komponen (menggantikan 40+ lines code!)
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      searchQuery: search,
+      emptyMessage: "Tidak ada diskusi",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      skeletonCount: 5,
+      skeletonHeight: 150,
+    });
+
+  // Render item forum
+  const renderForumItem = ({ item }: { item: any }) => (
+    <Forum_BoxDetailSection
+      key={item.id}
+      data={item}
+      onSetData={() => {}}
+      isTruncate={true}
+      href={`/forum/${item.id}`}
+      isRightComponent={false}
+    />
+  );
+
+  //   const ListHeaderComponent = (
+  //     <View style={{ paddingVertical: 8, alignItems: "center" }}>
+  //       <TextCustom>Diskusi Terbaru</TextCustom>
+  //     </View>
+  //   );
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Forum",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <TouchableOpacity
+              onPress={() => router.navigate(`/forum/${user?.id}/forumku`)}
+            >
+              <AvatarComp
+                fileId={dataUser?.Profile?.imageId}
+                size="base"
+                href={`/forum/${user?.id}/forumku`}
+              />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+
+      <NewWrapper
+        headerComponent={
+          <View style={{  paddingTop: 8 }}>
+            <SearchInput
+              placeholder="Cari topik diskusi"
+              onChangeText={_.debounce((text) => setSearch(text), 500)}
+            />
+          </View>
+        }
+        floatingButton={
+          <FloatingButton
+            onPress={() =>
+              router.navigate("/(application)/(user)/forum/create")
+            }
+          />
+        }
+        listData={pagination.listData}
+        renderItem={renderForumItem}
+        refreshControl={
+          <RefreshControl
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+          />
+        }
+        onEndReached={pagination.loadMore}
+        // ListHeaderComponent={ListHeaderComponent}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+      />
+    </>
+  );
+}

screens/Forum/ViewForumku2.tsx

@@ -15,38 +15,49 @@ import NoDataText from "@/components/_ShareComponent/NoDataText";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
 import { apiForumGetAll } from "@/service/api-client/api-forum";
 import { apiUser } from "@/service/api-client/api-user";
 import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { RefreshControl, View } from "react-native";
 
-const PAGE_SIZE = 5;
-
 export default function View_Forumku2() {
   const { id } = useLocalSearchParams();
   const { user } = useAuth();
-  const [listData, setListData] = useState<any[]>([]);
   const [dataUser, setDataUser] = useState<any | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [page, setPage] = useState(1);
   const [count, setCount] = useState(0);
 
+  // Initialize pagination hook
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!user?.id) throw new Error("User not authenticated");
+
+      const response = await apiForumGetAll({
+        category: "forumku",
+        authorId: id as string,
+        userLoginId: user.id,
+        page: String(page), // API terima string
+      });
+
+      // Update count when fetching page 1
+      if (page === 1) {
+        setCount(response.data.count);
+      }
+
+      return response.data;
+    },
+    pageSize: 5,
+    dependencies: [user?.id],
+  });
+
   useEffect(() => {
     onLoadDataProfile(id as string);
   }, [id]);
 
-  useEffect(() => {
-    setPage(1);
-    setListData([]);
-    setHasMore(true);
-    fetchData(1, true);
-  }, [user?.id]);
-
   const onLoadDataProfile = async (id: string) => {
     try {
       const response = await apiUser(id);
@@ -58,54 +69,6 @@ export default function View_Forumku2() {
     }
   };
 
-  // 🔹 Fungsi fetch data
-  const fetchData = async (pageNumber: number, clear: boolean) => {
-    if (!user?.id) return;
-
-    // Cegah multiple call
-    if (!clear && (loading || refreshing)) return;
-
-    const isRefresh = clear;
-    if (isRefresh) setRefreshing(true);
-    if (!isRefresh) setLoading(true);
-
-    try {
-      const response = await apiForumGetAll({
-        category: "forumku",
-        authorId: id as string,
-        userLoginId: user.id,
-        page: String(pageNumber), // API terima string
-      });
-
-      const newData = response.data.data || [];
-      setListData((prev) => {
-        const current = Array.isArray(prev) ? prev : [];
-        return clear ? newData : [...current, ...newData];
-      });
-      setHasMore(newData.length === PAGE_SIZE);
-      setPage(pageNumber);
-      setCount(response.data.count);
-    } catch (error) {
-      console.error("[ERROR] Fetch forum:", error);
-      setHasMore(false);
-    } finally {
-      setRefreshing(false);
-      setLoading(false);
-    }
-  };
-
-  // 🔹 Pull-to-refresh
-  const onRefresh = useCallback(() => {
-    fetchData(1, true);
-  }, [user?.id]);
-
-  // 🔹 Infinite scroll
-  const loadMore = useCallback(() => {
-    if (hasMore && !loading && !refreshing) {
-      fetchData(page + 1, false);
-    }
-  }, [hasMore, loading, refreshing, page, user?.id]);
-
   const randerHeaderComponent = () => (
     <>
       <CenterCustom>
@@ -144,39 +107,16 @@ export default function View_Forumku2() {
     />
   );
 
-  // Skeleton List (untuk initial load)
+  // Generate pagination components using helper
-  const SkeletonListComponent = () => (
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
-    <View style={{ flex: 1 }}>
+    loading: pagination.loading,
-      <StackCustom>
+    refreshing: pagination.refreshing,
-        {Array.from({ length: 5 }).map((_, i) => (
+    listData: pagination.listData,
-          <CustomSkeleton height={200} key={i} />
+    isInitialLoad: pagination.isInitialLoad,
-        ))}
+    emptyMessage: "Tidak ada postingan",
-      </StackCustom>
+    skeletonCount: 5,
-    </View>
+    skeletonHeight: 200,
-  );
+  });
-
-  //  Komponen Empty
-  const EmptyComponent = () => (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 20,
-      }}
-    >
-      <NoDataText />
-    </View>
-  );
-
-  // 🔹 Komponen Footer List (loading indicator)
-  const ListFooterComponent =
-    loading && !refreshing && listData.length > 0 ? (
-      <View style={{ paddingVertical: 16, alignItems: "center" }}>
-        {/* <Text style={{ color: "#aaa", fontSize: 14 }}>Memuat diskusi...</Text> */}
-        <LoaderCustom />
-      </View>
-    ) : null;
 
   return (
     <>
@@ -190,7 +130,7 @@ export default function View_Forumku2() {
             />
           )
         }
-        listData={listData}
+        listData={pagination.listData}
         renderItem={renderList}
         refreshControl={
           <RefreshControl
@@ -199,16 +139,14 @@ export default function View_Forumku2() {
             // Android
             colors={[MainColor.yellow]}
             progressBackgroundColor={MainColor.yellow}
-            refreshing={refreshing}
+            refreshing={pagination.refreshing}
-            onRefresh={onRefresh}
+            onRefresh={pagination.onRefresh}
           />
         }
-        onEndReached={loadMore}
+        onEndReached={pagination.loadMore}
         ListHeaderComponent={randerHeaderComponent()}
         ListFooterComponent={ListFooterComponent}
-        ListEmptyComponent={
+        ListEmptyComponent={ListEmptyComponent}
-          loading && _.isEmpty(listData) ? <SkeletonListComponent /> : <EmptyComponent />
-        }
       />
     </>
   );

screens/Job/MainViewStatus.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { apiJobGetByStatus } from "@/service/api-client/api-job";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function Job_MainViewStatus() {
+  const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+  console.log("STATUS", status);
+
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    status || "publish"
+  );
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadList(true);
+      const response = await apiJobGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  };
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  return (
+    <>
+      <ViewWrapper headerComponent={scrollComponent} hideFooter>
+        {isLoadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center">
+            Tidak ada data {activeCategory}
+          </TextCustom>
+        ) : (
+          listData.map((e, i) => (
+            <BaseBox
+              key={i}
+              paddingTop={20}
+              paddingBottom={20}
+              href={`/job/${e?.id}/${activeCategory}/detail`}
+            >
+              <TextCustom align="center" bold truncate size="large">
+                {e?.title}
+              </TextCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+    </>
+  );
+}

screens/Job/MainViewStatus2.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { BaseBox, ScrollableCustom, TextCustom } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { apiJobGetByStatus } from "@/service/api-client/api-job";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+export default function Job_MainViewStatus2() {
+  const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+  console.log("STATUS", status);
+
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    status || "publish",
+  );
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!user?.id) return { data: [] };
+
+      return await apiJobGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [user?.id, activeCategory],
+    onError: (error) => console.error("[ERROR] Fetch job by status:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: `Tidak ada data ${activeCategory}`,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  // Render item job
+  const renderJobItem = ({ item }: { item: any }) => (
+    <BaseBox
+      key={item.id}
+      paddingTop={20}
+      paddingBottom={20}
+      href={`/job/${item?.id}/${activeCategory}/detail`}
+    >
+      <TextCustom align="center" bold truncate size="large">
+        {item?.title}
+      </TextCustom>
+    </BaseBox>
+  );
+
+  // useFocusEffect(
+  //   useCallback(() => {
+  //     // Reset and load first page when category changes
+  //     pagination.reset();
+  //     // pagination.onRefresh();
+  //   }, [activeCategory]),
+  // );
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // Reset pagination saat kategori berubah
+    pagination.reset();
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  return (
+    <NewWrapper
+      headerComponent={<View style={{ paddingTop: 8 }}>{scrollComponent}</View>}
+      listData={pagination.listData}
+      renderItem={renderJobItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      hideFooter
+    />
+  );
+}

screens/Job/ScreenArchive.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { BaseBox, LoaderCustom, TextCustom, ViewWrapper } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function Job_ScreenArchive() {
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetAll({
+        category: "archive",
+        authorId: user?.id,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  return (
+    <ViewWrapper hideFooter>
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Anda tidak memiliki arsip</TextCustom>
+      ) : (
+        listData.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={20}
+            paddingBottom={20}
+            href={`/job/${item.id}/archive`}
+          >
+            <TextCustom align="center" bold truncate size="large">
+              {item?.title || "-"}
+            </TextCustom>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
+  );
+}

screens/Job/ScreenArchive2.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { BaseBox, TextCustom, ViewWrapper } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+import { RefreshControl } from "react-native";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+
+export default function Job_ScreenArchive2() {
+  const { user } = useAuth();
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!user?.id) return { data: [] };
+
+      return await apiJobGetAll({
+        category: "archive",
+        authorId: user?.id,
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [user?.id],
+    onError: (error) => console.error("[ERROR] Fetch job archive:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    emptyMessage: "Anda tidak memiliki arsip",
+    skeletonCount: PAGINATION_DEFAULT_TAKE,
+    skeletonHeight: 80,
+  });
+
+  // Render item job
+  const renderJobItem = ({ item }: { item: any }) => (
+    <BaseBox
+      key={item.id}
+      paddingTop={20}
+      paddingBottom={20}
+      href={`/job/${item.id}/archive`}
+    >
+      <TextCustom align="center" bold truncate size="large">
+        {item?.title || "-"}
+      </TextCustom>
+    </BaseBox>
+  );
+
+  return (
+    <NewWrapper
+      listData={pagination.listData}
+      renderItem={renderJobItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      hideFooter
+    />
+  );
+}

screens/Job/ScreenBeranda.tsx

@@ -0,0 +1,83 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  FloatingButton,
+  LoaderCustom,
+  SearchInput,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function Job_ScreenBeranda() {
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(search);
+    }, [search])
+  );
+
+  const onLoadData = async (search: string) => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetAll({ search, category: "beranda" });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const handleSearch = (search: string) => {
+    setSearch(search);
+    onLoadData(search);
+  };
+
+  return (
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/job/create")} />
+      }
+      headerComponent={
+        <SearchInput placeholder="Cari pekerjaan" onChangeText={handleSearch} />
+      }
+    >
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada lowongan</TextCustom>
+      ) : (
+        listData.map((item, index) => (
+          <BoxWithHeaderSection
+            key={index}
+            onPress={() => router.push(`/job/${item.id}`)}
+          >
+            <StackCustom>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Author?.Profile?.imageId}
+                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+                name={item?.Author?.username}
+              />
+
+              <TextCustom truncate={2} align="center" bold size="large">
+                {item?.title || "-"}
+              </TextCustom>
+            </StackCustom>
+            <Spacing />
+          </BoxWithHeaderSection>
+        ))
+      )}
+      <Spacing />
+    </ViewWrapper>
+  );
+}

screens/Job/ScreenBeranda2.tsx

@@ -0,0 +1,105 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  FloatingButton,
+  SearchInput,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiJobGetAll } from "@/service/api-client/api-job";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useState } from "react";
+import { RefreshControl, View } from "react-native";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+
+const PAGE_SIZE = 10;
+
+export default function Job_ScreenBeranda2() {
+  const [search, setSearch] = useState("");
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page, searchQuery) => {
+      return await apiJobGetAll({
+        search: searchQuery || "",
+        category: "beranda",
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    searchQuery: search,
+    dependencies: [],
+    onError: (error) => console.error("[ERROR] Fetch job:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      searchQuery: search,
+      emptyMessage: "Belum ada lowongan",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      skeletonCount: 5,
+      skeletonHeight: 150,
+    });
+
+  // Render item job
+  const renderJobItem = ({ item }: { item: any }) => (
+    <BoxWithHeaderSection
+      key={item.id}
+      onPress={() => router.push(`/job/${item.id}`)}
+    >
+      <StackCustom>
+        <AvatarUsernameAndOtherComponent
+          avatar={item?.Author?.Profile?.imageId}
+          avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+          name={item?.Author?.username}
+        />
+
+        <TextCustom truncate={2} align="center" bold size="large">
+          {item?.title || "-"}
+        </TextCustom>
+      </StackCustom>
+      <Spacing />
+    </BoxWithHeaderSection>
+  );
+
+  return (
+    <NewWrapper
+      hideFooter
+      headerComponent={
+        <View style={{ paddingTop: 8 }}>
+          <SearchInput
+            placeholder="Cari pekerjaan"
+            onChangeText={_.debounce((text) => setSearch(text), 500)}
+          />
+        </View>
+      }
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/job/create")} />
+      }
+      listData={pagination.listData}
+      renderItem={renderJobItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+    />
+  );
+}

screens/Notification/ScreenNotification_V1.tsx

@@ -0,0 +1,321 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  AlertDefaultSystem,
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  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, useEffect, 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,
+  setListData,
+}: {
+  data: any;
+  activeCategory: string | null;
+  setListData: (data: any) => void;
+}) => {
+  // 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);
+            const updatedData = {
+              ...data,
+              isRead: true,
+            };
+
+            console.log("Updated Data", updatedData);
+            setListData((prev: any) =>
+              prev.map((item: any) =>
+                item.id === data.id ? updatedData : item,
+              ),
+            );
+          }
+        }}
+      >
+        <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_V1() {
+  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 [loadingMore, setLoadingMore] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const { markAsReadAll } = useNotificationStore();
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // Reset pagination saat kategori berubah
+    setListData([]);
+    setPage(1);
+    setHasMore(true);
+  };
+
+  //   useFocusEffect(
+  //     useCallback(() => {
+  //       fecthData(1, true);
+  //     }, [activeCategory])
+  //   );
+
+  useEffect(() => {
+    fecthData(1, true);
+  }, [activeCategory]);
+
+  const fecthData = async (pageNum: number, clear: boolean = false) => {
+    if (pageNum === 1 && !clear) return; // Hindari duplicate call untuk page 1
+
+    try {
+      if (pageNum === 1) {
+        setLoading(true);
+      } else {
+        setLoadingMore(true);
+      }
+
+      const response = await apiGetNotificationsById({
+        id: user?.id as any,
+        category: activeCategory as any,
+        page: String(pageNum),
+      });
+
+      if (response.success) {
+        if (clear || pageNum === 1) {
+          setListData(response.data);
+        } else {
+          setListData((prev) => [...prev, ...response.data]);
+        }
+
+        // Jika data yang dikembalikan kurang dari ukuran halaman, maka tidak ada halaman berikutnya
+        setHasMore(response.data.length >= 10); // Asumsikan ukuran halaman 10
+      } else {
+        if (pageNum === 1) {
+          setListData([]);
+        }
+      }
+    } catch (error) {
+      console.log("Error Notification", error);
+      if (pageNum === 1) {
+        setListData([]);
+      }
+    } finally {
+      if (pageNum === 1) {
+        setLoading(false);
+      } else {
+        setLoadingMore(false);
+      }
+    }
+  };
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await fecthData(1, true);
+    setRefreshing(false);
+  };
+
+  const loadMore = () => {
+    if (!loadingMore && hasMore) {
+      const nextPage = page + 1;
+      setPage(nextPage);
+      fecthData(nextPage, false);
+    }
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Notifikasi",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <IconDot
+              color={MainColor.yellow}
+              onPress={() => setOpenDrawer(true)}
+            />
+          ),
+        }}
+      />
+
+      <NewWrapper
+        hideFooter
+        headerComponent={
+          <ScrollableCustom
+            data={listOfcategoriesAppNotification.map((e, i) => ({
+              id: i,
+              label: e.label,
+              value: e.value,
+            }))}
+            onButtonPress={handlePress}
+            activeId={activeCategory as string}
+          />
+        }
+        listData={listData}
+        renderItem={({ item }) => (
+          <View key={item.id}>
+            <BoxNotification
+              data={item}
+              activeCategory={activeCategory as any}
+              setListData={setListData}
+            />
+          </View>
+        )}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        onEndReached={loadMore}
+        // onEndReachedThreshold={0.1}
+        ListEmptyComponent={
+          loading ? (
+            <ListSkeletonComponent />
+          ) : (
+            <NoDataText text="Belum ada notifikasi" />
+          )
+        }
+        ListFooterComponent={
+          loadingMore ? (
+            <View style={{ padding: 16, alignItems: "center" }}>
+              <LoaderCustom />
+            </View>
+          ) : null
+        }
+      />
+
+      <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>
+    </>
+  );
+}

screens/Notification/ScreenNotification_V2.tsx

@@ -0,0 +1,266 @@
+/* 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 { AccentColor, MainColor } from "@/constants/color-palet";
+import {
+  ICON_SIZE_SMALL,
+  PAGINATION_DEFAULT_TAKE,
+} from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
+import { usePagination } from "@/hooks/use-pagination";
+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,
+  setListData,
+}: {
+  data: any;
+  activeCategory: string | null;
+  setListData: (data: any) => void;
+}) => {
+  const { markAsRead } = useNotificationStore();
+  return (
+    <>
+      <BaseBox
+        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
+        onPress={() => {
+          const newPath = fixPath({
+            deepLink: data.deepLink,
+            categoryApp: data.kategoriApp,
+          });
+
+          router.navigate(newPath as any);
+          selectedCategory(activeCategory as string);
+
+          if (!data.isRead) {
+            markAsRead(data.id);
+            setListData((prev: any) =>
+              prev.map((item: any) =>
+                item.id === data.id ? { ...item, isRead: true } : item,
+              ),
+            );
+          }
+        }}
+      >
+        <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) => {
+      if (!user?.id) return { data: [] };
+
+      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}
+        setListData={pagination.setListData}
+      />
+    </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
+        hideFooter
+        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: () => {
+                  // Reset and refresh data after marking all as read
+                  markAsReadAll(user?.id as any);
+                  const data = _.cloneDeep(pagination.listData);
+                  data.forEach((e) => {
+                    e.isRead = true;
+                  });
+                  pagination.setListData(data);
+                  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/AvatarAndBackground.tsx

@@ -21,6 +21,7 @@ const AvatarAndBackground = ({
             `/(application)/(image)/preview-image/${backgroundId}`
           );
         }}
+        disabled={!backgroundId}
       >
         <ImageBackground
           source={

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/RootLayout/AppRoot.tsx

@@ -1,3 +1,4 @@
+import { BackButton } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { Stack } from "expo-router";
 
@@ -15,8 +16,18 @@ export default function AppRoot() {
           name="index"
           options={{ title: "", headerBackVisible: false }}
         />
-        <Stack.Screen name="eula" options={{ title: "Terms & Conditions", headerBackVisible: false }} />
+        <Stack.Screen
-        <Stack.Screen name="+not-found" options={{ title: "" }} />
+          name="eula"
+          options={{ title: "Terms & Conditions", headerBackVisible: false }}
+        />
+        {/* CEK PADA FILE */}
+        {/* <Stack.Screen
+          options={{
+            headerShown: true,
+            title: "",
+            headerLeft: () => <BackButton />,
+          }}
+        /> */}
         <Stack.Screen
           name="verification"
           options={{ title: "", headerBackVisible: false }}

screens/UserSeach/MainView.tsx

@@ -0,0 +1,105 @@
+import { ViewWrapper, TextInputCustom, StackCustom, LoaderCustom, ClickableCustom, Grid, AvatarComp, TextCustom, Spacing } from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { apiAllUser } from "@/service/api-client/api-user";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import _ from "lodash";
+import { useState, useEffect } from "react";
+
+export default function UserSearchMainView(){
+    const [data, setData] = useState<any[]>([]);
+      const [search, setSearch] = useState<string>("");
+      const [isLoadList, setIsLoadList] = useState(false);
+    
+      useEffect(() => {
+        onLoadData(search);
+      }, [search]);
+    
+      const onLoadData = async (search: string) => {
+        try {
+          setIsLoadList(true);
+          const response = await apiAllUser({ search: search });
+          console.log("[DATA USER] >", JSON.stringify(response.data, null, 2));
+          setData(response.data);
+        } catch (error) {
+          console.log("Error fetching data", error);
+        } finally {
+          setIsLoadList(false);
+        }
+      };
+    
+      const handleSearch = (search: string) => {
+        setSearch(search);
+        onLoadData(search);
+      };
+    
+    return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <TextInputCustom
+            value={search}
+            onChangeText={handleSearch}
+            iconLeft={
+              <Ionicons
+                name="search"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.placeholder}
+              />
+            }
+            placeholder="Cari Pengguna"
+            borderRadius={50}
+            containerStyle={{ marginBottom: 0 }}
+          />
+        }
+      >
+        <StackCustom>
+          {isLoadList ? (
+            <LoaderCustom />
+          ) : !_.isEmpty(data) ? (
+            data?.map((e, index) => {
+              return (
+                <ClickableCustom
+                  key={index}
+                  onPress={() => {
+                    console.log("Ke Profile");
+                    router.push(`/profile/${e?.Profile?.id}`);
+                  }}
+                >
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <AvatarComp fileId={e?.Profile?.imageId} size="base" />
+                    </Grid.Col>
+                    <Grid.Col span={9}>
+                      <StackCustom gap={"sm"}>
+                        <TextCustom size="large">{e?.username}</TextCustom>
+                        <TextCustom size="small">+{e?.nomor}</TextCustom>
+                      </StackCustom>
+                    </Grid.Col>
+                    <Grid.Col
+                      span={1}
+                      style={{
+                        justifyContent: "center",
+                        alignItems: "flex-end",
+                      }}
+                    >
+                      <Ionicons
+                        name="chevron-forward"
+                        size={ICON_SIZE_SMALL}
+                        color={MainColor.white}
+                      />
+                    </Grid.Col>
+                  </Grid>
+                </ClickableCustom>
+              );
+            })
+          ) : (
+            <TextCustom align="center">Tidak ditemukan</TextCustom>
+          )}
+        </StackCustom>
+        <Spacing height={50} />
+      </ViewWrapper>
+    </>
+  );
+}

screens/UserSeach/MainView_V2.tsx

@@ -0,0 +1,167 @@
+import {
+  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 { usePagination } from "@/hooks/use-pagination";
+import { apiAllUser } from "@/service/api-client/api-user";
+import { Ionicons } from "@expo/vector-icons";
+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";
+
+export default function UserSearchMainView_V2() {
+  const isInitialMount = useRef(true);
+  const [search, setSearch] = useState("");
+
+  const {
+    listData,
+    loading,
+    refreshing,
+    hasMore,
+    onRefresh,
+    loadMore,
+    isInitialLoad,
+  } = usePagination({
+    fetchFunction: async (page, searchQuery) => {
+      const response = await apiAllUser({
+        page: String(page),
+        search: searchQuery || "",
+      });
+      return response;
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    searchQuery: search,
+  });
+
+  // 🔁 Refresh otomatis saat kembali ke halaman ini
+  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>
+  );
+
+  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 (
+    <>
+      <NewWrapper
+        headerComponent={renderHeader()}
+        listData={listData}
+        renderItem={renderItem}
+        onEndReached={loadMore}
+        refreshControl={
+          <RefreshControl
+            progressBackgroundColor={MainColor.yellow}
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+          />
+        }
+        ListFooterComponent={ListFooterComponent}
+        ListEmptyComponent={ListEmptyComponent}
+      />
+    </>
+  );
+}

service/api-client/api-event.ts

@@ -14,12 +14,14 @@ export async function apiEventCreate(data: any) {
 export async function apiEventGetByStatus({
   id,
   status,
+  page = "1",
 }: {
   id: string;
   status: string;
+  page?: string;
 }) {
   try {
-    const response = await apiConfig.get(`/mobile/event/${id}/${status}`);
+    const response = await apiConfig.get(`/mobile/event/${id}/${status}?page=${page}`);
     return response.data;
   } catch (error) {
     throw error;
@@ -79,15 +81,18 @@ export async function apiEventDelete({ id }: { id: string }) {
 export async function apiEventGetAll({
   category,
   userId,
+  page = "1",
 }: {
   category?: "beranda" | "contribution" | "all-history" | "my-history";
   userId?: string;
+  page?: string;
 }) {
   try {
     const categoryEvent = category ? `?category=${category}` : "";
     const userIdCreator = userId ? `&userId=${userId}` : "";
+    const pageParam = `&page=${page}`;
     const response = await apiConfig.get(
-      `/mobile/event${categoryEvent}${userIdCreator}`
+      `/mobile/event${categoryEvent}${userIdCreator}${pageParam}`
     );
     return response.data;
   } catch (error) {

service/api-client/api-forum.ts

@@ -102,9 +102,9 @@ export async function apiForumCreateComment({
   }
 }
 
-export async function apiForumGetComment({ id }: { id: string }) {
+export async function apiForumGetComment({ id, page = "1" }: { id: string, page?: string }) {
   try {
-    const response = await apiConfig.get(`/mobile/forum/${id}/comment`);
+    const response = await apiConfig.get(`/mobile/forum/${id}/comment?page=${page}`);
     return response.data;
   } catch (error) {
     throw error;

service/api-client/api-job.ts

@@ -14,12 +14,14 @@ export async function apiJobCreate(data: any) {
 export async function apiJobGetByStatus({
   authorId,
   status,
+  page = "1",
 }: {
   authorId: string;
   status: string;
+  page?: string;
 }) {
   try {
-    const response = await apiConfig.get(`/mobile/job/${authorId}/${status}`);
+    const response = await apiConfig.get(`/mobile/job/${authorId}/${status}?page=${page}`);
     return response.data;
   } catch (error) {
     throw error;
@@ -63,10 +65,12 @@ export async function apiJobGetAll({
   search,
   category,
   authorId,
+  page = "1",
 }: {
   search?: string;
   category: "archive" | "beranda";
   authorId?: string;
+  page?: string;
 }) {
   try {
     let categoryText = category ? `?category=${category}` : "";
@@ -74,8 +78,9 @@ export async function apiJobGetAll({
       categoryText = `?category=${category}&authorId=${authorId}`;
     }
     const searchText = search ? `&search=${search}` : "";
+    const pageText = `&page=${page}`;
     const response = await apiConfig.get(
-      `/mobile/job${categoryText}${searchText}`
+      `/mobile/job${categoryText}${searchText}${pageText}`
     );
     return response.data;
   } catch (error) {

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-client/api-user.ts

@@ -5,12 +5,27 @@ export async function apiUser(id: string) {
   return response.data;
 }
 
-export async function apiAllUser({ search }: { search: string }) {
+export async function apiAllUser({
-  const response = await apiConfig.get(`/mobile/user?search=${search}`);
+  page,
-  return response.data;
+  search,
+}: {
+  page?: string;
+  search?: string;
+}) {
+  const pageQuery = page ? `?page=${page}` : "";
+  const searchQuery = search ? `&search=${search}` : "";
+
+  try {
+    const response = await apiConfig.get(
+      `/mobile/user${pageQuery}${searchQuery}`,
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
 }
 
-export async function apiDeleteUser({id}:{id: string}) {
+export async function apiDeleteUser({ id }: { id: string }) {
   const response = await apiConfig.delete(`/mobile/user/${id}`);
   return response.data;
 }
@@ -37,12 +52,19 @@ export async function apiForumBlockUser({
   }
 }
 
-export async function apiAcceptForumTerms({category, userId}:{category:"Forum" | "Event", userId: string}) {
+export async function apiAcceptForumTerms({
+  category,
+  userId,
+}: {
+  category: "Forum" | "Event";
+  userId: string;
+}) {
   try {
-    const response = await apiConfig.post(`/mobile/user/${userId}/terms-of-app?category=${category}`);
+    const response = await apiConfig.post(
+      `/mobile/user/${userId}/terms-of-app?category=${category}`,
+    );
     return response.data;
   } catch (error) {
     throw 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;