delete comment

Fixed Admin UI
Admin – Donation Pages - app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx - app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx - app/(application)/admin/donation/[id]/list-of-donatur.tsx - app/(application)/admin/donation/[status]/status.tsx - app/(application)/admin/donation/category-update.tsx - app/(application)/admin/donation/category.tsx Admin Services - service/api-admin/api-admin-donation.ts - service/api-admin/api-master-admin.ts Admin Screens (Updated) - screens/Admin/Voting/ScreenEventTypeOfEvent.tsx Docs - docs/prompt-for-qwen-code.md New Donation Components - screens/Admin/Donation/BoxDonationCategory.tsx - screens/Admin/Donation/BoxDonationListDisbursementOfFunds.tsx - screens/Admin/Donation/BoxDonationListOfDonatur.tsx - screens/Admin/Donation/BoxDonationStatus.tsx New Donation Screens - screens/Admin/Donation/ScreenDonationCategory.tsx - screens/Admin/Donation/ScreenDonationListDisbursementOfFunds.tsx - screens/Admin/Donation/ScreenDonationListOfDonatur.tsx - screens/Admin/Donation/ScreenDonationStatus.tsx ### No Issue"
2026-02-18 17:20:28 +08:00 · 2026-02-18 17:19:46 +08:00 · 2026-02-18 14:28:15 +08:00 · 2026-02-14 15:33:42 +08:00 · 2026-02-14 11:57:27 +08:00 · 2026-02-13 17:38:48 +08:00
198 changed files with 11308 additions and 6836 deletions
--- a/QWEN.md
+++ b/QWEN.md
@@ -1,179 +1,282 @@
-# HIPMI Mobile Application - Development Guide
+# HIPMI Mobile Application - Development Context

 ## Project Overview

-HIPMI Badung Connect is a mobile application built with Expo and React Native. It serves as a connection platform for HIPMI (Himpunan Pengusaha Muda Indonesia) Badung members, featuring authentication, user management, and various business-related functionalities.
+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 (0.81.4)
- **Architecture**: File-based routing with Expo Router
- **State Management**: React Context API
- **Styling**: React Native components with custom color palettes
- **Authentication**: Token-based authentication with OTP verification
- **Database**: AsyncStorage for local storage
- **Maps**: React Native Maps and Mapbox integration
- **Notifications**: Expo Notifications and Firebase Messaging
+- **Framework**: Expo (v54.0.0) with React Native (v0.81.4)
 - **Language**: TypeScript
+- **Architecture**: File-based routing with Expo Router
+- **State Management**: Context API
+- **UI Components**: React Native Paper, custom components
+- **Maps Integration**: Mapbox Maps for React Native
+- **Push Notifications**: React Native Firebase Messaging
+- **Build System**: Metro bundler

 ### Project Structure
 ```
 hipmi-mobile/
-├── app/                    # File-based routing structure
-│   ├── (application)/      # Main application screens
-│   │   ├── (file)/         # File management screens
-│   │   ├── (image)/        # Image management screens
-│   │   ├── (user)/         # User-specific screens
-│   │   └── admin/          # Admin-specific screens
-│   ├── _layout.tsx         # Root layout wrapper
-│   ├── index.tsx           # Home screen
-│   ├── eula.tsx            # Terms and conditions screen
-│   ├── register.tsx        # Registration screen
-│   └── verification.tsx    # OTP verification screen
-├── assets/                 # Static assets (images, icons)
+├── app/                    # Main application screens and routing
+│   ├── _layout.tsx         # Root layout component
+│   ├── index.tsx           # Entry point (Login screen)
+│   └── ...
 ├── components/             # Reusable UI components
-├── constants/              # Configuration constants
-├── context/                # React Context providers
+├── context/                # State management (AuthContext)
+├── screens/                # Screen components organized by feature
+│   ├── Admin/              # Admin panel screens
+│   ├── Authentication/     # Login, registration flows
+│   ├── Collaboration/      # Collaboration features
+│   ├── Event/              # Event management
+│   ├── Forum/              # Forum functionality
+│   ├── Home/               # Home screen
+│   ├── Maps/               # Map integration
+│   ├── Profile/            # User profile
+│   └── ...
+├── assets/                 # Images, icons, and static assets
+├── constants/              # Constants and configuration values
+├── helpers/                # Helper functions (pagination, etc.)
 ├── hooks/                  # Custom React hooks
-├── screens/                # Screen components
-├── service/                # API services and configurations
+├── lib/                    # Utility libraries
+├── navigation/             # Navigation configuration
+├── service/                # API services and business logic
 ├── types/                  # TypeScript type definitions
-├── app.config.js           # Expo configuration
-├── package.json            # Dependencies and scripts
-└── ...
+└── utils/                  # Helper functions
 ```

 ## Building and Running

 ### Prerequisites
- Node.js (with bun >=1.0.0 as specified in package.json)
- Expo CLI or bun installed globally
+- Node.js (with bun as the package manager)
+- Expo CLI
+- iOS Simulator or Android Emulator (for native builds)
+- Android Studio (for Android builds)
+- Xcode (for iOS builds, macOS only)

-### Setup Instructions
-1. **Install dependencies**:
+### Setup and Development
+
+1. **Install Dependencies**
   ```bash
   bun install
-   # or if using npm
-   npm install
   ```

-2. **Environment Variables**:
-   Create a `.env` file with the following variables:
-   ```
-   API_BASE_URL=your_api_base_url
-   BASE_URL=your_base_url
-   DEEP_LINK_URL=your_deep_link_url
-   ```
-
-3. **Start the development server**:
+2. **Run Development Server**
   ```bash
-   # Using bun (as specified in package.json)
   bun run start
-   # or using expo directly
-   npx expo start
   ```
-
-4. **Platform-specific commands**:
+   Or use the shorthand:
   ```bash
-   # Android
-   bun run android
-   # iOS
-   bun run ios
-   # Web
-   bun run web
+   bunx expo start
   ```

-### EAS Build Configuration
-The project uses Expo Application Services (EAS) for building and deployment:
- Development builds: `eas build --profile development`
- Preview builds: `eas build --profile preview`
- Production builds: `eas build --profile production`
+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`

-## Authentication Flow
+4. **Linting**
+   ```bash
+   bun run lint
+   ```

-The application implements a phone number-based authentication system with OTP verification:
+### Build Commands

-1. **Login**: User enters phone number → OTP sent via SMS
-2. **Verification**: User enters OTP code → Validates and creates session
-3. **Registration**: If user doesn't exist, registration flow is triggered
-4. **Terms Agreement**: User must accept terms and conditions
-5. **Session Management**: Tokens stored in AsyncStorage
+#### EAS Build (Production)
+```bash
+# Production build
+eas build --profile production

-### Key Authentication Functions
- `loginWithNomor()`: Initiates OTP sending
- `validateOtp()`: Verifies OTP and creates session
- `registerUser()`: Registers new users
- `logout()`: Clears session and removes tokens
- `acceptedTerms()`: Handles terms acceptance
+# Preview build
+eas build --profile preview

-## Key Features
+# Development build
+eas build --profile development
+```

-### User Management
- Phone number-based registration and login
- OTP verification system
- Terms and conditions agreement
- User profile management
+#### Local Native Builds
+```bash
+# Generate native folders (iOS & Android)
+npx expo prebuild

-### Business Features
- Business field management (admin section)
- File and image management capabilities
- Location services integration
- Push notifications
+# iOS specific
+bunx expo prebuild --platform ios
+open ios/HIPMIBADUNG.xcworkspace

