feat: Migrate Portfolio & Maps screens + perbaiki bug auto-scroll keyboard

Phase 3 - Portfolio Screens (6 files):
- [id]/index.tsx: ViewWrapper → OS_Wrapper (detail dengan pull-to-refresh)
- [id]/edit.tsx: NewWrapper → OS_Wrapper (form + keyboard handling)
- [id]/edit-logo.tsx: ViewWrapper → OS_Wrapper (upload logo)
- [id]/edit-social-media.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)
- ViewListPortofolio.tsx: NewWrapper → OS_Wrapper (pagination list)
- ScreenPortofolioCreate.tsx: NewWrapper → OS_Wrapper (form + keyboard handling)

Phase 4 - Maps Screens (2 files):
- ScreenMapsCreate.tsx: NewWrapper → OS_Wrapper (form + keyboard handling)
- ScreenMapsEdit.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)

Bug Fixes:
- Perbaiki auto-scroll keyboard yang membuat input paling atas 'terlempar' keluar layar
- Gunakan UIManager.measure untuk mendapatkan posisi absolut input (pageY) secara akurat
- Logika conditional scroll:
  * Jika input terlihat (di atas keyboard) → TIDAK SCROLL
  * Jika input tertutup keyboard → Scroll secukupnya
- Helper cloneChildrenWithFocusHandler sekarang aktif menyuntikan onFocus handler ke semua TextInput/TextArea/PhoneInput/Select
- Hapus KeyboardAvoidingView dari AndroidWrapper static mode (tidak diperlukan lagi)

Pattern yang diterapkan:
- List screens: contentPaddingBottom=100 (default)
- Form screens: contentPaddingBottom={250} + enableKeyboardHandling
- NO PADDING_INLINE (sesuai preferensi user - mencegah box menyempit)

Dokumentasi:
- Update TASK-005 dengan status lengkap Phase 1-4 (27 files migrated)
- Tambahkan urutan phase baru: Event (Phase 5), Voting (Phase 6), Forum (Phase 7), Donation (Phase 8)

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

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

.gitignore

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

.qwen/settings.json

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

.qwen/settings.json.orig

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

QWEN.md

@@ -2,53 +2,68 @@
 
 ## 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.
+HIPMI Mobile is a cross-platform mobile application built with Expo and React Native. The application is named **"HIPMI Badung Connect"** and serves as a platform for the HIPMI (Himpunan Pengusaha dan Pengusaha Indonesia) Badung chapter. It's designed to run on iOS, Android, and web platforms using a single codebase.
 
 ### Key Technologies
-- **Framework**: Expo (v54.0.0) with React Native (v0.81.4)
+- **Framework**: Expo (v54.0.0) with React Native (v0.81.5)
 - **Language**: TypeScript
 - **Architecture**: File-based routing with Expo Router
-- **State Management**: Context API
+- **State Management**: Context API (AuthContext)
 - **UI Components**: React Native Paper, custom components
-- **Maps Integration**: Mapbox Maps for React Native
+- **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
+├── 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
-│   ├── Collaboration/      # Collaboration features
-│   ├── Event/              # Event management
-│   ├── Forum/              # Forum functionality
-│   ├── Home/               # Home screen
-│   ├── Maps/               # Map integration
-│   ├── Profile/            # User profile
+│   ├── RootLayout/         # Root layout components
 │   └── ...
-├── assets/                 # Images, icons, and static assets
-├── constants/              # Constants and configuration values
-├── hooks/                  # Custom React hooks
-├── lib/                    # Utility libraries
-├── navigation/             # Navigation configuration
 ├── 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/                  # Helper functions
+├── 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 (with bun as the package manager)
-- Expo CLI
-- iOS Simulator or Android Emulator (for native builds)
+- **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
 
@@ -60,110 +75,468 @@ hipmi-mobile/
 2. **Run Development Server**
    ```bash
    bun run start
-   ```
-   Or use the shorthand:
-   ```bash
+   # or
    bunx expo start
    ```
 
 3. **Platform-Specific Commands**
-   - iOS: `bun run ios` or `bunx expo start --ios`
-   - Android: `bun run android` or `bunx expo start --android`
-   - Web: `bun run web` or `bunx expo start --web`
+   ```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
    ```
 
-### Environment Variables
-The application uses environment variables defined in the app.config.js file:
-- `API_BASE_URL`: Base URL for API endpoints
-- `BASE_URL`: Base application URL
-- `DEEP_LINK_URL`: URL for deep linking functionality
+### Build Commands
 
-### EAS Build Configuration
-The project uses Expo Application Services (EAS) for building and deploying:
-- Development builds with development client
-- Preview builds for internal distribution
-- Production builds for app stores
+#### EAS Build (Production)
+```bash
+# Production build (App Store / Play Store)
+eas build --profile production
 
-## Features and Functionality
+# Preview build (Internal distribution)
+eas build --profile preview
 
-The application appears to include several key modules:
-- **Authentication**: Login, registration, and verification flows
-- **Admin Panel**: Administrative functions
-- **Collaboration**: Tools for member collaboration
-- **Events**: Event management and calendar
-- **Forum**: Discussion forums
-- **Maps**: Location-based services with Mapbox integration
-- **Donations**: Donation functionality
-- **Job Board**: Employment opportunities
-- **Investment**: Investment-related features
-- **Voting**: Voting systems
-- **Portfolio**: Member portfolio showcase
-- **Notifications**: Push notifications via Firebase
+# 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 is used throughout the project for type safety
-- Component-based architecture with reusable components
-- Context API for state management
-- File-based routing with Expo Router
-- Consistent naming conventions using camelCase for variables and PascalCase for components
+- **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 is configured with ESLint
-- Standard Expo linting configuration is used
+- Linting: `bun run lint`
+- No formal test suite configured yet
 
-### Security
-- Firebase is integrated for authentication and messaging
-- Camera and location permissions are properly configured
-- Deep linking is secured with app domain associations
+### Git Workflow
+- Feature branches: `feature/xxx` or `fixed-admin/xxx`
+- Commit messages: Clear and descriptive
+- Use CHANGE_LOG.md for tracking changes
 
-## Key Dependencies
+## Key Features
 
-### Core Dependencies
-- `@react-navigation/*`: Navigation solution for React Native
-- `@react-native-firebase/*`: Firebase integration for React Native
-- `@rnmapbox/maps`: Mapbox integration for React Native
-- `expo-router`: File-based routing for Expo applications
-- `react-native-paper`: Material Design components for React Native
-- `react-native-toast-message`: Toast notifications
-- `react-native-otp-entry`: OTP input components
-- `react-native-qrcode-svg`: QR code generation
+### Authentication
+- Phone number login with OTP
+- User registration
+- Terms & Conditions acceptance
+- Session persistence with AsyncStorage
 
-### Development Dependencies
-- `@types/*`: TypeScript type definitions
-- `eslint-config-expo`: Expo-specific ESLint configuration
-- `typescript`: Type checking
+### 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
 
-## Platform Support
+### User Module
+- **Home**: Main dashboard
+- **Forum**: Discussion forums
+- **Profile**: User profile management
+- **Portfolio**: Member portfolio
+- **Notifications**: Push notifications via Firebase
 
-The application is configured to support:
-- **iOS**: With tablet support and proper permissions
-- **Android**: With adaptive icons and intent filters for deep linking
-- **Web**: Static output configuration for web deployment
+## API Configuration
 
-## Special Configurations
+### 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
+```
 
-### iOS Configuration
-- Bundle identifier: `com.anonymous.hipmi-mobile`
-- Supports tablets
-- Google Services integration
-- Location permission handling
-- Associated domains for deep linking
+### 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;
+});
+```
 
-### Android Configuration
-- Package name: `com.bip.hipmimobileapp`
-- Adaptive icons
-- Edge-to-edge display enabled
-- Intent filters for HTTPS deep linking
-- Google Services integration
+## Platform Configuration
 
-### Maps Integration
-The application uses Mapbox for mapping functionality with the `@rnmapbox/maps` plugin.
+### 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
 
-### Push Notifications
-Firebase Cloud Messaging is integrated for push notifications with proper configuration for both iOS and Android platforms.
+### 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)
+
+## Qwen Added Memories
+- OS_Wrapper contentPaddingBottom pattern:
+- Default: contentPaddingBottom=100 (untuk list screens)
+- Forms: contentPaddingBottom=250 (HANYA untuk screens yang punya TextInput/TextArea)
+- contentPadding=0 (default, per-screen control)
+- OS_ANDROID_PADDING_TOP=6 (compact tabs)
+- OS_IOS_PADDING_TOP=12
+- PADDING_INLINE=16 (constant)
+
+Contoh:
+```tsx
+// List screen (default 100px)
+<OS_Wrapper listData={data} renderItem={renderItem} />
+
+// Form screen (explicit 250px)
+<OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
+  <FormWithTextInput />
+</OS_Wrapper>
+```
+- PADDING_INLINE usage pattern - User preference:
+- PADDING_INLINE (16px) TIDAK selalu diperlukan
+- User remove PADDING_INLINE dari Profile screens karena mempersempit box tampilan
+- Decision: Tambahkan PADDING_INLINE HANYA jika diperlukan per-screen, jangan default
+- User akan review dan tambahkan sendiri jika perlu
+
+Profile screens: PADDING_INLINE dihapus dari edit.tsx dan create.tsx

android/app/build.gradle

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

android/app/src/debugOptimized/AndroidManifest.xml

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

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

android/build.gradle

@@ -6,32 +6,17 @@ buildscript {
     mavenCentral()
   }
   dependencies {
-    classpath 'com.google.gms:google-services:4.4.1'
+        classpath 'com.google.gms:google-services:4.4.1'
     classpath('com.android.tools.build:gradle')
     classpath('com.facebook.react:react-native-gradle-plugin')
     classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
   }
 }
 
-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) }
@@ -41,7 +26,11 @@ allprojects {
         }
       }
     }
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
   }
 }
 
-// @generated end @rnmapbox/maps-v2-maven
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

app.config.js

@@ -1,10 +1,21 @@
 // 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.1",
+  version: "1.0.2",
   orientation: "portrait",
   icon: "./assets/images/icon.png",
   scheme: "hipmimobile",
@@ -14,25 +25,27 @@ export default {
   ios: {
     supportsTablet: true,
     bundleIdentifier: "com.anonymous.hipmi-mobile",
-    googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
+    googleServicesFile: "./secrets/GoogleService-Info.plist",
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
       NSLocationWhenInUseUsageDescription:
         "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
-    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
-    buildNumber: "20",
+    associatedDomains: [
+      "applinks:hipmi.muku.id",
+    ],
+    buildNumber: "7",
   },
 
   android: {
-    googleServicesFile: "./google-services.json",
+    googleServicesFile: "./secrets/google-services.json",
     adaptiveIcon: {
       foregroundImage: "./assets/images/splash-icon.png",
       backgroundColor: "#ffffff",
     },
     edgeToEdgeEnabled: true,
     package: "com.bip.hipmimobileapp",
-    versionCode: 4,
+    versionCode: 5,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
     intentFilters: [
       {
@@ -41,7 +54,7 @@ export default {
         data: [
           {
             scheme: "https",
-            host: "cld-dkr-staging-hipmi.wibudev.com",
+            host: "hipmi.muku.id",
             pathPrefix: "/",
           },
         ],
@@ -57,6 +70,7 @@ export default {
   },
 
   plugins: [
+    "./plugins/withCustomConfig",
     "expo-router",
     "expo-web-browser",
     [
@@ -77,7 +91,6 @@ export default {
       },
     ],
     "expo-font",
-    "@rnmapbox/maps",
     "@react-native-firebase/app",
     [
       "expo-notifications",
@@ -87,6 +100,7 @@ export default {
         iosDisplayInForeground: true,
       },
     ],
+    "@maplibre/maplibre-react-native",
   ],
 
   experiments: {

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

@@ -1,4 +1,5 @@
 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";
@@ -7,13 +8,12 @@ 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={{
-          title: "File",
-          headerLeft: () => <BackButton />,
+          header: () => <AppHeader title="File" left={<BackButton />} />,
         }}
       />
       <SafeAreaView style={{ flex: 1 }} edges={["bottom"]}>

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

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

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

@@ -1,29 +1,27 @@
 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 screenOptions={HeaderStyles}>
+      <Stack>
         <Stack.Screen
           name="delete-account"
           options={{
-            title: "Hapus Akun",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Hapus Akun" />,
           }}
         />
         <Stack.Screen
           name="waiting-room"
           options={{
-            title: "Waiting Room",
-            headerBackVisible: false,
+            header: () => <AppHeader title="Waiting Room" />,
           }}
         />
 
@@ -47,8 +45,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="user-search/index"
           options={{
-            title: "Pencarian Pengguna",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pencarian Pengguna" />,
           }}
         />
 
@@ -71,10 +68,18 @@ export default function UserLayout() {
 
         {/* ========== 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" />
@@ -85,32 +90,28 @@ export default function UserLayout() {
         <Stack.Screen
           name="event/create"
           options={{
-            title: "Tambah Event",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Event" />,
           }}
         />
 
         <Stack.Screen
           name="event/detail/[id]"
           options={{
-            title: "Event Detail",
-            headerLeft: () => <LeftButtonCustom />,
+            header: () => <AppHeader title="Event Detail" left={<LeftButtonCustom />} />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/edit"
           options={{
-            title: "Edit Event",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Event" />,
           }}
         />
 
         <Stack.Screen
           name="event/[id]/list-of-participants"
           options={{
-            title: "Daftar peserta",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar peserta" />,
           }}
         />
         {/* ========== End Event Section ========= */}
