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

.gitignore

@@ -81,7 +81,4 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-# secrets
-secrets/
-
 # @end expo-cli

.qwen/settings.json

@@ -1,8 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git add *)"
-    ]
-  },
-  "$version": 3
-}

.qwen/settings.json.orig

@@ -1,7 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git add *)"
-    ]
-  }
-}

QWEN.md

@@ -1,515 +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.5)
-- **Language**: TypeScript
-- **Architecture**: File-based routing with Expo Router
-- **State Management**: Context API (AuthContext)
-- **UI Components**: React Native Paper, custom components
-- **Maps Integration**: Maplibre Maps for React Native (`@maplibre/maplibre-react-native` v10.4.2)
-- **Push Notifications**: React Native Firebase Messaging
-- **Build System**: Metro bundler
-- **Package Manager**: Bun
-
-### Project Structure
-```
-hipmi-mobile/
-├── app/                    # Main application screens and routing (Expo Router)
-│   ├── _layout.tsx         # Root layout component
-│   ├── index.tsx           # Entry point (Login screen)
-│   └── (application)/      # Main app screens
-│       ├── admin/          # Admin panel screens
-│       ├── (user)/         # User screens
-│       └── ...
-├── components/             # Reusable UI components
-│   ├── _ShareComponent/    # Shared components (NewWrapper, Admin components)
-│   ├── _Icon/              # Icon components
-│   └── ...
-├── context/                # State management (AuthContext)
-├── screens/                # Screen components organized by feature
-│   ├── Admin/              # Admin panel screens
-│   │   ├── Donation/       # Donation management screens
-│   │   ├── Voting/         # Voting management screens
-│   │   ├── Event/          # Event management screens
-│   │   └── ...
-│   ├── Authentication/     # Login, registration flows
-│   ├── RootLayout/         # Root layout components
-│   └── ...
-├── service/                # API services and business logic
-│   ├── api-admin/          # Admin API endpoints
-│   ├── api-client/         # Client API endpoints
-│   └── api-config.ts       # Axios configuration
-├── hooks/                  # Custom React hooks
-│   ├── use-pagination.tsx  # Pagination hook
-│   └── ...
-├── helpers/                # Helper functions
-│   ├── paginationHelpers.tsx  # Pagination UI helpers
-│   └── ...
-├── types/                  # TypeScript type definitions
-├── utils/                  # Utility functions
-├── constants/              # Constants and configuration values
-├── styles/                 # Global styles
-├── assets/                 # Images, icons, and static assets
-└── docs/                   # Documentation files
-```
-
-## Building and Running
-
-### Prerequisites
-- **Node.js**: v18+ with Bun package manager
-- **Expo CLI**: Installed globally or via npx
-- **iOS**: Xcode (macOS only) for iOS simulator/builds
-- **Android**: Android Studio for Android emulator/builds
-
-### Setup and Development
-
-1. **Install Dependencies**
-   ```bash
-   bun install
-   ```
-
-2. **Run Development Server**
-   ```bash
-   bun run start
-   # or
-   bunx expo start
-   ```
-
-3. **Platform-Specific Commands**
-   ```bash
-   # iOS Simulator
-   bun run ios
-   # or
-   bunx expo start --ios
-
-   # Android Emulator
-   bun run android
-   # or
-   bunx expo start --android
-
-   # Web Browser
-   bun run web
-   # or
-   bunx expo start --web
-   ```
-
-4. **Linting**
-   ```bash
-   bun run lint
-   ```
-
-### Build Commands
-
-#### EAS Build (Production)
-```bash
-# Production build (App Store / Play Store)
-eas build --profile production
-
-# Preview build (Internal distribution)
-eas build --profile preview
-
-# Development build (Development client)
-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/HIPMIBadungConnect.xcworkspace
-
-# Android specific
-bunx expo prebuild --platform android
-```
-
-#### Version Management
-```bash
-# Patch version update
-npm version patch
-
-# Update iOS build number
-bunx expo prebuild --platform ios
-
-# Update Android version code
-bunx expo prebuild --platform android
-```
-
-### 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
-
-Create a `.env` file in the project root with:
-
-```env
-API_BASE_URL=https://your-api-base-url.com
-BASE_URL=https://your-app-url.com
-DEEP_LINK_URL=hipmimobile://
-```
-
-These are loaded in `app.config.js` and accessible via `Constants.expoConfig.extra`.
-
-## Architecture Patterns
-
-### 1. Separation of Concerns
-
-**Route Files** (`app/`) should be minimal (max 5 lines):
-```typescript
-import { Admin_ScreenXXX } from "@/screens/Admin/XXX/ScreenXXX";
-
-export default function AdminXXX() {
-  return <Admin_ScreenXXX />;
-}
-```
-
-**Screen Components** (`screens/`) contain all business logic:
-```typescript
-export function Admin_ScreenXXX() {
-  // Logic, hooks, state management
-  return <NewWrapper ... />;
-}
-```
-
-### 2. Pagination Pattern
-
-Using `usePagination` hook with infinite scroll:
-
-```typescript
-const pagination = usePagination({
-  fetchFunction: async (page, searchQuery) => {
-    const response = await apiXXX({ page: String(page) });
-    if (response.success) {
-      return { data: response.data };
-    }
-    return { data: [] };
-  },
-  pageSize: PAGINATION_DEFAULT_TAKE, // 10
-  searchQuery: search,
-  dependencies: [dependency],
-});
-
-const { ListEmptyComponent, ListFooterComponent } =
-  createPaginationComponents({
-    loading: pagination.loading,
-    refreshing: pagination.refreshing,
-    listData: pagination.listData,
-    emptyMessage: "Belum ada data",
-    skeletonCount: PAGINATION_DEFAULT_TAKE,
-  });
-```
-
-### 3. Wrapper Components
-
-**NewWrapper** (preferred for lists):
-```typescript
-<NewWrapper
-  listData={pagination.listData}
-  renderItem={renderItem}
-  headerComponent={headerComponent}
-  ListEmptyComponent={ListEmptyComponent}
-  ListFooterComponent={ListFooterComponent}
-  onEndReached={pagination.loadMore}
-  refreshControl={<RefreshControl ... />}
-/>
-```
-
-**AdminBasicBox** (for card layouts):
-```typescript
-<AdminBasicBox
-  onPress={() => router.push(`/path/${item.id}`)}
-  style={{ marginHorizontal: 10, marginVertical: 5 }}
->
-  <StackCustom gap={0}>
-    <GridSpan_4_8 label="Label" value={<TextCustom>Value</TextCustom>} />
-  </StackCustom>
-</AdminBasicBox>
-```
-
-### 4. API Service Structure
-
-```typescript
-// service/api-admin/api-xxx.ts
-export async function apiXXX({ page = "1" }: { page?: string }) {
-  try {
-    const response = await apiConfig.get(`/mobile/admin/xxx?page=${page}`);
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
-}
-```
-
-**Important**: All list APIs should support pagination with `page` parameter (default: "1").
-
-### 5. Authentication Flow
-
-Managed by `AuthContext`:
-- `loginWithNomor()` - Send phone number, receive OTP
-- `validateOtp()` - Validate OTP, get token
-- `registerUser()` - Register new user
-- `logout()` - Clear session and logout
-- `userData()` - Fetch user data by token
-
-## Development Conventions
-
-### Coding Standards
-- **TypeScript**: Strict mode enabled
-- **Naming**: 
-  - Components: PascalCase (`Admin_ScreenDonationStatus`)
-  - Files: PascalCase for components (`ScreenDonationStatus.tsx`)
-  - Variables: camelCase
-  - Constants: UPPER_SNAKE_CASE
-- **Path Aliases**: `@/*` maps to project root
-- **Imports**: Group imports by type (components, hooks, services, etc.)
-
-### Component Structure
-```typescript
-// 1. Imports (grouped)
-import { ... } from "@/components";
-import { ... } from "@/hooks";
-import { ... } from "@/service";
-
-// 2. Types/Interfaces
-interface Props { ... }
-
-// 3. Main Component
-export function ComponentName() {
-  // State
-  // Hooks
-  // Functions
-  // Render
-}
-```
-
-### Testing
-- Linting: `bun run lint`
-- No formal test suite configured yet
-
-### Git Workflow
-- Feature branches: `feature/xxx` or `fixed-admin/xxx`
-- Commit messages: Clear and descriptive
-- Use CHANGE_LOG.md for tracking changes
-
-## Key Features
-
-### Authentication
-- Phone number login with OTP
-- User registration
-- Terms & Conditions acceptance
-- Session persistence with AsyncStorage
-
-### Admin Module
-- **Dashboard**: Overview and statistics
-- **User Access**: User management
-- **Event**: Event CRUD with status management
-- **Voting**: Voting management (publish/review/reject)
-- **Donation**: Donation management with categories and transaction tracking
-- **Collaboration**: Collaboration requests
-- **Investment**: Investment management
-- **Maps**: Location-based features
-- **App Information**: Bank and business field management
-
-### User Module
-- **Home**: Main dashboard
-- **Forum**: Discussion forums
-- **Profile**: User profile management
-- **Portfolio**: Member portfolio
-- **Notifications**: Push notifications via Firebase
-
-## API Configuration
-
-### Base URLs
-```typescript
-// From app.config.js extra
-API_BASE_URL: process.env.API_BASE_URL
-BASE_URL: process.env.BASE_URL
-DEEP_LINK_URL: process.env.DEEP_LINK_URL
-```
-
-### Axios Interceptor
-All API calls use `apiConfig` with automatic token injection:
-```typescript
-apiConfig.interceptors.request.use(async (config) => {
-  const token = await AsyncStorage.getItem("authToken");
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-```
-
-## Platform Configuration
-
-### iOS
-- **Bundle ID**: `com.anonymous.hipmi-mobile`
-- **Build Number**: 21
-- **Google Services**: Configured
-- **Associated Domains**: `applinks:cld-dkr-staging-hipmi.wibudev.com`
-- **Tablet Support**: Enabled
-
-### Android
-- **Package**: `com.bip.hipmimobileapp`
-- **Version Code**: 4
-- **Google Services**: Configured (`google-services.json`)
-- **Deep Links**: HTTPS intent filters configured
-- **Edge-to-Edge**: Enabled
-
-### Web
-- **Output**: Static
-- **Bundler**: Metro
-
-## Special Integrations
-
-### Firebase
-- Authentication
-- Push Notifications (FCM)
-- Configured for both iOS and Android
-
-### Maplibre
-- Map integration via `@maplibre/maplibre-react-native`
-- Location permissions configured
-
-### Deep Linking
-- Scheme: `hipmimobile://`
-- HTTPS: `cld-dkr-hipmi-stg.wibudev.com`
-- Configured for both platforms
-
-### Camera
-- Camera and microphone permissions
-- QR code generation support
-
-## Common Development Tasks
-
-### Adding a New Admin Screen
-
-1. **Create Screen Component** (`screens/Admin/Feature/ScreenXXX.tsx`):
-```typescript
-export function Admin_ScreenXXX() {
-  const pagination = usePagination({...});
-  const renderItem = useCallback(...);
-  const headerComponent = useMemo(...);
-  
-  return <NewWrapper ... />;
-}
-```
-
-2. **Create Box Component** (optional, for custom item rendering):
-```typescript
-export default function Admin_BoxXXX({ item }: { item: any }) {
-  return (
-    <AdminBasicBox onPress={() => router.push(...)}>
-      ...
-    </AdminBasicBox>
-  );
-}
-```
-
-3. **Update API** (add pagination if needed):
-```typescript
-export async function apiXXX({ page = "1" }: { page?: string }) {
-  // ...
-}
-```
-
-4. **Create Route File** (`app/(application)/admin/feature/xxx.tsx`):
-```typescript
-import { Admin_ScreenXXX } from "@/screens/Admin/Feature/ScreenXXX";
-
-export default function AdminXXX() {
-  return <Admin_ScreenXXX />;
-}
-```
-
-### Updating API Endpoints
-
-1. Add function in appropriate service file
-2. Include `page` parameter for list endpoints
-3. Use `apiConfig` axios instance
-4. Handle errors properly
-
-## Troubleshooting
-
-### Build Issues
-```bash
-# Clean and rebuild
-rm -rf node_modules
-bun install
-bunx expo prebuild --clean
-
-# iOS specific
-cd ios && pod install && cd ..
-
-# Android specific
-cd android && ./gradlew clean && cd ..
-```
-
-### Cache Issues
-```bash
-# Clear Expo cache
-bunx expo start -c
-
-# Clear Metro cache
-bunx expo start --clear
-```
-
-### Dependency Issues
-```bash
-# Reinstall dependencies
-rm -rf node_modules bun.lock
-bun install
-```
-
-### iOS Maplibre Crash Fix
-
-When using Maplibre MapView on iOS, prevent "Attempt to recycle a mounted view" crash:
-
-1. **Always render PointAnnotation** (not conditional)
-2. **Use opacity for visibility** instead of conditional rendering
-3. **Avoid key prop changes** that force remounting
-
-```typescript
-// ✅ GOOD: Stable PointAnnotation
-<PointAnnotation
-  coordinate={annotationCoordinate}  // Always rendered
-  ...
->
-  <View style={{ opacity: selectedLocation ? 1 : 0 }}>
-    <SelectedLocationMarker />
-  </View>
-</PointAnnotation>
-
-// ❌ BAD: Conditional rendering causes crash
-{selectedLocation && (
-  <PointAnnotation coordinate={selectedLocation} ... />
-)}
-```
-
-## Documentation Files
-
-- `docs/CHANGE_LOG.md` - Change log for recent updates
-- `docs/hipmi-note.md` - Build and deployment notes
-- `docs/prompt-for-qwen-code.md` - Development prompts and patterns
-
-## Resources
-
-- [Expo Documentation](https://docs.expo.dev/)
-- [React Native Documentation](https://reactnative.dev/)
-- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
-- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
-- [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)

android/app/build.gradle

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

android/app/src/debugOptimized/AndroidManifest.xml

@@ -1,7 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
-</manifest>

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"/>
@@ -37,7 +37,7 @@
       </intent-filter>
       <intent-filter android:autoVerify="true" data-generated="true">
         <action android:name="android.intent.action.VIEW"/>
-        <data android:scheme="https" android:host="hipmi.muku.id" android:pathPrefix="/"/>
+        <data android:scheme="https" android:host="cld-dkr-staging-hipmi.wibudev.com" android:pathPrefix="/"/>
         <category android:name="android.intent.category.BROWSABLE"/>
         <category android:name="android.intent.category.DEFAULT"/>
       </intent-filter>

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

@@ -13,10 +13,25 @@ buildscript {
   }
 }
 
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"
+// @generated begin @rnmapbox/maps-v2-maven - expo prebuild (DO NOT MODIFY) sync-d4ccbfdff48fdba3138b02a8ba41b9722af001d8
+
 allprojects {
   repositories {
     maven {
       url 'https://api.mapbox.com/downloads/v2/releases/maven'
+      // Authentication is no longer required as per Mapbox's removal of download token requirement
+      // See: https://github.com/mapbox/mapbox-maps-flutter/issues/775
+      // Keeping this as optional for backward compatibility
       def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
       if (token) {
         authentication { basic(BasicAuthentication) }
@@ -26,11 +41,7 @@ allprojects {
         }
       }
     }
-    google()
-    mavenCentral()
-    maven { url 'https://www.jitpack.io' }
   }
 }
 
-apply plugin: "expo-root-project"
-apply plugin: "com.facebook.react.rootproject"
+// @generated end @rnmapbox/maps-v2-maven

app.config.js

@@ -1,21 +1,10 @@
 // app.config.js
 require("dotenv").config();
 
-// const isDev = process.env.NODE_ENV === "development";
-// const isStaging = process.env.NEXT_PUBLIC_ENV === "staging";
-// const isProd = process.env.NEXT_PUBLIC_ENV === "production";
-
-// Domain berdasarkan environment
-// const domain = isDev
-//   ? "localhost:3000"
-//   : isStaging
-//   ? "cld-dkr-hipmi-stg.wibudev.com"
-//   : "hipmi.muku.id"; // Production domain
-
 export default {
   name: "HIPMI Badung Connect",
   slug: "hipmi-mobile",
-  version: "1.0.2",
+  version: "1.0.1",
   orientation: "portrait",
   icon: "./assets/images/icon.png",
   scheme: "hipmimobile",
@@ -25,27 +14,25 @@ export default {
   ios: {
     supportsTablet: true,
     bundleIdentifier: "com.anonymous.hipmi-mobile",
-    googleServicesFile: "./secrets/GoogleService-Info.plist",
+    googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
       NSLocationWhenInUseUsageDescription:
         "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
-    associatedDomains: [
-      "applinks:hipmi.muku.id",
-    ],
-    buildNumber: "7",
+    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
+    buildNumber: "15",
   },
 
   android: {
-    googleServicesFile: "./secrets/google-services.json",
+    googleServicesFile: "./google-services.json",
     adaptiveIcon: {
       foregroundImage: "./assets/images/splash-icon.png",
       backgroundColor: "#ffffff",
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 5,
+    versionCode: 3,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {
@@ -54,7 +41,7 @@ export default {
         data: [
           {
             scheme: "https",
-            host: "hipmi.muku.id",
+            host: "cld-dkr-staging-hipmi.wibudev.com",
             pathPrefix: "/",
           },
         ],
@@ -70,7 +57,6 @@ export default {
   },
 
   plugins: [
-    "./plugins/withCustomConfig",
     "expo-router",
     "expo-web-browser",
     [
@@ -91,6 +77,7 @@ export default {
       },
     ],
     "expo-font",
+    "@rnmapbox/maps",
     "@react-native-firebase/app",
     [
       "expo-notifications",
@@ -100,7 +87,6 @@ export default {
         iosDisplayInForeground: true,
       },
     ],
-    "@maplibre/maplibre-react-native",
   ],
 
   experiments: {

app/(application)/(file)/[id].tsx

@@ -1,5 +1,4 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import PdfViewer from "@/components/_ShareComponent/PdfViewer";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import { Stack, useLocalSearchParams } from "expo-router";
@@ -8,12 +7,13 @@ import { SafeAreaView } from "react-native-safe-area-context";
 export default function FileScreen() {
   const { id } = useLocalSearchParams();
   const url = API_STRORAGE.GET({ fileId: id as string });
-
+  
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => <AppHeader title="File" left={<BackButton />} />,
+          title: "File",
+          headerLeft: () => <BackButton />,
         }}
       />
       <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>

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)/(image)/take-picture/[id]/index.tsx

@@ -105,7 +105,7 @@ export default function TakePicture() {
           </Pressable>
 
           <Pressable onPress={pickImage}>
-            <AntDesign name="folder-open" size={32} color="white" />
+            <AntDesign name="folderopen" size={32} color="white" />
           </Pressable>
         </View>
       </View>

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

@@ -1,21 +1,20 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-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";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 
 export default function UserLayout() {
   return (
     <>
-      <Stack>
+      <Stack screenOptions={HeaderStyles}>
         <Stack.Screen
           name="delete-account"
           options={{
-            header: () => <AppHeader title="Hapus Akun" />,
+            title: "Hapus Akun",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
@@ -46,73 +45,59 @@ export default function UserLayout() {
         <Stack.Screen
           name="user-search/index"
           options={{
-            header: () => <AppHeader title="Pencarian Pengguna" />,
+            title: "Pencarian Pengguna",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         {/* ========== 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={{
-            header: () => <AppHeader title="Event" left={<BackButton path="/home" />} />,
-          }}
-        /> */}
-
         <Stack.Screen
           name="event/(tabs)"
           options={{
             title: "Event",
-            header: () => <AppHeader title="Event" left={<BackButton path="/home" />} />,
-            // 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={{
-            header: () => <AppHeader title="Tambah Event" />,
+            title: "Tambah Event",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="event/detail/[id]"
           options={{
-            header: () => <AppHeader title="Event Detail" left={<LeftButtonCustom />} />,
+            title: "Event Detail",
+            headerLeft: () => <LeftButtonCustom />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Event" />,
+            title: "Edit Event",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/list-of-participants"
           options={{
-            header: () => <AppHeader title="Daftar peserta" />,
+            title: "Daftar peserta",
+            headerLeft: () => <BackButton />,
           }}
         />
         {/* ========== End Event Section ========= */}
@@ -121,19 +106,22 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/(tabs)"
           options={{
-            header: () => <AppHeader title="Collaboration" left={<BackButton path="/home" />} />,
+            title: "Collaboration",
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
           name="collaboration/create"
           options={{
-            header: () => <AppHeader title="Tambah Proyek" />,
+            title: "Tambah Proyek",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/list-of-participants"
           options={{
-            header: () => <AppHeader title="Daftar Partisipan" />,
+            title: "Daftar Partisipan",
+            headerLeft: () => <BackButton />,
           }}
         />
         {/* <Stack.Screen
@@ -146,19 +134,22 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Proyek" />,
+            title: "Edit Proyek",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/create-pacticipants"
           options={{
-            header: () => <AppHeader title="Ajukan Partisipasi" />,
+            title: "Ajukan Partisipasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/select-of-participants"
           options={{
-            header: () => <AppHeader title="Pilih Partisipan" />,
+            title: "Pilih Partisipan",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -168,25 +159,29 @@ export default function UserLayout() {
         <Stack.Screen
           name="voting/create"
           options={{
-            header: () => <AppHeader title="Tambah Voting" />,
+            title: "Tambah Voting",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="voting/(tabs)"
           options={{
-            header: () => <AppHeader title="Voting" left={<BackButton path="/home" />} />,
+            title: "Voting",
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Voting" />,
+            title: "Edit Voting",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/list-of-contributor"
           options={{
-            header: () => <AppHeader title="Daftar Kontributor" />,
+            title: "Daftar Kontributor",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -196,7 +191,8 @@ export default function UserLayout() {
         <Stack.Screen
           name="crowdfunding/index"
           options={{
-            header: () => <AppHeader title="Crowdfunding" left={<BackButton path="/home" />} />,
+            title: "Crowdfunding",
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
 
@@ -206,95 +202,103 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/(tabs)"
           options={{
-            header: () => <AppHeader title="Investasi" left={<BackButton path="/crowdfunding" />} />,
+            title: "Investasi",
+            headerLeft: () => <BackButton path="/crowdfunding" />,
           }}
         />
         <Stack.Screen
           name="investment/create"
           options={{
-            header: () => <AppHeader title="Tambah Investasi" />,
+            title: "Tambah Investasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/index"
           options={{
-            header: () => <AppHeader title="Detail Investasi" />,
+            title: "Detail Investasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Investasi" />,
+            title: "Edit Investasi",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/edit-prospectus"
           options={{
-            header: () => <AppHeader title="Edit Prospektus" />,
+            title: "Edit Prospektus",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(document)/list-of-document"
           options={{
-            header: () => <AppHeader title="Daftar Dokumen" />,
+            title: "Daftar Dokumen",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/add-document"
           options={{
-            header: () => <AppHeader title="Tambah Dokumen" />,
+            title: "Tambah Dokumen",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/edit-document"
           options={{
-            header: () => <AppHeader title="Edit Dokumen" />,
+            title: "Edit Dokumen",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(news)/add-news"
           options={{
-            header: () => <AppHeader title="Tambah Berita" />,
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/investor"
           options={{
-            header: () => <AppHeader title="Investor" />,
+            title: "Investor",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/index"
           options={{
-            header: () => <AppHeader title="Pembelian Saham" />,
+            title: "Pembelian Saham",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/select-bank"
           options={{
-            header: () => <AppHeader title="Pilih Bank" />,
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/invoice"
           options={{
-            header: () => (
-              <AppHeader
-                title="Invoice"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() =>
-                      router.navigate(`/investment/(tabs)/transaction`)
-                    }
-                  />
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
                 }
               />
             ),
@@ -303,18 +307,14 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/process"
           options={{
-            header: () => (
-              <AppHeader
-                title="Proses"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() =>
-                      router.navigate(`/investment/(tabs)/transaction`)
-                    }
-                  />
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() =>
+                  router.navigate(`/investment/(tabs)/transaction`)
                 }
               />
             ),
@@ -323,20 +323,23 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/success"
           options={{
-            header: () => <AppHeader title="Transaksi Berhasil" />,
+            title: "Transaksi Berhasil",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/failed"
           options={{
-            header: () => <AppHeader title="Transaksi Gagal" />,
+            title: "Transaksi Gagal",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(my-holding)/[id]"
           options={{
-            header: () => <AppHeader title="Detail Saham Saya" />,
+            title: "Detail Saham Saya",
+            headerLeft: () => <BackButton />,
           }}
         />
         {/* ========== End Investment Section ========= */}
@@ -345,111 +348,122 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/(tabs)"
           options={{
-            header: () => <AppHeader title="Donasi" left={<BackButton path="/crowdfunding" />} />,
+            title: "Donasi",
+            headerLeft: () => <BackButton path="/crowdfunding" />,
           }}
         />
 
         <Stack.Screen
           name="donation/create"
           options={{
-            header: () => <AppHeader title="Tambah Donasi" />,
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/create-story"
           options={{
-            header: () => <AppHeader title="Tambah Donasi" />,
+            title: "Tambah Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Donasi" />,
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-story"
           options={{
-            header: () => <AppHeader title="Edit Donasi" />,
+            title: "Edit Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-rekening"
           options={{
-            header: () => <AppHeader title="Edit Rekening" />,
+            title: "Edit Rekening",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/detail-story"
           options={{
-            header: () => <AppHeader title="Cerita Penggalang" />,
+            title: "Cerita Penggalang",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/infromation-fundrising"
           options={{
-            header: () => <AppHeader title="Informasi Penggalang Dana" />,
+            title: "Informasi Penggalang Dana",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/list-of-donatur"
           options={{
-            header: () => <AppHeader title="Daftar Donatur" />,
+            title: "Daftar Donatur",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/fund-disbursement"
           options={{
-            header: () => <AppHeader title="Pencairan Dana" />,
+            title: "Pencairan Dana",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(news)/recap-of-news"
           options={{
-            header: () => <AppHeader title="Rekap Kabar" />,
+            title: "Rekap Kabar",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/add-news"
           options={{
-            header: () => <AppHeader title="Tambah Berita" />,
+            title: "Tambah Berita",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/[news]/edit-news"
           options={{
-            header: () => <AppHeader title="Edit Berita" />,
+            title: "Edit Berita",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/index"
           options={{
-            header: () => <AppHeader title="Donasi" />,
+            title: "Donasi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/select-bank"
           options={{
-            header: () => <AppHeader title="Pilih Bank" />,
+            title: "Pilih Bank",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/invoice"
           options={{
-            header: () => (
-              <AppHeader
-                title="Invoice"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
-                  />
-                }
+            title: "Invoice",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
               />
             ),
           }}
@@ -457,17 +471,13 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/process"
           options={{
-            header: () => (
-              <AppHeader
-                title="Proses"
-                left={
-                  <Ionicons
-                    name="close"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.yellow}
-                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
-                  />
-                }
+            title: "Proses",
+            headerLeft: () => (
+              <Ionicons
+                name="close"
+                size={ICON_SIZE_SMALL}
+                color={MainColor.yellow}
+                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
               />
             ),
           }}
@@ -475,51 +485,54 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/success"
           options={{
-            header: () => <AppHeader title="Donasi Berhasil" />,
+            title: "Donasi Berhasil",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
           options={{
-            header: () => <AppHeader title="Donasi Gagal" />,
+            title: "Donasi Gagal",
+            headerLeft: () => <BackButton />,
           }}
         />
 
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}
-
-
         <Stack.Screen
           name="job/create"
           options={{
-            header: () => <AppHeader title="Tambah Job" />,
+            title: "Tambah Job",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="job/(tabs)"
           options={{
             title: "Job Vacancy",
-            // NOTE: headerLeft di pindahkan ke Tabs Layout
-            header: () => <AppHeader title="Job Vacancy" left={<BackButton path="/home" />} />,
+            headerLeft: () => <BackButton path="/home" />,
           }}
         />
         <Stack.Screen
           name="job/[id]/index"
           options={{
-            header: () => <AppHeader title="Detail Job" />,
+            title: "Detail Job",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="job/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Job" />,
+            title: "Edit Job",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="job/[id]/archive"
           options={{
-            header: () => <AppHeader title="Arsip Job" />,
+            title: "Arsip Job",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -529,67 +542,64 @@ export default function UserLayout() {
         <Stack.Screen
           name="forum/create"
           options={{
-            header: () => <AppHeader title="Tambah Diskusi" />,
+            title: "Tambah Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Diskusi" />,
+            title: "Edit Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/forumku"
           options={{
-            header: () => <AppHeader title="Forumku" left={<BackButton icon={"close"} />} />,
+            title: "Forumku",
+            headerLeft: () => <BackButton icon={"close"} />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/index"
           options={{
-            header: () => <AppHeader title="Detail" />,
+            title: "Detail",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-commentar"
           options={{
-            header: () => <AppHeader title="Laporkan Komentar" />,
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-commentar"
           options={{
-            header: () => <AppHeader title="Laporkan Komentar" />,
+            title: "Laporkan Komentar",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-posting"
           options={{
-            header: () => <AppHeader title="Laporkan Diskusi" />,
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-posting"
           options={{
-            header: () => <AppHeader title="Laporkan Diskusi" />,
+            title: "Laporkan Diskusi",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="forum/terms"
           options={{
-            header: () => <AppHeader title="Syarat & Ketentuan Forum" />,
-          }}
-        />
-        <Stack.Screen
-          name="forum/[id]/preview-report-posting"
-          options={{
-            header: () => <AppHeader title="Laporan Postingan" />,
-          }}
-        />
-        <Stack.Screen
-          name="forum/[id]/preview-report-comment"
-          options={{
-            header: () => <AppHeader title="Laporan Komentar" />,
+            title: "Syarat & Ketentuan Forum",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -597,25 +607,29 @@ export default function UserLayout() {
         <Stack.Screen
           name="maps/index"
           options={{
-            header: () => <AppHeader title="Maps" />,
+            title: "Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="maps/create"
           options={{
-            header: () => <AppHeader title="Tambah Maps" />,
+            title: "Tambah Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/edit"
           options={{
-            header: () => <AppHeader title="Edit Maps" />,
+            title: "Edit Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/custom-pin"
           options={{
-            header: () => <AppHeader title="Custom Pin Maps" />,
+            title: "Custom Pin Maps",
+            headerLeft: () => <BackButton />,
           }}
         />
 
@@ -623,7 +637,8 @@ export default function UserLayout() {
         <Stack.Screen
           name="marketplace/index"
           options={{
-            header: () => <AppHeader title="Market Place" />,
+            title: "Market Place",
+            headerLeft: () => <BackButton />,
           }}
         />
       </Stack>

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

@@ -2,64 +2,35 @@ import { IconHome } from "@/components/_Icon";
 import { TabsStyles } from "@/styles/tabs-styles";
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function CollaborationTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: 80,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: 70 + paddingBottom,
-            },
-          }),
-        }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Beranda",
-            tabBarIcon: ({ color }) => <IconHome color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="participant"
-          options={{
-            title: "Partisipan",
-            tabBarIcon: ({ color }) => (
-              <Ionicons size={20} name="people" color={color} />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="group"
-          options={{
-            title: "Grup",
-            tabBarIcon: ({ color }) => (
-              <Ionicons size={20} name="chatbox-ellipses" color={color} />
-            ),
-          }}
-        />
-      </Tabs>
-    </View>
-  );
-}
 
 export default function CollaborationTabsLayout() {
-  return <CollaborationTabsWrapper />;
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="participant"
+        options={{
+          title: "Partisipan",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="people" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="group"
+        options={{
+          title: "Grup",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={20} name="chatbox-ellipses" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
 }

app/(application)/(user)/collaboration/[id]/[detail]/info.tsx

@@ -10,7 +10,6 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { apiCollaborationGroup } from "@/service/api-client/api-collaboration";
 import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useState, useCallback } from "react";
@@ -41,7 +40,8 @@ export default function CollaborationRoomInfo() {
     <>
       <Stack.Screen
         options={{
-          header: () => <AppHeader title="Info" left={<BackButton />} />,
+          title: `Info`,
+          headerLeft: () => <BackButton />,
         }}
       />
 

app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx

@@ -1,5 +1,4 @@
 import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import ChatScreen from "@/screens/Collaboration/GroupChatSection";
@@ -13,18 +12,14 @@ export default function CollaborationRoomChat() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Proyek ${detail}`}
-              left={<BackButton />}
-              right={
-                <Feather
-                  name="info"
-                  size={ICON_SIZE_SMALL}
-                  color={MainColor.yellow}
-                  onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
-                />
-              }
+          title: `Proyek ${detail}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <Feather
+              name="info"
+              size={ICON_SIZE_SMALL}
+              color={MainColor.yellow}
+              onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
             />
           ),
         }}

app/(application)/(user)/collaboration/[id]/detail-participant.tsx

@@ -6,7 +6,6 @@ import {
   MenuDrawerDynamicGrid,
   ViewWrapper
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import { apiCollaborationGetOne } from "@/service/api-client/api-collaboration";
 import { Ionicons } from "@expo/vector-icons";
@@ -39,14 +38,10 @@ export default function CollaborationDetailParticipant() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Proyek"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerParticipant(true)} />
-              }
-            />
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
           ),
         }}
       />

app/(application)/(user)/collaboration/[id]/detail-project-main.tsx

@@ -8,7 +8,6 @@ import {
   Spacing,
   ViewWrapper
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import {
@@ -67,13 +66,9 @@ export default function CollaborationDetailProjectMain() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Proyek Saya"
-              left={<BackButton />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: "Proyek Saya",
+          headerLeft: () => <BackButton />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
       <ViewWrapper>

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

@@ -9,7 +9,6 @@ import {
   MenuDrawerDynamicGrid,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { useAuth } from "@/hooks/use-auth";
 import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection";
 import {
@@ -75,14 +74,10 @@ export default function CollaborationDetail() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Proyek"
-              left={<BackButton />}
-              right={
-                <DotButton onPress={() => setOpenDrawerMenu(true)} />
-              }
-            />
+          title: "Detail Proyek",
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <DotButton onPress={() => setOpenDrawerMenu(true)} />
           ),
         }}
       />

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

@@ -5,62 +5,33 @@ import {
     FontAwesome5
 } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function DonationTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
 
+export default function InvestmentTabsLayout() {
   return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: 80,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: 70 + paddingBottom,
-            },
-          }),
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Beranda",
+          tabBarIcon: ({ color }) => <IconHome color={color} />,
         }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Beranda",
-            tabBarIcon: ({ color }) => <IconHome color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="status"
-          options={{
-            title: "Galang Dana",
-            tabBarIcon: ({ color }) => <IconStatus color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="my-donation"
-          options={{
-            title: "Donasi Saya",
-            tabBarIcon: ({ color }) => (
-              <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
-            ),
-          }}
-        />
-      </Tabs>
-    </View>
+      />
+      <Tabs.Screen
+        name="status"
+        options={{
+          title: "Galang Dana",
+          tabBarIcon: ({ color }) => <IconStatus color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="my-donation"
+        options={{
+          title: "Donasi Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+    </Tabs>
   );
 }
-
-export default function DonationTabsLayout() {
-  return <DonationTabsWrapper />;
-}

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)/[news]/index.tsx

@@ -11,7 +11,6 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import { useAuth } from "@/hooks/use-auth";
@@ -58,17 +57,12 @@ export default function DonationNews() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Kabar"
-              left={<BackButton />}
-              right={
-                user?.id === data?.authorId && (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                )
-              }
-            />
-          ),
+          title: "Detail Kabar",
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
       <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,13 +4,11 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 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";
@@ -18,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,
@@ -27,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 () => {
@@ -62,101 +58,40 @@ 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
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : 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,23 +182,10 @@ export default function DonationEdit() {
   };
 
   return (
-    <NewWrapper
-      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
@@ -275,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,13 +6,10 @@ import {
   DotButton,
   DrawerCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper,
   StackCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 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";
@@ -37,7 +34,7 @@ export default function DonasiDetailBeranda() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id]),
+    }, [id])
   );
 
   const onLoadData = async () => {
@@ -78,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>
     </>
@@ -91,43 +88,29 @@ export default function DonasiDetailBeranda() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Donasi"
-              left={<BackButton />}
-              right={
-                user?.id === data?.Author?.id ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail Donasi`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            user?.id === data?.Author?.id ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : 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,22 +112,7 @@ export default function DonationCreateStory() {
   };
 
   return (
-    <NewWrapper
-      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
@@ -182,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,23 +125,7 @@ export default function DonationCreate() {
   };
 
   return (
-    <NewWrapper
-      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." />
 
@@ -218,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,87 +4,40 @@ import {
   IconHome,
   IconStatus,
 } from "@/components/_Icon";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
 import { TabsStyles } from "@/styles/tabs-styles";
-import { router, Tabs, useLocalSearchParams } from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
-
-function EventTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-  const { from, category } = useLocalSearchParams<{
-    from?: string;
-    category?: string;
-  }>();
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: OS_IOS_HEIGHT,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: OS_ANDROID_HEIGHT + paddingBottom,
-            },
-          }),
-          header: () => (
-            <AppHeader
-              title="Event"
-              left={
-                <BackButtonFromNotification
-                  from={from || ""}
-                  category={category}
-                />
-              }
-            />
-          ),
-        }}
-      >
-        <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="contribution"
-          options={{
-            title: "Kontribusi",
-            tabBarIcon: ({ color }) => <IconContribution color={color} />,
-          }}
-        />
-        <Tabs.Screen
-          name="history"
-          options={{
-            title: "Riwayat",
-            tabBarIcon: ({ color }) => <IconHistory color={color} />,
-          }}
-        />
-      </Tabs>
-    </View>
-  );
-}
+import { Tabs } from "expo-router";
 
 export default function EventTabsLayout() {
-  return <EventTabsWrapper />;
+  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="contribution"
+        options={{
+          title: "Kontribusi",
+          tabBarIcon: ({ color }) => <IconContribution color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="history"
+        options={{
+          title: "Riwayat",
+          tabBarIcon: ({ color }) => <IconHistory color={color} />,
+        }}
+      />
+    </Tabs>
+  );
 }

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]/[status]/detail-event.tsx

@@ -10,7 +10,6 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
@@ -82,17 +81,12 @@ export default function EventDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${status === "publish" ? "" : status}`}
-              left={<LeftButtonCustom />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${status === "publish" ? "" : status}`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
       <ViewWrapper>

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

@@ -9,8 +9,7 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import {
   apiEventConfirmationAction,
@@ -61,7 +60,7 @@ export default function UserEventConfirmation() {
   useFocusEffect(
     useCallback(() => {
       checkTokenAndDataParticipants() || console.log("Token is null");
-    }, [token, id, user?.id]),
+    }, [token, id, user?.id])
   );
 
   const checkTokenAndDataParticipants = async () => {
@@ -114,7 +113,7 @@ export default function UserEventConfirmation() {
       confirmationStart,
       confirmationEnd,
       null,
-      "[]",
+      "[]"
     );
 
     // --- [4] Status waktu event (untuk pesan UI) ---
@@ -219,14 +218,9 @@ export default function UserEventConfirmation() {
         if (isWithinConfirmationWindow) {
           if (konfirmasi === false) {
             return (
-              // <TamplateBox data={data}>
-              //   <TamplateText text="Konfirmasi Kehadiran" />
-              // </TamplateBox>
-              <UserParticipan_And_DuringEvent
-                id={data.id}
-                userId={user?.id as string}
-                data={data}
-              />
+              <TamplateBox data={data}>
+                <TamplateText text="Konfirmasi Kehadiran" />
+              </TamplateBox>
             );
           }
           return (
@@ -266,20 +260,18 @@ export default function UserEventConfirmation() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Konfirmasi Event"
-              left={
-                <Ionicons
-                  name="arrow-back"
-                  size={20}
-                  color={MainColor.yellow}
-                  onPress={() => router.navigate("/")}
-                />
-              }
-            />
-          ),
-        }}
+          title: "Konfirmasi Event",
+          // headerLeft: () => (
+          //   <Ionicons
+          //     name="arrow-back"
+          //     size={20}
+          //     color={MainColor.yellow}
+          //     onPress={() =>
+          //       router.navigate("/(application)/(user)/event/create")
+          //     }
+          //   />
+          // ),
+        }} 
       />
       <ViewWrapper>{handlerReturn()}</ViewWrapper>
     </>
@@ -505,6 +497,7 @@ const UserNotParticipan_And_DuringEvent = ({
   );
 };
 
+
 // 🟡 ZONA ACARA BERLANGSUN
 // User sudah terdaftar & Event sedang berlangsung & user harus konfirmasi
 const UserParticipan_And_DuringEvent = ({

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

@@ -7,7 +7,6 @@ import {
   Spacing,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
@@ -50,13 +49,9 @@ export default function EventDetailContribution() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail kontribusi"
-              left={<LeftButtonCustom />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: `Detail kontribusi`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
       <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

@@ -6,7 +6,6 @@ import {
   ViewWrapper,
   Spacing,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
@@ -45,13 +44,9 @@ export default function EventDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail riwayat"
-              left={<LeftButtonCustom />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: `Detail riwayat`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
         }}
       />
       <ViewWrapper>
@@ -61,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,16 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
   AlertDefaultSystem,
-  BackButton,
   ButtonCustom,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 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";
@@ -20,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(
@@ -60,6 +55,8 @@ export default function EventDetailPublish() {
           userId: user?.id as string,
         });
 
+        console.log("[RES CHECK PARTICIPANTS]", responseCheckParticipants);
+
         if (
           responseCheckParticipants.success &&
           responseCheckParticipants.data
@@ -111,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,22 +137,18 @@ export default function EventDetailPublish() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Event Publish"
-              left={<BackButton onPress={() => router.back()} />}
-              right={<DotButton onPress={() => setOpenDrawer(true)} />}
-            />
-          ),
+          title: `Event Publish`,
+          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,202 +1,121 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+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 HomeTabs from "@/screens/Home/HomeTabs";
-import { stylesHome } from "@/screens/Home/homeViewStyle";
 import Home_ImageSection from "@/screens/Home/imageSection";
+import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
 import Home_FeatureSection from "@/screens/Home/topFeatureSection";
-import { apiJobGetAll } from "@/service/api-client/api-job";
 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 { RefreshControl, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
+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();
-  const [listData, setListData] = useState<any[] | null>(null);
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
+  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();
-      onLoadDataJob();
       checkVersion();
-      userData(token as string).catch((error) => {
-        console.log("[ERROR userData]", error?.message);
-        console.log("[ERROR userData Response]", error?.response?.data);
-      });
-      syncUnreadCount();
-    }, [user?.id, token]),
+      userData(token as string);
+    }, [user?.id, token])
   );
 
   async function onLoadData() {
-    try {
-      const response = await apiUser(user?.id as string);
-      setData(response.data);
-    } catch (error: any) {
-      console.log("[ERROR onLoadData]", error?.message);
-      console.log("[ERROR Response]", error?.response?.data);
-      // Set data tetap agar UI tidak stuck di loading
-      setData(null);
-    }
+    const response = await apiUser(user?.id as string);
+    console.log(
+      "[Profile ID]>>",
+      JSON.stringify(response?.data?.Profile?.id, null, 2)
+    );
+
+    setData(response.data);
   }
 
-  const onLoadDataJob = async () => {
-    try {
-      const response = await apiJobGetAll({
-        category: "beranda",
-      });
-      const result = response.data
-        .sort(
-          (a: any, b: any) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-        )
-        .slice(0, 2);
-      setListData(result);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
   const checkVersion = async () => {
-    try {
-      const response = await apiVersion();
-      console.log("[Version] >>", JSON.stringify(response.data, null, 2));
-    } catch (error: any) {
-      console.log("[ERROR checkVersion]", error?.message);
-    }
+    const response = await apiVersion();
+    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
   };
 
   const onRefresh = useCallback(() => {
     setRefreshing(true);
     onLoadData();
-    onLoadDataJob();
     checkVersion();
     setRefreshing(false);
   }, []);
 
+  if (user && user?.termsOfServiceAccepted === false) {
+    console.log("User is not accept term service");
+    return <Redirect href={`/terms-agreement`} />;
+  }
+
   if (data && data?.active === false) {
-    console.warn("User is not active");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/waiting-room`} />
-      </BasicWrapper>
-    );
+    console.log("User is not active");
+    return <Redirect href={`/waiting-room`} />;
   }
 
   if (data && data?.Profile === null) {
-    console.warn("Profile is null");
-    return (
-      <BasicWrapper>
-        <Redirect href={`/profile/create`} />
-      </BasicWrapper>
-    );
+    console.log("Profile is null");
+    return <Redirect href={`/profile/create`} />;
   }
 
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="HIPMI"
-              showBack={false}
-              left={
-                data ? (
-                  <Ionicons
-                    name="search"
-                    size={20}
-                    color={MainColor.yellow}
-                    onPress={() => {
-                      router.push("/user-search");
-                    }}
-                  />
-                ) : (
-                  <CustomSkeleton height={30} width={30} radius={100} />
-                )
-              }
-              right={
-                data ? (
-                  <HeaderBell />
-                ) : (
-                  <CustomSkeleton height={30} width={30} radius={100} />
-                )
-              }
+          title: `HIPMI`,
+          headerLeft: () => (
+            <Ionicons
+              name="search"
+              size={20}
+              color={MainColor.yellow}
+              onPress={() => {
+                router.push("/user-search");
+              }}
+            />
+          ),
+          headerRight: () => (
+            <Ionicons
+              disabled={true}
+              name="notifications"
+              size={20}
+              color={MainColor.placeholder}
+              onPress={() => {
+                router.push("/notifications");
+              }}
             />
           ),
         }}
       />
-
-      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-        <ScrollView
-          style={{ flex: 1 }}
-          contentContainerStyle={{
-            flexGrow: 1,
-            paddingInline: 10,
-            paddingBottom: paddingBottom + 80, // Space for tabs + safe area
-          }}
-          refreshControl={
-            <RefreshControl
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-              tintColor={MainColor.yellow}
-              colors={[MainColor.yellow]}
-            />
-          }
-          keyboardShouldPersistTaps="handled"
-        >
-          <StackCustom>
-            <Home_ImageSection />
-
-            {data && data ? (
-              <Home_FeatureSection />
-            ) : (
-              <View style={stylesHome.gridContainer}>
-                {Array.from({ length: 4 }).map((_, index) => (
-                  <CustomSkeleton
-                    key={index}
-                    style={stylesHome.gridItem}
-                    radius={50}
-                  />
-                ))}
-              </View>
-            )}
-
-            {data ? (
-              <Home_BottomFeatureSection listData={listData} />
-            ) : (
-              <CustomSkeleton height={150} />
-            )}
-          </StackCustom>
-        </ScrollView>
-
-        {/* Home Tabs di bawah */}
-        {data && data ? (
-          <HomeTabs
+      <ViewWrapper
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        footerComponent={
+          <TabSection
             tabs={tabsHome({
               acceptedForumTermsAt: data?.acceptedForumTermsAt,
               profileId: data?.Profile?.id,
             })}
           />
-        ) : (
-          <View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
-        )}
-      </View>
+        }
+      >
+        <StackCustom>
+          <Home_ImageSection />
+
+          <Home_FeatureSection />
+
+          <Home_BottomFeatureSection />
+        </StackCustom>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -1,108 +1,59 @@
-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 { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function InvestmentTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-  const navigation = useNavigation();
-
-  const { from, category } = useLocalSearchParams<{
-    from?: string;
-    category?: string;
-  }>();
-
-  // Atur header secara dinamis
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => (
-        <BackButtonFromNotification
-          from={from || ""}
-          category={category}
-        />
-      ),
-    });
-  }, [from, category, router, navigation]);
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: 80,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: 70 + paddingBottom,
-            },
-          }),
-        }}
-      >
-        <Tabs.Screen
-          name="index"
-          options={{
-            title: "Bursa",
-            tabBarIcon: ({ color }) => (
-              <Ionicons
-                name="bar-chart-outline"
-                color={color}
-                size={ICON_SIZE_SMALL}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="portofolio"
-          options={{
-            title: "Portofolio",
-            tabBarIcon: ({ color }) => (
-              <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="my-holding"
-          options={{
-            title: "Saham Saya",
-            tabBarIcon: ({ color }) => (
-              <FontAwesome6
-                name="hand-holding-dollar"
-                color={color}
-                size={ICON_SIZE_SMALL}
-              />
-            ),
-          }}
-        />
-        <Tabs.Screen
-          name="transaction"
-          options={{
-            title: "Transaksi",
-            tabBarIcon: ({ color }) => (
-              <FontAwesome6
-                name="money-bill-transfer"
-                color={color}
-                size={ICON_SIZE_SMALL}
-              />
-            ),
-          }}
-        />
-      </Tabs>
-    </View>
-  );
-}
+import { Tabs } from "expo-router";
 
 export default function InvestmentTabsLayout() {
-  return <InvestmentTabsWrapper />;
+  return (
+    <Tabs screenOptions={TabsStyles}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Bursa",
+          tabBarIcon: ({ color }) => (
+            <Ionicons
+              name="bar-chart-outline"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="portofolio"
+        options={{
+          title: "Portofolio",
+          tabBarIcon: ({ color }) => (
+            <Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="my-holding"
+        options={{
+          title: "Saham Saya",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="hand-holding-dollar"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="transaction"
+        options={{
+          title: "Transaksi",
+          tabBarIcon: ({ color }) => (
+            <FontAwesome6
+              name="money-bill-transfer"
+              color={color}
+              size={ICON_SIZE_SMALL}
+            />
+          ),
+        }}
+      />
+    </Tabs>
+  );
 }

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]/(my-holding)/[id].tsx

@@ -10,7 +10,6 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
@@ -31,13 +30,13 @@ export default function InvestmentDetailHolding() {
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
     const [data, setData] = useState<any>(null);
-
+  
     useFocusEffect(
       useCallback(() => {
         onLoadData();
       }, [id, status])
     );
-
+  
     const onLoadData = async () => {
       try {
         const response = await apiInvestmentGetInvoice({
@@ -45,7 +44,7 @@ export default function InvestmentDetailHolding() {
           authorId: user?.id,
           category: "invoice",
         });
-
+  
         console.log("[DATA]", JSON.stringify(response.data, null, 2));
         setData(response.data);
       } catch (error) {
@@ -77,19 +76,14 @@ export default function InvestmentDetailHolding() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
 

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

@@ -11,7 +11,6 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -57,17 +56,12 @@ export default function InvestmentNews() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail Berita"
-              left={<BackButton />}
-              right={
-                user?.id === data?.authorId && (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                )
-              }
-            />
-          ),
+          title: "Detail Berita",
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            user?.id === data?.authorId && (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ),
         }}
       />
       <ViewWrapper>

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

@@ -6,7 +6,6 @@ import {
   MenuDrawerDynamicGrid,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
@@ -16,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,
@@ -25,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();
@@ -65,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}
@@ -96,30 +72,21 @@ 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 (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
 

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

@@ -6,7 +6,6 @@ import {
   MenuDrawerDynamicGrid,
   ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
@@ -64,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
@@ -95,30 +97,21 @@ 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 (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title={`Detail ${_.startCase(status as string)}`}
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
-                ) : status === "publish" ? (
-                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail ${_.startCase(status as string)}`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawerDraft(true)} />
+            ) : status === "publish" ? (
+              <DotButton onPress={() => setOpenDrawerPublish(true)} />
+            ) : null,
         }}
       />
 

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,83 +1,34 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { BackButton } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 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
-} from "expo-router";
-import { View } from "react-native";
-import { MainColor } from "@/constants/color-palet";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform } from "react-native";
-
-function JobTabsWrapper() {
-  const insets = useSafeAreaInsets();
-  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
-  const { from, category } = useLocalSearchParams<{
-    from?: string;
-    category?: string;
-  }>();
-
-  return (
-    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
-      <Tabs
-        screenOptions={{
-          ...TabsStyles,
-          tabBarStyle: Platform.select({
-            ios: {
-              borderTopWidth: 0,
-              paddingTop: 12,
-              height: 80,
-            },
-            android: {
-              borderTopWidth: 0,
-              paddingTop: 5,
-              height: 70 + paddingBottom,
-            },
-          }),
-          header: () => (
-            <AppHeader
-              title="Job Vacancy"
-              left={
-                <BackButtonFromNotification from={from || ""} category={category} />
-              }
-            />
-          ),
-        }}
-      >
-        <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>
-    </View>
-  );
-}
+import { Tabs } from "expo-router";
 
 export default function JobTabsLayout() {
-  return <JobTabsWrapper />;
+  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>
+  );
 }

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

@@ -5,11 +5,10 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
-  NewWrapper_V2,
   Spacing,
   StackCustom,
+  ViewWrapper,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ReportBox from "@/components/Box/ReportBox";
@@ -59,20 +58,15 @@ export default function JobDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Detail"
-              left={<BackButton />}
-              right={
-                status === "draft" ? (
-                  <DotButton onPress={() => setOpenDrawer(true)} />
-                ) : null
-              }
-            />
-          ),
+          title: `Detail`,
+          headerLeft: () => <BackButton />,
+          headerRight: () =>
+            status === "draft" ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
-      <NewWrapper_V2>
+      <ViewWrapper>
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -80,10 +74,10 @@ export default function JobDetailStatus() {
             <StackCustom gap={"xs"}>
               {data &&
                 data?.catatan &&
-                (status === "draft" || status === "reject") && (
+                (status === "draft" || status === "rejected") && (
                   <ReportBox text={data?.catatan} />
                 )}
-
+                
               <Job_BoxDetailSection data={data} />
               <Job_ButtonStatusSection
                 id={id as string}
@@ -96,7 +90,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </NewWrapper_V2>
+      </ViewWrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,5 +1,198 @@
-import { Job_ScreenEdit } from "@/screens/Job/ScreenJobEdit";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+    BaseBox,
+    ButtonCenteredOnly,
+    ButtonCustom,
+    DummyLandscapeImage,
+    InformationBox,
+    LandscapeFrameUploaded,
+    LoaderCustom,
+    Spacing,
+    StackCustom,
+    TextAreaCustom,
+    TextInputCustom,
+    ViewWrapper,
+} from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
+import {
+    deleteFileService,
+    uploadFileService,
+} from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function JobEdit() {
-  return <Job_ScreenEdit />;
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>({
+    title: "",
+    content: "",
+    deskripsi: "",
+  });
+  const [isLoadData, setIsLoadData] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [imageUri, setImageUri] = useState<string | null>(null);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiJobGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
+  const handlerOnUpdate = async () => {
+    if (!data.title || !data.content || !data.deskripsi) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      let newImageId = "";
+
+      if (imageUri) {
+        const responseUploadImage = await uploadFileService({
+          imageUri: imageUri,
+          dirId: DIRECTORY_ID.job_image,
+        });
+
+        if (responseUploadImage.success) {
+          newImageId = responseUploadImage.data.id;
+        }
+      }
+
+      if (data?.imageId) {
+        const responseDeleteImage = await deleteFileService({
+          id: data.imageId,
+        });
+
+        if (!responseDeleteImage.success) {
+          console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
+        }
+      }
+
+      const newData = {
+        title: data.title,
+        content: data.content,
+        deskripsi: data.deskripsi,
+        imageId: newImageId,
+      };
+
+      const response = await apiJobUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit",
+      });
+
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: response.message,
+        });
+        router.back();
+      } else {
+        Toast.show({
+          type: "info",
+          text1: "Info",
+          text2: response.message,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonSubmit = () => {
+    return (
+      <>
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
+          Update
+        </ButtonCustom>
+        <Spacing />
+      </>
+    );
+  };
+
+  return (
+    <ViewWrapper>
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : (
+        <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." />
+
+          {imageUri ? (
+            <LandscapeFrameUploaded image={imageUri as any} />
+          ) : (
+            <BaseBox>
+              <DummyLandscapeImage imageId={data?.imageId} />
+            </BaseBox>
+          )}
+
+          <ButtonCenteredOnly
+            onPress={() => {
+              pickImage({
+                setImageUri,
+              });
+            }}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
+
+          <Spacing />
+
+          <TextInputCustom
+            label="Judul Lowongan"
+            placeholder="Masukan Judul Lowongan Kerja"
+            required
+            value={data.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
+
+          <TextAreaCustom
+            label="Syarat & Kualifikasi"
+            placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+            required
+            showCount
+            maxLength={1000}
+            value={data.content}
+            onChangeText={(value) => setData({ ...data, content: value })}
+          />
+
+          <TextAreaCustom
+            label="Deskripsi Lowongan"
+            placeholder="Masukan Deskripsi Lowongan Kerja"
+            required
+            showCount
+            maxLength={1000}
+            value={data.deskripsi}
+            onChangeText={(value) => setData({ ...data, deskripsi: value })}
+          />
+
+          {buttonSubmit()}
+        </StackCustom>
+      )}
+    </ViewWrapper>
+  );
 }

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,5 +1,168 @@
-import { Job_ScreenCreate } from "@/screens/Job/ScreenJobCreate";
+import {
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextInputCustom,
+  ViewWrapper
+} from "@/components";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiJobCreate } from "@/service/api-client/api-job";
+import { uploadFileService } from "@/service/upload-service";
+import pickImage from "@/utils/pickImage";
+import { router } from "expo-router";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function JobCreate() {
-  return <Job_ScreenCreate />;
+  const nextUrl = "/(application)/(user)/job/(tabs)/status";
+  const { user } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const [image, setImage] = useState<string | null>(null);
+  const [data, setData] = useState({
+    title: "",
+    content: "",
+    deskripsi: "",
+    authorId: "",
+  });
+
+  const handlerOnSubmit = async () => {
+    let imageId = "";
+    const newData = {
+      title: data.title,
+      content: data.content,
+      deskripsi: data.deskripsi,
+      authorId: user?.id,
+      imageId: "",
+    };
+
+    if (!data.title || !data.content || !data.deskripsi || !user?.id) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Harap isi semua data",
+      });
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      if (image === null || !image) {
+        const response = await apiJobCreate(newData);
+        if (response.success) {
+          Toast.show({
+            type: "success",
+            text1: "Berhasil",
+            text2: "Lowongan berhasil dibuat",
+          });
+          router.replace(nextUrl);
+        }
+
+        return;
+      }
+
+      const responseUploadImage = await uploadFileService({
+        imageUri: image,
+        dirId: DIRECTORY_ID.job_image,
+      });
+
+      if (responseUploadImage.success) {
+        imageId = responseUploadImage.data.id;
+      }
+
+      const fixData = {
+        ...newData,
+        imageId: imageId,
+      };
+
+      const response = await apiJobCreate(fixData);
+      if (response.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: "Lowongan berhasil dibuat",
+        });
+        router.replace(nextUrl);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const buttonSubmit = () => {
+    return (
+      <>
+        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
+          Simpan
+        </ButtonCustom>
+        <Spacing />
+      </>
+    );
+  };
+
+  return (
+    <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." />
+
+        {/* <BaseBox>
+          <Image
+            source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
+            style={{ width: "100%", height: 200 }}
+          />
+        </BaseBox> */}
+        <LandscapeFrameUploaded image={image as string} />
+        <ButtonCenteredOnly
+          onPress={() => {
+            // router.push("/(application)/(image)/take-picture/123");
+            pickImage({
+              setImageUri: setImage,
+            });
+          }}
+          icon="upload"
+        >
+          Upload
+        </ButtonCenteredOnly>
+
+        <Spacing />
+
+        <TextInputCustom
+          label="Judul Lowongan"
+          placeholder="Masukan Judul Lowongan Kerja"
+          required
+          value={data.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
+        />
+
+        <TextAreaCustom
+          label="Syarat & Kualifikasi"
+          placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+          value={data.content}
+          onChangeText={(value) => setData({ ...data, content: value })}
+        />
+
+        <TextAreaCustom
+          label="Deskripsi Lowongan"
+          placeholder="Masukan Deskripsi Lowongan Kerja"
+          required
+          showCount
+          maxLength={1000}
+          value={data.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
+        />
+
+        {buttonSubmit()}
+      </StackCustom>
+    </ViewWrapper>
+  );
 }

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

@@ -1,5 +1,244 @@
-import { Maps_ScreenMapsEdit } from "@/screens/Maps/ScreenMapsEdit";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { apiMapsGetOne, apiMapsUpdate } from "@/service/api-client/api-maps";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import MapView, { LatLng, Marker } from "react-native-maps";
+import Toast from "react-native-toast-message";
 
+const defaultRegion = {
+  latitude: -8.737109,
+  longitude: 115.1756897,
+  latitudeDelta: 0.1,
+  longitudeDelta: 0.1,
+};
 export default function MapsEdit() {
-  return <Maps_ScreenMapsEdit />;
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any | null>({
+    id: "",
+    namePin: "",
+    latitude: "",
+    longitude: "",
+    imageId: "",
+  });
+  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiMapsGetOne({ id: id as string });
+
+      if (response.success) {
+        setData({
+          id: response.data.id,
+          namePin: response.data.namePin,
+          latitude: response.data.latitude,
+          longitude: response.data.longitude,
+          imageId: response.data.imageId,
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handleMapPress = (event: any) => {
+    const { latitude, longitude } = event.nativeEvent.coordinate;
+    const location = { latitude, longitude };
+    setSelectedLocation(location);
+  };
+
+  const handleSubmit = async () => {
+    let newData: any;
+    if (!data.namePin) {
+      Toast.show({
+        type: "error",
+        text1: "Nama pin harus diisi",
+      });
+      return;
+    }
+
+    newData = {
+      namePin: data?.namePin,
+      latitude: selectedLocation?.latitude || data?.latitude,
+      longitude: selectedLocation?.longitude || data?.longitude,
+    };
+
+    try {
+      setLoading(true);
+      if (image) {
+        const responseUpload = await uploadFileService({
+          dirId: DIRECTORY_ID.map_image,
+          imageUri: image?.uri,
+        });
+
+        if (!responseUpload?.data?.id) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const imageId = responseUpload?.data?.id;
+
+        newData = {
+          namePin: data?.namePin,
+          latitude: selectedLocation?.latitude,
+          longitude: selectedLocation?.longitude,
+          newImageId: imageId,
+        };
+      }
+
+      const responseUpdate = await apiMapsUpdate({
+        id: data?.id,
+        data: newData,
+      });
+
+      if (!responseUpdate.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate map",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Map berhasil diupdate",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        disabled={!data.namePin}
+        onPress={handleSubmit}
+        isLoading={isLoading}
+      >
+        Update
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      <View style={[styles.container, { height: 400 }]}>
+        <MapView
+          style={styles.map}
+          initialRegion={
+            data?.latitude && data?.longitude
+              ? {
+                  latitude: data?.latitude,
+                  longitude: data?.longitude,
+                  latitudeDelta: 0.1,
+                  longitudeDelta: 0.1,
+                }
+              : defaultRegion
+          }
+          onPress={handleMapPress}
+          showsUserLocation={true}
+          showsMyLocationButton={true}
+          loadingEnabled={true}
+          loadingIndicatorColor="#666"
+          loadingBackgroundColor="#f0f0f0"
+        >
+          {selectedLocation ? (
+            <Marker
+              coordinate={selectedLocation}
+              title="Lokasi Dipilih"
+              description={`Lat: ${selectedLocation.latitude.toFixed(
+                6
+              )}, Lng: ${selectedLocation.longitude.toFixed(6)}`}
+              pinColor="red"
+            />
+          ) : (
+            <Marker
+              coordinate={defaultRegion}
+              title="Lokasi Dipilih"
+              description={`Lat: ${defaultRegion.latitude.toFixed(
+                6
+              )}, Lng: ${defaultRegion.longitude.toFixed(6)}`}
+              pinColor="red"
+            />
+          )}
+        </MapView>
+      </View>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+        value={data?.namePin}
+        onChangeText={(value) => setData({ ...data, namePin: value })}
+      />
+
+      <Spacing />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+      <LandscapeFrameUploaded
+        image={
+          image
+            ? image?.uri
+            : API_IMAGE.GET({ fileId: data?.imageId as string })
+        }
+      />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => {
+          pickFile({
+            allowedType: "image",
+            setImageUri(file) {
+              setImage(file);
+            },
+          });
+        }}
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing height={50} />
+    </ViewWrapper>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    backgroundColor: "#f5f5f5",
+    overflow: "hidden",
+    borderRadius: 8,
+    marginBottom: 20,
+  },
+  map: {
+    flex: 1,
+  },
+});

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

@@ -1,9 +1,143 @@
-import Maps_ScreenMapsCreate from "@/screens/Maps/ScreenMapsCreate";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import MapSelected from "@/components/Map/MapSelected";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiMapsCreate } from "@/service/api-client/api-maps";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { LatLng } from "react-native-maps";
+import Toast from "react-native-toast-message";
 
 export default function MapsCreate() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
+  const [name, setName] = useState<string>("");
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      let newData: any;
+      newData = {
+        authorId: user?.id,
+        portofolioId: id,
+        namePin: name,
+        latitude: selectedLocation?.latitude,
+        longitude: selectedLocation?.longitude,
+      };
+
+      if (image) {
+        const responseUpload = await uploadFileService({
+          dirId: DIRECTORY_ID.map_image,
+          imageUri: image?.uri,
+        });
+
+        if (!responseUpload?.data?.id) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const imageId = responseUpload?.data?.id;
+
+        newData = {
+          authorId: user?.id,
+          portofolioId: id,
+          namePin: name,
+          latitude: selectedLocation?.latitude,
+          longitude: selectedLocation?.longitude,
+          imageId: imageId,
+        };
+      }
+
+      const response = await apiMapsCreate({
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambahkan map",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Map berhasil ditambahkan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const buttonFooter = (
+    <BoxButtonOnFooter>
+      <ButtonCustom
+        isLoading={isLoading}
+        disabled={!selectedLocation || name === ""}
+        onPress={handleSubmit}
+      >
+        Simpan
+      </ButtonCustom>
+    </BoxButtonOnFooter>
+  );
   return (
-    <>
-      <Maps_ScreenMapsCreate />
-    </>
+    <ViewWrapper footerComponent={buttonFooter}>
+      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
+
+      <BaseBox>
+        <MapSelected
+          selectedLocation={selectedLocation as any}
+          setSelectedLocation={setSelectedLocation}
+        />
+      </BaseBox>
+
+      <TextInputCustom
+        required
+        label="Nama Pin"
+        placeholder="Masukkan nama pin maps"
+        value={name}
+        onChangeText={setName}
+      />
+
+      <Spacing height={50} />
+
+      <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
+      <LandscapeFrameUploaded image={image?.uri} />
+      <ButtonCenteredOnly
+        icon="upload"
+        onPress={() => {
+          pickFile({
+            allowedType: "image",
+            setImageUri(file) {
+              setImage(file);
+            },
+          });
+        }}
+      >
+        Upload
+      </ButtonCenteredOnly>
+      <Spacing height={50} />
+    </ViewWrapper>
   );
 }

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

@@ -1,4 +1,6 @@
+import MapsView from "@/screens/Maps/MapsView";
 import MapsView2 from "@/screens/Maps/MapsView2";
+import { Text, View } from "react-native";
 
 export interface LocationItem {
   id: string | number;
@@ -11,14 +13,8 @@ export interface LocationItem {
 export default function Maps() {
   return (
     <>
-      {/* <Stack.Screen
-        options={{
-          title: "Maps",
-          headerLeft: () => <BackButton />,
-        }}
-        /> */}
-      {/* {Platform.OS === "ios" ? <MapsView /> : <MapsView2 />} */}
-      <MapsView2 />
+      <MapsView />
+      {/* <MapsView2 />, */}
       {/* <View style={{ flex: 1, backgroundColor: "gray" }}><Text style={{ color: "white" }}>Map disabled</Text></View> */}
     </>
   );

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

@@ -1,5 +1,364 @@
-import { ScreenPortofolioCreate } from "@/screens/Portofolio/ScreenPortofolioCreate";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  ActionIcon,
+  AvatarComp,
+  BaseBox,
+  ButtonCenteredOnly,
+  CenterCustom,
+  Grid,
+  InformationBox,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
+import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
+import {
+  apiMasterBidangBisnis,
+  apiMasterSubBidangBisnis,
+} from "@/service/api-client/api-master";
+import {
+  IMasterBidangBisnis,
+  IMasterSubBidangBisnis,
+} from "@/types/Type-Master";
+import pickImage from "@/utils/pickImage";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
+import { Avatar } from "react-native-paper";
 
 export default function PortofolioCreate() {
-  return <ScreenPortofolioCreate />;
+  const { id } = useLocalSearchParams();
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [inputValue, setInputValue] = useState<string>("");
+  const [data, setData] = useState({
+    namaBisnis: "",
+    masterBidangBisnisId: "",
+    alamatKantor: "",
+    tlpn: "",
+    deskripsi: "",
+  });
+  const [imageUri, setImageUri] = useState<string | null>(null);
+
+  const [bidangBisnis, setBidangBisnis] = useState<IMasterBidangBisnis[]>([]);
+  const [subBidangBisnis, setSubBidangBisnis] = useState<
+    IMasterSubBidangBisnis[]
+  >([]);
+
+  const [selectedSubBidang, setSelectedSubBidang] = useState<string[]>([]);
+  const [listSubBidangSelected, setListSubBidangSelected] = useState([
+    {
+      id: "",
+    },
+  ]);
+
+  const [dataMedsos, setDataMedsos] = useState({
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    youtube: "",
+    tiktok: "",
+  });
+
+  const [isLoadingCreate, setIsLoadingCreate] = useState(false);
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
+    const realNumber = callingCode + fixNumber;
+    setData({ ...data, tlpn: realNumber });
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadMaster();
+      onLoadMasterSubBidangBisnis();
+    }, [])
+  );
+
+  const onLoadMaster = async () => {
+    try {
+      const response = await apiMasterBidangBisnis();
+      setBidangBisnis(response.data);
+    } catch (error) {
+      setBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const onLoadMasterSubBidangBisnis = async () => {
+    try {
+      const response = await apiMasterSubBidangBisnis({});
+      setSubBidangBisnis(response.data);
+    } catch (error) {
+      setSubBidangBisnis([]);
+      console.log("Error onLoadMasterBidangBisnis", error);
+    }
+  };
+
+  const handlerSelectedSubBidang = ({ id }: { id: string }) => {
+    const selectedList = subBidangBisnis?.filter(
+      (item) => (item?.masterBidangBisnisId as any) === id
+    );
+    setSelectedSubBidang(selectedList as any[]);
+  };
+
+  return (
+    <ViewWrapper
+      footerComponent={
+        <Portofolio_ButtonCreate
+          id={id as string}
+          data={data}
+          dataMedsos={dataMedsos}
+          imageUri={imageUri}
+          subBidangSelected={listSubBidangSelected}
+          isLoadingCreate={isLoadingCreate}
+          setIsLoadingCreate={setIsLoadingCreate}
+        />
+      }
+    >
+      {/* <TextCustom>Portofolio Create {id}</TextCustom> */}
+      <StackCustom gap={"xs"}>
+        <InformationBox text="Lengkapi data bisnis anda." />
+        <TextInputCustom
+          required
+          label="Nama Bisnis"
+          placeholder="Masukkan nama bisnis"
+          onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
+        />
+
+        <SelectCustom
+          label="Bidang Usaha"
+          required
+          data={bidangBisnis.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          value={data.masterBidangBisnisId}
+          onChange={(value) => {
+            const isSameBidang = data.masterBidangBisnisId === value;
+
+            if (!isSameBidang) {
+              setListSubBidangSelected([{ id: "" }]);
+            }
+
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        />
+
+        {listSubBidangSelected.map((item, index) => (
+          <SelectCustom
+            key={index}
+            disabled={data.masterBidangBisnisId === ""}
+            label="Sub Bidang Usaha"
+            required
+            data={_.map(selectedSubBidang as any)
+              .filter((option: any) => {
+                const selectedValues = listSubBidangSelected.map((s) => s.id);
+                return (
+                  option.id === item.id || // biarkan tetap muncul kalau ini valuenya sendiri
+                  !selectedValues.includes(option.id)
+                );
+              })
+              .map((e: any) => ({
+                value: e.id,
+                label: e.name,
+              }))}
+            value={item.id || null}
+            onChange={(value) => {
+              const list = _.clone(listSubBidangSelected);
+              list[index].id = value as any;
+              setListSubBidangSelected(list);
+            }}
+          />
+        ))}
+
+        <CenterCustom>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+            <ActionIcon
+              disabled={
+                selectedSubBidang.length === listSubBidangSelected.length
+              }
+              onPress={() => {
+                setListSubBidangSelected([
+                  ...listSubBidangSelected,
+                  { id: "" },
+                ]);
+              }}
+              icon={
+                <Ionicons
+                  name="add-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+            <ActionIcon
+              disabled={listSubBidangSelected.length <= 1}
+              onPress={() => {
+                const list = _.clone(listSubBidangSelected);
+                list.pop();
+                setListSubBidangSelected(list);
+              }}
+              icon={
+                <Ionicons
+                  name="remove-circle-outline"
+                  size={ICON_SIZE_XLARGE}
+                  color={MainColor.black}
+                />
+              }
+              size="xl"
+            />
+          </View>
+        </CenterCustom>
+        <Spacing />
+
+        {/* <SelectCustom
+          label="Bidang Usaha"
+          required
+          data={bidangBisnis.map((item) => ({
+            label: item.name,
+            value: item.id,
+          }))}
+          value={null}
+          onChange={(value) => {
+            setData({ ...(data as any), masterBidangBisnisId: value });
+            handlerSelectedSubBidang({ id: value as string });
+          }}
+        /> */}
+
+        {/* <ButtonCenteredOnly
+          onPress={() => {
+            setListSubBidangSelected([...listSubBidangSelected, { id: "" }]);
+          }}
+        >
+          Tambah Pilihan
+        </ButtonCenteredOnly>
+        <Spacing /> */}
+
+        {/* <TextCustom>{JSON.stringify(bidangBisnis, null, 2)}</TextCustom> */}
+
+        <View>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <TextCustom semiBold style={{ color: MainColor.white_gray }}>
+              Nomor Telepon
+            </TextCustom>
+            <Text style={{ color: "red" }}> *</Text>
+          </View>
+          <Spacing height={5} />
+          <PhoneInput
+            value={inputValue}
+            onChangePhoneNumber={handleInputValue}
+            selectedCountry={selectedCountry}
+            onChangeSelectedCountry={handleSelectedCountry}
+            defaultCountry="ID"
+            placeholder="xxx-xxx-xxx"
+          />
+        </View>
+        <Spacing />
+
+        <TextInputCustom
+          required
+          label="Alamat Bisnis"
+          placeholder="Masukkan alamat bisnis"
+          onChangeText={(value: any) =>
+            setData({ ...data, alamatKantor: value })
+          }
+        />
+
+        <TextAreaCustom
+          label="Deskripsi Bisnis"
+          placeholder="Masukkan deskripsi bisnis"
+          value={data.deskripsi}
+          onChangeText={(value: any) => setData({ ...data, deskripsi: value })}
+          autosize
+          minRows={2}
+          maxRows={5}
+          required
+          showCount
+          maxLength={1000}
+        />
+        <Spacing />
+
+        {/* Logo */}
+        <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
+
+        <CenterCustom>
+          <Avatar.Image
+            source={imageUri ? { uri: imageUri } : DUMMY_IMAGE.dummy_image}
+            size={200}
+          />
+        </CenterCustom>
+        <Spacing />
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => {
+            pickImage({
+              setImageUri,
+            });
+          }}
+        >
+          Upload
+        </ButtonCenteredOnly>
+        <Spacing height={40} />
+
+        {/* Social Media */}
+        <InformationBox text="Isi hanya pada sosial media yang anda miliki." />
+        <TextInputCustom
+          label="Tiktok"
+          placeholder="Masukkan username tiktok"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, tiktok: value })
+          }
+        />
+        <TextInputCustom
+          label="Facebook"
+          placeholder="Masukkan username facebook"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, facebook: value })
+          }
+        />
+        <TextInputCustom
+          label="Instagram"
+          placeholder="Masukkan username instagram"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, instagram: value })
+          }
+        />
+        <TextInputCustom
+          label="Twitter"
+          placeholder="Masukkan username twitter"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, twitter: value })
+          }
+        />
+        <TextInputCustom
+          label="Youtube"
+          placeholder="Masukkan username youtube"
+          onChangeText={(value: any) =>
+            setDataMedsos({ ...dataMedsos, youtube: value })
+          }
+        />
+        <Spacing />
+      </StackCustom>
+    </ViewWrapper>
+  );
 }

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

@@ -4,19 +4,16 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  NewWrapper,
-  PhoneInputCustom,
   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 { DEFAULT_COUNTRY, type CountryData, COUNTRIES } from "@/constants/countries";
 import {
   apiMasterBidangBisnis,
   apiMasterSubBidangBisnis,
@@ -34,6 +31,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import { ActivityIndicator } from "react-native-paper";
 import Toast from "react-native-toast-message";
 
@@ -60,8 +58,8 @@ export default function PortofolioEdit() {
   const { id } = useLocalSearchParams();
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>({});
-  const [phoneNumber, setPhoneNumber] = useState<string>("");
-  const [selectedCountry, setSelectedCountry] = useState<CountryData>(DEFAULT_COUNTRY);
+
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [bidangBisnis, setBidangBisnis] = useState<
     IMasterBidangBisnis[] | null
   >(null);
@@ -73,42 +71,12 @@ export default function PortofolioEdit() {
     IListSubBidangSelected[]
   >([]);
 
-  function handlePhoneChange(phone: string) {
-    setPhoneNumber(phone);
-    
-    // Format phone number for API
-    const callingCode = selectedCountry.callingCode;
-    let fixNumber = phone.replace(/\s+/g, "").replace(/^0+/, "");
-    
-    // Remove country code if already present
-    if (fixNumber.startsWith(callingCode)) {
-      fixNumber = fixNumber.substring(callingCode.length);
-    }
-    
-    // Remove leading zero
-    fixNumber = fixNumber.replace(/^0+/, "");
-    
-    const realNumber = callingCode + fixNumber;
-    setData({ ...data, tlpn: realNumber });
+  function handleInputValue(phoneNumber: string) {
+    setData({ ...data, tlpn: phoneNumber });
   }
 
-  function handleCountryChange(country: CountryData) {
+  function handleSelectedCountry(country: ICountry) {
     setSelectedCountry(country);
-    
-    // Re-format with new country code
-    const callingCode = country.callingCode;
-    let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
-    
-    // Remove country code if already present
-    if (fixNumber.startsWith(callingCode)) {
-      fixNumber = fixNumber.substring(callingCode.length);
-    }
-    
-    // Remove leading zero
-    fixNumber = fixNumber.replace(/^0+/, "");
-    
-    const realNumber = callingCode + fixNumber;
-    setData({ ...data, tlpn: realNumber });
   }
 
   const onLoadMasterBidang = async () => {
@@ -153,27 +121,8 @@ export default function PortofolioEdit() {
     const response = await apiGetOnePortofolio({ id: id });
 
     if (response.success) {
-      // Extract phone number without country code for display
-      const fullNumber = response.data.tlpn;
-      let displayNumber = fullNumber;
-      let detectedCountry = DEFAULT_COUNTRY;
-      
-      // Try to detect country from calling code
-      for (const country of COUNTRIES) {
-        if (fullNumber.startsWith(country.callingCode)) {
-          detectedCountry = country;
-          displayNumber = fullNumber.substring(country.callingCode.length);
-          break;
-        }
-      }
-      
-      setSelectedCountry(detectedCountry);
-      
-      // Remove leading zero if present
-      displayNumber = displayNumber.replace(/^0+/, "");
-      
-      setPhoneNumber(displayNumber);
-      setData({ ...response.data, tlpn: displayNumber });
+      const fixNumber = response.data.tlpn.replace("62", "");
+      setData({ ...response.data, tlpn: fixNumber });
 
       // Cek apakah ada sub bidang bisnis yang terpilih
       const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
@@ -289,16 +238,20 @@ export default function PortofolioEdit() {
     return !dataArray.some(
       (item: any) =>
         !item.MasterSubBidangBisnis.id ||
-        item.MasterSubBidangBisnis.id.trim() === "",
+        item.MasterSubBidangBisnis.id.trim() === ""
     );
   }
 
   const handleSubmitUpdate = async () => {
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    let fixNumber = data.tlpn.replace(/\s+/g, "").replace(/^0+/, "");
+    const realNumber = callingCode + fixNumber;
+
     const newData: IFormData = {
       id_Portofolio: data.id_Portofolio,
       namaBisnis: data.namaBisnis,
       alamatKantor: data.alamatKantor,
-      tlpn: data.tlpn, // Already formatted by PhoneInputCustom
+      tlpn: realNumber,
       deskripsi: data.deskripsi,
       masterBidangBisnisId: data.masterBidangBisnisId,
       subBidang: listSubBidangSelected,
@@ -366,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
@@ -481,11 +434,12 @@ export default function PortofolioEdit() {
               <Text style={{ color: "red" }}> *</Text>
             </View>
             <Spacing height={5} />
-            <PhoneInputCustom
-              value={phoneNumber}
-              onChangePhoneNumber={handlePhoneChange}
+            <PhoneInput
+              value={data.tlpn}
+              onChangePhoneNumber={handleInputValue}
               selectedCountry={selectedCountry}
-              onChangeCountry={handleCountryChange}
+              onChangeSelectedCountry={handleSelectedCountry}
+              defaultCountry="ID"
               placeholder="xxx-xxx-xxx"
             />
           </View>
@@ -517,7 +471,7 @@ export default function PortofolioEdit() {
           />
           <Spacing />
         </StackCustom>
-      </NewWrapper>
+      </ViewWrapper>
     </>
   );
 }

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

@@ -8,10 +8,8 @@ import {
   StackCustom,
   TextCustom,
 } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -51,7 +49,7 @@ export default function Portofolio() {
     useCallback(() => {
       onLoadData(id as string);
       onLoadUserByToken();
-    }, [id]),
+    }, [id])
   );
 
   async function onLoadData(id: string) {
@@ -66,52 +64,41 @@ export default function Portofolio() {
     setProfileId(response?.data?.Profile?.id);
   };
 
-
-
   return (
     <>
       {/* Header */}
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Portofolio"
-              left={<LeftButtonCustom />}
-              right={
-                data?.Profile?.id !== profileId ? null : (
-                  <TouchableOpacity onPress={openDrawer}>
-                    <Ionicons
-                      name="ellipsis-vertical"
-                      size={20}
-                      color={MainColor.yellow}
-                    />
-                  </TouchableOpacity>
-                )
-              }
-            />
-          ),
+          title: "Portofolio",
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () =>
+            data?.Profile?.id !== profileId ? null : (
+              <TouchableOpacity onPress={openDrawer}>
+                <Ionicons
+                  name="ellipsis-vertical"
+                  size={20}
+                  color={MainColor.yellow}
+                />
+              </TouchableOpacity>
+            ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
         }}
       />
       <ViewWrapper>
         {!data || !profileId ? (
-            <StackCustom>
-            <CustomSkeleton height={400} />
-            <CustomSkeleton height={300} />
-          </StackCustom>
+          <LoaderCustom />
         ) : (
           <StackCustom>
             <Portofolio_Data
               data={data}
               listSubBidang={data?.Portofolio_BidangDanSubBidangBisnis as any[]}
             />
-            {data?.BusinessMaps && (
-              <Portofolio_BusinessLocation
-                data={data?.BusinessMaps}
-                imageId={data?.logoId}
-                setOpenDrawerLocation={setOpenDrawerLocation}
-              />
-            )}
-
+            <Portofolio_BusinessLocation
+              data={data?.BusinessMaps}
+              imageId={data?.logoId}
+              setOpenDrawerLocation={setOpenDrawerLocation}
+            />
             <Portofolio_SocialMediaSection
               data={data?.Portofolio_MediaSosial}
             />
@@ -148,38 +135,36 @@ export default function Portofolio() {
         closeDrawer={() => setOpenDrawerLocation(false)}
         height={"auto"}
       >
-        {data?.BusinessMaps?.imageId && (
-          <DummyLandscapeImage
-            height={200}
-            imageId={data?.BusinessMaps?.imageId}
-          />
-        )}
+        <DummyLandscapeImage
+          height={200}
+          imageId={data?.BusinessMaps?.imageId}
+        />
         <Spacing />
         <StackCustom gap={"xs"}>
           <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>
             }
           />
@@ -187,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)/portofolio/_layout.tsx

@@ -1,5 +1,5 @@
-import AppHeader from "@/components/_ShareComponent/AppHeader";
 import LeftButtonCustom from "@/components/Button/BackButton";
+import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function PortofolioLayout() {
@@ -7,9 +7,8 @@ export default function PortofolioLayout() {
     <>
       <Stack
         screenOptions={{
-          header: () => (
-            <AppHeader title="Portofolio" left={<LeftButtonCustom />} />
-          ),
+          ...HeaderStyles,
+          headerLeft: () => <LeftButtonCustom />,
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}

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

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { NewWrapper, StackCustom } from "@/components";
-import AppHeader from "@/components/_ShareComponent/AppHeader";
-import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
+import { LoaderCustom } from "@/components";
+import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -17,8 +16,8 @@ import { GStyles } from "@/styles/global-styles";
 import { IProfile } from "@/types/Type-Profile";
 import { Ionicons } from "@expo/vector-icons";
 import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useCallback, useState } from "react";
-import { RefreshControl, TouchableOpacity } from "react-native";
+import React, { useCallback, useState } from "react";
+import { TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
@@ -26,7 +25,6 @@ export default function Profile() {
   const [data, setData] = useState<IProfile>();
   const [dataToken, setDataToken] = useState<IProfile>();
   const [listPortofolio, setListPortofolio] = useState<any[]>();
-  const [refreshing, setRefreshing] = useState(false);
 
   const { token, logout, isAdmin, user, userData } = useAuth();
 
@@ -45,7 +43,7 @@ export default function Profile() {
       onLoadUserByToken();
       isUserCheck();
       userData(token as string);
-    }, [id, token]),
+    }, [id, token])
   );
 
   const isUserCheck = () => {
@@ -56,21 +54,13 @@ export default function Profile() {
   };
 
   const onLoadData = async (id: string) => {
-    try {
-      const response = await apiProfile({ id: id });
-      setData(response.data);
-    } catch (error) {
-      console.log("[ERROR onLoadData]", error);
-    }
+    const response = await apiProfile({ id: id });
+    setData(response.data);
   };
 
   const onLoadUserByToken = async () => {
-    try {
-      const response = await apiUser(user?.id as string);
-      setDataToken(response?.data?.Profile);
-    } catch (error) {
-      console.log("[ERROR onLoadUserByToken]", error);
-    }
+    const response = await apiUser(user?.id as string);
+    setDataToken(response?.data?.Profile);
   };
 
   const onLoadPortofolio = async (id: string) => {
@@ -79,61 +69,37 @@ export default function Profile() {
       const lastTwoByDate = response.data
         .sort(
           (a: any, b: any) =>
-            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
         ) // urut desc
         .slice(0, 2);
       setListPortofolio(lastTwoByDate);
     } catch (error) {
-      console.log("[ERROR onLoadPortofolio]", error);
+      console.log("[ERROR]", error);
     }
   };
 
-  const onRefresh = useCallback(() => {
-    setRefreshing(true);
-    onLoadData(id as string);
-    onLoadPortofolio(id as string);
-    onLoadUserByToken();
-    isUserCheck();
-    userData(token as string);
-    setRefreshing(false);
-  }, [id, token]);
-
   return (
     <>
       <Stack.Screen
         options={{
-          header: () => (
-            <AppHeader
-              title="Profile"
-              left={<LeftButtonCustom />}
-              right={
-                <ButtonnDot
-                  id={id as string}
-                  openDrawer={openDrawer}
-                  isUserCheck={isUserCheck()}
-                  logout={logout}
-                />
-              }
+          title: `Profile`,
+          headerLeft: () => <LeftButtonCustom />,
+          headerRight: () => (
+            <ButtonnDot
+              id={id as string}
+              openDrawer={openDrawer}
+              isUserCheck={isUserCheck()}
+              logout={logout}
             />
           ),
+          headerStyle: GStyles.headerStyle,
+          headerTitleStyle: GStyles.headerTitleStyle,
         }}
       />
       {/* Main View */}
-      <NewWrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={MainColor.yellow}
-            colors={[MainColor.yellow]}
-          />
-        }
-      >
+      <ViewWrapper>
         {!data || !dataToken ? (
-          <StackCustom>
-            <CustomSkeleton height={400} />
-            <CustomSkeleton height={200} />
-          </StackCustom>
+          <LoaderCustom />
         ) : (
           <>
             <ProfileSection data={data as any} />
@@ -144,7 +110,7 @@ export default function Profile() {
             />
           </>
         )}
-      </NewWrapper>
+      </ViewWrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
@@ -173,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 (