Fix forum detail

Forum (User)
- app/(application)/(user)/forum/[id]/index.tsx
- screens/Forum/ViewForumku2.tsx
- service/api-client/api-forum.ts

Forum – New / Refactor
- screens/Forum/DetailForum.tsx
- screens/Forum/DetailForum2.tsx

Documentation
- docs/

Removed
- hipmi-note.md

### No Issue'

QWEN.md

@@ -0,0 +1,179 @@
+# HIPMI Mobile Application - Development Guide
+
+## Project Overview
+
+HIPMI Badung Connect is a mobile application built with Expo and React Native. It serves as a connection platform for HIPMI (Himpunan Pengusaha Muda Indonesia) Badung members, featuring authentication, user management, and various business-related functionalities.
+
+### Key Technologies
+- **Framework**: Expo (v54.0.0) with React Native (0.81.4)
+- **Architecture**: File-based routing with Expo Router
+- **State Management**: React Context API
+- **Styling**: React Native components with custom color palettes
+- **Authentication**: Token-based authentication with OTP verification
+- **Database**: AsyncStorage for local storage
+- **Maps**: React Native Maps and Mapbox integration
+- **Notifications**: Expo Notifications and Firebase Messaging
+- **Language**: TypeScript
+
+### Project Structure
+```
+hipmi-mobile/
+├── app/                    # File-based routing structure
+│   ├── (application)/      # Main application screens
+│   │   ├── (file)/         # File management screens
+│   │   ├── (image)/        # Image management screens
+│   │   ├── (user)/         # User-specific screens
+│   │   └── admin/          # Admin-specific screens
+│   ├── _layout.tsx         # Root layout wrapper
+│   ├── index.tsx           # Home screen
+│   ├── eula.tsx            # Terms and conditions screen
+│   ├── register.tsx        # Registration screen
+│   └── verification.tsx    # OTP verification screen
+├── assets/                 # Static assets (images, icons)
+├── components/             # Reusable UI components
+├── constants/              # Configuration constants
+├── context/                # React Context providers
+├── hooks/                  # Custom React hooks
+├── screens/                # Screen components
+├── service/                # API services and configurations
+├── types/                  # TypeScript type definitions
+├── app.config.js           # Expo configuration
+├── package.json            # Dependencies and scripts
+└── ...
+```
+
+## Building and Running
+
+### Prerequisites
+- Node.js (with bun >=1.0.0 as specified in package.json)
+- Expo CLI or bun installed globally
+
+### Setup Instructions
+1. **Install dependencies**:
+   ```bash
+   bun install
+   # or if using npm
+   npm install
+   ```
+
+2. **Environment Variables**:
+   Create a `.env` file with the following variables:
+   ```
+   API_BASE_URL=your_api_base_url
+   BASE_URL=your_base_url
+   DEEP_LINK_URL=your_deep_link_url
+   ```
+
+3. **Start the development server**:
+   ```bash
+   # Using bun (as specified in package.json)
+   bun run start
+   # or using expo directly
+   npx expo start
+   ```
+
+4. **Platform-specific commands**:
+   ```bash
+   # Android
+   bun run android
+   # iOS
+   bun run ios
+   # Web
+   bun run web
+   ```
+
+### EAS Build Configuration
+The project uses Expo Application Services (EAS) for building and deployment:
+- Development builds: `eas build --profile development`
+- Preview builds: `eas build --profile preview`
+- Production builds: `eas build --profile production`
+
+## Authentication Flow
+
+The application implements a phone number-based authentication system with OTP verification:
+
+1. **Login**: User enters phone number → OTP sent via SMS
+2. **Verification**: User enters OTP code → Validates and creates session
+3. **Registration**: If user doesn't exist, registration flow is triggered
+4. **Terms Agreement**: User must accept terms and conditions
+5. **Session Management**: Tokens stored in AsyncStorage
+
+### Key Authentication Functions
+- `loginWithNomor()`: Initiates OTP sending
+- `validateOtp()`: Verifies OTP and creates session
+- `registerUser()`: Registers new users
+- `logout()`: Clears session and removes tokens
+- `acceptedTerms()`: Handles terms acceptance
+
+## Key Features
+
+### User Management
+- Phone number-based registration and login
+- OTP verification system
+- Terms and conditions agreement
+- User profile management
+
+### Business Features
+- Business field management (admin section)
+- File and image management capabilities
+- Location services integration
+- Push notifications
+
+### UI Components
+- Custom color palette with blue/yellow theme
+- Responsive layouts using SafeAreaView
+- Toast notifications for user feedback
+- Bottom tab navigation and drawer navigation
+
+## Development Conventions
+
+### Naming Conventions
+- Components: PascalCase (e.g., `UserProfile.tsx`)
+- Functions: camelCase (e.g., `getUserData()`)
+- Constants: UPPER_SNAKE_CASE (e.g., `API_BASE_URL`)
+- Files: kebab-case or camelCase for utility files
+
+### Code Organization
+- Components are organized by feature/functionality
+- API services are centralized in the `service/` directory
+- Type definitions are maintained in the `types/` directory
+- Constants are grouped by category in the `constants/` directory
+
+### Styling Approach
+- Color palette defined in `constants/color-palet.ts`
+- Reusable styles and themes centralized
+- Responsive design using React Native's flexbox system
+
+### Testing
+- Linting: `bun run lint` (uses ESLint with Expo config)
+- No specific test framework mentioned in package.json
+
+## Environment Configuration
+
+The application supports multiple environments through:
+- Environment variables loaded via dotenv
+- Expo's extra configuration in `app.config.js`
+- Platform-specific configurations for iOS and Android
+
+### Supported Platforms
+- iOS (with tablet support)
+- Android (with adaptive icons)
+- Web (static output)
+
+## Third-party Integrations
+
+- **Firebase**: Authentication, messaging, and analytics
+- **Mapbox**: Advanced mapping capabilities
+- **React Navigation**: Screen navigation and routing
+- **React Native Paper**: Material Design components
+- **Axios**: HTTP client for API requests
+- **Lodash**: Utility functions
+- **QR Code SVG**: QR code generation
+
+## Important Configuration Files
+
+- `app.config.js`: Expo configuration, app metadata, and plugin setup
+- `eas.json`: EAS build profiles and submission configuration
+- `tsconfig.json`: TypeScript compiler options
+- `package.json`: Dependencies, scripts, and project metadata
+- `metro.config.js`: Metro bundler configuration

android/app/build.gradle

