Merge pull request 'Checkpoint 2' (#28) from checkpoint-2/12-dec-25 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/hipmi-mobile/pulls/28

QWEN.md

@@ -1,282 +0,0 @@
-# HIPMI Mobile Application - Development Context
-
-## Project Overview
-
-HIPMI Mobile is a cross-platform mobile application built with Expo and React Native. The application is named "HIPMI Badung Connect" and serves as a platform for the HIPMI (Himpunan Pengusaha dan Pengusaha Indonesia) Badung chapter. It's designed to run on iOS, Android, and web platforms using a single codebase.
-
-### Key Technologies
-- **Framework**: Expo (v54.0.0) with React Native (v0.81.4)
-- **Language**: TypeScript
-- **Architecture**: File-based routing with Expo Router
-- **State Management**: Context API
-- **UI Components**: React Native Paper, custom components
-- **Maps Integration**: Mapbox Maps for React Native
-- **Push Notifications**: React Native Firebase Messaging
-- **Build System**: Metro bundler
-
-### Project Structure
-```
-hipmi-mobile/
-├── app/                    # Main application screens and routing
-│   ├── _layout.tsx         # Root layout component
-│   ├── index.tsx           # Entry point (Login screen)
-│   └── ...
-├── components/             # Reusable UI components
-├── context/                # State management (AuthContext)
-├── screens/                # Screen components organized by feature
-│   ├── Admin/              # Admin panel screens
-│   ├── Authentication/     # Login, registration flows
-│   ├── Collaboration/      # Collaboration features
-│   ├── Event/              # Event management
-│   ├── Forum/              # Forum functionality
-│   ├── Home/               # Home screen
-│   ├── Maps/               # Map integration
-│   ├── Profile/            # User profile
-│   └── ...
-├── assets/                 # Images, icons, and static assets
-├── constants/              # Constants and configuration values
-├── helpers/                # Helper functions (pagination, etc.)
-├── hooks/                  # Custom React hooks
-├── lib/                    # Utility libraries
-├── navigation/             # Navigation configuration
-├── service/                # API services and business logic
-├── types/                  # TypeScript type definitions
-└── utils/                  # Helper functions
-```
-
-## Building and Running
-
-### Prerequisites
-- Node.js (with bun as the package manager)
-- Expo CLI
-- iOS Simulator or Android Emulator (for native builds)
-- Android Studio (for Android builds)
-- Xcode (for iOS builds, macOS only)
-
-### Setup and Development
-
-1. **Install Dependencies**
-   ```bash
-   bun install
-   ```
-
-2. **Run Development Server**
-   ```bash
-   bun run start
-   ```
-   Or use the shorthand:
-   ```bash
-   bunx expo start
-   ```
-
-3. **Platform-Specific Commands**
-   - iOS: `bun run ios` or `bunx expo start --ios`
-   - Android: `bun run android` or `bunx expo start --android`
-   - Web: `bun run web` or `bunx expo start --web`
-
-4. **Linting**
-   ```bash
-   bun run lint
-   ```
-
-### Build Commands
-
-#### EAS Build (Production)
-```bash
-# Production build
-eas build --profile production
-
-# Preview build
-eas build --profile preview
-
-# Development build
-eas build --profile development
-```
-
-#### Local Native Builds
-```bash
-# Generate native folders (iOS & Android)
-npx expo prebuild
-
-# iOS specific
-bunx expo prebuild --platform ios
-open ios/HIPMIBADUNG.xcworkspace
-
-# Android specific
-bunx expo prebuild --platform android
-```
-
-#### Version Management
-```bash
-# Patch version update
-npm version patch
-```
-
-### Android Debugging
-```bash
-# List connected devices
-adb devices
-
-# Install APK to device/emulator
-adb install android/app/build/outputs/apk/debug/app-debug.apk
-
-# Install to specific device
-adb -s <device_id> install android/app/build/outputs/apk/debug/app-debug.apk
-```
-
-## Environment Variables
-
-The application uses environment variables defined in the `app.config.js` file:
-- `API_BASE_URL`: Base URL for API endpoints
-- `BASE_URL`: Base application URL
-- `DEEP_LINK_URL`: URL for deep linking functionality
-
-Create a `.env` file in the project root with these variables.
-
-## EAS Build Configuration
-
-The project uses Expo Application Services (EAS) for building and deploying:
-- **Development**: Development builds with development client
-- **Preview**: Internal distribution builds (APK for Android)
-- **Production**: App store builds (App Bundle for Android, IPA for iOS)
-
-Configuration is in `eas.json`.
-
-## Features and Functionality
-
-The application includes several key modules:
-- **Authentication**: Login with phone number, OTP verification, registration, terms acceptance
-- **Admin Panel**: Administrative functions for managing content and users
-- **Collaboration**: Tools for member collaboration
-- **Events**: Event management and calendar
-- **Forum**: Discussion forums
-- **Maps**: Location-based services with Mapbox integration
-- **Donations**: Donation functionality with fund disbursement tracking
-- **Job Board**: Employment opportunities
-- **Investment**: Investment-related features
-- **Voting**: Voting systems
-- **Portfolio**: Member portfolio showcase
-- **Notifications**: Push notifications via Firebase
-
-## Development Conventions
-
-### Coding Standards
-- TypeScript is used throughout the project for type safety
-- Component-based architecture with reusable components
-- Context API for state management (AuthContext)
-- File-based routing with Expo Router
-- Consistent naming conventions using camelCase for variables and PascalCase for components
-- Path aliases: `@/*` maps to project root
-
-### Architecture Patterns
-
-#### Screen Components
-- Screen components are stored in `/screens` directory organized by feature
-- Route files in `/app` import and use screen components
-- Example pattern:
-  ```tsx
-  // app/some-route.tsx
-  import SomeScreen from "@/screens/Feature/ScreenSome";
-  
-  export default function SomeRoute() {
-    return <SomeScreen />;
-  }
-  ```
-
-#### Wrapper Components
-- `NewWrapper` component is used for consistent screen layouts
-- Located at `components/_ShareComponent/NewWrapper.tsx`
-
-#### Pagination Pattern
-- Use `hooks/use-pagination.tsx` and `helpers/paginationHelpers.tsx`
-- Helper functions: `createSkeletonList`, `createEmptyState`, `createLoadingFooter`, `createPaginationComponents`
-- API functions should accept `page` parameter (default: "1")
-
-### API Service Structure
-- Base API configuration: `service/api-config.ts`
-- Client APIs: `service/api-client/`
-- Admin APIs: `service/api-admin/`
-- All API calls use axios with interceptors for auth token injection
-
-### Testing
-- Linting is configured with ESLint
-- Standard Expo linting configuration
-
-### Security
-- Firebase is integrated for authentication and messaging
-- Camera and location permissions are properly configured
-- Deep linking is secured with app domain associations
-- Auth tokens stored in AsyncStorage
-
-## Key Dependencies
-
-### Core Dependencies
-- `@react-navigation/*`: Navigation solution for React Native
-- `@react-native-firebase/*`: Firebase integration for React Native
-- `@rnmapbox/maps`: Mapbox integration for React Native
-- `expo-router`: File-based routing for Expo applications
-- `react-native-paper`: Material Design components for React Native
-- `react-native-toast-message`: Toast notifications
-- `react-native-otp-entry`: OTP input components
-- `react-native-qrcode-svg`: QR code generation
-- `axios`: HTTP client for API calls
-- `lodash`: Utility library
-- `moti`: Animation library
-
-### Development Dependencies
-- `@types/*`: TypeScript type definitions
-- `eslint-config-expo`: Expo-specific ESLint configuration
-- `typescript`: Type checking
-
-## Platform Support
-
-The application is configured to support:
-- **iOS**: 
-  - Bundle identifier: `com.anonymous.hipmi-mobile`
-  - Supports tablets
-  - Build number: 21
-  - Google Services integration
-  - Associated domains for deep linking
-- **Android**: 
-  - Package name: `com.bip.hipmimobileapp`
-  - Version code: 4
-  - Adaptive icons
-  - Edge-to-edge display enabled
-  - Intent filters for HTTPS deep linking
-- **Web**: Static output configuration for web deployment
-
-## Special Configurations
-
-### Deep Linking
-- Scheme: `hipmimobile://`
-- Associated domains: `applinks:cld-dkr-staging-hipmi.wibudev.com`
-- Configured for both iOS and Android
-
-### Maps Integration
-The application uses Mapbox for mapping functionality with the `@rnmapbox/maps` plugin.
-
-### Push Notifications
-Firebase Cloud Messaging is integrated for push notifications with proper configuration for both iOS and Android platforms.
-
-### Camera
-Camera permissions configured for both iOS and Android with microphone access for recording.
-
-## Common Development Tasks
-
-### Adding a New Screen
-1. Create screen component in appropriate `/screens` subdirectory
-2. Add route in `/app` directory if needed
-3. Configure navigation in `AppRoot.tsx` if custom header is needed
-
-### Adding API Endpoint
-1. Add function in appropriate service file (`service/api-client/` or `service/api-admin/`)
-2. Use `apiConfig` axios instance for requests
-3. Include proper error handling
-
-### Refactoring Pattern (from docs/prompt-for-qwen-code.md)
-When moving code from route files to screen components:
-1. Create new file in `screens/<Feature>/` directory
-2. Rename function with prefix (e.g., `Admin_`, `Donation_`)
-3. Use `NewWrapper` component for consistent layout
-4. Apply pagination helpers if displaying lists
-5. Import and call from original route file

android/app/build.gradle

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

android/app/src/main/AndroidManifest.xml

@@ -15,8 +15,8 @@
       <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"/>
+  <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">
+    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
     <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"/>

android/app/src/main/res/xml/secure_store_backup_rules.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<full-backup-content>
-  <exclude domain="sharedpref" path="SECURESTORE"/>
-</full-backup-content>

android/app/src/main/res/xml/secure_store_data_extraction_rules.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<data-extraction-rules>
-  <cloud-backup>
-    <exclude domain="sharedpref" path="SECURESTORE"/>
-  </cloud-backup>
-  <device-transfer>
-    <exclude domain="sharedpref" path="SECURESTORE"/>
-  </device-transfer>
-</data-extraction-rules>

android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
     mavenCentral()
   }
   dependencies {
-    classpath 'com.google.gms:google-services:4.4.1'
+        classpath 'com.google.gms:google-services:4.4.1'
     classpath('com.android.tools.build:gradle')
     classpath('com.facebook.react:react-native-gradle-plugin')
     classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')

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: "21",
+    buildNumber: "15",
   },
 
   android: {
@@ -32,7 +32,7 @@ export default {
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 4,
+    versionCode: 3,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {

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

@@ -1,10 +1,8 @@
 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();
@@ -13,48 +11,18 @@ export default function PreviewImage() {
   return (
     <ViewWrapper>
       {id ? (
-        <View
-          style={{
-            width: "100%",
-            height: "100%",
-            position: "relative",
+        <Image
+          onLoad={() => {
+            setIsLoading(false);
           }}
-        >
-          {/* 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>
+          source={
+            isLoading
+              ? require("@/assets/images/loading.gif")
+              : API_STRORAGE.GET({ fileId: id as string })
+          }
+          contentFit="contain"
+          style={{ width: "100%", height: "100%" }}
+        />
       ) : (
         <CenterCustom>
           <TextCustom>File not found</TextCustom>

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

@@ -1,6 +1,4 @@
 import { BackButton } from "@/components";
-import { IconPlus } from "@/components/_Icon";
-import { IconDot } from "@/components/_Icon/IconComponent";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -53,35 +51,24 @@ export default function UserLayout() {
         />
 
         {/* ========== Notification Section ========= */}
-
-        {/* DIPINDAH DI FILE NOTIFICATION USER */}
-        {/* <Stack.Screen
+        <Stack.Screen
           name="notifications/index"
           options={{
             title: "Notifikasi",
             headerLeft: () => <BackButton />,
-            // headerRight: () => (
-            //   <IconPlus
-            //     color={MainColor.yellow}
-            //     onPress={() => router.push("/test-notifications")}
-            //   />
-            // ),
           }}
-        /> */}
+        />
 
         {/* ========== Event Section ========= */}
-
         <Stack.Screen
           name="event/(tabs)"
           options={{
             title: "Event",
-            // NOTE: DIPINDAH DI FILE /Event/(Tabs)/_layout.tsx
-            // headerLeft: () => (
-            //   <LeftButtonCustom path="/(application)/(user)/home" />
-            // ),
+            headerLeft: () => (
+              <LeftButtonCustom path="/(application)/(user)/home" />
+            ),
           }}
         />
-
         <Stack.Screen
           name="event/create"
           options={{
@@ -524,8 +511,7 @@ export default function UserLayout() {
           name="job/(tabs)"
           options={{
             title: "Job Vacancy",
-            // headerLeft: () => <BackButton path="/home" />,
-            // NOTE: headerLeft di pindahkan ke Tabs Layout
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
@@ -616,20 +602,6 @@ 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

@@ -1,9 +1,57 @@
-import Donation_ScreenBeranda from "@/screens/Donation/ScreenBeranda";
+import {
+  FloatingButton,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationBeranda() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetAll({
+        category: "beranda"
+      });
+      console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
-    <>
-      <Donation_ScreenBeranda />
-    </>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/donation/create")} />
+      }
+    >
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">Belum ada donasi</TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Donation_BoxPublish data={item} key={index} id={item.id} />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,5 +1,142 @@
-import Donation_ScreenMyDonation from "@/screens/Donation/ScreenMyDonation";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  BaseBox,
+  DummyLandscapeImage,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { Href, router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function DonationMyDonation() {
-  return <Donation_ScreenMyDonation />;
+  const { user } = useAuth();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  const onLoadData = async () => {
+    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) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerColor = (status: string) => {
+    if (status === "menunggu") {
+      return "orange";
+    } else if (status === "proses") {
+      return "white";
+    } else if (status === "berhasil") {
+      return "green";
+    } else if (status === "gagal") {
+      return "red";
+    }
+  };
+
+  const handlePress = ({
+    invoiceId,
+    donationId,
+    status,
+  }: {
+    invoiceId: string;
+    donationId: string;
+    status: string;
+  }) => {
+    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
+    if (status === "menunggu") {
+      router.push(`${url}/invoice`);
+    } else if (status === "proses") {
+      router.push(`${url}/process`);
+    } else if (status === "berhasil") {
+      router.push(`${url}/success`);
+    } else if (status === "gagal") {
+      router.push(`${url}/failed`);
+    }
+  };
+
+  return (
+    <ViewWrapper hideFooter>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Belum ada transaksi
+        </TextCustom>
+      ) : (
+        list?.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() => {
+              handlePress({
+                status: _.lowerCase(item.statusInvoice),
+                invoiceId: item.id,
+                donationId: item.donasiId,
+              });
+            }}
+          >
+            <Grid>
+              <Grid.Col span={5}>
+                <DummyLandscapeImage
+                  height={100}
+                  unClickPath
+                  imageId={item.imageId}
+                />
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <StackCustom>
+                  <TextCustom truncate={2} bold>
+                    {item.title || "-"}
+                  </TextCustom>
+
+                  <TextCustom bold color="yellow">
+                    Rp. {formatCurrencyDisplay(item.nominal)}
+                  </TextCustom>
+
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    fullWidth
+                  >
+                    {item.statusInvoice}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
+  );
 }

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

@@ -1,10 +1,80 @@
-import Donation_ScreenStatus from "@/screens/Donation/ScreenStatus";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+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 _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationStatus() {
-  const { status } = useLocalSearchParams<{ status?: string }>();
-  
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [activeCategory])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListData(null);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
   return (
-    <Donation_ScreenStatus initialStatus={status || "publish"} />
+    <ViewWrapper hideFooter headerComponent={scrollComponent}>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData?.map((item: any, index: number) => (
+          <Donasi_BoxStatus
+            key={index}
+            data={item}
+            status={activeCategory as string}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
@@ -32,7 +31,7 @@ export default function DonationEditNews() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [news]),
+    }, [news])
   );
 
   const onLoadData = async () => {
@@ -105,21 +104,7 @@ export default function DonationEditNews() {
   };
 
   return (
-    <ViewWrapper
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            disabled={!data?.title || !data?.deskripsi}
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmitUpdate();
-            }}
-          >
-            Update
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
         <LandscapeFrameUploaded
@@ -163,6 +148,15 @@ export default function DonationEditNews() {
         />
 
         <Spacing />
+        <ButtonCustom
+          disabled={!data?.title || !data?.deskripsi}
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmitUpdate();
+          }}
+        >
+          Update
+        </ButtonCustom>
       </StackCustom>
       <Spacing />
     </ViewWrapper>

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

@@ -1,10 +1,8 @@
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
@@ -55,7 +53,7 @@ export default function DonationAddNews() {
           text1: "Gagal menambah berita",
         });
 
-        return;
+        return
       }
 
       Toast.show({
@@ -72,21 +70,7 @@ export default function DonationAddNews() {
   };
 
   return (
-    <NewWrapper
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            disabled={!data.title || !data.deskripsi}
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmit();
-            }}
-          >
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
         <LandscapeFrameUploaded image={image?.uri} />
@@ -132,7 +116,17 @@ export default function DonationAddNews() {
         />
 
         <Spacing />
+        <ButtonCustom
+          disabled={!data.title || !data.deskripsi}
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmit();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
       </StackCustom>
-    </NewWrapper>
+      <Spacing />
+    </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx

@@ -1,8 +1,110 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenListOfNews from "@/screens/Donation/ScreenListOfNews";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenListOfNews donationId={id as string} />;
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Kabar",
+          headerLeft: () => <BackButton />,
+        }}
+      />
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
 }

app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx

@@ -1,8 +1,112 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenRecapOfNews from "@/screens/Donation/ScreenRecapOfNews";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  Grid,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import { formatChatTime } from "@/utils/formatChatTime";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenRecapOfNews donationId={id as string} />;
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetNewsById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada kabar
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox key={index} href={`/donation/[id]/(news)/${item.id}`}>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom truncate bold>
+                    {item?.title || "-"}
+                  </TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
 }

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

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   Grid,
@@ -36,7 +35,7 @@ export default function DonationInvoice() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [invoiceId]),
+    }, [invoiceId])
   );
 
   const onLoadData = async () => {
@@ -101,22 +100,7 @@ export default function DonationInvoice() {
 
   return (
     <>
-      <ViewWrapper
-        hideFooter
-        footerComponent={
-          <BoxButtonOnFooter>
-            <ButtonCustom
-              disabled={!image}
-              isLoading={isLoading}
-              onPress={() => {
-                handlerUpdateInvoice();
-              }}
-            >
-              Simpan
-            </ButtonCustom>
-          </BoxButtonOnFooter>
-        }
-      >
+      <ViewWrapper>
         <StackCustom>
           <InformationBox
             text={`Mohon transfer donasi anda ke rekening dibawah`}
@@ -220,6 +204,16 @@ export default function DonationInvoice() {
               </ButtonCenteredOnly>
             </StackCustom>
           </BaseBox>
+
+          <ButtonCustom
+            disabled={!image}
+            isLoading={isLoading}
+            onPress={() => {
+              handlerUpdateInvoice();
+            }}
+          >
+            Simpan
+          </ButtonCustom>
         </StackCustom>
         <Spacing />
       </ViewWrapper>

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

@@ -10,32 +10,21 @@ 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

@@ -4,12 +4,11 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
 import { IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
@@ -17,7 +16,6 @@ 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,
@@ -26,20 +24,19 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
-import { RefreshControl } from "react-native";
+import { useCallback, useState } from "react";
 
 export default function DonasiDetailStatus() {
   const { id, status } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const [data, setData] = useState<any | null>(null);
+
+  const [data, setData] = useState<any>();
 
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -61,38 +58,6 @@ 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,
-    });
-  };
-
-  const onRefresh = useCallback(() => {
-    try {
-      setRefreshing(true);
-      onLoadData();
-    } catch (error) {
-      console.log("Error refresh");
-    } finally {
-      setRefreshing(false);
-    }
-  }, []);
-
   return (
     <>
       <Stack.Screen
@@ -107,50 +72,26 @@ export default function DonasiDetailStatus() {
             ) : null,
         }}
       />
-      <NewWrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={MainColor.yellow}
-            colors={[MainColor.yellow]}
-          />
-        }
-      >
-        {!data ? (
-          <CustomSkeleton height={400} />
-        ) : (
-          <>
-            <Donation_ComponentBoxDetailData
-              sisaHari={value.sisa}
-              reminder={value.reminder}
-              data={data}
-              showSisaHari={status === "publish" ? true : false}
-              bottomSection={
-                status === "publish" && (
-                  <Donation_ProgressSection
-                    id={id as string}
-                    progres={Number(data?.progres) || 0}
-                  />
-                )
-              }
-            />
-            <Donation_ComponentStoryFunrising
-              id={id as string}
-              dataStory={data?.CeritaDonasi}
-            />
-            <Spacing />
-            {data && (
-              <Donation_ButtonStatusSection
-                id={id as string}
-                status={status as string}
-              />
-            )}
-
-            <Spacing />
-          </>
-        )}
-      </NewWrapper>
+      <ViewWrapper>
+        <Donation_ComponentBoxDetailData
+          data={data}
+          bottomSection={
+            status === "publish" && (
+              <Donation_ProgressSection id={id as string} />
+            )
+          }
+        />
+        <Donation_ComponentStoryFunrising
+          id={id as string}
+          dataStory={data?.CeritaDonasi}
+        />
+        <Spacing />
+        <Donation_ButtonStatusSection
+          id={id as string}
+          status={status as string}
+        />
+        <Spacing />
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,19 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -63,7 +60,7 @@ export default function DonationEdit() {
     useCallback(() => {
       onLoadData();
       onLoadList();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -82,6 +79,7 @@ export default function DonationEdit() {
           imageId: response.data.imageId,
         });
       }
+
     } catch (error) {
       console.log("[ERROR]", error);
     }
@@ -184,24 +182,10 @@ export default function DonationEdit() {
   };
 
   return (
-    <NewWrapper
-      hideFooter
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmitUpdate();
-            }}
-          >
-            Update
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
       {!data || loadList ? (
-        <ListSkeletonComponent />
+        <LoaderCustom />
       ) : (
         <StackCustom gap={"xs"}>
           <TextInputCustom
@@ -276,9 +260,17 @@ export default function DonationEdit() {
           />
 
           <Spacing />
+          <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Update
+          </ButtonCustom>
         </StackCustom>
       )}
       <Spacing />
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

app/(application)/(user)/donation/[id]/fund-disbursement.tsx

@@ -1,8 +1,124 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenFundDisbursement from "@/screens/Donation/ScreenFundDisbursement";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  Grid,
+  InformationBox,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import {
+  apiDonationDisbursementOfFundsListById,
+  apiDonationGetOne,
+} from "@/service/api-client/api-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import dayjs from "dayjs";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useState } from "react";
 
 export default function DonationFundDisbursement() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenFundDisbursement donationId={id as string} />;
+
+  const [data, setData] = useState({
+    totalPencairan: 0,
+    akumulasiPencairan: 0,
+  });
+
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+
+      const responseData = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      if (responseData.success) {
+        setData({
+          totalPencairan: responseData.data.totalPencairan,
+          akumulasiPencairan: responseData.data.akumulasiPencairan,
+        });
+      }
+
+      const responseList = await apiDonationDisbursementOfFundsListById({
+        id: id as string,
+      });
+
+      if (responseList.success) {
+        setListData(responseList.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                Rp. {formatCurrencyDisplay(data?.totalPencairan)}
+              </TextCustom>
+              <TextCustom size="small">Total Pencairan Dana</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                {data?.akumulasiPencairan} kali
+              </TextCustom>
+              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Belum ada data
+          </TextCustom>
+        ) : (
+          listData?.map((item, index) => (
+            <BaseBox key={index}>
+              <StackCustom>
+                <Grid>
+                  <Grid.Col span={8}>
+                    <TextCustom bold>{item?.title}</TextCustom>
+                  </Grid.Col>
+                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
+                  </Grid.Col>
+                </Grid>
+                <TextCustom>{item?.deskripsi}</TextCustom>
+                <ButtonCenteredOnly
+                  onPress={() => {
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
+                  }}
+                  icon="file-text"
+                >
+                  Bukti Transaksi
+                </ButtonCenteredOnly>
+              </StackCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+    </>
+  );
 }

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

@@ -6,12 +6,10 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
   StackCustom,
   ViewWrapper,
 } from "@/components";
 import { IconNews } from "@/components/_Icon";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { useAuth } from "@/hooks/use-auth";
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
@@ -36,7 +34,7 @@ export default function DonasiDetailBeranda() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -77,10 +75,10 @@ export default function DonasiDetailBeranda() {
     <>
       <BoxButtonOnFooter>
         <ButtonCustom
-          disabled={value?.reminder || !data}
+          disabled={value?.reminder}
           onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
         >
-          {!data ? "Loading..." : value?.reminder ? "Waktu berakhir" : "Donasi"}
+          {value?.reminder ? "Waktu berakhir" : "Donasi"}
         </ButtonCustom>
       </BoxButtonOnFooter>
     </>
@@ -98,30 +96,21 @@ export default function DonasiDetailBeranda() {
             ) : null,
         }}
       />
-      <NewWrapper footerComponent={buttonSection}>
-        {!data ? (
-          <CustomSkeleton height={400} />
-        ) : (
-          <StackCustom>
-            <Donation_ComponentBoxDetailData
-              sisaHari={value.sisa}
-              reminder={value.reminder}
-              data={data}
-              bottomSection={
-                <Donation_ProgressSection
-                  id={id as string}
-                  progres={Number(data?.progres) || 0}
-                />
-              }
-            />
-            <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
-            <Donation_ComponentStoryFunrising
-              id={id as string}
-              dataStory={data?.CeritaDonasi}
-            />
-          </StackCustom>
-        )}
-      </NewWrapper>
+      <ViewWrapper footerComponent={buttonSection}>
+        <StackCustom>
+          <Donation_ComponentBoxDetailData
+            sisaHari={value.sisa}
+            reminder={value.reminder}
+            data={data}
+            bottomSection={<Donation_ProgressSection id={id as string} progres={Number(data?.progres) || 0} />}
+          />
+          <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
+          <Donation_ComponentStoryFunrising
+            id={id as string}
+            dataStory={data?.CeritaDonasi}
+          />
+        </StackCustom>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

app/(application)/(user)/donation/[id]/list-of-donatur.tsx

@@ -1,8 +1,94 @@
-import { useLocalSearchParams } from "expo-router";
-import Donation_ScreenListOfDonatur from "@/screens/Donation/ScreenListOfDonatur";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { apiAdminDonationListOfDonaturById } from "@/service/api-admin/api-admin-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
-export default function DonationListOfDonatur() {
+export default function Donation_ListOfDonatur() {
   const { id } = useLocalSearchParams();
-  
-  return <Donation_ScreenListOfDonatur donationId={id as string} />;
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadData, setLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationListOfDonaturById({
+        id: id as string,
+      });
+
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom bold align="center">
+            Belum ada donatur
+          </TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
+            <BaseBox key={index}>
+              <Grid>
+                <Grid.Col
+                  span={3}
+                  style={{ alignItems: "center", justifyContent: "center" }}
+                >
+                  <FontAwesome6
+                    name="face-smile-wink"
+                    size={50}
+                    style={{ color: MainColor.yellow }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={9}>
+                  <TextCustom bold size="large">
+                    {item?.Author?.username || "-"}
+                  </TextCustom>
+                  <Spacing/>
+                  <StackCustom gap={"xs"}>
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
+                    <TextCustom bold size="large" color="yellow">
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
+                    </TextCustom>
+                    <TextCustom>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
+                    </TextCustom>
+                  </StackCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+    </>
+  );
 }

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

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
@@ -9,8 +8,8 @@ import {
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -104,7 +103,7 @@ export default function DonationCreateStory() {
         type: "success",
         text1: "Donasi berhasil disimpan",
       });
-      router.replace("/donation/status?status=review");
+      router.replace("/donation/status");
     } catch (error) {
       console.log("[ERROR]", error);
     } finally {
@@ -113,23 +112,7 @@ export default function DonationCreateStory() {
   };
 
   return (
-    <NewWrapper
-      hideFooter
-      footerComponent={
-        <>
-         <BoxButtonOnFooter>
-           <ButtonCustom
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmit();
-            }}
-          >
-            Simpan
-          </ButtonCustom>
-         </BoxButtonOnFooter>
-        </>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
         <TextAreaCustom
@@ -183,8 +166,18 @@ export default function DonationCreateStory() {
           value={data.rekening}
           onChangeText={(value) => setData({ ...data, rekening: value })}
         />
+
+        <Spacing />
+        <ButtonCustom
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmit();
+          }}
+        >
+          Simpan
+        </ButtonCustom>
       </StackCustom>
       <Spacing />
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,5 +1,4 @@
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
@@ -9,8 +8,8 @@ import {
   Spacing,
   StackCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreate } from "@/service/api-client/api-donation";
 import { apiMasterDonation } from "@/service/api-client/api-master";
@@ -44,7 +43,7 @@ export default function DonationCreate() {
   useFocusEffect(
     useCallback(() => {
       onLoadList();
-    }, []),
+    }, [])
   );
 
   const onLoadList = async () => {
@@ -126,24 +125,7 @@ export default function DonationCreate() {
   };
 
   return (
-    <NewWrapper
-      hideFooter
-      footerComponent={
-        <>
-          <BoxButtonOnFooter>
-            <ButtonCustom
-              isLoading={isLoading}
-              onPress={() => {
-                handlerSubmit();
-                // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
-              }}
-            >
-              Selanjutnya
-            </ButtonCustom>
-          </BoxButtonOnFooter>
-        </>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
 
@@ -219,8 +201,20 @@ export default function DonationCreate() {
             onChange={(value: any) => setData({ ...data, durasiId: value })}
           />
         )}
+
+        <Spacing />
+        <ButtonCustom
+          isLoading={isLoading}
+          onPress={() => {
+            handlerSubmit();
+            // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
+          }}
+        >
+          Selanjutnya
+        </ButtonCustom>
+        <Spacing />
       </StackCustom>
       <Spacing />
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

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

@@ -4,34 +4,10 @@ import {
   IconHome,
   IconStatus,
 } from "@/components/_Icon";
-import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
-import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
-import { useLayoutEffect } from "react";
+import { Tabs } from "expo-router";
 
 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)/contribution.tsx

@@ -1,10 +1,115 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Event_ScreenContribution from "@/screens/Event/ScreenContribution";
+import {
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiEventGetAll
+} from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
 
 export default function EventContribution() {
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id])
+  );
+
+  async function onLoadData() {
+    try {
+      setIsLoadList(true);
+      const response = await apiEventGetAll({
+        category: "contribution",
+        userId: user?.id,
+      });
+      console.log("[DATA] ", JSON.stringify(response.data, null, 2));
+      if (response.success) {
+        setListData(response.data);
+
+        // const responseListParticipants = await apiEventListOfParticipants({
+        //   id: response?.data?.Event?.id,
+        // });
+        // console.log(
+        //   "[LIST PARTICIPANTS]",
+        //   JSON.stringify(responseListParticipants.data, null, 2)
+        // );
+        // if (responseListParticipants.success) {
+        //   setListParticipants(responseListParticipants.data);
+        // }
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  }
+
   return (
-    <>
-      <Event_ScreenContribution />
-    </>
+    <ViewWrapper hideFooter>
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada kontribusi</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <BoxWithHeaderSection
+            key={index}
+            href={`/event/${item?.Event?.id}/contribution`}
+          >
+            <StackCustom>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Event?.Author?.Profile?.imageId}
+                avatarHref={`/profile/${item?.Event?.Author?.Profile?.id}`}
+                name={item?.Event?.Author?.username}
+                rightComponent={
+                  <TextCustom truncate>
+                    {dateTimeView({
+                      date: item?.Event?.tanggal,
+                      withoutTime: true,
+                    })}
+                  </TextCustom>
+                }
+              />
+
+              <TextCustom bold align="center" size="xlarge" truncate={2}>
+                {item?.Event?.title}
+              </TextCustom>
+              <Spacing height={0} />
+
+              {/* <Grid>
+                {item?.Event?.Event_Peserta?.map(
+                  (item2: any, index2: number) => (
+                    <Grid.Col
+                      style={{ alignItems: "center" }}
+                      span={12 / item?.Event?.Event_Peserta?.length}
+                      key={index2}
+                    >
+                      <AvatarComp
+                        size="base"
+                        href={`/profile/${item2?.User?.Profile?.id}`}
+                        fileId={item2?.User?.Profile?.imageId}
+                      />
+                    </Grid.Col>
+                  )
+                )}
+              </Grid> */}
+            </StackCustom>
+          </BoxWithHeaderSection>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

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

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

@@ -1,9 +1,63 @@
-import Event_ScreenBeranda from "@/screens/Event/ScreenBeranda";
+import { LoaderCustom, TextCustom } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import FloatingButton from "@/components/Button/FloatingButton";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function EventBeranda() {
+  const [listData, setListData] = useState([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiEventGetAll({category: "beranda"});
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
   return (
-    <>
-      <Event_ScreenBeranda />
-    </>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/event/create")} />
+      }
+    >
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada event</TextCustom>
+      ) : (
+        listData.map((item: any, index) => (
+
+          
+          <Event_BoxPublishSection
+            key={index}
+            href={`/event/${item.id}/publish`}
+            data={item}
+            rightComponentAvatar={
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

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

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

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

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

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

app/(application)/(user)/event/[id]/list-of-participants.tsx

@@ -1,10 +1,110 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Event_ScreenListOfParticipants from "@/screens/Event/ScreenListOfParticipants";
+import {
+  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
+  BaseBox,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import {
+  apiEventGetOne,
+  apiEventListOfParticipants,
+} from "@/service/api-client/api-event";
+import dayjs, { Dayjs } from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function EventListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [startDate, setStartDate] = useState<Dayjs | undefined>();
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadtData, setLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [id])
+  );
+
+  const handlerLoadData = () => {
+    try {
+      onLoadData();
+      onLoadList();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        const date = dayjs(response.data.tanggal);
+        setStartDate(date);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadList = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiEventListOfParticipants({ id: id as string });
+     
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
   return (
-    <>
-      <Event_ScreenListOfParticipants />
-    </>
+    <ViewWrapper>
+      {loadtData && !listData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center" color="gray">
+          Belum ada peserta
+        </TextCustom>
+      ) : (
+        listData?.map((item: any, index: number) => (
+          <BaseBox key={index}>
+            <AvatarUsernameAndOtherComponent
+              avatar={item?.User?.Profile?.imageId}
+              name={item?.User?.username}
+              avatarHref={`/profile/${item?.User?.Profile?.id}`}
+              rightComponent={
+                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
+                  <View
+                    style={{
+                      justifyContent: "flex-end",
+                    }}
+                  >
+                    <BadgeCustom color={item?.isPresent ? "green" : "red"}>
+                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+                    </BadgeCustom>
+                  </View>
+                ) : (
+                  <View
+                    style={{
+                      justifyContent: "flex-end",
+                    }}
+                  >
+                    <BadgeCustom color="gray">-</BadgeCustom>
+                  </View>
+                )
+              }
+            />
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

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

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

@@ -1,13 +1,12 @@
 import {
-  BoxButtonOnFooter,
   ButtonCustom,
-  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { useAuth } from "@/hooks/use-auth";
@@ -15,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 { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 interface EventCreateProps {
@@ -79,6 +78,23 @@ 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);
 
@@ -94,13 +110,14 @@ export default function EventCreate() {
       const response = await apiEventCreate(newData);
       console.log("Response", JSON.stringify(response, null, 2));
 
-      router.replace("/event/status?status=review");
+      router.replace("/event/status");
     } catch (error) {
       console.log(error);
     } finally {
       setIsLoading(false);
     }
   };
+  
 
   const buttonSubmit = (
     <ButtonCustom
@@ -112,9 +129,7 @@ export default function EventCreate() {
 
   return (
     <>
-      <NewWrapper
-        footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
-      >
+      <ViewWrapper>
         <StackCustom gap={"xs"}>
           <TextInputCustom
             placeholder="Masukkan nama event"
@@ -123,17 +138,26 @@ export default function EventCreate() {
             onChangeText={(value: any) => setData({ ...data, title: value })}
           />
 
-          <TextAreaCustom
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi event"
-            required
-            showCount
-            value={data?.deskripsi || ""}
-            onChangeText={(value: any) =>
-              setData({ ...data, deskripsi: value })
+          <SelectCustom
+            label="Tipe Event"
+            placeholder="Pilih tipe event"
+            data={listTypeEvent.map((item: any) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data?.eventMaster_TipeAcaraId || null}
+            onChange={(value: any) =>
+              setData({ ...data, eventMaster_TipeAcaraId: value })
             }
           />
 
+          <TextInputCustom
+            label="Lokasi"
+            placeholder="Masukkan lokasi event"
+            required
+            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+          />
+
           <DateTimePickerCustom
             label="Tanggal & Waktu Mulai"
             required
@@ -161,28 +185,22 @@ export default function EventCreate() {
               </TextCustom>
             )}
             <Spacing />
-            <SelectCustom
-              label="Tipe Event"
-              placeholder="Pilih tipe event"
-              data={listTypeEvent.map((item: any) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data?.eventMaster_TipeAcaraId || null}
-              onChange={(value: any) =>
-                setData({ ...data, eventMaster_TipeAcaraId: value })
-              }
-            />
-
-            <TextInputCustom
-              label="Lokasi"
-              placeholder="Masukkan lokasi event"
-              required
-              onChangeText={(value: any) => setData({ ...data, lokasi: value })}
-            />
           </StackCustom>
+
+          <TextAreaCustom
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi event"
+            required
+            showCount
+            value={data?.deskripsi || ""}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
+          />
+
+          {buttonSubmit}
         </StackCustom>
-      </NewWrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,11 +1,271 @@
-import DetailForum from "@/screens/Forum/DetailForum";
-import DetailForum2 from "@/screens/Forum/DetailForum2";
+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;
+    };
+  };
+}
 
 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 (
     <>
-     {/* <DetailForum />; */}
-     <DetailForum2 />
+      <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>
     </>
-  )
+  );
 }

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-forum";
+import { apiForumCreateReportCommentar } from "@/service/api-client/api-master";
 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-forum";
+import { apiForumCreateReportPosting } from "@/service/api-client/api-master";
 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

@@ -1,91 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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,8 +8,7 @@ import {
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import Forum_ReportListSection from "@/screens/Forum/ReportListSection";
-import { apiForumCreateReportCommentar } from "@/service/api-client/api-forum";
-import { apiMasterForumReportList } from "@/service/api-client/api-master";
+import { apiForumCreateReportCommentar, 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,14 +2,15 @@ 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 { censorText, isBadContent } from "@/utils/badWordsIndonesia";
+import { 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() {
@@ -18,22 +19,16 @@ export default function ForumCreate() {
   const [isLoading, setIsLoading] = useState(false);
 
   const handlerSubmit = async () => {
-    if (text.trim() === "") {
-      AlertWarning({
-        title: "Lengkapi Data",
-        description: "Postingan tidak boleh kosong",
-      });
+    
+    if (isBadContent(text)) {
+      AlertWarning({})
       return;
     }
-
-    // Bisa di sensor atau return dan tidak bisa di post
-    const cencorContent = censorText(text)
-
+    
     const newData = {
-      diskusi: cencorContent,
+      diskusi: text,
       authorId: user?.id,
     };
-
     try {
       setIsLoading(true);
       const response = await apiForumCreate({ data: newData });
@@ -55,7 +50,6 @@ export default function ForumCreate() {
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        disabled={!text.trim() || isLoading}
         isLoading={isLoading}
         onPress={() => {
           handlerSubmit();

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

@@ -1,14 +1,12 @@
 /* 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_ViewBeranda3 />
+      <Forum_ViewBeranda2 />
     </>
   );
 }

app/(application)/(user)/home.tsx

@@ -1,11 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BasicWrapper, 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";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
-import HeaderBell from "@/screens/Home/HeaderBell";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
@@ -14,29 +12,29 @@ import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { RefreshControl } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
   const [data, setData] = useState<any>();
   const [refreshing, setRefreshing] = useState(false);
-  const { syncUnreadCount } = useNotificationStore();
+  console.log("[User] >>", JSON.stringify(user?.id, null, 2));
 
+  // ‼️ Untuk cek apakah: 1. user ada, 2. user punya profile, 3. accept temrs of forum nya ada atau tidak
   useFocusEffect(
     useCallback(() => {
       onLoadData();
       checkVersion();
       userData(token as string);
-      syncUnreadCount();
-    }, [user?.id, token]),
+    }, [user?.id, token])
   );
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
     console.log(
       "[Profile ID]>>",
-      JSON.stringify(response?.data?.Profile?.id, null, 2),
+      JSON.stringify(response?.data?.Profile?.id, null, 2)
     );
 
     setData(response.data);
@@ -54,38 +52,21 @@ 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");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/waiting-room`} />
-      </BasicWrapper>
-    );
+    return <Redirect href={`/waiting-room`} />;
   }
 
   if (data && data?.Profile === null) {
     console.log("Profile is null");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/profile/create`} />
-      </BasicWrapper>
-    );
+    return <Redirect href={`/profile/create`} />;
   }
 
-  // if (data && data?.masterUserRoleId !== "1") {
-  //   console.log("User is not admin");
-  //   return (
-  //     <BasicWrapper>
-  //       <Redirect href={`/admin/dashboard`} />
-  //     </BasicWrapper>
-  //   );
-  // }
-
   return (
     <>
       <Stack.Screen
@@ -101,17 +82,22 @@ export default function Application() {
               }}
             />
           ),
-          headerRight: () => <HeaderBell />,
+          headerRight: () => (
+            <Ionicons
+              disabled={true}
+              name="notifications"
+              size={20}
+              color={MainColor.placeholder}
+              onPress={() => {
+                router.push("/notifications");
+              }}
+            />
+          ),
         }}
       />
       <ViewWrapper
         refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={MainColor.yellow}
-            colors={[MainColor.yellow]}
-          />
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
         }
         footerComponent={
           <TabSection
@@ -123,10 +109,6 @@ export default function Application() {
         }
       >
         <StackCustom>
-          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>
-            Test Notif
-          </ButtonCustom> */}
-
           <Home_ImageSection />
 
           <Home_FeatureSection />

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

@@ -1,33 +1,9 @@
-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 { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
-import { useLayoutEffect } from "react";
+import { Tabs } from "expo-router";
 
 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)/index.tsx

@@ -1,9 +1,56 @@
-import Investment_ScreenBursa from "@/screens/Invesment/ScreenBursa";
+import {
+  FloatingButton,
+  LoaderCustom,
+  ViewWrapper
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import Investment_BoxBerandaSection from "@/screens/Invesment/BoxBerandaSection";
+import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentBursa() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll({
+        category: "bursa"
+      });
+      // console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenBursa />
-    </>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/investment/create")} />
+      }
+    >
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <NoDataText />
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Investment_BoxBerandaSection id={item.id} data={item} key={index} />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,10 +1,102 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenMyHolding from "@/screens/Invesment/ScreenMyHolding";
+import {
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  ProgressCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  apiInvestmentGetAll
+} from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function InvestmentMyHolding() {
+  const { user } = useAuth();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [user?.id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll({
+        category: "my-holding",
+        authorId: user?.id,
+      });
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenMyHolding />
-    </>
+    <ViewWrapper hideFooter>
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <NoDataText />
+      ) : (
+        list?.map((item, index) => (
+          <BaseBox
+            key={index}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() =>
+              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>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,10 +1,80 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenPortofolio from "@/screens/Invesment/ScreenPortofolio";
+import {
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+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 _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentPortofolio() {
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const [listData, setListData] = useState<any[]>([]);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
   return (
-    <>
-      <Investment_ScreenPortofolio />
-    </>
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {loadingList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Investment_StatusBox
+            key={index}
+            data={item}
+            status={activeCategory as string}
+            href={`/investment/${item.id}/${activeCategory}/detail`}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,10 +1,124 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenTransaction from "@/screens/Invesment/ScreenTransaction";
+import {
+  BadgeCustom,
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
+import { GStyles } from "@/styles/global-styles";
+import { formatChatTime } from "@/utils/formatChatTime";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function InvestmentTransaction() {
+  const { user } = useAuth();
+  const [list, setList] = useState<any>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [user?.id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetInvoice({
+        authorId: user?.id as string,
+        category: "transaction",
+      });
+      console.log("[RESPONSE LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerColor = (status: string) => {
+    if (status === "menunggu") {
+      return "orange";
+    } else if (status === "proses") {
+      return "white";
+    } else if (status === "berhasil") {
+      return "green";
+    } else if (status === "gagal") {
+      return "red";
+    }
+  };
+
+  const handlePress = ({ id, status }: { id: string; status: string }) => {
+    if (status === "menunggu") {
+      router.push(`/investment/${id}/(transaction-flow)/invoice`);
+    } else if (status === "proses") {
+      router.push(`/investment/${id}/(transaction-flow)/process`);
+    } else if (status === "berhasil") {
+      router.push(`/investment/${id}/(transaction-flow)/success`);
+    } else if (status === "gagal") {
+      router.push(`/investment/${id}/(transaction-flow)/failed`);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenTransaction />
-    </>
+    <ViewWrapper hideFooter>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <NoDataText/>
+      ) : (
+        list.map((item: any, i: number) => (
+          <BaseBox
+            key={i}
+            paddingTop={7}
+            paddingBottom={7}
+            onPress={() => {
+              handlePress({
+                id: item.id,
+                status: _.lowerCase(item.statusInvoice),
+              });
+            }}
+          >
+            <Grid>
+              <Grid.Col span={6}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom truncate>{item?.title || "-"}</TextCustom>
+                  <TextCustom color="gray" size="small">
+                    {formatChatTime(item?.createdAt)}
+                  </TextCustom>
+                </StackCustom>
+              </Grid.Col>
+              <Grid.Col span={1}>
+                <View />
+              </Grid.Col>
+              <Grid.Col span={5} style={{ alignItems: "flex-end" }}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold truncate>
+                    Rp. {formatCurrencyDisplay(item?.nominal) || "-"}
+                  </TextCustom>
+                  <BadgeCustom
+                    variant="light"
+                    color={handlerColor(_.lowerCase(item.statusInvoice))}
+                    style={GStyles.alignSelfFlexEnd}
+                  >
+                    {item?.statusInvoice || "-"}
+                  </BadgeCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/list-of-document.tsx

@@ -1,10 +1,58 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenListOfDocument from "@/screens/Invesment/Document/ScreenListDocument";
+import { LoaderCustom, TextCustom, ViewWrapper } from "@/components";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import { apiInvestmentGetDocument } from "@/service/api-client/api-investment";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfDocument() {
+  const { id } = useLocalSearchParams();
+  console.log("ID >> ", id);
+
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
-    <>
-      <Investment_ScreenListOfDocument />
-    </>
+    <ViewWrapper>
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom align="center" color="gray">
+          Tidak ada data
+        </TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Investment_BoxDetailDocument
+            key={index}
+            title={item.title}
+            href={`/(file)/${item.fileId}`}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx

@@ -1,10 +1,213 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenRecapOfDocument from "@/screens/Invesment/Document/ScreenRecapOfDocument";
+import {
+  AlertDefaultSystem,
+  BackButton,
+  DotButton,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
+import {
+  apiInvestmentDeleteDocument,
+  apiInvestmentGetDocument,
+} from "@/service/api-client/api-investment";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentRecapOfDocument() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openDrawerBox, setOpenDrawerBox] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [selectId, setSelectId] = useState<string | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadListDocument();
+    }, [id])
+  );
+
+  const onLoadListDocument = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetDocument({
+        id: id as string,
+        category: "all-document",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setList([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const handlerDeleteDocument = async () => {
+    try {
+      const response = await apiInvestmentDeleteDocument({
+        id: selectId as string,
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Data berhasil dihapus",
+        });
+        setList((prev: any[] | null) => {
+          if (!prev) return null;
+          return prev.filter((item: any) => item.id !== selectId);
+        });
+        setOpenDrawerBox(false);
+        setSelectId(null);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      Toast.show({
+        type: "error",
+        text1: "Gagal menghapus data",
+      });
+    }
+  };
+
   return (
     <>
-      <Investment_ScreenRecapOfDocument />
+      <Stack.Screen
+        options={{
+          title: "Rekap Dokumen",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton
+              onPress={() => {
+                setOpenDrawer(true);
+                setOpenDrawerBox(false);
+              }}
+            />
+          ),
+        }}
+      />
+
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Investment_BoxDetailDocument
+              key={index}
+              title={item.title}
+              leftIcon={
+                <Ionicons
+                  name="ellipsis-horizontal-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                  style={{
+                    zIndex: 10,
+                    alignSelf: "flex-end",
+                  }}
+                  onPress={() => {
+                    setSelectId(item.id);
+                    setOpenDrawerBox(true);
+                  }}
+                />
+              }
+              href={`/(file)/${item.fileId}`}
+            />
+          ))
+        )}
+      </ViewWrapper>
+
+      {/* Drawer On Header */}
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: (
+                <AntDesign
+                  name="plus-circle"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Tambah Dokumen",
+              path: `/investment/${id}/(document)/add-document`,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Drawer On Box */}
+      <DrawerCustom
+        isVisible={openDrawerBox}
+        closeDrawer={() => setOpenDrawerBox(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconEdit />,
+              label: "Edit Dokumen",
+              path: `/investment/${selectId}/(document)/edit-document`,
+            },
+            {
+              icon: (
+                <Ionicons
+                  name="trash-outline"
+                  size={ICON_SIZE_SMALL}
+                  color={MainColor.white}
+                />
+              ),
+              label: "Hapus Dokumen",
+              path: "" as any,
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            if (item.path === ("" as any)) {
+              AlertDefaultSystem({
+                title: "Hapus Dokumen",
+                message: "Apakah anda yakin ingin menghapus dokumen ini?",
+                textLeft: "Batal",
+                textRight: "Hapus",
+                onPressRight: () => {
+                  handlerDeleteDocument();
+                },
+              });
+            } else {
+              router.push(item.path as any);
+            }
+
+            setOpenDrawerBox(false);
+          }}
+        />
+      </DrawerCustom>
     </>
   );
 }

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

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

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

@@ -1,10 +1,100 @@
-import Investment_ScreenListOfNews from "@/screens/Invesment/News/ScreenListOfNews";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentListOfNews() {
   const { id } = useLocalSearchParams();
-  
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetNews({
+        id: id as string,
+        category: "all-news",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
   return (
-    <Investment_ScreenListOfNews investmentId={id as string} />
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Berita",
+          headerLeft: () => <BackButton />,
+          //   headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/investment/[id]/(news)/${item.id}`}
+            >
+              <TextCustom bold>{item.title}</TextCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${id}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
   );
 }

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

@@ -1,10 +1,101 @@
-import Investment_ScreenRecapOfNews from "@/screens/Invesment/News/ScreenRecapOfNews";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BackButton,
+  BaseBox,
+  DotButton,
+  DrawerCustom,
+  LoaderCustom,
+  MenuDrawerDynamicGrid,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { apiInvestmentGetNews } from "@/service/api-client/api-investment";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentRecapOfNews() {
   const { id } = useLocalSearchParams();
-  
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiInvestmentGetNews({
+        id: id as string,
+        category: "all-news",
+      });
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
-    <Investment_ScreenRecapOfNews investmentId={id as string} />
+    <>
+      <Stack.Screen
+        options={{
+          title: "Rekap Berita",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+        }}
+      />
+      <ViewWrapper>
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom align="center" color="gray">
+            Tidak ada data
+          </TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BaseBox
+              key={index}
+              paddingBlock={5}
+              href={`/investment/[id]/(news)/${item.id}`}
+            >
+              <TextCustom bold>{item.title}</TextCustom>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              label: "Tambah Berita",
+              path: `/investment/${id}/add-news`,
+              icon: <IconPlus />,
+            },
+          ]}
+          onPressItem={(item) => {
+            router.push(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
   );
 }

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

@@ -1,10 +1,239 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Investment_ScreenInvoice from "@/screens/Invesment/ScreenInvoice";
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  Grid,
+  InformationBox,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import CopyButton from "@/components/Button/CoyButton";
+import { MainColor } from "@/constants/color-palet";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiInvestmentGetInvoice,
+  apiInvestmentUpdateInvoice,
+} from "@/service/api-client/api-investment";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { View } from "react-native";
+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: "",
+    uri: "",
+    size: 0,
+  });
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetInvoice({
+        id: id as string,
+        category: "invoice",
+      });
+
+      console.log("[RES INVOICE]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    try {
+      setIsLoading(true);
+      const responseUploadImage = await uploadFileService({
+        dirId: DIRECTORY_ID.investasi_bukti_transfer,
+        imageUri: image?.uri,
+      });
+
+      console.log("[RESPONSE UPLOAD IMAGE]", responseUploadImage);
+
+      if (!responseUploadImage?.data?.id) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengunggah bukti transfer",
+        });
+        return;
+      }
+
+      const response = await apiInvestmentUpdateInvoice({
+        id: id as string,
+        data: {
+          imageId: responseUploadImage?.data?.id,
+        },
+        status: "proses",
+      });
+
+      if (response.success) {
+        console.log(
+          "[RESPONSE UPDATE]",
+          JSON.stringify(response.data, null, 2)
+        );
+        Toast.show({
+          type: "success",
+          text1: "Berhasil mengunggah bukti transfer",
+        });
+        router.push(`/investment/${id}/(transaction-flow)/process`);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <>
-      <Investment_ScreenInvoice />
+      <ViewWrapper>
+        <StackCustom>
+          <InformationBox text="Mohon transfer ke rekening dibawah" />
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <Grid>
+                <Grid.Col span={4}>
+                  <TextCustom>Bank</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{data?.MasterBank?.namaBank}</TextCustom>
+                </Grid.Col>
+              </Grid>
+              <Spacing height={10} />
+              <Grid>
+                <Grid.Col span={4}>
+                  <TextCustom>Nama Akun</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={8}>
+                  <TextCustom>{data?.MasterBank?.namaAkun}</TextCustom>
+                </Grid.Col>
+              </Grid>
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      {data?.MasterBank?.norek}
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <CopyButton textToCopy={data?.MasterBank?.norek} />
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom gap={"xs"}>
+              <TextCustom>Jumlah Transaksi</TextCustom>
+
+              <Spacing height={10} />
+
+              <BaseBox backgroundColor={MainColor.soft_darkblue}>
+                <Grid containerStyle={{ justifyContent: "center" }}>
+                  <Grid.Col
+                    span={8}
+                    style={{
+                      justifyContent: "center",
+                    }}
+                  >
+                    <TextCustom size="xlarge" bold color="yellow">
+                      Rp. {formatCurrencyDisplay(data?.nominal)}
+                    </TextCustom>
+                  </Grid.Col>
+                  <Grid.Col
+                    span={4}
+                    style={{
+                      alignItems: "flex-end",
+                    }}
+                  >
+                    <CopyButton textToCopy={data?.nominal} />
+                  </Grid.Col>
+                </Grid>
+              </BaseBox>
+            </StackCustom>
+          </BaseBox>
+
+          <BaseBox>
+            <StackCustom>
+              <TextCustom align="center">
+                Upload bukti transfer anda.
+              </TextCustom>
+              {image ? (
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 10,
+                    paddingInline: 20,
+                  }}
+                >
+                  <TextCustom bold align="center" truncate>
+                    {image?.name}
+                  </TextCustom>
+                </View>
+              ) : (
+                <TextCustom align="center">
+                  Tidak ada gambar yang diunggah
+                </TextCustom>
+              )}
+              <ButtonCenteredOnly
+                onPress={() => {
+                  pickFile({
+                    allowedType: "image",
+                    setImageUri(file: any) {
+                      console.log("[IMAGE]", file);
+                      setImage(file);
+                    },
+                  });
+                }}
+                icon="upload"
+              >
+                Upload
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+
+          <ButtonCustom
+            isLoading={isLoading}
+            disabled={!image}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Saya Sudah Transfer
+          </ButtonCustom>
+        </StackCustom>
+        <Spacing />
+      </ViewWrapper>
     </>
   );
 }

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

@@ -56,6 +56,7 @@ export default function InvestmentSelectBank() {
         });
 
         if (response.success) {
+          console.log("[RESPONSE >>]", response);
           const invoiceId = response.data.id;
 
           const delStorage = await AsyncStorage.removeItem(

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

@@ -15,7 +15,6 @@ 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,
@@ -24,7 +23,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetailStatus() {
   const { user } = useAuth();
@@ -64,28 +63,6 @@ export default function InvestmentDetailStatus() {
     setOpenDrawerPublish(false);
   };
 
-  const [value, setValue] = useState({
-    sisa: 0,
-    reminder: false,
-  });
-
-  useEffect(() => {
-    updateCountDown();
-  }, [data]);
-
-
-  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}
@@ -95,11 +72,7 @@ export default function InvestmentDetailStatus() {
   );
 
   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} />
   );
 
   return (

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

@@ -1,16 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
   LoaderCustom,
-  NewWrapper,
   SelectCustom,
   Spacing,
   StackCustom,
-  TextInputCustom
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -19,7 +18,10 @@ 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";
@@ -68,7 +70,7 @@ export default function InvestmentEdit() {
     useCallback(() => {
       onLoadMaster();
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadMaster = async () => {
@@ -176,7 +178,7 @@ export default function InvestmentEdit() {
       const responseUpdate = await apiInvestmentUpdateData({
         id: id as string,
         data: newData,
-        category: "data",
+        category: "data"
       });
 
       if (responseUpdate.success) {
@@ -199,15 +201,7 @@ export default function InvestmentEdit() {
   };
 
   return (
-    <NewWrapper
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
         <LandscapeFrameUploaded
@@ -262,8 +256,6 @@ export default function InvestmentEdit() {
         />
 
         <TextInputCustom
-          iconLeft="Rp."
-          // disabled
           required
           placeholder="0"
           label="Total Lembar"
@@ -349,7 +341,11 @@ export default function InvestmentEdit() {
         )}
 
         <Spacing />
+        <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
+          Simpan
+        </ButtonCustom>
       </StackCustom>
-    </NewWrapper>
+      <Spacing height={50} />
+    </ViewWrapper>
   );
 }

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

@@ -63,27 +63,30 @@ export default function InvestmentDetail() {
     setOpenDrawerPublish(false);
   };
 
-  const [value, setValue] = useState({
-    sisa: 0,
-    reminder: false,
-  });
-
-  useEffect(() => {
-    updateCountDown();
-  }, [data]);
-
-
-  const updateCountDown = () => {
-    const countDown = countDownAndCondition({
-      duration: data?.MasterPencarianInvestor.name,
-      publishTime: data?.countDown,
+    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,
+      });
+    };
+
 
-    setValue({
-      sisa: countDown.durationDay,
-      reminder: countDown.reminder,
-    });
-  };
 
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
@@ -94,11 +97,7 @@ 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/[id]/investor.tsx

@@ -1,10 +1,67 @@
-import Investment_ScreenInvestor from "@/screens/Invesment/ScreenInvestor";
-import { useLocalSearchParams } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  AvatarUsernameAndOtherComponent,
+  BoxWithHeaderSection,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { apiInvestmentGetInvestorById } from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function InvestmentInvestor() {
   const { id } = useLocalSearchParams();
-  
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetInvestorById({
+        id: id as string,
+      })
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  }
+
+
   return (
-    <Investment_ScreenInvestor investmentId={id as string} />
+    <>
+      <ViewWrapper>
+        {loadingList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <NoDataText />
+        ) : (
+          list?.map((item: any, index: number) => (
+            <BoxWithHeaderSection key={index}>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.Author?.Profile?.imageId}
+                name={item?.Author?.username}
+                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+              />
+              <TextCustom bold>
+                Rp. {formatCurrencyDisplay(item?.nominal)}
+              </TextCustom>
+            </BoxWithHeaderSection>
+          ))
+        )}
+      </ViewWrapper>
+    </>
   );
 }

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

@@ -1,19 +1,18 @@
 import {
   BaseBox,
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   CenterCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  NewWrapper,
+  LoaderCustom,
   SelectCustom,
   Spacing,
   StackCustom,
   TextCustom,
   TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
@@ -55,7 +54,7 @@ export default function InvestmentCreate() {
   useFocusEffect(
     useCallback(() => {
       onLoadMaster();
-    }, []),
+    }, [])
   );
 
   const onLoadMaster = async () => {
@@ -168,7 +167,7 @@ export default function InvestmentCreate() {
           text1: "Berhasil",
           text2: response.message,
         });
-        router.replace("/investment/portofolio?status=review");
+        router.replace("/investment/portofolio");
       } else {
         Toast.show({
           type: "error",
@@ -185,19 +184,7 @@ export default function InvestmentCreate() {
 
   //   const [coba, setCoba] = useState("");
   return (
-    <NewWrapper
-      footerComponent={
-        <BoxButtonOnFooter>
-          <ButtonCustom
-            disabled={isLoading}
-            isLoading={isLoading}
-            onPress={() => handleSubmit()}
-          >
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      }
-    >
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
         <LandscapeFrameUploaded image={image as string} />
@@ -237,6 +224,7 @@ export default function InvestmentCreate() {
           onPress={() => {
             pickFile({
               setPdfUri: ({ uri, name, size }) => {
+
                 setPdf({ uri, name, size });
               },
               allowedType: "pdf",
@@ -277,9 +265,6 @@ export default function InvestmentCreate() {
 
         <StackCustom gap={0}>
           <TextInputCustom
-            iconLeft="Rp."
-            // disabled
-            editable={false}
             required
             placeholder="0"
             label="Total Lembar"
@@ -306,7 +291,7 @@ export default function InvestmentCreate() {
         />
 
         {loadingMaster ? (
-          <CustomSkeleton height={50} />
+          <LoaderCustom />
         ) : (
           <SelectCustom
             required
@@ -328,7 +313,7 @@ export default function InvestmentCreate() {
         )}
 
         {loadingMaster ? (
-          <CustomSkeleton height={50} />
+          <LoaderCustom />
         ) : (
           <SelectCustom
             required
@@ -350,7 +335,7 @@ export default function InvestmentCreate() {
         )}
 
         {loadingMaster ? (
-          <CustomSkeleton height={50} />
+          <LoaderCustom />
         ) : (
           <SelectCustom
             required
@@ -372,8 +357,11 @@ export default function InvestmentCreate() {
         )}
 
         <Spacing />
+        <ButtonCustom isLoading={isLoading} onPress={() => handleSubmit()}>
+          Simpan
+        </ButtonCustom>
       </StackCustom>
-      {/* <Spacing height={50} /> */}
-    </NewWrapper>
+      <Spacing height={50} />
+    </ViewWrapper>
   );
 }

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

@@ -1,61 +1,34 @@
-/* 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 {
-  router,
-  Tabs,
-  useLocalSearchParams,
-  useNavigation
-} from "expo-router";
-import { useLayoutEffect } from "react";
+import { Tabs } from "expo-router";
 
 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)/archive.tsx

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

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

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

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

@@ -1,12 +1,84 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Job_MainViewStatus from "@/screens/Job/MainViewStatus";
-import Job_MainViewStatus2 from "@/screens/Job/MainViewStatus2";
+import {
+  BaseBox,
+  LoaderCustom,
+  ScrollableCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
+import { apiJobGetByStatus } from "@/service/api-client/api-job";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function JobStatus() {
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+  const [listData, setListData] = useState<any[]>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [user?.id, activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadList(true);
+      const response = await apiJobGetByStatus({
+        authorId: user?.id as string,
+        status: activeCategory as string,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  };
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
   return (
-    <>
-      {/* <Job_MainViewStatus />  */}
-      <Job_MainViewStatus2 />
-    </>
+    <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 === "reject") && (
+                (status === "draft" || status === "rejected") && (
                   <ReportBox text={data?.catatan} />
                 )}
                 

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

@@ -25,8 +25,6 @@ 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

@@ -1,14 +1,13 @@
 import {
-  BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
   InformationBox,
   LandscapeFrameUploaded,
-  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
-  TextInputCustom
+  TextInputCustom,
+  ViewWrapper
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
@@ -20,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?status=review";
+  const nextUrl = "/(application)/(user)/job/(tabs)/status";
   const { user } = useAuth();
   const [isLoading, setIsLoading] = useState(false);
   const [image, setImage] = useState<string | null>(null);
@@ -100,17 +99,16 @@ export default function JobCreate() {
   const buttonSubmit = () => {
     return (
       <>
-        <BoxButtonOnFooter>
-          <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
+          Simpan
+        </ButtonCustom>
+        <Spacing />
       </>
     );
   };
 
   return (
-    <NewWrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
 
@@ -162,7 +160,9 @@ export default function JobCreate() {
           value={data.deskripsi}
           onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
+
+        {buttonSubmit()}
       </StackCustom>
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

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

@@ -1,11 +1,111 @@
-import ScreenNotification_V1 from "@/screens/Notification/ScreenNotification_V1";
-import ScreenNotification_V2 from "@/screens/Notification/ScreenNotification_V2";
+import {
+  BaseBox,
+  Grid,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { useState } from "react";
+import { View } from "react-native";
 
-export default function Notification() {
+const categories = [
+  { value: "all", label: "Semua" },
+  { value: "event", label: "Event" },
+  { value: "job", label: "Job" },
+  { value: "voting", label: "Voting" },
+  { value: "donasi", label: "Donasi" },
+  { value: "investasi", label: "Investasi" },
+  { value: "forum", label: "Forum" },
+  { value: "collaboration", label: "Collaboration" },
+];
+
+const selectedCategory = (value: string) => {
+  const category = categories.find((c) => c.value === value);
+  return category?.label;
+};
+
+const BoxNotification = ({
+  index,
+  activeCategory,
+}: {
+  index: number;
+  activeCategory: string | null;
+}) => {
   return (
     <>
-      <ScreenNotification_V2 />
-      {/* <ScreenNotification_V1 />  */}
+      <BaseBox
+        onPress={() =>
+          console.log(
+            "Notification >",
+            selectedCategory(activeCategory as string)
+          )
+        }
+      >
+        <StackCustom>
+          <TextCustom bold>
+            # {selectedCategory(activeCategory as string)}
+          </TextCustom>
+
+          <View
+            style={{
+              borderBottomColor: MainColor.white_gray,
+              borderBottomWidth: 1,
+            }}
+          />
+
+          <TextCustom truncate={2}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
+            unde quidem voluptate quam culpa sequi molestias ipsa corrupti id,
+            soluta, nostrum adipisci similique, et illo asperiores deleniti eum
+            labore.
+          </TextCustom>
+
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom size="small" color="gray">
+                {index + 1} Agustus 2025
+              </TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
+              <TextCustom size="small" color="gray">
+                Belum lihat
+              </TextCustom>
+            </Grid.Col>
+          </Grid>
+        </StackCustom>
+      </BaseBox>
     </>
   );
+};
+
+export default function Notifications() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+  return (
+    <ViewWrapper
+      headerComponent={
+        <ScrollableCustom
+          data={categories.map((e, i) => ({
+            id: i,
+            label: e.label,
+            value: e.value,
+          }))}
+          onButtonPress={handlePress}
+          activeId={activeCategory as string}
+        />
+      }
+    >
+      {Array.from({ length: 20 }).map((e, i) => (
+        <View key={i}>
+          <BoxNotification index={i} activeCategory={activeCategory as any} />
+        </View>
+      ))}
+    </ViewWrapper>
+  );
 }

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

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

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

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

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

@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCustom,
-    DrawerCustom,
-    DummyLandscapeImage,
-    LoaderCustom,
-    Spacing,
-    StackCustom,
-    TextCustom,
+  ButtonCustom,
+  DrawerCustom,
+  DummyLandscapeImage,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
 } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
@@ -49,7 +49,7 @@ export default function Portofolio() {
     useCallback(() => {
       onLoadData(id as string);
       onLoadUserByToken();
-    }, [id]),
+    }, [id])
   );
 
   async function onLoadData(id: string) {
@@ -144,27 +144,27 @@ export default function Portofolio() {
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftItem={
+            leftIcon={
               <FontAwesome
                 name="building-o"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightItem={<TextCustom>{data?.BusinessMaps?.namePin}</TextCustom>}
+            rightIcon={<TextCustom>{data?.BusinessMaps?.namePin}</TextCustom>}
           />
 
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftItem={
+            leftIcon={
               <Ionicons
                 name="list-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightItem={
+            rightIcon={
               <TextCustom>{data?.MasterBidangBisnis?.name}</TextCustom>
             }
           />
@@ -172,26 +172,26 @@ export default function Portofolio() {
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftItem={
+            leftIcon={
               <Ionicons
                 name="call-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightItem={<TextCustom>{data?.tlpn}</TextCustom>}
+            rightIcon={<TextCustom>{data?.tlpn}</TextCustom>}
           />
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftItem={
+            leftIcon={
               <Ionicons
                 name="location-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightItem={<TextCustom>{data?.alamatKantor}</TextCustom>}
+            rightIcon={<TextCustom>{data?.alamatKantor}</TextCustom>}
           />
 
           <Spacing />

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

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

app/(application)/(user)/profile/[id]/detail-blocked.tsx

@@ -29,6 +29,7 @@ export default function ProfileDetailBlocked() {
 
   const fetchData = async () => {
     const response = await apiGetBlockedById({ id: String(id) });
+    // console.log("[RESPONSE >>]", JSON.stringify(response, null, 2));
     setData(response.data);
   };
 

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

@@ -139,9 +139,7 @@ const ButtonnDot = ({
   isUserCheck: boolean;
   logout: () => Promise<void>;
 }) => {
-  console.log("[ID] >>", id);
-
-  const isId = id === undefined || id === "undefined";
+  const isId = id === undefined || id === null;
 
   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: "Daftar Blokir", headerLeft: () => <BackButton /> }}
+          options={{ title: "Blocked List", headerLeft: () => <BackButton /> }}
         />
 
         <Stack.Screen

app/(application)/(user)/test-notifications.tsx

@@ -1,75 +0,0 @@
-import {
-  ButtonCustom,
-  NewWrapper,
-  StackCustom,
-  TextInputCustom,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { apiNotificationsSend } from "@/service/api-notifications";
-import { useState } from "react";
-import Toast from "react-native-toast-message";
-
-export default function TestNotification() {
-  const { user } = useAuth();
-  const [data, setData] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async () => {
-    try {
-      console.log("[Data Dikirim]", data);
-      setLoading(true);
-      const response = await apiNotificationsSend({
-        data: {
-          title: "Test Notification !!",
-          body: data,
-          userLoginId: user?.id || "",
-          appId: "hipmi",
-          status: "publish",
-          kategoriApp: "JOB",
-          type: "announcement",
-          deepLink: "/job/cmhjz8u3h0005cfaxezyeilrr",
-        },
-      });
-
-      if (response.success) {
-        console.log("[RES SEND NOTIF]", JSON.stringify(response, null, 2));
-        Toast.show({
-          type: "success",
-          text1: "Notifikasi berhasil dikirim",
-        });
-      } else {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mengirim notifikasi",
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR SEND NOTIF]", error);
-      Toast.show({
-        type: "error",
-        text1: "Gagal mengirim notifikasi",
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <NewWrapper>
-        <StackCustom>
-          <TextInputCustom
-            required
-            label="Pesan"
-            placeholder="Masukkan pesan"
-            value={data}
-            onChangeText={(text) => setData(text)}
-          />
-          <ButtonCustom onPress={handleSubmit} disabled={loading}>
-            Kirim
-          </ButtonCustom>
-        </StackCustom>
-      </NewWrapper>
-    </>
-  );
-}

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

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

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

@@ -1,37 +1,13 @@
 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, useLocalSearchParams, useNavigation, router } from "expo-router";
-import { useLayoutEffect } from "react";
+import { Tabs } from "expo-router";
 
 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)/contribution.tsx

@@ -1,6 +1,59 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Voting_ScreenContribution from "@/screens/Voting/ScreenContribution";
+import {
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { apiVotingGetAll } from "@/service/api-client/api-voting";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useState, useCallback } from "react";
 
 export default function VotingContribution() {
-  return <Voting_ScreenContribution />;
+    const { user } = useAuth();
+    const [listData, setListData] = useState<any>([]);
+    const [loadingGetData, setLoadingGetData] = useState(false);
+
+  
+    useFocusEffect(
+      useCallback(() => {
+        onLoadData();
+      }, [])
+    );
+  
+    const onLoadData = async () => {
+      try {
+        setLoadingGetData(true);
+        const response = await apiVotingGetAll({
+          category: "contribution",
+          authorId: user?.id as string,
+        });
+
+        if (response.success) {
+          setListData(response.data);
+        }
+      } catch (error) {
+        console.log("[ERROR]", error);
+      } finally {
+        setLoadingGetData(false);
+      }
+    };
+
+  return (
+    <ViewWrapper hideFooter>
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada kontribusi</TextCustom>
+      ) : listData.map((item: any, index: number) => (
+        <Voting_BoxPublishSection
+          data={item}
+          key={index}
+          href={`/voting/${item.id}/contribution`}
+        />
+      ))}
+    </ViewWrapper>
+  );
 }

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

@@ -1,10 +1,77 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Voting_ScreenHistory from "@/screens/Voting/ScreenHistory";
+import { LoaderCustom, TextCustom, ViewWrapper } from "@/components";
+import TabsTwoButtonCustom from "@/components/_ShareComponent/TabsTwoHeaderCustom";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { useAuth } from "@/hooks/use-auth";
+import { useCallback, useState } from "react";
+import { apiVotingGetAll } from "@/service/api-client/api-voting";
+import { useFocusEffect } from "expo-router";
+import _ from "lodash";
 
 export default function VotingHistory() {
+  const { user } = useAuth();
+  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+
+  const [listData, setListData] = useState<any>([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiVotingGetAll({
+        category: activeCategory === "all" ? "all-history" : "my-history",
+        authorId: user?.id as string,
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
   return (
-    <>
-      <Voting_ScreenHistory />
-    </>
+    <ViewWrapper
+      hideFooter
+      headerComponent={
+        <TabsTwoButtonCustom
+          leftValue="all"
+          rightValue="main"
+          leftText="Semua Riwayat"
+          rightText="Riwayat Saya"
+          activeCategory={activeCategory}
+          handlePress={handlePress}
+        />
+      }
+    >
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada riwayat</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Voting_BoxPublishSection
+            key={index}
+            id={item.id}
+            data={item}
+            href={`/voting/${item.id}/history`}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,10 +1,71 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Voting_ScreenBeranda from "@/screens/Voting/ScreenBeranda";
+import {
+  FloatingButton,
+  LoaderCustom,
+  SearchInput,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
+import { apiVotingGetAll } from "@/service/api-client/api-voting";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function VotingBeranda() {
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any>([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [search])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadingGetData(true);
+      const response = await apiVotingGetAll({
+        search,
+        category: "beranda",
+        userLoginId: user?.id,
+      });
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  };
+
   return (
-    <>
-      <Voting_ScreenBeranda />
-    </>
+    <ViewWrapper
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/voting/create")} />
+      }
+      headerComponent={
+        <SearchInput placeholder="Cari voting" onChangeText={setSearch} />
+      }
+    >
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Voting_BoxPublishSection
+            data={item}
+            key={index}
+            href={`/voting/${item.id}`}
+          />
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -1,10 +1,98 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Voting_ScreenStatus from "@/screens/Voting/ScreenStatus";
+import {
+  BadgeCustom,
+  BaseBox,
+  LoaderCustom,
+  ScrollableCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+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 _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function VotingStatus() {
+  const { user } = useAuth();
+  const id = user?.id || "";
+  const [activeCategory, setActiveCategory] = useState<string | null>(
+    "publish"
+  );
+
+  const [listData, setListData] = useState([]);
+  const [loadingGetData, setLoadingGetData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [activeCategory, id])
+  );
+
+  async function onLoadData() {
+    try {
+      setLoadingGetData(true);
+      const response = await apiVotingGetByStatus({
+        id: id as string,
+        status: activeCategory!,
+      });
+      setListData(response.data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoadingGetData(false);
+    }
+  }
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={dummyMasterStatus.map((e, i) => ({
+        id: i,
+        label: e.label,
+        value: e.value,
+      }))}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
   return (
-    <>
-      <Voting_ScreenStatus />
-    </>
+    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+      {loadingGetData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+      ) : (
+        listData.map((item: any, i: number) => (
+          <BaseBox
+            key={i}
+            paddingTop={20}
+            paddingBottom={20}
+            href={`/voting/${item.id}/${activeCategory}/detail`}
+          >
+            <StackCustom>
+              <TextCustom align="center" bold truncate={2} size="large">
+                {item?.title || ""}
+              </TextCustom>
+              <BadgeCustom
+                style={{ width: "70%", alignSelf: "center" }}
+                variant="light"
+              >
+                {item?.awalVote && dateTimeView({date: item?.awalVote, withoutTime: true})} -{" "}
+                {item?.akhirVote && dateTimeView({date: item?.akhirVote, withoutTime: true})}
+              </BadgeCustom>
+            </StackCustom>
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
   );
 }

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

@@ -51,6 +51,8 @@ export default function VotingDetailStatus() {
       setLoadingGetData(true);
       const response = await apiVotingGetOne({ id: id as string });
 
+      console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
+
       if (response.success) {
         setData(response.data);
       }

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

@@ -5,14 +5,13 @@ import {
   ButtonCustom,
   CenterCustom,
   LoaderCustom,
-  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextCustom,
-  TextInputCustom
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
@@ -35,7 +34,7 @@ interface IEditData {
   Voting_DaftarNamaVote?: [
     {
       value?: string;
-    },
+    }
   ];
 }
 
@@ -48,7 +47,7 @@ export default function VotingEdit() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -189,9 +188,9 @@ export default function VotingEdit() {
   };
 
   return (
-    <NewWrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       {loadingGetData ? (
-        <ListSkeletonComponent />
+        <LoaderCustom />
       ) : (
         <StackCustom gap={"xs"}>
           <TextInputCustom
@@ -211,7 +210,7 @@ export default function VotingEdit() {
             onChangeText={(text) => setData({ ...data, deskripsi: text })}
           />
 
-
+          <Spacing />
 
           <DateTimePickerCustom
             minimumDate={new Date(Date.now())}
@@ -256,7 +255,7 @@ export default function VotingEdit() {
                 }
               </TextCustom>
             )}
-
+            <Spacing />
           </StackCustom>
 
           {data?.Voting_DaftarNamaVote?.map((item: any, index: number) => (
@@ -271,7 +270,7 @@ export default function VotingEdit() {
                   ...(data as any),
                   Voting_DaftarNamaVote: data?.Voting_DaftarNamaVote?.map(
                     (item: any, i: any) =>
-                      i === index ? { ...item, value } : item,
+                      i === index ? { ...item, value } : item
                   ),
                 })
               }
@@ -328,6 +327,6 @@ export default function VotingEdit() {
           <Spacing />
         </StackCustom>
       )}
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

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

@@ -13,7 +13,6 @@ 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";
@@ -23,14 +22,13 @@ 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, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function VotingDetail() {
@@ -121,23 +119,6 @@ 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/[id]/list-of-contributor.tsx

@@ -1,6 +1,69 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import Voting_ScreenListOfContributor from "@/screens/Voting/ScreenListOfContributor";
+import {
+  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
+  BaseBox,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { apiVotingContribution } from "@/service/api-client/api-voting";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
-export default function VotingListOfContributor() {
-  return <Voting_ScreenListOfContributor />;
+export default function Voting_ListOfContributor() {
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any>([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiVotingContribution({
+        id: id as string,
+        authorId: "",
+        category: "list",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  return (
+    <ViewWrapper>
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Tidak ada kontributor</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <BaseBox paddingTop={5} paddingBottom={5} key={index.toString()}>
+            <AvatarUsernameAndOtherComponent
+              avatar={item?.Author?.Profile?.imageId || ""}
+              name={item?.Author?.username || "Username"}
+              avatarHref={`/profile/${item?.Author?.Profile?.id}`}
+              rightComponent={
+                <BadgeCustom style={{ alignSelf: "flex-end" }}>
+                  {item?.Voting_DaftarNamaVote?.value}
+                </BadgeCustom>
+              }
+            />
+          </BaseBox>
+        ))
+      )}
+    </ViewWrapper>
+  );
 }

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

@@ -3,12 +3,11 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  NewWrapper,
   Spacing,
   StackCustom,
   TextAreaCustom,
   TextInputCustom,
-  ViewWrapper,
+  ViewWrapper
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -80,7 +79,7 @@ export default function VotingCreate() {
           type: "success",
           text1: "Data berhasil disimpan",
         });
-        router.replace("/voting/(tabs)/status?status=review");
+        router.replace("/(application)/(user)/voting/(tabs)/status");
       } else {
         Toast.show({
           type: "error",
@@ -107,7 +106,7 @@ export default function VotingCreate() {
   };
 
   return (
-    <NewWrapper footerComponent={buttonSubmit()}>
+    <ViewWrapper footerComponent={buttonSubmit()}>
       <StackCustom gap={"xs"}>
         <TextInputCustom
           label="Judul Voting"
@@ -143,6 +142,7 @@ export default function VotingCreate() {
           }
         />
 
+
         {listVote.map((item, index) => (
           <TextInputCustom
             key={index}
@@ -153,8 +153,8 @@ export default function VotingCreate() {
             onChangeText={(value: any) =>
               setListVote(
                 listVote.map((item, i) =>
-                  i === index ? { ...item, value } : item,
-                ),
+                  i === index ? { ...item, value } : item
+                )
               )
             }
           />
@@ -198,6 +198,6 @@ export default function VotingCreate() {
 
         <Spacing />
       </StackCustom>
-    </NewWrapper>
+    </ViewWrapper>
   );
 }

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

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

app/(application)/_layout.tsx

@@ -1,28 +1,15 @@
 import { BackButton } from "@/components";
-import BackgroundNotificationHandler from "@/components/Notification/BackgroundNotificationHandler";
-import NotificationInitializer from "@/components/Notification/NotificationInitializer";
-import { NotificationProvider } from "@/hooks/use-notification-store";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
-  return (
-    <>
-      <NotificationProvider>
-        <NotificationInitializer />
-        <BackgroundNotificationHandler />
-        <ApplicationStack />
-      </NotificationProvider>
-    </>
-  );
-}
-
-function ApplicationStack() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
         <Stack.Screen name="admin" options={{ headerShown: false }} />
+        
+        
 
         {/* Take Picture */}
         <Stack.Screen

app/(application)/admin/_layout.tsx

@@ -8,8 +8,6 @@ import {
 } from "@/components";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
-import NavbarMenu_V2 from "@/components/Drawer/NavbarMenu_V2";
-import NavbarMenu_V3 from "@/components/Drawer/NavbarMenu_V3";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import {
   ICON_SIZE_MEDIUM,
@@ -17,15 +15,10 @@ import {
   ICON_SIZE_XLARGE,
 } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
-import AdminNotificationBell from "@/screens/Admin/AdminNotificationBell";
 import {
   adminListMenu,
   superAdminListMenu,
 } from "@/screens/Admin/listPageAdmin";
-import {
-  adminListMenu_V2,
-  superAdminListMenu_V2,
-} from "@/screens/Admin/listPageAdmin_V2";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -154,24 +147,6 @@ export default function AdminLayout() {
             }
             onClose={() => setOpenDrawerNavbar(false)}
           />
-
-          {/* <NavbarMenu_V2
-            items={
-              user?.masterUserRoleId === "2"
-                ? adminListMenu_V2
-                : superAdminListMenu_V2
-            }
-            onClose={() => setOpenDrawerNavbar(false)}
-          /> */}
-
-          {/* <NavbarMenu_V3
-            items={
-              user?.masterUserRoleId === "2"
-                ? adminListMenu_V2
-                : superAdminListMenu_V2
-            }
-            onClose={() => setOpenDrawerNavbar(false)}
-          /> */}
         </StackCustom>
       </DrawerAdmin>
 
@@ -217,12 +192,11 @@ export default function AdminLayout() {
                 label: "Notifikasi",
                 value: "notification",
                 icon: (
-                  // <Ionicons
-                  //   name="notifications"
-                  //   size={ICON_SIZE_SMALL}
-                  //   color={MainColor.white}
-                  // />
-                  <AdminNotificationBell />
+                  <Ionicons
+                    name="notifications"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.white}
+                  />
                 ),
                 path: "/admin/notification",
               },

app/(application)/admin/app-information/business-field/[id]/index.tsx

@@ -1,5 +1,135 @@
-import { Admin_ScreenBusinessFieldDetail } from "@/screens/Admin/App-Information/ScreenBusinessFieldDetail";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ActionIcon,
+  BaseBox,
+  CenterCustom,
+  LoaderCustom,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconEdit } from "@/components/_Icon";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
+import { MainColor } from "@/constants/color-palet";
+import { apiAdminMasterBusinessFieldById } from "@/service/api-admin/api-master-admin";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { Divider } from "react-native-paper";
 
 export default function AdminAppInformation_BusinessFieldDetail() {
-  return <Admin_ScreenBusinessFieldDetail />;
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadDetail();
+    }, [id])
+  );
+
+  const onLoadDetail = async () => {
+    try {
+      const response = await apiAdminMasterBusinessFieldById({
+        id: id as string,
+        category: "all",
+      });
+
+      console.log("Response >>", JSON.stringify(response, null, 2));
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setData(null);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <AdminBackButtonAntTitle title="Detail Bidang & Sub Bidang" />
+
+          {!data ? (
+            <LoaderCustom />
+          ) : (
+            <StackCustom gap={"xs"}>
+              <TextCustom bold>Nama Bidang</TextCustom>
+              <Spacing height={5} />
+              <BaseBox>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold>
+                    Status: {data?.bidang?.active ? "Aktif" : "Tidak Aktif"}
+                  </TextCustom>
+                  <GridSpan_NewComponent
+                    span1={10}
+                    span2={2}
+                    text1={
+                      <TextCustom bold size={"large"}>
+                        {data?.bidang?.name}
+                      </TextCustom>
+                    }
+                    text2={
+                      <CenterCustom>
+                        <ActionIcon
+                          icon={<IconEdit size={16} color={MainColor.black} />}
+                          onPress={() =>
+                            router.push(
+                              `/admin/app-information/business-field/${id}/bidang-update`
+                            )
+                          }
+                        />
+                      </CenterCustom>
+                    }
+                  />
+                </StackCustom>
+              </BaseBox>
+              {/* <Divider /> */}
+              <Spacing height={5} />
+
+              <TextCustom bold>Sub Bidang Bisnis</TextCustom>
+              <Spacing height={5} />
+
+              {data?.subBidang?.map((item: any, index: number) => (
+                <BaseBox key={index}>
+                  <StackCustom gap={0}>
+                    <TextCustom bold>
+                      Status: {item?.isActive ? "Aktif" : "Tidak Aktif"}
+                    </TextCustom>
+
+                    <GridSpan_NewComponent
+                      span1={10}
+                      span2={2}
+                      text1={
+                        <TextCustom bold size={"large"}>
+                          {item.name}
+                        </TextCustom>
+                      }
+                      text2={
+                        <CenterCustom>
+                          <ActionIcon
+                            icon={
+                              <IconEdit size={16} color={MainColor.black} />
+                            }
+                            onPress={() =>
+                              router.push(
+                                `/admin/app-information/business-field/${item?.id}/sub-bidang-update`
+                              )
+                            }
+                          />
+                        </CenterCustom>
+                      }
+                    />
+                  </StackCustom>
+                </BaseBox>
+              ))}
+            </StackCustom>
+          )}
+
+          {/* <TextCustom>{JSON.stringify(data, null, 2)}</TextCustom> */}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
 }

app/(application)/admin/app-information/index.tsx

@@ -1,5 +1,86 @@
-import { Admin_ScreenAppInformation } from "@/screens/Admin/App-Information/ScreenAppInformation";
+import { ScrollableCustom, StackCustom, ViewWrapper } from "@/components";
+import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
+import AdminAppInformation_Bank from "@/screens/Admin/App-Information/InformationBankSection";
+import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Alert } from "react-native";
 
 export default function AdminInformation() {
-  return <Admin_ScreenAppInformation />;
+  const [activeCategory, setActiveCategory] = useState<string | null>("bank");
+  const [activePage, setActivePage] = useState<string>("Informasi Bank");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    setActivePage(item.label);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <StackCustom>
+      <ScrollableCustom
+        data={listPage}
+        onButtonPress={handlePress}
+        activeId={activeCategory as any}
+      />
+    </StackCustom>
+  );
+
+  const renderContent = () => {
+    switch (activeCategory) {
+      case "bank":
+        return <AdminAppInformation_Bank />;
+      case "business":
+        return <AdminAppInformation_BusinessFieldSection />;
+      case "sticker":
+        return <AdminAppInformation_StickerSection />;
+      default:
+        return <AdminAppInformation_Bank />;
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper headerComponent={scrollComponent}>
+        <AdminComp_BoxTitle
+          title={activePage}
+          rightComponent={
+            <AdminActionIconPlus
+              onPress={() => {
+                if (activeCategory === "bank") {
+                  router.push("/admin/app-information/information-bank/create");
+                } else if (activeCategory === "business") {
+                  router.push("/admin/app-information/business-field/create");
+                } else if (activeCategory === "sticker") {
+                  Alert.alert("Coming Soon", "Next Update");
+                  // router.push("/admin/app-information/sticker/create");
+                }
+              }}
+            />
+          }
+        />
+        {renderContent()}
+      </ViewWrapper>
+    </>
+  );
 }
+
+const listPage = [
+  {
+    id: "1",
+    label: "Informasi Bank",
+    value: "bank",
+  },
+  {
+    id: "2",
+    label: "Bidang & Sub Bidang",
+    value: "business",
+  },
+  {
+    id: "3",
+    label: "Stiker",
+    value: "sticker",
+  },
+];

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

@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BaseBox,
-    BoxButtonOnFooter,
-    ButtonCustom,
-    Grid,
-    StackCustom,
-    TextCustom,
-    ViewWrapper,
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCustom,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
@@ -22,7 +22,7 @@ export default function AdminCollaborationPublish() {
   useFocusEffect(
     useCallback(() => {
       handlerLoadData();
-    }, [status]),
+    }, [status])
   );
 
   const handlerLoadData = async () => {
@@ -78,16 +78,16 @@ export default function AdminCollaborationPublish() {
           </StackCustom>
         </BaseBox>
 
-        {data?.report && (
-          <BaseBox>
-            <GridTwoView
-              spanLeft={4}
-              spanRight={8}
-              leftItem={<TextCustom bold>Catatan report</TextCustom>}
-              rightItem={<TextCustom>{data?.report}</TextCustom>}
-            />
-          </BaseBox>
-        )}
+      {data?.report && (
+        <BaseBox>
+          <GridTwoView
+            spanLeft={4}
+            spanRight={8}
+            leftIcon={<TextCustom bold>Catatan report</TextCustom>}
+            rightIcon={<TextCustom>{data?.report}</TextCustom>}
+          />
+        </BaseBox>
+      )}
       </ViewWrapper>
     </>
   );

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

@@ -1,5 +1,4 @@
 import {
-  AlertDefaultSystem,
   BadgeCustom,
   BaseBox,
   BoxButtonOnFooter,
@@ -10,7 +9,6 @@ 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,
@@ -24,7 +22,6 @@ 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);
 
@@ -36,7 +33,7 @@ export default function AdminDonasiTransactionDetail() {
       onLoadData();
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -60,7 +57,6 @@ export default function AdminDonasiTransactionDetail() {
       const newData = {
         donationId: data?.donasiId,
         nominal: data?.nominal,
-        senderId: user?.id,
       };
 
       const response = await apiAdminDonationInvoiceUpdateById({
@@ -101,15 +97,7 @@ export default function AdminDonasiTransactionDetail() {
           <ButtonCustom
             isLoading={isLoading}
             onPress={() => {
-              AlertDefaultSystem({
-                title: "Konfirmasi transaksi",
-                message: "Apakah anda yakin ingin menyetujui transaksi ini?",
-                textLeft: "Tidak",
-                textRight: "Ya",
-                onPressRight: () => {
-                  handlerSubmit();
-                },
-              });
+              handlerSubmit();
             }}
           >
             Terima donasi
@@ -121,7 +109,7 @@ export default function AdminDonasiTransactionDetail() {
     return (
       <BoxButtonOnFooter>
         <ButtonCustom disabled>
-          {data?.DonasiMaster_StatusInvoice?.name}
+           {data?.DonasiMaster_StatusInvoice?.name}
         </ButtonCustom>
       </BoxButtonOnFooter>
     );
@@ -152,7 +140,7 @@ export default function AdminDonasiTransactionDetail() {
             })}
           >
             {_.startCase(
-              (data?.DonasiMaster_StatusInvoice?.name as any) || "-",
+              (data?.DonasiMaster_StatusInvoice?.name as any) || "-"
             )}
           </BadgeCustom>
         )) ||
@@ -169,7 +157,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]/detail-disbursement-of-funds.tsx

@@ -42,19 +42,19 @@ export default function AdminDonationDetailDisbursementOfFunds() {
   const listData = [
     {
       label: "Nominal",
-      value: `Rp ${data ? formatCurrencyDisplay(data?.nominalCair) : 0}`,
+      value: `Rp ${(data && formatCurrencyDisplay(data?.nominalCair)) || 0}`,
     },
     {
       label: "Tanggal",
-      value: data ? dateTimeView({ date: data?.createdAt }) : "-",
+      value: dateTimeView({ date: data?.createdAt }),
     },
     {
       label: "Judul",
-      value: data ? data?.title : "-",
+      value: (data && data?.title) || "-",
     },
     {
       label: "Deskripsi",
-      value: data ? data?.deskripsi : "-",
+      value: (data && data?.deskripsi) || "-",
     },
   ];
   return (

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

@@ -14,11 +14,7 @@ import {
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import DIRECTORY_ID from "@/constants/directory-id";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  apiAdminDonationDetailById,
-  apiAdminDonationDisbursementOfFundsCreated,
-} from "@/service/api-admin/api-admin-donation";
+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";
@@ -29,7 +25,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);
 
@@ -44,7 +40,7 @@ export default function AdminDonationDisbursementOfFunds() {
   useFocusEffect(
     React.useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -98,7 +94,6 @@ export default function AdminDonationDisbursementOfFunds() {
 
       const newData = {
         ...value,
-        authorId: user?.id,
         imageId: imageId,
       };
 

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

@@ -1,5 +1,126 @@
-import { Admin_ScreenDonationListDisbursementOfFunds } from "@/screens/Admin/Donation/ScreenDonationListDisbursementOfFunds";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ActionIcon,
+  CenterCustom,
+  Divider,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminDonationDisbursementOfFundsListById } from "@/service/api-admin/api-admin-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import dayjs from "dayjs";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useCallback } from "react";
+import { View } from "react-native";
 
 export default function AdminDonasiListOfDisbursementOfFunds() {
-  return <Admin_ScreenDonationListDisbursementOfFunds />;
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationDisbursementOfFundsListById({
+        id: id as string,
+        category: "get-all",
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle title="Daftar Pencairan Dana" />
+        }
+      >
+        <GridViewCustomSpan
+          span1={3}
+          span2={5}
+          span3={4}
+          component1={
+            <TextCustom bold align="center">
+              Aksi
+            </TextCustom>
+          }
+          component2={
+            <TextCustom bold align="center">
+              Tanggal
+            </TextCustom>
+          }
+          component3={
+            <TextCustom bold align="center">
+              Nominal
+            </TextCustom>
+          }
+        />
+        <Divider />
+        <StackCustom>
+          {loadData ? (
+            <LoaderCustom />
+          ) : _.isEmpty(listData) ? (
+            <TextCustom align="center" color="gray">
+              Belum ada data
+            </TextCustom>
+          ) : (
+            listData?.map((item, index) => (
+              <View key={index}>
+                <GridViewCustomSpan
+                  span1={3}
+                  span2={5}
+                  span3={4}
+                  component1={
+                    <CenterCustom>
+                      <ActionIcon
+                        icon={
+                          <IconView size={ICON_SIZE_BUTTON} color="black" />
+                        }
+                        onPress={() => {
+                          router.push(
+                            `/admin/donation/${item?.id}/detail-disbursement-of-funds`
+                          );
+                        }}
+                      />
+                    </CenterCustom>
+                  }
+                  component2={
+                    <TextCustom align="center" truncate>
+                      {dayjs(item?.createdAt).format("DD-MM-YYYY")}
+                    </TextCustom>
+                  }
+                  component3={
+                    <TextCustom align="center" truncate>
+                      Rp. {formatCurrencyDisplay(item?.nominalCair)}
+                    </TextCustom>
+                  }
+                />
+              </View>
+            ))
+          )}
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
 }

app/(application)/admin/donation/[id]/list-of-donatur.tsx

@@ -1,5 +1,186 @@
-import { Admin_ScreenDonationListOfDonatur } from "@/screens/Admin/Donation/ScreenDonationListOfDonatur";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ActionIcon,
+  BadgeCustom,
+  CenterCustom,
+  LoaderCustom,
+  SelectCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconView } from "@/components/_Icon/IconComponent";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
+import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminDonationListOfDonatur } from "@/service/api-admin/api-admin-donation";
+import { apiMasterTransaction } from "@/service/api-client/api-master";
+import { colorBadgeTransaction } from "@/utils/colorBadge";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import { Divider } from "react-native-paper";
 
 export default function AdminDonasiListOfDonatur() {
-  return <Admin_ScreenDonationListOfDonatur />;
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = React.useState<any[] | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
+  const [master, setMaster] = React.useState<any[]>([]);
+
+  const [selectValue, setSelectValue] = React.useState<string | null>(null);
+  const [selectedStatus, setSelectedStatus] = React.useState<string | null>(
+    null
+  );
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id, selectValue])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminDonationListOfDonatur({
+        id: id as string,
+        status: selectedStatus as any,
+      });
+      // console.log("[LIST OF DONATUR]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setListData([]);
+    } finally {
+      setLoadData(false);
+    }
+  };
+
+  useEffect(() => {
+    onLoadMaster();
+  }, []);
+
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterTransaction();
+
+      if (response.success) {
+        setMaster(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+      setMaster([]);
+    }
+  };
+
+  const searchComponent = (
+    <View style={{ flexDirection: "row", gap: 5 }}>
+      <SelectCustom
+        placeholder="Pilih status transaksi"
+        data={
+          _.isEmpty(master)
+            ? []
+            : master?.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))
+        }
+        value={selectValue}
+        onChange={(value: any) => {
+          setSelectValue(value);
+          const nameSelected = master.find((item: any) => item.id === value);
+          const statusChooses = _.lowerCase(nameSelected?.name);
+          setSelectedStatus(statusChooses);
+        }}
+        styleContainer={{ width: "100%", marginBottom: 0 }}
+        allowClear
+      />
+    </View>
+  );
+  return (
+    <>
+      <ViewWrapper
+        headerComponent={
+          <AdminBackButtonAntTitle newComponent={searchComponent} />
+        }
+      >
+        <StackCustom>
+          <GridViewCustomSpan
+            span1={3}
+            span2={5}
+            span3={4}
+            component1={
+              <TextCustom bold align="center">
+                Aksi
+              </TextCustom>
+            }
+            component2={
+              <TextCustom bold align="center">
+                Donatur
+              </TextCustom>
+            }
+            component3={
+              <TextCustom bold align="center">
+                Status
+              </TextCustom>
+            }
+          />
+          <Divider />
+          <StackCustom>
+            {loadData ? (
+              <LoaderCustom />
+            ) : _.isEmpty(listData) ? (
+              <TextCustom align="center" color="gray">
+                Belum ada data
+              </TextCustom>
+            ) : (
+              listData?.map((item: any, index: number) => (
+                <View key={index}>
+                  <GridViewCustomSpan
+                    span1={3}
+                    span2={5}
+                    span3={4}
+                    component1={
+                      <CenterCustom>
+                        <ActionIcon
+                          icon={
+                            <IconView size={ICON_SIZE_BUTTON} color="black" />
+                          }
+                          onPress={() => {
+                            router.push(
+                              `/admin/donation/${item?.id}/${_.lowerCase(
+                                item?.DonasiMaster_StatusInvoice?.name
+                              )}/transaction-detail`
+                            );
+                          }}
+                        />
+                      </CenterCustom>
+                    }
+                    component2={
+                      <TextCustom bold align="center" truncate>
+                        {item?.Author?.username || "-"}
+                      </TextCustom>
+                    }
+                    component3={
+                      <BadgeCustom
+                        style={{ alignSelf: "center" }}
+                        color={colorBadgeTransaction({
+                          status: item?.DonasiMaster_StatusInvoice?.name,
+                        })}
+                      >
+                        {item?.DonasiMaster_StatusInvoice?.name}
+                      </BadgeCustom>
+                    }
+                  />
+                </View>
+              ))
+            )}
+          </StackCustom>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
 }