@@ -119,22 +120,19 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/(tabs)"
           options={{
-            title: "Collaboration",
-            headerLeft: () => <BackButton path="/home" />,
+            header: () => <AppHeader title="Collaboration" left={<BackButton path="/home" />} />,
           }}
         />
         <Stack.Screen
           name="collaboration/create"
           options={{
-            title: "Tambah Proyek",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Proyek" />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/list-of-participants"
           options={{
-            title: "Daftar Partisipan",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Partisipan" />,
           }}
         />
         {/* <Stack.Screen
@@ -147,22 +145,19 @@ export default function UserLayout() {
         <Stack.Screen
           name="collaboration/[id]/edit"
           options={{
-            title: "Edit Proyek",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Proyek" />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/create-pacticipants"
           options={{
-            title: "Ajukan Partisipasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Ajukan Partisipasi" />,
           }}
         />
         <Stack.Screen
           name="collaboration/[id]/select-of-participants"
           options={{
-            title: "Pilih Partisipan",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pilih Partisipan" />,
           }}
         />
 
@@ -172,29 +167,25 @@ export default function UserLayout() {
         <Stack.Screen
           name="voting/create"
           options={{
-            title: "Tambah Voting",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Voting" />,
           }}
         />
         <Stack.Screen
           name="voting/(tabs)"
           options={{
-            title: "Voting",
-            headerLeft: () => <BackButton path="/home" />,
+            header: () => <AppHeader title="Voting" left={<BackButton path="/home" />} />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/edit"
           options={{
-            title: "Edit Voting",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Voting" />,
           }}
         />
         <Stack.Screen
           name="voting/[id]/list-of-contributor"
           options={{
-            title: "Daftar Kontributor",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Kontributor" />,
           }}
         />
 
@@ -204,8 +195,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="crowdfunding/index"
           options={{
-            title: "Crowdfunding",
-            headerLeft: () => <BackButton path="/home" />,
+            header: () => <AppHeader title="Crowdfunding" left={<BackButton path="/home" />} />,
           }}
         />
 
@@ -215,103 +205,95 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/(tabs)"
           options={{
-            title: "Investasi",
-            headerLeft: () => <BackButton path="/crowdfunding" />,
+            header: () => <AppHeader title="Investasi" left={<BackButton path="/crowdfunding" />} />,
           }}
         />
         <Stack.Screen
           name="investment/create"
           options={{
-            title: "Tambah Investasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Investasi" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/index"
           options={{
-            title: "Detail Investasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail Investasi" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/edit"
           options={{
-            title: "Edit Investasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Investasi" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/edit-prospectus"
           options={{
-            title: "Edit Prospektus",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Prospektus" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(document)/list-of-document"
           options={{
-            title: "Daftar Dokumen",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Dokumen" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/add-document"
           options={{
-            title: "Tambah Dokumen",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Dokumen" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(document)/edit-document"
           options={{
-            title: "Edit Dokumen",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Dokumen" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(news)/add-news"
           options={{
-            title: "Tambah Berita",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Berita" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/investor"
           options={{
-            title: "Investor",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Investor" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/index"
           options={{
-            title: "Pembelian Saham",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pembelian Saham" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/select-bank"
           options={{
-            title: "Pilih Bank",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pilih Bank" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/invoice"
           options={{
-            title: "Invoice",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() =>
-                  router.navigate(`/investment/(tabs)/transaction`)
+            header: () => (
+              <AppHeader
+                title="Invoice"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() =>
+                      router.navigate(`/investment/(tabs)/transaction`)
+                    }
+                  />
                 }
               />
             ),
@@ -320,14 +302,18 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/process"
           options={{
-            title: "Proses",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() =>
-                  router.navigate(`/investment/(tabs)/transaction`)
+            header: () => (
+              <AppHeader
+                title="Proses"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() =>
+                      router.navigate(`/investment/(tabs)/transaction`)
+                    }
+                  />
                 }
               />
             ),
@@ -336,23 +322,20 @@ export default function UserLayout() {
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/success"
           options={{
-            title: "Transaksi Berhasil",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Transaksi Berhasil" />,
           }}
         />
         <Stack.Screen
           name="investment/[id]/(transaction-flow)/failed"
           options={{
-            title: "Transaksi Gagal",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Transaksi Gagal" />,
           }}
         />
 
         <Stack.Screen
           name="investment/[id]/(my-holding)/[id]"
           options={{
-            title: "Detail Saham Saya",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail Saham Saya" />,
           }}
         />
         {/* ========== End Investment Section ========= */}
@@ -361,122 +344,111 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/(tabs)"
           options={{
-            title: "Donasi",
-            headerLeft: () => <BackButton path="/crowdfunding" />,
+            header: () => <AppHeader title="Donasi" left={<BackButton path="/crowdfunding" />} />,
           }}
         />
 
         <Stack.Screen
           name="donation/create"
           options={{
-            title: "Tambah Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/create-story"
           options={{
-            title: "Tambah Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Donasi" />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/edit"
           options={{
-            title: "Edit Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-story"
           options={{
-            title: "Edit Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/edit-rekening"
           options={{
-            title: "Edit Rekening",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Rekening" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/detail-story"
           options={{
-            title: "Cerita Penggalang",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Cerita Penggalang" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/infromation-fundrising"
           options={{
-            title: "Informasi Penggalang Dana",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Informasi Penggalang Dana" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/list-of-donatur"
           options={{
-            title: "Daftar Donatur",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Daftar Donatur" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/fund-disbursement"
           options={{
-            title: "Pencairan Dana",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pencairan Dana" />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(news)/recap-of-news"
           options={{
-            title: "Rekap Kabar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Rekap Kabar" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/add-news"
           options={{
-            title: "Tambah Berita",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Berita" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(news)/[news]/edit-news"
           options={{
-            title: "Edit Berita",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Berita" />,
           }}
         />
 
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/index"
           options={{
-            title: "Donasi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Donasi" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/select-bank"
           options={{
-            title: "Pilih Bank",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Pilih Bank" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/invoice"
           options={{
-            title: "Invoice",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+            header: () => (
+              <AppHeader
+                title="Invoice"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+                  />
+                }
               />
             ),
           }}
@@ -484,13 +456,17 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/process"
           options={{
-            title: "Proses",
-            headerLeft: () => (
-              <Ionicons
-                name="close"
-                size={ICON_SIZE_SMALL}
-                color={MainColor.yellow}
-                onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+            header: () => (
+              <AppHeader
+                title="Proses"
+                left={
+                  <Ionicons
+                    name="close"
+                    size={ICON_SIZE_SMALL}
+                    color={MainColor.yellow}
+                    onPress={() => router.navigate(`/donation/(tabs)/my-donation`)}
+                  />
+                }
               />
             ),
           }}
@@ -498,55 +474,51 @@ export default function UserLayout() {
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/success"
           options={{
-            title: "Donasi Berhasil",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Donasi Berhasil" />,
           }}
         />
         <Stack.Screen
           name="donation/[id]/(transaction-flow)/[invoiceId]/failed"
           options={{
-            title: "Donasi Gagal",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Donasi Gagal" />,
           }}
         />
 
         {/* ========== End Donation Section ========= */}
 
         {/* ========== Job Section ========= */}
+
+
         <Stack.Screen
           name="job/create"
           options={{
-            title: "Tambah Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Job" />,
           }}
         />
         <Stack.Screen
           name="job/(tabs)"
           options={{
             title: "Job Vacancy",
-            // headerLeft: () => <BackButton path="/home" />,
             // NOTE: headerLeft di pindahkan ke Tabs Layout
+            header: () => <AppHeader title="Job Vacancy" left={<BackButton path="/home" />} />,
           }}
         />
         <Stack.Screen
           name="job/[id]/index"
           options={{
-            title: "Detail Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail Job" />,
           }}
         />
         <Stack.Screen
           name="job/[id]/edit"
           options={{
-            title: "Edit Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Job" />,
           }}
         />
         <Stack.Screen
           name="job/[id]/archive"
           options={{
-            title: "Arsip Job",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Arsip Job" />,
           }}
         />
 
@@ -556,78 +528,67 @@ export default function UserLayout() {
         <Stack.Screen
           name="forum/create"
           options={{
-            title: "Tambah Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/edit"
           options={{
-            title: "Edit Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/forumku"
           options={{
-            title: "Forumku",
-            headerLeft: () => <BackButton icon={"close"} />,
+            header: () => <AppHeader title="Forumku" left={<BackButton icon={"close"} />} />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/index"
           options={{
-            title: "Detail",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Detail" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-commentar"
           options={{
-            title: "Laporkan Komentar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Komentar" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-commentar"
           options={{
-            title: "Laporkan Komentar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Komentar" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/report-posting"
           options={{
-            title: "Laporkan Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/other-report-posting"
           options={{
-            title: "Laporkan Diskusi",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporkan Diskusi" />,
           }}
         />
         <Stack.Screen
           name="forum/terms"
           options={{
-            title: "Syarat & Ketentuan Forum",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Syarat & Ketentuan Forum" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/preview-report-posting"
           options={{
-            title: "Laporan Postingan",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporan Postingan" />,
           }}
         />
         <Stack.Screen
           name="forum/[id]/preview-report-comment"
           options={{
-            title: "Laporan Komentar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Laporan Komentar" />,
           }}
         />
 
@@ -635,29 +596,25 @@ export default function UserLayout() {
         <Stack.Screen
           name="maps/index"
           options={{
-            title: "Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Maps" />,
           }}
         />
         <Stack.Screen
           name="maps/create"
           options={{
-            title: "Tambah Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Tambah Maps" />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/edit"
           options={{
-            title: "Edit Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Edit Maps" />,
           }}
         />
         <Stack.Screen
           name="maps/[id]/custom-pin"
           options={{
-            title: "Custom Pin Maps",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Custom Pin Maps" />,
           }}
         />
 
@@ -665,8 +622,7 @@ export default function UserLayout() {
         <Stack.Screen
           name="marketplace/index"
           options={{
-            title: "Market Place",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Market Place" />,
           }}
         />
       </Stack>

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

@@ -2,35 +2,64 @@ 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;
 
-export default function CollaborationTabsLayout() {
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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="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>
+      >
+        <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 />;
+}

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

@@ -10,6 +10,7 @@ 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";
@@ -40,8 +41,7 @@ export default function CollaborationRoomInfo() {
     <>
       <Stack.Screen
         options={{
-          title: `Info`,
-          headerLeft: () => <BackButton />,
+          header: () => <AppHeader title="Info" left={<BackButton />} />,
         }}
       />
 

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

@@ -1,4 +1,5 @@
 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";
@@ -12,14 +13,18 @@ export default function CollaborationRoomChat() {
     <>
       <Stack.Screen
         options={{
-          title: `Proyek ${detail}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <Feather
-              name="info"
-              size={ICON_SIZE_SMALL}
-              color={MainColor.yellow}
-              onPress={() => router.push(`/collaboration/${id}/${detail}/info`)}
+          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`)}
+                />
+              }
             />
           ),
         }}

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

@@ -6,6 +6,7 @@ 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";
@@ -38,10 +39,14 @@ export default function CollaborationDetailParticipant() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Proyek",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Proyek"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerParticipant(true)} />
+              }
+            />
           ),
         }}
       />

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

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

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

@@ -9,6 +9,7 @@ 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 {
@@ -74,10 +75,14 @@ export default function CollaborationDetail() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Proyek",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerMenu(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Proyek"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerMenu(true)} />
+              }
+            />
           ),
         }}
       />

app/(application)/(user)/delete-account.tsx

@@ -3,10 +3,10 @@ import {
   BaseBox,
   ButtonCustom,
   CenterCustom,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import { useAuth } from "@/hooks/use-auth";
 import { apiDeleteUser } from "@/service/api-client/api-user";
@@ -68,7 +68,10 @@ export default function DeleteAccount() {
 
   return (
     <>
-      <ViewWrapper>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+      >
         <StackCustom>
           <BaseBox>
             <StackCustom>
@@ -105,7 +108,7 @@ export default function DeleteAccount() {
             </StackCustom>
           </BaseBox>
         </StackCustom>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -5,33 +5,62 @@ 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 (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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="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>
+      >
+        <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>
   );
 }
+
+export default function DonationTabsLayout() {
+  return <DonationTabsWrapper />;
+}

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

@@ -11,6 +11,7 @@ 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";
@@ -57,12 +58,17 @@ export default function DonationNews() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Kabar",
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            user?.id === data?.authorId && (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ),
+          header: () => (
+            <AppHeader
+              title="Detail Kabar"
+              left={<BackButton />}
+              right={
+                user?.id === data?.authorId && (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                )
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -7,6 +7,7 @@ import {
   NewWrapper,
   Spacing,
 } 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";
@@ -97,14 +98,19 @@ export default function DonasiDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <NewWrapper

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

@@ -185,7 +185,6 @@ export default function DonationEdit() {
 
   return (
     <NewWrapper
-      hideFooter
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom

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

@@ -10,6 +10,7 @@ import {
   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";
@@ -90,12 +91,17 @@ export default function DonasiDetailBeranda() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail Donasi`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            user?.id === data?.Author?.id ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title="Detail Donasi"
+              left={<BackButton />}
+              right={
+                user?.id === data?.Author?.id ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <NewWrapper footerComponent={buttonSection}>

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

@@ -114,7 +114,6 @@ export default function DonationCreateStory() {
 
   return (
     <NewWrapper
-      hideFooter
       footerComponent={
         <>
          <BoxButtonOnFooter>

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

@@ -127,7 +127,6 @@ export default function DonationCreate() {
 
   return (
     <NewWrapper
-      hideFooter
       footerComponent={
         <>
           <BoxButtonOnFooter>

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

@@ -4,64 +4,87 @@ 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, useNavigation } from "expo-router";
-import { useLayoutEffect } from "react";
-
-export default function EventTabsLayout() {
-  const navigation = useNavigation();
+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;
   }>();
 
-  console.log("from", from);
-  console.log("category", category);
-
-  // Atur header secara dinamis
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => (
-        <BackButtonFromNotification
-          from={from as string}
-          category={category as string}
-        />
-      ),
-    });
-  }, [from, router, navigation]);
-
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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="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>
+      >
+        <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>
   );
 }
+
+export default function EventTabsLayout() {
+  return <EventTabsWrapper />;
+}

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

@@ -10,6 +10,7 @@ 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";
@@ -81,12 +82,17 @@ export default function EventDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${status === "publish" ? "" : status}`,
-          headerLeft: () => <LeftButtonCustom />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${status === "publish" ? "" : status}`}
+              left={<LeftButtonCustom />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

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

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

@@ -6,6 +6,7 @@ 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";
@@ -44,9 +45,13 @@ export default function EventDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail riwayat`,
-          headerLeft: () => <LeftButtonCustom />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          header: () => (
+            <AppHeader
+              title="Detail riwayat"
+              left={<LeftButtonCustom />}
+              right={<DotButton onPress={() => setOpenDrawer(true)} />}
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -8,6 +8,7 @@ import {
   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";
@@ -156,9 +157,13 @@ export default function EventDetailPublish() {
     <>
       <Stack.Screen
         options={{
-          title: `Event Publish`,
-          headerLeft: () => <BackButton onPress={() => router.back()} />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          header: () => (
+            <AppHeader
+              title="Event Publish"
+              left={<BackButton onPress={() => router.back()} />}
+              right={<DotButton onPress={() => setOpenDrawer(true)} />}
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -1,66 +1,97 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BasicWrapper, StackCustom, ViewWrapper } from "@/components";
+import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 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 } from "react-native";
+import { RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Platform } 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;
 
   useFocusEffect(
     useCallback(() => {
       onLoadData();
+      onLoadDataJob();
       checkVersion();
-      userData(token as string);
+      userData(token as string).catch((error) => {
+        console.log("[ERROR userData]", error?.message);
+        console.log("[ERROR userData Response]", error?.response?.data);
+      });
       syncUnreadCount();
     }, [user?.id, token]),
   );
 
   async function onLoadData() {
-    const response = await apiUser(user?.id as string);
-    console.log(
-      "[Profile ID]>>",
-      JSON.stringify(response?.data?.Profile?.id, null, 2),
-    );
-
-    setData(response.data);
+    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 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 () => {
-    const response = await apiVersion();
-    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
+    try {
+      const response = await apiVersion();
+      console.log("[Version] >>", JSON.stringify(response.data, null, 2));
+    } catch (error: any) {
+      console.log("[ERROR checkVersion]", error?.message);
+    }
   };
 
   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.log("User is not active");
+    console.warn("User is not active");
     return (
       <BasicWrapper>
         <Redirect href={`/waiting-room`} />
@@ -69,7 +100,7 @@ export default function Application() {
   }
 
   if (data && data?.Profile === null) {
-    console.log("Profile is null");
+    console.warn("Profile is null");
     return (
       <BasicWrapper>
         <Redirect href={`/profile/create`} />
@@ -77,63 +108,95 @@ export default function Application() {
     );
   }
 
-  // if (data && data?.masterUserRoleId !== "1") {
-  //   console.log("User is not admin");
-  //   return (
-  //     <BasicWrapper>
-  //       <Redirect href={`/admin/dashboard`} />
-  //     </BasicWrapper>
-  //   );
-  // }
-
   return (
     <>
       <Stack.Screen
         options={{
-          title: `HIPMI`,
-          headerLeft: () => (
-            <Ionicons
-              name="search"
-              size={20}
-              color={MainColor.yellow}
-              onPress={() => {
-                router.push("/user-search");
-              }}
+          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} />
+                )
+              }
             />
           ),
-          headerRight: () => <HeaderBell />,
         }}
       />
-      <ViewWrapper
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor={MainColor.yellow}
-            colors={[MainColor.yellow]}
-          />
-        }
-        footerComponent={
-          <TabSection
+
+      <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
             tabs={tabsHome({
               acceptedForumTermsAt: data?.acceptedForumTermsAt,
               profileId: data?.Profile?.id,
             })}
           />
-        }
-      >
-        <StackCustom>
-          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>
-            Test Notif
-          </ButtonCustom> */}
-
-          <Home_ImageSection />
-
-          <Home_FeatureSection />
-
-          <Home_BottomFeatureSection />
-        </StackCustom>
-      </ViewWrapper>
+        ) : (
+          <View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
+        )}
+      </View>
     </>
   );
 }

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

@@ -4,80 +4,105 @@ 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";
 
-export default function InvestmentTabsLayout() {
-  // const navigation = useNavigation();
+function InvestmentTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
+  const navigation = useNavigation();
 
-  // const { from, category } = useLocalSearchParams<{
-  //   from?: string;
-  //   category?: string;
-  // }>();
+  const { from, category } = useLocalSearchParams<{
+    from?: string;
+    category?: string;
+  }>();
 
-  // console.log("from", from);
-  // console.log("category", category);
-
-  // // Atur header secara dinamis
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerLeft: () => (
-  //       <BackButtonFromNotification
-  //         from={from as string}
-  //         category={category as string}
-  //       />
-  //     ),
-  //   });
-  // }, [from, router, navigation]);
+  // Atur header secara dinamis
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <BackButtonFromNotification
+          from={from || ""}
+          category={category}
+        />
+      ),
+    });
+  }, [from, category, router, navigation]);
 
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Bursa",
-          tabBarIcon: ({ color }) => (
-            <Ionicons
-              name="bar-chart-outline"
-              color={color}
-              size={ICON_SIZE_SMALL}
-            />
-          ),
+    <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="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>
+      >
+        <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>
   );
 }
+
+export default function InvestmentTabsLayout() {
+  return <InvestmentTabsWrapper />;
+}

app/(application)/(user)/investment/[id]/(my-holding)/[id].tsx

@@ -10,6 +10,7 @@ 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";
@@ -30,13 +31,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({
@@ -44,7 +45,7 @@ export default function InvestmentDetailHolding() {
           authorId: user?.id,
           category: "invoice",
         });
-  
+
         console.log("[DATA]", JSON.stringify(response.data, null, 2));
         setData(response.data);
       } catch (error) {
@@ -76,14 +77,19 @@ export default function InvestmentDetailHolding() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
 

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

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

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

@@ -6,6 +6,7 @@ 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";
@@ -106,14 +107,19 @@ export default function InvestmentDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
 

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

@@ -6,6 +6,7 @@ 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";
@@ -105,14 +106,19 @@ export default function InvestmentDetail() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail ${_.startCase(status as string)}`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title={`Detail ${_.startCase(status as string)}`}
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
 

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

@@ -1,37 +1,60 @@
 /* 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";
 import {
-  router,
-  Tabs,
-  useLocalSearchParams,
-  useNavigation
-} from "expo-router";
-import { useLayoutEffect } from "react";
-
-export default function JobTabsLayout() {
-  const navigation = useNavigation();
+  OS_ANDROID_HEIGHT,
+  OS_ANDROID_PADDING_TOP,
+  OS_IOS_HEIGHT,
+  OS_IOS_PADDING_TOP,
+} from "@/constants/constans-value";
 
+function JobTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
-  // Atur header secara dinamis
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => (
-       <BackButtonFromNotification from={from as string} category={category as string} />
-      ),
-    });
-  }, [from, router, navigation]);
-
   return (
-    <>
-      <Tabs screenOptions={TabsStyles}>
+    <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+      <Tabs
+        screenOptions={{
+          ...TabsStyles,
+          tabBarStyle: Platform.select({
+            ios: {
+              borderTopWidth: 0,
+              paddingTop: OS_IOS_PADDING_TOP,
+              height: OS_IOS_HEIGHT,
+            },
+            android: {
+              borderTopWidth: 0,
+              paddingTop: OS_ANDROID_PADDING_TOP,
+              height: OS_ANDROID_HEIGHT + paddingBottom,
+            },
+          }),
+          header: () => (
+            <AppHeader
+              title="Job Vacancy"
+              left={
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
+              }
+            />
+          ),
+        }}
+      >
         <Tabs.Screen
           name="index"
           options={{
@@ -56,6 +79,10 @@ export default function JobTabsLayout() {
           }}
         />
       </Tabs>
-    </>
+    </View>
   );
 }
+
+export default function JobTabsLayout() {
+  return <JobTabsWrapper />;
+}

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

@@ -5,10 +5,11 @@ import {
   DrawerCustom,
   LoaderCustom,
   MenuDrawerDynamicGrid,
+  OS_Wrapper,
   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";
@@ -22,6 +23,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import { useCallback, useState } from "react";
+import { PADDING_INLINE } from "@/constants/constans-value";
 
 export default function JobDetailStatus() {
   const { id, status } = useLocalSearchParams();
@@ -58,15 +60,20 @@ export default function JobDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawer(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title="Detail"
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawer(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper >
         {isLoadData ? (
           <LoaderCustom />
         ) : (
@@ -77,7 +84,7 @@ export default function JobDetailStatus() {
                 (status === "draft" || status === "reject") && (
                   <ReportBox text={data?.catatan} />
                 )}
-                
+
               <Job_BoxDetailSection data={data} />
               <Job_ButtonStatusSection
                 id={id as string}
@@ -90,7 +97,7 @@ export default function JobDetailStatus() {
             <Spacing />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       <DrawerCustom
         isVisible={openDrawer}

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

@@ -1,198 +1,5 @@
-/* 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";
+import { Job_ScreenEdit } from "@/screens/Job/ScreenJobEdit";
 
 export default function JobEdit() {
-  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>
-  );
+  return <Job_ScreenEdit />;
 }

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

@@ -1,168 +1,5 @@
-import {
-  BoxButtonOnFooter,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  InformationBox,
-  LandscapeFrameUploaded,
-  NewWrapper,
-  Spacing,
-  StackCustom,
-  TextAreaCustom,
-  TextInputCustom
-} 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";
+import { Job_ScreenCreate } from "@/screens/Job/ScreenJobCreate";
 
 export default function JobCreate() {
-  const nextUrl = "/(application)/(user)/job/(tabs)/status?status=review";
-  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 (
-      <>
-        <BoxButtonOnFooter>
-          <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
-            Simpan
-          </ButtonCustom>
-        </BoxButtonOnFooter>
-      </>
-    );
-  };
-
-  return (
-    <NewWrapper footerComponent={buttonSubmit()}>
-      <StackCustom gap={"xs"}>
-        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
-
-        {/* <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 })}
-        />
-      </StackCustom>
-    </NewWrapper>
-  );
+  return <Job_ScreenCreate />;
 }

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

@@ -1,244 +1,5 @@
-/* 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";
+import { Maps_ScreenMapsEdit } from "@/screens/Maps/ScreenMapsEdit";
 
-const defaultRegion = {
-  latitude: -8.737109,
-  longitude: 115.1756897,
-  latitudeDelta: 0.1,
-  longitudeDelta: 0.1,
-};
 export default function MapsEdit() {
-  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>
-  );
+  return <Maps_ScreenMapsEdit />;
 }
-
-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,143 +1,9 @@
-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";
+import Maps_ScreenMapsCreate from "@/screens/Maps/ScreenMapsCreate";
 
 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 (
-    <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>
+    <>
+      <Maps_ScreenMapsCreate />
+    </>
   );
 }

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

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

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

@@ -1,365 +1,5 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  ActionIcon,
-  AvatarComp,
-  BaseBox,
-  ButtonCenteredOnly,
-  CenterCustom,
-  Grid,
-  InformationBox,
-  NewWrapper,
-  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";
+import { ScreenPortofolioCreate } from "@/screens/Portofolio/ScreenPortofolioCreate";
 
 export default function PortofolioCreate() {
-  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 (
-    <NewWrapper
-      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>
-    </NewWrapper>
-  );
+  return <ScreenPortofolioCreate />;
 }

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

@@ -3,7 +3,7 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
-    ViewWrapper
+    OS_Wrapper
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -126,7 +126,7 @@ export default function PortofolioEditLogo() {
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <OS_Wrapper footerComponent={buttonFooter}>
         <BaseBox
           style={{
             alignItems: "center",
@@ -146,7 +146,7 @@ export default function PortofolioEditLogo() {
         >
           Upload
         </ButtonCenteredOnly>
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -1,8 +1,8 @@
 import {
   BoxButtonOnFooter,
   ButtonCustom,
+  OS_Wrapper,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import {
   apiGetOnePortofolio,
@@ -91,7 +91,11 @@ export default function PortofolioEditSocialMedia() {
 
   return (
     <>
-      <ViewWrapper footerComponent={buttonFooter}>
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={buttonFooter}
+      >
         <TextInputCustom
           value={data.tiktok}
           onChangeText={(value) => setData({ ...data, tiktok: value })}
@@ -122,7 +126,7 @@ export default function PortofolioEditSocialMedia() {
           label="Youtube"
           placeholder="Masukkan youtube"
         />
-      </ViewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -4,7 +4,8 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   CenterCustom,
-  NewWrapper,
+  OS_Wrapper,
+  PhoneInputCustom,
   SelectCustom,
   Spacing,
   StackCustom,
@@ -15,6 +16,11 @@ import {
 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,
@@ -32,7 +38,6 @@ 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";
 
@@ -59,8 +64,9 @@ export default function PortofolioEdit() {
   const { id } = useLocalSearchParams();
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>({});
-
-  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [phoneNumber, setPhoneNumber] = useState<string>("");
+  const [selectedCountry, setSelectedCountry] =
+    useState<CountryData>(DEFAULT_COUNTRY);
   const [bidangBisnis, setBidangBisnis] = useState<
     IMasterBidangBisnis[] | null
   >(null);
@@ -72,12 +78,42 @@ export default function PortofolioEdit() {
     IListSubBidangSelected[]
   >([]);
 
-  function handleInputValue(phoneNumber: string) {
-    setData({ ...data, tlpn: phoneNumber });
+  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 handleSelectedCountry(country: ICountry) {
+  function handleCountryChange(country: CountryData) {
     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 () => {
@@ -122,8 +158,27 @@ export default function PortofolioEdit() {
     const response = await apiGetOnePortofolio({ id: id });
 
     if (response.success) {
-      const fixNumber = response.data.tlpn.replace("62", "");
-      setData({ ...response.data, tlpn: fixNumber });
+      // 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 });
 
       // Cek apakah ada sub bidang bisnis yang terpilih
       const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
@@ -244,15 +299,11 @@ export default function PortofolioEdit() {
   }
 
   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: realNumber,
+      tlpn: data.tlpn, // Already formatted by PhoneInputCustom
       deskripsi: data.deskripsi,
       masterBidangBisnisId: data.masterBidangBisnisId,
       subBidang: listSubBidangSelected,
@@ -317,162 +368,159 @@ export default function PortofolioEdit() {
     </BoxButtonOnFooter>
   );
 
-  if (!bidangBisnis || !subBidangBisnis) {
-    return (
-      <>
-        <NewWrapper>
-          <ListSkeletonComponent height={80} />
-        </NewWrapper>
-      </>
-    );
-  }
-
   return (
     <>
-      <NewWrapper footerComponent={buttonUpdate}>
-        <StackCustom gap={"xs"}>
-          <TextInputCustom
-            required
-            label="Nama Bisnis"
-            placeholder="Masukkan nama bisnis"
-            value={data.namaBisnis}
-            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: any) => {
-              handleBidangBisnisChange(value);
-            }}
-          />
-
-          {listSubBidangSelected.map((item, index) => {
-            // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
-            const selectedIds = listSubBidangSelected
-              .filter((_, i) => i !== index)
-              .map((s) => s.MasterSubBidangBisnis?.id)
-              .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
-
-            const availableSubBidangOptions = (selectedSubBidang || [])
-              .filter((sub: any) => {
-                // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
-
-                return (
-                  sub.id === item.MasterSubBidangBisnis?.id ||
-                  !selectedIds.includes(sub.id)
-                );
-              })
-              .map((sub: any) => ({
-                value: sub.id,
-                label: sub.name,
-              }));
-
-            return (
-              <SelectCustom
-                key={index}
-                label="Sub Bidang Usaha"
-                required
-                data={availableSubBidangOptions}
-                value={item.MasterSubBidangBisnis?.id || null}
-                onChange={(value: any) => {
-                  handleSubBidangChange(value, index);
-                }}
-              />
-            );
-          })}
-
-          <CenterCustom>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
-            >
-              <ActionIcon
-                disabled={
-                  selectedSubBidang.length === listSubBidangSelected.length
-                }
-                onPress={() => {
-                  handleAddSubBidang();
-                }}
-                icon={
-                  <Ionicons
-                    name="add-circle-outline"
-                    size={ICON_SIZE_XLARGE}
-                    color={MainColor.black}
-                  />
-                }
-                size="xl"
-              />
-              <ActionIcon
-                disabled={listSubBidangSelected.length <= 1}
-                onPress={() => {
-                  handleRemoveSubBidang(listSubBidangSelected.length - 1);
-                }}
-                icon={
-                  <Ionicons
-                    name="remove-circle-outline"
-                    size={ICON_SIZE_XLARGE}
-                    color={MainColor.black}
-                  />
-                }
-                size="xl"
-              />
-            </View>
-          </CenterCustom>
-          <Spacing />
-
-          <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={data.tlpn}
-              onChangePhoneNumber={handleInputValue}
-              selectedCountry={selectedCountry}
-              onChangeSelectedCountry={handleSelectedCountry}
-              defaultCountry="ID"
-              placeholder="xxx-xxx-xxx"
+      <OS_Wrapper
+        enableKeyboardHandling
+        contentPaddingBottom={250}
+        footerComponent={buttonUpdate}
+      >
+        {!bidangBisnis || !subBidangBisnis ? (
+          <ListSkeletonComponent height={80} />
+        ) : (
+          <StackCustom gap={"xs"}>
+            <TextInputCustom
+              required
+              label="Nama Bisnis"
+              placeholder="Masukkan nama bisnis"
+              value={data.namaBisnis}
+              onChangeText={(value: any) =>
+                setData({ ...data, namaBisnis: value })
+              }
             />
-          </View>
-          <Spacing />
 
-          <TextInputCustom
-            required
-            label="Alamat Bisnis"
-            placeholder="Masukkan alamat bisnis"
-            value={data.alamatKantor}
-            onChangeText={(value: any) =>
-              setData({ ...data, alamatKantor: value })
-            }
-          />
+            <SelectCustom
+              label="Bidang Usaha"
+              required
+              data={bidangBisnis?.map((item) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data.masterBidangBisnisId}
+              onChange={(value: any) => {
+                handleBidangBisnisChange(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 />
-        </StackCustom>
-      </NewWrapper>
+            {listSubBidangSelected.map((item, index) => {
+              // Filter data untuk select sub bidang, menghilangkan yang sudah dipilih kecuali untuk item ini sendiri
+              const selectedIds = listSubBidangSelected
+                .filter((_, i) => i !== index)
+                .map((s) => s.MasterSubBidangBisnis?.id)
+                .filter((id) => id); // Filter hanya yang memiliki id (tidak kosong)
+
+              const availableSubBidangOptions = (selectedSubBidang || [])
+                .filter((sub: any) => {
+                  // Tampilkan jika ini adalah opsi yang dipilih saat ini atau belum dipilih di sub bidang lainnya
+
+                  return (
+                    sub.id === item.MasterSubBidangBisnis?.id ||
+                    !selectedIds.includes(sub.id)
+                  );
+                })
+                .map((sub: any) => ({
+                  value: sub.id,
+                  label: sub.name,
+                }));
+
+              return (
+                <SelectCustom
+                  key={index}
+                  label="Sub Bidang Usaha"
+                  required
+                  data={availableSubBidangOptions}
+                  value={item.MasterSubBidangBisnis?.id || null}
+                  onChange={(value: any) => {
+                    handleSubBidangChange(value, index);
+                  }}
+                />
+              );
+            })}
+
+            <CenterCustom>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
+              >
+                <ActionIcon
+                  disabled={
+                    selectedSubBidang.length === listSubBidangSelected.length
+                  }
+                  onPress={() => {
+                    handleAddSubBidang();
+                  }}
+                  icon={
+                    <Ionicons
+                      name="add-circle-outline"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.black}
+                    />
+                  }
+                  size="xl"
+                />
+                <ActionIcon
+                  disabled={listSubBidangSelected.length <= 1}
+                  onPress={() => {
+                    handleRemoveSubBidang(listSubBidangSelected.length - 1);
+                  }}
+                  icon={
+                    <Ionicons
+                      name="remove-circle-outline"
+                      size={ICON_SIZE_XLARGE}
+                      color={MainColor.black}
+                    />
+                  }
+                  size="xl"
+                />
+              </View>
+            </CenterCustom>
+            <Spacing />
+
+            <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} />
+              <PhoneInputCustom
+                value={phoneNumber}
+                onChangePhoneNumber={handlePhoneChange}
+                selectedCountry={selectedCountry}
+                onChangeCountry={handleCountryChange}
+                placeholder="xxx-xxx-xxx"
+              />
+            </View>
+            <Spacing />
+
+            <TextInputCustom
+              required
+              label="Alamat Bisnis"
+              placeholder="Masukkan alamat bisnis"
+              value={data.alamatKantor}
+              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 />
+          </StackCustom>
+        )}
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -4,13 +4,15 @@ import {
   DrawerCustom,
   DummyLandscapeImage,
   LoaderCustom,
+  OS_Wrapper,
   Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
@@ -49,7 +51,7 @@ export default function Portofolio() {
     useCallback(() => {
       onLoadData(id as string);
       onLoadUserByToken();
-    }, [id])
+    }, [id]),
   );
 
   async function onLoadData(id: string) {
@@ -64,41 +66,52 @@ export default function Portofolio() {
     setProfileId(response?.data?.Profile?.id);
   };
 
+
+
   return (
     <>
       {/* Header */}
       <Stack.Screen
         options={{
-          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,
+          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>
+                )
+              }
+            />
+          ),
         }}
       />
-      <ViewWrapper>
+      <OS_Wrapper>
         {!data || !profileId ? (
-          <LoaderCustom />
+            <StackCustom>
+            <CustomSkeleton height={400} />
+            <CustomSkeleton height={300} />
+          </StackCustom>
         ) : (
           <StackCustom>
             <Portofolio_Data
               data={data}
               listSubBidang={data?.Portofolio_BidangDanSubBidangBisnis as any[]}
             />
-            <Portofolio_BusinessLocation
-              data={data?.BusinessMaps}
-              imageId={data?.logoId}
-              setOpenDrawerLocation={setOpenDrawerLocation}
-            />
+            {data?.BusinessMaps && (
+              <Portofolio_BusinessLocation
+                data={data?.BusinessMaps}
+                imageId={data?.logoId}
+                setOpenDrawerLocation={setOpenDrawerLocation}
+              />
+            )}
+
             <Portofolio_SocialMediaSection
               data={data?.Portofolio_MediaSosial}
             />
@@ -112,7 +125,7 @@ export default function Portofolio() {
             <Spacing />
           </StackCustom>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom
@@ -135,36 +148,38 @@ export default function Portofolio() {
         closeDrawer={() => setOpenDrawerLocation(false)}
         height={"auto"}
       >
-        <DummyLandscapeImage
-          height={200}
-          imageId={data?.BusinessMaps?.imageId}
-        />
+        {data?.BusinessMaps?.imageId && (
+          <DummyLandscapeImage
+            height={200}
+            imageId={data?.BusinessMaps?.imageId}
+          />
+        )}
         <Spacing />
         <StackCustom gap={"xs"}>
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <FontAwesome
                 name="building-o"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>{data?.BusinessMaps?.namePin}</TextCustom>}
+            rightItem={<TextCustom>{data?.BusinessMaps?.namePin}</TextCustom>}
           />
 
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <Ionicons
                 name="list-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={
+            rightItem={
               <TextCustom>{data?.MasterBidangBisnis?.name}</TextCustom>
             }
           />
@@ -172,26 +187,26 @@ export default function Portofolio() {
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <Ionicons
                 name="call-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>{data?.tlpn}</TextCustom>}
+            rightItem={<TextCustom>{data?.tlpn}</TextCustom>}
           />
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <Ionicons
                 name="location-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>{data?.alamatKantor}</TextCustom>}
+            rightItem={<TextCustom>{data?.alamatKantor}</TextCustom>}
           />
 
           <Spacing />

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,8 +7,9 @@ export default function PortofolioLayout() {
     <>
       <Stack
         screenOptions={{
-          ...HeaderStyles,
-          headerLeft: () => <LeftButtonCustom />,
+          header: () => (
+            <AppHeader title="Portofolio" left={<LeftButtonCustom />} />
+          ),
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ title: "Portofolio" }} /> */}

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

@@ -3,13 +3,13 @@ import {
   BadgeCustom,
   ClickableCustom,
   Divider,
+  OS_Wrapper,
   SelectCustom,
   TextCustom,
 } from "@/components";
 import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
 import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
 import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         // headerComponent={renderHeader()}
         listData={listData}
         renderItem={renderItem}

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

@@ -5,7 +5,7 @@ import {
   BoxButtonOnFooter,
   BoxWithHeaderSection,
   ButtonCustom,
-  NewWrapper,
+  OS_Wrapper,
   StackCustom,
   TextCustom,
 } from "@/components";
@@ -46,7 +46,7 @@ export default function ProfileDetailBlocked() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         footerComponent={
           <BoxButtonOnFooter>
             <ButtonCustom
@@ -86,7 +86,7 @@ export default function ProfileDetailBlocked() {
             </TextCustom>
           </StackCustom>
         </BoxWithHeaderSection>
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

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

@@ -1,11 +1,12 @@
 import {
   ButtonCustom,
+  OS_Wrapper,
   SelectCustom,
   StackCustom,
   TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
 import { IProfile } from "@/types/Type-Profile";
 import { router, useLocalSearchParams } from "expo-router";
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
   };
 
   return (
-    <ViewWrapper
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
       footerComponent={
         <BoxButtonOnFooter>
           <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -119,6 +122,6 @@ export default function ProfileEdit() {
           }}
         />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { LoaderCustom } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
+import { OS_Wrapper, StackCustom } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import DrawerCustom from "@/components/Drawer/DrawerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -16,8 +17,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 React, { useCallback, useState } from "react";
-import { TouchableOpacity } from "react-native";
+import { useCallback, useState } from "react";
+import { RefreshControl, TouchableOpacity } from "react-native";
 
 export default function Profile() {
   const { id } = useLocalSearchParams();
@@ -25,6 +26,7 @@ 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();
 
@@ -43,7 +45,7 @@ export default function Profile() {
       onLoadUserByToken();
       isUserCheck();
       userData(token as string);
-    }, [id, token])
+    }, [id, token]),
   );
 
   const isUserCheck = () => {
@@ -54,13 +56,21 @@ export default function Profile() {
   };
 
   const onLoadData = async (id: string) => {
-    const response = await apiProfile({ id: id });
-    setData(response.data);
+    try {
+      const response = await apiProfile({ id: id });
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR onLoadData]", error);
+    }
   };
 
   const onLoadUserByToken = async () => {
-    const response = await apiUser(user?.id as string);
-    setDataToken(response?.data?.Profile);
+    try {
+      const response = await apiUser(user?.id as string);
+      setDataToken(response?.data?.Profile);
+    } catch (error) {
+      console.log("[ERROR onLoadUserByToken]", error);
+    }
   };
 
   const onLoadPortofolio = async (id: string) => {
@@ -69,37 +79,61 @@ 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]", error);
+      console.log("[ERROR onLoadPortofolio]", 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={{
-          title: `Profile`,
-          headerLeft: () => <LeftButtonCustom />,
-          headerRight: () => (
-            <ButtonnDot
-              id={id as string}
-              openDrawer={openDrawer}
-              isUserCheck={isUserCheck()}
-              logout={logout}
+          header: () => (
+            <AppHeader
+              title="Profile"
+              left={<LeftButtonCustom />}
+              right={
+                <ButtonnDot
+                  id={id as string}
+                  openDrawer={openDrawer}
+                  isUserCheck={isUserCheck()}
+                  logout={logout}
+                />
+              }
             />
           ),
-          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: GStyles.headerTitleStyle,
         }}
       />
       {/* Main View */}
-      <ViewWrapper>
+      <OS_Wrapper
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      >
         {!data || !dataToken ? (
-          <LoaderCustom />
+          <StackCustom>
+            <CustomSkeleton height={400} />
+            <CustomSkeleton height={200} />
+          </StackCustom>
         ) : (
           <>
             <ProfileSection data={data as any} />
@@ -110,7 +144,7 @@ export default function Profile() {
             />
           </>
         )}
-      </ViewWrapper>
+      </OS_Wrapper>
 
       {/* Drawer Komponen Eksternal */}
       <DrawerCustom

app/(application)/(user)/profile/[id]/update-background.tsx

@@ -3,8 +3,8 @@ import {
     BoxButtonOnFooter,
     ButtonCenteredOnly,
     ButtonCustom,
+    OS_Wrapper,
 } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -127,7 +127,7 @@ export default function UpdateBackgroundProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -144,6 +144,6 @@ export default function UpdateBackgroundProfile() {
       >
         Update
       </ButtonCenteredOnly>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -3,8 +3,8 @@ import {
   BoxButtonOnFooter,
   ButtonCenteredOnly,
   ButtonCustom,
+  OS_Wrapper,
 } from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -125,7 +125,7 @@ export default function UpdatePhotoProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <OS_Wrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -143,6 +143,6 @@ export default function UpdatePhotoProfile() {
       >
         Upload
       </ButtonCenteredOnly>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -1,47 +1,43 @@
 import { BackButton } from "@/components";
-import { GStyles } from "@/styles/global-styles";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { Stack } from "expo-router";
 
 export default function ProfileLayout() {
   return (
     <>
-      <Stack
-        screenOptions={{
-          headerStyle: GStyles.headerStyle,
-          headerTitleStyle: GStyles.headerTitleStyle,
-          headerTitleAlign: "center",
-          headerBackButtonDisplayMode: "minimal",
-        }}
-      >
+      <Stack>
         {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}
         <Stack.Screen
           name="[id]/edit"
-          options={{ title: "Edit Profile", headerLeft: () => <BackButton /> }}
+          options={{ header: () => <AppHeader title="Edit Profile" /> }}
         />
         <Stack.Screen
           name="[id]/update-photo"
-          options={{ title: "Update Foto", headerLeft: () => <BackButton /> }}
+          options={{ header: () => <AppHeader title="Update Foto" /> }}
         />
         <Stack.Screen
           name="[id]/update-background"
           options={{
-            title: "Update Latar Belakang",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Update Latar Belakang" />,
           }}
         />
         <Stack.Screen
           name="create"
-          options={{ title: "Buat Profile", headerBackVisible: false }}
+          options={{
+            header: () => (
+              <AppHeader title="Tambah Profil" showBack={false} />
+            ),
+          }}
         />
 
         <Stack.Screen
           name="[id]/blocked-list"
-          options={{ title: "Daftar Blokir", headerLeft: () => <BackButton /> }}
+          options={{ header: () => <AppHeader title="Daftar Blokir" /> }}
         />
 
         <Stack.Screen
           name="[id]/detail-blocked"
-          options={{ title: "Detail Blokir", headerLeft: () => <BackButton /> }}
+          options={{ header: () => <AppHeader title="Detail Blokir" /> }}
         />
       </Stack>
     </>

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

@@ -2,16 +2,17 @@ import {
     BaseBox,
     ButtonCenteredOnly,
     ButtonCustom,
+    OS_Wrapper,
     SelectCustom,
     Spacing,
     StackCustom,
     TextInputCustom,
-    ViewWrapper,
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
 import DIRECTORY_ID from "@/constants/directory-id";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import { PADDING_INLINE } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
 import { apiCreateProfile } from "@/service/api-client/api-profile";
 import { apiValidationEmail } from "@/service/api-client/api-validation";
@@ -155,7 +156,11 @@ export default function CreateProfile() {
   );
 
   return (
-    <ViewWrapper footerComponent={footerComponent}>
+    <OS_Wrapper
+      enableKeyboardHandling
+      contentPaddingBottom={250}
+      footerComponent={footerComponent}
+    >
       <StackCustom>
         <InformationBox text="Upload foto profile anda." />
         <View style={{ alignItems: "center" }}>
@@ -241,6 +246,6 @@ export default function CreateProfile() {
         />
         <Spacing />
       </StackCustom>
-    </ViewWrapper>
+    </OS_Wrapper>
   );
 }

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

@@ -4,64 +4,86 @@ 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 { Tabs, useLocalSearchParams, useNavigation, router } from "expo-router";
-import { useLayoutEffect } from "react";
-
-export default function VotingTabsLayout() {
-  const navigation = useNavigation();
+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 VotingTabsWrapper() {
+  const insets = useSafeAreaInsets();
+  const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
   const { from, category } = useLocalSearchParams<{
     from?: string;
     category?: string;
   }>();
 
-  console.log("from", from);
-  console.log("category", category);
-
-  // Atur header secara dinamis
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => (
-        <BackButtonFromNotification
-          from={from as string}
-          category={category as string}
-        />
-      ),
-    });
-  }, [from, router, navigation]);
-
   return (
-    <Tabs screenOptions={TabsStyles}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Beranda",
-          tabBarIcon: ({ color }) => <IconHome color={color} />,
+    <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="Voting"
+              left={
+                <BackButtonFromNotification
+                  from={from || ""}
+                  category={category}
+                />
+              }
+            />
+          ),
         }}
-      />
-      <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>
+      >
+        <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>
   );
 }
+
+export default function VotingTabsLayout() {
+  return <VotingTabsWrapper />;
+}

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

@@ -12,6 +12,7 @@ import {
   TextCustom,
   ViewWrapper,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution, IconEdit } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import ReportBox from "@/components/Box/ReportBox";
@@ -103,14 +104,19 @@ export default function VotingDetailStatus() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail`,
-          headerLeft: () => <BackButton />,
-          headerRight: () =>
-            status === "draft" ? (
-              <DotButton onPress={() => setOpenDrawerDraft(true)} />
-            ) : status === "publish" ? (
-              <DotButton onPress={() => setOpenDrawerPublish(true)} />
-            ) : null,
+          header: () => (
+            <AppHeader
+              title="Detail"
+              left={<BackButton />}
+              right={
+                status === "draft" ? (
+                  <DotButton onPress={() => setOpenDrawerDraft(true)} />
+                ) : status === "publish" ? (
+                  <DotButton onPress={() => setOpenDrawerPublish(true)} />
+                ) : null
+              }
+            />
+          ),
         }}
       />
       <ViewWrapper>

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

@@ -9,6 +9,7 @@ import {
   Spacing,
   ViewWrapper,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { useAuth } from "@/hooks/use-auth";
@@ -81,10 +82,14 @@ export default function VotingDetailContribution() {
     <>
       <Stack.Screen
         options={{
-          title: "Detail Kontribusi",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Kontribusi"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerPublish(true)} />
+              }
+            />
           ),
         }}
       />

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

@@ -9,6 +9,7 @@ import {
   Spacing,
   ViewWrapper,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { useAuth } from "@/hooks/use-auth";
@@ -82,10 +83,14 @@ export default function VotingDetailHistory() {
     <>
       <Stack.Screen
         options={{
-          title: "Riwayat Voting",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          header: () => (
+            <AppHeader
+              title="Riwayat Voting"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerPublish(true)} />
+              }
+            />
           ),
         }}
       />

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

@@ -11,6 +11,7 @@ import {
   StackCustom,
   ViewWrapper,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import { IconArchive, IconContribution } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
@@ -142,10 +143,14 @@ export default function VotingDetail() {
     <>
       <Stack.Screen
         options={{
-          title: `Detail Voting`,
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <DotButton onPress={() => setOpenDrawerPublish(true)} />
+          header: () => (
+            <AppHeader
+              title="Detail Voting"
+              left={<BackButton />}
+              right={
+                <DotButton onPress={() => setOpenDrawerPublish(true)} />
+              }
+            />
           ),
         }}
       />

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

@@ -3,7 +3,7 @@ import {
   BoxButtonOnFooter,
   ButtonCustom,
   InformationBox,
-  NewWrapper,
+  OS_Wrapper,
   StackCustom
 } from "@/components";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
 
   return (
     <>
-      <NewWrapper
+      <OS_Wrapper
         footerComponent={logoutButton()}
         refreshControl={
           <RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
@@ -103,7 +103,7 @@ Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
             Check
           </ButtonCenteredOnly> */}
         </StackCustom>
-      </NewWrapper>
+      </OS_Wrapper>
     </>
   );
 }

app/(application)/_layout.tsx

@@ -1,8 +1,8 @@
 import { BackButton } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import BackgroundNotificationHandler from "@/components/Notification/BackgroundNotificationHandler";
 import NotificationInitializer from "@/components/Notification/NotificationInitializer";
 import { NotificationProvider } from "@/hooks/use-notification-store";
-import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
@@ -20,7 +20,7 @@ export default function ApplicationLayout() {
 function ApplicationStack() {
   return (
     <>
-      <Stack screenOptions={HeaderStyles}>
+      <Stack>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
         <Stack.Screen name="admin" options={{ headerShown: false }} />
 
@@ -28,8 +28,7 @@ function ApplicationStack() {
         <Stack.Screen
           name="(image)/take-picture/[id]/index"
           options={{
-            title: "Ambil Gambar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Ambil Gambar" />,
           }}
         />
 
@@ -37,8 +36,7 @@ function ApplicationStack() {
         <Stack.Screen
           name="(image)/preview-image/[id]/index"
           options={{
-            title: "Preview Gambar",
-            headerLeft: () => <BackButton />,
+            header: () => <AppHeader title="Preview Gambar" />,
           }}
         />
       </Stack>

app/(application)/admin/_layout.tsx

@@ -6,9 +6,11 @@ import {
   StackCustom,
   TextCustom,
 } from "@/components";
+import AppHeader from "@/components/_ShareComponent/AppHeader";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
 import NavbarMenu_V2 from "@/components/Drawer/NavbarMenu_V2";
+import NavbarMenu_V3 from "@/components/Drawer/NavbarMenu_V3";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import {
   ICON_SIZE_MEDIUM,
@@ -16,6 +18,7 @@ import {
   ICON_SIZE_XLARGE,
 } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
 import AdminNotificationBell from "@/screens/Admin/AdminNotificationBell";
 import {
   adminListMenu,
@@ -33,12 +36,28 @@ import { useState } from "react";
 export default function AdminLayout() {
   const [openDrawerNavbar, setOpenDrawerNavbar] = useState(false);
   const [openDrawerUser, setOpenDrawerUser] = useState(false);
-  // const [user, setUser] = useState(null);
-
   const { logout, user } = useAuth();
 
   console.log("[USER LAYOUT]", JSON.stringify(user, null, 2));
 
+  const headerLeft = () => (
+    <Ionicons
+      name="menu"
+      size={ICON_SIZE_XLARGE}
+      color={MainColor.white}
+      onPress={() => setOpenDrawerNavbar(true)}
+    />
+  );
+
+  const headerRight = () => (
+    <FontAwesome6
+      name="circle-user"
+      size={ICON_SIZE_MEDIUM}
+      color={MainColor.white}
+      onPress={() => setOpenDrawerUser(true)}
+    />
+  );
+
   return (
     <>
       <Stack
@@ -50,20 +69,33 @@ export default function AdminLayout() {
           contentStyle: {
             borderBottomColor: AccentColor.blue,
           },
-          headerLeft: () => (
-            <Ionicons
-              name="menu"
-              size={ICON_SIZE_XLARGE}
-              color={MainColor.white}
-              onPress={() => setOpenDrawerNavbar(true)}
-            />
-          ),
-          headerRight: () => (
-            <FontAwesome6
-              name="circle-user"
-              size={ICON_SIZE_MEDIUM}
-              color={MainColor.white}
-              onPress={() => setOpenDrawerUser(true)}
+
+          //  headerLeft: () => (
+          //   <Ionicons
+          //     name="menu"
+          //     size={ICON_SIZE_XLARGE}
+          //     color={MainColor.white}
+          //     onPress={() => setOpenDrawerNavbar(true)}
+          //   />
+          // ),
+          // headerRight: () => (
+          //   <FontAwesome6
+          //     name="circle-user"
+          //     size={ICON_SIZE_MEDIUM}
+          //     color={MainColor.white}
+          //     onPress={() => setOpenDrawerUser(true)}
+          //   />
+          // ),
+
+
+
+          
+          header: () => (
+            <AppHeader
+              title="HIPMI DASHBOARD"
+              showBack={false}
+              left={headerLeft()}
+              right={headerRight()}
             />
           ),
         }}
@@ -145,23 +177,32 @@ export default function AdminLayout() {
             style={{ alignSelf: "flex-end" }}
           />
 
-          {/* <NavbarMenu
+          <NavbarMenu
             items={
               user?.masterUserRoleId === "2"
                 ? adminListMenu
                 : superAdminListMenu
             }
             onClose={() => setOpenDrawerNavbar(false)}
-          /> */}
+          />
 
-          <NavbarMenu_V2
+          {/* <NavbarMenu_V2
             items={
               user?.masterUserRoleId === "2"
                 ? adminListMenu_V2
                 : superAdminListMenu_V2
             }
             onClose={() => setOpenDrawerNavbar(false)}
-          />
+          /> */}
+
+          {/* <NavbarMenu_V3
+            items={
+              user?.masterUserRoleId === "2"
+                ? adminListMenu_V2
+                : superAdminListMenu_V2
+            }
+            onClose={() => setOpenDrawerNavbar(false)}
+          /> */}
         </StackCustom>
       </DrawerAdmin>
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,117 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminDonation } from "@/service/api-admin/api-admin-donation";
-import { Octicons } from "@expo/vector-icons";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenDonationStatus } from "@/screens/Admin/Donation/ScreenDonationStatus";
 
 export default function AdminDonationStatus() {
-  const { status } = useLocalSearchParams();
-  console.log("[STATUS]", status);
-
-  const [data, setData] = useState<any | null>(null);
-  const [search, setSearch] = useState<string>("");
-  const [loadData, setLoadData] = useState<boolean>(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [status, search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminDonation({
-        category: status as "publish" | "review" | "reject",
-        search,
-      });
-
-      console.log("[RES]", JSON.stringify(response, null, 2));
-
-      if (response.success) {
-        setData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setData([]);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari"
-      value={search}
-      onChangeText={(value) => setSearch(value)}
-    />
-  );
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Donasi" />}>
-        <StackCustom gap={"sm"}>
-          <AdminComp_BoxTitle
-            title={`${_.startCase(status as string)}`}
-            rightComponent={rightComponent}
-          />
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Donasi"
-          />
-          <Divider />
-
-          {loadData ? (
-            <LoaderCustom />
-          ) : _.isEmpty(data) ? (
-            <TextCustom align="center" size="small" color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            data?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/donation/${item.id}/${status}`);
-                    }}
-                  />
-                }
-                value2={<TextCustom truncate={1}>{item?.Author?.username || "-"}</TextCustom>}
-                value3={
-                  <TextCustom truncate={2}>
-                    {item?.title || "-"}
-                  </TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenDonationStatus />;
 }

app/(application)/admin/donation/category-update.tsx

@@ -30,7 +30,6 @@ export default function AdminDonationCategoryUpdate() {
       const response = await apiAdminMasterDonationCategoryById({
         id: id as any,
       });
-      console.log(JSON.stringify(response.data, null, 2));
 
       setData(response.data);
     };
@@ -44,10 +43,9 @@ export default function AdminDonationCategoryUpdate() {
         id: id as any,
         data: data,
       });
-      console.log(JSON.stringify(response.data, null, 2));
       router.back();
     } catch (error) {
-      console.log(error);
+      console.log("Error update category:", error);
     } finally {
       setIsLoading(false);
     }

app/(application)/admin/donation/category.tsx

@@ -1,135 +1,5 @@
-import {
-  BadgeCustom,
-  CenterCustom,
-  ClickableCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { apiAdminMasterDonationCategory } from "@/service/api-admin/api-master-admin";
-import { colorActivationForBadge } from "@/utils/colorActivationForBadge";
-import { router, useFocusEffect } from "expo-router";
-import { useCallback, useState } from "react";
-import { RefreshControl, View } from "react-native";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenDonationCategory } from "@/screens/Admin/Donation/ScreenDonationCategory";
 
 export default function AdminDonationCategory() {
-  const [listData, setListData] = useState<any[]>([]);
-  const [refreshing, setRefreshing] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      fetchMaster();
-    }, [])
-  );
-
-  const fetchMaster = async () => {
-    try {
-      setLoading(true);
-      const response = await apiAdminMasterDonationCategory();
-      if (response.success) {
-        console.log(JSON.stringify(response.data, null, 2));
-        setListData(response.data);
-      } else {
-        setListData([]);
-      }
-    } catch (error) {
-      console.log("[Error]", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onRefresh = async () => {
-    setRefreshing(true);
-    await fetchMaster();
-    setRefreshing(false);
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-        headerComponent={<AdminTitlePage title="Donasi" />}
-      >
-        <AdminComp_BoxTitle
-          title="Kategori"
-          rightComponent={
-            <AdminActionIconPlus
-              onPress={() => {
-                router.push(`/admin/donation/category-create`);
-              }}
-            />
-          }
-        />
-
-        <View>
-          <GridSpan_4_8
-            label={<TextCustom bold>Status</TextCustom>}
-            value={<TextCustom bold>Kategori</TextCustom>}
-          />
-          {/* <Grid>
-            <Grid.Col style={{ paddingLeft: 10 }} span={4}>
-              <TextCustom bold>Status</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={8}>
-              <TextCustom bold>Kategori</TextCustom>
-            </Grid.Col>
-          </Grid> */}
-
-          <Divider />
-          <Spacing />
-
-          <StackCustom>
-            {listData.map((item, index) => (
-              <ClickableCustom
-                onPress={() => {
-                  router.push(`/admin/donation/category-update?id=${item.id}`);
-                }}
-                key={index}
-              >
-                <GridSpan_4_8
-                  label={
-                    <CenterCustom>
-                      <BadgeCustom
-                        color={colorActivationForBadge({
-                          status: item.active,
-                        })}
-                      >
-                        {item.active ? "Aktif" : "Tidak Aktif"}
-                      </BadgeCustom>
-                    </CenterCustom>
-                  }
-                  value={<TextCustom>{item.name}</TextCustom>}
-                />
-                {/* <Grid containerStyle={{ paddingBottom: 10 }}>
-                  <Grid.Col span={4} style={{ paddingLeft: 10 }}>
-                    <CenterCustom>
-                      <BadgeCustom
-                        color={item.active ? MainColor.green : MainColor.red}
-                      >
-                        {item.active ? "Aktif" : "Tidak Aktif"}
-                      </BadgeCustom>
-                    </CenterCustom>
-                  </Grid.Col>
-                  <Grid.Col span={8}>
-                    <TextCustom bold>{item.name}</TextCustom>
-                  </Grid.Col>
-                </Grid> */}
-                <Divider />
-              </ClickableCustom>
-            ))}
-          </StackCustom>
-        </View>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenDonationCategory />;
 }

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

@@ -1,254 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  AlertDefaultSystem,
-  BadgeCustom,
-  BaseBox,
-  DrawerCustom,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconDot, IconList } from "@/components/_Icon/IconComponent";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
-import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import ReportBox from "@/components/Box/ReportBox";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import { funUpdateStatusEvent } from "@/screens/Admin/Event/funUpdateStatus";
-import { apiAdminEventById } from "@/service/api-admin/api-admin-event";
-import { DEEP_LINK_URL } from "@/service/api-config";
-import { colorBadgeStatus } from "@/utils/colorBadge";
-import { dateTimeView } from "@/utils/dateTimeView";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import React, { useCallback } from "react";
-import QRCode from "react-native-qrcode-svg";
-import Toast from "react-native-toast-message";
+import { Admin_ScreenEventDetail } from "@/screens/Admin/Event/ScreenEventDetail";
 
 export default function AdminEventDetail() {
-  const { user } = useAuth();
-  const { id, status } = useLocalSearchParams();
-  const [openDrawer, setOpenDrawer] = React.useState(false);
-
-  const [data, setData] = React.useState<any | null>(null);
-  const [loadData, setLoadData] = React.useState(false);
-  const deepLinkURL = `${DEEP_LINK_URL}/event/${id}/confirmation?userId=${user?.id}`;
-  const deepLinkURLDEV = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
-
-  const isDevLink =
-    process.env.NODE_ENV === "development" ? deepLinkURLDEV : deepLinkURL;
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminEventById({
-        id: id as string,
-      });
-
-      if (response.success) {
-        setData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  const listData = [
-    {
-      label: "Pembuat Event",
-      value: (data && data?.Author?.username) || "-",
-    },
-    {
-      label: "Judul Event",
-      value: (data && data?.title) || "-",
-    },
-    {
-      label: "Status",
-      value:
-        (data && (
-          <BadgeCustom color={colorBadgeStatus({ status: status as string })}>
-            {_.startCase(status as string)}
-          </BadgeCustom>
-        )) ||
-        "-",
-    },
-    {
-      label: "Lokasi",
-      value: (data && data?.lokasi) || "-",
-    },
-    {
-      label: "Tipe Acara",
-      value: (data && data?.EventMaster_TipeAcara?.name) || "-",
-    },
-    {
-      label: "Mulai Event",
-      value:
-        (data && data?.tanggal && dateTimeView({ date: data?.tanggal })) || "-",
-    },
-    {
-      label: "Event Berakhir",
-      value:
-        (data &&
-          data?.tanggalSelesai &&
-          dateTimeView({ date: data?.tanggalSelesai })) ||
-        "-",
-    },
-    {
-      label: "Deskripsi",
-      value: (data && data?.deskripsi) || "-",
-    },
-  ];
-
-  const rightComponent = (
-    <ActionIcon
-      icon={<IconDot size={ICON_SIZE_BUTTON} />}
-      onPress={() => {
-        setOpenDrawer(true);
-      }}
-    />
-  );
-
-  const handlerSubmit = async () => {
-    try {
-      const response = await funUpdateStatusEvent({
-        id: id as string,
-        changeStatus: "publish",
-        data: { catatan: "", senderId: user?.id as string },
-      });
-
-      if (!response.success) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mempublikasikan event",
-        });
-        return;
-      }
-
-      Toast.show({
-        type: "success",
-        text1: "Event berhasil dipublikasikan",
-      });
-      router.back();
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminBackButtonAntTitle
-            title={`Detail Data`}
-            rightComponent={
-              (status === "publish" || status === "history") && rightComponent
-            }
-          />
-        }
-      >
-        <BaseBox>
-          <StackCustom>
-            {listData.map((item, i) => (
-              <GridSpan_4_8
-                key={i}
-                label={<TextCustom bold>{item.label}</TextCustom>}
-                value={<TextCustom>{item.value}</TextCustom>}
-              />
-            ))}
-          </StackCustom>
-
-          <Spacing />
-        </BaseBox>
-
-        {data &&
-          data?.catatan &&
-          (status === "reject" || status === "review") && (
-            <ReportBox text={data?.catatan} />
-          )}
-
-        {(status === "publish" || status === "history") && (
-          <BaseBox>
-            <StackCustom style={{ alignItems: "center" }}>
-              <TextCustom bold>QR Code Event</TextCustom>
-              {loadData ? (
-                <LoaderCustom />
-              ) : (
-                <QRCode
-                  value={isDevLink}
-                  size={200}
-                  // logo={require("@/assets/images/logo-hipmi.png")}
-                  // logoSize={70}
-                  // logoBackgroundColor="transparent"
-                  // logoBorderRadius={50}
-                  // color="black"
-                />
-              )}
-
-              <TextCustom align="center">{isDevLink}</TextCustom>
-            </StackCustom>
-          </BaseBox>
-        )}
-
-        {status === "review" && (
-          <AdminButtonReview
-            onPublish={() => {
-              AlertDefaultSystem({
-                title: "Publish",
-                message: "Apakah anda yakin ingin mempublikasikan data ini?",
-                textLeft: "Batal",
-                textRight: "Ya",
-                onPressRight: () => handlerSubmit(),
-              });
-            }}
-            onReject={() => {
-              router.push(`/admin/event/${id}/reject-input?status=${status}`);
-            }}
-          />
-        )}
-
-        {status === "reject" && (
-          <AdminButtonReject
-            title="Tambah Catatan"
-            onReject={() => {
-              router.push(`/admin/event/${id}/reject-input?status=${status}`);
-            }}
-          />
-        )}
-        <Spacing />
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              label: "Daftar Peserta",
-              icon: <IconList />,
-              path: `/admin/event/${id}/list-of-participants`,
-            },
-          ]}
-          onPressItem={(item) => {
-            setOpenDrawer(false);
-            router.push(item.path as any);
-          }}
-        />
-      </DrawerCustom>
-    </>
-  );
+  return <Admin_ScreenEventDetail />;
 }

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

@@ -1,105 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BadgeCustom,
-  BaseBox,
-  Grid,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { apiAdminEventListOfParticipants } from "@/service/api-admin/api-admin-event";
-import dayjs, { Dayjs } from "dayjs";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { View } from "moti";
-import { useCallback, useState } from "react";
+import { Admin_ScreenEventListOfParticipants } from "@/screens/Admin/Event/ScreenEventListOfParticipants";
 
 export default function AdminEventListOfParticipants() {
-  const { id } = useLocalSearchParams();
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadData, setLoadData] = useState(false);
-  const [startDate, setStartDate] = useState<Dayjs | undefined>();
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminEventListOfParticipants({
-        id: id as string,
-      });
-
-      console.log("[DATA]", JSON.stringify(response, null, 2));
-
-      if (response.success) {
-        setListData(response.data);
-        setStartDate(dayjs(response.data.Event.tanggal));
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={<AdminBackButtonAntTitle title="Daftar Peserta" />}
-      >
-        {loadData ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center" color="gray">
-            Belum ada peserta
-          </TextCustom>
-        ) : (
-          listData?.map((item: any, index: number) => (
-            <BaseBox key={index}>
-              <Grid>
-                <Grid.Col span={6}>
-                  <StackCustom gap={"sm"}>
-                    <TextCustom bold truncate>
-                      {item?.User?.username}
-                    </TextCustom>
-                    <TextCustom>+{item?.User?.nomor}</TextCustom>
-                  </StackCustom>
-                </Grid.Col>
-                <Grid.Col span={6} style={{ justifyContent: "center" }}>
-                  {startDate &&
-                  startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
-                    <BadgeCustom
-                      style={{ alignSelf: "flex-end" }}
-                      color={item?.isPresent ? "green" : "red"}
-                    >
-                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
-                    </BadgeCustom>
-                  ) : (
-                    <View
-                      style={{
-                        justifyContent: "flex-end",
-                      }}
-                    >
-                      <BadgeCustom
-                        style={{ alignSelf: "flex-end" }}
-                        color="gray"
-                      >
-                        -
-                      </BadgeCustom>
-                    </View>
-                  )}
-                </Grid.Col>
-              </Grid>
-            </BaseBox>
-          ))
-        )}
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenEventListOfParticipants />;
 }

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

@@ -1,135 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  ClickableCustom,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminEvent } from "@/service/api-admin/api-admin-event";
-import { dateTimeView } from "@/utils/dateTimeView";
-import { Octicons } from "@expo/vector-icons";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenEventStatus } from "@/screens/Admin/Event/ScreenEventStatus";
 
 export default function AdminEventStatus() {
-  const { status } = useLocalSearchParams();
-  console.log("[STATUS EVENT]", status);
-
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadData, setLoadData] = useState(false);
-  const [search, setSearch] = useState<string>("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [status, search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminEvent({
-        category: status as "publish" | "review" | "reject" | "history" as any,
-        search,
-      });
-
-      console.log(
-        `[RES LIST BY STATUS: ${status}]`,
-        JSON.stringify(response, null, 2)
-      );
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari"
-      value={search}
-      onChangeText={(value) => setSearch(value)}
-    />
-  );
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
-        <AdminComp_BoxTitle
-          title={`${_.startCase(status as string)}`}
-          rightComponent={rightComponent}
-        />
-
-        <StackCustom gap={"sm"}>
-          <AdminTitleTable
-            title1="Username"
-            title2="Tanggal"
-            title3="Judul Event"
-          />
-          <Divider />
-
-          {loadData ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listData) ? (
-            <TextCustom align="center" size="small" color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            listData?.map((item, index) => (
-              <ClickableCustom
-                key={index}
-                onPress={() => {
-                  router.push(`/admin/event/${item.id}/${status}`);
-                }}
-              >
-                <AdminTableValue
-                  key={index}
-                  value1={
-                    <TextCustom truncate={1}>
-                      {item?.Author?.username || "-"}
-                    </TextCustom>
-                    // <ActionIcon
-                    //   icon={
-                    //     <Octicons
-                    //       name="eye"
-                    //       size={ICON_SIZE_BUTTON}
-                    //       color="black"
-                    //     />
-                    //   }
-                    //   onPress={() => {
-                    //     router.push(`/admin/event/${item.id}/${status}`);
-                    //   }}
-                    // />
-                  }
-                  value2={
-                    <TextCustom truncate={1}>
-                      {dateTimeView({ date: item?.tanggal })}
-                    </TextCustom>
-                  }
-                  value3={
-                    <TextCustom truncate={2}>{item?.title || "-"}</TextCustom>
-                  }
-                />
-                <Divider/>
-              </ClickableCustom>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenEventStatus />;
 }

app/(application)/admin/event/type-of-event.tsx

@@ -1,129 +1,5 @@
-import {
-  ActionIcon,
-  BadgeCustom,
-  CenterCustom,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import { IconEdit } from "@/components/_Icon";
-import AdminActionIconPlus from "@/components/_ShareComponent/Admin/ActionIconPlus";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminMasterTypeOfEvent } from "@/service/api-admin/api-master-admin";
-import { colorActivationForBadge } from "@/utils/colorActivationForBadge";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenEventTypeOfEvent } from "@/screens/Admin/Voting/ScreenEventTypeOfEvent";
 
 export default function AdminEventTypeOfEvent() {
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadData, setLoadData] = useState<boolean>(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminMasterTypeOfEvent();
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]",error);
-      setListData([]);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Event" />}>
-        <AdminComp_BoxTitle
-          title="Tipe Acara"
-          rightComponent={
-            <AdminActionIconPlus
-              onPress={() => {
-                router.push(`/admin/event/type-create`);
-              }}
-            />
-          }
-        />
-
-        <>
-          <GridViewCustomSpan
-            span1={2}
-            span2={5}
-            span3={5}
-            component1={
-              <TextCustom bold align="center">
-                Aksi
-              </TextCustom>
-            }
-            component2={<TextCustom bold align="center">Status</TextCustom>}
-            component3={<TextCustom bold>Tipe Acara</TextCustom>}
-          />
-          <Divider />
-          <Spacing />
-
-          <StackCustom>
-            {loadData ? (
-              <LoaderCustom />
-            ) : _.isEmpty(listData) ? (
-              <TextCustom align="center" color="gray">
-                Belum ada data
-              </TextCustom>
-            ) : (
-              listData?.map((item, index) => (
-                <View key={index}>
-                  <GridViewCustomSpan
-                    span1={2}
-                    span2={5}
-                    span3={5}
-                    component1={
-                      <CenterCustom>
-                        <ActionIcon
-                          icon={
-                            <IconEdit size={ICON_SIZE_BUTTON} color="black" />
-                          }
-                          onPress={() => {
-                            router.push(`/admin/event/type-update?id=${item.id}`);
-                          }}
-                        />
-                      </CenterCustom>
-                    }
-                    style2={{ alignItems: "center" }}
-                    component2={
-                      <CenterCustom>
-                        <BadgeCustom
-                          color={colorActivationForBadge({
-                            status: item?.active,
-                          })}
-                        >
-                          {item?.active ? "Aktif" : "Tidak Aktif"}
-                        </BadgeCustom>
-                      </CenterCustom>
-                    }
-                    component3={<TextCustom >{item.name}</TextCustom>}
-                  />
-                </View>
-              ))
-            )}
-          </StackCustom>
-        </>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenEventTypeOfEvent />;
 }

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

@@ -26,7 +26,7 @@ export default function AdminForumDetailPosting() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -72,6 +72,10 @@ export default function AdminForumDetailPosting() {
       label: "Total Report",
       value: data?.JumlahReportPosting || 0,
     },
+    {
+      label: "Postingan",
+      value: (data && data?.diskusi) || "-",
+    },
   ];
 
   return (
@@ -111,13 +115,6 @@ export default function AdminForumDetailPosting() {
             ))}
           </StackCustom>
         </BaseBox>
-
-        <BaseBox>
-          <StackCustom gap={"sm"}>
-            <TextCustom bold>Postingan</TextCustom>
-            <TextCustom>{(data && data?.diskusi) || "-"}</TextCustom>
-          </StackCustom>
-        </BaseBox>
       </ViewWrapper>
 
       <DrawerCustom

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

@@ -1,91 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-    LoaderCustom,
-    StackCustom,
-    TextCustom,
-    ViewWrapper
-} from "@/components";
-import { IconOpenTo } from "@/components/_Icon/IconOpenTo";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenForumListComment } from "@/screens/Admin/Forum/ScreenForumListComment";
 
 export default function AdminForumListComment() {
-  const { id } = useLocalSearchParams();
-  const [listComment, setListComment] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadComment();
-    }, [id])
-  );
-
-  const onLoadComment = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminForumCommentById({
-        id: id as string,
-        category: "get-all",
-      });
-
-      if (response.success) {
-        setListComment(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setListComment([]);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={<AdminBackButtonAntTitle title="Daftar Komentar" />}
-      >
-        <StackCustom>
-          <AdminTitleTable title1="Aksi" title2="Report" title3="Komentar" />
-          <Divider />
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listComment) ? (
-            <TextCustom align="center" color="gray">
-              Tidak ada komentar
-            </TextCustom>
-          ) : (
-            listComment?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <IconOpenTo
-                    onPress={() => {
-                      router.push(
-                        `/admin/forum/${item.id}/list-report-comment`
-                      );
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.countReport || 0}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-
-    </>
-  );
+  return <Admin_ScreenForumListComment />;
 }

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

@@ -1,262 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  AlertDefaultSystem,
-  BaseBox,
-  CenterCustom,
-  DrawerCustom,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconDot, IconView } from "@/components/_Icon/IconComponent";
-import { IconTrash } from "@/components/_Icon/IconTrash";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  apiAdminForumCommentById,
-  apiAdminForumDeactivateComment,
-  apiAdminForumListReportCommentById,
-} from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
-import Toast from "react-native-toast-message";
+import { Admin_ScreenForumDetailReportComment } from "@/screens/Admin/Forum/ScreenForumDetailReportComment";
 
 export default function AdminForumReportComment() {
-  const { id } = useLocalSearchParams();
-  const { user } = useAuth();
-  const [data, setData] = useState<any | null>(null);
-  const [listReport, setListReport] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [openDrawerAction, setOpenDrawerAction] = useState(false);
-  const [selectedReport, setSelectedReport] = useState({
-    id: "",
-    username: "",
-    kategori: "",
-    keterangan: "",
-    deskripsi: "",
-  });
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminForumCommentById({
-        id: id as string,
-        category: "get-one",
-      });
-
-      const responseReport = await apiAdminForumListReportCommentById({
-        id: id as string,
-      });
-
-      if (response.success) {
-        setData(response.data);
-      }
-      if (responseReport.success) {
-        setListReport(responseReport.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setData(null);
-      setListReport([]);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminBackButtonAntTitle
-            title="Report Komentar"
-            rightComponent={
-              <ActionIcon
-                icon={<IconDot size={16} color={MainColor.darkblue} />}
-                onPress={() => setOpenDrawer(true)}
-              />
-            }
-          />
-        }
-      >
-        <BaseBox>
-          <StackCustom gap={"sm"}>
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Username</TextCustom>}
-              text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
-            />
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Komentar</TextCustom>}
-              text2={<TextCustom>{data?.komentar || "-"}</TextCustom>}
-            />
-          </StackCustom>
-        </BaseBox>
-
-        <AdminComp_BoxTitle title="Daftar Report Komentar" />
-
-        <StackCustom gap={"sm"}>
-          <GridSpan_NewComponent
-            text1={
-              <TextCustom bold align="center">
-                Aksi
-              </TextCustom>
-            }
-            text2={<TextCustom bold>Pelapor</TextCustom>}
-            text3={<TextCustom bold>Kategori Report</TextCustom>}
-          />
-          <Divider />
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listReport) ? (
-            <TextCustom align="center" color="gray">
-              Tidak ada report
-            </TextCustom>
-          ) : (
-            listReport?.map((item: any, index: number) => (
-              <View key={index}>
-                <GridSpan_NewComponent
-                  text1={
-                    <CenterCustom>
-                      <ActionIcon
-                        icon={
-                          <IconView size={ICON_SIZE_BUTTON} color="black" />
-                        }
-                        onPress={() => {
-                          setOpenDrawerAction(true);
-                          setSelectedReport({
-                            id: item.id,
-                            username: item.User?.username,
-                            kategori: item.ForumMaster_KategoriReport?.title,
-                            keterangan:
-                              item.ForumMaster_KategoriReport?.deskripsi,
-                            deskripsi: item.deskripsi,
-                          });
-                        }}
-                      />
-                    </CenterCustom>
-                  }
-                  text2={
-                    <TextCustom truncate={1}>
-                      {item?.User?.username || "-"}
-                    </TextCustom>
-                  }
-                  text3={
-                    <TextCustom truncate={2}>
-                      {item?.ForumMaster_KategoriReport?.title || "-"}
-                    </TextCustom>
-                  }
-                />
-                <Divider />
-              </View>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              icon: <IconTrash />,
-              label: "Hapus Komentar",
-              value: "delete",
-              path: "",
-              color: MainColor.red,
-            },
-          ]}
-          onPressItem={(item) => {
-            AlertDefaultSystem({
-              title: "Hapus Komentar",
-              message: "Apakah Anda yakin ingin menghapus komentar ini?",
-              textLeft: "Batal",
-              textRight: "Hapus",
-              onPressRight: async () => {
-                const deleteComment = await apiAdminForumDeactivateComment({
-                  id: id as string,
-                  data: {
-                    senderId: user?.id as string,
-                  },
-                });
-
-                // if (!deleteComment.success) {
-                //   Toast.show({
-                //     type: "error",
-                //     text1: "Komentar gagal dihapus",
-                //   });
-                //   return;
-                // }
-
-                setOpenDrawer(false);
-                Toast.show({
-                  type: "success",
-                  text1: "Komentar berhasil dihapus",
-                });
-                router.back();
-              },
-            });
-          }}
-        />
-      </DrawerCustom>
-
-      <DrawerCustom
-        isVisible={openDrawerAction}
-        closeDrawer={() => setOpenDrawerAction(false)}
-        height={"auto"}
-      >
-        <StackCustom>
-          <GridSpan_4_8
-            label={<TextCustom bold>Pelapor</TextCustom>}
-            value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
-          />
-
-          {selectedReport?.kategori && (
-            <>
-              <GridSpan_4_8
-                label={<TextCustom bold>Kategori Report</TextCustom>}
-                value={
-                  <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
-                }
-              />
-              <GridSpan_4_8
-                label={<TextCustom bold>Keterangan</TextCustom>}
-                value={
-                  <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
-                }
-              />
-            </>
-          )}
-
-          {selectedReport?.deskripsi && (
-            <GridSpan_4_8
-              label={<TextCustom bold>Deskripsi</TextCustom>}
-              value={
-                <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>
-              }
-            />
-          )}
-        </StackCustom>
-      </DrawerCustom>
-    </>
-  );
+  return <Admin_ScreenForumDetailReportComment />;
 }

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

@@ -1,283 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  AlertDefaultSystem,
-  BadgeCustom,
-  BaseBox,
-  CenterCustom,
-  DrawerCustom,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconDot, IconView } from "@/components/_Icon/IconComponent";
-import { IconTrash } from "@/components/_Icon/IconTrash";
-import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  apiAdminForumDeactivatePosting,
-  apiAdminForumListReportPostingById,
-  apiAdminForumPostingById,
-} from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
-import Toast from "react-native-toast-message";
+import { Admin_ScreenForumDetailReportPosting } from "@/screens/Admin/Forum/ScreenForumDetailReportPosting";
 
-export default function AdminForumReportPosting() {
-  const { user } = useAuth();
-  const { id } = useLocalSearchParams();
-  const [openDrawerPage, setOpenDrawerPage] = useState(false);
-  const [openDrawerAction, setOpenDrawerAction] = useState(false);
-
-  const [data, setData] = useState<any | null>(null);
-  const [listReport, setListReport] = useState<any[] | null>(null);
-  const [loadListReport, setLoadListReport] = useState(false);
-  const [selectedReport, setSelectedReport] = useState({
-    id: "",
-    username: "",
-    kategori: "",
-    keterangan: "",
-    deskripsi: "",
-  });
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadListReport(true);
-      const response = await apiAdminForumPostingById({
-        id: id as string,
-      });
-
-      const responseReport = await apiAdminForumListReportPostingById({
-        id: id as string,
-      });
-
-      if (response.success) {
-        setData(response.data);
-      }
-
-      if (responseReport.success) {
-        setListReport(responseReport.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadListReport(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminBackButtonAntTitle
-            title="Report Posting"
-            rightComponent={
-              <ActionIcon
-                icon={<IconDot size={16} color={MainColor.darkblue} />}
-                onPress={() => setOpenDrawerPage(true)}
-              />
-            }
-          />
-        }
-      >
-        <BaseBox>
-          <StackCustom gap={"sm"}>
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Username</TextCustom>}
-              text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
-            />
-
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Status</TextCustom>}
-              text2={
-                data && data?.ForumMaster_StatusPosting?.status ? (
-                  <BadgeCustom
-                    color={
-                      data?.ForumMaster_StatusPosting?.status === "Open"
-                        ? MainColor.green
-                        : MainColor.red
-                    }
-                  >
-                    {data?.ForumMaster_StatusPosting?.status === "Open"
-                      ? "Open"
-                      : "Close"}
-                  </BadgeCustom>
-                ) : (
-                  <TextCustom>{"-"}</TextCustom>
-                )
-              }
-            />
-
-            <GridSpan_NewComponent
-              text1={<TextCustom bold>Postingan</TextCustom>}
-              text2={<TextCustom>{data?.diskusi || "-"}</TextCustom>}
-            />
-          </StackCustom>
-        </BaseBox>
-
-        <AdminComp_BoxTitle title="Daftar Report Posting" />
-        <StackCustom gap={"sm"}>
-          <GridSpan_NewComponent
-            text1={
-              <TextCustom bold align="center">
-                Aksi
-              </TextCustom>
-            }
-            text2={<TextCustom bold>Pelapor</TextCustom>}
-            text3={<TextCustom bold>Kategori Report</TextCustom>}
-          />
-          <Divider />
-          {loadListReport ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listReport) ? (
-            <TextCustom align="center" color={"gray"}>
-              Belum ada report
-            </TextCustom>
-          ) : (
-            listReport?.map((item: any, index: number) => (
-              <View key={index}>
-                <GridSpan_NewComponent
-                  text1={
-                    <CenterCustom>
-                      <ActionIcon
-                        icon={
-                          <IconView size={ICON_SIZE_BUTTON} color="black" />
-                        }
-                        onPress={() => {
-                          setOpenDrawerAction(true);
-                          setSelectedReport({
-                            id: item?.id,
-                            username: item?.User?.username,
-                            kategori: item?.ForumMaster_KategoriReport?.title,
-                            keterangan:
-                              item?.ForumMaster_KategoriReport?.deskripsi,
-                            deskripsi: item?.deskripsi,
-                          });
-                        }}
-                      />
-                    </CenterCustom>
-                  }
-                  text2={
-                    <TextCustom truncate>
-                      {item?.User?.username || "-"}
-                    </TextCustom>
-                  }
-                  text3={
-                    <TextCustom truncate={2}>
-                      {item?.ForumMaster_KategoriReport?.title || "-"}
-                    </TextCustom>
-                  }
-                />
-                <Divider />
-              </View>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawerPage}
-        closeDrawer={() => setOpenDrawerPage(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              icon: <IconTrash />,
-              label: "Hapus Posting",
-              value: "delete",
-              path: "",
-              color: MainColor.red,
-            },
-          ]}
-          onPressItem={(item) => {
-            AlertDefaultSystem({
-              title: "Hapus Posting",
-              message: "Apakah Anda yakin ingin menghapus posting ini?",
-              textLeft: "Batal",
-              textRight: "Hapus",
-              onPressRight: async () => {
-                const response = await apiAdminForumDeactivatePosting({
-                  id: id as string,
-                  data: {
-                    senderId: user?.id as string,
-                  },
-                });
-
-                if (!response.success) {
-                  Toast.show({
-                    type: "error",
-                    text1: "Posting gagal dihapus",
-                  });
-                  return;
-                }
-
-                setOpenDrawerPage(false);
-                Toast.show({
-                  type: "success",
-                  text1: "Posting berhasil dihapus",
-                });
-                router.back();
-              },
-            });
-          }}
-        />
-      </DrawerCustom>
-
-      <DrawerCustom
-        isVisible={openDrawerAction}
-        closeDrawer={() => setOpenDrawerAction(false)}
-        height={"auto"}
-      >
-        <StackCustom>
-          <GridSpan_4_8
-            label={<TextCustom bold>Pelapor</TextCustom>}
-            value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
-          />
-
-          {selectedReport?.kategori && (
-            <>
-              <GridSpan_4_8
-                label={<TextCustom bold>Kategori Report</TextCustom>}
-                value={
-                  <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
-                }
-              />
-              <GridSpan_4_8
-                label={<TextCustom bold>Keterangan</TextCustom>}
-                value={
-                  <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
-                }
-              />
-            </>
-          )}
-
-          {selectedReport?.deskripsi && (
-            <GridSpan_4_8
-              label={<TextCustom bold>Deskripsi</TextCustom>}
-              value={
-                <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>
-              }
-            />
-          )}
-        </StackCustom>
-      </DrawerCustom>
-    </>
-  );
+export default function AdminForumDetailReportPosting() {
+  return <Admin_ScreenForumDetailReportPosting />;
 }

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

@@ -1,121 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ClickableCustom,
-  LoaderCustom,
-  SearchInput,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
-import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenForumPosting } from "@/screens/Admin/Forum/ScreenForumPosting";
 
 export default function AdminForumPosting() {
-  const [list, setList] = useState<any | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [search, setSearch] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      handlerLoadList();
-    }, [search])
-  );
-
-  const handlerLoadList = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminForum({
-        category: "posting",
-        search: search,
-      });
-
-      console.log("DATA", JSON.stringify(response, null, 2));
-
-      if (response.success) {
-        setList(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari postingan"
-      value={search}
-      onChangeText={setSearch}
-    />
-  );
-
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
-        <AdminComp_BoxTitle title={"Posting"} rightComponent={rightComponent} />
-        <GridSpan_NewComponent
-          text1={<TextCustom bold truncate>Username</TextCustom>}
-          text2={<TextCustom bold truncate> Postingan</TextCustom>}
-          text3={<TextCustom bold align="center" truncate> Report Posting</TextCustom>}
-          text4={<TextCustom bold align="center" truncate> Komentar</TextCustom>}
-        />
-        <Divider />
-        <Spacing />
-        <StackCustom>
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(list) ? (
-            <TextCustom align="center" color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            list?.map((item: any, index: number) => (
-              <View key={index}>
-                <ClickableCustom
-                  onPress={() => {
-                    router.push(`/admin/forum/${item.id}`);
-                  }}
-                >
-                  <GridSpan_NewComponent
-                    text1={
-                      <TextCustom truncate={1}>
-                        {item?.Author?.username || "-"}
-                      </TextCustom>
-                    }
-                    text2={
-                      <TextCustom truncate>
-                        {item?.diskusi || "-"}
-                      </TextCustom>
-                    }
-                    text3={
-                      <TextCustom align="center" truncate={2}>
-                        {item?.reportPosting || "-"}
-                      </TextCustom>
-                    } 
-                    text4={
-                      <TextCustom align="center" truncate={2}>
-                        {item?.komentar || "-"}
-                      </TextCustom>
-                    }
-                  />
-
-                </ClickableCustom>
-                <Divider />
-              </View>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenForumPosting />;
 }

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

@@ -1,137 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  ClickableCustom,
-  LoaderCustom,
-  SearchInput,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconView } from "@/components/_Icon/IconComponent";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenForumReportComment } from "@/screens/Admin/Forum/ScreenForumReportComment";
 
 export default function AdminForumReportComment() {
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState<boolean>(false);
-  const [search, setSearch] = useState<string>("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadList(true);
-
-      const response = await apiAdminForum({
-        category: "report_comment",
-        search: search,
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari Komentar"
-      value={search}
-      onChangeText={setSearch}
-    />
-  );
-
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
-        <AdminComp_BoxTitle
-          title="Report Komentar"
-          rightComponent={rightComponent}
-        />
-
-        <GridSpan_NewComponent
-          text1={
-            <TextCustom bold truncate>
-              Pelapor
-            </TextCustom>
-          }
-          text2={
-            <TextCustom bold truncate>
-              Komentar
-            </TextCustom>
-          }
-          text3={
-            <TextCustom bold truncate>
-              Jenis Laporan
-            </TextCustom>
-          }
-        />
-        <Divider />
-        <Spacing />
-        <StackCustom gap={"lg"}>
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listData) ? (
-            <TextCustom align="center" color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            listData?.map((item: any, index: number) => (
-              <View key={index}>
-                <ClickableCustom
-                  onPress={() => {
-                    router.push(
-                      `/admin/forum/${item?.Forum_Komentar?.id}/list-report-comment`
-                    );
-                  }}
-                >
-                  <GridSpan_NewComponent
-                    text1={
-                      <TextCustom truncate={1}>
-                        {item?.User?.username || "-"}
-                      </TextCustom>
-                    }
-                    text2={
-                      <TextCustom truncate={2}>
-                        {item?.Forum_Komentar?.komentar || "-"}
-                      </TextCustom>
-                    }
-                    text3={
-                      <TextCustom truncate={2}>
-                        {item?.ForumMaster_KategoriReport?.title || "-"}
-                      </TextCustom>
-                    }
-                  />
-                </ClickableCustom>
-                <Spacing />
-                <Divider />
-              </View>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenForumReportComment />;
 }

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

@@ -1,124 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  ClickableCustom,
-  Divider,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconView } from "@/components/_Icon/IconComponent";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import { Admin_ScreenForumReportPosting } from "@/screens/Admin/Forum/ScreenForumReportPosting";
 
 export default function AdminForumReportPosting() {
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState<boolean>(false);
-  const [search, setSearch] = useState<string>("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadList(true);
-
-      const response = await apiAdminForum({
-        category: "report_posting",
-        search: search,
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari Postingan"
-      value={search}
-      onChangeText={setSearch}
-    />
-  );
-
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
-        <AdminComp_BoxTitle
-          title="Report Posting"
-          rightComponent={rightComponent}
-        />
-
-        <GridSpan_NewComponent
-          text1={
-            <TextCustom bold truncate>
-              Pelapor
-            </TextCustom>
-          }
-          text2={
-            <TextCustom bold truncate>
-              Postingan
-            </TextCustom>
-          }
-        />
-        <Divider />
-        <StackCustom>
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listData) ? (
-            <TextCustom align="center" color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            listData?.map((item: any, index: number) => (
-              <View key={index}>
-                <ClickableCustom
-                  onPress={() => {
-                    router.push(
-                      `/admin/forum/${item?.Forum_Posting?.id}/list-report-posting`
-                    );
-                  }}
-                >
-                  <GridSpan_NewComponent
-                    text1={
-                      <TextCustom truncate={1}>
-                        {item?.User?.username || "-"}
-                      </TextCustom>
-                    }
-                    text2={
-                      <TextCustom truncate={1}>
-                        {item?.Forum_Posting?.diskusi || "-"}
-                      </TextCustom>
-                    }
-                  />
-                </ClickableCustom>
-                <Divider />
-              </View>
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenForumReportPosting />;
 }

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

@@ -20,6 +20,7 @@ import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButt
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
@@ -182,9 +183,9 @@ export default function AdminInvestmentDetail() {
 
         <BaseBox>
           <StackCustom>
-            <GridSpan_4_8
-              label={<TextCustom bold>File Prospektus</TextCustom>}
-              value={
+            <GridTwoView
+              leftItem={<TextCustom bold>File Prospektus</TextCustom>}
+              rightItem={
                 <ButtonCustom
                   iconLeft={
                     <IconProspectus
@@ -202,9 +203,10 @@ export default function AdminInvestmentDetail() {
                 </ButtonCustom>
               }
             />
-            <GridSpan_4_8
-              label={<TextCustom bold>File Dokumen</TextCustom>}
-              value={
+            <GridTwoView
+
+              leftItem={<TextCustom bold>File Dokumen</TextCustom>}
+              rightItem={
                 <StackCustom>
                   {_.isEmpty(data?.DokumenInvestasi) ? (
                     <TextCustom align="center">-</TextCustom>

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

@@ -1,13 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AlertDefaultSystem,
-  BadgeCustom,
-  BaseBox,
-  ButtonCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+    AlertDefaultSystem,
+    BadgeCustom,
+    BaseBox,
+    ButtonCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
@@ -15,8 +15,8 @@ import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import {
-  apiAdminInvestmentGetOneInvoiceById,
-  apiAdminInvestmentUpdateInvoice,
+    apiAdminInvestmentGetOneInvoiceById,
+    apiAdminInvestmentUpdateInvoice,
 } from "@/service/api-admin/api-admin-investment";
 import { colorBadgeTransaction } from "@/utils/colorBadge";
 import { dateTimeView } from "@/utils/dateTimeView";
@@ -60,7 +60,7 @@ export default function AdminInvestmentTransactionDetail() {
       value: (data && data?.MasterBank?.namaBank) || "-",
     },
     {
-      label: "Jumlah Investasi",
+      label: "Nominal",
       value: (data && `Rp. ${formatCurrencyDisplay(data?.nominal)}`) || "-",
     },
     {
@@ -158,7 +158,7 @@ export default function AdminInvestmentTransactionDetail() {
           spanRight={6}
           styleLeft={{ paddingRight: 10 }}
           styleRight={{ paddingLeft: 10 }}
-          leftIcon={
+          leftItem={
             <ButtonCustom
               disabled={isLoading}
               isLoading={isLoading}
@@ -181,7 +181,7 @@ export default function AdminInvestmentTransactionDetail() {
               Tolak
             </ButtonCustom>
           }
-          rightIcon={
+          rightItem={
             <ButtonCustom
               disabled={isLoading}
               isLoading={isLoading}

app/(application)/admin/investment/[id]/list-of-investor.tsx

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

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

@@ -1,113 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminInvestment } from "@/service/api-admin/api-admin-investment";
-import { Octicons } from "@expo/vector-icons";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import React, { useCallback } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenInvestmentStatus } from "@/screens/Admin/Investment/ScreenInvestmentStatus";
 
 export default function AdminInvestmentStatus() {
-  const { status } = useLocalSearchParams();
-  const [listData, setListData] = React.useState<any[] | null>(null);
-  const [loadData, setLoadingData] = React.useState(false);
-  const [search, setSearch] = React.useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [status, search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadingData(true);
-      const response = await apiAdminInvestment({
-        category: status as "publish" | "review" | "reject",
-        search,
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log(error);
-      setListData([]);
-    } finally {
-      setLoadingData(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari"
-      value={search}
-      onChangeText={setSearch}
-    />
-  );
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Investasi" />}>
-        <StackCustom gap={"sm"}>
-          <AdminComp_BoxTitle
-            title={`${_.startCase(status as string)}`}
-            rightComponent={rightComponent}
-          />
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Investasi"
-          />
-
-          <Divider />
-
-          {loadData ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listData) ? (
-            <NoDataText />
-          ) : (
-            listData?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/investment/${item.id}/${status}`);
-                    }}
-                  />
-                }
-                value2={<TextCustom truncate={1}>{item?.author?.username}</TextCustom>}
-                value3={
-                  <TextCustom truncate={2}>
-                   {item?.title}
-                  </TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenInvestmentStatus />;
 }

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

@@ -5,6 +5,7 @@ import {
   BaseBox,
   DummyLandscapeImage,
   Grid,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextCustom,
@@ -120,7 +121,7 @@ export default function AdminJobDetailStatus() {
 
   return (
     <>
-      <ViewWrapper
+      <NewWrapper
         headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
       >
         <BaseBox>
@@ -184,7 +185,7 @@ export default function AdminJobDetailStatus() {
           />
         )}
         <Spacing />
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -2,6 +2,7 @@
 import {
   AlertDefaultSystem,
   BoxButtonOnFooter,
+  NewWrapper,
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
@@ -100,7 +101,7 @@ export default function AdminJobRejectInput() {
 
   return (
     <>
-      <ViewWrapper
+      <NewWrapper
         footerComponent={buttonSubmit}
         headerComponent={<AdminBackButtonAntTitle title="Penolakan Job" />}
       >
@@ -112,7 +113,7 @@ export default function AdminJobRejectInput() {
           showCount
           maxLength={1000}
         />
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -1,117 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminJob } from "@/service/api-admin/api-admin-job";
-import { Octicons } from "@expo/vector-icons";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenJobStatus } from "@/screens/Admin/Job/ScreenJobStatus";
 
 export default function AdminJobStatus() {
-  const { status } = useLocalSearchParams();
-  const [list, setList] = useState<any | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [search, setSearch] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      handlerLoadList();
-    }, [status, search])
-  );
-
-  const handlerLoadList = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminJob({
-        category: status as "publish" | "review" | "reject",
-        search,
-      });
-
-      if (response.success) {
-        setList(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      placeholder="Cari"
-      onChangeText={setSearch}
-      value={search}
-    />
-  );
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Job Vacancy" />}>
-        <AdminComp_BoxTitle
-          title={`${_.startCase(status as string)}`}
-          rightComponent={rightComponent}
-        />
-
-        <StackCustom>
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Pekerjaan"
-          />
-          {/* <Spacing /> */}
-          <Divider />
-
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(list) ? (
-            <TextCustom align="center" color="gray">
-              Tidak ada data
-            </TextCustom>
-          ) : (
-            list?.map((item: any, index: number) => (
-              <AdminTableValue
-                key={index}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/job/${item.id}/${status}`);
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom align="center" truncate={1}>
-                    {item?.Author?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2} align="center">
-                    {item?.title || "-"}
-                  </TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenJobStatus />;
 }

app/(application)/admin/maps.tsx

@@ -1,31 +1,22 @@
-import { ButtonCustom, DrawerCustom, DummyLandscapeImage, Grid, Spacing, StackCustom, TextCustom, ViewWrapper } from "@/components";
+import {
+    ButtonCustom,
+    DrawerCustom,
+    DummyLandscapeImage,
+    Grid,
+    Spacing,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
+} from "@/components";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
-import API_IMAGE from "@/constants/api-storage";
+import { MapMarker, MapsV2Custom } from "@/components/Map/MapsV2Custom";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { apiMapsGetAll } from "@/service/api-client/api-maps";
 import { openInDeviceMaps } from "@/utils/openInDeviceMaps";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
 import { router, useFocusEffect } from "expo-router";
 import { useCallback, useState } from "react";
-import { View } from "react-native";
-import MapView, { Marker } from "react-native-maps";
 
-const defaultRegion = {
-  latitude: -8.737109,
-  longitude: 115.1756897,
-  latitudeDelta: 0.1,
-  longitudeDelta: 0.1,
-  height: 300,
-};
-
-export interface LocationItem {
-  id: string | number;
-  latitude: number;
-  longitude: number;
-  name: string;
-  imageId?: string;
-}
 export default function AdminMaps() {
   const [list, setList] = useState<any[] | null>(null);
   const [loadList, setLoadList] = useState(false);
@@ -45,7 +36,7 @@ export default function AdminMaps() {
   useFocusEffect(
     useCallback(() => {
       handlerLoadList();
-    }, [])
+    }, []),
   );
 
   const handlerLoadList = async () => {
@@ -63,74 +54,30 @@ export default function AdminMaps() {
     }
   };
 
+  const markers: MapMarker[] = list?.map((item) => ({
+    id: item.id,
+    coordinate: [item.longitude, item.latitude] as [number, number],
+    imageId: item.Portofolio?.logoId,
+    onSelected: () => {
+      setOpenDrawer(true);
+      setSelected({
+        id: item?.id,
+        bidangBisnis: item?.Portofolio?.MasterBidangBisnis?.name,
+        nomorTelepon: item?.Portofolio?.tlpn,
+        alamatBisnis: item?.Portofolio?.alamatKantor,
+        namePin: item?.namePin,
+        imageId: item?.imageId,
+        portofolioId: item?.Portofolio?.id,
+        latitude: item?.latitude,
+        longitude: item?.longitude,
+      });
+    },
+  })) || [];
+
   return (
     <>
       <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
-        {/* <MapCustom height={"100%"} /> */}
-        <View style={{ flex: 1 }}>
-          {loadList ? (
-            <MapView
-              initialRegion={defaultRegion}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          ) : (
-            <MapView
-              initialRegion={defaultRegion}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            >
-              {list?.map((item: any, index: number) => {
-                return (
-                  <Marker
-                    key={item?.id}
-                    coordinate={{
-                      latitude: item?.latitude,
-                      longitude: item?.longitude,
-                    }}
-                    title={item?.namePin}
-                    onPress={() => {
-                      setOpenDrawer(true);
-                      setSelected({
-                        id: item?.id,
-                        bidangBisnis:
-                          item?.Portofolio?.MasterBidangBisnis?.name,
-                        nomorTelepon: item?.Portofolio?.tlpn,
-                        alamatBisnis: item?.Portofolio?.alamatKantor,
-                        namePin: item?.namePin,
-                        imageId: item?.imageId,
-                        portofolioId: item?.Portofolio?.id,
-                        latitude: item?.latitude,
-                        longitude: item?.longitude,
-                      });
-                    }}
-                    // Gunakan gambar kustom jika tersedia
-                  >
-                    <View>
-                      <Image
-                        source={{
-                          uri: API_IMAGE.GET({
-                            fileId: item?.Portofolio?.logoId,
-                          }),
-                        }}
-                        style={{
-                          width: 30,
-                          height: 30,
-                          borderRadius: 100,
-                          borderWidth: 1,
-                        }}
-                      />
-                    </View>
-                  </Marker>
-                );
-              })}
-            </MapView>
-          )}
-        </View>
+        <MapsV2Custom markers={markers} />
       </ViewWrapper>
 
       <DrawerCustom
@@ -138,58 +85,60 @@ export default function AdminMaps() {
         closeDrawer={() => setOpenDrawer(false)}
         height={"auto"}
       >
-        <DummyLandscapeImage height={200} imageId={selected.imageId} />
+        {selected.imageId && (
+          <DummyLandscapeImage height={200} imageId={selected.imageId} />
+        )}
         <Spacing />
         <StackCustom gap={"xs"}>
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <FontAwesome
                 name="building-o"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>{selected.namePin}</TextCustom>}
+            rightItem={<TextCustom>{selected.namePin}</TextCustom>}
           />
 
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <Ionicons
                 name="list-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>{selected.bidangBisnis}</TextCustom>}
+            rightItem={<TextCustom>{selected.bidangBisnis}</TextCustom>}
           />
 
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <Ionicons
                 name="call-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>+{selected.nomorTelepon}</TextCustom>}
+            rightItem={<TextCustom>+{selected.nomorTelepon}</TextCustom>}
           />
           <GridTwoView
             spanLeft={2}
             spanRight={10}
-            leftIcon={
+            leftItem={
               <Ionicons
                 name="location-outline"
                 size={ICON_SIZE_SMALL}
                 color="white"
               />
             }
-            rightIcon={<TextCustom>{selected.alamatBisnis}</TextCustom>}
+            rightItem={<TextCustom>{selected.alamatBisnis}</TextCustom>}
           />
 
           <Grid>

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

@@ -1,17 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
-  ButtonCustom,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+    BoxButtonOnFooter,
+    ButtonCustom,
+    LoaderCustom,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import {
-  apiAdminUserAccessGetById,
-  apiAdminUserAccessUpdateStatus,
+    apiAdminUserAccessGetById,
+    apiAdminUserAccessUpdateStatus,
 } from "@/service/api-admin/api-admin-user-access";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
@@ -26,7 +26,7 @@ export default function SuperAdminDetail() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -48,7 +48,7 @@ export default function SuperAdminDetail() {
       const response = await apiAdminUserAccessUpdateStatus({
         id: id as string,
         role: data?.masterUserRoleId === "2" ? "user" : "admin",
-        category: "role"
+        category: "role",
       });
 
       if (!response.success) {
@@ -102,8 +102,8 @@ export default function SuperAdminDetail() {
                 key={index}
                 spanLeft={4}
                 spanRight={8}
-                leftIcon={<TextCustom bold>{item?.label}</TextCustom>}
-                rightIcon={<TextCustom>{item?.value}</TextCustom>}
+                leftItem={<TextCustom bold>{item?.label}</TextCustom>}
+                rightItem={<TextCustom>{item?.value}</TextCustom>}
               />
             ))}
           </StackCustom>

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

@@ -1,18 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  BoxButtonOnFooter,
-  ButtonCustom,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
+    BoxButtonOnFooter,
+    ButtonCustom,
+    LoaderCustom,
+    StackCustom,
+    TextCustom,
+    ViewWrapper,
 } from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import { useAuth } from "@/hooks/use-auth";
 import {
-  apiAdminUserAccessGetById,
-  apiAdminUserAccessUpdateStatus,
+    apiAdminUserAccessGetById,
+    apiAdminUserAccessUpdateStatus,
 } from "@/service/api-admin/api-admin-user-access";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
@@ -28,7 +28,7 @@ export default function AdminUserAccessDetail() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -102,8 +102,8 @@ export default function AdminUserAccessDetail() {
                 key={index}
                 spanLeft={4}
                 spanRight={8}
-                leftIcon={<TextCustom bold>{item?.label}</TextCustom>}
-                rightIcon={<TextCustom>{item?.value}</TextCustom>}
+                leftItem={<TextCustom bold>{item?.label}</TextCustom>}
+                rightItem={<TextCustom>{item?.value}</TextCustom>}
               />
             ))}
           </StackCustom>

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

@@ -1,139 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BadgeCustom,
-  CenterCustom,
-  Divider,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
-import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
-import { Ionicons } from "@expo/vector-icons";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import { Admin_ScreenUserAccess } from "@/screens/Admin/User-Access/ScreenUserAccess";
 
 export default function AdminUserAccess() {
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [search, setSearch] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      const response = await apiAdminUserAccessGetAll({
-        search: search,
-        category: "only-user",
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR LOAD DATA]", error);
-    }
-  };
-
-  const rightComponent = () => {
-    return (
-      <>
-        <SearchInput
-          containerStyle={{ width: "100%", marginBottom: 0 }}
-          placeholder="Cari User"
-          onChangeText={(text) => setSearch(text)}
-        />
-      </>
-    );
-  };
-  return (
-    <>
-      <ViewWrapper
-        headerComponent={
-          <AdminComp_BoxTitle
-            title="User Access"
-            rightComponent={rightComponent()}
-          />
-        }
-      >
-        <GridViewCustomSpan
-          span1={2}
-          span2={5}
-          span3={5}
-          component1={
-            <TextCustom align="center" bold>
-              Aksi
-            </TextCustom>
-          }
-          component2={<TextCustom bold>Username</TextCustom>}
-          component3={
-            <TextCustom align="center" bold>
-              Status Akses
-            </TextCustom>
-          }
-        />
-
-        <Divider />
-
-        <StackCustom>
-          {_.isEmpty(listData) ? (
-            <TextCustom align="center" color="gray" size={"small"}>
-              Tidak ada data
-            </TextCustom>
-          ) : (
-            listData?.map((item: any, index: number) => (
-              <GridViewCustomSpan
-                key={index}
-                span1={2}
-                span2={5}
-                span3={5}
-                component1={
-                  <CenterCustom>
-                    <Ionicons
-                      onPress={() =>
-                        router.push(`/admin/user-access/${item?.id}`)
-                      }
-                      name="open"
-                      size={ICON_SIZE_XLARGE}
-                      color={MainColor.yellow}
-                    />
-                  </CenterCustom>
-                  // <ButtonCustom
-                  //   onPress={() =>
-                  //     router.push(`/admin/user-access/${item?.id}`)
-                  //   }
-                  // >
-                  //   Detail
-                  // </ButtonCustom>
-                }
-                component2={
-                  <TextCustom bold truncate>
-                    {item?.username || "-"}
-                  </TextCustom>
-                }
-                component3={
-                  <CenterCustom>
-                    {item?.active ? (
-                      <BadgeCustom color="green">Aktif</BadgeCustom>
-                    ) : (
-                      <BadgeCustom color="red">Tidak Aktif</BadgeCustom>
-                    )}
-                  </CenterCustom>
-                }
-                style3={{ alignItems: "center", justifyContent: "center" }}
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenUserAccess />;
 }

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

@@ -5,6 +5,7 @@ import {
   BaseBox,
   CircleContainer,
   Grid,
+  NewWrapper,
   Spacing,
   StackCustom,
   TextCustom,
@@ -13,7 +14,7 @@ import {
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
 import AdminButtonReject from "@/components/_ShareComponent/Admin/ButtonReject";
 import AdminButtonReview from "@/components/_ShareComponent/Admin/ButtonReview";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import ReportBox from "@/components/Box/ReportBox";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
@@ -40,7 +41,7 @@ export default function AdminVotingDetail() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [id])
+    }, [id]),
   );
 
   const onLoadData = async () => {
@@ -169,26 +170,28 @@ export default function AdminVotingDetail() {
 
   return (
     <>
-      <ViewWrapper
+      <NewWrapper
+        hideFooter
         headerComponent={<AdminBackButtonAntTitle title={`Detail Data`} />}
       >
         <BaseBox>
           <StackCustom>
             {listData.map((item, i) => (
-              <GridSpan_4_8
+              <GridTwoView
                 key={i}
-                label={<TextCustom bold>{item.label}</TextCustom>}
-                value={<TextCustom>{item.value}</TextCustom>}
+                spanLeft={5}
+                spanRight={7}
+                leftItem={<TextCustom bold>{item.label}</TextCustom>}
+                rightItem={<TextCustom>{item.value}</TextCustom>}
               />
             ))}
           </StackCustom>
         </BaseBox>
 
-        {status === "publish" ||
-          (status === "history" && (
-            <BaseBox>
-              <TextCustom bold align="center">
-                Hasil Voting
+        {(status === "publish" || status === "history") && (
+          <BaseBox>
+            <TextCustom bold align="center">
+              Hasil Voting
               </TextCustom>
               <Spacing />
               <Grid>
@@ -209,11 +212,11 @@ export default function AdminVotingDetail() {
                         </TextCustom>
                       </StackCustom>
                     </Grid.Col>
-                  )
+                  ),
                 )}
               </Grid>
             </BaseBox>
-          ))}
+          )}
 
         {data &&
           data?.catatan &&
@@ -250,7 +253,7 @@ export default function AdminVotingDetail() {
           />
         )}
         <Spacing />
-      </ViewWrapper>
+      </NewWrapper>
     </>
   );
 }

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

@@ -1,117 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  ActionIcon,
-  LoaderCustom,
-  SearchInput,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
-import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
-import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
-import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
-import { apiAdminVoting } from "@/service/api-admin/api-admin-voting";
-import { Octicons } from "@expo/vector-icons";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenVotingStatus } from "@/screens/Admin/Voting/ScreenVotingStatus";
 
 export default function AdminVotingStatus() {
-  const { status } = useLocalSearchParams();
-  const [list, setList] = useState<any | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [search, setSearch] = useState<string>("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [status, search])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiAdminVoting({
-        category: status as "publish" | "review" | "reject" as any,
-        search,
-      });
-
-      if (response.success) {
-        setList(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const rightComponent = (
-    <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
-      placeholder="Cari"
-      value={search}
-      onChangeText={setSearch}
-    />
-  );
-  return (
-    <>
-      <ViewWrapper headerComponent={<AdminTitlePage title="Voting" />}>
-        <AdminComp_BoxTitle
-          title={`${_.startCase(status as string)}`}
-          rightComponent={rightComponent}
-        />
-
-        <StackCustom gap={"sm"}>
-          <AdminTitleTable
-            title1="Aksi"
-            title2="Username"
-            title3="Judul Voting"
-          />
-          <Divider />
-
-          {loadList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(list) ? (
-            <TextCustom align="center" bold color="gray">
-              Belum ada data
-            </TextCustom>
-          ) : (
-            list.map((item: any, i: number) => (
-              <AdminTableValue
-                key={i}
-                value1={
-                  <ActionIcon
-                    icon={
-                      <Octicons
-                        name="eye"
-                        size={ICON_SIZE_BUTTON}
-                        color="black"
-                      />
-                    }
-                    onPress={() => {
-                      router.push(`/admin/voting/${item.id}/${status}`);
-                    }}
-                  />
-                }
-                value2={
-                  <TextCustom truncate={1}>
-                    {item?.Author?.username || "-"}
-                  </TextCustom>
-                }
-                value3={
-                  <TextCustom truncate={2}>
-                    {item?.title || "-"}
-                  </TextCustom>
-                }
-              />
-            ))
-          )}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenVotingStatus />;
 }