@@ -100,7 +100,7 @@ packagingOptions {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3
+        versionCode 4
         versionName "1.0.1"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,4 @@
-<manifest 
-xmlns:android="http://schemas.android.com/apk/res/android" 
-xmlns:tools="http://schemas.android.com/tools">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
   <uses-permission android:name="android.permission.CAMERA"/>
@@ -17,36 +15,13 @@ xmlns:tools="http://schemas.android.com/tools">
       <data android:scheme="https"/>
     </intent>
   </queries>
-  <application 
-  android:name=".MainApplication" 
-  android:label="@string/app_name" 
-  android:icon="@mipmap/ic_launcher" 
-  android:roundIcon="@mipmap/ic_launcher_round" 
-  android:allowBackup="true" 
-  android:theme="@style/AppTheme" 
-  android:supportsRtl="true" 
-  android:enableOnBackInvokedCallback="false" 
-  android:fullBackupContent="@xml/secure_store_backup_rules" 
-  android:dataExtractionRules="@xml/secure_store_data_extraction_rules">
-    <meta-data 
-    android:name="com.google.firebase.messaging.default_notification_color" 
-    android:resource="@color/notification_icon_color" 
-    tools:replace="android:resource"/>
-    <meta-data 
-    android:name="com.google.firebase.messaging.default_notification_icon" 
-    android:resource="@drawable/notification_icon"/>
-    <meta-data 
-    android:name="expo.modules.notifications.default_notification_color" 
-    android:resource="@color/notification_icon_color"/>
-    <meta-data 
-    android:name="expo.modules.notifications.default_notification_icon" 
-    android:resource="@drawable/notification_icon"/>
-    <meta-data 
-    android:name="expo.modules.updates.ENABLED" 
-    android:value="false"/>
-    <meta-data 
-    android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" 
-    android:value="ALWAYS"/>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false" android:fullBackupContent="@xml/secure_store_backup_rules" android:dataExtractionRules="@xml/secure_store_data_extraction_rules">
+    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color" tools:replace="android:resource"/>
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
     <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
       <intent-filter>

app.config.js

@@ -21,7 +21,7 @@ export default {
         "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
     associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
-    buildNumber: "17",
+    buildNumber: "20",
   },
 
   android: {
@@ -32,7 +32,7 @@ export default {
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 3,
+    versionCode: 4,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {

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
-          onLoad={() => {
-            setIsLoading(false);
+        <View
+          style={{
+            width: "100%",
+            height: "100%",
+            position: "relative",
           }}
-          source={
-            isLoading
-              ? require("@/assets/images/loading.gif")
-              : API_STRORAGE.GET({ fileId: id as string })
-          }
-          contentFit="contain"
-          style={{ width: "100%", height: "100%" }}
-        />
+        >
+          {/* Main Image */}
+          <Image
+            onLoad={() => {
+              setIsLoading(false);
+            }}
+            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)/_layout.tsx

@@ -53,30 +53,35 @@ export default function UserLayout() {
         />
 
         {/* ========== Notification Section ========= */}
-        <Stack.Screen
+
+        {/* DIPINDAH DI FILE NOTIFICATION USER */}
+        {/* <Stack.Screen
           name="notifications/index"
           options={{
             title: "Notifikasi",
             headerLeft: () => <BackButton />,
-            headerRight: () => (
-              <IconPlus
-                color={MainColor.yellow}
-                onPress={() => router.push("/test-notifications")}
-              />
-            ),
+            // headerRight: () => (
+            //   <IconPlus
+            //     color={MainColor.yellow}
+            //     onPress={() => router.push("/test-notifications")}
+            //   />
+            // ),
           }}
-        />
+        /> */}
 
         {/* ========== Event Section ========= */}
+
         <Stack.Screen
           name="event/(tabs)"
           options={{
             title: "Event",
-            headerLeft: () => (
-              <LeftButtonCustom path="/(application)/(user)/home" />
-            ),
+            // NOTE: DIPINDAH DI FILE /Event/(Tabs)/_layout.tsx
+            // headerLeft: () => (
+            //   <LeftButtonCustom path="/(application)/(user)/home" />
+            // ),
           }}
         />
+
         <Stack.Screen
           name="event/create"
           options={{
@@ -519,7 +524,8 @@ export default function UserLayout() {
           name="job/(tabs)"
           options={{
             title: "Job Vacancy",
-            headerLeft: () => <BackButton path="/home" />,
+            // headerLeft: () => <BackButton path="/home" />,
+            // NOTE: headerLeft di pindahkan ke Tabs Layout
           }}
         />
         <Stack.Screen
@@ -610,6 +616,20 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/[id]/preview-report-posting"
+          options={{
+            title: "Laporan Postingan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/preview-report-comment"
+          options={{
+            title: "Laporan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

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/(tabs)/status.tsx

@@ -9,14 +9,16 @@ import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
 import { apiDonationGetByStatus } from "@/service/api-client/api-donation";
-import { useFocusEffect } from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function DonationStatus() {
   const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+
   const [activeCategory, setActiveCategory] = useState<string | null>(
-    "publish"
+    status || "publish",
   );
   const [listData, setListData] = useState<any[] | null>(null);
   const [loadList, setLoadList] = useState(false);
@@ -24,7 +26,7 @@ export default function DonationStatus() {
   useFocusEffect(
     useCallback(() => {
       onLoadList();
-    }, [activeCategory])
+    }, [activeCategory]),
   );
 
   const onLoadList = async () => {

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)/donation/[id]/[status]/detail.tsx

@@ -16,6 +16,7 @@ import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDeta
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { FontAwesome6 } from "@expo/vector-icons";
 import {
   router,
@@ -24,7 +25,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function DonasiDetailStatus() {
   const { id, status } = useLocalSearchParams();
@@ -58,6 +59,27 @@ export default function DonasiDetailStatus() {
     setOpenDrawer(false);
   };
 
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.DonasiMaster_Durasi?.name,
+      publishTime: data?.publishTime,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
+
   return (
     <>
       <Stack.Screen
@@ -74,10 +96,15 @@ export default function DonasiDetailStatus() {
       />
       <ViewWrapper>
         <Donation_ComponentBoxDetailData
+          sisaHari={value.sisa}
+          reminder={value.reminder}
           data={data}
           bottomSection={
             status === "publish" && (
-              <Donation_ProgressSection id={id as string} />
+              <Donation_ProgressSection
+                id={id as string}
+                progres={Number(data?.progres) || 0}
+              />
             )
           }
         />

app/(application)/(user)/donation/create-story.tsx

@@ -103,7 +103,7 @@ export default function DonationCreateStory() {
         type: "success",
         text1: "Donasi berhasil disimpan",
       });
-      router.replace("/donation/status");
+      router.replace("/donation/status?status=review");
     } catch (error) {
       console.log("[ERROR]", error);
     } finally {

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

@@ -4,10 +4,34 @@ import {
   IconHome,
   IconStatus,
 } from "@/components/_Icon";
+import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
-import { Tabs } from "expo-router";
+import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
+import { useLayoutEffect } from "react";
 
 export default function EventTabsLayout() {
+  const navigation = useNavigation();
+
+  const { from, category } = useLocalSearchParams<{
+    from?: string;
+    category?: string;
+  }>();
+
+  console.log("from", from);
+  console.log("category", category);
+
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from as string}
+          category={category as string}
+        />
+      ),
+    });
+  }, [from, router, navigation]);
+
   return (
     <Tabs screenOptions={TabsStyles}>
       <Tabs.Screen

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

@@ -11,15 +11,17 @@ 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 } from "expo-router";
+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>(
-    "publish"
+    status || "publish"
   );
   const [listData, setListData] = useState([]);
   const [loadingGetData, setLoadingGetData] = useState(false);
@@ -73,7 +75,7 @@ export default function EventStatus() {
         listData.map((item: any, i) => (
           <BoxWithHeaderSection
             key={i}
-            href={`/event/${item.id }/${activeCategory}/detail-event`}
+            href={`/event/${item.id}/${activeCategory}/detail-event`}
           >
             <StackCustom gap={"xs"}>
               <Grid>

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

@@ -56,7 +56,7 @@ export default function EventDetailHistory() {
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
       >
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}

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

@@ -1,14 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
+  BackButton,
   ButtonCustom,
   DotButton,
   DrawerCustom,
-  LoaderCustom,
   MenuDrawerDynamicGrid,
   ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { useAuth } from "@/hooks/use-auth";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
@@ -18,23 +19,26 @@ import {
   apiEventGetOne,
   apiEventJoin,
 } from "@/service/api-client/api-event";
+import dayjs from "dayjs";
 import {
+  Redirect,
   router,
   Stack,
   useFocusEffect,
   useLocalSearchParams,
 } from "expo-router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function EventDetailPublish() {
-  const { id } = useLocalSearchParams();
+  const now = new Date().toISOString();
   const { user } = useAuth();
+  const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [isLoadingData, setIsLoadingData] = useState(false);
   const [isLoadingJoin, setIsLoadingJoin] = useState(false);
 
-  const [data, setData] = useState();
+  const [data, setData] = useState<any>();
   const [isParticipant, setIsParticipant] = useState<boolean | null>(null);
 
   useFocusEffect(
@@ -55,8 +59,6 @@ export default function EventDetailPublish() {
           userId: user?.id as string,
         });
 
-        console.log("[RES CHECK PARTICIPANTS]", responseCheckParticipants);
-
         if (
           responseCheckParticipants.success &&
           responseCheckParticipants.data
@@ -108,7 +110,24 @@ export default function EventDetailPublish() {
     }
   };
 
-  const footerButton = () => {
+  const isEventFinished =
+    id && data?.tanggalSelesai && dayjs(data.tanggalSelesai).isBefore(now);
+
+  useEffect(() => {
+    if (isEventFinished) {
+      router.replace(`/(application)/(user)/event/${id}/history`);
+    }
+  }, [isEventFinished, id]);
+
+  if (isEventFinished) {
+    return (
+      <ViewWrapper>
+        <CustomSkeleton />
+      </ViewWrapper>
+    );
+  }
+
+  const FooterButton = () => {
     return (
       <>
         <ButtonCustom
@@ -138,17 +157,17 @@ export default function EventDetailPublish() {
       <Stack.Screen
         options={{
           title: `Event Publish`,
-          headerLeft: () => <LeftButtonCustom />,
+          headerLeft: () => <BackButton onPress={() => router.back()} />,
           headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
       <ViewWrapper>
         {isLoadingData ? (
-          <LoaderCustom />
+          <CustomSkeleton height={400} />
         ) : (
           <Event_BoxDetailPublishSection
             data={data}
-            footerButton={footerButton()}
+            footerButton={FooterButton()}
           />
         )}
       </ViewWrapper>

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

@@ -14,7 +14,7 @@ import { apiEventCreate } from "@/service/api-client/api-event";
 import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router } from "expo-router";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 interface EventCreateProps {
@@ -78,23 +78,6 @@ export default function EventCreate() {
       return;
     }
 
-    // if (selectedDate) {
-    //   console.log("Tanggal yang dipilih:", selectedDate);
-    //   console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
-
-    //   // Kirim ke API atau proses lanjutan
-    // } else {
-    //   console.log("Tanggal belum dipilih");
-    // }
-
-    // if (selectedEndDate) {
-    //   console.log("Tanggal yang dipilih:", selectedEndDate);
-    //   console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
-    //   // Kirim ke API atau proses lanjutan
-    // } else {
-    //   console.log("Tanggal berakhir belum dipilih");
-    // }
-
     try {
       setIsLoading(true);
 
@@ -110,7 +93,7 @@ export default function EventCreate() {
       const response = await apiEventCreate(newData);
       console.log("Response", JSON.stringify(response, null, 2));
 
-      router.replace("/event/status");
+      router.replace("/event/status?status=review");
     } catch (error) {
       console.log(error);
     } finally {

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

@@ -1,271 +1,11 @@
-import {
-  ButtonCustom,
-  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 { isBadContent } from "@/utils/badWordsIndonesia";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
-import { Alert } from "react-native";
-
-interface CommentProps {
-  id: string;
-  isActive: boolean;
-  komentar: string;
-  createdAt: Date;
-  authorId: string;
-  Author: {
-    id: string;
-    username: string;
-    Profile: {
-      id: string;
-      imageId: string;
-    };
-  };
-}
+import DetailForum from "@/screens/Forum/DetailForum";
+import DetailForum2 from "@/screens/Forum/DetailForum2";
 
 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<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>
-        {!data && !listComment ? (
-          <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>
+     {/* <DetailForum />; */}
+     <DetailForum2 />
     </>
-  );
+  )
 }

app/(application)/(user)/forum/[id]/other-report-commentar.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiForumCreateReportCommentar } from "@/service/api-client/api-master";
+import { apiForumCreateReportCommentar } from "@/service/api-client/api-forum";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import Toast from "react-native-toast-message";

app/(application)/(user)/forum/[id]/other-report-posting.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiForumCreateReportPosting } from "@/service/api-client/api-master";
+import { apiForumCreateReportPosting } from "@/service/api-client/api-forum";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import Toast from "react-native-toast-message";

app/(application)/(user)/forum/[id]/preview-report-comment.tsx

@@ -0,0 +1,91 @@
+import {
+  BaseBox,
+  NewWrapper,
+  Spacing,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import { apiForumGetReportComment } from "@/service/api-client/api-forum";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function ForumPreviewReportComment() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [listData, setListData] = useState<any | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  // Status
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  const onLoadData = async (id: string) => {
+    try {
+      setLoading(true);
+      const response = await apiForumGetReportComment({ id });
+      setData(response.data);
+      setListData(response?.data?.Forum_ReportKomentar);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <NewWrapper>
+        <StackCustom>
+          <TextCustom color="red" bold>
+            Komentar anda telah melanggar aturan forum ! Admin mengambil
+            tindakan untuk menghapus komentar anda!
+          </TextCustom>
+          {loading ? (
+            <CustomSkeleton height={100} />
+          ) : (
+            <BaseBox>
+              <TextCustom>"{data?.komentar ? data?.komentar : "-"}"</TextCustom>
+            </BaseBox>
+          )}
+        </StackCustom>
+
+        <Spacing height={10} />
+        <TextCustom bold>Beberapa laporan yang telah diterima</TextCustom>
+        <Spacing height={10} />
+
+        {loading ? (
+          <ListSkeletonComponent />
+        ) : _.isEmpty(listData) ? (
+          <NoDataText />
+        ) : (
+          listData?.map((e: any, index: number) => (
+             <BaseBox key={index}>
+                {e?.deskripsi ? (
+                  <StackCustom gap={"sm"}>
+                    <TextCustom bold>Laporan Lainnya</TextCustom>
+                    <TextCustom>{e?.deskripsi}</TextCustom>
+                  </StackCustom>
+                ) : (
+                  <StackCustom gap={"sm"}>
+                    <TextCustom bold>
+                      {e?.ForumMaster_KategoriReport?.title}
+                    </TextCustom>
+                    <TextCustom>
+                      {e?.ForumMaster_KategoriReport?.deskripsi}
+                    </TextCustom>
+                  </StackCustom>
+                )}
+              </BaseBox>
+          ))
+        )}
+      </NewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/preview-report-posting.tsx

@@ -0,0 +1,91 @@
+import {
+  BaseBox,
+  NewWrapper,
+  Spacing,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import { apiForumGetReportPosting } from "@/service/api-client/api-forum";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+
+export default function ForumPreviewReportPosting() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [listData, setListData] = useState<any | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  // Status
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData(id as string);
+    }, [id])
+  );
+
+  const onLoadData = async (id: string) => {
+    try {
+      setLoading(true);
+      const response = await apiForumGetReportPosting({ id });
+      setData(response.data);
+      setListData(response?.data?.Forum_ReportPosting);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <NewWrapper>
+        <StackCustom>
+          <TextCustom color="red" bold>
+            Postingan anda telah melanggar aturan forum ! Admin mengambil
+            tindakan untuk menghapus komentar anda!
+          </TextCustom>
+          {loading ? (
+            <CustomSkeleton height={100} />
+          ) : (
+            <BaseBox>
+              <TextCustom>"{data?.diskusi ? data?.diskusi : "-"}"</TextCustom>
+            </BaseBox>
+          )}
+        </StackCustom>
+
+        <Spacing height={10} />
+        <TextCustom bold>Beberapa laporan yang telah diterima</TextCustom>
+        <Spacing height={10} />
+
+        {loading ? (
+          <ListSkeletonComponent />
+        ) : _.isEmpty(listData) ? (
+          <NoDataText />
+        ) : (
+          listData?.map((e: any) => (
+            <BaseBox key={e?.id}>
+              {e?.deskripsi ? (
+                <StackCustom gap={"sm"}>
+                  <TextCustom bold>Laporan Lainnya</TextCustom>
+                  <TextCustom>{e?.deskripsi}</TextCustom>
+                </StackCustom>
+              ) : (
+                <StackCustom gap={"sm"}>
+                  <TextCustom bold>
+                    {e?.ForumMaster_KategoriReport?.title}
+                  </TextCustom>
+                  <TextCustom>
+                    {e?.ForumMaster_KategoriReport?.deskripsi}
+                  </TextCustom>
+                </StackCustom>
+              )}
+            </BaseBox>
+          ))
+        )}
+      </NewWrapper>
+    </>
+  );
+}

app/(application)/(user)/forum/[id]/report-commentar.tsx

@@ -8,7 +8,8 @@ import {
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { apiForumCreateReportCommentar, apiMasterForumReportList } from "@/service/api-client/api-master";
+import { apiForumCreateReportCommentar } from "@/service/api-client/api-forum";
+import { apiMasterForumReportList } from "@/service/api-client/api-master";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState, useEffect } from "react";
 import Toast from "react-native-toast-message";

app/(application)/(user)/forum/[id]/report-posting.tsx

@@ -9,8 +9,8 @@ import {
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
+import { apiForumCreateReportPosting } from "@/service/api-client/api-forum";
 import {
-  apiForumCreateReportPosting,
   apiMasterForumReportList,
 } from "@/service/api-client/api-master";
 import { router, useLocalSearchParams } from "expo-router";

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

@@ -2,15 +2,14 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   TextAreaCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import AlertWarning from "@/components/Alert/AlertWarning";
 import { useAuth } from "@/hooks/use-auth";
 import { apiForumCreate } from "@/service/api-client/api-forum";
-import { isBadContent } from "@/utils/badWordsIndonesia";
+import { censorText, isBadContent } from "@/utils/badWordsIndonesia";
 import { router } from "expo-router";
 import { useState } from "react";
-import { Alert } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function ForumCreate() {
@@ -19,16 +18,22 @@ export default function ForumCreate() {
   const [isLoading, setIsLoading] = useState(false);
 
   const handlerSubmit = async () => {
-    
-    if (isBadContent(text)) {
-      AlertWarning({})
+    if (text.trim() === "") {
+      AlertWarning({
+        title: "Lengkapi Data",
+        description: "Postingan tidak boleh kosong",
+      });
       return;
     }
-    
+
+    // Bisa di sensor atau return dan tidak bisa di post
+    const cencorContent = censorText(text)
+
     const newData = {
-      diskusi: text,
+      diskusi: cencorContent,
       authorId: user?.id,
     };
+
     try {
       setIsLoading(true);
       const response = await apiForumCreate({ data: newData });
@@ -50,6 +55,7 @@ export default function ForumCreate() {
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
+        disabled={!text.trim() || isLoading}
         isLoading={isLoading}
         onPress={() => {
           handlerSubmit();

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)/home.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ButtonCustom, StackCustom, ViewWrapper } from "@/components";
+import { StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { useNotificationStore } from "@/hooks/use-notification-store";
@@ -23,14 +23,12 @@ export default function Application() {
   const [refreshing, setRefreshing] = useState(false);
   const { syncUnreadCount } = useNotificationStore();
 
-
-
   useFocusEffect(
     useCallback(() => {
       onLoadData();
       checkVersion();
       userData(token as string);
-      syncUnreadCount()
+      syncUnreadCount();
     }, [user?.id, token])
   );
 
@@ -56,10 +54,10 @@ export default function Application() {
     setRefreshing(false);
   }, []);
 
-  if (user && user?.termsOfServiceAccepted === false) {
-    console.log("User is not accept term service");
-    return <Redirect href={`/terms-agreement`} />;
-  }
+  // if (user && user?.termsOfServiceAccepted === false) {
+  //   console.log("User is not accept term service");
+  //   return <Redirect href={`/terms-agreement`} />;
+  // }
 
   if (data && data?.active === false) {
     console.log("User is not active");

app/(application)/(user)/investment/(tabs)/_layout.tsx

@@ -1,9 +1,33 @@
+import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
+import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
+import { useLayoutEffect } from "react";
 
 export default function InvestmentTabsLayout() {
+  // const navigation = useNavigation();
+
+  // const { from, category } = useLocalSearchParams<{
+  //   from?: string;
+  //   category?: string;
+  // }>();
+
+  // console.log("from", from);
+  // console.log("category", category);
+
+  // // Atur header secara dinamis
+  // useLayoutEffect(() => {
+  //   navigation.setOptions({
+  //     headerLeft: () => (
+  //       <BackButtonFromNotification
+  //         from={from as string}
+  //         category={category as string}
+  //       />
+  //     ),
+  //   });
+  // }, [from, router, navigation]);
+
   return (
     <Tabs screenOptions={TabsStyles}>
       <Tabs.Screen

app/(application)/(user)/investment/(tabs)/my-holding.tsx

@@ -11,9 +11,7 @@ import {
 } from "@/components";
 import NoDataText from "@/components/_ShareComponent/NoDataText";
 import { useAuth } from "@/hooks/use-auth";
-import {
-  apiInvestmentGetAll
-} from "@/service/api-client/api-investment";
+import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
@@ -63,37 +61,20 @@ export default function InvestmentMyHolding() {
               router.push(`/investment/${item?.id}/(my-holding)/${item?.id}`)
             }
           >
-            <Grid>
-              <Grid.Col span={6}>
-                <StackCustom gap={"xs"}>
-                  <TextCustom truncate={2}>{item?.title}</TextCustom>
-
-                  <Spacing height={5} />
-                  <TextCustom size="small">
-                    Rp. {formatCurrencyDisplay(item?.nominal)}
-                  </TextCustom>
-                  <TextCustom size="small">
-                    {item?.lembarTerbeli} Lembar
-                  </TextCustom>
-                </StackCustom>
-              </Grid.Col>
-              <Grid.Col span={1}>
-                <View />
-              </Grid.Col>
-              <Grid.Col
-                span={5}
-                style={{
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <ProgressCustom
-                  value={item?.progress}
-                  label={`${item?.progress}%`}
-                  size="lg"
-                />
-              </Grid.Col>
-            </Grid>
+            <StackCustom>
+              <TextCustom truncate={2}>{item?.title}</TextCustom>
+              <TextCustom>
+                Rp. {formatCurrencyDisplay(item?.nominal)}
+              </TextCustom>
+              <TextCustom>{item?.lembarTerbeli} Lembar</TextCustom>
+              <ProgressCustom
+                label={`${item.progress}%`}
+                value={Number(item.progress)}
+                size="lg"
+                animated
+                color="primary"
+              />
+            </StackCustom>
           </BaseBox>
         ))
       )}

app/(application)/(user)/investment/(tabs)/portofolio.tsx

@@ -9,14 +9,16 @@ import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import Investment_StatusBox from "@/screens/Invesment/StatusBox";
 import { apiInvestmentGetByStatus } from "@/service/api-client/api-investment";
-import { useFocusEffect } from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function InvestmentPortofolio() {
   const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+
   const [activeCategory, setActiveCategory] = useState<string | null>(
-    "publish"
+    status || "publish"
   );
 
   const [listData, setListData] = useState<any[]>([]);

app/(application)/(user)/investment/[id]/(news)/add-news.tsx

@@ -115,7 +115,11 @@ export default function InvestmentAddNews() {
           onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
-        <ButtonCustom isLoading={isLoading} onPress={handlerSubmit}>
+        <ButtonCustom
+          disabled={!data.title || !data.deskripsi || isLoading}
+          isLoading={isLoading}
+          onPress={handlerSubmit}
+        >
           Simpan
         </ButtonCustom>
       </StackCustom>

app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx

@@ -27,7 +27,6 @@ import Toast from "react-native-toast-message";
 
 export default function InvestmentInvoice() {
   const { id } = useLocalSearchParams();
-  console.log("[ID]", id);
   const [data, setData] = useState<any>({});
   const [image, setImage] = useState<IFileData>({
     name: "",
@@ -49,7 +48,6 @@ export default function InvestmentInvoice() {
         category: "invoice",
       });
 
-      console.log("[RES INVOICE]", JSON.stringify(response.data, null, 2));
       setData(response.data);
     } catch (error) {
       console.log("[ERROR]", error);
@@ -64,8 +62,6 @@ export default function InvestmentInvoice() {
         imageUri: image?.uri,
       });
 
-      console.log("[RESPONSE UPLOAD IMAGE]", responseUploadImage);
-
       if (!responseUploadImage?.data?.id) {
         Toast.show({
           type: "error",
@@ -83,10 +79,6 @@ export default function InvestmentInvoice() {
       });
 
       if (response.success) {
-        console.log(
-          "[RESPONSE UPDATE]",
-          JSON.stringify(response.data, null, 2)
-        );
         Toast.show({
           type: "success",
           text1: "Berhasil mengunggah bukti transfer",
@@ -210,7 +202,6 @@ export default function InvestmentInvoice() {
                   pickFile({
                     allowedType: "image",
                     setImageUri(file: any) {
-                      console.log("[IMAGE]", file);
                       setImage(file);
                     },
                   });
@@ -224,7 +215,7 @@ export default function InvestmentInvoice() {
 
           <ButtonCustom
             isLoading={isLoading}
-            disabled={!image}
+            disabled={!image || isLoading}
             onPress={() => {
               handlerSubmitUpdate();
             }}

app/(application)/(user)/investment/[id]/[status]/detail.tsx

@@ -15,6 +15,7 @@ import Investment_ButtonInvestasiSection from "@/screens/Invesment/ButtonInvesta
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
 import { apiInvestmentGetOne } from "@/service/api-client/api-investment";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import {
   router,
@@ -23,7 +24,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function InvestmentDetailStatus() {
   const { user } = useAuth();
@@ -63,6 +64,29 @@ export default function InvestmentDetailStatus() {
     setOpenDrawerPublish(false);
   };
 
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.MasterPencarianInvestor.name,
+      publishTime: data?.countDown,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
+
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
       id={data?.id}
@@ -72,7 +96,11 @@ export default function InvestmentDetailStatus() {
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} />
+    <Investment_ButtonInvestasiSection
+      id={id as string}
+      isMine={user?.id === data?.author?.id}
+      reminder={value.reminder}
+    />
   );
 
   return (

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

@@ -18,10 +18,7 @@ import {
   apiInvestmentUpdateData,
 } from "@/service/api-client/api-investment";
 import { apiMasterInvestment } from "@/service/api-client/api-master";
-import {
-  deleteFileService,
-  uploadFileService,
-} from "@/service/upload-service";
+import { deleteFileService, uploadFileService } from "@/service/upload-service";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import pickFile from "@/utils/pickFile";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -70,7 +67,7 @@ export default function InvestmentEdit() {
     useCallback(() => {
       onLoadMaster();
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadMaster = async () => {
@@ -178,7 +175,7 @@ export default function InvestmentEdit() {
       const responseUpdate = await apiInvestmentUpdateData({
         id: id as string,
         data: newData,
-        category: "data"
+        category: "data",
       });
 
       if (responseUpdate.success) {
@@ -256,6 +253,7 @@ export default function InvestmentEdit() {
         />
 
         <TextInputCustom
+          disabled
           required
           placeholder="0"
           label="Total Lembar"

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

@@ -63,30 +63,28 @@ export default function InvestmentDetail() {
     setOpenDrawerPublish(false);
   };
 
-    const [value, setValue] = useState({
-      sisa: 0,
-      reminder: false,
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.MasterPencarianInvestor.name,
+      publishTime: data?.countDown,
     });
-  
-    useEffect(() => {
-      updateCountDown();
-    }, [data]);
-
-    console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));
-  
-    const updateCountDown = () => {
-      const countDown = countDownAndCondition({
-        duration: data?.MasterPencarianInvestor.name,
-        publishTime: data?.countDown,
-      });
-  
-      setValue({
-        sisa: countDown.durationDay,
-        reminder: countDown.reminder,
-      });
-    };
-
 
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
 
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
@@ -97,7 +95,11 @@ export default function InvestmentDetail() {
   );
 
   const buttonSection = (
-    <Investment_ButtonInvestasiSection id={id as string} isMine={user?.id === data?.author?.id} reminder={value.reminder} />
+    <Investment_ButtonInvestasiSection
+      id={id as string}
+      isMine={user?.id === data?.author?.id}
+      reminder={value.reminder}
+    />
   );
 
   return (

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

@@ -54,7 +54,7 @@ export default function InvestmentCreate() {
   useFocusEffect(
     useCallback(() => {
       onLoadMaster();
-    }, [])
+    }, []),
   );
 
   const onLoadMaster = async () => {
@@ -167,7 +167,7 @@ export default function InvestmentCreate() {
           text1: "Berhasil",
           text2: response.message,
         });
-        router.replace("/investment/portofolio");
+        router.replace("/investment/portofolio?status=review");
       } else {
         Toast.show({
           type: "error",
@@ -224,7 +224,6 @@ export default function InvestmentCreate() {
           onPress={() => {
             pickFile({
               setPdfUri: ({ uri, name, size }) => {
-
                 setPdf({ uri, name, size });
               },
               allowedType: "pdf",
@@ -265,6 +264,7 @@ export default function InvestmentCreate() {
 
         <StackCustom gap={0}>
           <TextInputCustom
+            disabled
             required
             placeholder="0"
             label="Total Lembar"
@@ -357,7 +357,11 @@ export default function InvestmentCreate() {
         )}
 
         <Spacing />
-        <ButtonCustom isLoading={isLoading} onPress={() => handleSubmit()}>
+        <ButtonCustom
+          disabled={isLoading}
+          isLoading={isLoading}
+          onPress={() => handleSubmit()}
+        >
           Simpan
         </ButtonCustom>
       </StackCustom>

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

@@ -1,34 +1,61 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { BackButton } from "@/components";
 import { IconHome, IconStatus } from "@/components/_Icon";
+import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
+import {
+  router,
+  Tabs,
+  useLocalSearchParams,
+  useNavigation
+} from "expo-router";
+import { useLayoutEffect } from "react";
 
 export default function JobTabsLayout() {
+  const navigation = useNavigation();
+
+  const { from, category } = useLocalSearchParams<{
+    from?: string;
+    category?: string;
+  }>();
+
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+       <BackButtonFromNotification from={from as string} category={category as string} />
+      ),
+    });
+  }, [from, router, navigation]);
+
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="status"
-        options={{
-          title: "Status",
-          tabBarIcon: ({ color }) => <IconStatus color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="archive"
-        options={{
-          title: "Arsip",
-          tabBarIcon: ({ color }) => (
-            <Ionicons size={20} name="archive" color={color} />
-          ),
-        }}
-      />
-    </Tabs>
+    <>
+      <Tabs screenOptions={TabsStyles}>
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Beranda",
+            tabBarIcon: ({ color }) => <IconHome color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="status"
+          options={{
+            title: "Status",
+            tabBarIcon: ({ color }) => <IconStatus color={color} />,
+          }}
+        />
+        <Tabs.Screen
+          name="archive"
+          options={{
+            title: "Arsip",
+            tabBarIcon: ({ color }) => (
+              <Ionicons size={20} name="archive" color={color} />
+            ),
+          }}
+        />
+      </Tabs>
+    </>
   );
 }

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

@@ -9,14 +9,17 @@ import {
 import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { apiJobGetByStatus } from "@/service/api-client/api-job";
-import { useFocusEffect } from "expo-router";
+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>(
-    "publish"
+    status || "publish"
   );
   const [listData, setListData] = useState<any[]>([]);
   const [isLoadList, setIsLoadList] = useState(false);
@@ -60,25 +63,29 @@ export default function JobStatus() {
   );
 
   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>
+    <>
+      <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>
+    </>
   );
 }

app/(application)/(user)/job/[id]/[status]/detail.tsx

@@ -74,7 +74,7 @@ export default function JobDetailStatus() {
             <StackCustom gap={"xs"}>
               {data &&
                 data?.catatan &&
-                (status === "draft" || status === "rejected") && (
+                (status === "draft" || status === "reject") && (
                   <ReportBox text={data?.catatan} />
                 )}
                 

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

@@ -25,6 +25,8 @@ export default function JobDetail() {
       setIsLoading(true);
       const response = await apiJobGetOne({ id: id as string });
 
+      console.log("DATA", JSON.stringify(response.data, null,2));
+
       setData(response.data);
     } catch (error) {
       console.log("[ERROR]", error);

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

@@ -19,7 +19,7 @@ import { useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function JobCreate() {
-  const nextUrl = "/(application)/(user)/job/(tabs)/status";
+  const nextUrl = "/(application)/(user)/job/(tabs)/status?status=review";
   const { user } = useAuth();
   const [isLoading, setIsLoading] = useState(false);
   const [image, setImage] = useState<string | null>(null);

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

@@ -1,26 +1,60 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  AlertDefaultSystem,
+  BackButton,
   BaseBox,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
   NewWrapper,
   ScrollableCustom,
   StackCustom,
-  TextCustom
+  TextCustom,
 } from "@/components";
+import { IconDot } from "@/components/_Icon/IconComponent";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import { AccentColor } from "@/constants/color-palet";
+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 { router, useFocusEffect } from "expo-router";
+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);
+  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,
@@ -28,18 +62,28 @@ const BoxNotification = ({
   data: any;
   activeCategory: string | null;
 }) => {
+  // console.log("DATA NOTIFICATION", JSON.stringify(data, null, 2));
   const { markAsRead } = useNotificationStore();
   return (
     <>
       <BaseBox
         backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
         onPress={() => {
-          console.log(
-            "Notification >",
-            selectedCategory(activeCategory as string)
-          );
-          router.push(data.deepLink);
-          markAsRead(data.id);
+          // 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>
@@ -60,10 +104,16 @@ const BoxNotification = ({
 
 export default function Notifications() {
   const { user } = useAuth();
-  const [activeCategory, setActiveCategory] = useState<string | null>("event");
+  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);
@@ -83,7 +133,7 @@ export default function Notifications() {
         id: user?.id as any,
         category: activeCategory as any,
       });
-      // console.log("Response Notification", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setListData(response.data);
       } else {
@@ -103,31 +153,96 @@ export default function Notifications() {
   };
 
   return (
-    <NewWrapper
-      headerComponent={
-        <ScrollableCustom
-          data={listOfcategoriesAppNotification.map((e, i) => ({
-            id: i,
-            label: e.label,
-            value: e.value,
-          }))}
-          onButtonPress={handlePress}
-          activeId={activeCategory as string}
+    <>
+     <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);
+                },
+              });
+            }
+          }}
         />
-      }
-      refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-      }
-    >
-      {loading ? (
-        <ListSkeletonComponent/>
-      ) : (
-        listData.map((e, i) => (
-          <View key={i}>
-            <BoxNotification data={e} activeCategory={activeCategory as any} />
-          </View>
-        ))
-      )}
-    </NewWrapper>
+      </DrawerCustom>
+    </>
   );
 }

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

@@ -139,7 +139,9 @@ const ButtonnDot = ({
   isUserCheck: boolean;
   logout: () => Promise<void>;
 }) => {
-  const isId = id === undefined || id === null;
+  console.log("[ID] >>", id);
+
+  const isId = id === undefined || id === "undefined";
 
   if (isId) {
     return (

app/(application)/(user)/profile/_layout.tsx

@@ -36,7 +36,7 @@ export default function ProfileLayout() {
 
         <Stack.Screen
           name="[id]/blocked-list"
-          options={{ title: "Blocked List", headerLeft: () => <BackButton /> }}
+          options={{ title: "Daftar Blokir", headerLeft: () => <BackButton /> }}
         />
 
         <Stack.Screen

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

@@ -1,115 +1,11 @@
-import {
-  AvatarComp,
-  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";
+import UserSearchMainView from "@/screens/UserSeach/MainView";
+import UserSearchMainView_V2 from "@/screens/UserSeach/MainView_V2";
 
 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
-        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>
+      {/* <UserSearchMainView /> */}
+      <UserSearchMainView_V2 />
     </>
   );
 }

app/(application)/(user)/voting/(tabs)/_layout.tsx

@@ -1,13 +1,37 @@
 import {
-    IconContribution,
-    IconHistory,
-    IconHome,
-    IconStatus,
+  IconContribution,
+  IconHistory,
+  IconHome,
+  IconStatus,
 } from "@/components/_Icon";
+import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
-import { Tabs } from "expo-router";
+import { Tabs, useLocalSearchParams, useNavigation, router } from "expo-router";
+import { useLayoutEffect } from "react";
 
 export default function VotingTabsLayout() {
+  const navigation = useNavigation();
+
+  const { from, category } = useLocalSearchParams<{
+    from?: string;
+    category?: string;
+  }>();
+
+  console.log("from", from);
+  console.log("category", category);
+
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from as string}
+          category={category as string}
+        />
+      ),
+    });
+  }, [from, router, navigation]);
+
   return (
     <Tabs screenOptions={TabsStyles}>
       <Tabs.Screen

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

@@ -12,15 +12,17 @@ import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { apiVotingGetByStatus } from "@/service/api-client/api-voting";
 import { dateTimeView } from "@/utils/dateTimeView";
-import { useFocusEffect } from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function VotingStatus() {
   const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+
   const id = user?.id || "";
   const [activeCategory, setActiveCategory] = useState<string | null>(
-    "publish"
+    status || "publish"
   );
 
   const [listData, setListData] = useState([]);
@@ -86,8 +88,14 @@ export default function VotingStatus() {
                 style={{ width: "70%", alignSelf: "center" }}
                 variant="light"
               >
-                {item?.awalVote && dateTimeView({date: item?.awalVote, withoutTime: true})} -{" "}
-                {item?.akhirVote && dateTimeView({date: item?.akhirVote, withoutTime: true})}
+                {item?.awalVote &&
+                  dateTimeView({
+                    date: item?.awalVote,
+                    withoutTime: true,
+                  })}{" "}
+                -{" "}
+                {item?.akhirVote &&
+                  dateTimeView({ date: item?.akhirVote, withoutTime: true })}
               </BadgeCustom>
             </StackCustom>
           </BaseBox>

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

@@ -13,6 +13,7 @@ import {
 } from "@/components";
 import { IconArchive, IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { useAuth } from "@/hooks/use-auth";
 import Voting_BoxDetailHasilVotingSection from "@/screens/Voting/BoxDetailHasilVotingSection";
 import { Voting_BoxDetailPublishSection } from "@/screens/Voting/BoxDetailPublishSection";
@@ -22,13 +23,14 @@ import {
   apiVotingUpdateData,
 } from "@/service/api-client/api-voting";
 import { today } from "@/utils/dateTimeView";
+import dayjs from "dayjs";
 import {
   router,
   Stack,
   useFocusEffect,
   useLocalSearchParams,
 } from "expo-router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function VotingDetail() {
@@ -119,6 +121,23 @@ export default function VotingDetail() {
     setOpenDrawerPublish(false);
   };
 
+  const now = new Date().toISOString();
+  const isEventFinished = id && data?.akhirVote && dayjs(data.akhirVote).isBefore(now);
+
+  useEffect(() => {
+    if (isEventFinished) {
+      router.replace(`/(application)/(user)/voting/${id}/history`);
+    }
+  }, [isEventFinished, id]);
+
+  if (isEventFinished) {
+    return (
+      <ViewWrapper>
+        <CustomSkeleton />
+      </ViewWrapper>
+    );
+  }
+
   return (
     <>
       <Stack.Screen

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

@@ -79,7 +79,7 @@ export default function VotingCreate() {
           type: "success",
           text1: "Data berhasil disimpan",
         });
-        router.replace("/(application)/(user)/voting/(tabs)/status");
+        router.replace("/(application)/(user)/voting/(tabs)/status?status=review");
       } else {
         Toast.show({
           type: "error",

app/(application)/(user)/waiting-room.tsx

@@ -1,12 +1,10 @@
 import {
   AlertDefaultSystem,
   BoxButtonOnFooter,
-  ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   NewWrapper,
-  StackCustom,
-  ViewWrapper,
+  StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";

app/(application)/admin/donation/[id]/[status]/transaction-detail.tsx

@@ -1,4 +1,5 @@
 import {
+  AlertDefaultSystem,
   BadgeCustom,
   BaseBox,
   BoxButtonOnFooter,
@@ -9,6 +10,7 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import { useAuth } from "@/hooks/use-auth";
 import {
   apiAdminDonationInvoiceDetailById,
   apiAdminDonationInvoiceUpdateById,
@@ -22,6 +24,7 @@ import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminDonasiTransactionDetail() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   console.log("[STATUS]", id, status);
 
@@ -33,7 +36,7 @@ export default function AdminDonasiTransactionDetail() {
       onLoadData();
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -57,6 +60,7 @@ export default function AdminDonasiTransactionDetail() {
       const newData = {
         donationId: data?.donasiId,
         nominal: data?.nominal,
+        senderId: user?.id,
       };
 
       const response = await apiAdminDonationInvoiceUpdateById({
@@ -97,7 +101,15 @@ export default function AdminDonasiTransactionDetail() {
           <ButtonCustom
             isLoading={isLoading}
             onPress={() => {
-              handlerSubmit();
+              AlertDefaultSystem({
+                title: "Konfirmasi transaksi",
+                message: "Apakah anda yakin ingin menyetujui transaksi ini?",
+                textLeft: "Tidak",
+                textRight: "Ya",
+                onPressRight: () => {
+                  handlerSubmit();
+                },
+              });
             }}
           >
             Terima donasi
@@ -109,7 +121,7 @@ export default function AdminDonasiTransactionDetail() {
     return (
       <BoxButtonOnFooter>
         <ButtonCustom disabled>
-           {data?.DonasiMaster_StatusInvoice?.name}
+          {data?.DonasiMaster_StatusInvoice?.name}
         </ButtonCustom>
       </BoxButtonOnFooter>
     );
@@ -140,7 +152,7 @@ export default function AdminDonasiTransactionDetail() {
             })}
           >
             {_.startCase(
-              (data?.DonasiMaster_StatusInvoice?.name as any) || "-"
+              (data?.DonasiMaster_StatusInvoice?.name as any) || "-",
             )}
           </BadgeCustom>
         )) ||
@@ -157,7 +169,7 @@ export default function AdminDonasiTransactionDetail() {
           <ButtonCustom
             onPress={() =>
               router.push(
-                `/(application)/(image)/preview-image/${data?.imageId}`
+                `/(application)/(image)/preview-image/${data?.imageId}`,
               )
             }
           >

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/donation/[id]/reject-input.tsx

@@ -7,15 +7,15 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { useAuth } from "@/hooks/use-auth";
 import { funUpdateStatusDonation } from "@/screens/Admin/Donation/funDonationUpdateStatus";
-import {
-  apiAdminDonationDetailById
-} from "@/service/api-admin/api-admin-donation";
+import { apiAdminDonationDetailById } from "@/service/api-admin/api-admin-donation";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import React from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminDonationRejectInput() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
 
   const [data, setData] = React.useState<any | null>(null);
@@ -24,7 +24,7 @@ export default function AdminDonationRejectInput() {
   useFocusEffect(
     React.useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -48,11 +48,23 @@ export default function AdminDonationRejectInput() {
     changeStatus: "publish" | "review" | "reject";
   }) => {
     try {
+      if (!user?.id) {
+        Toast.show({
+          type: "error",
+          text1: "User tidak ditemukan",
+        });
+
+        return;
+      }
+
       setIsLoading(true);
       const response = await funUpdateStatusDonation({
         id: id as string,
         changeStatus,
-        data: data,
+        data: {
+          senderId: user?.id as string,
+          catatan: data,
+        },
       });
 
       if (!response.success) {
@@ -61,7 +73,7 @@ export default function AdminDonationRejectInput() {
           text1: "Report gagal",
         });
 
-        return
+        return;
       }
 
       Toast.show({

app/(application)/admin/event/[id]/[status]/index.tsx

@@ -41,8 +41,8 @@ export default function AdminEventDetail() {
   const deepLinkURL = `${DEEP_LINK_URL}/event/${id}/confirmation?userId=${user?.id}`;
   const deepLinkURLDEV = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
 
-  const isDevLink = process.env.NODE_ENV === "development" ? deepLinkURLDEV : deepLinkURL;
-
+  const isDevLink =
+    process.env.NODE_ENV === "development" ? deepLinkURLDEV : deepLinkURL;
 
   useFocusEffect(
     useCallback(() => {
@@ -126,6 +126,7 @@ export default function AdminEventDetail() {
       const response = await funUpdateStatusEvent({
         id: id as string,
         changeStatus: "publish",
+        data: { catatan: "", senderId: user?.id as string },
       });
 
       if (!response.success) {

app/(application)/admin/event/[id]/reject-input.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { useAuth } from "@/hooks/use-auth";
 import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
 import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -14,9 +15,13 @@ import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminEventRejectInput() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
 
-  const [data, setData] = useState<any>("");
+  const [data, setData] = useState<any>({
+    catatan: "",
+    senderId: "",
+  });
   const [isLoading, setIsLoading] = useState(false);
 
   useFocusEffect(
@@ -45,10 +50,16 @@ export default function AdminEventRejectInput() {
   }) => {
     try {
       setIsLoading(true);
+
+      const newData = {
+        catatan: data,
+        senderId: user?.id as string,
+      };
+
       const response = await funUpdateStatusEvent({
         id: id as string,
         changeStatus,
-        data: data,
+        data: newData,
       });
 
       if (!response.success) {

app/(application)/admin/forum/[id]/list-report-comment.tsx

@@ -15,12 +15,11 @@ import { IconDot, IconView } from "@/components/_Icon/IconComponent";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import {
   apiAdminForumCommentById,
   apiAdminForumDeactivateComment,
@@ -35,6 +34,7 @@ import Toast from "react-native-toast-message";
 
 export default function AdminForumReportComment() {
   const { id } = useLocalSearchParams();
+  const { user } = useAuth();
   const [data, setData] = useState<any | null>(null);
   const [listReport, setListReport] = useState<any[] | null>(null);
   const [loadList, setLoadList] = useState(false);
@@ -111,9 +111,13 @@ export default function AdminForumReportComment() {
 
         <AdminComp_BoxTitle title="Daftar Report Komentar" />
 
-        <StackCustom  gap={"sm"}>
+        <StackCustom gap={"sm"}>
           <GridSpan_NewComponent
-            text1={<TextCustom bold align="center">Aksi</TextCustom>}
+            text1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
             text2={<TextCustom bold>Pelapor</TextCustom>}
             text3={<TextCustom bold>Kategori Report</TextCustom>}
           />
@@ -129,22 +133,24 @@ export default function AdminForumReportComment() {
               <View key={index}>
                 <GridSpan_NewComponent
                   text1={
-                   <CenterCustom>
-                     <ActionIcon
-                      icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                      onPress={() => {
-                        setOpenDrawerAction(true);
-                        setSelectedReport({
-                          id: item.id,
-                          username: item.User?.username,
-                          kategori: item.ForumMaster_KategoriReport?.title,
-                          keterangan:
-                            item.ForumMaster_KategoriReport?.deskripsi,
-                          deskripsi: item.deskripsi,
-                        });
-                      }}
-                    />
-                   </CenterCustom>
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconView size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          setOpenDrawerAction(true);
+                          setSelectedReport({
+                            id: item.id,
+                            username: item.User?.username,
+                            kategori: item.ForumMaster_KategoriReport?.title,
+                            keterangan:
+                              item.ForumMaster_KategoriReport?.deskripsi,
+                            deskripsi: item.deskripsi,
+                          });
+                        }}
+                      />
+                    </CenterCustom>
                   }
                   text2={
                     <TextCustom truncate={1}>
@@ -188,15 +194,18 @@ export default function AdminForumReportComment() {
               onPressRight: async () => {
                 const deleteComment = await apiAdminForumDeactivateComment({
                   id: id as string,
+                  data: {
+                    senderId: user?.id as string,
+                  },
                 });
 
-                if (!deleteComment.success) {
-                  Toast.show({
-                    type: "error",
-                    text1: "Komentar gagal dihapus",
-                  });
-                  return;
-                }
+                // if (!deleteComment.success) {
+                //   Toast.show({
+                //     type: "error",
+                //     text1: "Komentar gagal dihapus",
+                //   });
+                //   return;
+                // }
 
                 setOpenDrawer(false);
                 Toast.show({

app/(application)/admin/forum/[id]/list-report-posting.tsx

@@ -16,12 +16,11 @@ import { IconDot, IconView } from "@/components/_Icon/IconComponent";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import {
   apiAdminForumDeactivatePosting,
   apiAdminForumListReportPostingById,
@@ -35,6 +34,7 @@ import { Divider } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
 export default function AdminForumReportPosting() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [openDrawerPage, setOpenDrawerPage] = useState(false);
   const [openDrawerAction, setOpenDrawerAction] = useState(false);
@@ -215,6 +215,9 @@ export default function AdminForumReportPosting() {
               onPressRight: async () => {
                 const response = await apiAdminForumDeactivatePosting({
                   id: id as string,
+                  data: {
+                    senderId: user?.id as string,
+                  },
                 });
 
                 if (!response.success) {

app/(application)/admin/forum/report-posting.tsx

@@ -73,7 +73,7 @@ export default function AdminForumReportPosting() {
         <GridSpan_NewComponent
           text1={
             <TextCustom bold truncate>
-              Username
+              Pelapor
             </TextCustom>
           }
           text2={

app/(application)/admin/investment/[id]/[status]/index.tsx

@@ -20,6 +20,7 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -28,6 +29,7 @@ import {
   apiAdminInvestmentDetailById,
 } from "@/service/api-admin/api-admin-investment";
 import { colorBadgeStatus } from "@/utils/colorBadge";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
@@ -40,91 +42,41 @@ export default function AdminInvestmentDetail() {
 
   const [data, setData] = React.useState<any | null>(null);
   const [isLoading, setLoading] = React.useState(false);
+  const [remind, setRemind] = React.useState({
+    sisa: 0,
+    reminder: false,
+  });
 
   useFocusEffect(
     React.useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
     try {
       const response = await apiAdminInvestmentDetailById({ id: id as string });
-      // console.log("[GETONE INVEST]", JSON.stringify(response, null, 2));
       if (response.success) {
         setData(response.data);
+
+        const duration = response?.data?.MasterPencarianInvestor?.name;
+        const publishTime = response?.data?.countDown;
+
+        const countDown = countDownAndCondition({
+          duration: duration,
+          publishTime: publishTime
+        });
+
+        setRemind({
+          sisa: countDown.durationDay,
+          reminder: countDown.reminder,
+        });
       }
     } catch (error) {
-      console.log(error);
+      console.log("Error", error);
     }
   };
 
-  const listData = [
-    {
-      label: "Username",
-      value: (data && data?.author?.username) || "-",
-    },
-    {
-      label: "Judul",
-      value: (data && data?.title) || "-",
-    },
-    {
-      label: "Status",
-      value:
-        data && data?.MasterStatusInvestasi?.name ? (
-          <BadgeCustom
-            color={colorBadgeStatus({
-              status: data?.MasterStatusInvestasi?.name as string,
-            })}
-          >
-            {_.startCase(data?.MasterStatusInvestasi?.name as string)}
-          </BadgeCustom>
-        ) : (
-          "-"
-        ),
-    },
-    {
-      label: "Dana Dibutuhkan",
-      value: `Rp. ${
-        (data && data?.targetDana && formatCurrencyDisplay(data?.targetDana)) ||
-        "-"
-      }`,
-    },
-    {
-      label: "Harga Perlembar",
-      value: `Rp. ${
-        (data &&
-          data?.hargaLembar &&
-          formatCurrencyDisplay(data?.hargaLembar)) ||
-        "-"
-      }`,
-    },
-    {
-      label: "Total Lembar",
-      value:
-        (data &&
-          data?.totalLembar &&
-          formatCurrencyDisplay(data?.totalLembar)) ||
-        "-",
-    },
-    {
-      label: "ROI",
-      value: `${(data && data?.roi && data?.roi) || 0} %`,
-    },
-    {
-      label: "Pembagian Deviden",
-      value: (data && data?.MasterPembagianDeviden?.name) + " bulan" || "-",
-    },
-    {
-      label: "Jadwal Pembagian",
-      value: (data && data?.MasterPeriodeDeviden?.name) || "-",
-    },
-    {
-      label: "Pencarian Investor",
-      value: (data && data?.MasterPencarianInvestor?.name) + " hari" || "-",
-    },
-  ];
-
   const handlerSubmitPublish = async () => {
     try {
       setLoading(true);
@@ -134,7 +86,6 @@ export default function AdminInvestmentDetail() {
         data: data,
       });
 
-      // console.log("[GET ON INVEST]", JSON.stringify(response, null, 2));
       if (!response.success) {
         Toast.show({
           type: "error",
@@ -164,6 +115,16 @@ export default function AdminInvestmentDetail() {
     />
   );
 
+  if (!data) {
+    return (
+      <>
+        <ViewWrapper>
+          <CustomSkeleton height={200} />
+        </ViewWrapper>
+      </>
+    );
+  }
+
   return (
     <>
       <ViewWrapper
@@ -177,8 +138,8 @@ export default function AdminInvestmentDetail() {
         {status === "publish" && (
           <BaseBox>
             <ProgressCustom
-              label={data && `${data.progress}%` || "0%"}
-              value={data && data.progress || 0}
+              label={(data && `${data.progress}%`) || "0%"}
+              value={(data && data.progress) || 0}
               size="lg"
             />
             <Spacing />
@@ -187,7 +148,8 @@ export default function AdminInvestmentDetail() {
                 label={<TextCustom bold>Sisa Saham</TextCustom>}
                 value={
                   <TextCustom>
-                    {data && formatCurrencyDisplay(data && data?.sisaLembar)} lembar
+                    {data && formatCurrencyDisplay(data && data?.sisaLembar)}{" "}
+                    lembar
                   </TextCustom>
                 }
               />
@@ -206,13 +168,15 @@ export default function AdminInvestmentDetail() {
         <BaseBox>
           <StackCustom>
             <DummyLandscapeImage imageId={data?.imageId} />
-            {listData.map((item, i) => (
-              <GridSpan_4_8
-                key={i}
-                label={<TextCustom bold>{item.label}</TextCustom>}
-                value={<TextCustom>{item.value}</TextCustom>}
-              />
-            ))}
+            {listData({ data: data, reminder: remind.reminder })?.map(
+              (item, i) => (
+                <GridSpan_4_8
+                  key={i}
+                  label={<TextCustom bold>{item.label}</TextCustom>}
+                  value={<TextCustom>{item.value}</TextCustom>}
+                />
+              ),
+            )}
           </StackCustom>
         </BaseBox>
 
@@ -230,7 +194,7 @@ export default function AdminInvestmentDetail() {
                   }
                   onPress={() => {
                     router.push(
-                      `/(application)/(file)/${data?.prospektusFileId}`
+                      `/(application)/(file)/${data?.prospektusFileId}`,
                     );
                   }}
                 >
@@ -259,7 +223,7 @@ export default function AdminInvestmentDetail() {
                           }
                           onPress={() => {
                             router.push(
-                              `/(application)/(file)/${item?.fileId}`
+                              `/(application)/(file)/${item?.fileId}`,
                             );
                           }}
                         >
@@ -299,8 +263,8 @@ export default function AdminInvestmentDetail() {
             onReject={() => {
               router.push(
                 `/admin/investment/${id}/reject-input?status=${_.lowerCase(
-                  data?.MasterStatusInvestasi?.name
-                )}`
+                  data?.MasterStatusInvestasi?.name,
+                )}`,
               );
             }}
           />
@@ -343,3 +307,67 @@ export default function AdminInvestmentDetail() {
     </>
   );
 }
+
+const listData = ({ data, reminder }: { data: any; reminder: boolean }) => [
+  {
+    label: "Username",
+    value: (data && data?.author?.username) || "-",
+  },
+  {
+    label: "Judul",
+    value: (data && data?.title) || "-",
+  },
+  {
+    label: "Status",
+    value:
+      data && data?.MasterStatusInvestasi?.name ? (
+        <BadgeCustom
+          color={colorBadgeStatus({
+            status: reminder ? "periode berakhir" : "publish",
+          })}
+        >
+          {reminder
+            ? "Periode Berakhir"
+            : _.startCase(data?.MasterStatusInvestasi?.name as string)}
+        </BadgeCustom>
+      ) : (
+        "-"
+      ),
+  },
+  {
+    label: "Dana Dibutuhkan",
+    value: `Rp. ${
+      (data && data?.targetDana && formatCurrencyDisplay(data?.targetDana)) ||
+      "-"
+    }`,
+  },
+  {
+    label: "Harga Perlembar",
+    value: `Rp. ${
+      (data && data?.hargaLembar && formatCurrencyDisplay(data?.hargaLembar)) ||
+      "-"
+    }`,
+  },
+  {
+    label: "Total Lembar",
+    value:
+      (data && data?.totalLembar && formatCurrencyDisplay(data?.totalLembar)) ||
+      "-",
+  },
+  {
+    label: "ROI",
+    value: `${(data && data?.roi && data?.roi) || 0} %`,
+  },
+  {
+    label: "Pembagian Deviden",
+    value: (data && data?.MasterPembagianDeviden?.name) + " bulan" || "-",
+  },
+  {
+    label: "Jadwal Pembagian",
+    value: (data && data?.MasterPeriodeDeviden?.name) || "-",
+  },
+  {
+    label: "Pencarian Investor",
+    value: (data && data?.MasterPencarianInvestor?.name) + " hari" || "-",
+  },
+];

app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx

@@ -13,6 +13,7 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import {
   apiAdminInvestmentGetOneInvoiceById,
   apiAdminInvestmentUpdateInvoice,
@@ -25,6 +26,7 @@ import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminInvestmentTransactionDetail() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [data, setData] = useState<any | null>(null);
   const [isLoading, setLoading] = useState<boolean>(false);
@@ -32,7 +34,7 @@ export default function AdminInvestmentTransactionDetail() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -40,7 +42,6 @@ export default function AdminInvestmentTransactionDetail() {
       const response = await apiAdminInvestmentGetOneInvoiceById({
         id: id as string,
       });
-      // console.log("[RESPONSE]", JSON.stringify(response, null, 2));
       if (response.success) {
         setData(response.data);
       }
@@ -92,7 +93,7 @@ export default function AdminInvestmentTransactionDetail() {
           <ButtonCustom
             onPress={() =>
               router.push(
-                `/(application)/(image)/preview-image/${data?.imageId}`
+                `/(application)/(image)/preview-image/${data?.imageId}`,
               )
             }
           >
@@ -109,6 +110,13 @@ export default function AdminInvestmentTransactionDetail() {
   }: {
     category: "accept" | "deny";
   }) => {
+    if (!user?.id) {
+      Toast.show({
+        type: "error",
+        text1: "Gagal update status transaksi",
+      });
+      return;
+    }
     try {
       setLoading(true);
       const response = await apiAdminInvestmentUpdateInvoice({
@@ -117,11 +125,10 @@ export default function AdminInvestmentTransactionDetail() {
         data: {
           investasiId: data?.investasiId,
           lembarTerbeli: data?.lembarTerbeli,
+          senderId: user?.id as any,
         },
       });
 
-      // console.log("[RESPONSE SUBMIT]", JSON.stringify(response, null, 2));
-
       if (!response.success) {
         Toast.show({
           type: "error",
@@ -153,6 +160,7 @@ export default function AdminInvestmentTransactionDetail() {
           styleRight={{ paddingLeft: 10 }}
           leftIcon={
             <ButtonCustom
+              disabled={isLoading}
               isLoading={isLoading}
               backgroundColor={MainColor.red}
               textColor="white"
@@ -175,6 +183,7 @@ export default function AdminInvestmentTransactionDetail() {
           }
           rightIcon={
             <ButtonCustom
+              disabled={isLoading}
               isLoading={isLoading}
               onPress={() => {
                 AlertDefaultSystem({
@@ -198,8 +207,8 @@ export default function AdminInvestmentTransactionDetail() {
     } else if (data?.StatusInvoice?.name === "Gagal") {
       return (
         <>
-          <ButtonCustom textColor="red" onPress={() => router.back()}>
-            Gagal
+          <ButtonCustom disabled onPress={() => router.back()}>
+            Transaksi telah gagal
           </ButtonCustom>
         </>
       );

app/(application)/admin/investment/[id]/reject-input.tsx

@@ -7,34 +7,39 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
-import { apiAdminInvestasiUpdateByStatus, apiAdminInvestmentDetailById } from "@/service/api-admin/api-admin-investment";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiAdminInvestasiUpdateByStatus,
+  apiAdminInvestmentDetailById,
+} from "@/service/api-admin/api-admin-investment";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminInvestmentRejectInput() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   console.log("[STATUS]", status);
   const [value, setValue] = useState<any | null>(null);
-  const [isLoading , setLoading] = useState(false)
+  const [isLoading, setLoading] = useState(false);
 
-    useFocusEffect(
-      useCallback(() => {
-        onLoadData();
-      }, [id])
-    );
-  
-    const onLoadData = async () => {
-      try {
-        const response = await apiAdminInvestmentDetailById({ id: id as string });
-        console.log("[DATA]", JSON.stringify(response, null, 2));
-        if (response.success) {
-          setValue(response.data?.catatan);
-        }
-      } catch (error) {
-        console.log(error);
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiAdminInvestmentDetailById({ id: id as string });
+      console.log("[DATA]", JSON.stringify(response, null, 2));
+      if (response.success) {
+        setValue(response.data?.catatan);
       }
-    };
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
   const handlerSubmit = async () => {
     if (!value) {
@@ -45,12 +50,23 @@ export default function AdminInvestmentRejectInput() {
       return;
     }
 
+    if (!user?.id) {
+      Toast.show({
+        type: "error",
+        text1: "User tidak ditemukan",
+      });
+      return;
+    }
+
     try {
-      setLoading(true)
+      setLoading(true);
       const response = await apiAdminInvestasiUpdateByStatus({
         id: id as string,
         status: "reject",
-        data: value,
+        data: {
+          catatan: value,
+          senderId: user?.id as string,
+        },
       });
 
       console.log("[RESPONSE]", JSON.stringify(response, null, 2));
@@ -76,7 +92,7 @@ export default function AdminInvestmentRejectInput() {
     } catch (error) {
       console.error(["ERROR"], error);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   };
 

app/(application)/admin/investment/[status]/status.tsx

@@ -22,8 +22,6 @@ import { Divider } from "react-native-paper";
 
 export default function AdminInvestmentStatus() {
   const { status } = useLocalSearchParams();
-  console.log("[STATUS]", status);
-
   const [listData, setListData] = React.useState<any[] | null>(null);
   const [loadData, setLoadingData] = React.useState(false);
   const [search, setSearch] = React.useState("");
@@ -41,7 +39,7 @@ export default function AdminInvestmentStatus() {
         category: status as "publish" | "review" | "reject",
         search,
       });
-      console.log("[LIST DATA]", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setListData(response.data);
       }

app/(application)/admin/job/[id]/[status]/index.tsx

@@ -15,6 +15,7 @@ import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import funUpdateStatusJob from "@/screens/Admin/Job/funUpdateStatus";
 import { apiAdminJobGetById } from "@/service/api-admin/api-admin-job";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -23,8 +24,10 @@ import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminJobDetailStatus() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [data, setData] = useState<any | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -92,6 +95,9 @@ export default function AdminJobDetailStatus() {
       const response = await funUpdateStatusJob({
         id: id as string,
         changeStatus,
+        data: {
+          senderId: user?.id as string,
+        },
       });
 
       if (!response.success) {
@@ -142,12 +148,15 @@ export default function AdminJobDetailStatus() {
           </StackCustom>
         </BaseBox>
 
-        {data && data?.catatan && (status === "reject" || status === "review") && (
-          <ReportBox text={data?.catatan}/>
-        )}
+        {data &&
+          data?.catatan &&
+          (status === "reject" || status === "review") && (
+            <ReportBox text={data?.catatan} />
+          )}
 
         {status === "review" && (
           <AdminButtonReview
+            isLoading={isLoading}
             onPublish={() => {
               AlertDefaultSystem({
                 title: "Publish",
@@ -156,6 +165,7 @@ export default function AdminJobDetailStatus() {
                 textRight: "Ya",
                 onPressRight: () => {
                   handleUpdate({ changeStatus: "publish" });
+                  setIsLoading(true);
                 },
               });
             }}

app/(application)/admin/job/[id]/[status]/reject-input.tsx

@@ -15,7 +15,10 @@ import Toast from "react-native-toast-message";
 
 export default function AdminJobRejectInput() {
   const { id, status } = useLocalSearchParams();
-  const [data, setData] = useState<any | null>(null);
+  const [data, setData] = useState({
+    catatan: "",
+    senderId: ""
+  });
   const [isLoading, setIsLoading] = useState(false);
 
   useFocusEffect(
@@ -48,7 +51,7 @@ export default function AdminJobRejectInput() {
       const response = await funUpdateStatusJob({
         id: id as string,
         changeStatus,
-        data: data,
+        data: data ,
       });
 
       if (!response.success) {
@@ -102,8 +105,8 @@ export default function AdminJobRejectInput() {
         headerComponent={<AdminBackButtonAntTitle title="Penolakan Job" />}
       >
         <TextAreaCustom
-          value={data}
-          onChangeText={setData}
+          value={data?.catatan}
+          onChangeText={(text) => setData({ ...data, catatan: text })}
           placeholder="Masukan alasan"
           required
           showCount

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

@@ -1,19 +1,28 @@
 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";
 
@@ -66,6 +75,10 @@ export default function AdminNotification() {
   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);
@@ -80,11 +93,12 @@ export default function AdminNotification() {
 
   const fecthData = async () => {
     try {
+      setLoading(true);
       const response = await apiGetNotificationsById({
         id: user?.id as any,
         category: activeCategory as any,
       });
-      // console.log("Response Notification", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setListData(response.data);
       } else {
@@ -92,6 +106,8 @@ export default function AdminNotification() {
       }
     } catch (error) {
       console.log("Error Notification", error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -108,9 +124,9 @@ export default function AdminNotification() {
           title: "Admin Notifikasi",
           headerLeft: () => <BackButton />,
           headerRight: () => (
-            <IconPlus
+            <IconDot
               color={MainColor.yellow}
-              onPress={() => router.push("/test-notifications")}
+              onPress={() => setOpenDrawer(true)}
             />
           ),
         }}
@@ -132,12 +148,66 @@ export default function AdminNotification() {
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         }
       >
-        {listData.map((e, i) => (
-          <View key={i}>
-            <BoxNotification data={e} activeCategory={activeCategory as any} />
-          </View>
-        ))}
+        {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/super-admin/[id]/index.tsx

@@ -48,6 +48,7 @@ export default function SuperAdminDetail() {
       const response = await apiAdminUserAccessUpdateStatus({
         id: id as string,
         role: data?.masterUserRoleId === "2" ? "user" : "admin",
+        category: "role"
       });
 
       if (!response.success) {

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

@@ -9,6 +9,7 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import { useAuth } from "@/hooks/use-auth";
 import {
   apiAdminUserAccessGetById,
   apiAdminUserAccessUpdateStatus,
@@ -18,6 +19,7 @@ import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminUserAccessDetail() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [data, setData] = useState<any | null>(null);
   const [loadData, setLoadData] = useState(false);
@@ -33,6 +35,7 @@ export default function AdminUserAccessDetail() {
     try {
       setLoadData(true);
       const response = await apiAdminUserAccessGetById({ id: id as string });
+      console.log("[DATA]", JSON.stringify(response.data, null, 2));
 
       setData(response.data);
     } catch (error) {
@@ -48,6 +51,7 @@ export default function AdminUserAccessDetail() {
       const response = await apiAdminUserAccessUpdateStatus({
         id: id as string,
         active: !data?.active,
+        category: "access",
       });
 
       if (!response.success) {
@@ -61,6 +65,7 @@ export default function AdminUserAccessDetail() {
         type: "success",
         text1: "Update aktifasi berhasil ",
       });
+
       router.back();
     } catch (error) {
       console.log("[ERROR UPDATE STATUS]", error);

app/(application)/admin/voting/[id]/[status]/index.tsx

@@ -16,6 +16,7 @@ import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import funUpdateStatusVoting from "@/screens/Admin/Voting/funUpdateStatus";
 import { apiAdminVotingById } from "@/service/api-admin/api-admin-voting";
 import { colorBadgeStatus } from "@/utils/colorBadge";
@@ -29,6 +30,7 @@ import { List } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
 export default function AdminVotingDetail() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [data, setData] = useState<any | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -139,6 +141,10 @@ export default function AdminVotingDetail() {
       const response = await funUpdateStatusVoting({
         id: id as string,
         changeStatus,
+        data: {
+          senderId: user?.id as string,
+          catatan: "",
+        },
       });
 
       if (!response.success) {

app/(application)/admin/voting/[id]/[status]/reject-input.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
+import { useAuth } from "@/hooks/use-auth";
 import funUpdateStatusVoting from "@/screens/Admin/Voting/funUpdateStatus";
 import { apiAdminVotingById } from "@/service/api-admin/api-admin-voting";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
@@ -14,6 +15,7 @@ import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function AdminVotingRejectInput() {
+  const { user } = useAuth()
   const { id, status } = useLocalSearchParams();
   const [data, setData] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -48,7 +50,10 @@ export default function AdminVotingRejectInput() {
       const response = await funUpdateStatusVoting({
         id: id as string,
         changeStatus,
-        data: data,
+        data: {
+          catatan: data,
+          senderId: user?.id as string,
+        },
       });
 
       if (!response.success) {

app/+not-found.tsx

@@ -1,16 +1,26 @@
-import { StackCustom, TextCustom, ViewWrapper } from "@/components";
+import { BackButton, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import { Stack } from "expo-router";
 
 export default function NotFoundScreen() {
-    return (
+  return (
+    <>
+      <Stack.Screen
+        options={{ headerShown: true, title: "", headerLeft: () => <BackButton /> }}
+      />
       <ViewWrapper>
-        <StackCustom align="center" gap={0} style={{justifyContent: "center", alignItems: "center", flex: 1}}>
-          <TextCustom size="large" bold style={{fontSize: 100}}>
+        <StackCustom
+          align="center"
+          gap={0}
+          style={{ justifyContent: "center", alignItems: "center", flex: 1 }}
+        >
+          <TextCustom size="large" bold style={{ fontSize: 100 }}>
             404
           </TextCustom>
           <TextCustom size="large" bold>
-            Sorry, File Not Found
+            Sorry, Page Not Found
           </TextCustom>
         </StackCustom>
       </ViewWrapper>
-    );
-}
+    </>
+  );
+}

app/eula.tsx

@@ -0,0 +1,9 @@
+import EULAView from "@/screens/Authentication/EULAView";
+
+export default function EULA() {
+  return (
+    <>
+      <EULAView />
+    </>
+  );
+}

components/Button/BackButton.tsx

@@ -12,10 +12,12 @@ const LeftButtonCustom = ({
   path,
   icon = "arrow-back",
   iconCustom,
+  onPress,
 }: {
   path?: Href;
   icon?: React.ReactNode | any;
   iconCustom?: React.ReactNode;
+  onPress?: () => void;
 }) => {
   return (
     <>
@@ -26,7 +28,7 @@ const LeftButtonCustom = ({
           name={icon}
           size={20}
           color={MainColor.yellow}
-          onPress={() => (path ? router.replace(path) : router.back())}
+          onPress={() => (onPress ? onPress() : path ? router.replace(path) : router.back())}
         />
       )}
     </>

components/Button/BackButtonFromNotification.tsx

@@ -0,0 +1,29 @@
+import { useRouter } from "expo-router";
+import { BackButton } from "..";
+
+export default function BackButtonFromNotification({
+  from,
+  category,
+}: {
+  from: string;
+  category?: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <BackButton
+        onPress={() => {
+          if (from === "notifications") {
+            router.replace(`/notifications?category=${category}`);
+          } else {
+            if (from) {
+              router.replace(`/${from}` as any);
+            } else {
+              router.navigate("/home");
+            }
+          }
+        }}
+      />
+    </>
+  );
+}

components/DateInput/DateTimePickerCustom.tsx

@@ -24,8 +24,6 @@ const DateTimePickerCustom: React.FC<Props> = ({
   disabled = false,
 }) => {
 
-  console.log("Date Android Comp", value)
-
   return (
     <>
       {Platform.OS === "ios" ? (

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>

components/Modal/ModalReactNative.tsx

@@ -0,0 +1,33 @@
+import { Modal, View } from "react-native";
+
+export default function ModalReactNative({
+  children,
+  isVisible,
+}: {
+  children: React.ReactNode;
+  isVisible: boolean;
+}) {
+  return (
+    <Modal
+      animationType="slide"
+      backdropColor={"rgba(0, 0, 0, 0.5)"}
+      visible={isVisible}
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+        //   margin: 10,
+        marginBlock: 30,
+          padding: 10,
+          borderRadius: 10,
+          paddingTop: 30
+        }}
+      >
+        {children}
+      </View>
+    </Modal>
+  );
+}

components/Notification/NotificationInitializer.tsx

@@ -49,7 +49,8 @@ export default function NotificationInitializer() {
 
         const fcmToken = await getToken(messagingInstance);
         if (!fcmToken) {
-          logout();
+           console.warn("Tidak bisa mendapatkan FCM token");
+          // logout();
           return;
         }
 

constants/constans-value.ts

@@ -19,6 +19,7 @@ export {
   PADDING_SMALL,
   PADDING_MEDIUM,
   PADDING_LARGE,
+  PAGINATION_DEFAULT_TAKE
 };
 
 // OS Height
@@ -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

@@ -2,15 +2,16 @@ import {
   apiConfig,
   apiLogin,
   apiRegister,
+  apiUpdatedTermCondition,
   apiValidationCode,
 } from "@/service/api-config";
 import { apiDeviceTokenDeleted } from "@/service/api-device-token";
 import { IUser } from "@/types/User";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as Device from "expo-device";
 import { router } from "expo-router";
 import { createContext, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
-import * as Device from "expo-device";
 
 // --- Types ---
 type AuthContextType = {
@@ -20,7 +21,7 @@ type AuthContextType = {
   isAuthenticated: boolean;
   isAdmin: boolean;
   isUserActive: boolean;
-  loginWithNomor: (nomor: string) => Promise<void>;
+  loginWithNomor: (nomor: string) => Promise<boolean>;
   validateOtp: (nomor: string) => Promise<any>;
   logout: () => Promise<void>;
   registerUser: (userData: {
@@ -29,11 +30,15 @@ type AuthContextType = {
     termsOfServiceAccepted: boolean;
   }) => Promise<void>;
   userData: (token: string) => Promise<any>;
+  acceptedTerms: (
+    nomor: string,
+    onSetModalVisible: (visible: boolean) => void,
+  ) => Promise<any>;
 };
 
 // --- Create Context ---
 export const AuthContext = createContext<AuthContextType | undefined>(
-  undefined
+  undefined,
 );
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
@@ -74,29 +79,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const loginWithNomor = async (nomor: string) => {
     setIsLoading(true);
     try {
-      console.log("[Masuk provider]", nomor);
       const response = await apiLogin({ nomor: nomor });
-      console.log("[RESPONSE AUTH]", JSON.stringify(response));
-
-      if (response.success) {
-        console.log("[Keluar provider]", nomor);
-        Toast.show({
-          type: "success",
-          text1: "Sukses",
-          text2: "Kode OTP berhasil dikirim",
-        });
+      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;
+        return true;
       } else {
-        router.push(`/register?nomor=${nomor}`);
-        Toast.show({
-          type: "info",
-          text1: "Info",
-          text2: "Silahkan mendaftar",
-        });
-        return;
+        return false;
       }
     } catch (error: any) {
       throw new Error(error.response?.data?.message || "Gagal kirim OTP");
@@ -105,18 +96,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
-  // const loginWithNomor = async (nomor: string) => {
-  //   setIsLoading(true);
-  //   try {
-  //     const response = await apiLogin({ nomor: nomor });
-  //     await AsyncStorage.setItem("kode_otp", response.kodeId);
-  //   } catch (error: any) {
-  //     throw new Error(error.response?.data?.message || "Gagal kirim OTP");
-  //   } finally {
-  //     setIsLoading(false);
-  //   }
-  // };
-
   // --- 2. Validasi OTP & cek user ---
   const validateOtp = async (nomor: string) => {
     try {
@@ -164,7 +143,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     } catch (error: any) {
       console.log("Error validasi otp >>", (error as Error).message || error);
       throw new Error(
-        error.response?.data?.message || "OTP salah atau user tidak ditemukan"
+        error.response?.data?.message || "OTP salah atau user tidak ditemukan",
       );
     } finally {
       setIsLoading(false);
@@ -193,7 +172,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     } catch (error: any) {
       console.log(
         "[LOAD USER DATA]",
-        error.response?.data?.message + "user" || "Gagal mengambil data user"
+        error.response?.data?.message + "user" || "Gagal mengambil data user",
       );
     } finally {
       setIsLoading(false);
@@ -209,7 +188,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     setIsLoading(true);
     try {
       const response = await apiRegister({ data: userData });
-      console.log("[REGISTER FETCH]", JSON.stringify(response, null, 2));
 
       if (!response.success) {
         Toast.show({
@@ -239,42 +217,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       setIsLoading(false);
     }
   };
-  // const registerUser = async (userData: {
-  //   username: string;
-  //   nomor: string;
-  //   termsOfServiceAccepted: boolean;
-  // }) => {
-  //   setIsLoading(true);
-  //   try {
-  //     const response = await apiRegister({ data: userData });
-  //     console.log("response", response);
-
-  //     const { token } = response;
-  //     if (!response.success) {
-  //       Toast.show({
-  //         type: "info",
-  //         text1: "Info",
-  //         text2: response.message,
-  //       });
-
-  //       return;
-  //     }
-
-  //     setToken(token);
-  //     await AsyncStorage.setItem("authToken", token);
-  //     Toast.show({
-  //       type: "success",
-  //       text1: "Sukses",
-  //       text2: "Anda berhasil terdaftar",
-  //     });
-  //     router.replace("/(application)/(user)/waiting-room");
-  //     return;
-  //   } catch (error: any) {
-  //     console.log("Error register", error);
-  //   } finally {
-  //     setIsLoading(false);
-  //   }
-  // };
 
   // --- 5. Logout ---
 
@@ -284,7 +226,8 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       setToken(null);
       setUser(null);
 
-      const deviceId = Device.osInternalBuildId || Device.modelName || "unknown";
+      const deviceId =
+        Device.osInternalBuildId || Device.modelName || "unknown";
 
       await AsyncStorage.removeItem("authToken");
       await AsyncStorage.removeItem("userData");
@@ -303,6 +246,28 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
+  // --- 6. Accept Terms ---
+  const acceptedTerms = async (
+    nomor: string,
+    onSetModalVisible: (visible: boolean) => void,
+  ) => {
+    try {
+      setIsLoading(true);
+      const response = await apiUpdatedTermCondition({ nomor: nomor });
+
+      if (response.success) {
+        return `/verification?nomor=${nomor}`;
+      } else {
+        return `/register?nomor=${nomor}`;
+      }
+    } catch (error) {
+      console.log("Error accept terms", error);
+    } finally {
+      setIsLoading(false);
+      onSetModalVisible(false);
+    }
+  };
+
   return (
     <>
       <AuthContext.Provider
@@ -318,6 +283,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
           logout,
           registerUser,
           userData,
+          acceptedTerms,
         }}
       >
         {children}

docs/hipmi-note.md

@@ -13,3 +13,13 @@ Exp: open ios/HIPMIBADUNG.xcworkspace
 perubahan versi : npm version patch
 ios: bunx expo prebuild --platform ios
 android: bunx expo prebuild --platform android
+
+### Android
+adb devices : cek device yang terhubung
+Note: izinkan perangkat dulu agar statusnya tidak unauthorized
+
+adb install android/app/build/outputs/apk/debug/app-debug.apk : install apk ke device / emulator
+Note:
+Gunakan flag -s (serial) di perintah adb untuk menentukan target 
+adb -s <0G52319V261040B2 ini adalah id nya> install android/app/build/outputs/apk/debug/app-debug.apk
+

docs/prompt-for-qwen-code.md

@@ -0,0 +1,14 @@
+<!-- Start Penerapan Pagination -->
+Terapkan pagination pada file: screens/Forum/DetailForum.tsx
+Component yang digunakan: hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
+
+Perbaiki fetch pada file: service/api-client/api-forum.ts
+Jika tidak ada props page maka tambahkan props page dan default page: "1"
+
+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 

eas.json

@@ -11,7 +11,7 @@
     "preview": {
       "distribution": "internal",
       "android": {
-        "buildType": "app-bundle"
+        "buildType": "apk"
       },
       "ios": {
         "simulator": false

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-foreground-notifications.ts

@@ -4,6 +4,7 @@ import {
   onMessage,
   FirebaseMessagingTypes,
 } from "@react-native-firebase/messaging";
+import { useAuth } from "./use-auth";
 
 // Gunakan tipe resmi dari library
 type RemoteMessage = FirebaseMessagingTypes.RemoteMessage;
@@ -11,17 +12,26 @@ type RemoteMessage = FirebaseMessagingTypes.RemoteMessage;
 export function useForegroundNotifications(
   onMessageReceived: (message: RemoteMessage) => void
 ) {
+  const { user } = useAuth();
+
   useEffect(() => {
     const messaging = getMessaging();
 
     const unsubscribe = onMessage(messaging, (remoteMessage) => {
+      const data = remoteMessage.data;
+      // console.log("DATA NOTIFIKASI DARI SERVER", data)
+      if (data?.recipientId && data?.recipientId !== user?.id) {
+        console.log("📵 Notification untuk user lain", data);
+        return;
+      }
+
       console.log(
         "🔔 Notifikasi diterima saat app aktif:",
-        JSON.stringify(remoteMessage, null, 2)
+        JSON.stringify(data, null, 2)
       );
       onMessageReceived(remoteMessage);
     });
 
     return unsubscribe;
-  }, [onMessageReceived]);
-}
+  }, [user?.id, onMessageReceived]);
+}

hooks/use-notification-store.tsx

@@ -40,6 +40,7 @@ type NotificationContextType = {
     notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
   ) => void;
   markAsRead: (id: string) => void;
+  markAsReadAll: (id: string) => void;
   syncUnreadCount: () => Promise<void>;
 };
 
@@ -48,6 +49,7 @@ const NotificationContext = createContext<NotificationContextType>({
   unreadCount: 0,
   addNotification: () => {},
   markAsRead: () => {},
+  markAsReadAll: () => {},
   syncUnreadCount: async () => {},
 });
 
@@ -98,7 +100,7 @@ export const NotificationProvider = ({ children }: { children: ReactNode }) => {
 
   const markAsRead = async (id: string) => {
     try {
-      const response = await apiNotificationMarkAsRead({ id });
+      const response = await apiNotificationMarkAsRead({ id, category: "one" });
       console.log("🚀 Response Mark As Read:", response);
 
       if (response.success) {
@@ -114,6 +116,25 @@ export const NotificationProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
+  const markAsReadAll = async (id: string) => {
+    try {
+      const response = await apiNotificationMarkAsRead({ id, category: "all" });
+      console.log("🚀 Response Mark As Read All:", response);
+
+      if (response.success) {
+        const cloneNotifications = [...notifications];
+        const index = cloneNotifications.findIndex((n) => n?.data?.id === id);
+        if (index !== -1) {
+          cloneNotifications[index].isRead = true;
+          setNotifications(cloneNotifications);
+        }
+      }
+    } catch (error) {
+      console.error("Gagal mark as read:", error);
+    }
+  };
+
+
   const syncUnreadCount = async () => {
     try {
       const count = await apiNotificationUnreadCount({
@@ -133,8 +154,9 @@ export const NotificationProvider = ({ children }: { children: ReactNode }) => {
       value={{
         notifications,
         addNotification,
-        markAsRead,
         unreadCount,
+        markAsRead,
+        markAsReadAll,
         syncUnreadCount,
       }}
     >

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
+  };
+}

ios/HIPMIBadungConnect/Info.plist

@@ -39,7 +39,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>17</string>
+    <string>20</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false/>
     <key>LSMinimumSystemVersion</key>

lib/routeApp.ts

@@ -0,0 +1,9 @@
+export { routeAdmin, routeUser };
+
+const routeAdmin = {
+  userAccess: ({ id }: { id: string }) => `/admin/user-access/${id}`,
+};
+
+const routeUser = {
+  home: `/(user)/home`,
+};

screens/Admin/Donation/funDonationUpdateStatus.ts

@@ -1,4 +1,5 @@
 import { apiAdminDonationUpdateStatus } from "@/service/api-admin/api-admin-donation";
+import { typeRejectedData } from "@/types/type-collect-other";
 
 export const funUpdateStatusDonation = async ({
   id,
@@ -7,7 +8,7 @@ export const funUpdateStatusDonation = async ({
 }: {
   id: string;
   changeStatus: "publish" | "review" | "reject";
-  data?: string;
+  data?: typeRejectedData;
 }) => {
   try {
     const response = await apiAdminDonationUpdateStatus({

screens/Admin/Event/funUpdateStatus.ts

@@ -1,4 +1,5 @@
 import { apiAdminEventUpdateStatus } from "@/service/api-admin/api-admin-event";
+import { typeRejectedData } from "@/types/type-collect-other";
 
 export const funUpdateStatusEvent = async ({
   id,
@@ -7,17 +8,19 @@ export const funUpdateStatusEvent = async ({
 }: {
   id: string;
   changeStatus: "publish" | "review" | "reject";
-  data?: string;
+  data?: typeRejectedData;
 }) => {
   try {
+    console.log("[DATA]", data);
     const response = await apiAdminEventUpdateStatus({
       id: id,
       changeStatus: changeStatus as any,
-      data: data,
+      data: data as any,
     });
     return response;
+
   } catch (error) {
     console.log("[ERROR]", error);
     throw error;
   }
-};
+};

screens/Admin/Job/funUpdateStatus.ts

@@ -7,13 +7,17 @@ const funUpdateStatusJob = async ({
 }: {
   id: string;
   changeStatus: "publish" | "review" | "reject";
-  data?: string;
+  data: {
+    catatan?: string;
+    senderId: string;
+  };
 }) => {
   try {
+    const fixData = data;
     const response = await apiAdminJobUpdate({
       id: id,
       status: changeStatus as any,
-      data: data,
+      data: fixData as any,
     });
 
     return response;

screens/Admin/Voting/funUpdateStatus.ts

@@ -1,4 +1,5 @@
 import { apiAdminVotingUpdateStatus } from "@/service/api-admin/api-admin-voting";
+import { typeRejectedData } from "@/types/type-collect-other";
 
 const funUpdateStatusVoting = async ({
   id,
@@ -7,7 +8,7 @@ const funUpdateStatusVoting = async ({
 }: {
   id: string;
   changeStatus: "publish" | "review" | "reject";
-  data?: string;
+  data?: typeRejectedData;
 }) => {
   try {
     const response = await apiAdminVotingUpdateStatus({

screens/Authentication/EULASection.tsx

@@ -0,0 +1,286 @@
+// app/syarat-dan-ketentuan.tsx
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { useState, useRef } from "react";
+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({
+  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);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const handleScroll = (event: any) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+    const isCloseToBottom =
+      layoutMeasurement.height + contentOffset.y >=
+      contentSize.height - paddingToBottom;
+    setIsAtBottom(isCloseToBottom);
+  };
+
+  const handleAccept = async () => {
+    // console.log("Accept terms", nomor);
+    // onSetModalVisible(false);
+    try {
+      if (!isAtBottom) return;
+
+      setIsLoading(true);
+      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);
+    }
+  };
+
+  return (
+    <SafeAreaView edges={["bottom"]} style={styles.container}>
+      <Text style={styles.title}>
+        Syarat & Ketentuan Penggunaan HIPMI Badung Connect
+      </Text>
+
+      <ScrollView
+        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <Text style={styles.paragraph}>
+          Dengan menggunakan aplikasi{" "}
+          <Text style={styles.bold}>HIPMI Badung Connect</Text> (“Aplikasi”),
+          Anda setuju untuk mematuhi dan terikat oleh syarat dan ketentuan
+          berikut. Jika Anda tidak setuju dengan ketentuan ini, harap jangan
+          gunakan Aplikasi.
+        </Text>
+
+        <Text style={styles.heading}>1. Definisi</Text>
+        <Text style={styles.paragraph}>
+          <Text style={styles.bold}>HIPMI Badung Connect</Text> adalah platform
+          digital resmi untuk anggota Himpunan Pengusaha Muda Indonesia (HIPMI)
+          Kabupaten Badung, yang bertujuan memfasilitasi jaringan, kolaborasi,
+          dan pertumbuhan bisnis para pengusaha muda.
+        </Text>
+
+        <Text style={styles.heading}>2. Larangan Konten Tidak Pantas</Text>
+        <Text style={styles.paragraph}>
+          Anda <Text style={styles.bold}>dilarang keras</Text> memposting,
+          mengirim, membagikan, atau mengunggah konten apa pun yang mengandung:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Ujaran kebencian, diskriminasi, atau konten SARA (Suku, Agama,
+            Ras, Antar-golongan)
+          </Text>
+          <Text style={styles.listItem}>
+            • Pornografi, konten seksual eksplisit, atau gambar tidak senonoh
+          </Text>
+          <Text style={styles.listItem}>
+            • Ancaman, pelecehan, bullying, atau perilaku melecehkan
+          </Text>
+          <Text style={styles.listItem}>
+            • Informasi palsu, hoaks, spam, atau konten menyesatkan
+          </Text>
+          <Text style={styles.listItem}>
+            • Konten ilegal, melanggar hukum, atau melanggar hak kekayaan
+            intelektual pihak lain
+          </Text>
+          <Text style={styles.listItem}>
+            • Promosi narkoba, perjudian, atau aktivitas ilegal lainnya
+          </Text>
+        </View>
+
+        <Text style={styles.heading}>3. Tanggung Jawab Pengguna</Text>
+        <Text style={styles.paragraph}>
+          Anda bertanggung jawab penuh atas setiap konten yang Anda unggah atau
+          bagikan melalui fitur-fitur berikut:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>• Profil (bio, foto, portofolio)</Text>
+          <Text style={styles.listItem}>• Forum diskusi</Text>
+          <Text style={styles.listItem}>• Chat pribadi atau grup</Text>
+          <Text style={styles.listItem}>
+            • Lowongan kerja, investasi, dan donasi
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Konten yang melanggar ketentuan ini dapat dihapus kapan saja tanpa
+          pemberitahuan.
+        </Text>
+
+        <Text style={styles.heading}>4. Tindakan terhadap Pelanggaran</Text>
+        <Text style={styles.paragraph}>
+          Jika kami menerima laporan atau menemukan konten yang melanggar
+          ketentuan ini, kami akan:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Segera menghapus konten tersebut
+          </Text>
+          <Text style={styles.listItem}>
+            • Memberikan peringatan atau memblokir akun pengguna
+          </Text>
+          <Text style={styles.listItem}>
+            • Dalam kasus berat, melaporkan ke pihak berwajib sesuai hukum yang
+            berlaku
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Tim kami berkomitmen untuk menanggapi laporan konten tidak pantas{" "}
+          <Text style={styles.bold}>dalam waktu 24 jam</Text>.
+        </Text>
+
+        <Text style={styles.heading}>5. Mekanisme Pelaporan</Text>
+        <Text style={styles.paragraph}>
+          Anda dapat melaporkan konten atau pengguna yang mencurigakan melalui:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Tombol <Text style={styles.bold}>“Laporkan”</Text> di setiap
+            posting forum atau pesan chat
+          </Text>
+          <Text style={styles.listItem}>
+            • Tombol <Text style={styles.bold}>“Blokir Pengguna”</Text> di
+            profil pengguna
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Setiap laporan akan ditangani secara rahasia dan segera.
+        </Text>
+
+        <Text style={styles.heading}>6. Perubahan Ketentuan</Text>
+        <Text style={styles.paragraph}>
+          Kami berhak memperbarui Syarat & Ketentuan ini sewaktu-waktu. Versi
+          terbaru akan dipublikasikan di halaman ini dengan tanggal revisi yang
+          diperbarui.
+        </Text>
+
+        <Text style={styles.heading}>7. Kontak</Text>
+        <Text style={styles.paragraph}>
+          Jika Anda memiliki pertanyaan tentang ketentuan ini, silakan hubungi
+          kami di:{"\n"}
+          <Text style={[styles.bold, { color: "#1E90FF" }]}>
+            bip.baliinteraktifperkasa@gmail.com
+          </Text>
+        </Text>
+
+        <Text style={styles.footer}>
+          © 2026 Bali Interaktif Perkasa. All rights reserved.
+        </Text>
+      </ScrollView>
+
+      <TouchableOpacity
+        onPress={handleAccept}
+        disabled={!isAtBottom || isLoading}
+        style={[styles.button, { opacity: !isAtBottom || isLoading ? 0.6 : 1 }]}
+      >
+        <Text style={styles.buttonText}>
+          {isLoading ? "Menyimpan..." : "Saya Setuju"}
+        </Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: MainColor.darkblue,
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 16,
+    color: MainColor.white,
+  },
+  scrollView: {
+    flex: 1,
+    marginBottom: 20,
+  },
+  scrollContent: {
+    paddingBottom: 30,
+  },
+  heading: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 16,
+    marginBottom: 8,
+    color: MainColor.white,
+  },
+  paragraph: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: MainColor.white,
+    marginBottom: 12,
+  },
+  bold: {
+    fontWeight: "600",
+  },
+  list: {
+    marginLeft: 8,
+    marginBottom: 12,
+  },
+  listItem: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: MainColor.white,
+    marginBottom: 6,
+  },
+  footer: {
+    fontSize: 12,
+    color: MainColor.white,
+    textAlign: "center",
+    marginTop: 20,
+    paddingTop: 10,
+    borderTopWidth: 2,
+    borderTopColor: AccentColor.blue,
+  },
+  button: {
+    backgroundColor: MainColor.yellow,
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: "center",
+    width: 200,
+    alignSelf: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

screens/Authentication/EULAView.tsx

@@ -0,0 +1,259 @@
+// app/syarat-dan-ketentuan.tsx
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { useState, useRef } from "react";
+import { 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";
+
+export default function EULAView() {
+  const { acceptedTerms } = useAuth();
+  const { nomor } = useLocalSearchParams();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const handleScroll = (event: any) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+    const isCloseToBottom =
+      layoutMeasurement.height + contentOffset.y >=
+      contentSize.height - paddingToBottom;
+    setIsAtBottom(isCloseToBottom);
+  };
+
+  const handleAccept = async () => {
+    try {
+      if (!isAtBottom) return;
+
+      setIsLoading(true);
+      // await acceptedTerms(nomor as string);
+    } catch (error) {
+      console.log("Error accept terms", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView edges={["bottom"]} style={styles.container}>
+      <Text style={styles.title}>
+        Syarat & Ketentuan Penggunaan HIPMI Badung Connect
+      </Text>
+
+      <ScrollView
+        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <Text style={styles.paragraph}>
+          Dengan menggunakan aplikasi{" "}
+          <Text style={styles.bold}>HIPMI Badung Connect</Text> (“Aplikasi”),
+          Anda setuju untuk mematuhi dan terikat oleh syarat dan ketentuan
+          berikut. Jika Anda tidak setuju dengan ketentuan ini, harap jangan
+          gunakan Aplikasi.
+        </Text>
+
+        <Text style={styles.heading}>1. Definisi</Text>
+        <Text style={styles.paragraph}>
+          <Text style={styles.bold}>HIPMI Badung Connect</Text> adalah platform
+          digital resmi untuk anggota Himpunan Pengusaha Muda Indonesia (HIPMI)
+          Kabupaten Badung, yang bertujuan memfasilitasi jaringan, kolaborasi,
+          dan pertumbuhan bisnis para pengusaha muda.
+        </Text>
+
+        <Text style={styles.heading}>2. Larangan Konten Tidak Pantas</Text>
+        <Text style={styles.paragraph}>
+          Anda <Text style={styles.bold}>dilarang keras</Text> memposting,
+          mengirim, membagikan, atau mengunggah konten apa pun yang mengandung:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Ujaran kebencian, diskriminasi, atau konten SARA (Suku, Agama,
+            Ras, Antar-golongan)
+          </Text>
+          <Text style={styles.listItem}>
+            • Pornografi, konten seksual eksplisit, atau gambar tidak senonoh
+          </Text>
+          <Text style={styles.listItem}>
+            • Ancaman, pelecehan, bullying, atau perilaku melecehkan
+          </Text>
+          <Text style={styles.listItem}>
+            • Informasi palsu, hoaks, spam, atau konten menyesatkan
+          </Text>
+          <Text style={styles.listItem}>
+            • Konten ilegal, melanggar hukum, atau melanggar hak kekayaan
+            intelektual pihak lain
+          </Text>
+          <Text style={styles.listItem}>
+            • Promosi narkoba, perjudian, atau aktivitas ilegal lainnya
+          </Text>
+        </View>
+
+        <Text style={styles.heading}>3. Tanggung Jawab Pengguna</Text>
+        <Text style={styles.paragraph}>
+          Anda bertanggung jawab penuh atas setiap konten yang Anda unggah atau
+          bagikan melalui fitur-fitur berikut:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>• Profil (bio, foto, portofolio)</Text>
+          <Text style={styles.listItem}>• Forum diskusi</Text>
+          <Text style={styles.listItem}>• Chat pribadi atau grup</Text>
+          <Text style={styles.listItem}>
+            • Lowongan kerja, investasi, dan donasi
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Konten yang melanggar ketentuan ini dapat dihapus kapan saja tanpa
+          pemberitahuan.
+        </Text>
+
+        <Text style={styles.heading}>4. Tindakan terhadap Pelanggaran</Text>
+        <Text style={styles.paragraph}>
+          Jika kami menerima laporan atau menemukan konten yang melanggar
+          ketentuan ini, kami akan:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Segera menghapus konten tersebut
+          </Text>
+          <Text style={styles.listItem}>
+            • Memberikan peringatan atau memblokir akun pengguna
+          </Text>
+          <Text style={styles.listItem}>
+            • Dalam kasus berat, melaporkan ke pihak berwajib sesuai hukum yang
+            berlaku
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Tim kami berkomitmen untuk menanggapi laporan konten tidak pantas{" "}
+          <Text style={styles.bold}>dalam waktu 24 jam</Text>.
+        </Text>
+
+        <Text style={styles.heading}>5. Mekanisme Pelaporan</Text>
+        <Text style={styles.paragraph}>
+          Anda dapat melaporkan konten atau pengguna yang mencurigakan melalui:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Tombol <Text style={styles.bold}>“Laporkan”</Text> di setiap
+            posting forum atau pesan chat
+          </Text>
+          <Text style={styles.listItem}>
+            • Tombol <Text style={styles.bold}>“Blokir Pengguna”</Text> di
+            profil pengguna
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Setiap laporan akan ditangani secara rahasia dan segera.
+        </Text>
+
+        <Text style={styles.heading}>6. Perubahan Ketentuan</Text>
+        <Text style={styles.paragraph}>
+          Kami berhak memperbarui Syarat & Ketentuan ini sewaktu-waktu. Versi
+          terbaru akan dipublikasikan di halaman ini dengan tanggal revisi yang
+          diperbarui.
+        </Text>
+
+        <Text style={styles.heading}>7. Kontak</Text>
+        <Text style={styles.paragraph}>
+          Jika Anda memiliki pertanyaan tentang ketentuan ini, silakan hubungi
+          kami di:{"\n"}
+          <Text style={[styles.bold, { color: "#1E90FF" }]}>
+            bip.baliinteraktifperkasa@gmail.com
+          </Text>
+        </Text>
+
+        <Text style={styles.footer}>
+          © 2026 Bali Interaktif Perkasa. All rights reserved.
+        </Text>
+      </ScrollView>
+
+      <TouchableOpacity
+        onPress={handleAccept}
+        disabled={!isAtBottom || isLoading}
+        style={[styles.button, { opacity: !isAtBottom || isLoading ? 0.6 : 1 }]}
+      >
+        <Text style={styles.buttonText}>
+          {isLoading ? "Menyimpan..." : "Saya Setuju"}
+        </Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: MainColor.darkblue,
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 16,
+    color: MainColor.white,
+  },
+  scrollView: {
+    flex: 1,
+    marginBottom: 20,
+  },
+  scrollContent: {
+    paddingBottom: 30,
+  },
+  heading: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 16,
+    marginBottom: 8,
+    color: MainColor.white,
+  },
+  paragraph: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: MainColor.white,
+    marginBottom: 12,
+  },
+  bold: {
+    fontWeight: "600",
+  },
+  list: {
+    marginLeft: 8,
+    marginBottom: 12,
+  },
+  listItem: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: MainColor.white,
+    marginBottom: 6,
+  },
+  footer: {
+    fontSize: 12,
+    color: MainColor.white,
+    textAlign: "center",
+    marginTop: 20,
+    paddingTop: 10,
+    borderTopWidth: 2,
+    borderTopColor: AccentColor.blue,
+  },
+  button: {
+    backgroundColor: MainColor.yellow,
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

screens/Authentication/LoginView.tsx

@@ -1,25 +1,30 @@
 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 } from "@/service/api-config";
+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 { 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";
 
 export default function LoginView() {
+  const url = BASE_URL;
   const [version, setVersion] = useState<string>("");
   const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [inputValue, setInputValue] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
   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();
 
@@ -87,7 +92,13 @@ export default function LoginView() {
 
     try {
       setLoading(true);
-      await loginWithNomor(realNumber);
+      const loginRes = await loginWithNomor(realNumber);
+
+      if (!loginRes) {
+        setModalVisible(true);
+      }
+
+      setNumberToEULA(realNumber);
     } catch (error) {
       console.log("Error login", error);
       Toast.show({
@@ -98,30 +109,6 @@ export default function LoginView() {
     } finally {
       setLoading(false);
     }
-
-    // try {
-    //   setLoading(true);
-    //   // const response = await apiLogin({ nomor: realNumber });
-    //  const response =  await loginWithNomor(realNumber);
-    //  console.log("[RESPONSE]", response);
-
-    //   Toast.show({
-    //     type: "success",
-    //     text1: "Sukses",
-    //     text2: "Kode OTP berhasil dikirim",
-    //   });
-
-    //   // router.navigate(`/verification?nomor=${realNumber}`);
-    // } catch (error) {
-    //   console.log("Error login", error);
-    //   Toast.show({
-    //     type: "error",
-    //     text1: "Error",
-    //     text2: error as string,
-    //   });
-    // } finally {
-    //   setLoading(false);
-    // }
   }
 
   if (token && token !== "" && !isUserActive) {
@@ -182,14 +169,42 @@ export default function LoginView() {
 
         <Spacing />
 
-        <ButtonCustom onPress={handleLogin} isLoading={loading}>
+        <ButtonCustom
+          onPress={handleLogin}
+          disabled={loadingTerm}
+          isLoading={loading || loadingTerm}
+        >
           Login
         </ButtonCustom>
-        <Spacing />
-        {/* <ButtonCustom onPress={() => router.navigate("/(application)/coba")}>
-          Coba
-        </ButtonCustom> */}
+        <Spacing height={50} />
+
+        <Text
+          style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}
+        >
+          Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
+          <Text
+            style={{
+              color: MainColor.yellow,
+              textDecorationLine: "underline",
+            }}
+            onPress={() => {
+              const toUrl = `${url}/terms-of-service.html`;
+              openBrowser(toUrl);
+            }}
+          >
+            Syarat & Ketentuan
+          </Text>{" "}
+          dan seluruh kebijakan privasi yang berlaku.
+        </Text>
       </View>
+
+      <ModalReactNative isVisible={modalVisible}>
+        <EULASection
+          nomor={numberToEULA || ""}
+          onSetModalVisible={setModalVisible}
+          setLoadingTerm={setLoadingTerm}
+        />
+      </ModalReactNative>
     </NewWrapper>
   );
 }

screens/Authentication/RegisterView.tsx

@@ -1,4 +1,3 @@
-import { CheckboxCustom } from "@/components";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
@@ -7,7 +6,6 @@ import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { BASE_URL } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
-import { openBrowser } from "@/utils/openBrower";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useState } from "react";
@@ -17,7 +15,7 @@ import Toast from "react-native-toast-message";
 export default function RegisterView() {
   const { nomor } = useLocalSearchParams();
   const [username, setUsername] = useState("");
-  const [term, setTerm] = useState(false);
+  // const [term, setTerm] = useState(false);
   const url = BASE_URL;
   const { registerUser, isLoading } = useAuth();
 
@@ -65,7 +63,7 @@ export default function RegisterView() {
     await registerUser({
       nomor: nomor as string,
       username: usernameLower,
-      termsOfServiceAccepted: term,
+      termsOfServiceAccepted: true,
     });
   }
 
@@ -106,12 +104,12 @@ export default function RegisterView() {
                 flexDirection: "row",
                 alignItems: "center",
                 marginTop: 16,
-                marginBottom: 16,
+                // marginBottom: 16,
               }}
             >
-              <CheckboxCustom value={term} onChange={() => setTerm(!term)} />
+              {/* <CheckboxCustom value={term} onChange={() => setTerm(!term)} /> */}
 
-              <Text style={GStyles.textLabel}>
+              {/* <Text style={GStyles.textLabel}>
                 Saya setuju dengan{" "}
                 <Text
                   style={{
@@ -126,11 +124,11 @@ export default function RegisterView() {
                   Syarat & Ketentuan
                 </Text>{" "}
                 yang melarang konten tidak pantas dan perilaku merugikan.
-              </Text>
+              </Text> */}
             </View>
 
             <ButtonCustom
-              disabled={!term}
+              disabled={isLoading}
               isLoading={isLoading}
               onPress={handleRegister}
             >

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,306 @@
+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 { 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 ? (
+      <CustomSkeleton height={200} />
+    ) : (
+      <>
+        {/* 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 }) =>
+    !data && !commentPagination.listData ? (
+      <ListSkeletonComponent />
+    ) : (
+      <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={{ paddingHorizontal: 16, 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}
+      />
+    </>
+  );
+}