-### UI Components
- Custom color palette with blue/yellow theme
- Responsive layouts using SafeAreaView
- Toast notifications for user feedback
- Bottom tab navigation and drawer navigation
+# Android specific
+bunx expo prebuild --platform android
+```
+
+#### Version Management
+```bash
+# Patch version update
+npm version patch
+```
+
+### Android Debugging
+```bash
+# List connected devices
+adb devices
+
+# Install APK to device/emulator
+adb install android/app/build/outputs/apk/debug/app-debug.apk
+
+# Install to specific device
+adb -s <device_id> install android/app/build/outputs/apk/debug/app-debug.apk
+```
+
+## Environment Variables
+
+The application uses environment variables defined in the `app.config.js` file:
+- `API_BASE_URL`: Base URL for API endpoints
+- `BASE_URL`: Base application URL
+- `DEEP_LINK_URL`: URL for deep linking functionality
+
+Create a `.env` file in the project root with these variables.
+
+## EAS Build Configuration
+
+The project uses Expo Application Services (EAS) for building and deploying:
+- **Development**: Development builds with development client
+- **Preview**: Internal distribution builds (APK for Android)
+- **Production**: App store builds (App Bundle for Android, IPA for iOS)
+
+Configuration is in `eas.json`.
+
+## Features and Functionality
+
+The application includes several key modules:
+- **Authentication**: Login with phone number, OTP verification, registration, terms acceptance
+- **Admin Panel**: Administrative functions for managing content and users
+- **Collaboration**: Tools for member collaboration
+- **Events**: Event management and calendar
+- **Forum**: Discussion forums
+- **Maps**: Location-based services with Mapbox integration
+- **Donations**: Donation functionality with fund disbursement tracking
+- **Job Board**: Employment opportunities
+- **Investment**: Investment-related features
+- **Voting**: Voting systems
+- **Portfolio**: Member portfolio showcase
+- **Notifications**: Push notifications via Firebase

 ## Development Conventions

-### Naming Conventions
- Components: PascalCase (e.g., `UserProfile.tsx`)
- Functions: camelCase (e.g., `getUserData()`)
- Constants: UPPER_SNAKE_CASE (e.g., `API_BASE_URL`)
- Files: kebab-case or camelCase for utility files
+### Coding Standards
+- TypeScript is used throughout the project for type safety
+- Component-based architecture with reusable components
+- Context API for state management (AuthContext)
+- File-based routing with Expo Router
+- Consistent naming conventions using camelCase for variables and PascalCase for components
+- Path aliases: `@/*` maps to project root

-### Code Organization
- Components are organized by feature/functionality
- API services are centralized in the `service/` directory
- Type definitions are maintained in the `types/` directory
- Constants are grouped by category in the `constants/` directory
+### Architecture Patterns

-### Styling Approach
- Color palette defined in `constants/color-palet.ts`
- Reusable styles and themes centralized
- Responsive design using React Native's flexbox system
+#### Screen Components
+- Screen components are stored in `/screens` directory organized by feature
+- Route files in `/app` import and use screen components
+- Example pattern:
+  ```tsx
+  // app/some-route.tsx
+  import SomeScreen from "@/screens/Feature/ScreenSome";
+  
+  export default function SomeRoute() {
+    return <SomeScreen />;
+  }
+  ```
+
+#### Wrapper Components
+- `NewWrapper` component is used for consistent screen layouts
+- Located at `components/_ShareComponent/NewWrapper.tsx`
+
+#### Pagination Pattern
+- Use `hooks/use-pagination.tsx` and `helpers/paginationHelpers.tsx`
+- Helper functions: `createSkeletonList`, `createEmptyState`, `createLoadingFooter`, `createPaginationComponents`
+- API functions should accept `page` parameter (default: "1")
+
+### API Service Structure
+- Base API configuration: `service/api-config.ts`
+- Client APIs: `service/api-client/`
+- Admin APIs: `service/api-admin/`
+- All API calls use axios with interceptors for auth token injection

 ### Testing
- Linting: `bun run lint` (uses ESLint with Expo config)
- No specific test framework mentioned in package.json
+- Linting is configured with ESLint
+- Standard Expo linting configuration

-## Environment Configuration
+### Security
+- Firebase is integrated for authentication and messaging
+- Camera and location permissions are properly configured
+- Deep linking is secured with app domain associations
+- Auth tokens stored in AsyncStorage

-The application supports multiple environments through:
- Environment variables loaded via dotenv
- Expo's extra configuration in `app.config.js`
- Platform-specific configurations for iOS and Android
+## Key Dependencies

-### Supported Platforms
- iOS (with tablet support)
- Android (with adaptive icons)
- Web (static output)
+### Core Dependencies
+- `@react-navigation/*`: Navigation solution for React Native
+- `@react-native-firebase/*`: Firebase integration for React Native
+- `@rnmapbox/maps`: Mapbox integration for React Native
+- `expo-router`: File-based routing for Expo applications
+- `react-native-paper`: Material Design components for React Native
+- `react-native-toast-message`: Toast notifications
+- `react-native-otp-entry`: OTP input components
+- `react-native-qrcode-svg`: QR code generation
+- `axios`: HTTP client for API calls
+- `lodash`: Utility library
+- `moti`: Animation library

-## Third-party Integrations
+### Development Dependencies
+- `@types/*`: TypeScript type definitions
+- `eslint-config-expo`: Expo-specific ESLint configuration
+- `typescript`: Type checking

- **Firebase**: Authentication, messaging, and analytics
- **Mapbox**: Advanced mapping capabilities
- **React Navigation**: Screen navigation and routing
- **React Native Paper**: Material Design components
- **Axios**: HTTP client for API requests
- **Lodash**: Utility functions
- **QR Code SVG**: QR code generation
+## Platform Support

-## Important Configuration Files
+The application is configured to support:
+- **iOS**: 
+  - Bundle identifier: `com.anonymous.hipmi-mobile`
+  - Supports tablets
+  - Build number: 21
+  - Google Services integration
+  - Associated domains for deep linking
+- **Android**: 
+  - Package name: `com.bip.hipmimobileapp`
+  - Version code: 4
+  - Adaptive icons
+  - Edge-to-edge display enabled
+  - Intent filters for HTTPS deep linking
+- **Web**: Static output configuration for web deployment

- `app.config.js`: Expo configuration, app metadata, and plugin setup
- `eas.json`: EAS build profiles and submission configuration
- `tsconfig.json`: TypeScript compiler options
- `package.json`: Dependencies, scripts, and project metadata
- `metro.config.js`: Metro bundler configuration
+## Special Configurations
+
+### Deep Linking
+- Scheme: `hipmimobile://`
+- Associated domains: `applinks:cld-dkr-staging-hipmi.wibudev.com`
+- Configured for both iOS and Android
+
+### Maps Integration
+The application uses Mapbox for mapping functionality with the `@rnmapbox/maps` plugin.
+
+### Push Notifications
+Firebase Cloud Messaging is integrated for push notifications with proper configuration for both iOS and Android platforms.
+
+### Camera
+Camera permissions configured for both iOS and Android with microphone access for recording.
+
+## Common Development Tasks
+
+### Adding a New Screen
+1. Create screen component in appropriate `/screens` subdirectory
+2. Add route in `/app` directory if needed
+3. Configure navigation in `AppRoot.tsx` if custom header is needed
+
+### Adding API Endpoint
+1. Add function in appropriate service file (`service/api-client/` or `service/api-admin/`)
+2. Use `apiConfig` axios instance for requests
+3. Include proper error handling
+
+### Refactoring Pattern (from docs/prompt-for-qwen-code.md)
+When moving code from route files to screen components:
+1. Create new file in `screens/<Feature>/` directory
+2. Rename function with prefix (e.g., `Admin_`, `Donation_`)
+3. Use `NewWrapper` component for consistent layout
+4. Apply pagination helpers if displaying lists
+5. Import and call from original route file
--- a/app.config.js
+++ b/app.config.js
@@ -21,7 +21,7 @@ export default {
        "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
    },
    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
-    buildNumber: "20",
+    buildNumber: "21",
  },

  android: {
--- a/app/(application)/(user)/donation/(tabs)/index.tsx
+++ b/app/(application)/(user)/donation/(tabs)/index.tsx
@@ -1,56 +1,9 @@
-import {
-  FloatingButton,
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import { apiDonationGetAll } from "@/service/api-client/api-donation";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Donation_ScreenBeranda from "@/screens/Donation/ScreenBeranda";

 export default function DonationBeranda() {
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiDonationGetAll({
-        category: "beranda"
-      });
-
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
  return (
-    <ViewWrapper
-      hideFooter
-      floatingButton={
-        <FloatingButton onPress={() => router.push("/donation/create")} />
-      }
-    >
-      {loadList ? (
-        <LoaderCustom />
-      ) : _.isEmpty(list) ? (
-        <TextCustom align="center" color="gray">Belum ada donasi</TextCustom>
-      ) : (
-        list?.map((item: any, index: number) => (
-          <Donation_BoxPublish data={item} key={index} id={item.id} />
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Donation_ScreenBeranda />
+    </>
  );
 }
--- a/app/(application)/(user)/donation/(tabs)/my-donation.tsx
+++ b/app/(application)/(user)/donation/(tabs)/my-donation.tsx
@@ -1,148 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BadgeCustom,
-  BaseBox,
-  DummyLandscapeImage,
-  Grid,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { apiDonationGetAll } from "@/service/api-client/api-donation";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import { Href, router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import Toast from "react-native-toast-message";
+import Donation_ScreenMyDonation from "@/screens/Donation/ScreenMyDonation";

 export default function DonationMyDonation() {
-  const { user } = useAuth();
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id]),
-  );
-
-  const onLoadData = async () => {
-    if (!user?.id) {
-      Toast.show({
-        type: "error",
-        text1: "Load data gagal, user tidak ditemukan",
-      });
-      return;
-    }
-
-    try {
-      setLoadList(true);
-      const response = await apiDonationGetAll({
-        category: "my-donation",
-        authorId: user?.id,
-      });
-      
-
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const handlerColor = (status: string) => {
-    if (status === "menunggu") {
-      return "orange";
-    } else if (status === "proses") {
-      return "white";
-    } else if (status === "berhasil") {
-      return "green";
-    } else if (status === "gagal") {
-      return "red";
-    }
-  };
-
-  const handlePress = ({
-    invoiceId,
-    donationId,
-    status,
-  }: {
-    invoiceId: string;
-    donationId: string;
-    status: string;
-  }) => {
-    const url: Href = `../${donationId}/(transaction-flow)/${invoiceId}`;
-    if (status === "menunggu") {
-      router.push(`${url}/invoice`);
-    } else if (status === "proses") {
-      router.push(`${url}/process`);
-    } else if (status === "berhasil") {
-      router.push(`${url}/success`);
-    } else if (status === "gagal") {
-      router.push(`${url}/failed`);
-    }
-  };
-
-  return (
-    <ViewWrapper hideFooter>
-      {loadList ? (
-        <LoaderCustom />
-      ) : _.isEmpty(list) ? (
-        <TextCustom align="center" color="gray">
-          Belum ada transaksi
-        </TextCustom>
-      ) : (
-        list?.map((item, index) => (
-          <BaseBox
-            key={index}
-            paddingTop={7}
-            paddingBottom={7}
-            onPress={() => {
-              handlePress({
-                status: _.lowerCase(item.statusInvoice),
-                invoiceId: item.id,
-                donationId: item.donasiId,
-              });
-            }}
-          >
-            <Grid>
-              <Grid.Col span={5}>
-                <DummyLandscapeImage
-                  height={100}
-                  unClickPath
-                  imageId={item.imageId}
-                />
-              </Grid.Col>
-              <Grid.Col span={1}>
-                <View />
-              </Grid.Col>
-              <Grid.Col span={6}>
-                <StackCustom>
-                  <TextCustom truncate={2} bold>
-                    {item.title || "-"}
-                  </TextCustom>
-
-                  <TextCustom bold color="yellow">
-                    Rp. {formatCurrencyDisplay(item.nominal)}
-                  </TextCustom>
-
-                  <BadgeCustom
-                    variant="light"
-                    color={handlerColor(_.lowerCase(item.statusInvoice))}
-                    fullWidth
-                  >
-                    {item.statusInvoice}
-                  </BadgeCustom>
-                </StackCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
-  );
+  return <Donation_ScreenMyDonation />;
 }
--- a/app/(application)/(user)/donation/(tabs)/status.tsx
+++ b/app/(application)/(user)/donation/(tabs)/status.tsx
@@ -1,82 +1,10 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  LoaderCustom,
-  ScrollableCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import Donasi_BoxStatus from "@/screens/Donation/BoxStatus";
-import { apiDonationGetByStatus } from "@/service/api-client/api-donation";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Donation_ScreenStatus from "@/screens/Donation/ScreenStatus";
+import { useLocalSearchParams } from "expo-router";

 export default function DonationStatus() {
-  const { user } = useAuth();
  const { status } = useLocalSearchParams<{ status?: string }>();
-
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish",
-  );
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [activeCategory]),
-  );
-
-  const onLoadList = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiDonationGetByStatus({
-        authorId: user?.id as string,
-        status: activeCategory as string,
-      });
-
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setListData(null);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const scrollComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
+  
  return (
-    <ViewWrapper hideFooter headerComponent={scrollComponent}>
-      {loadList ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
-      ) : (
-        listData?.map((item: any, index: number) => (
-          <Donasi_BoxStatus
-            key={index}
-            data={item}
-            status={activeCategory as string}
-          />
-        ))
-      )}
-    </ViewWrapper>
+    <Donation_ScreenStatus initialStatus={status || "publish"} />
  );
 }
--- a/app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
@@ -31,7 +32,7 @@ export default function DonationEditNews() {
  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [news])
+    }, [news]),
  );

  const onLoadData = async () => {
@@ -104,7 +105,21 @@ export default function DonationEditNews() {
  };

  return (
-    <ViewWrapper>
+    <ViewWrapper
+      footerComponent={
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            disabled={!data?.title || !data?.deskripsi}
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Update
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      }
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
        <LandscapeFrameUploaded
@@ -148,15 +163,6 @@ export default function DonationEditNews() {
        />

        <Spacing />
-        <ButtonCustom
-          disabled={!data?.title || !data?.deskripsi}
-          isLoading={isLoading}
-          onPress={() => {
-            handlerSubmitUpdate();
-          }}
-        >
-          Update
-        </ButtonCustom>
      </StackCustom>
      <Spacing />
    </ViewWrapper>
--- a/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/add-news.tsx
@@ -1,8 +1,10 @@
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
+  NewWrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
@@ -53,7 +55,7 @@ export default function DonationAddNews() {
          text1: "Gagal menambah berita",
        });

-        return
+        return;
      }

      Toast.show({
@@ -70,7 +72,21 @@ export default function DonationAddNews() {
  };

  return (
-    <ViewWrapper>
+    <NewWrapper
+      footerComponent={
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            disabled={!data.title || !data.deskripsi}
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmit();
+            }}
+          >
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      }
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
        <LandscapeFrameUploaded image={image?.uri} />
@@ -116,17 +132,7 @@ export default function DonationAddNews() {
        />

        <Spacing />
-        <ButtonCustom
-          disabled={!data.title || !data.deskripsi}
-          isLoading={isLoading}
-          onPress={() => {
-            handlerSubmit();
-          }}
-        >
-          Simpan
-        </ButtonCustom>
      </StackCustom>
-      <Spacing />
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
+++ b/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
@@ -1,110 +1,8 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BackButton,
-  BaseBox,
-  DrawerCustom,
-  Grid,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconPlus } from "@/components/_Icon";
-import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
-import { formatChatTime } from "@/utils/formatChatTime";
-import {
-  router,
-  Stack,
-  useFocusEffect,
-  useLocalSearchParams,
-} from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import { useLocalSearchParams } from "expo-router";
+import Donation_ScreenListOfNews from "@/screens/Donation/ScreenListOfNews";

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

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

  const onLoadData = async () => {
@@ -100,7 +101,22 @@ export default function DonationInvoice() {

  return (
    <>
-      <ViewWrapper>
+      <ViewWrapper
+        hideFooter
+        footerComponent={
+          <BoxButtonOnFooter>
+            <ButtonCustom
+              disabled={!image}
+              isLoading={isLoading}
+              onPress={() => {
+                handlerUpdateInvoice();
+              }}
+            >
+              Simpan
+            </ButtonCustom>
+          </BoxButtonOnFooter>
+        }
+      >
        <StackCustom>
          <InformationBox
            text={`Mohon transfer donasi anda ke rekening dibawah`}
@@ -204,16 +220,6 @@ export default function DonationInvoice() {
              </ButtonCenteredOnly>
            </StackCustom>
          </BaseBox>
-
-          <ButtonCustom
-            disabled={!image}
-            isLoading={isLoading}
-            onPress={() => {
-              handlerUpdateInvoice();
-            }}
-          >
-            Simpan
-          </ButtonCustom>
        </StackCustom>
        <Spacing />
      </ViewWrapper>
--- a/app/(application)/(user)/donation/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/donation/[id]/[status]/detail.tsx
@@ -4,11 +4,12 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
+  NewWrapper,
  Spacing,
-  ViewWrapper,
 } from "@/components";
 import { IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import Donation_ButtonStatusSection from "@/screens/Donation/ButtonStatusSection";
@@ -26,18 +27,19 @@ import {
 } from "expo-router";
 import _ from "lodash";
 import { useCallback, useEffect, useState } from "react";
+import { RefreshControl } from "react-native";

 export default function DonasiDetailStatus() {
  const { id, status } = useLocalSearchParams();
  const [openDrawer, setOpenDrawer] = useState(false);
  const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
-
-  const [data, setData] = useState<any>();
+  const [refreshing, setRefreshing] = useState(false);
+  const [data, setData] = useState<any | null>(null);

  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [id])
+    }, [id]),
  );

  const onLoadData = async () => {
@@ -80,6 +82,17 @@ export default function DonasiDetailStatus() {
    });
  };

+  const onRefresh = useCallback(() => {
+    try {
+      setRefreshing(true);
+      onLoadData();
+    } catch (error) {
+      console.log("Error refresh");
+    } finally {
+      setRefreshing(false);
+    }
+  }, []);
+
  return (
    <>
      <Stack.Screen
@@ -94,31 +107,50 @@ export default function DonasiDetailStatus() {
            ) : null,
        }}
      />
-      <ViewWrapper>
-        <Donation_ComponentBoxDetailData
-          sisaHari={value.sisa}
-          reminder={value.reminder}
-          data={data}
-          bottomSection={
-            status === "publish" && (
-              <Donation_ProgressSection
+      <NewWrapper
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      >
+        {!data ? (
+          <CustomSkeleton height={400} />
+        ) : (
+          <>
+            <Donation_ComponentBoxDetailData
+              sisaHari={value.sisa}
+              reminder={value.reminder}
+              data={data}
+              showSisaHari={status === "publish" ? true : false}
+              bottomSection={
+                status === "publish" && (
+                  <Donation_ProgressSection
+                    id={id as string}
+                    progres={Number(data?.progres) || 0}
+                  />
+                )
+              }
+            />
+            <Donation_ComponentStoryFunrising
+              id={id as string}
+              dataStory={data?.CeritaDonasi}
+            />
+            <Spacing />
+            {data && (
+              <Donation_ButtonStatusSection
                id={id as string}
-                progres={Number(data?.progres) || 0}
+                status={status as string}
              />
-            )
-          }
-        />
-        <Donation_ComponentStoryFunrising
-          id={id as string}
-          dataStory={data?.CeritaDonasi}
-        />
-        <Spacing />
-        <Donation_ButtonStatusSection
-          id={id as string}
-          status={status as string}
-        />
-        <Spacing />
-      </ViewWrapper>
+            )}
+
+            <Spacing />
+          </>
+        )}
+      </NewWrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/donation/[id]/edit.tsx
+++ b/app/(application)/(user)/donation/[id]/edit.tsx
@@ -1,16 +1,19 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextInputCustom,
  ViewWrapper,
 } from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import API_IMAGE from "@/constants/api-storage";
 import DIRECTORY_ID from "@/constants/directory-id";
 import {
@@ -60,7 +63,7 @@ export default function DonationEdit() {
    useCallback(() => {
      onLoadData();
      onLoadList();
-    }, [id])
+    }, [id]),
  );

  const onLoadData = async () => {
@@ -79,7 +82,6 @@ export default function DonationEdit() {
          imageId: response.data.imageId,
        });
      }
-
    } catch (error) {
      console.log("[ERROR]", error);
    }
@@ -182,10 +184,24 @@ export default function DonationEdit() {
  };

  return (
-    <ViewWrapper>
+    <NewWrapper
+      hideFooter
+      footerComponent={
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Update
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      }
+    >
      <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
      {!data || loadList ? (
-        <LoaderCustom />
+        <ListSkeletonComponent />
      ) : (
        <StackCustom gap={"xs"}>
          <TextInputCustom
@@ -260,17 +276,9 @@ export default function DonationEdit() {
          />

          <Spacing />
-          <ButtonCustom
-            isLoading={isLoading}
-            onPress={() => {
-              handlerSubmitUpdate();
-            }}
-          >
-            Update
-          </ButtonCustom>
        </StackCustom>
      )}
      <Spacing />
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/donation/[id]/fund-disbursement.tsx
+++ b/app/(application)/(user)/donation/[id]/fund-disbursement.tsx
@@ -1,124 +1,8 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BaseBox,
-  ButtonCenteredOnly,
-  Grid,
-  InformationBox,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import {
-  apiDonationDisbursementOfFundsListById,
-  apiDonationGetOne,
-} from "@/service/api-client/api-donation";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import dayjs from "dayjs";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import React, { useState } from "react";
+import { useLocalSearchParams } from "expo-router";
+import Donation_ScreenFundDisbursement from "@/screens/Donation/ScreenFundDisbursement";

 export default function DonationFundDisbursement() {
  const { id } = useLocalSearchParams();
-
-  const [data, setData] = useState({
-    totalPencairan: 0,
-    akumulasiPencairan: 0,
-  });
-
-  const [listData, setListData] = React.useState<any[] | null>(null);
-  const [loadData, setLoadData] = React.useState(false);
-
-  useFocusEffect(
-    React.useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-
-      const responseData = await apiDonationGetOne({
-        id: id as string,
-        category: "permanent",
-      });
-
-      if (responseData.success) {
-        setData({
-          totalPencairan: responseData.data.totalPencairan,
-          akumulasiPencairan: responseData.data.akumulasiPencairan,
-        });
-      }
-
-      const responseList = await apiDonationDisbursementOfFundsListById({
-        id: id as string,
-      });
-
-      if (responseList.success) {
-        setListData(responseList.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper>
-        <InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
-        <BaseBox>
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom bold color="yellow">
-                Rp. {formatCurrencyDisplay(data?.totalPencairan)}
-              </TextCustom>
-              <TextCustom size="small">Total Pencairan Dana</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <TextCustom bold color="yellow">
-                {data?.akumulasiPencairan} kali
-              </TextCustom>
-              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
-            </Grid.Col>
-          </Grid>
-        </BaseBox>
-
-        {loadData ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center" color="gray">
-            Belum ada data
-          </TextCustom>
-        ) : (
-          listData?.map((item, index) => (
-            <BaseBox key={index}>
-              <StackCustom>
-                <Grid>
-                  <Grid.Col span={8}>
-                    <TextCustom bold>{item?.title}</TextCustom>
-                  </Grid.Col>
-                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
-                  </Grid.Col>
-                </Grid>
-                <TextCustom>{item?.deskripsi}</TextCustom>
-                <ButtonCenteredOnly
-                  onPress={() => {
-                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
-                  }}
-                  icon="file-text"
-                >
-                  Bukti Transaksi
-                </ButtonCenteredOnly>
-              </StackCustom>
-            </BaseBox>
-          ))
-        )}
-      </ViewWrapper>
-    </>
-  );
+  
+  return <Donation_ScreenFundDisbursement donationId={id as string} />;
 }
--- a/app/(application)/(user)/donation/[id]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -6,10 +6,12 @@ import {
  DotButton,
  DrawerCustom,
  MenuDrawerDynamicGrid,
+  NewWrapper,
  StackCustom,
  ViewWrapper,
 } from "@/components";
 import { IconNews } from "@/components/_Icon";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { useAuth } from "@/hooks/use-auth";
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
@@ -34,7 +36,7 @@ export default function DonasiDetailBeranda() {
  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [id])
+    }, [id]),
  );

  const onLoadData = async () => {
@@ -75,10 +77,10 @@ export default function DonasiDetailBeranda() {
    <>
      <BoxButtonOnFooter>
        <ButtonCustom
-          disabled={value?.reminder}
+          disabled={value?.reminder || !data}
          onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
        >
-          {value?.reminder ? "Waktu berakhir" : "Donasi"}
+          {!data ? "Loading..." : value?.reminder ? "Waktu berakhir" : "Donasi"}
        </ButtonCustom>
      </BoxButtonOnFooter>
    </>
@@ -96,21 +98,30 @@ export default function DonasiDetailBeranda() {
            ) : null,
        }}
      />
-      <ViewWrapper footerComponent={buttonSection}>
-        <StackCustom>
-          <Donation_ComponentBoxDetailData
-            sisaHari={value.sisa}
-            reminder={value.reminder}
-            data={data}
-            bottomSection={<Donation_ProgressSection id={id as string} progres={Number(data?.progres) || 0} />}
-          />
-          <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
-          <Donation_ComponentStoryFunrising
-            id={id as string}
-            dataStory={data?.CeritaDonasi}
-          />
-        </StackCustom>
-      </ViewWrapper>
+      <NewWrapper footerComponent={buttonSection}>
+        {!data ? (
+          <CustomSkeleton height={400} />
+        ) : (
+          <StackCustom>
+            <Donation_ComponentBoxDetailData
+              sisaHari={value.sisa}
+              reminder={value.reminder}
+              data={data}
+              bottomSection={
+                <Donation_ProgressSection
+                  id={id as string}
+                  progres={Number(data?.progres) || 0}
+                />
+              }
+            />
+            <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
+            <Donation_ComponentStoryFunrising
+              id={id as string}
+              dataStory={data?.CeritaDonasi}
+            />
+          </StackCustom>
+        )}
+      </NewWrapper>

      <DrawerCustom
        isVisible={openDrawer}
--- a/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
+++ b/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
@@ -1,94 +1,8 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BaseBox,
-  Grid,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { MainColor } from "@/constants/color-palet";
-import { apiAdminDonationListOfDonaturById } from "@/service/api-admin/api-admin-donation";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import { FontAwesome6 } from "@expo/vector-icons";
-import dayjs from "dayjs";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import { useLocalSearchParams } from "expo-router";
+import Donation_ScreenListOfDonatur from "@/screens/Donation/ScreenListOfDonatur";

-export default function Donation_ListOfDonatur() {
+export default function DonationListOfDonatur() {
  const { id } = useLocalSearchParams();
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadData, setLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiAdminDonationListOfDonaturById({
-        id: id as string,
-      });
-
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
-  return (
-    <>
-      <ViewWrapper>
-        {loadData ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom bold align="center">
-            Belum ada donatur
-          </TextCustom>
-        ) : (
-          listData?.map((item: any, index: number) => (
-            <BaseBox key={index}>
-              <Grid>
-                <Grid.Col
-                  span={3}
-                  style={{ alignItems: "center", justifyContent: "center" }}
-                >
-                  <FontAwesome6
-                    name="face-smile-wink"
-                    size={50}
-                    style={{ color: MainColor.yellow }}
-                  />
-                </Grid.Col>
-                <Grid.Col span={9}>
-                  <TextCustom bold size="large">
-                    {item?.Author?.username || "-"}
-                  </TextCustom>
-                  <Spacing/>
-                  <StackCustom gap={"xs"}>
-                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
-                    <TextCustom bold size="large" color="yellow">
-                      Rp. {formatCurrencyDisplay(item?.nominal)}
-                    </TextCustom>
-                    <TextCustom>
-                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
-                    </TextCustom>
-                  </StackCustom>
-                </Grid.Col>
-              </Grid>
-            </BaseBox>
-          ))
-        )}
-      </ViewWrapper>
-    </>
-  );
+  
+  return <Donation_ScreenListOfDonatur donationId={id as string} />;
 }
--- a/app/(application)/(user)/donation/create-story.tsx
+++ b/app/(application)/(user)/donation/create-story.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
@@ -8,8 +9,8 @@ import {
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
 import {
@@ -112,7 +113,23 @@ export default function DonationCreateStory() {
  };

  return (
-    <ViewWrapper>
+    <NewWrapper
+      hideFooter
+      footerComponent={
+        <>
+         <BoxButtonOnFooter>
+           <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmit();
+            }}
+          >
+            Simpan
+          </ButtonCustom>
+         </BoxButtonOnFooter>
+        </>
+      }
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
        <TextAreaCustom
@@ -166,18 +183,8 @@ export default function DonationCreateStory() {
          value={data.rekening}
          onChangeText={(value) => setData({ ...data, rekening: value })}
        />
-
-        <Spacing />
-        <ButtonCustom
-          isLoading={isLoading}
-          onPress={() => {
-            handlerSubmit();
-          }}
-        >
-          Simpan
-        </ButtonCustom>
      </StackCustom>
      <Spacing />
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/donation/create.tsx
+++ b/app/(application)/(user)/donation/create.tsx
@@ -1,4 +1,5 @@
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
@@ -8,8 +9,8 @@ import {
  Spacing,
  StackCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { apiDonationCreate } from "@/service/api-client/api-donation";
 import { apiMasterDonation } from "@/service/api-client/api-master";
@@ -43,7 +44,7 @@ export default function DonationCreate() {
  useFocusEffect(
    useCallback(() => {
      onLoadList();
-    }, [])
+    }, []),
  );

  const onLoadList = async () => {
@@ -125,7 +126,24 @@ export default function DonationCreate() {
  };

  return (
-    <ViewWrapper>
+    <NewWrapper
+      hideFooter
+      footerComponent={
+        <>
+          <BoxButtonOnFooter>
+            <ButtonCustom
+              isLoading={isLoading}
+              onPress={() => {
+                handlerSubmit();
+                // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
+              }}
+            >
+              Selanjutnya
+            </ButtonCustom>
+          </BoxButtonOnFooter>
+        </>
+      }
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />

@@ -201,20 +219,8 @@ export default function DonationCreate() {
            onChange={(value: any) => setData({ ...data, durasiId: value })}
          />
        )}
-
-        <Spacing />
-        <ButtonCustom
-          isLoading={isLoading}
-          onPress={() => {
-            handlerSubmit();
-            // router.push(`/donation/create-story?id=${"dasdsadsa"}`);
-          }}
-        >
-          Selanjutnya
-        </ButtonCustom>
-        <Spacing />
      </StackCustom>
      <Spacing />
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/event/(tabs)/contribution.tsx
+++ b/app/(application)/(user)/event/(tabs)/contribution.tsx
@@ -1,115 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AvatarUsernameAndOtherComponent,
-  BoxWithHeaderSection,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  apiEventGetAll
-} from "@/service/api-client/api-event";
-import { dateTimeView } from "@/utils/dateTimeView";
-import { useFocusEffect } from "expo-router";
-import _ from "lodash";
-import React, { useCallback, useState } from "react";
+import Event_ScreenContribution from "@/screens/Event/ScreenContribution";

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

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

 export default function EventBeranda() {
-  const [listData, setListData] = useState([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiEventGetAll({category: "beranda"});
-      // console.log("Response", JSON.stringify(response.data, null, 2));
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
  return (
-    <ViewWrapper
-      hideFooter
-      floatingButton={
-        <FloatingButton onPress={() => router.push("/event/create")} />
-      }
-    >
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada event</TextCustom>
-      ) : (
-        listData.map((item: any, index) => (
-
-          
-          <Event_BoxPublishSection
-            key={index}
-            href={`/event/${item.id}/publish`}
-            data={item}
-            rightComponentAvatar={
-              <TextCustom>
-                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
-              </TextCustom>
-            }
-          />
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Event_ScreenBeranda />
+    </>
  );
 }
--- a/app/(application)/(user)/event/(tabs)/status.tsx
+++ b/app/(application)/(user)/event/(tabs)/status.tsx
@@ -1,101 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BoxWithHeaderSection,
-  Grid,
-  LoaderCustom,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { apiEventGetByStatus } from "@/service/api-client/api-event";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Event_ScreenStatus from "@/screens/Event/ScreenStatus";

 export default function EventStatus() {
-  const { user } = useAuth();
-  const { status } = useLocalSearchParams<{ status?: string }>();
-
-  const id = user?.id || "";
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
-  );
-  const [listData, setListData] = useState([]);
-  const [loadingGetData, setLoadingGetData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [activeCategory, id])
-  );
-
-  async function onLoadData() {
-    try {
-      setLoadingGetData(true);
-      const response = await apiEventGetByStatus({
-        id: id!,
-        status: activeCategory!,
-      });
-      // console.log("Response", JSON.stringify(response.data, null, 2));
-      setListData(response.data);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoadingGetData(false);
-    }
-  }
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const tabsComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
-
  return (
-    <ViewWrapper headerComponent={tabsComponent}>
-      {loadingGetData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
-      ) : (
-        listData.map((item: any, i) => (
-          <BoxWithHeaderSection
-            key={i}
-            href={`/event/${item.id}/${activeCategory}/detail-event`}
-          >
-            <StackCustom gap={"xs"}>
-              <Grid>
-                <Grid.Col span={8}>
-                  <TextCustom truncate bold>
-                    {item?.title}
-                  </TextCustom>
-                </Grid.Col>
-                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                  <TextCustom>
-                    {new Date(item?.tanggal).toLocaleDateString()}
-                  </TextCustom>
-                </Grid.Col>
-              </Grid>
-
-              <TextCustom truncate={2}>{item?.deskripsi}</TextCustom>
-            </StackCustom>
-          </BoxWithHeaderSection>
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Event_ScreenStatus />
+    </>
  );
 }
--- a/app/(application)/(user)/event/[id]/edit.tsx
+++ b/app/(application)/(user)/event/[id]/edit.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BoxButtonOnFooter,
  ButtonCustom,
  LoaderCustom,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -10,6 +12,7 @@ import {
  TextInputCustom,
  ViewWrapper,
 } from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import {
  apiEventGetOne,
@@ -48,14 +51,14 @@ export default function EventEdit() {
  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [id])
+    }, [id]),
  );

  async function onLoadData() {
    try {
      setIsLoadData(true);
      const response = await apiEventGetOne({ id: id as string });
-      console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
+
      if (response.success) {
        setData(response.data);
        setSelectedDate(new Date(response.data.tanggal));
@@ -100,6 +103,15 @@ export default function EventEdit() {
    const startDate = new Date(selectedDate as any);
    const endDate = new Date(selectedEndDate as any);

+    if (!startDate) {
+      Toast.show({
+        type: "info",
+        text1: "Info",
+        text2: "Tanggal mulai tidak valid",
+      });
+      return false;
+    }
+
    if (startDate >= endDate) {
      Toast.show({
        type: "info",
@@ -146,7 +158,7 @@ export default function EventEdit() {

  const validateDateRange = (
    selectedDate: string | Date,
-    selectedEndDate: string | Date
+    selectedEndDate: string | Date,
  ): { isValid: boolean; error?: string } => {
    const startDate = new Date(selectedDate);
    const endDate = new Date(selectedEndDate);
@@ -174,9 +186,19 @@ export default function EventEdit() {

  return (
    <>
-      <ViewWrapper>
+      <NewWrapper
+        footerComponent={
+          <BoxButtonOnFooter>
+            <ButtonCustom
+              isLoading={isLoading}
+              title="Update"
+              onPress={handlerSubmit}
+            />
+          </BoxButtonOnFooter>
+        }
+      >
        {isLoadData ? (
-          <LoaderCustom />
+          <ListSkeletonComponent />
        ) : (
          <StackCustom gap={"xs"}>
            <TextInputCustom
@@ -186,26 +208,15 @@ export default function EventEdit() {
              value={data?.title}
              onChangeText={(value) => setData({ ...data, title: value })}
            />
-            <SelectCustom
-              label="Tipe Event"
-              placeholder="Pilih tipe event"
-              data={listTypeEvent.map((item: any) => ({
-                label: item.name,
-                value: item.id,
-              }))}
-              value={data?.eventMaster_TipeAcaraId || ""}
-              onChange={(value) => {
-                console.log(value);
-                setData({ ...data, eventMaster_TipeAcaraId: value });
-              }}
-            />
-            <TextInputCustom
-              label="Lokasi"
-              placeholder="Masukkan lokasi event"
+            <TextAreaCustom
+              label="Deskripsi"
+              placeholder="Masukkan deskripsi event"
              required
-              value={data?.lokasi}
-              onChangeText={(value) => setData({ ...data, lokasi: value })}
+              showCount
+              value={data?.deskripsi}
+              onChangeText={(value) => setData({ ...data, deskripsi: value })}
            />
+
            <DateTimePickerCustom
              minimumDate={new Date(Date.now())}
              label="Tanggal & Waktu Mulai"
@@ -233,7 +244,7 @@ export default function EventEdit() {
                  {
                    validateDateRange(
                      selectedDate as any,
-                      selectedEndDate as any
+                      selectedEndDate as any,
                    ).error
                  }
                </TextCustom>
@@ -242,31 +253,37 @@ export default function EventEdit() {
                  {
                    validateDateRange(
                      selectedDate as any,
-                      selectedEndDate as any
+                      selectedEndDate as any,
                    ).error
                  }
                </TextCustom>
              )}
-              <Spacing />
+              {/* <Spacing /> */}
            </StackCustom>

-            <TextAreaCustom
-              label="Deskripsi"
-              placeholder="Masukkan deskripsi event"
-              required
-              showCount
-              value={data?.deskripsi}
-              onChangeText={(value) => setData({ ...data, deskripsi: value })}
+            <SelectCustom
+              label="Tipe Event"
+              placeholder="Pilih tipe event"
+              data={listTypeEvent.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data?.eventMaster_TipeAcaraId || ""}
+              onChange={(value) => {
+                console.log(value);
+                setData({ ...data, eventMaster_TipeAcaraId: value });
+              }}
            />
-
-            <ButtonCustom
-              isLoading={isLoading}
-              title="Update"
-              onPress={handlerSubmit}
+            <TextInputCustom
+              label="Lokasi"
+              placeholder="Masukkan lokasi event"
+              required
+              value={data?.lokasi}
+              onChangeText={(value) => setData({ ...data, lokasi: value })}
            />
          </StackCustom>
        )}
-      </ViewWrapper>
+      </NewWrapper>
    </>
  );
 }
--- a/app/(application)/(user)/event/[id]/list-of-participants.tsx
+++ b/app/(application)/(user)/event/[id]/list-of-participants.tsx
@@ -1,110 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AvatarUsernameAndOtherComponent,
-  BadgeCustom,
-  BaseBox,
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import {
-  apiEventGetOne,
-  apiEventListOfParticipants,
-} from "@/service/api-client/api-event";
-import dayjs, { Dayjs } from "dayjs";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import Event_ScreenListOfParticipants from "@/screens/Event/ScreenListOfParticipants";

 export default function EventListOfParticipants() {
-  const { id } = useLocalSearchParams();
-  const [startDate, setStartDate] = useState<Dayjs | undefined>();
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadtData, setLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      handlerLoadData();
-    }, [id])
-  );
-
-  const handlerLoadData = () => {
-    try {
-      onLoadData();
-      onLoadList();
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  const onLoadData = async () => {
-    try {
-      const response = await apiEventGetOne({ id: id as string });
-      if (response.success) {
-        const date = dayjs(response.data.tanggal);
-        setStartDate(date);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  const onLoadList = async () => {
-    try {
-      setLoadData(true);
-      const response = await apiEventListOfParticipants({ id: id as string });
-     
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadData(false);
-    }
-  };
-
  return (
-    <ViewWrapper>
-      {loadtData && !listData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center" color="gray">
-          Belum ada peserta
-        </TextCustom>
-      ) : (
-        listData?.map((item: any, index: number) => (
-          <BaseBox key={index}>
-            <AvatarUsernameAndOtherComponent
-              avatar={item?.User?.Profile?.imageId}
-              name={item?.User?.username}
-              avatarHref={`/profile/${item?.User?.Profile?.id}`}
-              rightComponent={
-                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
-                  <View
-                    style={{
-                      justifyContent: "flex-end",
-                    }}
-                  >
-                    <BadgeCustom color={item?.isPresent ? "green" : "red"}>
-                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
-                    </BadgeCustom>
-                  </View>
-                ) : (
-                  <View
-                    style={{
-                      justifyContent: "flex-end",
-                    }}
-                  >
-                    <BadgeCustom color="gray">-</BadgeCustom>
-                  </View>
-                )
-              }
-            />
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Event_ScreenListOfParticipants />
+    </>
  );
 }
--- a/app/(application)/(user)/event/create.tsx
+++ b/app/(application)/(user)/event/create.tsx
@@ -1,12 +1,13 @@
 import {
+  BoxButtonOnFooter,
  ButtonCustom,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { useAuth } from "@/hooks/use-auth";
@@ -100,7 +101,6 @@ export default function EventCreate() {
      setIsLoading(false);
    }
  };
-  

  const buttonSubmit = (
    <ButtonCustom
@@ -112,7 +112,9 @@ export default function EventCreate() {

  return (
    <>
-      <ViewWrapper>
+      <NewWrapper
+        footerComponent={<BoxButtonOnFooter>{buttonSubmit}</BoxButtonOnFooter>}
+      >
        <StackCustom gap={"xs"}>
          <TextInputCustom
            placeholder="Masukkan nama event"
@@ -121,24 +123,15 @@ export default function EventCreate() {
            onChangeText={(value: any) => setData({ ...data, title: value })}
          />

-          <SelectCustom
-            label="Tipe Event"
-            placeholder="Pilih tipe event"
-            data={listTypeEvent.map((item: any) => ({
-              label: item.name,
-              value: item.id,
-            }))}
-            value={data?.eventMaster_TipeAcaraId || null}
-            onChange={(value: any) =>
-              setData({ ...data, eventMaster_TipeAcaraId: value })
-            }
-          />
-
-          <TextInputCustom
-            label="Lokasi"
-            placeholder="Masukkan lokasi event"
+          <TextAreaCustom
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi event"
            required
-            onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+            showCount
+            value={data?.deskripsi || ""}
+            onChangeText={(value: any) =>
+              setData({ ...data, deskripsi: value })
+            }
          />

          <DateTimePickerCustom
@@ -168,22 +161,28 @@ export default function EventCreate() {
              </TextCustom>
            )}
            <Spacing />
+            <SelectCustom
+              label="Tipe Event"
+              placeholder="Pilih tipe event"
+              data={listTypeEvent.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={data?.eventMaster_TipeAcaraId || null}
+              onChange={(value: any) =>
+                setData({ ...data, eventMaster_TipeAcaraId: value })
+              }
+            />
+
+            <TextInputCustom
+              label="Lokasi"
+              placeholder="Masukkan lokasi event"
+              required
+              onChangeText={(value: any) => setData({ ...data, lokasi: value })}
+            />
          </StackCustom>
-
-          <TextAreaCustom
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi event"
-            required
-            showCount
-            value={data?.deskripsi || ""}
-            onChangeText={(value: any) =>
-              setData({ ...data, deskripsi: value })
-            }
-          />
-
-          {buttonSubmit}
        </StackCustom>
-      </ViewWrapper>
+      </NewWrapper>
    </>
  );
 }
--- a/app/(application)/(user)/home.tsx
+++ b/app/(application)/(user)/home.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { StackCustom, ViewWrapper } from "@/components";
+import { BasicWrapper, StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
 import { useNotificationStore } from "@/hooks/use-notification-store";
@@ -29,14 +29,14 @@ export default function Application() {
      checkVersion();
      userData(token as string);
      syncUnreadCount();
-    }, [user?.id, token])
+    }, [user?.id, token]),
  );

  async function onLoadData() {
    const response = await apiUser(user?.id as string);
    console.log(
      "[Profile ID]>>",
-      JSON.stringify(response?.data?.Profile?.id, null, 2)
+      JSON.stringify(response?.data?.Profile?.id, null, 2),
    );

    setData(response.data);
@@ -61,14 +61,31 @@ export default function Application() {

  if (data && data?.active === false) {
    console.log("User is not active");
-    return <Redirect href={`/waiting-room`} />;
+    return (
+      <BasicWrapper>
+        <Redirect href={`/waiting-room`} />
+      </BasicWrapper>
+    );
  }

  if (data && data?.Profile === null) {
    console.log("Profile is null");
-    return <Redirect href={`/profile/create`} />;
+    return (
+      <BasicWrapper>
+        <Redirect href={`/profile/create`} />
+      </BasicWrapper>
+    );
  }

+  // if (data && data?.masterUserRoleId !== "1") {
+  //   console.log("User is not admin");
+  //   return (
+  //     <BasicWrapper>
+  //       <Redirect href={`/admin/dashboard`} />
+  //     </BasicWrapper>
+  //   );
+  // }
+
  return (
    <>
      <Stack.Screen
@@ -89,7 +106,12 @@ export default function Application() {
      />
      <ViewWrapper
        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
        }
        footerComponent={
          <TabSection
--- a/app/(application)/(user)/investment/(tabs)/index.tsx
+++ b/app/(application)/(user)/investment/(tabs)/index.tsx
@@ -1,56 +1,9 @@
-import {
-  FloatingButton,
-  LoaderCustom,
-  ViewWrapper
-} from "@/components";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import Investment_BoxBerandaSection from "@/screens/Invesment/BoxBerandaSection";
-import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Investment_ScreenBursa from "@/screens/Invesment/ScreenBursa";

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

 export default function InvestmentMyHolding() {
-  const { user } = useAuth();
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadingList, setLoadingList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [user?.id])
-  );
-
-  const onLoadList = async () => {
-    try {
-      setLoadingList(true);
-      const response = await apiInvestmentGetAll({
-        category: "my-holding",
-        authorId: user?.id,
-      });
-      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingList(false);
-    }
-  };
-
  return (
-    <ViewWrapper hideFooter>
-      {loadingList ? (
-        <LoaderCustom />
-      ) : _.isEmpty(list) ? (
-        <NoDataText />
-      ) : (
-        list?.map((item, index) => (
-          <BaseBox
-            key={index}
-            paddingTop={7}
-            paddingBottom={7}
-            onPress={() =>
-              router.push(`/investment/${item?.id}/(my-holding)/${item?.id}`)
-            }
-          >
-            <StackCustom>
-              <TextCustom truncate={2}>{item?.title}</TextCustom>
-              <TextCustom>
-                Rp. {formatCurrencyDisplay(item?.nominal)}
-              </TextCustom>
-              <TextCustom>{item?.lembarTerbeli} Lembar</TextCustom>
-              <ProgressCustom
-                label={`${item.progress}%`}
-                value={Number(item.progress)}
-                size="lg"
-                animated
-                color="primary"
-              />
-            </StackCustom>
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Investment_ScreenMyHolding />
+    </>
  );
 }
--- a/app/(application)/(user)/investment/(tabs)/portofolio.tsx
+++ b/app/(application)/(user)/investment/(tabs)/portofolio.tsx
@@ -1,82 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  LoaderCustom,
-  ScrollableCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import Investment_StatusBox from "@/screens/Invesment/StatusBox";
-import { apiInvestmentGetByStatus } from "@/service/api-client/api-investment";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Investment_ScreenPortofolio from "@/screens/Invesment/ScreenPortofolio";

 export default function InvestmentPortofolio() {
-  const { user } = useAuth();
-  const { status } = useLocalSearchParams<{ status?: string }>();
-
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
-  );
-
-  const [listData, setListData] = useState<any[]>([]);
-  const [loadingList, setLoadingList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id, activeCategory])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setLoadingList(true);
-      const response = await apiInvestmentGetByStatus({
-        authorId: user?.id as string,
-        status: activeCategory as string,
-      });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingList(false);
-    }
-  };
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const scrollComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
  return (
-    <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      {loadingList ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
-      ) : (
-        listData.map((item: any, index: number) => (
-          <Investment_StatusBox
-            key={index}
-            data={item}
-            status={activeCategory as string}
-            href={`/investment/${item.id}/${activeCategory}/detail`}
-          />
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Investment_ScreenPortofolio />
+    </>
  );
 }
--- a/app/(application)/(user)/investment/(tabs)/transaction.tsx
+++ b/app/(application)/(user)/investment/(tabs)/transaction.tsx
@@ -1,124 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BadgeCustom,
-  BaseBox,
-  Grid,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { useAuth } from "@/hooks/use-auth";
-import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
-import { GStyles } from "@/styles/global-styles";
-import { formatChatTime } from "@/utils/formatChatTime";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import Investment_ScreenTransaction from "@/screens/Invesment/ScreenTransaction";

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

 export default function InvestmentListOfDocument() {
-  const { id } = useLocalSearchParams();
-  console.log("ID >> ", id);
-
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadListDocument();
-    }, [id])
-  );
-
-  const onLoadListDocument = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiInvestmentGetDocument({
-        id: id as string,
-        category: "all-document",
-      });
-
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-      setList([]);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
  return (
-    <ViewWrapper>
-      {loadList ? (
-        <LoaderCustom />
-      ) : _.isEmpty(list) ? (
-        <TextCustom align="center" color="gray">
-          Tidak ada data
-        </TextCustom>
-      ) : (
-        list?.map((item: any, index: number) => (
-          <Investment_BoxDetailDocument
-            key={index}
-            title={item.title}
-            href={`/(file)/${item.fileId}`}
-          />
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Investment_ScreenListOfDocument />
+    </>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx
+++ b/app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx
@@ -1,213 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AlertDefaultSystem,
-  BackButton,
-  DotButton,
-  DrawerCustom,
-  LoaderCustom,
-  MenuDrawerDynamicGrid,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { IconEdit } from "@/components/_Icon";
-import { MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import Investment_BoxDetailDocument from "@/screens/Invesment/Document/RecapBoxDetail";
-import {
-  apiInvestmentDeleteDocument,
-  apiInvestmentGetDocument,
-} from "@/service/api-client/api-investment";
-import { AntDesign, Ionicons } from "@expo/vector-icons";
-import {
-  router,
-  Stack,
-  useFocusEffect,
-  useLocalSearchParams,
-} from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import Toast from "react-native-toast-message";
+import Investment_ScreenRecapOfDocument from "@/screens/Invesment/Document/ScreenRecapOfDocument";

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

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

 export default function InvestmentRecapOfNews() {
  const { id } = useLocalSearchParams();
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [id])
-  );
-
-  const onLoadList = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiInvestmentGetNews({
-        id: id as string,
-        category: "all-news",
-      });
-
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
+  
  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: "Rekap Berita",
-          headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
-        }}
-      />
-      <ViewWrapper>
-        {loadList ? (
-          <LoaderCustom />
-        ) : _.isEmpty(list) ? (
-          <TextCustom align="center" color="gray">
-            Tidak ada data
-          </TextCustom>
-        ) : (
-          list?.map((item: any, index: number) => (
-            <BaseBox
-              key={index}
-              paddingBlock={5}
-              href={`/investment/[id]/(news)/${item.id}`}
-            >
-              <TextCustom bold>{item.title}</TextCustom>
-            </BaseBox>
-          ))
-        )}
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              label: "Tambah Berita",
-              path: `/investment/${id}/add-news`,
-              icon: <IconPlus />,
-            },
-          ]}
-          onPressItem={(item) => {
-            router.push(item.path as any);
-            setOpenDrawer(false);
-          }}
-        />
-      </DrawerCustom>
-    </>
+    <Investment_ScreenRecapOfNews investmentId={id as string} />
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx
@@ -1,230 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  Grid,
-  InformationBox,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import CopyButton from "@/components/Button/CoyButton";
-import { MainColor } from "@/constants/color-palet";
-import DIRECTORY_ID from "@/constants/directory-id";
-import {
-  apiInvestmentGetInvoice,
-  apiInvestmentUpdateInvoice,
-} from "@/service/api-client/api-investment";
-import { uploadFileService } from "@/service/upload-service";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import pickFile, { IFileData } from "@/utils/pickFile";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import Toast from "react-native-toast-message";
+import Investment_ScreenInvoice from "@/screens/Invesment/ScreenInvoice";

 export default function InvestmentInvoice() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any>({});
-  const [image, setImage] = useState<IFileData>({
-    name: "",
-    uri: "",
-    size: 0,
-  });
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      const response = await apiInvestmentGetInvoice({
-        id: id as string,
-        category: "invoice",
-      });
-
-      setData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  const handlerSubmitUpdate = async () => {
-    try {
-      setIsLoading(true);
-      const responseUploadImage = await uploadFileService({
-        dirId: DIRECTORY_ID.investasi_bukti_transfer,
-        imageUri: image?.uri,
-      });
-
-      if (!responseUploadImage?.data?.id) {
-        Toast.show({
-          type: "error",
-          text1: "Gagal mengunggah bukti transfer",
-        });
-        return;
-      }
-
-      const response = await apiInvestmentUpdateInvoice({
-        id: id as string,
-        data: {
-          imageId: responseUploadImage?.data?.id,
-        },
-        status: "proses",
-      });
-
-      if (response.success) {
-        Toast.show({
-          type: "success",
-          text1: "Berhasil mengunggah bukti transfer",
-        });
-        router.push(`/investment/${id}/(transaction-flow)/process`);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
  return (
    <>
-      <ViewWrapper>
-        <StackCustom>
-          <InformationBox text="Mohon transfer ke rekening dibawah" />
-          <BaseBox>
-            <StackCustom gap={"xs"}>
-              <Grid>
-                <Grid.Col span={4}>
-                  <TextCustom>Bank</TextCustom>
-                </Grid.Col>
-                <Grid.Col span={8}>
-                  <TextCustom>{data?.MasterBank?.namaBank}</TextCustom>
-                </Grid.Col>
-              </Grid>
-              <Spacing height={10} />
-              <Grid>
-                <Grid.Col span={4}>
-                  <TextCustom>Nama Akun</TextCustom>
-                </Grid.Col>
-                <Grid.Col span={8}>
-                  <TextCustom>{data?.MasterBank?.namaAkun}</TextCustom>
-                </Grid.Col>
-              </Grid>
-
-              <BaseBox backgroundColor={MainColor.soft_darkblue}>
-                <Grid containerStyle={{ justifyContent: "center" }}>
-                  <Grid.Col
-                    span={8}
-                    style={{
-                      justifyContent: "center",
-                    }}
-                  >
-                    <TextCustom size="xlarge" bold color="yellow">
-                      {data?.MasterBank?.norek}
-                    </TextCustom>
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{
-                      alignItems: "flex-end",
-                    }}
-                  >
-                    <CopyButton textToCopy={data?.MasterBank?.norek} />
-                  </Grid.Col>
-                </Grid>
-              </BaseBox>
-            </StackCustom>
-          </BaseBox>
-
-          <BaseBox>
-            <StackCustom gap={"xs"}>
-              <TextCustom>Jumlah Transaksi</TextCustom>
-
-              <Spacing height={10} />
-
-              <BaseBox backgroundColor={MainColor.soft_darkblue}>
-                <Grid containerStyle={{ justifyContent: "center" }}>
-                  <Grid.Col
-                    span={8}
-                    style={{
-                      justifyContent: "center",
-                    }}
-                  >
-                    <TextCustom size="xlarge" bold color="yellow">
-                      Rp. {formatCurrencyDisplay(data?.nominal)}
-                    </TextCustom>
-                  </Grid.Col>
-                  <Grid.Col
-                    span={4}
-                    style={{
-                      alignItems: "flex-end",
-                    }}
-                  >
-                    <CopyButton textToCopy={data?.nominal} />
-                  </Grid.Col>
-                </Grid>
-              </BaseBox>
-            </StackCustom>
-          </BaseBox>
-
-          <BaseBox>
-            <StackCustom>
-              <TextCustom align="center">
-                Upload bukti transfer anda.
-              </TextCustom>
-              {image ? (
-                <View
-                  style={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: 10,
-                    paddingInline: 20,
-                  }}
-                >
-                  <TextCustom bold align="center" truncate>
-                    {image?.name}
-                  </TextCustom>
-                </View>
-              ) : (
-                <TextCustom align="center">
-                  Tidak ada gambar yang diunggah
-                </TextCustom>
-              )}
-              <ButtonCenteredOnly
-                onPress={() => {
-                  pickFile({
-                    allowedType: "image",
-                    setImageUri(file: any) {
-                      setImage(file);
-                    },
-                  });
-                }}
-                icon="upload"
-              >
-                Upload
-              </ButtonCenteredOnly>
-            </StackCustom>
-          </BaseBox>
-
-          <ButtonCustom
-            isLoading={isLoading}
-            disabled={!image || isLoading}
-            onPress={() => {
-              handlerSubmitUpdate();
-            }}
-          >
-            Saya Sudah Transfer
-          </ButtonCustom>
-        </StackCustom>
-        <Spacing />
-      </ViewWrapper>
+      <Investment_ScreenInvoice />
    </>
  );
 }
--- a/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx
+++ b/app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx
@@ -56,7 +56,6 @@ export default function InvestmentSelectBank() {
        });

        if (response.success) {
-          console.log("[RESPONSE >>]", response);
          const invoiceId = response.data.id;

          const delStorage = await AsyncStorage.removeItem(
--- a/app/(application)/(user)/investment/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/investment/[id]/[status]/detail.tsx
@@ -73,7 +73,6 @@ export default function InvestmentDetailStatus() {
    updateCountDown();
  }, [data]);

-  console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));

  const updateCountDown = () => {
    const countDown = countDownAndCondition({
--- a/app/(application)/(user)/investment/[id]/edit.tsx
+++ b/app/(application)/(user)/investment/[id]/edit.tsx
@@ -1,15 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
  LoaderCustom,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
-  TextInputCustom,
-  ViewWrapper,
+  TextInputCustom
 } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -198,7 +199,15 @@ export default function InvestmentEdit() {
  };

  return (
-    <ViewWrapper>
+    <NewWrapper
+      footerComponent={
+        <BoxButtonOnFooter>
+          <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      }
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
        <LandscapeFrameUploaded
@@ -253,7 +262,8 @@ export default function InvestmentEdit() {
        />

        <TextInputCustom
-          disabled
+          iconLeft="Rp."
+          // disabled
          required
          placeholder="0"
          label="Total Lembar"
@@ -339,11 +349,7 @@ export default function InvestmentEdit() {
        )}

        <Spacing />
-        <ButtonCustom isLoading={isLoading} onPress={handleSubmitUpdate}>
-          Simpan
-        </ButtonCustom>
      </StackCustom>
-      <Spacing height={50} />
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/investment/[id]/index.tsx
+++ b/app/(application)/(user)/investment/[id]/index.tsx
@@ -72,7 +72,6 @@ export default function InvestmentDetail() {
    updateCountDown();
  }, [data]);

-  console.log("[DATA DETAIL]", JSON.stringify(data, null, 2));

  const updateCountDown = () => {
    const countDown = countDownAndCondition({
--- a/app/(application)/(user)/investment/[id]/investor.tsx
+++ b/app/(application)/(user)/investment/[id]/investor.tsx
@@ -1,67 +1,10 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AvatarUsernameAndOtherComponent,
-  BoxWithHeaderSection,
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { apiInvestmentGetInvestorById } from "@/service/api-client/api-investment";
-import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Investment_ScreenInvestor from "@/screens/Invesment/ScreenInvestor";
+import { useLocalSearchParams } from "expo-router";

 export default function InvestmentInvestor() {
  const { id } = useLocalSearchParams();
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadingList, setLoadingList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [id])
-  );
-
-  const onLoadList = async () => {
-    try {
-      setLoadingList(true);
-      const response = await apiInvestmentGetInvestorById({
-        id: id as string,
-      })
-      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
-      setList(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingList(false);
-    }
-  }
-
-
+  
  return (
-    <>
-      <ViewWrapper>
-        {loadingList ? (
-          <LoaderCustom />
-        ) : _.isEmpty(list) ? (
-          <NoDataText />
-        ) : (
-          list?.map((item: any, index: number) => (
-            <BoxWithHeaderSection key={index}>
-              <AvatarUsernameAndOtherComponent
-                avatar={item?.Author?.Profile?.imageId}
-                name={item?.Author?.username}
-                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
-              />
-              <TextCustom bold>
-                Rp. {formatCurrencyDisplay(item?.nominal)}
-              </TextCustom>
-            </BoxWithHeaderSection>
-          ))
-        )}
-      </ViewWrapper>
-    </>
+    <Investment_ScreenInvestor investmentId={id as string} />
  );
 }
--- a/app/(application)/(user)/investment/create.tsx
+++ b/app/(application)/(user)/investment/create.tsx
@@ -1,18 +1,19 @@
 import {
  BaseBox,
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  CenterCustom,
  InformationBox,
  LandscapeFrameUploaded,
-  LoaderCustom,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
+import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MainColor } from "@/constants/color-palet";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
@@ -184,7 +185,19 @@ export default function InvestmentCreate() {

  //   const [coba, setCoba] = useState("");
  return (
-    <ViewWrapper>
+    <NewWrapper
+      footerComponent={
+        <BoxButtonOnFooter>
+          <ButtonCustom
+            disabled={isLoading}
+            isLoading={isLoading}
+            onPress={() => handleSubmit()}
+          >
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
+      }
+    >
      <StackCustom gap={"xs"}>
        <InformationBox text="Gambar investasi bisa berupa ilustrasi, poster atau foto terkait investasi." />
        <LandscapeFrameUploaded image={image as string} />
@@ -264,7 +277,9 @@ export default function InvestmentCreate() {

        <StackCustom gap={0}>
          <TextInputCustom
-            disabled
+            iconLeft="Rp."
+            // disabled
+            editable={false}
            required
            placeholder="0"
            label="Total Lembar"
@@ -291,7 +306,7 @@ export default function InvestmentCreate() {
        />

        {loadingMaster ? (
-          <LoaderCustom />
+          <CustomSkeleton height={50} />
        ) : (
          <SelectCustom
            required
@@ -313,7 +328,7 @@ export default function InvestmentCreate() {
        )}

        {loadingMaster ? (
-          <LoaderCustom />
+          <CustomSkeleton height={50} />
        ) : (
          <SelectCustom
            required
@@ -335,7 +350,7 @@ export default function InvestmentCreate() {
        )}

        {loadingMaster ? (
-          <LoaderCustom />
+          <CustomSkeleton height={50} />
        ) : (
          <SelectCustom
            required
@@ -357,15 +372,8 @@ export default function InvestmentCreate() {
        )}

        <Spacing />
-        <ButtonCustom
-          disabled={isLoading}
-          isLoading={isLoading}
-          onPress={() => handleSubmit()}
-        >
-          Simpan
-        </ButtonCustom>
      </StackCustom>
-      <Spacing height={50} />
-    </ViewWrapper>
+      {/* <Spacing height={50} /> */}
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/job/(tabs)/archive.tsx
+++ b/app/(application)/(user)/job/(tabs)/archive.tsx
@@ -1,57 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { BaseBox, LoaderCustom, TextCustom, ViewWrapper } from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { apiJobGetAll } from "@/service/api-client/api-job";
-import { useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Job_ScreenArchive2 from "@/screens/Job/ScreenArchive2";

 export default function JobArchive() {
-  const { user } = useAuth();
-  const [listData, setListData] = useState<any[]>([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiJobGetAll({
-        category: "archive",
-        authorId: user?.id,
-      });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
  return (
-    <ViewWrapper hideFooter>
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Anda tidak memiliki arsip</TextCustom>
-      ) : (
-        listData.map((item, index) => (
-          <BaseBox
-            key={index}
-            paddingTop={20}
-            paddingBottom={20}
-            href={`/job/${item.id}/archive`}
-          >
-            <TextCustom align="center" bold truncate size="large">
-              {item?.title || "-"}
-            </TextCustom>
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Job_ScreenArchive2 />
+    </>
  );
 }
--- a/app/(application)/(user)/job/(tabs)/index.tsx
+++ b/app/(application)/(user)/job/(tabs)/index.tsx
@@ -1,83 +1,10 @@
-import {
-  AvatarUsernameAndOtherComponent,
-  BoxWithHeaderSection,
-  FloatingButton,
-  LoaderCustom,
-  SearchInput,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { apiJobGetAll } from "@/service/api-client/api-job";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Job_ScreenBeranda from "@/screens/Job/ScreenBeranda";
+import Job_ScreenBeranda2 from "@/screens/Job/ScreenBeranda2";

 export default function JobBeranda() {
-  const [listData, setListData] = useState<any[]>([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-  const [search, setSearch] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData(search);
-    }, [search])
-  );
-
-  const onLoadData = async (search: string) => {
-    try {
-      setIsLoadData(true);
-      const response = await apiJobGetAll({ search, category: "beranda" });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
-  const handleSearch = (search: string) => {
-    setSearch(search);
-    onLoadData(search);
-  };
-
  return (
-    <ViewWrapper
-      hideFooter
-      floatingButton={
-        <FloatingButton onPress={() => router.push("/job/create")} />
-      }
-      headerComponent={
-        <SearchInput placeholder="Cari pekerjaan" onChangeText={handleSearch} />
-      }
-    >
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada lowongan</TextCustom>
-      ) : (
-        listData.map((item, index) => (
-          <BoxWithHeaderSection
-            key={index}
-            onPress={() => router.push(`/job/${item.id}`)}
-          >
-            <StackCustom>
-              <AvatarUsernameAndOtherComponent
-                avatar={item?.Author?.Profile?.imageId}
-                avatarHref={`/profile/${item?.Author?.Profile?.id}`}
-                name={item?.Author?.username}
-              />
-
-              <TextCustom truncate={2} align="center" bold size="large">
-                {item?.title || "-"}
-              </TextCustom>
-            </StackCustom>
-            <Spacing />
-          </BoxWithHeaderSection>
-        ))
-      )}
-      <Spacing />
-    </ViewWrapper>
+    <>
+      <Job_ScreenBeranda2 />
+    </>
  );
 }
--- a/app/(application)/(user)/job/(tabs)/status.tsx
+++ b/app/(application)/(user)/job/(tabs)/status.tsx
@@ -1,91 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  BaseBox,
-  LoaderCustom,
-  ScrollableCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
-import { apiJobGetByStatus } from "@/service/api-client/api-job";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Job_MainViewStatus from "@/screens/Job/MainViewStatus";
+import Job_MainViewStatus2 from "@/screens/Job/MainViewStatus2";

 export default function JobStatus() {
-  const { user } = useAuth();
-  const { status } = useLocalSearchParams<{ status?: string }>();
-  console.log("STATUS", status);
-
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
-  );
-  const [listData, setListData] = useState<any[]>([]);
-  const [isLoadList, setIsLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id, activeCategory])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadList(true);
-      const response = await apiJobGetByStatus({
-        authorId: user?.id as string,
-        status: activeCategory as string,
-      });
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadList(false);
-    }
-  };
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const scrollComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
-
  return (
    <>
-      <ViewWrapper headerComponent={scrollComponent} hideFooter>
-        {isLoadList ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center">
-            Tidak ada data {activeCategory}
-          </TextCustom>
-        ) : (
-          listData.map((e, i) => (
-            <BaseBox
-              key={i}
-              paddingTop={20}
-              paddingBottom={20}
-              href={`/job/${e?.id}/${activeCategory}/detail`}
-            >
-              <TextCustom align="center" bold truncate size="large">
-                {e?.title}
-              </TextCustom>
-            </BaseBox>
-          ))
-        )}
-      </ViewWrapper>
+      {/* <Job_MainViewStatus />  */}
+      <Job_MainViewStatus2 />
    </>
  );
 }
--- a/app/(application)/(user)/job/create.tsx
+++ b/app/(application)/(user)/job/create.tsx
@@ -1,13 +1,14 @@
 import {
+  BoxButtonOnFooter,
  ButtonCenteredOnly,
  ButtonCustom,
  InformationBox,
  LandscapeFrameUploaded,
+  NewWrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
-  TextInputCustom,
-  ViewWrapper
+  TextInputCustom
 } from "@/components";
 import DIRECTORY_ID from "@/constants/directory-id";
 import { useAuth } from "@/hooks/use-auth";
@@ -99,16 +100,17 @@ export default function JobCreate() {
  const buttonSubmit = () => {
    return (
      <>
-        <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
-          Simpan
-        </ButtonCustom>
-        <Spacing />
+        <BoxButtonOnFooter>
+          <ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
+            Simpan
+          </ButtonCustom>
+        </BoxButtonOnFooter>
      </>
    );
  };

  return (
-    <ViewWrapper>
+    <NewWrapper footerComponent={buttonSubmit()}>
      <StackCustom gap={"xs"}>
        <InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />

@@ -160,9 +162,7 @@ export default function JobCreate() {
          value={data.deskripsi}
          onChangeText={(value) => setData({ ...data, deskripsi: value })}
        />
-
-        {buttonSubmit()}
      </StackCustom>
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/notifications/index.tsx
+++ b/app/(application)/(user)/notifications/index.tsx
@@ -1,248 +1,11 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AlertDefaultSystem,
-  BackButton,
-  BaseBox,
-  DrawerCustom,
-  MenuDrawerDynamicGrid,
-  NewWrapper,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import { IconDot } from "@/components/_Icon/IconComponent";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import { useNotificationStore } from "@/hooks/use-notification-store";
-import { apiGetNotificationsById } from "@/service/api-notifications";
-import { listOfcategoriesAppNotification } from "@/types/type-notification-category";
-import { formatChatTime } from "@/utils/formatChatTime";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { RefreshControl, View } from "react-native";
+import ScreenNotification_V1 from "@/screens/Notification/ScreenNotification_V1";
+import ScreenNotification_V2 from "@/screens/Notification/ScreenNotification_V2";

-const selectedCategory = (value: string) => {
-  const category = listOfcategoriesAppNotification.find(
-    (c) => c.value === value
-  );
-  return category?.label;
-};
-
-const fixPath = ({
-  deepLink,
-  categoryApp,
-}: {
-  deepLink: string;
-  categoryApp: string;
-}) => {
-  if (categoryApp === "OTHER") {
-    return deepLink;
-  }
-
-  const separator = deepLink.includes("?") ? "&" : "?";
-
-  const fixedPath = `${deepLink}${separator}from=notifications&category=${_.lowerCase(
-    categoryApp
-  )}`;
-
-  console.log("Fix Path", fixedPath);
-
-  return fixedPath;
-};
-
-const BoxNotification = ({
-  data,
-  activeCategory,
-}: {
-  data: any;
-  activeCategory: string | null;
-}) => {
-  // console.log("DATA NOTIFICATION", JSON.stringify(data, null, 2));
-  const { markAsRead } = useNotificationStore();
+export default function Notification() {
  return (
    <>
-      <BaseBox
-        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
-        onPress={() => {
-          // console.log(
-          //   "Notification >",
-          //   selectedCategory(activeCategory as string)
-          // );
-          const newPath = fixPath({
-            deepLink: data.deepLink,
-            categoryApp: data.kategoriApp,
-          });
-
-          router.navigate(newPath as any);
-          selectedCategory(activeCategory as string);
-
-          if (!data.isRead) {
-            markAsRead(data.id);
-          }
-        }}
-      >
-        <StackCustom>
-          <TextCustom truncate={2} bold>
-            {data.title}
-          </TextCustom>
-
-          <TextCustom truncate={2}>{data.pesan}</TextCustom>
-
-          <TextCustom size="small" color="gray">
-            {formatChatTime(data.createdAt)}
-          </TextCustom>
-        </StackCustom>
-      </BaseBox>
-    </>
-  );
-};
-
-export default function Notifications() {
-  const { user } = useAuth();
-  const { category } = useLocalSearchParams<{ category?: string }>();
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    category || "event"
-  );
-  const [listData, setListData] = useState<any[]>([]);
-  const [refreshing, setRefreshing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [openDrawer, setOpenDrawer] = useState(false);
-
-  const { markAsReadAll } = useNotificationStore();
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      fecthData();
-    }, [activeCategory])
-  );
-
-  const fecthData = async () => {
-    try {
-      setLoading(true);
-      const response = await apiGetNotificationsById({
-        id: user?.id as any,
-        category: activeCategory as any,
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      } else {
-        setListData([]);
-      }
-    } catch (error) {
-      console.log("Error Notification", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onRefresh = () => {
-    setRefreshing(true);
-    fecthData();
-    setRefreshing(false);
-  };
-
-  return (
-    <>
-     <Stack.Screen
-        options={{
-          title: "Notifikasi",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <IconDot
-              color={MainColor.yellow}
-              onPress={() => setOpenDrawer(true)}
-            />
-          ),
-        }}
-      />
-
-      <NewWrapper
-        headerComponent={
-          <ScrollableCustom
-            data={listOfcategoriesAppNotification.map((e, i) => ({
-              id: i,
-              label: e.label,
-              value: e.value,
-            }))}
-            onButtonPress={handlePress}
-            activeId={activeCategory as string}
-          />
-        }
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-      >
-        {loading ? (
-          <ListSkeletonComponent />
-        ) : _.isEmpty(listData) ? (
-          <NoDataText text="Belum ada notifikasi" />
-        ) : (
-          listData.map((e, i) => (
-            <View key={i}>
-              <BoxNotification
-                data={e}
-                activeCategory={activeCategory as any}
-              />
-            </View>
-          ))
-        )}
-      </NewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              label: "Tandai Semua Dibaca",
-              value: "read-all",
-              icon: (
-                <Ionicons
-                  name="reader-outline"
-                  size={ICON_SIZE_SMALL}
-                  color={MainColor.white}
-                />
-              ),
-              path: "",
-            },
-          ]}
-          onPressItem={(item: any) => {
-            console.log("Item", item.value);
-            if (item.value === "read-all") {
-              AlertDefaultSystem({
-                title: "Tandai Semua Dibaca",
-                message:
-                  "Apakah Anda yakin ingin menandai semua notifikasi dibaca?",
-                textLeft: "Batal",
-                textRight: "Ya",
-                onPressRight: () => {
-                  markAsReadAll(user?.id as any);
-                  const data = _.cloneDeep(listData);
-                  data.forEach((e) => {
-                    e.isRead = true;
-                  });
-                  setListData(data);
-                  onRefresh();
-                  setOpenDrawer(false);
-                },
-              });
-            }
-          }}
-        />
-      </DrawerCustom>
+      <ScreenNotification_V2 />
+      {/* <ScreenNotification_V1 />  */}
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -7,6 +7,7 @@ import {
  CenterCustom,
  Grid,
  InformationBox,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
@@ -120,7 +121,7 @@ export default function PortofolioCreate() {
  };

  return (
-    <ViewWrapper
+    <NewWrapper
      footerComponent={
        <Portofolio_ButtonCreate
          id={id as string}
@@ -357,8 +358,8 @@ export default function PortofolioCreate() {
            setDataMedsos({ ...dataMedsos, youtube: value })
          }
        />
-        <Spacing />
+        {/* <Spacing /> */}
      </StackCustom>
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/edit.tsx
+++ b/app/(application)/(user)/portofolio/[id]/edit.tsx
@@ -4,14 +4,15 @@ import {
  BoxButtonOnFooter,
  ButtonCustom,
  CenterCustom,
+  NewWrapper,
  SelectCustom,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextCustom,
  TextInputCustom,
-  ViewWrapper,
 } from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
 import {
@@ -238,7 +239,7 @@ export default function PortofolioEdit() {
    return !dataArray.some(
      (item: any) =>
        !item.MasterSubBidangBisnis.id ||
-        item.MasterSubBidangBisnis.id.trim() === ""
+        item.MasterSubBidangBisnis.id.trim() === "",
    );
  }

@@ -319,16 +320,16 @@ export default function PortofolioEdit() {
  if (!bidangBisnis || !subBidangBisnis) {
    return (
      <>
-        <ViewWrapper>
-          <ActivityIndicator size="large" color={MainColor.yellow} />
-        </ViewWrapper>
+        <NewWrapper>
+          <ListSkeletonComponent height={80} />
+        </NewWrapper>
      </>
    );
  }

  return (
    <>
-      <ViewWrapper footerComponent={buttonUpdate}>
+      <NewWrapper footerComponent={buttonUpdate}>
        <StackCustom gap={"xs"}>
          <TextInputCustom
            required
@@ -471,7 +472,7 @@ export default function PortofolioEdit() {
          />
          <Spacing />
        </StackCustom>
-      </ViewWrapper>
+      </NewWrapper>
    </>
  );
 }
--- a/app/(application)/(user)/portofolio/[id]/index.tsx
+++ b/app/(application)/(user)/portofolio/[id]/index.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
-  ButtonCustom,
-  DrawerCustom,
-  DummyLandscapeImage,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
+    ButtonCustom,
+    DrawerCustom,
+    DummyLandscapeImage,
+    LoaderCustom,
+    Spacing,
+    StackCustom,
+    TextCustom,
 } from "@/components";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import GridTwoView from "@/components/_ShareComponent/GridTwoView";
@@ -49,7 +49,7 @@ export default function Portofolio() {
    useCallback(() => {
      onLoadData(id as string);
      onLoadUserByToken();
-    }, [id])
+    }, [id]),
  );

  async function onLoadData(id: string) {
@@ -144,27 +144,27 @@ export default function Portofolio() {
          <GridTwoView
            spanLeft={2}
            spanRight={10}
-            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 +172,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 />
--- a/app/(application)/(user)/portofolio/[id]/list.tsx
+++ b/app/(application)/(user)/portofolio/[id]/list.tsx
@@ -1,28 +1,9 @@
-import { TextCustom, ViewWrapper } from "@/components";
-import Portofolio_BoxView from "@/screens/Portofolio/BoxPortofolioView";
-import { apiGetPortofolio } from "@/service/api-client/api-portofolio";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useCallback, useState } from "react";
+import ViewListPortofolio from "@/screens/Portofolio/ViewListPortofolio";

 export default function ListPortofolio() {
-  const { id } = useLocalSearchParams();
-  const [data, setData] = useState<any[]>([]);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadPortofolio(id as string);
-    }, [id])
-  );
-
-  const onLoadPortofolio = async (id: string) => {
-    const response = await apiGetPortofolio({ id: id });
-    setData(response.data);
-  };
  return (
-    <ViewWrapper>
-      {data ? data?.map((item: any, index: number) => (
-        <Portofolio_BoxView key={index} data={item} />
-      )) : <TextCustom>Tidak ada portofolio</TextCustom>}
-    </ViewWrapper>
+    <>
+      <ViewListPortofolio />
+    </>
  );
 }
--- a/app/(application)/(user)/profile/[id]/detail-blocked.tsx
+++ b/app/(application)/(user)/profile/[id]/detail-blocked.tsx
@@ -29,7 +29,6 @@ export default function ProfileDetailBlocked() {

  const fetchData = async () => {
    const response = await apiGetBlockedById({ id: String(id) });
-    // console.log("[RESPONSE >>]", JSON.stringify(response, null, 2));
    setData(response.data);
  };

--- a/app/(application)/(user)/voting/(tabs)/contribution.tsx
+++ b/app/(application)/(user)/voting/(tabs)/contribution.tsx
@@ -1,59 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import Voting_BoxPublishSection from "@/screens/Voting/BoxPublishSection";
-import { apiVotingGetAll } from "@/service/api-client/api-voting";
-import { useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useState, useCallback } from "react";
+import Voting_ScreenContribution from "@/screens/Voting/ScreenContribution";

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

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

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

 export default function VotingStatus() {
-  const { user } = useAuth();
-  const { status } = useLocalSearchParams<{ status?: string }>();
-
-  const id = user?.id || "";
-  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
-  );
-
-  const [listData, setListData] = useState([]);
-  const [loadingGetData, setLoadingGetData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [activeCategory, id])
-  );
-
-  async function onLoadData() {
-    try {
-      setLoadingGetData(true);
-      const response = await apiVotingGetByStatus({
-        id: id as string,
-        status: activeCategory!,
-      });
-      setListData(response.data);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoadingGetData(false);
-    }
-  }
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  const scrollComponent = (
-    <ScrollableCustom
-      data={dummyMasterStatus.map((e, i) => ({
-        id: i,
-        label: e.label,
-        value: e.value,
-      }))}
-      onButtonPress={handlePress}
-      activeId={activeCategory as any}
-    />
-  );
-
  return (
-    <ViewWrapper headerComponent={scrollComponent} hideFooter>
-      {loadingGetData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
-      ) : (
-        listData.map((item: any, i: number) => (
-          <BaseBox
-            key={i}
-            paddingTop={20}
-            paddingBottom={20}
-            href={`/voting/${item.id}/${activeCategory}/detail`}
-          >
-            <StackCustom>
-              <TextCustom align="center" bold truncate={2} size="large">
-                {item?.title || ""}
-              </TextCustom>
-              <BadgeCustom
-                style={{ width: "70%", alignSelf: "center" }}
-                variant="light"
-              >
-                {item?.awalVote &&
-                  dateTimeView({
-                    date: item?.awalVote,
-                    withoutTime: true,
-                  })}{" "}
-                -{" "}
-                {item?.akhirVote &&
-                  dateTimeView({ date: item?.akhirVote, withoutTime: true })}
-              </BadgeCustom>
-            </StackCustom>
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
+    <>
+      <Voting_ScreenStatus />
+    </>
  );
 }
--- a/app/(application)/(user)/voting/[id]/[status]/detail.tsx
+++ b/app/(application)/(user)/voting/[id]/[status]/detail.tsx
@@ -51,8 +51,6 @@ export default function VotingDetailStatus() {
      setLoadingGetData(true);
      const response = await apiVotingGetOne({ id: id as string });

-      console.log("[DATA BY ID]", JSON.stringify(response, null, 2));
-
      if (response.success) {
        setData(response.data);
      }
--- a/app/(application)/(user)/voting/[id]/edit.tsx
+++ b/app/(application)/(user)/voting/[id]/edit.tsx
@@ -5,13 +5,14 @@ import {
  ButtonCustom,
  CenterCustom,
  LoaderCustom,
+  NewWrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextCustom,
-  TextInputCustom,
-  ViewWrapper,
+  TextInputCustom
 } from "@/components";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
@@ -34,7 +35,7 @@ interface IEditData {
  Voting_DaftarNamaVote?: [
    {
      value?: string;
-    }
+    },
  ];
 }

@@ -47,7 +48,7 @@ export default function VotingEdit() {
  useFocusEffect(
    useCallback(() => {
      onLoadData();
-    }, [id])
+    }, [id]),
  );

  const onLoadData = async () => {
@@ -188,9 +189,9 @@ export default function VotingEdit() {
  };

  return (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <NewWrapper footerComponent={buttonSubmit()}>
      {loadingGetData ? (
-        <LoaderCustom />
+        <ListSkeletonComponent />
      ) : (
        <StackCustom gap={"xs"}>
          <TextInputCustom
@@ -210,7 +211,7 @@ export default function VotingEdit() {
            onChangeText={(text) => setData({ ...data, deskripsi: text })}
          />

-          <Spacing />
+

          <DateTimePickerCustom
            minimumDate={new Date(Date.now())}
@@ -255,7 +256,7 @@ export default function VotingEdit() {
                }
              </TextCustom>
            )}
-            <Spacing />
+
          </StackCustom>

          {data?.Voting_DaftarNamaVote?.map((item: any, index: number) => (
@@ -270,7 +271,7 @@ export default function VotingEdit() {
                  ...(data as any),
                  Voting_DaftarNamaVote: data?.Voting_DaftarNamaVote?.map(
                    (item: any, i: any) =>
-                      i === index ? { ...item, value } : item
+                      i === index ? { ...item, value } : item,
                  ),
                })
              }
@@ -327,6 +328,6 @@ export default function VotingEdit() {
          <Spacing />
        </StackCustom>
      )}
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/(user)/voting/[id]/list-of-contributor.tsx
+++ b/app/(application)/(user)/voting/[id]/list-of-contributor.tsx
@@ -1,69 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  AvatarUsernameAndOtherComponent,
-  BadgeCustom,
-  BaseBox,
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { apiVotingContribution } from "@/service/api-client/api-voting";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
+import Voting_ScreenListOfContributor from "@/screens/Voting/ScreenListOfContributor";

-export default function Voting_ListOfContributor() {
-  const { id } = useLocalSearchParams();
-  const [listData, setListData] = useState<any>([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadList();
-    }, [id])
-  );
-
-  const onLoadList = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiVotingContribution({
-        id: id as string,
-        authorId: "",
-        category: "list",
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
-  return (
-    <ViewWrapper>
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Tidak ada kontributor</TextCustom>
-      ) : (
-        listData.map((item: any, index: number) => (
-          <BaseBox paddingTop={5} paddingBottom={5} key={index.toString()}>
-            <AvatarUsernameAndOtherComponent
-              avatar={item?.Author?.Profile?.imageId || ""}
-              name={item?.Author?.username || "Username"}
-              avatarHref={`/profile/${item?.Author?.Profile?.id}`}
-              rightComponent={
-                <BadgeCustom style={{ alignSelf: "flex-end" }}>
-                  {item?.Voting_DaftarNamaVote?.value}
-                </BadgeCustom>
-              }
-            />
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
-  );
+export default function VotingListOfContributor() {
+  return <Voting_ScreenListOfContributor />;
 }
--- a/app/(application)/(user)/voting/create.tsx
+++ b/app/(application)/(user)/voting/create.tsx
@@ -3,11 +3,12 @@ import {
  BoxButtonOnFooter,
  ButtonCustom,
  CenterCustom,
+  NewWrapper,
  Spacing,
  StackCustom,
  TextAreaCustom,
  TextInputCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { MainColor } from "@/constants/color-palet";
@@ -79,7 +80,7 @@ export default function VotingCreate() {
          type: "success",
          text1: "Data berhasil disimpan",
        });
-        router.replace("/(application)/(user)/voting/(tabs)/status?status=review");
+        router.replace("/voting/(tabs)/status?status=review");
      } else {
        Toast.show({
          type: "error",
@@ -106,7 +107,7 @@ export default function VotingCreate() {
  };

  return (
-    <ViewWrapper footerComponent={buttonSubmit()}>
+    <NewWrapper footerComponent={buttonSubmit()}>
      <StackCustom gap={"xs"}>
        <TextInputCustom
          label="Judul Voting"
@@ -142,7 +143,6 @@ export default function VotingCreate() {
          }
        />

-
        {listVote.map((item, index) => (
          <TextInputCustom
            key={index}
@@ -153,8 +153,8 @@ export default function VotingCreate() {
            onChangeText={(value: any) =>
              setListVote(
                listVote.map((item, i) =>
-                  i === index ? { ...item, value } : item
-                )
+                  i === index ? { ...item, value } : item,
+                ),
              )
            }
          />
@@ -198,6 +198,6 @@ export default function VotingCreate() {

        <Spacing />
      </StackCustom>
-    </ViewWrapper>
+    </NewWrapper>
  );
 }
--- a/app/(application)/admin/_layout.tsx
+++ b/app/(application)/admin/_layout.tsx
@@ -8,6 +8,8 @@ import {
 } from "@/components";
 import DrawerAdmin from "@/components/Drawer/DrawerAdmin";
 import NavbarMenu from "@/components/Drawer/NavbarMenu";
+import NavbarMenu_V2 from "@/components/Drawer/NavbarMenu_V2";
+import NavbarMenu_V3 from "@/components/Drawer/NavbarMenu_V3";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import {
  ICON_SIZE_MEDIUM,
@@ -20,6 +22,10 @@ import {
  adminListMenu,
  superAdminListMenu,
 } from "@/screens/Admin/listPageAdmin";
+import {
+  adminListMenu_V2,
+  superAdminListMenu_V2,
+} from "@/screens/Admin/listPageAdmin_V2";
 import { GStyles } from "@/styles/global-styles";
 import { FontAwesome6, Ionicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
@@ -148,6 +154,24 @@ export default function AdminLayout() {
            }
            onClose={() => setOpenDrawerNavbar(false)}
          />
+
+          {/* <NavbarMenu_V2
+            items={
+              user?.masterUserRoleId === "2"
+                ? adminListMenu_V2
+                : superAdminListMenu_V2
+            }
+            onClose={() => setOpenDrawerNavbar(false)}
+          /> */}
+
+          {/* <NavbarMenu_V3
+            items={
+              user?.masterUserRoleId === "2"
+                ? adminListMenu_V2
+                : superAdminListMenu_V2
+            }
+            onClose={() => setOpenDrawerNavbar(false)}
+          /> */}
        </StackCustom>
      </DrawerAdmin>

@@ -198,7 +222,7 @@ export default function AdminLayout() {
                  //   size={ICON_SIZE_SMALL}
                  //   color={MainColor.white}
                  // />
-                  <AdminNotificationBell/>
+                  <AdminNotificationBell />
                ),
                path: "/admin/notification",
              },
--- a/app/(application)/admin/app-information/business-field/[id]/index.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/app-information/index.tsx
+++ b/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",
-  },
-];
--- a/app/(application)/admin/collaboration/[id]/[status].tsx
+++ b/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>
    </>
  );
--- a/app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx
+++ b/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 (
--- a/app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/donation/[id]/list-of-donatur.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/donation/[status]/status.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/donation/category-update.tsx
+++ b/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);
    }
--- a/app/(application)/admin/donation/category.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/event/[id]/[status]/index.tsx
+++ b/app/(application)/admin/event/[id]/[status]/index.tsx
@@ -197,7 +197,7 @@ export default function AdminEventDetail() {
                />
              )}

-              <TextCustom align="center">{isDevLink}</TextCustom>
+              {/* <TextCustom align="center">{isDevLink}</TextCustom> */}
            </StackCustom>
          </BaseBox>
        )}
--- a/app/(application)/admin/event/[id]/list-of-participants.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/event/[status]/status.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/event/type-of-event.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/investment/[id]/[status]/transaction-detail.tsx
+++ b/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";
@@ -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}
--- a/app/(application)/admin/job/[id]/[status]/index.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/admin/job/[id]/[status]/reject-input.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/admin/job/[status]/status.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/maps.tsx
+++ b/app/(application)/admin/maps.tsx
@@ -1,4 +1,13 @@
-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 { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -45,7 +54,7 @@ export default function AdminMaps() {
  useFocusEffect(
    useCallback(() => {
      handlerLoadList();
-    }, [])
+    }, []),
  );

  const handlerLoadList = async () => {
@@ -144,52 +153,52 @@ export default function AdminMaps() {
          <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>
--- a/app/(application)/admin/notification/index.tsx
+++ b/app/(application)/admin/notification/index.tsx
@@ -1,213 +1,10 @@
-import {
-  AlertDefaultSystem,
-  BackButton,
-  BaseBox,
-  DrawerCustom,
-  MenuDrawerDynamicGrid,
-  NewWrapper,
-  ScrollableCustom,
-  StackCustom,
-  TextCustom,
-} from "@/components";
-import { IconPlus } from "@/components/_Icon";
-import { IconDot } from "@/components/_Icon/IconComponent";
-import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import NoDataText from "@/components/_ShareComponent/NoDataText";
-import { AccentColor, MainColor } from "@/constants/color-palet";
-import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-import { useAuth } from "@/hooks/use-auth";
-import { useNotificationStore } from "@/hooks/use-notification-store";
-import { apiGetNotificationsById } from "@/service/api-notifications";
-import { listOfcategoriesAppNotification } from "@/types/type-notification-category";
-import { formatChatTime } from "@/utils/formatChatTime";
-import { Ionicons } from "@expo/vector-icons";
-import { router, Stack, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { RefreshControl, View } from "react-native";
-
-const selectedCategory = (value: string) => {
-  const category = listOfcategoriesAppNotification.find(
-    (c) => c.value === value
-  );
-  return category?.label;
-};
-
-const BoxNotification = ({
-  data,
-  activeCategory,
-}: {
-  data: any;
-  activeCategory: string | null;
-}) => {
-  const { markAsRead } = useNotificationStore();
-  return (
-    <>
-      <BaseBox
-        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
-        onPress={() => {
-          console.log(
-            "Notification >",
-            selectedCategory(activeCategory as string)
-          );
-          router.push(data.deepLink);
-          markAsRead(data.id);
-        }}
-      >
-        <StackCustom>
-          <TextCustom truncate={2} bold>
-            {data.title}
-          </TextCustom>
-
-          <TextCustom truncate={2}>{data.pesan}</TextCustom>
-
-          <TextCustom size="small" color="gray">
-            {formatChatTime(data.createdAt)}
-          </TextCustom>
-        </StackCustom>
-      </BaseBox>
-    </>
-  );
-};
+import Admin_ScreenNotification from "@/screens/Admin/Notification-Admin/ScreenNotificationAdmin";
+import Admin_ScreenNotification2 from "@/screens/Admin/Notification-Admin/ScreenNotificationAdmin2";

 export default function AdminNotification() {
-  const { user } = useAuth();
-  const [activeCategory, setActiveCategory] = useState<string | null>("event");
-  const [listData, setListData] = useState<any[]>([]);
-  const [refreshing, setRefreshing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [openDrawer, setOpenDrawer] = useState(false);
-
-  const { markAsReadAll } = useNotificationStore();
-
-  const handlePress = (item: any) => {
-    setActiveCategory(item.value);
-    // tambahkan logika lain seperti filter dsb.
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      fecthData();
-    }, [activeCategory])
-  );
-
-  const fecthData = async () => {
-    try {
-      setLoading(true);
-      const response = await apiGetNotificationsById({
-        id: user?.id as any,
-        category: activeCategory as any,
-      });
-
-      if (response.success) {
-        setListData(response.data);
-      } else {
-        setListData([]);
-      }
-    } catch (error) {
-      console.log("Error Notification", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onRefresh = () => {
-    setRefreshing(true);
-    fecthData();
-    setRefreshing(false);
-  };
-
  return (
    <>
-      <Stack.Screen
-        options={{
-          title: "Admin Notifikasi",
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <IconDot
-              color={MainColor.yellow}
-              onPress={() => setOpenDrawer(true)}
-            />
-          ),
-        }}
-      />
-
-      <NewWrapper
-        headerComponent={
-          <ScrollableCustom
-            data={listOfcategoriesAppNotification.map((e, i) => ({
-              id: i,
-              label: e.label,
-              value: e.value,
-            }))}
-            onButtonPress={handlePress}
-            activeId={activeCategory as string}
-          />
-        }
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-      >
-        {loading ? (
-          <ListSkeletonComponent />
-        ) : _.isEmpty(listData) ? (
-          <NoDataText text="Belum ada notifikasi" />
-        ) : (
-          listData.map((e, i) => (
-            <View key={i}>
-              <BoxNotification
-                data={e}
-                activeCategory={activeCategory as any}
-              />
-            </View>
-          ))
-        )}
-      </NewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <MenuDrawerDynamicGrid
-          data={[
-            {
-              label: "Tandai Semua Dibaca",
-              value: "read-all",
-              icon: (
-                <Ionicons
-                  name="reader-outline"
-                  size={ICON_SIZE_SMALL}
-                  color={MainColor.white}
-                />
-              ),
-              path: "",
-            },
-          ]}
-          onPressItem={(item: any) => {
-            console.log("Item", item.value);
-            if (item.value === "read-all") {
-              AlertDefaultSystem({
-                title: "Tandai Semua Dibaca",
-                message:
-                  "Apakah Anda yakin ingin menandai semua notifikasi dibaca?",
-                textLeft: "Batal",
-                textRight: "Ya",
-                onPressRight: () => {
-                  markAsReadAll(user?.id as any);
-                  const data = _.cloneDeep(listData);
-                  data.forEach((e) => {
-                    e.isRead = true;
-                  });
-                  setListData(data);
-                  onRefresh();
-                  setOpenDrawer(false);
-                },
-              });
-            }
-          }}
-        />
-      </DrawerCustom>
+      <Admin_ScreenNotification2 />
    </>
  );
 }
--- a/app/(application)/admin/super-admin/[id]/index.tsx
+++ b/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>
--- a/app/(application)/admin/user-access/[id]/index.tsx
+++ b/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>
--- a/app/(application)/admin/user-access/index.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/voting/[id]/[status]/index.tsx
+++ b/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>
    </>
  );
 }
--- a/app/(application)/admin/voting/[status]/status.tsx
+++ b/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 />;
 }
--- a/app/(application)/admin/voting/history.tsx
+++ b/app/(application)/admin/voting/history.tsx
@@ -1,104 +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 } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
-import { Divider } from "react-native-paper";
+import { Admin_ScreenVotingHistory } from "@/screens/Admin/Voting/ScreenVotingHistory";

 export default function AdminVotingHistory() {
-  const [list, setList] = useState<any | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [search, setSearch] = useState<string>("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [ search])
-  );
-
-  const onLoadData = async () => {
-    try { 
-      setLoadList(true);
-      const response = await apiAdminVoting({
-        category: "history",
-        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="Riwayat"
-          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}/history`);
-                  }}
-                />
-              }
-              value2={<TextCustom truncate={1}>{item?.Author?.username || "-"}</TextCustom>}
-              value3={
-                <TextCustom truncate={2}>
-                  {item?.title || "-"}
-                </TextCustom>
-              }
-            />
-          ))}
-        </StackCustom>
-      </ViewWrapper>
-    </>
-  );
+  return <Admin_ScreenVotingHistory />;
 }
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,11 +1,21 @@
 import { BackButton, StackCustom, TextCustom, ViewWrapper } from "@/components";
-import { Stack } from "expo-router";
+import { router, Stack } from "expo-router";

 export default function NotFoundScreen() {
+  // Setelah (dengan penanganan):
+      const handleBack = () => {
+       if (router.canGoBack()) {
+         router.back();
+       } else {
+         // Alternatif action ketika tidak bisa kembali
+         router.replace('/'); // atau navigasi ke halaman default
+       }
+     };
+
  return (
    <>
      <Stack.Screen
-        options={{ headerShown: true, title: "", headerLeft: () => <BackButton /> }}
+        options={{ headerShown: true, title: "", headerLeft: () => <BackButton onPress={() => handleBack()} /> }}
      />
      <ViewWrapper>
        <StackCustom
--- a/bun.lock
+++ b/bun.lock
--- a/components/DateInput/DataTimeAndroid.tsx
+++ b/components/DateInput/DataTimeAndroid.tsx
@@ -1,4 +1,3 @@
-
 // DateTimeInput.tsx
 import { MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
@@ -7,7 +6,14 @@ import DateTimePicker, {
  DateTimePickerEvent,
 } from "@react-native-community/datetimepicker";
 import React, { useCallback, useState } from "react";
-import { Pressable, StyleProp, Text, View, ViewStyle } from "react-native";
+import {
+  Keyboard,
+  Pressable,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
+} from "react-native";
 import Grid from "../Grid/GridCustom";
 import TextCustom from "../Text/TextCustom";

@@ -53,7 +59,7 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
  const [selectedDate, setSelectedDate] = useState<Date>(value as any);
  const [selectedTime, setSelectedTime] = useState<Date>(value as any);

-  console.log("Date Android", value)
+  console.log("Date Android", value);

  // Fungsi untuk menggabungkan tanggal dan waktu
  const combineDateAndTime = useCallback((date: Date, time: Date): Date => {
@@ -62,7 +68,7 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
      time.getHours(),
      time.getMinutes(),
      time.getSeconds(),
-      time.getMilliseconds()
+      time.getMilliseconds(),
    );
    return combined;
  }, []);
@@ -92,10 +98,12 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
  };

  const toggleDatePicker = () => {
+    Keyboard.dismiss();
    setShowDate(!showDate);
  };

  const toggleTimePicker = () => {
+    Keyboard.dismiss();
    setShowTime(!showTime);
  };

--- a/components/DateInput/DateTimeIOS.tsx
+++ b/components/DateInput/DateTimeIOS.tsx
@@ -1,13 +1,22 @@
 // DateTimeInput.tsx
-import { MainColor } from "@/constants/color-palet";
+import { AccentColor, MainColor } from "@/constants/color-palet";
 import { GStyles } from "@/styles/global-styles";
 import { Ionicons } from "@expo/vector-icons";
 import DateTimePicker, {
  DateTimePickerEvent,
 } from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
-import React, { useState } from "react";
-import { Button, StyleProp, Text, View, ViewStyle } from "react-native";
+import React, { useState, useRef } from "react";
+import {
+  Button,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
+  Keyboard,
+  TouchableOpacity,
+  Modal,
+} from "react-native";
 import ClickableCustom from "../Clickable/ClickableCustom";
 import TextCustom from "../Text/TextCustom";

@@ -50,20 +59,35 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
 }) => {
  const [show, setShow] = useState(false);
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
-    value as any
+    value as any,
+  );
+  // State sementara untuk menyimpan nilai yang dipilih
+  const [tempSelectedDate, setTempSelectedDate] = useState<Date | undefined>(
+    value as any,
  );

  const handleConfirm = (event: any, date?: Date) => {
    if (event.type === "set" && date !== undefined) {
-      setSelectedDate(date);
-      onChange(date as any);
+      // Hanya perbarui state sementara, bukan state utama
+      setTempSelectedDate(date);
    }
  };

  const handlePress = () => {
+    // Sembunyikan keyboard sebelum menampilkan date picker
+    Keyboard.dismiss();
+    // Set state sementara ke nilai saat ini
+    setTempSelectedDate(selectedDate);
    setShow(!show);
  };

+  // Fungsi untuk menangani klik di luar area picker
+  const handleOutsidePress = () => {
+    if (show) {
+      setShow(false);
+    }
+  };
+
  return (
    <>
      <ClickableCustom
@@ -112,84 +136,125 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
          ))}
      </ClickableCustom>

-      {show && (
-        <>
-          <View
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={show}
+        onRequestClose={() => setShow(false)}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.5)", // Efek blur dengan background semi-transparan
+          }}
+        >
+          <TouchableOpacity
            style={{
              position: "absolute",
-              zIndex: 15,
-              backgroundColor: "white",
-              borderRadius: 8,
-              padding: 10,
-              // top: 0,
+              top: 0,
              bottom: 0,
              left: 0,
              right: 0,
-              borderColor: "#ccc",
+            }}
+            activeOpacity={1}
+            onPress={handleOutsidePress}
+          >
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+
+          <View
+            style={{
+              zIndex: 15,
+              backgroundColor: MainColor.white_gray,
+              borderRadius: 16,
+              padding: 20,
+              marginHorizontal: 20,
+              width: "95%",
+              maxWidth: 400,
+              borderColor: MainColor.placeholder,
              borderWidth: 1,
            }}
+            onStartShouldSetResponder={() => true} // Mencegah event bubbling ke TouchableOpacity induk
+            onResponderRelease={() => {}} // Handler kosong untuk mencegah event bubbling
          >
-            {/* <View style={{ alignItems: "flex-start" }}>
-              <Ionicons
-                name="close"
-                size={20}
-                color="black"
-                onPress={() => {
-                  setShow(false);
-                  setSelectedDate(undefined);
+            {/* <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: 10,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 18,
+                  fontWeight: "bold",
+                  color: MainColor.black,
                }}
-              />
+              >
+                Pilih Tanggal & Waktu
+              </Text>
+              <TouchableOpacity onPress={() => setShow(false)}>
+                <Ionicons
+                  name="close"
+                  size={24}
+                  color={AccentColor.blackgray}
+                />
+              </TouchableOpacity>
            </View> */}

            <DateTimePicker
-              value={selectedDate || new Date()}
+              value={tempSelectedDate || new Date()}
              mode={"datetime"}
-              display="spinner"
+              display="inline"
              onChange={handleConfirm}
              minimumDate={minimumDate}
              maximumDate={maximumDate}
              themeVariant="light"
            />
-            <View style={{ flexDirection: "row", gap: 10 }}>
-              <ClickableCustom
+            <View style={{ flexDirection: "row", gap: 10, marginTop: 15 }}>
+              <TouchableOpacity
                onPress={() => {
-                  setShow(false)
-                  setSelectedDate(undefined)
+                  setShow(false);
+                  // Kembalikan ke nilai sebelumnya jika batal
+                  setTempSelectedDate(selectedDate);
                }}
                style={{
+                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  padding: 12,
                  borderRadius: 10,
                  backgroundColor: MainColor.placeholder,
-                  marginTop: 10,
-                  width: "48%",
                }}
              >
                <TextCustom color="black">Batal</TextCustom>
-              </ClickableCustom>
+              </TouchableOpacity>

-              <ClickableCustom
+              <TouchableOpacity
                onPress={() => {
-                  setShow(false)
-                  onChange(selectedDate as any)
+                  // Simpan nilai yang dipilih ke state utama hanya saat OK ditekan
+                  setSelectedDate(tempSelectedDate);
+                  onChange(tempSelectedDate as any);
+                  setShow(false);
                }}
                style={{
+                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  padding: 12,
                  borderRadius: 10,
                  backgroundColor: MainColor.darkblue,
-                  marginTop: 10,
-                  width: "48%",
                }}
              >
                <TextCustom>OK</TextCustom>
-              </ClickableCustom>
+              </TouchableOpacity>
            </View>
          </View>
-        </>
-      )}
+        </View>
+      </Modal>
    </>
  );
 };
--- a/components/Drawer/NavbarMenu.back.tsx
+++ b/components/Drawer/NavbarMenu.back.tsx
@@ -0,0 +1,276 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export interface NavbarItem {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface NavbarMenuProps {
+  items: NavbarItem[];
+  onClose?: () => void;
+}
+
+export default function NavbarMenuBackup({ items, onClose }: NavbarMenuProps) {
+  const pathname = usePathname();
+  const [activeLink, setActiveLink] = useState<string | null>(null);
+  const [openKeys, setOpenKeys] = useState<string[]>([]); // Untuk kontrol dropdown
+
+  // Normalisasi path: hapus trailing slash
+  const normalizePath = (path: string) => path.replace(/\/+$/, "");
+  const normalizedPathname = pathname ? normalizePath(pathname) : "";
+
+  // Set activeLink saat pathname berubah
+  useEffect(() => {
+    if (normalizedPathname) {
+      setActiveLink(normalizedPathname);
+    }
+  }, [normalizedPathname]);
+
+  // Toggle dropdown
+  const toggleOpen = (label: string) => {
+    setOpenKeys((prev) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [label]
+    );
+  };
+
+  return (
+    <View
+      style={{
+        //  flex: 1,
+        //  backgroundColor: MainColor.black,
+        marginBottom: 20, 
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          paddingVertical: 10, // Opsional: tambahkan padding
+        }}
+        //  showsVerticalScrollIndicator={false} // Opsional: sembunyikan indikator scroll
+      >
+        {items.map((item) => (
+          <MenuItem
+            key={item.label}
+            item={item}
+            onClose={onClose}
+            activeLink={activeLink}
+            setActiveLink={setActiveLink}
+            isOpen={openKeys.includes(item.label)}
+            toggleOpen={() => toggleOpen(item.label)}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+// Komponen Item Menu
+function MenuItem({
+  item,
+  onClose,
+  activeLink,
+  setActiveLink,
+  isOpen,
+  toggleOpen,
+}: {
+  item: NavbarItem;
+  onClose?: () => void;
+  activeLink: string | null;
+  setActiveLink: (link: string | null) => void;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const isActive = activeLink === item.link;
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Animasi saat isOpen berubah
+  React.useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? (item.links ? item.links.length * 40 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links, animatedHeight]);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
+          <Ionicons
+            name={item.icon}
+            size={16}
+            color={MainColor.white}
+            style={styles.icon}
+          />
+          <Text style={styles.parentText}>{item.label}</Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            // {
+            //   backgroundColor: "red",
+            // },
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 40],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {item.links.map((subItem, index) => {
+            const isSubActive = activeLink === subItem.link;
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, isSubActive && styles.subItemActive]}
+                onPress={() => {
+                  setActiveLink(subItem.link);
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="radio-button-on-outline"
+                  size={16}
+                  color={isSubActive ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    isSubActive && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        setActiveLink(item.link || null);
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={16}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 5,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    // backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    // backgroundColor: AccentColor.darkblue,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+});
--- a/components/Drawer/NavbarMenu.tsx
+++ b/components/Drawer/NavbarMenu.tsx
@@ -28,7 +28,7 @@ interface NavbarMenuProps {
  onClose?: () => void;
 }

-export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
+export default function NavbarMenuBackup({ items, onClose }: NavbarMenuProps) {
  const pathname = usePathname();
  const [activeLink, setActiveLink] = useState<string | null>(null);
  const [openKeys, setOpenKeys] = useState<string[]>([]); // Untuk kontrol dropdown
@@ -41,13 +41,41 @@ export default function NavbarMenu({ items, onClose }: NavbarMenuProps) {
  useEffect(() => {
    if (normalizedPathname) {
      setActiveLink(normalizedPathname);
+      
+      // Temukan menu induk yang sesuai dengan path saat ini dan buka dropdown-nya
+      for (const item of items) {
+        // Cocokkan dengan link langsung
+        if (item.link && normalizedPathname.startsWith(item.link)) {
+          setOpenKeys(prev => {
+            if (!prev.includes(item.label)) {
+              return [...prev, item.label];
+            }
+            return prev;
+          });
+          break; // Hentikan loop setelah menemukan kecocokan pertama
+        }
+        
+        // Cocokkan dengan submenu
+        if (item.links && item.links.length > 0) {
+          const matchingSubItem = item.links.find(link => normalizedPathname.startsWith(link.link));
+          if (matchingSubItem) {
+            setOpenKeys(prev => {
+              if (!prev.includes(item.label)) {
+                return [...prev, item.label];
+              }
+              return prev;
+            });
+            break; // Hentikan loop setelah menemukan kecocokan pertama
+          }
+        }
+      }
    }
-  }, [normalizedPathname]);
+  }, [normalizedPathname, items]);

  // Toggle dropdown
  const toggleOpen = (label: string) => {
    setOpenKeys((prev) =>
-      prev.includes(label) ? prev.filter((key) => key !== label) : [label]
+      prev.includes(label) ? prev.filter((key) => key !== label) : [...prev, label]
    );
  };

@@ -97,35 +125,71 @@ function MenuItem({
  isOpen: boolean;
  toggleOpen: () => void;
 }) {
+  // Cek apakah menu ini atau submenu-nya yang aktif
  const isActive = activeLink === item.link;
+  
+  // Cek apakah path saat ini cocok dengan salah satu submenu
+  const isSubmenuActive = item.links && item.links.some(subItem => activeLink === subItem.link);
+  
+  // Cek apakah path saat ini adalah detail dari submenu ini (misalnya /admin/event/123/detail)
+  const isDetailPageOfThisMenu = item.links && item.links.length > 0 && activeLink && 
+    item.links.some(link => {
+      const linkPath = link.link.replace(/\/+$/, "");
+      return activeLink.startsWith(linkPath + "/");
+    });
+  
+  // Gabungkan status aktif untuk menentukan apakah menu ini harus aktif
+  const isMenuActive = isActive || isSubmenuActive || isDetailPageOfThisMenu;
+  
  const animatedHeight = useRef(new Animated.Value(0)).current;

  // Animasi saat isOpen berubah
  React.useEffect(() => {
+    // Jika ini adalah halaman detail dari menu ini, buka dropdown secara otomatis
+    const shouldAutoOpen = isDetailPageOfThisMenu && !isOpen;
+    
    Animated.timing(animatedHeight, {
-      toValue: isOpen ? (item.links ? item.links.length * 40 : 0) : 0,
+      toValue: (isOpen || isDetailPageOfThisMenu) ? (item.links ? item.links.length * 40 : 0) : 0,
      duration: 200,
      useNativeDriver: false,
    }).start();
-  }, [isOpen, item.links, animatedHeight]);
+    
+    // Jika perlu membuka dropdown otomatis, panggil toggleOpen
+    if (shouldAutoOpen) {
+      toggleOpen();
+    }
+  }, [isOpen, item.links, animatedHeight, isDetailPageOfThisMenu, toggleOpen]);

  // Jika ada submenu
  if (item.links && item.links.length > 0) {
    return (
      <View>
        {/* Parent Item */}
-        <TouchableOpacity style={styles.parentItem} onPress={toggleOpen}>
+        <TouchableOpacity
+          style={[
+            styles.parentItem,
+            isMenuActive && styles.parentItemActive,
+          ]}
+          onPress={toggleOpen}
+        >
          <Ionicons
            name={item.icon}
            size={16}
-            color={MainColor.white}
+            color={isMenuActive ? MainColor.yellow : MainColor.white}
            style={styles.icon}
          />
-          <Text style={styles.parentText}>{item.label}</Text>
+          <Text
+            style={[
+              styles.parentText,
+              isMenuActive && { color: MainColor.yellow },
+            ]}
+          >
+            {item.label}
+          </Text>
          <Ionicons
            name={isOpen ? "chevron-up" : "chevron-down"}
            size={16}
-            color={MainColor.white}
+            color={isMenuActive ? MainColor.yellow : MainColor.white}
          />
        </TouchableOpacity>

@@ -222,6 +286,9 @@ const styles = StyleSheet.create({
    marginBottom: 5,
    justifyContent: "space-between",
  },
+  parentItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
  parentText: {
    flex: 1,
    fontSize: 16,
--- a/components/Drawer/NavbarMenu_V2.tsx
+++ b/components/Drawer/NavbarMenu_V2.tsx
@@ -0,0 +1,550 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export interface NavbarItem_V2 {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+    detailPattern?: string; // NEW: Pattern untuk match detail pages
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface NavbarMenuProps {
+  items: NavbarItem_V2[];
+  onClose?: () => void;
+}
+
+export default function NavbarMenu_V2({ items, onClose }: NavbarMenuProps) {
+  const pathname = usePathname();
+  const [openKeys, setOpenKeys] = useState<string[]>([]);
+
+  // Normalisasi path: hapus trailing slash
+  const normalizePath = (path: string) => path.replace(/\/+$/, "");
+  const normalizedPathname = pathname ? normalizePath(pathname) : "";
+
+  // Auto-open parent menu jika submenu aktif
+  useEffect(() => {
+    if (!normalizedPathname || !items || items.length === 0) {
+      return;
+    }
+
+    try {
+      const newOpenKeys: string[] = [];
+      
+      // Helper function yang sama dengan di MenuItem
+      const checkPathMatch = (linkPath: string, detailPattern?: string) => {
+        const normalizedLink = linkPath.replace(/\/+$/, "");
+        
+        // Exact match
+        if (normalizedPathname === normalizedLink) return true;
+        
+        // Detail pattern match
+        if (detailPattern) {
+          const patternRegex = new RegExp(
+            "^" + detailPattern.replace(/\*/g, "[^/]+") + "(/.*)?$"
+          );
+          if (patternRegex.test(normalizedPathname)) {
+            return true;
+          }
+        }
+        
+        // Detail page match (fallback)
+        if (normalizedPathname.startsWith(normalizedLink + "/")) {
+          const remainder = normalizedPathname.substring(normalizedLink.length + 1);
+          const segments = remainder.split("/").filter(s => s.length > 0);
+          
+          if (segments.length === 0) return false;
+          
+          const commonWords = [
+            // Actions
+            'detail', 'edit', 'create', 'new', 'add', 'delete', 'view', 
+            
+            // Status types
+            'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+            
+            // General pages
+            'category', 'history', 'dashboard', 'index',
+            
+            // Event specific
+            'type-of-event', 'type-create', 'type-update',
+            
+            // Forum specific
+            'posting', 'report-posting', 'report-comment',
+            
+            // Collaboration
+            'group',
+            
+            // App Information
+            'business-field', 'information-bank', 'sticker',
+            'bidang-update', 'sub-bidang-update',
+            
+            // Transaction/Finance related
+            'transaction-detail', 'transaction', 'payment', 
+            'disbursement-of-funds', 'detail-disbursement-of-funds',
+            'list-disbursement-of-funds',
+            
+            // List pages (CRITICAL!)
+            'list-of-investor', 'list-of-donatur', 'list-of-participants',
+            'list-comment', 'list-report-comment', 'list-report-posting',
+            
+            // Input/Form pages
+            'reject-input',
+            
+            // Category pages
+            'category-create', 'category-update'
+          ];
+          
+          const hasIdSegment = segments.some(segment => {
+            if (commonWords.includes(segment.toLowerCase())) {
+              return false;
+            }
+            
+            const isPureNumber = /^\d+$/.test(segment);
+            const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment);
+            const hasNumber = /\d/.test(segment);
+            const isAlphanumericId = /^[a-z0-9_-]+$/i.test(segment) && segment.length <= 50 && hasNumber;
+            
+            return isPureNumber || isUUID || isAlphanumericId;
+          });
+          
+          return hasIdSegment;
+        }
+        
+        return false;
+      };
+      
+      items.forEach((item) => {
+        if (item.links && item.links.length > 0) {
+          // Check jika ada submenu yang match dengan current path
+          const hasActiveSubmenu = item.links.some((subItem) => {
+            return checkPathMatch(subItem.link, subItem.detailPattern);
+          });
+
+          if (hasActiveSubmenu) {
+            newOpenKeys.push(item.label);
+          }
+        }
+      });
+
+      setOpenKeys(newOpenKeys);
+    } catch (error) {
+      console.error("Error in NavbarMenu useEffect:", error);
+    }
+  }, [normalizedPathname, items]);
+
+  // Toggle dropdown
+  const toggleOpen = (label: string) => {
+    setOpenKeys((prev) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [...prev, label]
+    );
+  };
+
+  return (
+    <View
+      style={{
+        marginBottom: 20,
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          paddingVertical: 10,
+        }}
+      >
+        {items && items.length > 0 ? (
+          items.map((item) => (
+            <MenuItem
+              key={item.label}
+              item={item}
+              onClose={onClose}
+              currentPath={normalizedPathname}
+              isOpen={openKeys.includes(item.label)}
+              toggleOpen={() => toggleOpen(item.label)}
+            />
+          ))
+        ) : null}
+      </ScrollView>
+    </View>
+  );
+}
+
+// Komponen Item Menu
+function MenuItem({
+  item,
+  onClose,
+  currentPath,
+  isOpen,
+  toggleOpen,
+}: {
+  item: NavbarItem_V2;
+  onClose?: () => void;
+  currentPath: string;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Helper function untuk check apakah path aktif
+  const isPathActive = (linkPath: string | undefined, detailPattern?: string) => {
+    if (!linkPath) return false;
+    const normalizedLink = linkPath.replace(/\/+$/, "");
+    
+    // 1. Match exact - prioritas tertinggi
+    if (currentPath === normalizedLink) return true;
+    
+    // 2. Jika ada detailPattern, cek pattern dulu
+    if (detailPattern) {
+      // detailPattern contoh: "/admin/job/*/review" 
+      // akan match dengan:
+      // - /admin/job/123/review ✅
+      // - /admin/job/123/review/transaction-detail ✅
+      // - /admin/job/123/review/anything/nested ✅
+      const patternRegex = new RegExp(
+        "^" + detailPattern.replace(/\*/g, "[^/]+") + "(/.*)?$"
+      );
+      const isMatch = patternRegex.test(currentPath);
+      
+      // Debug log untuk pattern matching
+      if (currentPath.includes('transaction-detail') || currentPath.includes('disbursement')) {
+        console.log('🔍 Pattern Match Check:', {
+          currentPath,
+          detailPattern,
+          regex: patternRegex.toString(),
+          isMatch
+        });
+      }
+      
+      if (isMatch) {
+        return true;
+      }
+    }
+    
+    // 3. Match untuk detail pages (fallback)
+    if (currentPath.startsWith(normalizedLink + "/")) {
+      const remainder = currentPath.substring(normalizedLink.length + 1);
+      const segments = remainder.split("/").filter(s => s.length > 0);
+      
+      if (segments.length === 0) return false;
+      
+      const commonWords = [
+        // Actions
+        'detail', 'edit', 'create', 'new', 'add', 'delete', 'view', 
+        
+        // Status types
+        'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+        
+        // General pages
+        'category', 'history', 'dashboard', 'index',
+        
+        // Event specific
+        'type-of-event', 'type-create', 'type-update',
+        
+        // Forum specific
+        'posting', 'report-posting', 'report-comment',
+        
+        // Collaboration
+        'group',
+        
+        // App Information
+        'business-field', 'information-bank', 'sticker',
+        'bidang-update', 'sub-bidang-update',
+        
+        // Transaction/Finance related
+        'transaction-detail', 'transaction', 'payment', 
+        'disbursement-of-funds', 'detail-disbursement-of-funds',
+        'list-disbursement-of-funds',
+        
+        // List pages (CRITICAL!)
+        'list-of-investor', 'list-of-donatur', 'list-of-participants',
+        'list-comment', 'list-report-comment', 'list-report-posting',
+        
+        // Input/Form pages
+        'reject-input',
+        
+        // Category pages
+        'category-create', 'category-update'
+      ];
+      
+      const hasIdSegment = segments.some(segment => {
+        if (commonWords.includes(segment.toLowerCase())) {
+          return false;
+        }
+        
+        const isPureNumber = /^\d+$/.test(segment);
+        const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment);
+        const hasNumber = /\d/.test(segment);
+        const isAlphanumericId = /^[a-z0-9_-]+$/i.test(segment) && segment.length <= 50 && hasNumber;
+        
+        return isPureNumber || isUUID || isAlphanumericId;
+      });
+      
+      return hasIdSegment;
+    }
+    
+    return false;
+  };
+
+  // Check apakah menu item ini atau submenu-nya yang aktif
+  const isActive = isPathActive(item.link);
+  const hasActiveSubmenu =
+    item.links?.some((subItem) => isPathActive(subItem.link, subItem.detailPattern)) || false;
+
+  // Animasi saat isOpen berubah
+  useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: isOpen ? (item.links ? item.links.length * 44 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links, animatedHeight]);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    // PRE-CALCULATE semua active states untuk submenu
+    const submenuActiveStates = item.links.map(subItem => ({
+      subItem,
+      isActive: isPathActive(subItem.link, subItem.detailPattern),
+      pathLength: subItem.link.length
+    }));
+
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity
+          style={[
+            styles.parentItem,
+            hasActiveSubmenu && styles.parentItemActive,
+          ]}
+          onPress={toggleOpen}
+        >
+          <Ionicons
+            name={item.icon}
+            size={16}
+            color={hasActiveSubmenu ? MainColor.yellow : MainColor.white}
+            style={styles.icon}
+          />
+          <Text
+            style={[
+              styles.parentText,
+              hasActiveSubmenu && { color: MainColor.yellow },
+            ]}
+          >
+            {item.label}
+          </Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={hasActiveSubmenu ? MainColor.yellow : MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 44],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {submenuActiveStates.map(({ subItem, isActive: isSubActive, pathLength }, index) => {
+            
+            // CRITICAL FIX: Cek apakah ada submenu lain yang LEBIH PANJANG dan juga aktif
+            const hasMoreSpecificMatch = submenuActiveStates.some(other => {
+              if (other.subItem.link === subItem.link) return false; // Skip self
+              
+              const isOtherLonger = other.pathLength > pathLength;
+              
+              // Debug log untuk Dashboard
+              if (subItem.label === "Dashboard" && isSubActive) {
+                console.log(`🔎 Dashboard checking against ${other.subItem.label}:`, {
+                  dashboardLink: subItem.link,
+                  dashboardLength: pathLength,
+                  otherLabel: other.subItem.label,
+                  otherLink: other.subItem.link,
+                  otherPattern: other.subItem.detailPattern,
+                  otherLength: other.pathLength,
+                  otherIsActive: other.isActive,
+                  isOtherLonger,
+                  willDisableDashboard: other.isActive && isOtherLonger,
+                  currentURL: currentPath
+                });
+              }
+              
+              // Conflict log
+              if (isSubActive && other.isActive) {
+                console.log('🔍 CONFLICT DETECTED:', {
+                  current: subItem.label,
+                  currentPath: subItem.link,
+                  currentLength: pathLength,
+                  other: other.subItem.label,
+                  otherPath: other.subItem.link,
+                  otherLength: other.pathLength,
+                  isOtherLonger,
+                  shouldDisableCurrent: isOtherLonger,
+                  currentURL: currentPath
+                });
+              }
+              
+              return other.isActive && isOtherLonger;
+            });
+            
+            // Final decision
+            const finalIsActive = isSubActive && !hasMoreSpecificMatch;
+            
+            // Debug final
+            if (isSubActive) {
+              console.log('✅ Active check:', {
+                label: subItem.label,
+                link: subItem.link,
+                isSubActive,
+                hasMoreSpecificMatch,
+                finalIsActive
+              });
+            }
+            
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, finalIsActive && styles.subItemActive]}
+                onPress={() => {
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="radio-button-on-outline"
+                  size={16}
+                  color={finalIsActive ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    finalIsActive && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={16}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 5,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+});
--- a/components/Drawer/NavbarMenu_V3.tsx
+++ b/components/Drawer/NavbarMenu_V3.tsx
@@ -0,0 +1,871 @@
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
+import { router, usePathname } from "expo-router";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export interface NavbarItem_V3 {
+  label: string;
+  icon?: keyof typeof Ionicons.glyphMap;
+  color?: string;
+  link?: string;
+  links?: {
+    label: string;
+    link: string;
+    detailPattern?: string; // NEW: Pattern untuk match detail pages
+  }[];
+  initiallyOpened?: boolean;
+}
+
+interface NavbarMenuProps {
+  items: NavbarItem_V3[];
+  onClose?: () => void;
+}
+
+export default function NavbarMenu_V3({ items, onClose }: NavbarMenuProps) {
+  const pathname = usePathname();
+  const [openKeys, setOpenKeys] = useState<string[]>([]);
+
+  // Normalisasi path: hapus trailing slash
+  const normalizePath = (path: string) => path.replace(/\/+$/, "");
+  const normalizedPathname = pathname ? normalizePath(pathname) : "";
+
+  // Auto-open parent menu jika submenu aktif
+  useEffect(() => {
+    if (!normalizedPathname || !items || items.length === 0) {
+      return;
+    }
+
+    try {
+      const newOpenKeys: string[] = [];
+      
+      // Helper function yang sama dengan di MenuItem
+      const checkPathMatch = (linkPath: string, detailPattern?: string) => {
+        const normalizedLink = linkPath.replace(/\/+$/, "");
+        
+        // Exact match
+        if (normalizedPathname === normalizedLink) return true;
+        
+        // Detail pattern match
+        if (detailPattern) {
+          const patternRegex = new RegExp(
+            "^" + detailPattern.replace(/\*/g, "[^/]+") + "(/.*)?$"
+          );
+          if (patternRegex.test(normalizedPathname)) {
+            return true;
+          }
+        }
+        
+        // Detail page match (fallback)
+        if (normalizedPathname.startsWith(normalizedLink + "/")) {
+          const remainder = normalizedPathname.substring(normalizedLink.length + 1);
+          const segments = remainder.split("/").filter(s => s.length > 0);
+          
+          if (segments.length === 0) return false;
+          
+          const commonWords = [
+            // Actions
+            'detail', 'edit', 'create', 'new', 'add', 'delete', 'view', 
+            
+            // Status types
+            'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+            
+            // General pages
+            'category', 'history', 'dashboard', 'index',
+            
+            // Event specific
+            'type-of-event', 'type-create', 'type-update',
+            
+            // Forum specific
+            'posting', 'report-posting', 'report-comment',
+            
+            // Collaboration
+            'group',
+            
+            // App Information
+            'business-field', 'information-bank', 'sticker',
+            'bidang-update', 'sub-bidang-update',
+            
+            // Transaction/Finance related
+            'transaction-detail', 'transaction', 'payment', 
+            'disbursement-of-funds', 'detail-disbursement-of-funds',
+            'list-disbursement-of-funds',
+            
+            // List pages (CRITICAL!)
+            'list-of-investor', 'list-of-donatur', 'list-of-participants',
+            'list-comment', 'list-report-comment', 'list-report-posting',
+            
+            // Input/Form pages
+            'reject-input',
+            
+            // Category pages
+            'category-create', 'category-update'
+          ];
+          
+          const hasIdSegment = segments.some(segment => {
+            if (commonWords.includes(segment.toLowerCase())) {
+              return false;
+            }
+            
+            const isPureNumber = /^\d+$/.test(segment);
+            const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment);
+            const hasNumber = /\d/.test(segment);
+            const isAlphanumericId = /^[a-z0-9_-]+$/i.test(segment) && segment.length <= 50 && hasNumber;
+            
+            return isPureNumber || isUUID || isAlphanumericId;
+          });
+          
+          return hasIdSegment;
+        }
+        
+        return false;
+      };
+      
+      // Calculate all potential matches for conflict resolution
+      const allMatches = items.flatMap(item => {
+        if (!item.links || item.links.length === 0) return [];
+        
+        return item.links
+          .filter(subItem => checkPathMatch(subItem.link, subItem.detailPattern))
+          .map(subItem => ({
+            parentLabel: item.label,
+            subItem,
+            pathLength: subItem.link.length
+          }));
+      });
+
+      // Find the most specific match for each parent
+      const uniqueParents = new Map<string, { parentLabel: string, longestPathLength: number }>();
+      
+      allMatches.forEach(match => {
+        const existing = uniqueParents.get(match.parentLabel);
+        if (!existing || match.pathLength > existing.longestPathLength) {
+          uniqueParents.set(match.parentLabel, {
+            parentLabel: match.parentLabel,
+            longestPathLength: match.pathLength
+          });
+        }
+      });
+
+      // Add only the parents with the most specific matches
+      newOpenKeys.push(...Array.from(uniqueParents.values()).map(item => item.parentLabel));
+      
+      // Additionally, if no specific submenu match was found but the current path
+      // starts with one of the parent menu links, add that parent
+      if (newOpenKeys.length === 0) {
+        // Find the parent whose link is the longest prefix of the current path
+        let longestMatchParent = null;
+        let longestMatchLength = 0;
+
+        items.forEach(item => {
+          if (item.links && item.links.length > 0) {
+            item.links.forEach(link => {
+              const linkPath = link.link.replace(/\/+$/, "");
+              if (normalizedPathname.startsWith(linkPath + "/") && linkPath.length > longestMatchLength) {
+                longestMatchLength = linkPath.length;
+                longestMatchParent = item.label;
+              }
+            });
+          }
+        });
+
+        if (longestMatchParent) {
+          newOpenKeys.push(longestMatchParent);
+        }
+      }
+      
+      // NEW: Check if user is on a detail page (contains ID segments or specific keywords)
+      const isOnDetailPage = (() => {
+        // Check if current path has ID-like segments or detail keywords
+        const segments = normalizedPathname.split('/').filter(s => s.length > 0);
+        
+        if (segments.length === 0) return false;
+        
+        const commonWords = [
+          // Actions
+          'detail', 'edit', 'create', 'new', 'add', 'delete', 'view',
+          
+          // Status types
+          'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+          
+          // General pages
+          'category', 'history', 'dashboard', 'index',
+          
+          // Event specific
+          'type-of-event', 'type-create', 'type-update',
+          
+          // Forum specific
+          'posting', 'report-posting', 'report-comment',
+          
+          // Collaboration
+          'group',
+          
+          // App Information
+          'business-field', 'information-bank', 'sticker',
+          'bidang-update', 'sub-bidang-update',
+          
+          // Transaction/Finance related
+          'transaction-detail', 'transaction', 'payment',
+          'disbursement-of-funds', 'detail-disbursement-of-funds',
+          'list-disbursement-of-funds',
+          
+          // List pages (CRITICAL!)
+          'list-of-investor', 'list-of-donatur', 'list-of-participants',
+          'list-comment', 'list-report-comment', 'list-report-posting',
+          
+          // Input/Form pages
+          'reject-input',
+          
+          // Category pages
+          'category-create', 'category-update'
+        ];
+        
+        const hasIdSegment = segments.some(segment => {
+          if (commonWords.includes(segment.toLowerCase())) {
+            return false;
+          }
+
+          const isPureNumber = /^\d+$/.test(segment);
+          const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment);
+          const hasNumber = /\d/.test(segment);
+          const isAlphanumericId = /^[a-z0-9_-]+$/i.test(segment) && segment.length <= 50 && hasNumber;
+
+          return isPureNumber || isUUID || isAlphanumericId;
+        });
+        
+        return hasIdSegment;
+      })();
+
+      // NEW: Check if user is on a detail page (contains ID segments or specific keywords)
+      const isOnDetailPageGlobal = (() => {
+        // Check if current path has ID-like segments or detail keywords
+        const segments = normalizedPathname.split('/').filter(s => s.length > 0);
+        
+        if (segments.length === 0) return false;
+        
+        const commonWords = [
+          // Actions
+          'detail', 'edit', 'create', 'new', 'add', 'delete', 'view',
+          
+          // Status types
+          'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+          
+          // General pages
+          'category', 'history', 'dashboard', 'index',
+          
+          // Event specific
+          'type-of-event', 'type-create', 'type-update',
+          
+          // Forum specific
+          'posting', 'report-posting', 'report-comment',
+          
+          // Collaboration
+          'group',
+          
+          // App Information
+          'business-field', 'information-bank', 'sticker',
+          'bidang-update', 'sub-bidang-update',
+          
+          // Transaction/Finance related
+          'transaction-detail', 'transaction', 'payment',
+          'disbursement-of-funds', 'detail-disbursement-of-funds',
+          'list-disbursement-of-funds',
+          
+          // List pages (CRITICAL!)
+          'list-of-investor', 'list-of-donatur', 'list-of-participants',
+          'list-comment', 'list-report-comment', 'list-report-posting',
+          
+          // Input/Form pages
+          'reject-input',
+          
+          // Category pages
+          'category-create', 'category-update'
+        ];
+        
+        // Check if any segment is a common word
+        const hasCommonWord = segments.some(segment => commonWords.includes(segment.toLowerCase()));
+        
+        // Check if any segment looks like an ID (number, UUID, alphanumeric with numbers)
+        const hasIdSegment = segments.some(segment => {
+          const isPureNumber = /^\d+$/.test(segment);
+          const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment);
+          const hasNumber = /\d/.test(segment);
+          const isAlphanumericId = /^[a-z0-9_-]+$/i.test(segment) && segment.length <= 50 && hasNumber;
+
+          return isPureNumber || isUUID || isAlphanumericId;
+        });
+        
+        // A detail page is one that has either common words or ID segments
+        return hasCommonWord || hasIdSegment;
+      })();
+
+      // NEW: Only open parent menu if the current path is a detail page of the most relevant parent
+      if (isOnDetailPageGlobal && newOpenKeys.length === 0) {
+        // Find the parent whose link is the longest prefix of the current path
+        let longestMatchParent = null;
+        let longestMatchLength = 0;
+
+        items.forEach(item => {
+          if (item.links && item.links.length > 0) {
+            item.links.forEach(link => {
+              const linkPath = link.link.replace(/\/+$/, "");
+              if (normalizedPathname.startsWith(linkPath + "/") && linkPath.length > longestMatchLength) {
+                longestMatchLength = linkPath.length;
+                longestMatchParent = item.label;
+              }
+            });
+          }
+        });
+
+        if (longestMatchParent) {
+          newOpenKeys.push(longestMatchParent);
+        }
+      }
+
+      setOpenKeys(newOpenKeys);
+    } catch (error) {
+      console.error("Error in NavbarMenu useEffect:", error);
+    }
+  }, [normalizedPathname, items]);
+
+  // Toggle dropdown
+  const toggleOpen = (label: string) => {
+    setOpenKeys((prev) =>
+      prev.includes(label) ? prev.filter((key) => key !== label) : [...prev, label]
+    );
+  };
+
+  return (
+    <View
+      style={{
+        marginBottom: 20,
+      }}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          paddingVertical: 10,
+        }}
+      >
+        {items && items.length > 0 ? (
+          items.map((item) => (
+            <MenuItem
+              key={item.label}
+              item={item}
+              items={items}
+              onClose={onClose}
+              currentPath={normalizedPathname}
+              isOpen={openKeys.includes(item.label)}
+              toggleOpen={() => toggleOpen(item.label)}
+            />
+          ))
+        ) : null}
+      </ScrollView>
+    </View>
+  );
+}
+
+// Komponen Item Menu
+function MenuItem({
+  item,
+  items,
+  onClose,
+  currentPath,
+  isOpen,
+  toggleOpen,
+}: {
+  item: NavbarItem_V3;
+  items: NavbarItem_V3[];
+  onClose?: () => void;
+  currentPath: string;
+  isOpen: boolean;
+  toggleOpen: () => void;
+}) {
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+
+  // Helper function untuk check apakah path aktif
+  const isPathActive = (linkPath: string | undefined, detailPattern?: string) => {
+    if (!linkPath) return false;
+    const normalizedLink = linkPath.replace(/\/+$/, "");
+    
+    // 1. Match exact - prioritas tertinggi
+    if (currentPath === normalizedLink) return true;
+    
+    // 2. Jika ada detailPattern, cek pattern dulu
+    if (detailPattern) {
+      // detailPattern contoh: "/admin/job/*/review" 
+      // akan match dengan:
+      // - /admin/job/123/review ✅
+      // - /admin/job/123/review/transaction-detail ✅
+      // - /admin/job/123/review/anything/nested ✅
+      const patternRegex = new RegExp(
+        "^" + detailPattern.replace(/\*/g, "[^/]+") + "(/.*)?$"
+      );
+      const isMatch = patternRegex.test(currentPath);
+      
+      // Debug log untuk pattern matching
+    //   if (currentPath.includes('transaction-detail') || currentPath.includes('disbursement')) {
+    //     console.log('🔍 Pattern Match Check:', {
+    //       currentPath,
+    //       detailPattern,
+    //       regex: patternRegex.toString(),
+    //       isMatch
+    //     });
+    //   }
+      
+      if (isMatch) {
+        return true;
+      }
+    }
+    
+    // 3. Match untuk detail pages (fallback)
+    if (currentPath.startsWith(normalizedLink + "/")) {
+      const remainder = currentPath.substring(normalizedLink.length + 1);
+      const segments = remainder.split("/").filter(s => s.length > 0);
+      
+      if (segments.length === 0) return false;
+      
+      const commonWords = [
+        // Actions
+        'detail', 'edit', 'create', 'new', 'add', 'delete', 'view', 
+        
+        // Status types
+        'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+        
+        // General pages
+        'category', 'history', 'index',
+        
+        // Event specific
+        'type-of-event', 'type-create', 'type-update',
+        
+        // Forum specific
+        'posting', 'report-posting', 'report-comment',
+        
+        // Collaboration
+        'group',
+        
+        // App Information
+        'business-field', 'information-bank', 'sticker',
+        'bidang-update', 'sub-bidang-update',
+        
+        // Transaction/Finance related
+        'transaction-detail', 'transaction', 'payment', 
+        'disbursement-of-funds', 'detail-disbursement-of-funds',
+        'list-disbursement-of-funds',
+        
+        // List pages (CRITICAL!)
+        'list-of-investor', 'list-of-donatur', 'list-of-participants',
+        'list-comment', 'list-report-comment', 'list-report-posting',
+        
+        // Input/Form pages
+        'reject-input',
+        
+        // Category pages
+        'category-create', 'category-update'
+      ];
+      
+      const hasCommonWord = segments.some(segment => 
+        commonWords.includes(segment.toLowerCase())
+      );
+
+      // Hanya anggap sebagai detail page jika mengandung commonWords
+      return hasCommonWord;
+    }
+    
+    return false;
+  };
+
+  // Check apakah menu item ini atau submenu-nya yang aktif
+  const isActive = isPathActive(item.link);
+
+  // NEW LOGIC: Check if user is on a detail page (contains ID segments or specific keywords)
+  const isOnDetailPage = (() => {
+    // Check if current path has ID-like segments or detail keywords
+    const segments = currentPath.split('/').filter(s => s.length > 0);
+    
+    if (segments.length === 0) return false;
+    
+    const commonWords = [
+      // Actions
+      'detail', 'edit', 'create', 'new', 'add', 'delete', 'view',
+      
+      // Status types
+      'publish', 'review', 'reject', 'status', 'active', 'inactive', 'pending',
+      
+      // General pages
+      'category', 'history', 'dashboard', 'index',
+      
+      // Event specific
+      'type-of-event', 'type-create', 'type-update',
+      
+      // Forum specific
+      'posting', 'report-posting', 'report-comment',
+      
+      // Collaboration
+      'group',
+      
+      // App Information
+      'business-field', 'information-bank', 'sticker',
+      'bidang-update', 'sub-bidang-update',
+      
+      // Transaction/Finance related
+      'transaction-detail', 'transaction', 'payment',
+      'disbursement-of-funds', 'detail-disbursement-of-funds',
+      'list-disbursement-of-funds',
+      
+      // List pages (CRITICAL!)
+      'list-of-investor', 'list-of-donatur', 'list-of-participants',
+      'list-comment', 'list-report-comment', 'list-report-posting',
+      
+      // Input/Form pages
+      'reject-input',
+      
+      // Category pages
+      'category-create', 'category-update'
+    ];
+    
+    // Check if any segment is a common word
+    const hasCommonWord = segments.some(segment => commonWords.includes(segment.toLowerCase()));
+    
+    // Check if any segment looks like an ID (number, UUID, alphanumeric with numbers)
+    const hasIdSegment = segments.some(segment => {
+      const isPureNumber = /^\d+$/.test(segment);
+      const isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment);
+      const hasNumber = /\d/.test(segment);
+      const isAlphanumericId = /^[a-z0-9_-]+$/i.test(segment) && segment.length <= 50 && hasNumber;
+
+      return isPureNumber || isUUID || isAlphanumericId;
+    });
+    
+    // A detail page is one that has either common words or ID segments
+    return hasCommonWord || hasIdSegment;
+  })();
+
+  // Calculate all submenu active states for conflict resolution
+  const submenuActiveStates = item.links?.map(subItem => ({
+    subItem,
+    isActive: isPathActive(subItem.link, subItem.detailPattern),
+    pathLength: subItem.link.length
+  })) || [];
+
+  // Determine if any submenu is active considering conflicts
+  const hasActiveSubmenu = submenuActiveStates.some(({ isActive: isSubActive, pathLength, subItem }) => {
+    if (!isSubActive) return false;
+
+    // Check if there's a more specific match elsewhere
+    const hasMoreSpecificMatch = submenuActiveStates.some(other => {
+      if (other.subItem.link === subItem.link) return false; // Skip self
+      return other.isActive && other.pathLength > pathLength;
+    });
+
+    return isSubActive && !hasMoreSpecificMatch;
+  }) || false;
+  
+  // For parent menu detection, if current path contains common words,
+  // check if this parent menu's link is a prefix of the current path
+  const isParentOfDetailPage = !isActive && !hasActiveSubmenu && item.links && item.links.length > 0 &&
+    item.links.some(link => currentPath.startsWith(link.link.replace(/\/+$/, "") + "/"));
+
+  // Determine if this is the most relevant parent menu for the current path
+  const isMostRelevantParent = isParentOfDetailPage && (() => {
+    let longestMatchLength = 0;
+    let mostRelevantParent = null;
+
+    // Find the parent with the longest matching prefix
+    items.forEach(parentItem => {
+      if (parentItem.links && parentItem.links.length > 0) {
+        parentItem.links.forEach(link => {
+          const linkPath = link.link.replace(/\/+$/, "");
+          if (currentPath.startsWith(linkPath + "/") && linkPath.length > longestMatchLength) {
+            longestMatchLength = linkPath.length;
+            mostRelevantParent = parentItem.label;
+          }
+        });
+      }
+    });
+
+    return mostRelevantParent === item.label;
+  })();
+
+  // NEW LOGIC: If we're on a detail page, NO submenu should be active regardless of pattern matching
+  const hasActiveSubmenuOnDetailPage = isOnDetailPage ? false : hasActiveSubmenu;
+
+  // NEW LOGIC: If user is on a detail page that belongs to this parent menu,
+  // activate only the parent menu (open dropdown) without activating any submenu
+  const isDetailPageOfThisMenu = !isActive && !hasActiveSubmenuOnDetailPage &&
+    item.links && item.links.length > 0 &&
+    item.links.some(link => {
+      const linkPath = link.link.replace(/\/+$/, "");
+      return currentPath.startsWith(linkPath + "/");
+    }) &&
+    !isMostRelevantParent; // Only apply this logic if this isn't the most relevant parent
+
+  // NEW LOGIC: Check if this is a page that doesn't belong to any specific menu in the navbar
+  const isUnlistedPage = !isActive && !hasActiveSubmenu && !isMostRelevantParent && !isDetailPageOfThisMenu && isOnDetailPage;
+
+  // NEW LOGIC: If we're on a detail page and this menu is not the relevant parent or detail page owner,
+  // then it should not be highlighted even if it would normally be the most relevant
+  const isOnDetailPageAndNotRelevant = isOnDetailPage && !isMostRelevantParent && !isDetailPageOfThisMenu && !isActive;
+
+  // NEW LOGIC: If this is an unlisted page, no menu should be highlighted
+  const isUnlistedPageAndNotRelevant = isUnlistedPage;
+
+  // FINAL LOGIC: Only activate this menu if:
+  // 1. It's the exact match for current path, OR
+  // 2. It's the most relevant parent, OR
+  // 3. It's a detail page of this menu
+  // But NOT if we're on a detail page and this isn't the relevant parent
+  // And NOT if this is an unlisted page
+  const isActuallyRelevant = (isActive || isMostRelevantParent || isDetailPageOfThisMenu) && !isOnDetailPageAndNotRelevant && !isUnlistedPageAndNotRelevant;
+
+  // Animasi saat isOpen berubah
+  useEffect(() => {
+    Animated.timing(animatedHeight, {
+      toValue: (isOpen || isDetailPageOfThisMenu) ? (item.links ? item.links.length * 44 : 0) : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen, item.links, animatedHeight, isDetailPageOfThisMenu]);
+
+  // Jika ada submenu
+  if (item.links && item.links.length > 0) {
+    return (
+      <View>
+        {/* Parent Item */}
+        <TouchableOpacity
+          style={[
+            styles.parentItem,
+            isActuallyRelevant && styles.parentItemActive,
+          ]}
+          onPress={toggleOpen}
+        >
+          <Ionicons
+            name={item.icon}
+            size={16}
+            color={isActuallyRelevant ? MainColor.yellow : MainColor.white}
+            style={styles.icon}
+          />
+          <Text
+            style={[
+              styles.parentText,
+              isActuallyRelevant && { color: MainColor.yellow },
+            ]}
+          >
+            {item.label}
+          </Text>
+          <Ionicons
+            name={isOpen ? "chevron-up" : "chevron-down"}
+            size={16}
+            color={isActuallyRelevant ? MainColor.yellow : MainColor.white}
+          />
+        </TouchableOpacity>
+
+        {/* Submenu (Animated) */}
+        <Animated.View
+          style={[
+            styles.submenu,
+            {
+              height: animatedHeight,
+              opacity: animatedHeight.interpolate({
+                inputRange: [0, item.links.length * 44],
+                outputRange: [0, 1],
+                extrapolate: "clamp",
+              }),
+            },
+          ]}
+        >
+          {submenuActiveStates.map(({ subItem, isActive: isSubActive, pathLength }, index) => {
+
+            // CRITICAL FIX: Cek apakah ada submenu lain yang LEBIH PANJANG dan juga aktif
+            const hasMoreSpecificMatch = submenuActiveStates.some(other => {
+              if (other.subItem.link === subItem.link) return false; // Skip self
+
+              const isOtherLonger = other.pathLength > pathLength;
+
+              // Debug log untuk Dashboard
+            //   if (subItem.label === "Dashboard" && isSubActive) {
+            //     console.log(`🔎 Dashboard checking against ${other.subItem.label}:`, {
+            //       dashboardLink: subItem.link,
+            //       dashboardLength: pathLength,
+            //       otherLabel: other.subItem.label,
+            //       otherLink: other.subItem.link,
+            //       otherPattern: other.subItem.detailPattern,
+            //       otherLength: other.pathLength,
+            //       otherIsActive: other.isActive,
+            //       isOtherLonger,
+            //       willDisableDashboard: other.isActive && isOtherLonger,
+            //       currentURL: currentPath
+            //     });
+            //   }
+
+              // Conflict log
+            //   if (isSubActive && other.isActive) {
+            //     console.log('🔍 CONFLICT DETECTED:', {
+            //       current: subItem.label,
+            //       currentPath: subItem.link,
+            //       currentLength: pathLength,
+            //       other: other.subItem.label,
+            //       otherPath: other.subItem.link,
+            //       otherLength: other.pathLength,
+            //       isOtherLonger,
+            //       shouldDisableCurrent: isOtherLonger,
+            //       currentURL: currentPath
+            //     });
+            //   }
+
+              return other.isActive && isOtherLonger;
+            });
+
+            // Final decision
+            const finalIsActive = isSubActive && !hasMoreSpecificMatch;
+
+            // NEW: If this is a detail page (regardless of which menu), don't highlight any submenu items
+            // Also don't highlight if this is an unlisted page
+            const shouldHighlight = (isOnDetailPage || isUnlistedPage) ? false : finalIsActive;
+
+            // Debug final
+            // if (isSubActive) {
+            //   console.log('✅ Active check:', {
+            //     label: subItem.label,
+            //     link: subItem.link,
+            //     isSubActive,
+            //     hasMoreSpecificMatch,
+            //     finalIsActive,
+            //     shouldHighlight,
+            //     isOnDetailPage,
+            //     isUnlistedPage
+            //   });
+            // }
+
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.subItem, shouldHighlight && styles.subItemActive]}
+                onPress={() => {
+                  onClose?.();
+                  router.push(subItem.link as any);
+                }}
+              >
+                <Ionicons
+                  name="radio-button-on-outline"
+                  size={16}
+                  color={shouldHighlight ? MainColor.yellow : MainColor.white}
+                  style={styles.icon}
+                />
+                <Text
+                  style={[
+                    styles.subText,
+                    shouldHighlight && { color: MainColor.yellow },
+                  ]}
+                >
+                  {subItem.label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </Animated.View>
+      </View>
+    );
+  }
+
+  // Menu tanpa submenu
+  return (
+    <TouchableOpacity
+      style={[styles.singleItem, isActive && styles.singleItemActive]}
+      onPress={() => {
+        onClose?.();
+        router.push(item.link as any);
+      }}
+    >
+      <Ionicons
+        name={item.icon}
+        size={16}
+        color={isActive ? MainColor.yellow : MainColor.white}
+        style={styles.icon}
+      />
+      <Text
+        style={[
+          styles.singleText,
+          { color: isActive ? MainColor.yellow : MainColor.white },
+        ]}
+      >
+        {item.label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 5,
+  },
+  parentItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    marginBottom: 5,
+    justifyContent: "space-between",
+  },
+  parentItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  parentText: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  singleItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    marginBottom: 5,
+  },
+  singleItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  singleText: {
+    fontSize: 16,
+    fontWeight: "500",
+    marginLeft: 10,
+    color: MainColor.white,
+  },
+  icon: {
+    width: 24,
+    textAlign: "center",
+    paddingRight: 10,
+  },
+  submenu: {
+    overflow: "hidden",
+    marginLeft: 30,
+    marginTop: 5,
+  },
+  subItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    marginBottom: 4,
+  },
+  subItemActive: {
+    backgroundColor: AccentColor.blue,
+  },
+  subText: {
+    color: MainColor.white,
+    fontSize: 16,
+    fontWeight: "500",
+  },
+});
--- a/components/Notification/NotificationInitializer.tsx
+++ b/components/Notification/NotificationInitializer.tsx
@@ -49,9 +49,8 @@ export default function NotificationInitializer() {

        const fcmToken = await getToken(messagingInstance);
        if (!fcmToken) {
-           console.warn("Tidak bisa mendapatkan FCM token");
+           console.log("Tidak bisa mendapatkan FCM token");
          // logout();
-          return;
        }

        console.log("✅ FCM Token:", fcmToken);
--- a/components/_ShareComponent/Admin/AdminBasicBox.tsx
+++ b/components/_ShareComponent/Admin/AdminBasicBox.tsx
@@ -0,0 +1,20 @@
+import BaseBox from "@/components/Box/BaseBox";
+import TextCustom from "@/components/Text/TextCustom";
+import { AccentColor } from "@/constants/color-palet";
+import { StyleProp, ViewStyle } from "react-native";
+
+interface Props {
+  children: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function AdminBasicBox({ children, onPress, style }: Props) {
+  return (
+    <>
+      <BaseBox onPress={onPress} style={style}>
+        {children}
+      </BaseBox>
+    </>
+  );
+}
--- a/components/_ShareComponent/Admin/BoxTitlePage.tsx
+++ b/components/_ShareComponent/Admin/BoxTitlePage.tsx
@@ -1,7 +1,9 @@
 import BaseBox from "@/components/Box/BaseBox";
 import Grid from "@/components/Grid/GridCustom";
 import TextCustom from "@/components/Text/TextCustom";
+import { AccentColor } from "@/constants/color-palet";
 import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
+import { View } from "react-native";

 export default function AdminComp_BoxTitle({
  title,
@@ -12,13 +14,33 @@ export default function AdminComp_BoxTitle({
 }) {
  return (
    <>
-      <BaseBox
+      {/* <BaseBox
        style={{ flexDirection: "row", justifyContent: "space-between" }}
        paddingTop={5}
        paddingBottom={5}
+        backgroundColor={AccentColor.blue}
+      > */}
+      <View
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          borderColor: AccentColor.blue,
+          paddingBlock: 5,
+          paddingInline: 10,
+          borderWidth: 1,
+          borderRadius: 10,
+        }}
      >
-        <Grid>
-          <Grid.Col span={rightComponent ? 6 : 12} style={{ justifyContent: "center" }}>
+        <Grid
+        // containerStyle={{
+        //   bottom: 0,
+        //   left: 0,
+        //   right: 0,
+        // }}
+        >
+          <Grid.Col
+            span={rightComponent ? 6 : 12}
+            style={{ justifyContent: "center" }}
+          >
            <TextCustom
              // style={{ alignSelf: "center" }}
              bold
@@ -39,7 +61,8 @@ export default function AdminComp_BoxTitle({
            </Grid.Col>
          )}
        </Grid>
-      </BaseBox>
+      </View>
+      {/* </BaseBox> */}
    </>
  );
 }
--- a/components/_ShareComponent/BasicWrapper.tsx
+++ b/components/_ShareComponent/BasicWrapper.tsx
@@ -0,0 +1,16 @@
+import { MainColor } from "@/constants/color-palet";
+import { View } from "react-native";
+
+export default function BasicWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
+        {children}
+      </View>
+    </>
+  );
+}
--- a/components/_ShareComponent/GridTwoView.tsx
+++ b/components/_ShareComponent/GridTwoView.tsx
@@ -4,15 +4,15 @@ import Grid from "../Grid/GridCustom";
 export default function GridTwoView({
  spanLeft = 6,
  spanRight = 6,
-  leftIcon,
-  rightIcon,
+  leftItem,
+  rightItem,
  styleLeft,
  styleRight,
 }: {
  spanLeft?: number;
  spanRight?: number;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+  leftItem?: React.ReactNode;
+  rightItem?: React.ReactNode;
  styleLeft?: ViewStyle;
  styleRight?: ViewStyle;
 }) {
@@ -24,13 +24,13 @@ export default function GridTwoView({
        span={spanLeft}
        style={styleLeft ? { ...baseStyle, ...styleLeft } : baseStyle}
      >
-        {leftIcon}
+        {leftItem}
      </Grid.Col>
      <Grid.Col
        span={spanRight}
        style={styleRight ? { ...baseStyle, ...styleRight } : baseStyle}
      >
-        {rightIcon}
+        {rightItem}
      </Grid.Col>
    </Grid>
  );
--- a/components/_ShareComponent/NewWrapper.tsx
+++ b/components/_ShareComponent/NewWrapper.tsx
@@ -101,12 +101,14 @@ const NewWrapper = (props: NewWrapperProps) => {
            renderItem={listProps.renderItem}
            keyExtractor={
              listProps.keyExtractor ||
-              ((item) => {
+              ((item, index) => {
                if (item.id == null) {
                  console.warn("Item tanpa 'id':", item);
-                  return `fallback-${JSON.stringify(item)}`;
+                  return `fallback-${index}-${JSON.stringify(item)}`;
                }
-                return String(item.id);
+
+                // Gabungkan ID dengan indeks untuk mencegah duplikasi
+                return `${String(item.id)}-${index}`;
              })
            }
          
--- a/components/index.ts
+++ b/components/index.ts
@@ -60,6 +60,7 @@ import SearchInput from "./_ShareComponent/SearchInput";
 import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
 import GridComponentView from "./_ShareComponent/GridSectionView";
 import NewWrapper from "./_ShareComponent/NewWrapper";
+import BasicWrapper from "./_ShareComponent/BasicWrapper";
 // Progress
 import ProgressCustom from "./Progress/ProgressCustom";
 // Loader
@@ -121,6 +122,7 @@ export {
  GridComponentView,
  Spacing,
  NewWrapper,
+  BasicWrapper,
  // Stack
  StackCustom,
  TabBarBackground,
--- a/constants/constans-value.ts
+++ b/constants/constans-value.ts
@@ -24,7 +24,7 @@ export {

 // OS Height
 const OS_ANDROID_HEIGHT = 115
-const OS_IOS_HEIGHT = 70
+const OS_IOS_HEIGHT = 90
 const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT

 // Text Size
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bagasbanuna	f284e2ec02	delete comment	2026-02-18 17:20:28 +08:00
bagasbanuna	1d61ad51e5	Fixed Admin UI Admin – Donation Pages - app/(application)/admin/donation/[id]/detail-disbursement-of-funds.tsx - app/(application)/admin/donation/[id]/list-disbursement-of-funds.tsx - app/(application)/admin/donation/[id]/list-of-donatur.tsx - app/(application)/admin/donation/[status]/status.tsx - app/(application)/admin/donation/category-update.tsx - app/(application)/admin/donation/category.tsx Admin Services - service/api-admin/api-admin-donation.ts - service/api-admin/api-master-admin.ts Admin Screens (Updated) - screens/Admin/Voting/ScreenEventTypeOfEvent.tsx Docs - docs/prompt-for-qwen-code.md New Donation Components - screens/Admin/Donation/BoxDonationCategory.tsx - screens/Admin/Donation/BoxDonationListDisbursementOfFunds.tsx - screens/Admin/Donation/BoxDonationListOfDonatur.tsx - screens/Admin/Donation/BoxDonationStatus.tsx New Donation Screens - screens/Admin/Donation/ScreenDonationCategory.tsx - screens/Admin/Donation/ScreenDonationListDisbursementOfFunds.tsx - screens/Admin/Donation/ScreenDonationListOfDonatur.tsx - screens/Admin/Donation/ScreenDonationStatus.tsx ### No Issue"	2026-02-18 17:19:46 +08:00
bagasbanuna	76845b71b4	## Perubahan Tampilan Admin ### File Baru (4) - `screens/Admin/Voting/ScreenVotingStatus.tsx` - `screens/Admin/Voting/ScreenVotingHistory.tsx` - `screens/Admin/Voting/ScreenEventTypeOfEvent.tsx` - `screens/Admin/Voting/BoxVotingStatus.tsx` ### File Diubah (3) - `app/(application)/admin/voting/[status]/status.tsx` → 5 baris - `app/(application)/admin/voting/history.tsx` → 5 baris - `app/(application)/admin/event/type-of-event.tsx` → 5 baris ### API Updates (2) - `service/api-admin/api-admin-voting.ts` → tambah param `page` - `service/api-admin/api-master-admin.ts` → tambah param `page` ## Fitur Baru - Pagination (infinite scroll) - Pull-to-Refresh - Skeleton Loading - Empty State - Search Functionality ### No Issue"	2026-02-18 14:28:15 +08:00
bagasbanuna	97e1f50660	Ringkasan Perubahan Kami telah melakukan serangkaian perubahan pada file app/(application)/admin/event/[id]/[status]/index.tsx untuk memperbaiki error dan meningkatkan fungsionalitas aplikasi. Berikut adalah perubahan-perubahan yang telah dilakukan: 1. Perbaikan Fungsi Download QR Code - Mengganti implementasi fungsi downloadQRCode yang sebelumnya menggunakan modul native (react-native-view-shot dan @react-native-camera-roll/camera-roll) yang menyebabkan error - Mengganti dengan implementasi sederhana yang menampilkan pesan bahwa fitur sedang dalam pengembangan - Menambahkan pengecekan platform untuk memastikan fitur hanya berjalan di platform yang didukung (non-web) 2. Pembersihan Kode - Menghapus penggunaan useRef karena tidak lagi diperlukan setelah mengganti implementasi - Menghapus komponen View yang digunakan sebagai referensi karena tidak lagi diperlukan - Menyederhanakan struktur komponen QR code 3. Perbaikan Tampilan - Menyesuaikan tampilan tombol download agar tetap muncul meskipun QR code sedang dimuat - Memastikan bahwa tombol download QR tetap terlihat dan fungsional 4. Penanganan Error - Menambahkan penanganan error yang lebih baik untuk mencegah crash aplikasi - Mengganti implementasi yang menyebabkan error Invariant Violation terkait modul native yang tidak terdaftar Tujuan dari Perubahan Ini 1. Mengatasi Error Runtime: Mengatasi error Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNViewShot' could not be found dan error terkait modul native lainnya 2. Meningkatkan Stabilitas Aplikasi: Memastikan bahwa aplikasi tidak mengalami crash akibat modul yang tidak terdaftar 3. Menyederhanakan Fungsionalitas: Menyediakan implementasi sementara untuk fitur download QR code sampai konfigurasi native module selesai 4. Meningkatkan Pengalaman Pengguna: Memastikan bahwa antarmuka tetap responsif dan memberikan umpan balik yang jelas kepada pengguna File yang Terpengaruh - app/(application)/admin/event/[id]/[status]/index.tsx ### No Issue	2026-02-14 15:33:42 +08:00
bagasbanuna	1cbe4ab330	Ringkasan Perubahan 1. Penambahan Pagination pada Fitur Admin Job - Menerapkan sistem pagination menggunakan hook usePagination dari hooks/use-pagination.tsx - Mengintegrasikan komponen-komponen pagination dari helpers/paginationHelpers.tsx - Menambahkan dukungan infinite scroll dan pull-to-refresh - Menambahkan loading state, skeleton loader, dan empty state 2. Pembaruan Fungsi API - Memperbarui fungsi apiAdminJob di service/api-admin/api-admin-job.ts untuk mendukung parameter pagination - Menambahkan parameter page dengan nilai default 1 3. Modularisasi Kode - Memindahkan komponen AdminJobStatus dari app/(application)/admin/job/[status]/status.tsx ke screens/Admin/Job/ScreenJobStatus.tsx - Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih fleksibel - Membuat komponen baru BoxStatusJob.tsx untuk memisahkan logika tampilan item pekerjaan - Menggunakan komponen BoxStatusJob di dalam ScreenJobStatus untuk menampilkan daftar pekerjaan 4. Perbaikan Struktur dan Organisasi Kode - Mengorganisir ulang struktur folder untuk komponen admin job - Memisahkan tanggung jawab antara komponen layar dan komponen item - Mengoptimalkan performa dengan menggunakan useCallback dan useMemo File-file yang Diubah 1. screens/Admin/Job/ScreenJobStatus.tsx - Implementasi utama dengan pagination 2. screens/Admin/Job/BoxStatusJob.tsx - Komponen baru untuk menampilkan item pekerjaan 3. service/api-admin/api-admin-job.ts - Penambahan parameter pagination 4. app/(application)/admin/job/[status]/status.tsx - Diperbarui untuk menggunakan komponen baru ### NO Issue	2026-02-14 11:57:27 +08:00
bagasbanuna	42fa80c228	Fix Admin Admin – App Information - app/(application)/admin/app-information/index.tsx - app/(application)/admin/app-information/business-field/[id]/index.tsx Admin Screens - screens/Admin/App-Information/BusinessFieldSection.tsx - screens/Admin/App-Information/InformationBankSection.tsx - screens/Admin/User-Access/ScreenUserAccess.tsx New Admin Screens - screens/Admin/App-Information/ScreenAppInformation.tsx - screens/Admin/App-Information/ScreenBusinessFieldDetail.tsx Shared Components - components/_ShareComponent/Admin/BoxTitlePage.tsx API Service - service/api-admin/api-master-admin.ts Styles - styles/global-styles.ts Docs - docs/prompt-for-qwen-code.md ### No Issue	2026-02-13 17:38:48 +08:00
bagasbanuna	fb697366fe	Fixed admin user access Admin Layout & Pages - app/(application)/admin/_layout.tsx - app/(application)/admin/user-access/index.tsx Admin Components - components/Drawer/NavbarMenu.tsx - components/_ShareComponent/Admin/BoxTitlePage.tsx - components/_ShareComponent/Admin/AdminBasicBox.tsx Admin Screens - screens/Admin/User-Access/ API – Admin User Access - service/api-admin/api-admin-user-access.ts Docs - docs/prompt-for-qwen-code.md ### No issue	2026-02-12 17:35:28 +08:00
bagasbanuna	6d71c3a86f	Navbar menu versi 3 Admin Layout - app/(application)/admin/_layout.tsx Docs - docs/prompt-for-qwen-code.md New Component - components/Drawer/NavbarMenu_V3.tsx ### No Issue'	2026-02-12 14:55:05 +08:00
bagasbanuna	e030b8f486	Fixed navbar admin User Layout - app/(application)/(user)/home.tsx Components - components/Drawer/NavbarMenu_V2.tsx Docs - docs/admin-folder-structure.md ### Issue: saat masuk lebih dalam ke sub menu indikator aktif di navbar hilang	2026-02-12 11:48:01 +08:00
bagasbanuna	5c931b069c	Fixed navbar admin User & Admin Layout - app/(application)/(user)/home.tsx - app/(application)/admin/_layout.tsx Components - components/Drawer/NavbarMenu.tsx - components/index.ts Docs - docs/prompt-for-qwen-code.md Backup Component - components/Drawer/NavbarMenu.back.tsx New Components - components/Drawer/NavbarMenu_V2.tsx - components/_ShareComponent/BasicWrapper.tsx New Admin Screen - screens/Admin/listPageAdmin_V2.tsx ### No Issue	2026-02-11 17:40:08 +08:00
bagasbanuna	b2be7be533	Saya telah melakukan serangkaian perubahan penting dalam pengembangan aplikasi HIPMI Mobile, khususnya dalam modul Donasi. Berikut adalah ringkasan perubahan yang telah dilakukan: 1. Menerapkan sistem pagination pada berbagai komponen layar donasi: - ScreenBeranda.tsx - ScreenMyDonation.tsx - ScreenRecapOfNews.tsx - ScreenListOfNews.tsx - ScreenListOfDonatur.tsx - ScreenFundDisbursement.tsx 2. Memperbarui fungsi-fungsi API untuk mendukung parameter page: - apiDonationGetAll - apiDonationGetNewsById - apiDonationListOfDonaturById - apiDonationDisbursementOfFundsListById 3. Mengganti komponen wrapper lama (ViewWrapper) dengan NewWrapper yang mendukung sistem pagination 4. Membuat komponen layar terpisah untuk meningkatkan modularitas kode 5. Memperbaiki berbagai error yang terjadi, termasuk masalah dengan import komponen dan struktur JSX ### No Issue	2026-02-10 17:30:30 +08:00
bagasbanuna	2705f96b01	feat: implement pagination and NewWrapper on donation and investment screens - Implement pagination on investment screens (ScreenMyHolding, ScreenInvestor, ScreenRecapOfNews, ScreenListOfNews) - Implement pagination on donation screens (ScreenStatus) - Update API functions to support pagination with page parameter (apiInvestmentGetAll, apiInvestmentGetInvestorById, apiInvestmentGetNews, apiDonationGetByStatus) - Replace ViewWrapper with NewWrapper for better UI experience - Update app directory files to use new modular components from screens directory - Add pull-to-refresh and infinite scroll functionality - Improve performance by loading data incrementally - Apply NewWrapper to donation create and create-story screens Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-09 17:35:54 +08:00
bagasbanuna	38a6b424e8	Ringkasan Perubahan 1. Pembuatan dan Pembaruan Komponen Layar Investasi dengan Sistem Pagination ScreenMyHolding.tsx - Diperbarui dari sistem loading data statis ke sistem pagination dinamis - Menggunakan hook usePagination untuk manajemen data - Mengganti ViewWrapper dengan NewWrapper untuk tampilan yang lebih modern - Menambahkan fitur pull-to-refresh dan infinite scroll - Menggunakan helper pagination dari createPaginationComponents ScreenInvestor.tsx - Dibuat baru dengan sistem pagination - Menggunakan hook usePagination untuk manajemen data - Menggunakan NewWrapper sebagai komponen dasar - Menambahkan fitur pull-to-refresh dan infinite scroll ScreenRecapOfNews.tsx - Dibuat baru dengan sistem pagination - Menggunakan hook usePagination untuk manajemen data - Menggunakan NewWrapper sebagai komponen dasar - Menambahkan fitur pull-to-refresh dan infinite scroll ScreenListOfNews.tsx - Dibuat baru dengan sistem pagination - Menggunakan hook usePagination untuk manajemen data - Menggunakan NewWrapper sebagai komponen dasar - Menambahkan fitur pull-to-refresh dan infinite scroll 2. Perubahan pada Fungsi-Fungsi API untuk Mendukung Pagination apiInvestmentGetAll - Sudah mendukung parameter page dengan default "1" apiInvestmentGetInvestorById - Ditambahkan parameter page dengan default "1" - Memungkinkan pengambilan data investor secara bertahap apiInvestmentGetNews - Ditambahkan parameter page dengan default "1" - Memungkinkan pengambilan data berita secara bertahap 3. Pembaruan File-File di Direktori app/ untuk Menggunakan Komponen-Komponen Baru app/(application)/(user)/investment/[id]/investor.tsx - Diperbarui untuk menggunakan komponen Investment_ScreenInvestor - Menghilangkan logika lokal dan menggantinya dengan komponen modular app/(application)/(user)/investment/[id]/(news)/recap-of-news.tsx - Diperbarui untuk menggunakan komponen Investment_ScreenRecapOfNews - Menghilangkan logika lokal dan menggantinya dengan komponen modular app/(application)/(user)/investment/[id]/(news)/list-of-news.tsx - Diperbarui untuk menggunakan komponen Investment_ScreenListOfNews - Menghilangkan logika lokal dan menggantinya dengan komponen modular 4. Implementasi Sistem Pagination usePagination Hook - Digunakan secara konsisten di semua komponen layar investasi - Menyediakan fitur load more dan refresh - Mengelola state loading, refreshing, dan data NewWrapper Component - Digunakan sebagai pengganti ViewWrapper - Menyediakan dukungan bawaan untuk FlatList - Menyediakan dukungan untuk refreshControl dan onEndReached Pagination Helpers - Menggunakan createPaginationComponents untuk menghasilkan komponen-komponen pagination - Menyediakan skeleton loading saat data sedang dimuat - Menyediakan pesan kosong saat tidak ada data 5. Manfaat dari Perubahan Ini 1. Performa Lebih Baik: Dengan pagination, hanya sejumlah kecil data yang dimuat pada satu waktu, meningkatkan performa aplikasi 2. Pengalaman Pengguna Lebih Baik: Fitur pull-to-refresh dan infinite scroll membuat navigasi lebih intuitif 3. Kode Lebih Modular: Komponen-komponen baru dapat digunakan kembali dan dipelihara lebih mudah 4. Struktur Kode Lebih Rapi: Pemisahan antara logika tampilan dan logika data membuat kode lebih terorganisir Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>	2026-02-09 14:42:56 +08:00
bagasbanuna	83fa277e03	Fix Loaddata Invesment & Clearing code UI – Investment (User) - app/(application)/(user)/investment/(tabs)/index.tsx - app/(application)/(user)/investment/(tabs)/portofolio.tsx - app/(application)/(user)/investment/(tabs)/transaction.tsx - app/(application)/(user)/investment/[id]/(document)/list-of-document.tsx - app/(application)/(user)/investment/[id]/(document)/recap-of-document.tsx - app/(application)/(user)/investment/[id]/(transaction-flow)/invoice.tsx - app/(application)/(user)/investment/[id]/(transaction-flow)/select-bank.tsx Screens – Investment - screens/Invesment/ButtonStatusSection.tsx - screens/Invesment/Document/RecapBoxDetail.tsx - screens/Invesment/Document/ScreenListDocument.tsx - screens/Invesment/Document/ScreenRecap.tsx - screens/Invesment/ScreenBursa.tsx - screens/Invesment/ScreenPortofolio.tsx - screens/Invesment/ScreenTransaction.tsx Profile - app/(application)/(user)/profile/[id]/detail-blocked.tsx API Client - service/api-client/api-investment.ts Docs - docs/prompt-for-qwen-code.md ### No issue	2026-02-06 17:27:12 +08:00
bagasbanuna	c570a19d84	Fix Wrapper UI – Investment (User) - app/(application)/(user)/investment/create.tsx - app/(application)/(user)/investment/[id]/edit.tsx ### No Issue"	2026-02-05 17:30:17 +08:00
bagasbanuna	7415c8c8ce	Fix path Notification admin UI – Notifications (User) - app/(application)/(user)/notifications/index.tsx - screens/Notification/ScreenNotification_V2.tsx UI – Notifications (Admin) - screens/Admin/Notification-Admin/ScreenNotificationAdmin2.tsx API - service/api-notifications.ts Docs - docs/prompt-for-qwen-code.md ### No Issue	2026-02-05 16:37:50 +08:00
bagasbanuna	72a3d42013	Fix Loaddata Voting UI – Voting (User) - app/(application)/(user)/voting/(tabs)/index.tsx - app/(application)/(user)/voting/(tabs)/history.tsx - app/(application)/(user)/voting/(tabs)/contribution.tsx - app/(application)/(user)/voting/create.tsx - app/(application)/(user)/voting/[id]/edit.tsx - app/(application)/(user)/voting/[id]/[status]/detail.tsx - app/(application)/(user)/voting/[id]/list-of-contributor.tsx UI – Event - app/(application)/(user)/event/[id]/edit.tsx - screens/Event/ScreenStatus.tsx UI – Voting Screens (New) - screens/Voting/ScreenBeranda.tsx - screens/Voting/ScreenContribution.tsx - screens/Voting/ScreenHistory.tsx - screens/Voting/ScreenListOfContributor.tsx - screens/Voting/ScreenStatus.tsx - screens/Voting/ButtonStatusSection.tsx UI – Job - screens/Job/ButtonStatusSection.tsx - screens/Job/MainViewStatus2.tsx API Client - service/api-client/api-voting.ts Docs - docs/prompt-for-qwen-code.md ### No Issue	2026-02-05 15:06:14 +08:00
bagasbanuna	d0abd14047	Fix Loaddata Voting Voting – User - app/(application)/(user)/voting/(tabs)/status.tsx - app/(application)/(user)/voting/create.tsx Screens – Voting - screens/Voting/ButtonStatusSection.tsx API Client - service/api-client/api-voting.ts Global - app/+not-found.tsx - styles/global-styles.ts Docs - docs/prompt-for-qwen-code.md Untracked (New Files) - screens/Voting/ScreenStatus.tsx ### No issue	2026-02-04 17:44:57 +08:00
bagasbanuna	5b2be20469	Fix Loaddata pada event dan perbaikan tampilan pada NewWrapper Event – User - app/(application)/(user)/event/(tabs)/contribution.tsx - app/(application)/(user)/event/(tabs)/index.tsx - app/(application)/(user)/event/[id]/list-of-participants.tsx Voting – User - app/(application)/(user)/voting/(tabs)/history.tsx Components - components/Notification/NotificationInitializer.tsx - components/_ShareComponent/NewWrapper.tsx Screens – Event - screens/Event/BoxPublishSection.tsx - screens/Event/ButtonStatusSection.tsx - screens/Event/ScreenHistory.tsx - screens/Event/ScreenStatus.tsx Screens – Forum - screens/Forum/ViewBeranda3.tsx API Client - service/api-client/api-event.ts Styles - styles/global-styles.ts Docs - docs/prompt-for-qwen-code.md Untracked (New Files) - screens/Event/ScreenBeranda.tsx - screens/Event/ScreenContribution.tsx - screens/Event/ScreenListOfParticipants.tsx #### No Issue	2026-02-04 16:56:48 +08:00
bagasbanuna	60177a1087	Fix Component Datetime IOS Components - components/DateInput/DataTimeAndroid.tsx - components/DateInput/DateTimeIOS.tsx - components/Notification/NotificationInitializer.tsx Screens - screens/Event/ScreenStatus.tsx Docs - docs/prompt-for-qwen-code.md ### No Issue	2026-02-04 12:00:00 +08:00
bagasbanuna	771ae45f26	Fix load data event Event – User - app/(application)/(user)/event/(tabs)/history.tsx - app/(application)/(user)/event/(tabs)/status.tsx - app/(application)/(user)/event/[id]/edit.tsx - app/(application)/(user)/event/create.tsx Event – Screens (Untracked) - screens/Event/ScreenHistory.tsx - screens/Event/ScreenStatus.tsx API - service/api-client/api-event.ts Docs - docs/prompt-for-qwen-code.md ### No Issue	2026-02-03 17:45:27 +08:00
bagasbanuna	41f4a8ac99	Fix load data notification Notification – User - app/(application)/(user)/notifications/index.tsx - screens/Notification/ScreenNotification_V1.tsx - screens/Notification/ScreenNotification_V2.tsx Notification – Admin - app/(application)/admin/notification/index.tsx - screens/Admin/Notification-Admin/ Job - screens/Job/MainViewStatus2.tsx Docs - docs/prompt-for-qwen-code.md Deleted - screens/Notification/ScreenNotification.tsx ### No Issue	2026-02-03 16:59:09 +08:00
bagasbanuna	48196cd46b	Fix Load data pada halaman yang membutuhkan infinite load Job – User App - app/(application)/(user)/job/(tabs)/index.tsx - app/(application)/(user)/job/(tabs)/status.tsx - app/(application)/(user)/job/(tabs)/archive.tsx - app/(application)/(user)/job/create.tsx Job – Screens - screens/Job/ScreenBeranda.tsx - screens/Job/ScreenBeranda2.tsx - screens/Job/MainViewStatus.tsx - screens/Job/MainViewStatus2.tsx - screens/Job/ScreenArchive.tsx - screens/Job/ScreenArchive2.tsx API – Job (Client) - service/api-client/api-job.ts Notification - screens/Notification/ScreenNotification.tsx Docs - QWEN.md - docs/prompt-for-qwen-code.md ### No Issue	2026-02-02 17:09:58 +08:00
bagasbanuna	ec79a1fbcd	Fix semua tampilan yang memiliki fungsi infitine load UI – User Notifications - app/(application)/(user)/notifications/index.tsx - service/api-notifications.ts - screens/Notification/ UI – Portofolio (User) - app/(application)/(user)/portofolio/[id]/create.tsx - app/(application)/(user)/portofolio/[id]/edit.tsx - app/(application)/(user)/portofolio/[id]/list.tsx - screens/Portofolio/BoxPortofolioView.tsx - screens/Portofolio/ViewListPortofolio.tsx - screens/Profile/PortofolioSection.tsx - service/api-client/api-portofolio.ts Forum & User Search - screens/Forum/DetailForum2.tsx - screens/Forum/ViewBeranda3.tsx - screens/UserSeach/MainView_V2.tsx Constants & Docs - constants/constans-value.ts - docs/prompt-for-qwen-code.md ### No Issue	2026-01-30 17:18:47 +08:00