Fix forum detail

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

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

Documentation
- docs/

Removed
- hipmi-note.md

### No Issue'

QWEN.md

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

android/app/build.gradle

@@ -82,6 +82,14 @@ def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBu
 def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
+// @generated begin @rnmapbox/maps-libcpp - expo prebuild (DO NOT MODIFY) sync-e24830a5a3e854b398227dfe9630aabfaa1cadd1
+packagingOptions {
+        pickFirst 'lib/x86/libc++_shared.so'
+        pickFirst 'lib/x86_64/libc++_shared.so'
+        pickFirst 'lib/arm64-v8a/libc++_shared.so'
+        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+    }
+// @generated end @rnmapbox/maps-libcpp
     ndkVersion rootProject.ext.ndkVersion
 
     buildToolsVersion rootProject.ext.buildToolsVersion
@@ -92,8 +100,8 @@ android {
         applicationId 'com.bip.hipmimobileapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 4
-        versionName "1.0.0"
+        versionName "1.0.1"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }
@@ -180,3 +188,5 @@ dependencies {
         implementation jscFlavor
     }
 }
+
+apply plugin: 'com.google.gms.google-services'

android/app/google-services.json

@@ -0,0 +1,29 @@
+{
+  "project_info": {
+    "project_number": "608461535079",
+    "project_id": "hipmi-badung-connect",
+    "storage_bucket": "hipmi-badung-connect.firebasestorage.app"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:608461535079:android:4ff12ddc283fb3746761c2",
+        "android_client_info": {
+          "package_name": "com.bip.hipmimobileapp"
+        }
+      },
+      "oauth_client": [],
+      "api_key": [
+        {
+          "current_key": "AIzaSyBiDtIk3Q9zffFwIdJ5cjqY7e4390JGSkM"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": []
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
+  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
   <uses-permission android:name="android.permission.CAMERA"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
@@ -13,7 +15,11 @@
       <data android:scheme="https"/>
     </intent>
   </queries>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false" android:fullBackupContent="@xml/secure_store_backup_rules" android:dataExtractionRules="@xml/secure_store_data_extraction_rules">
+    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color" tools:replace="android:resource"/>
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
     <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
@@ -29,6 +35,12 @@
         <data android:scheme="hipmimobile"/>
         <data android:scheme="exp+hipmi-mobile"/>
       </intent-filter>
+      <intent-filter android:autoVerify="true" data-generated="true">
+        <action android:name="android.intent.action.VIEW"/>
+        <data android:scheme="https" android:host="cld-dkr-staging-hipmi.wibudev.com" android:pathPrefix="/"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+      </intent-filter>
     </activity>
   </application>
 </manifest>

android/app/src/main/res/values/colors.xml

@@ -3,4 +3,5 @@
   <color name="iconBackground">#ffffff</color>
   <color name="colorPrimary">#023c69</color>
   <color name="colorPrimaryDark">#ffffff</color>
+  <color name="notification_icon_color">#ffffff</color>
 </resources>

android/app/src/main/res/values/strings.xml

@@ -1,5 +1,5 @@
 <resources>
-  <string name="app_name">HIPMI BADUNG</string>
+  <string name="app_name">HIPMI Badung Connect</string>
   <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>

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

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

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

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

android/build.gradle

@@ -6,6 +6,7 @@ buildscript {
     mavenCentral()
   }
   dependencies {
+    classpath 'com.google.gms:google-services:4.4.1'
     classpath('com.android.tools.build:gradle')
     classpath('com.facebook.react:react-native-gradle-plugin')
     classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
@@ -22,3 +23,25 @@ allprojects {
 
 apply plugin: "expo-root-project"
 apply plugin: "com.facebook.react.rootproject"
+// @generated begin @rnmapbox/maps-v2-maven - expo prebuild (DO NOT MODIFY) sync-d4ccbfdff48fdba3138b02a8ba41b9722af001d8
+
+allprojects {
+  repositories {
+    maven {
+      url 'https://api.mapbox.com/downloads/v2/releases/maven'
+      // Authentication is no longer required as per Mapbox's removal of download token requirement
+      // See: https://github.com/mapbox/mapbox-maps-flutter/issues/775
+      // Keeping this as optional for backward compatibility
+      def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
+      if (token) {
+        authentication { basic(BasicAuthentication) }
+        credentials {
+          username = 'mapbox'
+          password = token
+        }
+      }
+    }
+  }
+}
+
+// @generated end @rnmapbox/maps-v2-maven

android/settings.gradle

@@ -31,7 +31,7 @@ extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
 }
 expoAutolinking.useExpoModules()
 
-rootProject.name = 'HIPMI BADUNG'
+rootProject.name = 'HIPMI Badung Connect'
 
 expoAutolinking.useExpoVersionCatalog()
 

app.config.js

@@ -1,61 +1,92 @@
 // app.config.js
-require('dotenv').config();
+require("dotenv").config();
 
 export default {
-  name: 'HIPMI BADUNG',
+  name: "HIPMI Badung Connect",
-  slug: 'hipmi-mobile',
+  slug: "hipmi-mobile",
-  version: '1.0.0',
+  version: "1.0.1",
-  orientation: 'portrait',
+  orientation: "portrait",
-  icon: './assets/images/icon.png',
+  icon: "./assets/images/icon.png",
-  scheme: 'hipmimobile',
+  scheme: "hipmimobile",
-  userInterfaceStyle: 'automatic',
+  userInterfaceStyle: "automatic",
   newArchEnabled: true,
 
   ios: {
     supportsTablet: true,
-    bundleIdentifier: 'com.anonymous.hipmi-mobile',
+    bundleIdentifier: "com.anonymous.hipmi-mobile",
+    googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
+      NSLocationWhenInUseUsageDescription:
+        "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
+    associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
+    buildNumber: "20",
   },
 
   android: {
+    googleServicesFile: "./google-services.json",
     adaptiveIcon: {
-      foregroundImage: './assets/images/splash-icon.png',
+      foregroundImage: "./assets/images/splash-icon.png",
-      backgroundColor: '#ffffff',
+      backgroundColor: "#ffffff",
     },
     edgeToEdgeEnabled: true,
-    package: 'com.bip.hipmimobileapp',
+    package: "com.bip.hipmimobileapp",
+    versionCode: 4,
     // softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
+    intentFilters: [
+      {
+        action: "VIEW",
+        autoVerify: true, // wajib untuk App Links
+        data: [
+          {
+            scheme: "https",
+            host: "cld-dkr-staging-hipmi.wibudev.com",
+            pathPrefix: "/",
+          },
+        ],
+        category: ["BROWSABLE", "DEFAULT"],
+      },
+    ],
   },
 
   web: {
-    bundler: 'metro',
+    bundler: "metro",
-    output: 'static',
+    output: "static",
-    favicon: './assets/images/favicon.png',
+    favicon: "./assets/images/favicon.png",
   },
 
   plugins: [
-    'expo-router',
+    "expo-router",
-    'expo-web-browser',
+    "expo-web-browser",
     [
-      'expo-splash-screen',
+      "expo-splash-screen",
       {
-        image: './assets/images/splash-icon.png',
+        image: "./assets/images/splash-icon.png",
         imageWidth: 200,
-        resizeMode: 'contain',
+        resizeMode: "contain",
-        backgroundColor: '#ffffff',
+        backgroundColor: "#ffffff",
       },
     ],
     [
-      'expo-camera',
+      "expo-camera",
       {
-        cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera',
+        cameraPermission: "Allow $(PRODUCT_NAME) to access your camera",
-        microphonePermission: 'Allow $(PRODUCT_NAME) to access your microphone',
+        microphonePermission: "Allow $(PRODUCT_NAME) to access your microphone",
         recordAudioAndroid: true,
       },
     ],
-    'expo-font',
+    "expo-font",
+    "@rnmapbox/maps",
+    "@react-native-firebase/app",
+    [
+      "expo-notifications",
+      {
+        icon: "./assets/images/icon.png",
+        color: "#ffffff",
+        iosDisplayInForeground: true,
+      },
+    ],
   ],
 
   experiments: {
@@ -65,11 +96,11 @@ export default {
   extra: {
     router: {},
     eas: {
-      projectId: '5cf15964-4889-4755-b8ed-b99c61d614d1',
+      projectId: "5cf15964-4889-4755-b8ed-b99c61d614d1",
     },
     // Tambahkan environment variables ke sini
     API_BASE_URL: process.env.API_BASE_URL,
     BASE_URL: process.env.BASE_URL,
     DEEP_LINK_URL: process.env.DEEP_LINK_URL,
   },
-};
+};

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

@@ -1,8 +1,10 @@
 import { CenterCustom, TextCustom, ViewWrapper } from "@/components";
 import API_STRORAGE from "@/constants/base-url-api-strorage";
+import { MainColor } from "@/constants/color-palet";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import React, { useState } from "react";
+import { View } from "react-native";
 
 export default function PreviewImage() {
   const { id } = useLocalSearchParams();
@@ -11,18 +13,48 @@ export default function PreviewImage() {
   return (
     <ViewWrapper>
       {id ? (
-        <Image
+        <View
-          onLoad={() => {
+          style={{
-            setIsLoading(false);
+            width: "100%",
+            height: "100%",
+            position: "relative",
           }}
-          source={
+        >
-            isLoading
+          {/* Main Image */}
-              ? require("@/assets/images/loading.gif")
+          <Image
-              : API_STRORAGE.GET({ fileId: id as string })
+            onLoad={() => {
-          }
+              setIsLoading(false);
-          contentFit="contain"
+            }}
-          style={{ width: "100%", height: "100%" }}
+            source={API_STRORAGE.GET({ fileId: id as string })}
-        />
+            contentFit="contain"
+            style={{ width: "100%", height: "100%" }}
+            // placeholder={require("@/assets/images/loading.gif")}
+          />
+
+          {/* Custom Loader Overlay */}
+          {isLoading && (
+            <View
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: MainColor.darkblue,
+                zIndex: 1,
+                opacity: 0.5,
+              }}
+            >
+              <Image
+                source={require("@/assets/images/loading.gif")}
+                contentFit="contain"
+                style={{ width: 60, height: 60 }}
+              />
+            </View>
+          )}
+        </View>
       ) : (
         <CenterCustom>
           <TextCustom>File not found</TextCustom>

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

@@ -1,4 +1,6 @@
 import { BackButton } from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { IconDot } from "@/components/_Icon/IconComponent";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -10,6 +12,13 @@ export default function UserLayout() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
+        <Stack.Screen
+          name="delete-account"
+          options={{
+            title: "Hapus Akun",
+            headerLeft: () => <BackButton />,
+          }}
+        />
         <Stack.Screen
           name="waiting-room"
           options={{
@@ -44,24 +53,35 @@ export default function UserLayout() {
         />
 
         {/* ========== Notification Section ========= */}
-        <Stack.Screen
+
+        {/* DIPINDAH DI FILE NOTIFICATION USER */}
+        {/* <Stack.Screen
           name="notifications/index"
           options={{
             title: "Notifikasi",
             headerLeft: () => <BackButton />,
+            // headerRight: () => (
+            //   <IconPlus
+            //     color={MainColor.yellow}
+            //     onPress={() => router.push("/test-notifications")}
+            //   />
+            // ),
           }}
-        />
+        /> */}
 
         {/* ========== Event Section ========= */}
+
         <Stack.Screen
           name="event/(tabs)"
           options={{
             title: "Event",
-            headerLeft: () => (
+            // NOTE: DIPINDAH DI FILE /Event/(Tabs)/_layout.tsx
-              <LeftButtonCustom path="/(application)/(user)/home" />
+            // headerLeft: () => (
-            ),
+            //   <LeftButtonCustom path="/(application)/(user)/home" />
+            // ),
           }}
         />
+
         <Stack.Screen
           name="event/create"
           options={{
@@ -504,7 +524,8 @@ export default function UserLayout() {
           name="job/(tabs)"
           options={{
             title: "Job Vacancy",
-            headerLeft: () => <BackButton path="/home" />,
+            // headerLeft: () => <BackButton path="/home" />,
+            // NOTE: headerLeft di pindahkan ke Tabs Layout
           }}
         />
         <Stack.Screen
@@ -588,6 +609,27 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
+        <Stack.Screen
+          name="forum/terms"
+          options={{
+            title: "Syarat & Ketentuan Forum",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/preview-report-posting"
+          options={{
+            title: "Laporan Postingan",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="forum/[id]/preview-report-comment"
+          options={{
+            title: "Laporan Komentar",
+            headerLeft: () => <BackButton />,
+          }}
+        />
 
         {/* ========== Maps Section ========= */}
         <Stack.Screen

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

@@ -155,7 +155,7 @@ export default function CollaborationCreate() {
           <TextAreaCustom
             required
             label="Keuntungan Proyek"
-            placeholder="Masukan keuntungan proyek"
+            placeholder="Masukan keuntungan proyek, contoh: Meningkatkan relasi bisnis , menjamin kualitas produk, meningkatkan kinerja dan lain lain"
             showCount
             maxLength={1000}
             value={data?.benefit}

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

@@ -0,0 +1,111 @@
+import {
+  AlertDefaultSystem,
+  BaseBox,
+  ButtonCustom,
+  CenterCustom,
+  StackCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiDeleteUser } from "@/service/api-client/api-user";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router/build/hooks";
+import { useState } from "react";
+import Toast from "react-native-toast-message";
+
+export default function DeleteAccount() {
+  const { token, logout, user } = useAuth();
+  const { phone } = useLocalSearchParams();
+  const [text, setText] = useState("");
+  const [isLoading, setLoading] = useState(false);
+
+  const deleteAccount = async () => {
+    if (text !== "Delete Account") {
+      return Toast.show({
+        type: "error",
+        text1: "Ketik 'Delete Account' untuk menghapus akun",
+      });
+    }
+
+    AlertDefaultSystem({
+      title: "Anda yakin akan menghapus akun ini?",
+      message:
+        "Semua data yang pernah anda buat akan terhapus secara permanen !",
+      textLeft: "Batal",
+      textRight: "Ya",
+      onPressRight: async () => {
+        try {
+          setLoading(true);
+          const response = await apiDeleteUser({ id: user?.id as string });
+
+          if (response.success) {
+            console.log("RESPONSE >> ", response);
+            Toast.show({
+              type: "success",
+              text1: "Akun berhasil dihapus",
+            });
+
+            setTimeout(() => {
+              logout();
+              setLoading(false);
+            }, 2000);
+          } else {
+            Toast.show({
+              type: "error",
+              text1: "Gagal menghapus akun",
+            });
+            setLoading(false);
+          }
+        } catch (error) {
+          console.log("ERROR >> ", error);
+          setLoading(false);
+        }
+      },
+    });
+  };
+
+  return (
+    <>
+      <ViewWrapper>
+        <StackCustom>
+          <BaseBox>
+            <StackCustom>
+              <CenterCustom>
+                <Image
+                  source={require("@/assets/images/constants/logo-hipmi.png")}
+                  style={{
+                    width: 150,
+                    height: 150,
+                  }}
+                />
+              </CenterCustom>
+              <TextCustom align="center">
+                Anda akan menghapus akun dengan nomor +{phone}
+              </TextCustom>
+              <TextCustom align="center">
+                Ketik 'Delete Account' untuk menghapus akun
+              </TextCustom>
+              <TextInputCustom
+                value={text}
+                onChangeText={setText}
+                placeholder="Ketik 'Delete Account'"
+              />
+
+              <ButtonCustom
+                backgroundColor="red"
+                textColor="white"
+                onPress={deleteAccount}
+                isLoading={isLoading}
+                disabled={isLoading}
+              >
+                Submit
+              </ButtonCustom>
+            </StackCustom>
+          </BaseBox>
+        </StackCustom>
+      </ViewWrapper>
+    </>
+  );
+}

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

@@ -26,7 +26,6 @@ export default function DonationBeranda() {
       const response = await apiDonationGetAll({
         category: "beranda"
       });
-      console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
 
       setList(response.data);
     } catch (error) {

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

@@ -16,6 +16,7 @@ import { Href, router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 import { View } from "react-native";
+import Toast from "react-native-toast-message";
 
 export default function DonationMyDonation() {
   const { user } = useAuth();
@@ -25,20 +26,25 @@ export default function DonationMyDonation() {
   useFocusEffect(
     useCallback(() => {
       onLoadData();
-    }, [user?.id])
+    }, [user?.id]),
   );
 
   const onLoadData = async () => {
+    if (!user?.id) {
+      Toast.show({
+        type: "error",
+        text1: "Load data gagal, user tidak ditemukan",
+      });
+      return;
+    }
+
     try {
       setLoadList(true);
       const response = await apiDonationGetAll({
         category: "my-donation",
         authorId: user?.id,
       });
-      console.log(
+      
-        "[RES GET MY DONATION]",
-        JSON.stringify(response.data, null, 2)
-      );
 
       setList(response.data);
     } catch (error) {

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
@@ -7,11 +8,60 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
 import { GStyles } from "@/styles/global-styles";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
-import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonasiFailed() {
+  const { id, invoiceId } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+
+      console.log("[DATA]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Bank",
+      value: (data && data?.MasterBank?.namaBank) || "-",
+    },
+    {
+      label: "Rekening Penerima",
+      value: (data && data?.MasterBank?.namaAkun) || "-",
+    },
+    {
+      label: "No Rekening",
+      value: (data && data?.MasterBank?.norek) || "-",
+    },
+    {
+      label: "Jumlah Donasi",
+      value: (data && formatCurrencyDisplay(data?.nominal)) || "-",
+    },
+    {
+      label: "Tanggal",
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
+    },
+  ];
+
   return (
     <ViewWrapper>
       <StackCustom>
@@ -58,26 +108,3 @@ export default function DonasiFailed() {
     </ViewWrapper>
   );
 }
-
-const listData = [
-  {
-    label: "Bank",
-    value: " BCA",
-  },
-  {
-    label: "Rekening Penerima",
-    value: "Himpunan Pengusaha Muda Indonesia",
-  },
-  {
-    label: "No Rekening",
-    value: "2304235678854332",
-  },
-  {
-    label: "Jumlah Donasi",
-    value: "Rp. 750.000",
-  },
-  {
-    label: "Tanggal",
-    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
-  },
-];

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

@@ -122,7 +122,7 @@ export default function DonationInvoice() {
                     }}
                   >
                     <TextCustom size="xlarge" bold color="yellow">
-                      {data?.DonasiMaster_Bank?.norek}
+                      {data?.MasterBank?.norek}
                     </TextCustom>
                   </Grid.Col>
                   <Grid.Col
@@ -131,7 +131,7 @@ export default function DonationInvoice() {
                       alignItems: "flex-end",
                     }}
                   >
-                    <CopyButton textToCopy={data?.DonasiMaster_Bank?.norek} />
+                    <CopyButton textToCopy={data?.MasterBank?.norek} />
                   </Grid.Col>
                 </Grid>
               </BaseBox>

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
@@ -7,11 +8,60 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiDonationGetInvoiceById } from "@/service/api-client/api-donation";
 import { GStyles } from "@/styles/global-styles";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
-import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonationSuccess() {
+  const { id, invoiceId } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id, invoiceId])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetInvoiceById({
+        id: invoiceId as string,
+      });
+
+      console.log("[DATA]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Bank",
+      value: (data && data?.MasterBank?.namaBank) || "-",
+    },
+    {
+      label: "Rekening Penerima",
+      value: (data && data?.MasterBank?.namaAkun) || "-",
+    },
+    {
+      label: "No Rekening",
+      value: (data && data?.MasterBank?.norek) || "-",
+    },
+    {
+      label: "Jumlah Donasi",
+      value: (data && formatCurrencyDisplay(data?.nominal)) || "-",
+    },
+    {
+      label: "Tanggal",
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
+    },
+  ];
+
   return (
     <ViewWrapper>
       <StackCustom>
@@ -59,25 +109,4 @@ export default function DonationSuccess() {
   );
 }
 
-const listData = [
+
-  {
-    label: "Bank",
-    value: " BCA",
-  },
-  {
-    label: "Rekening Penerima",
-    value: "Himpunan Pengusaha Muda Indonesia",
-  },
-  {
-    label: "No Rekening",
-    value: "2304235678854332",
-  },
-  {
-    label: "Jumlah Donasi",
-    value: "Rp. 750.000",
-  },
-  {
-    label: "Tanggal",
-    value: `${dayjs(new Date()).format("DD/MM/YYYY")}`,
-  },
-];

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

@@ -10,21 +10,32 @@ import {
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { LOCAL_STORAGE_KEY } from "@/constants/local-storage-key";
+import { useAuth } from "@/hooks/use-auth";
 import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { Ionicons } from "@expo/vector-icons";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function InvestmentInputDonation() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
   const [nominal, setNominal] = useState<number>(0);
 
   const handlerSubmit = async () => {
+    if (!user?.id) {
+      Toast.show({
+        type: "error",
+        text1: "User tidak ditemukan",
+      });
+
+      return;
+    }
     try {
       await AsyncStorage.setItem(
         LOCAL_STORAGE_KEY.transactionDonation,
-        JSON.stringify({ nominal: nominal.toString() })
+        JSON.stringify({ nominal: nominal.toString() }),
       );
       router.replace(`/donation/${id}/select-bank`);
     } catch (error) {

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

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

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

@@ -1,17 +1,71 @@
+/* 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, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useState } from "react";
 
 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>
@@ -20,47 +74,50 @@ export default function DonationFundDisbursement() {
           <Grid>
             <Grid.Col span={6}>
               <TextCustom bold color="yellow">
-                Rp. 0
+                Rp. {formatCurrencyDisplay(data?.totalPencairan)}
               </TextCustom>
               <TextCustom size="small">Total Pencairan Dana</TextCustom>
             </Grid.Col>
             <Grid.Col span={6}>
               <TextCustom bold color="yellow">
-                0 kali
+                {data?.akumulasiPencairan} kali
               </TextCustom>
               <TextCustom size="small">Akumulasi Pencairan</TextCustom>
             </Grid.Col>
           </Grid>
         </BaseBox>
 
-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadData ? (
-          <BaseBox key={index}>
+          <LoaderCustom />
-            <StackCustom>
+        ) : _.isEmpty(listData) ? (
-              <Grid>
+          <TextCustom align="center" color="gray">
-                <Grid.Col span={8}>
+            Belum ada data
-                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+          </TextCustom>
-                </Grid.Col>
+        ) : (
-                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+          listData?.map((item, index) => (
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+            <BaseBox key={index}>
-                </Grid.Col>
+              <StackCustom>
-              </Grid>
+                <Grid>
-              <TextCustom>
+                  <Grid.Col span={8}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    <TextCustom bold>{item?.title}</TextCustom>
-                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
+                  </Grid.Col>
-                perferendis provident velit illo consectetur distinctio ab
+                  <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
-                accusantium quis earum omnis!
+                    <TextCustom>{dayjs(item?.createdAt).format("DD MMM YYYY")}</TextCustom>
-              </TextCustom>
+                  </Grid.Col>
-              <ButtonCenteredOnly
+                </Grid>
-                onPress={() => {
+                <TextCustom>{item?.deskripsi}</TextCustom>
-                  router.navigate(`/(application)/(file)/${id}`);
+                <ButtonCenteredOnly
-                }}
+                  onPress={() => {
-                icon="file-text"
+                    router.navigate(`/(application)/(image)/preview-image/${item?.imageId}`);
-              >
+                  }}
-                Bukti Transaksi
+                  icon="file-text"
-              </ButtonCenteredOnly>
+                >
-            </StackCustom>
+                  Bukti Transaksi
-          </BaseBox>
+                </ButtonCenteredOnly>
-        ))}
+              </StackCustom>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );

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

@@ -16,20 +16,19 @@ import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFu
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
 import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import { countDownAndCondition } from "@/utils/countDownAndCondition";
 import {
   router,
   Stack,
   useFocusEffect,
   useLocalSearchParams,
 } from "expo-router";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function DonasiDetailBeranda() {
   const { user } = useAuth();
   const { id } = useLocalSearchParams();
-  console.log("ID ", id);
   const [openDrawer, setOpenDrawer] = useState(false);
-
   const [data, setData] = useState<any>();
 
   useFocusEffect(
@@ -45,21 +44,41 @@ export default function DonasiDetailBeranda() {
         category: "permanent",
       });
 
-      console.log("[RES GET ONE]", JSON.stringify(response.data, null, 2));
-
       setData(response.data);
     } catch (error) {
       console.log("[ERROR]", error);
     }
   };
 
+  const [value, setValue] = useState({
+    sisa: 0,
+    reminder: false,
+  });
+
+  useEffect(() => {
+    updateCountDown();
+  }, [data]);
+
+  const updateCountDown = () => {
+    const countDown = countDownAndCondition({
+      duration: data?.DonasiMaster_Durasi?.name,
+      publishTime: data?.publishTime,
+    });
+
+    setValue({
+      sisa: countDown.durationDay,
+      reminder: countDown.reminder,
+    });
+  };
+
   const buttonSection = (
     <>
       <BoxButtonOnFooter>
         <ButtonCustom
+          disabled={value?.reminder}
           onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
         >
-          Donasi
+          {value?.reminder ? "Waktu berakhir" : "Donasi"}
         </ButtonCustom>
       </BoxButtonOnFooter>
     </>
@@ -80,8 +99,10 @@ export default function DonasiDetailBeranda() {
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
+            sisaHari={value.sisa}
+            reminder={value.reminder}
             data={data}
-            bottomSection={<Donation_ProgressSection id={id as string} />}
+            bottomSection={<Donation_ProgressSection id={id as string} progres={Number(data?.progres) || 0} />}
           />
           <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
           <Donation_ComponentStoryFunrising

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

@@ -1,46 +1,93 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
+  LoaderCustom,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminDonationListOfDonaturById } from "@/service/api-admin/api-admin-donation";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
 import dayjs from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function Donation_ListOfDonatur() {
+  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>
-        {Array.from({ length: 10 }).map((_, index) => (
+        {loadData ? (
-          <BaseBox key={index}>
+          <LoaderCustom />
-            <Grid>
+        ) : _.isEmpty(listData) ? (
-              <Grid.Col
+          <TextCustom bold align="center">
-                span={3}
+            Belum ada donatur
-                style={{ alignItems: "center", justifyContent: "center" }}
+          </TextCustom>
-              >
+        ) : (
-                <FontAwesome6
+          listData?.map((item: any, index: number) => (
-                  name="face-smile-wink"
+            <BaseBox key={index}>
-                  size={50}
+              <Grid>
-                  style={{ color: MainColor.yellow }}
+                <Grid.Col
-                />
+                  span={3}
-              </Grid.Col>
+                  style={{ alignItems: "center", justifyContent: "center" }}
-              <Grid.Col span={9}>
+                >
-                <StackCustom gap={"xs"}>
+                  <FontAwesome6
+                    name="face-smile-wink"
+                    size={50}
+                    style={{ color: MainColor.yellow }}
+                  />
+                </Grid.Col>
+                <Grid.Col span={9}>
                   <TextCustom bold size="large">
-                    Username
+                    {item?.Author?.username || "-"}
                   </TextCustom>
-                  <TextCustom>Berdonas sebesar </TextCustom>
+                  <Spacing/>
-                  <TextCustom bold size="large" color="yellow">
+                  <StackCustom gap={"xs"}>
-                    Rp. 100.000
+                    <TextCustom size={"small"}>Berdonas sebesar </TextCustom>
-                  </TextCustom>
+                    <TextCustom bold size="large" color="yellow">
-                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                      Rp. {formatCurrencyDisplay(item?.nominal)}
-                </StackCustom>
+                    </TextCustom>
-              </Grid.Col>
+                    <TextCustom>
-            </Grid>
+                      {dayjs(item?.createdAt).format("DD MMM YYYY, HH:mm")}
-          </BaseBox>
+                    </TextCustom>
-        ))}
+                  </StackCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );

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

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

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

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

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

@@ -11,15 +11,17 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { apiEventGetByStatus } from "@/service/api-client/api-event";
-import { useFocusEffect } from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function EventStatus() {
   const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+
   const id = user?.id || "";
   const [activeCategory, setActiveCategory] = useState<string | null>(
-    "publish"
+    status || "publish"
   );
   const [listData, setListData] = useState([]);
   const [loadingGetData, setLoadingGetData] = useState(false);
@@ -73,7 +75,7 @@ export default function EventStatus() {
         listData.map((item: any, i) => (
           <BoxWithHeaderSection
             key={i}
-            href={`/event/${item.id }/${activeCategory}/detail-event`}
+            href={`/event/${item.id}/${activeCategory}/detail-event`}
           >
             <StackCustom gap={"xs"}>
               <Grid>

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

@@ -74,8 +74,6 @@ export default function UserEventConfirmation() {
         userId: user?.id as string,
       });
 
-      console.log("[RES CONFIRMATION]", JSON.stringify(response, null, 2));
-
       if (response.success) {
         setData(response.data?.dataEvent);
         setPeserta(response.data?.peserta);
@@ -142,11 +140,11 @@ export default function UserEventConfirmation() {
       return (
         <TamplateBox data={data}>
           <TamplateText
-            text={`Event telah selesai, anda terdaftar sebagai peserta dan${
+            text={`Event telah selesai, anda terdaftar sebagai peserta dan ${
               konfirmasi
                 ? "Anda telah mengonfirmasi kehadiran."
                 : "Anda tidak mengonfirmasi kehadiran."
-            }. Terima kasih atas perhatian dan minat Anda. Kami berharap dapat bertemu di acara kami berikutnya.`}
+            } Terima kasih atas perhatian dan minat Anda. Kami berharap dapat bertemu di acara kami berikutnya.`}
           />
           <BackToOtherPath
             path="event"
@@ -173,14 +171,16 @@ export default function UserEventConfirmation() {
       if (isWithinConfirmationWindow && peserta === true) {
         if (konfirmasi === false) {
           return (
-            <TamplateBox data={data}>
+            <UserParticipan_And_DuringEvent
-              <TamplateText text="Konfirmasi Kehadiran" />
+              id={data.id}
-            </TamplateBox>
+              userId={user?.id as string}
+              data={data}
+            />
           );
         }
         return (
           <TamplateBox data={data}>
-            <TamplateText text="Anda telah mengonfirmasi kehadiran." />
+            <TamplateText text="Terimakasih telah mengonfirmasi kehadiran. Silahkan lihat peserta lain pada halaman event atau kembali ke halaman home. Selamat menikmati acara dan selamat berpartisipasi." />
             <BackToOtherPath
               path="event"
               id={data.id}
@@ -192,7 +192,7 @@ export default function UserEventConfirmation() {
 
       return (
         <TamplateBox data={data}>
-          <TamplateText text="Anda terdaftar sebagai peserta. Konfirmasi kehadiran dibuka 1 jam sebelum acara dimulai." />
+          <TamplateText text="Anda telah terdaftar sebagai peserta pada Event ini. Konfirmasi kehadiran dibuka 1 jam sebelum acara dimulai." />
           <BackToOtherPath
             path="event"
             id={data.id}
@@ -261,17 +261,17 @@ export default function UserEventConfirmation() {
       <Stack.Screen
         options={{
           title: "Konfirmasi Event",
-          headerLeft: () => (
+          // headerLeft: () => (
-            <Ionicons
+          //   <Ionicons
-              name="arrow-back"
+          //     name="arrow-back"
-              size={20}
+          //     size={20}
-              color={MainColor.yellow}
+          //     color={MainColor.yellow}
-              onPress={() =>
+          //     onPress={() =>
-                router.navigate("/(application)/(user)/event/create")
+          //       router.navigate("/(application)/(user)/event/create")
-              }
+          //     }
-            />
+          //   />
-          ),
+          // ),
-        }}
+        }} 
       />
       <ViewWrapper>{handlerReturn()}</ViewWrapper>
     </>
@@ -326,7 +326,7 @@ const TamplateBox = ({
   );
 };
 
-const TamplateText = ({ text }: { text: string }) => {
+const TamplateText = ({ text }: { text: React.ReactNode }) => {
   return (
     <>
       <TextCustom align="center">{text}</TextCustom>
@@ -442,7 +442,7 @@ const NotStarted_And_UserNotParticipan = ({
 };
 
 // 🟡 ZONA ACARA BERLANGSUNG
-// Acara sedang berlangsung & belum terdaftar
+// Acara sedang berlangsung & belum terdaftar & user harus join dan konfirmasi
 const UserNotParticipan_And_DuringEvent = ({
   id,
   userId,
@@ -464,8 +464,6 @@ const UserNotParticipan_And_DuringEvent = ({
         category: "join_and_confirm",
       });
 
-      //   console.log("[RES JOIN & CONFIRMATION EVENT]", response);
-
       if (!response.success) {
         Toast.show({
           type: "error",
@@ -498,3 +496,59 @@ const UserNotParticipan_And_DuringEvent = ({
     </>
   );
 };
+
+
+// 🟡 ZONA ACARA BERLANGSUN
+// User sudah terdaftar & Event sedang berlangsung & user harus konfirmasi
+const UserParticipan_And_DuringEvent = ({
+  id,
+  userId,
+  data,
+}: {
+  id: string;
+  userId: string;
+  data: DataEvent;
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+
+      const response = await apiEventConfirmationAction({
+        id: id as string,
+        userId: userId as string,
+        category: "confirmation",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Anda gagal konfirmasi",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Anda berhasil konfirmasi",
+      });
+      router.navigate(`/(application)/(user)/event/${id}/publish`);
+    } catch (error) {
+      console.log("[ERROR JOIN & CONFIRMATION EVENT]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <>
+      <TamplateBox data={data}>
+        <TamplateText text="Anda sudah terdaftar sebagai peserta & Event sedang berlangsung. Silahkan konfirmasi kehadiran" />
+
+        <ButtonCustom onPress={() => handlerSubmit()} isLoading={isLoading}>
+          Konfirmasi
+        </ButtonCustom>
+      </TamplateBox>
+    </>
+  );
+};

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

@@ -18,7 +18,7 @@ import {
 import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function EventEdit() {
@@ -55,6 +55,7 @@ export default function EventEdit() {
     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));
@@ -209,7 +210,7 @@ export default function EventEdit() {
               minimumDate={new Date(Date.now())}
               label="Tanggal & Waktu Mulai"
               required
-              value={selectedDate as any}
+              value={selectedDate}
               onChange={(date: any) => {
                 setSelectedDate(date as any);
               }}
@@ -254,7 +255,6 @@ export default function EventEdit() {
               placeholder="Masukkan deskripsi event"
               required
               showCount
-              maxLength={100}
               value={data?.deskripsi}
               onChangeText={(value) => setData({ ...data, deskripsi: value })}
             />

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

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

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

@@ -11,29 +11,30 @@ import {
   apiEventGetOne,
   apiEventListOfParticipants,
 } from "@/service/api-client/api-event";
-import { useLocalSearchParams } from "expo-router";
+import dayjs, { Dayjs } from "dayjs";
-import { useEffect, useState } from "react";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function EventListOfParticipants() {
   const { id } = useLocalSearchParams();
-  const [startDate, setStartDate] = useState();
+  const [startDate, setStartDate] = useState<Dayjs | undefined>();
-  const [listData, setListData] = useState([]);
+  const [listData, setListData] = useState<any[] | null>(null);
-  const [isLoadData, setIsLoadData] = useState(false);
+  const [loadtData, setLoadData] = useState(false);
 
-  useEffect(() => {
+  useFocusEffect(
-    handlerLoadData();
+    useCallback(() => {
-  }, [id]);
+      handlerLoadData();
+    }, [id])
+  );
 
   const handlerLoadData = () => {
     try {
-      setIsLoadData(true);
       onLoadData();
       onLoadList();
     } catch (error) {
       console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
     }
   };
 
@@ -41,7 +42,8 @@ export default function EventListOfParticipants() {
     try {
       const response = await apiEventGetOne({ id: id as string });
       if (response.success) {
-        setStartDate(response.data.tanggal);
+        const date = dayjs(response.data.tanggal);
+        setStartDate(date);
       }
     } catch (error) {
       console.log("[ERROR]", error);
@@ -50,30 +52,36 @@ export default function EventListOfParticipants() {
 
   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>
-      {isLoadData ? (
+      {loadtData && !listData ? (
         <LoaderCustom />
-      ) : listData.length === 0 ? (
+      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada peserta</TextCustom>
+        <TextCustom align="center" color="gray">
+          Belum ada peserta
+        </TextCustom>
       ) : (
-        listData.map((item: any, index: number) => (
+        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={
-                new Date().getTime() > new Date(startDate as any).getTime() ? (
+                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
                   <View
                     style={{
                       justifyContent: "flex-end",

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

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

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

@@ -14,7 +14,7 @@ import { apiEventCreate } from "@/service/api-client/api-event";
 import { apiMasterEventType } from "@/service/api-client/api-master";
 import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { router } from "expo-router";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
 
 interface EventCreateProps {
@@ -78,23 +78,6 @@ export default function EventCreate() {
       return;
     }
 
-    // if (selectedDate) {
-    //   console.log("Tanggal yang dipilih:", selectedDate);
-    //   console.log(`ISO Format ${Platform.OS}:`, selectedDate.toString());
-
-    //   // Kirim ke API atau proses lanjutan
-    // } else {
-    //   console.log("Tanggal belum dipilih");
-    // }
-
-    // if (selectedEndDate) {
-    //   console.log("Tanggal yang dipilih:", selectedEndDate);
-    //   console.log(`ISO Format ${Platform.OS}:`, selectedEndDate.toString());
-    //   // Kirim ke API atau proses lanjutan
-    // } else {
-    //   console.log("Tanggal berakhir belum dipilih");
-    // }
-
     try {
       setIsLoading(true);
 
@@ -110,13 +93,14 @@ export default function EventCreate() {
       const response = await apiEventCreate(newData);
       console.log("Response", JSON.stringify(response, null, 2));
 
-      router.navigate("/event/status");
+      router.replace("/event/status?status=review");
     } catch (error) {
       console.log(error);
     } finally {
       setIsLoading(false);
     }
   };
+  
 
   const buttonSubmit = (
     <ButtonCustom
@@ -144,7 +128,7 @@ export default function EventCreate() {
               label: item.name,
               value: item.id,
             }))}
-            value={data?.eventMaster_TipeAcaraId || ""}
+            value={data?.eventMaster_TipeAcaraId || null}
             onChange={(value: any) =>
               setData({ ...data, eventMaster_TipeAcaraId: value })
             }
@@ -191,7 +175,7 @@ export default function EventCreate() {
             placeholder="Masukkan deskripsi event"
             required
             showCount
-            maxLength={1000}
+            value={data?.deskripsi || ""}
             onChangeText={(value: any) =>
               setData({ ...data, deskripsi: value })
             }

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

@@ -5,9 +5,12 @@ import {
   TextAreaCustom,
   ViewWrapper,
 } from "@/components";
+import AlertWarning from "@/components/Alert/AlertWarning";
 import { apiForumGetOne, apiForumUpdate } from "@/service/api-client/api-forum";
+import { isBadContent } from "@/utils/badWordsIndonesia";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
+import { Alert } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function ForumEdit() {
@@ -43,6 +46,12 @@ export default function ForumEdit() {
       });
       return;
     }
+
+    if (isBadContent(text)) {
+      AlertWarning({});
+      return;
+    }
+
     try {
       setIsLoading(true);
       const response = await apiForumUpdate({

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

@@ -1,142 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
+import View_Forumku from "@/screens/Forum/ViewForumku";
-  AvatarComp,
+import View_Forumku2 from "@/screens/Forum/ViewForumku2";
-  ButtonCustom,
-  CenterCustom,
-  DrawerCustom,
-  FloatingButton,
-  Grid,
-  LoaderCustom,
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { apiForumGetAll } from "@/service/api-client/api-forum";
-import { apiUser } from "@/service/api-client/api-user";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function Forumku() {
-  const { id } = useLocalSearchParams();
-  const { user } = useAuth();
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [status, setStatus] = useState("");
-  const [listData, setListData] = useState<any | null>(null);
-  const [dataUser, setDataUser] = useState<any | null>(null);
-  const [loadingGetList, setLoadingGetList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-      onLoadDataProfile(id as string);
-    }, [id])
-  );
-
-  const onLoadDataProfile = async (id: string) => {
-    try {
-      const response = await apiUser(id);
-
-      setDataUser(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-    }
-  };
-
-  const onLoadData = async () => {
-    try {
-      setLoadingGetList(true);
-      const response = await apiForumGetAll({
-        search: "",
-        authorId: id as string,
-      });
-
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingGetList(false);
-    }
-  };
-
   return (
     <>
-      <ViewWrapper
+      {/* <View_Forumku />  */}
-        floatingButton={
+      <View_Forumku2 />
-          user?.id === id && (
-            <FloatingButton
-              onPress={() =>
-                router.navigate("/(application)/(user)/forum/create")
-              }
-            />
-          )
-        }
-      >
-        <StackCustom>
-          <CenterCustom>
-            <AvatarComp
-              fileId={dataUser?.Profile?.imageId}
-              href={`/(application)/(image)/preview-image/${dataUser?.Profile?.imageId}`}
-              size="xl"
-            />
-          </CenterCustom>
-
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom bold truncate>
-                @{dataUser?.username || "-"}
-              </TextCustom>
-              <TextCustom>{listData?.length || "0"} postingan</TextCustom>
-            </Grid.Col>
-            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <ButtonCustom href={`/profile/${dataUser?.Profile?.id}`}>
-                Kunjungi Profile
-              </ButtonCustom>
-            </Grid.Col>
-          </Grid>
-          {loadingGetList ? (
-            <LoaderCustom />
-          ) : _.isEmpty(listData) ? (
-            <TextCustom> Tidak ada diskusi</TextCustom>
-          ) : (
-            <>
-              {listData?.map((item: any, index: number) => (
-                <Forum_BoxDetailSection
-                  isRightComponent={false}
-                  key={index}
-                  data={item}
-                  isTruncate={true}
-                  href={`/forum/${item.id}`}
-                  onSetData={(value) => {
-                    setOpenDrawer(value.setOpenDrawer);
-                    setStatus(value.setStatus);
-                  }}
-                />
-              ))}
-            </>
-          )}
-        </StackCustom>
-      </ViewWrapper>
-
-      {/* Drawer Komponen Eksternal */}
-      <DrawerCustom
-        height={"auto"}
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-      >
-        <Forum_MenuDrawerBerandaSection
-          id={id as string}
-          status={status}
-          setIsDrawerOpen={() => {
-            setOpenDrawer(false);
-          }}
-          authorId={id as string}
-        />
-      </DrawerCustom>
     </>
   );
 }

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

@@ -1,263 +1,11 @@
-import {
+import DetailForum from "@/screens/Forum/DetailForum";
-  ButtonCustom,
+import DetailForum2 from "@/screens/Forum/DetailForum2";
-  DrawerCustom,
-  LoaderCustom,
-  Spacing,
-  TextAreaCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import Forum_CommentarBoxSection from "@/screens/Forum/CommentarBoxSection";
-import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import Forum_MenuDrawerCommentar from "@/screens/Forum/MenuDrawerSection.tsx/MenuCommentar";
-import {
-  apiForumCreateComment,
-  apiForumGetComment,
-  apiForumGetOne,
-  apiForumUpdateStatus,
-} from "@/service/api-client/api-forum";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
-import { useCallback, useEffect, useState } from "react";
-
-interface CommentProps {
-  id: string;
-  isActive: boolean;
-  komentar: string;
-  createdAt: Date;
-  authorId: string;
-  Author: {
-    id: string;
-    username: string;
-    Profile: {
-      id: string;
-      imageId: string;
-    };
-  };
-}
 
 export default function ForumDetail() {
-  const { id } = useLocalSearchParams();
-  const { user } = useAuth();
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [data, setData] = useState<any | null>(null);
-  const [listComment, setListComment] = useState<CommentProps[] | null>(null);
-  const [isLoadingComment, setLoadingComment] = useState(false);
-
-  // Status
-  const [status, setStatus] = useState("");
-  const [text, setText] = useState("");
-  const [authorId, setAuthorId] = useState("");
-  const [dataId, setDataId] = useState("");
-
-  // Comentar
-  const [openDrawerCommentar, setOpenDrawerCommentar] = useState(false);
-  const [commentId, setCommentId] = useState("");
-  const [commentAuthorId, setCommentAuthorId] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData(id as string);
-    }, [id])
-  );
-
-  const onLoadData = async (id: string) => {
-    try {
-      const response = await apiForumGetOne({ id });
-      setData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  useEffect(() => {
-    onLoadListComment(id as string);
-  }, [id]);
-
-  const onLoadListComment = async (id: string) => {
-    try {
-      const response = await apiForumGetComment({
-        id: id as string,
-      });
-      setListComment(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  // Update Status
-  const handlerUpdateStatus = async (value: any) => {
-    try {
-      const response = await apiForumUpdateStatus({
-        id: id as string,
-        data: value,
-      });
-      if (response.success) {
-        setStatus(response.data);
-        setData({
-          ...data,
-          ForumMaster_StatusPosting: {
-            status: response.data,
-          },
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  // Create Commentar
-  const handlerCreateCommentar = async () => {
-    const newData = {
-      comment: text,
-      authorId: user?.id,
-    };
-
-    try {
-      setLoadingComment(true);
-      const response = await apiForumCreateComment({
-        id: id as string,
-        data: newData,
-      });
-
-      if (response.success) {
-        setText("");
-        const newComment = {
-          id: response.data.id,
-          isActive: response.data.isActive,
-          komentar: response.data.komentar,
-          createdAt: response.data.createdAt,
-          authorId: response.data.authorId,
-          Author: response.data.Author,
-        };
-        setListComment((prev) => [newComment, ...(prev || [])]);
-        setData({
-          ...data,
-          count: data.count + 1,
-        });
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingComment(false);
-    }
-  };
-
   return (
     <>
-      <ViewWrapper>
+     {/* <DetailForum />; */}
-        {!data && !listComment ? (
+     <DetailForum2 />
-          <LoaderCustom />
-        ) : (
-          <>
-            {/* Box Posting */}
-            <Forum_BoxDetailSection
-              data={data}
-              onSetData={() => {
-                setOpenDrawer(true);
-                setStatus(data.ForumMaster_StatusPosting?.status);
-                setAuthorId(data.Author?.id);
-                setDataId(data.id);
-              }}
-            />
-
-            {/* Area Commentar */}
-            {data?.ForumMaster_StatusPosting?.status === "Open" && (
-              <>
-                <TextAreaCustom
-                  placeholder="Ketik diskusi anda..."
-                  maxLength={1000}
-                  showCount
-                  value={text}
-                  onChangeText={setText}
-                  style={{
-                    marginBottom: 0,
-                  }}
-                />
-                <ButtonCustom
-                  isLoading={isLoadingComment}
-                  style={{
-                    alignSelf: "flex-end",
-                  }}
-                  onPress={() => {
-                    handlerCreateCommentar();
-                  }}
-                >
-                  Balas
-                </ButtonCustom>
-              </>
-            )}
-            <Spacing height={40} />
-
-            {/* List Commentar */}
-            {_.isEmpty(listComment) ? (
-              <TextCustom align="center" color="gray" size={"small"}>
-                Tidak ada komentar
-              </TextCustom>
-            ) : (
-              <TextCustom color="gray">Komentar :</TextCustom>
-            )}
-            <Spacing height={5} />
-            {listComment?.map((item: any, index: number) => (
-              <Forum_CommentarBoxSection
-                key={index}
-                data={item}
-                onSetData={(value) => {
-                  setCommentId(value.setCommentId);
-                  setOpenDrawerCommentar(value.setOpenDrawer);
-                  setCommentAuthorId(value.setCommentAuthorId);
-                }}
-              />
-            ))}
-          </>
-        )}
-      </ViewWrapper>
-
-      {/* Posting Drawer */}
-      <DrawerCustom
-        height={"auto"}
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-      >
-        <Forum_MenuDrawerBerandaSection
-          id={dataId}
-          status={status}
-          setIsDrawerOpen={() => {
-            setOpenDrawer(false);
-          }}
-          authorId={authorId}
-          handlerUpdateStatus={(value: any) => {
-            handlerUpdateStatus(value);
-          }}
-        />
-      </DrawerCustom>
-
-      {/* Commentar Drawer */}
-      <DrawerCustom
-        height={"auto"}
-        isVisible={openDrawerCommentar}
-        closeDrawer={() => setOpenDrawerCommentar(false)}
-      >
-        <Forum_MenuDrawerCommentar
-          id={commentId as string}
-          commentId={commentId}
-          commentAuthorId={commentAuthorId}
-          setIsDrawerOpen={() => {
-            setOpenDrawerCommentar(false);
-          }}
-          listComment={listComment}
-          setListComment={setListComment}
-          countComment={data?.count}
-          setCountComment={(val: any) => {
-            setData((prev: any) => ({
-              ...prev,
-              count: val,
-            }));
-          }}
-        />
-      </DrawerCustom>
     </>
-  );
+  )
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,129 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
+import Forum_ViewBeranda from "@/screens/Forum/ViewBeranda";
-  AvatarComp,
+import Forum_ViewBeranda2 from "@/screens/Forum/ViewBeranda2";
-  BackButton,
+import Forum_ViewBeranda3 from "@/screens/Forum/ViewBeranda3";
-  DrawerCustom,
-  LoaderCustom,
-  SearchInput,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import FloatingButton from "@/components/Button/FloatingButton";
-import { useAuth } from "@/hooks/use-auth";
-import Forum_BoxDetailSection from "@/screens/Forum/DiscussionBoxSection";
-import Forum_MenuDrawerBerandaSection from "@/screens/Forum/MenuDrawerSection.tsx/MenuBeranda";
-import { apiForumGetAll } from "@/service/api-client/api-forum";
-import { apiUser } from "@/service/api-client/api-user";
-import { router, Stack, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function Forum() {
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [status, setStatus] = useState("");
-  const { user } = useAuth();
-  const [dataUser, setDataUser] = useState<any>();
-  const [listData, setListData] = useState<any[]>();
-  const [loadingGetList, setLoadingGetList] = useState(false);
-  const [search, setSearch] = useState("");
-  const [dataId, setDataId] = useState("");
-  const [authorId, setAuthorId] = useState("");
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-      onLoadDataProfile(user?.id as string);
-    }, [user?.id, search])
-  );
-
-  const onLoadDataProfile = async (id: string) => {
-    const response = await apiUser(id);
-    setDataUser(response.data);
-  };
-
-  const onLoadData = async () => {
-    try {
-      setLoadingGetList(true);
-      const response = await apiForumGetAll({ search: search });
-
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadingGetList(false);
-    }
-  };
-
   return (
     <>
-      <Stack.Screen
+      {/* <Forum_ViewBeranda /> */}
-        options={{
+      {/* <Forum_ViewBeranda2 /> */}
-          title: "Forum",
+      <Forum_ViewBeranda3 />
-          headerLeft: () => <BackButton />,
-          headerRight: () => (
-            <AvatarComp
-              fileId={dataUser?.Profile?.imageId}
-              size="base"
-              href={`/forum/${user?.id}/forumku`}
-            />
-          ),
-        }}
-      />
-
-      <ViewWrapper
-        headerComponent={
-          <SearchInput
-            placeholder="Cari topik diskusi"
-            onChangeText={(e) => setSearch(e)}
-          />
-        }
-        floatingButton={
-          <FloatingButton
-            onPress={() =>
-              router.navigate("/(application)/(user)/forum/create")
-            }
-          />
-        }
-      >
-        {loadingGetList ? (
-          <LoaderCustom />
-        ) : _.isEmpty(listData) ? (
-          <TextCustom align="center" color="gray">
-            Tidak ada diskusi
-          </TextCustom>
-        ) : (
-          listData?.map((e: any, i: number) => (
-            <Forum_BoxDetailSection
-              key={i}
-              data={e}
-              onSetData={() => {
-                setDataId(e.id);
-                setOpenDrawer(true);
-                setStatus(e.ForumMaster_StatusPosting?.status);
-                setAuthorId(e.Author?.id);
-              }}
-              isTruncate={true}
-              href={`/forum/${e.id}`}
-              isRightComponent={false}
-            />
-          ))
-        )}
-      </ViewWrapper>
-
-      <DrawerCustom
-        height={"auto"}
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-      >
-        <Forum_MenuDrawerBerandaSection
-          id={dataId}
-          authorId={authorId}
-          status={status}
-          setIsDrawerOpen={() => {
-            setOpenDrawer(false);
-          }}
-        />
-      </DrawerCustom>
     </>
   );
 }

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

@@ -0,0 +1,202 @@
+import {
+    BaseBox,
+    ButtonCustom,
+    CheckboxCustom,
+    NewWrapper,
+    StackCustom,
+    TextCustom,
+} from "@/components";
+import { useAuth } from "@/hooks/use-auth";
+import { apiAcceptForumTerms } from "@/service/api-client/api-user";
+import { GStyles } from "@/styles/global-styles";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { View } from "react-native";
+import { Text } from "react-native-paper";
+import Toast from "react-native-toast-message";
+
+export default function ForumSplash() {
+  const { user } = useAuth();
+  const [term, setTerm] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      const respone = await apiAcceptForumTerms({
+        category: "Forum",
+        userId: user?.id as any,
+      });
+
+      if (respone.success) {
+        Toast.show({
+          type: "success",
+          text1: "Berhasil",
+          text2: "Terima kasih telah menerima syarat & ketentuan forum ini",
+        });
+
+        router.replace("/(application)/forum");
+
+        return;
+      }
+
+      Toast.show({
+        type: "error",
+        text1: "Gagal",
+        text2: "Terjadi kesalahan, silahkan coba lagi",
+      });
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <NewWrapper>
+      {/* <TextCustom bold>HIPMI Badung Connect</TextCustom> . */}
+
+      <BaseBox>
+        <StackCustom>
+          <TextCustom>
+            Dengan mengakses dan menggunakan Forum HIPMI Badung Connect, Anda
+            secara sadar menyetujui ketentuan berikut:
+          </TextCustom>
+
+          <TextCustom bold>
+            1. Dilarang keras memposting konten yang mengandung:
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms1.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom bold>
+            2. Setiap pengguna bertanggung jawab penuh atas konten yang
+            diunggah. Konten yang melanggar ketentuan ini dapat dihapus kapan
+            saja tanpa pemberitahuan.
+          </TextCustom>
+
+          <TextCustom bold>
+            3. Jika Anda menemukan konten tidak pantas, segera:
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms2.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom bold>
+            4. Gunakan fitur “Blokir Pengguna” di profil pengguna terkait
+          </TextCustom>
+          <View style={{ paddingInline: 10 }}>
+            {forumTerms3.map((term, index) => (
+              <View
+                key={index}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10,
+                  paddingBottom: 10,
+                }}
+              >
+                <Ionicons name="radio-button-on" color={"white"} />
+                <TextCustom>{term.text}</TextCustom>
+              </View>
+            ))}
+          </View>
+
+          <TextCustom>
+            Pelanggaran terhadap ketentuan ini berakibat{" "}
+            <TextCustom bold>pencabutan akses</TextCustom> ke Forum dan/atau{" "}
+            <TextCustom bold>pemblokiran akun secara permanen</TextCustom> tanpa
+            pemberitahuan lebih lanjut.
+          </TextCustom>
+
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              marginTop: 16,
+              marginBottom: 16,
+            }}
+          >
+            <CheckboxCustom value={term} onChange={() => setTerm(!term)} />
+
+            <Text style={GStyles.textLabel}>
+              Saya telah membaca dan menyetujui Syarat & Ketentuan Forum ini
+            </Text>
+          </View>
+
+          <ButtonCustom
+            disabled={!term || loading}
+            onPress={() => {
+              handleSubmit();
+            }}
+          >
+            Lanjut
+          </ButtonCustom>
+        </StackCustom>
+      </BaseBox>
+    </NewWrapper>
+  );
+}
+
+// Data dalam format JSON (bisa juga diimpor dari file terpisah)
+interface Term {
+  text: string;
+}
+
+const forumTerms1: Term[] = [
+  {
+    text: "Ujaran kebencian, diskriminasi, atau konten SARA (Suku, Agama, Ras, Antar-golongan)",
+  },
+  { text: "Kata kasar, pelecehan, ancaman, atau bullying" },
+  { text: "Pornografi, hoaks, spam, atau informasi menyesatkan" },
+  { text: "Promosi aktivitas ilegal seperti perjudian atau narkoba" },
+];
+
+const forumTerms2: Term[] = [
+  {
+    text: "Gunakan tombol “Laporkan” di setiap postingan, atau",
+  },
+  {
+    text: "Gunakan fitur “Blokir Pengguna” di profil pengguna terkait.",
+  },
+];
+
+const forumTerms3: Term[] = [
+  {
+    text: "Meninjau setiap laporan dalam waktu 24 jam",
+  },
+  {
+    text: "Menghapus konten yang melanggar",
+  },
+  {
+    text: "Memblokir akun pelanggar sesuai tingkat pelanggaran",
+  },
+];

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

@@ -3,7 +3,9 @@
 import { StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
+import HeaderBell from "@/screens/Home/HeaderBell";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
 import { tabsHome } from "@/screens/Home/tabsList";
@@ -11,31 +13,52 @@ import Home_FeatureSection from "@/screens/Home/topFeatureSection";
 import { apiUser } from "@/service/api-client/api-user";
 import { apiVersion } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
-import { Redirect, router, Stack } from "expo-router";
+import { Redirect, router, Stack, useFocusEffect } from "expo-router";
-import { useEffect, useState } from "react";
+import { useCallback, useState } from "react";
+import { RefreshControl } from "react-native";
 
 export default function Application() {
-  const { token, user } = useAuth();
+  const { token, user, userData } = useAuth();
-
   const [data, setData] = useState<any>();
+  const [refreshing, setRefreshing] = useState(false);
+  const { syncUnreadCount } = useNotificationStore();
 
-  useEffect(() => {
+  useFocusEffect(
-    onLoadData();
+    useCallback(() => {
-    checkVersion();
+      onLoadData();
-  }, []);
+      checkVersion();
+      userData(token as string);
+      syncUnreadCount();
+    }, [user?.id, token])
+  );
 
   async function onLoadData() {
     const response = await apiUser(user?.id as string);
-    console.log("Response profile >>", JSON.stringify(response?.data?.Profile, null, 2));
+    console.log(
+      "[Profile ID]>>",
+      JSON.stringify(response?.data?.Profile?.id, null, 2)
+    );
 
     setData(response.data);
   }
 
   const checkVersion = async () => {
     const response = await apiVersion();
-    console.log("Version >>", JSON.stringify(response.data, null, 2));
+    console.log("[Version] >>", JSON.stringify(response.data, null, 2));
   };
 
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    onLoadData();
+    checkVersion();
+    setRefreshing(false);
+  }, []);
+
+  // if (user && user?.termsOfServiceAccepted === false) {
+  //   console.log("User is not accept term service");
+  //   return <Redirect href={`/terms-agreement`} />;
+  // }
+
   if (data && data?.active === false) {
     console.log("User is not active");
     return <Redirect href={`/waiting-room`} />;
@@ -61,24 +84,27 @@ export default function Application() {
               }}
             />
           ),
-          headerRight: () => (
+          headerRight: () => <HeaderBell />,
-            <Ionicons
-              name="notifications"
-              size={20}
-              color={MainColor.yellow}
-              onPress={() => {
-                router.push("/notifications");
-              }}
-            />
-          ),
         }}
       />
       <ViewWrapper
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
         footerComponent={
-          <TabSection tabs={tabsHome(data?.Profile?.id as string)} />
+          <TabSection
+            tabs={tabsHome({
+              acceptedForumTermsAt: data?.acceptedForumTermsAt,
+              profileId: data?.Profile?.id,
+            })}
+          />
         }
       >
         <StackCustom>
+          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>
+            Test Notif
+          </ButtonCustom> */}
+
           <Home_ImageSection />
 
           <Home_FeatureSection />

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

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

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

@@ -1,23 +1,14 @@
 import {
-  BaseBox,
   FloatingButton,
-  Grid,
   LoaderCustom,
-  ProgressCustom,
+  ViewWrapper
-  StackCustom,
-  TextCustom,
-  ViewWrapper,
 } from "@/components";
-import API_STRORAGE from "@/constants/base-url-api-strorage";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
-import DUMMY_IMAGE from "@/constants/dummy-image-value";
+import Investment_BoxBerandaSection from "@/screens/Invesment/BoxBerandaSection";
 import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
-import { Ionicons } from "@expo/vector-icons";
-import dayjs from "dayjs";
-import { Image } from "expo-image";
 import { router, useFocusEffect } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
-import { View } from "react-native";
 
 export default function InvestmentBursa() {
   const [list, setList] = useState<any[] | null>(null);
@@ -32,8 +23,10 @@ export default function InvestmentBursa() {
   const onLoadList = async () => {
     try {
       setLoadingList(true);
-      const response = await apiInvestmentGetAll();
+      const response = await apiInvestmentGetAll({
-      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+        category: "bursa"
+      });
+      // console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
       setList(response.data);
     } catch (error) {
       console.log("[ERROR]", error);
@@ -52,95 +45,12 @@ export default function InvestmentBursa() {
       {loadingList ? (
         <LoaderCustom />
       ) : _.isEmpty(list) ? (
-        <TextCustom>Belum ada data</TextCustom>
+        <NoDataText />
       ) : (
         list?.map((item: any, index: number) => (
-          <BaseBox
+          <Investment_BoxBerandaSection id={item.id} data={item} key={index} />
-            key={index}
-            paddingTop={7}
-            paddingBottom={7}
-            href={`/investment/${item.id}`}
-          >
-            <Grid>
-              <Grid.Col span={5}>
-                <Image
-                  source={
-                    item && item.imageId
-                      ? API_STRORAGE.GET({ fileId: item.imageId })
-                      : DUMMY_IMAGE.background
-                  }
-                  style={{ width: "auto", height: 100, borderRadius: 10 }}
-                />
-              </Grid.Col>
-              <Grid.Col span={1}>
-                <View />
-              </Grid.Col>
-              <Grid.Col span={6}>
-                <StackCustom>
-                  <TextCustom truncate={2}>{item.title}</TextCustom>
-                  <ProgressCustom
-                    label={`${item.progress}%`}
-                    value={item.progress}
-                    size="lg"
-                  />
-                  {Number(item?.pencarianInvestor) -
-                    dayjs().diff(dayjs(item.countDown), "days") <=
-                  0 ? (
-                    <View
-                      style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                        gap: 5,
-                      }}
-                    >
-                      <Ionicons
-                        name="alert-circle-outline"
-                        size={16}
-                        color="red"
-                      />
-                      <TextCustom color="red" size="small">
-                        Periode Investasi Selesai
-                      </TextCustom>
-                    </View>
-                  ) : (
-                    <TextCustom>
-                      Sisa waktu:{" "}
-                      {Number(item?.pencarianInvestor) -
-                        dayjs().diff(dayjs(item.countDown), "days")}{" "}
-                      hari
-                    </TextCustom>
-                  )}
-                </StackCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
         ))
       )}
     </ViewWrapper>
   );
 }
-
-//   <View style={{ padding: 20, gap: 16 }}>
-//     <TextCustom>Progress 70%</TextCustom>
-//     <ProgressCustom value={70} color="primary" size="md" />
-
-//     <TextCustom>Success Progress</TextCustom>
-//     <ProgressCustom value={40} color="success" size="lg" />
-
-//     <TextCustom>Warning Progress (small)</TextCustom>
-//     <ProgressCustom value={90} color="warning" size="sm" />
-
-//     <TextCustom>Error Indeterminate</TextCustom>
-//     <ProgressCustom value={null} color="error" size="md" />
-
-//     <TextCustom>Custom Radius</TextCustom>
-//     <ProgressCustom value={60} color="info" size="xl" radius={4} />
-
-//     <ProgressCustom value={70} color="primary" size="lg" />
-
-//     <ProgressCustom value={45} color="success" size="md" label="Halfway!" />
-
-//     <ProgressCustom value={90} color="warning" size="lg" showLabel={false} />
-
-//     <ProgressCustom value={null} color="error" size="sm" label="Loading..." />
-//   </View>;

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

@@ -1,50 +1,83 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
+  LoaderCustom,
   ProgressCustom,
   Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
+import { useAuth } from "@/hooks/use-auth";
+import { apiInvestmentGetAll } from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
 import { View } from "react-native";
 
 export default function InvestmentMyHolding() {
+  const { user } = useAuth();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadList();
+    }, [user?.id])
+  );
+
+  const onLoadList = async () => {
+    try {
+      setLoadingList(true);
+      const response = await apiInvestmentGetAll({
+        category: "my-holding",
+        authorId: user?.id,
+      });
+      console.log("[DATA LIST]", JSON.stringify(response.data, null, 2));
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
   return (
     <ViewWrapper hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {loadingList ? (
-        <BaseBox key={index} paddingTop={7} paddingBottom={7} onPress={() => router.push(`/investment/${index}/(my-holding)/holding-${index}`)}>
+        <LoaderCustom />
-          <Grid>
+      ) : _.isEmpty(list) ? (
-            <Grid.Col span={6}>
+        <NoDataText />
-              <StackCustom gap={"xs"}>
+      ) : (
-                <TextCustom truncate={2}>
+        list?.map((item, index) => (
-                  Title here : Lorem ipsum dolor sit amet consectetur
+          <BaseBox
-                  adipisicing elit. Omnis, exercitationem, sequi enim quod
+            key={index}
-                  distinctio maiores laudantium amet, quidem atque repellat sit
+            paddingTop={7}
-                  vitae qui aliquam est veritatis laborum eum voluptatum totam!
+            paddingBottom={7}
-                </TextCustom>
+            onPress={() =>
-
+              router.push(`/investment/${item?.id}/(my-holding)/${item?.id}`)
-                <Spacing height={5} />
+            }
-                <TextCustom size="small">Rp. 7.500.000</TextCustom>
+          >
-                <TextCustom size="small">300 Lembar</TextCustom>
+            <StackCustom>
-              </StackCustom>
+              <TextCustom truncate={2}>{item?.title}</TextCustom>
-            </Grid.Col>
+              <TextCustom>
-            <Grid.Col span={1}>
+                Rp. {formatCurrencyDisplay(item?.nominal)}
-              <View />
+              </TextCustom>
-            </Grid.Col>
+              <TextCustom>{item?.lembarTerbeli} Lembar</TextCustom>
-            <Grid.Col
+              <ProgressCustom
-              span={5}
+                label={`${item.progress}%`}
-              style={{
+                value={Number(item.progress)}
-                justifyContent: "center",
+                size="lg"
-                alignItems: "center",
+                animated
-              }}
+                color="primary"
-            >
+              />
-              <ProgressCustom value={(index % 5) * 20} size="lg" />
+            </StackCustom>
-            </Grid.Col>
+          </BaseBox>
-          </Grid>
+        ))
-        </BaseBox>
+      )}
-      ))}
     </ViewWrapper>
   );
 }

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

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

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

@@ -8,6 +8,7 @@ import {
   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";
@@ -74,7 +75,7 @@ export default function InvestmentTransaction() {
       {loadList ? (
         <LoaderCustom />
       ) : _.isEmpty(list) ? (
-        <TextCustom>Tidak ada data</TextCustom>
+        <NoDataText/>
       ) : (
         list.map((item: any, i: number) => (
           <BaseBox

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

@@ -1,29 +1,56 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    BackButton,
+  BackButton,
-    BaseBox,
+  BaseBox,
-    DotButton,
+  DotButton,
-    DrawerCustom,
+  DrawerCustom,
-    Grid,
+  Grid,
-    MenuDrawerDynamicGrid,
+  MenuDrawerDynamicGrid,
-    StackCustom,
+  StackCustom,
-    TextCustom,
+  TextCustom,
-    ViewWrapper,
+  ViewWrapper,
 } from "@/components";
 import { IconDocument, IconEdit, IconNews } from "@/components/_Icon";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
+import { useAuth } from "@/hooks/use-auth";
 import Invesment_ComponentBoxOnBottomDetail from "@/screens/Invesment/ComponentBoxOnBottomDetail";
 import Invesment_DetailDataPublishSection from "@/screens/Invesment/DetailDataPublishSection";
+import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
-import { router, Stack, useLocalSearchParams } from "expo-router";
+import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default function InvestmentDetailHolding() {
+  const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
   const [openDrawerDraft, setOpenDrawerDraft] = useState(false);
   const [openDrawerPublish, setOpenDrawerPublish] = useState(false);
+    const [data, setData] = useState<any>(null);
+  
+    useFocusEffect(
+      useCallback(() => {
+        onLoadData();
+      }, [id, status])
+    );
+  
+    const onLoadData = async () => {
+      try {
+        const response = await apiInvestmentGetInvoice({
+          id: id as string,
+          authorId: user?.id,
+          category: "invoice",
+        });
+  
+        console.log("[DATA]", JSON.stringify(response.data, null, 2));
+        setData(response.data);
+      } catch (error) {
+        console.log("[ERROR]", error);
+      }
+    };
 
   const handlePressDraft = (item: IMenuDrawerItem) => {
     console.log("PATH >> ", item.path);
@@ -39,7 +66,8 @@ export default function InvestmentDetailHolding() {
 
   const bottomSection = (
     <Invesment_ComponentBoxOnBottomDetail
-      id={id as string}
+      prospectusId={id as string}
+      id={data?.Investasi?.id as string}
       status={"publish"}
     />
   );
@@ -64,10 +92,12 @@ export default function InvestmentDetailHolding() {
           <StackCustom gap={"xs"}>
             <Grid>
               <Grid.Col span={6}>
-                <TextCustom bold>Nila Transaksi</TextCustom>
+                <TextCustom bold>Nilai Transaksi</TextCustom>
               </Grid.Col>
               <Grid.Col span={6}>
-                <TextCustom bold>Rp. 7.500.000</TextCustom>
+                <TextCustom bold>
+                  Rp. {data ? formatCurrencyDisplay(data?.nominal) : ""}
+                </TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>
@@ -75,12 +105,16 @@ export default function InvestmentDetailHolding() {
                 <TextCustom bold>Saham Terbeli</TextCustom>
               </Grid.Col>
               <Grid.Col span={6}>
-                <TextCustom bold>300 Lembar</TextCustom>
+                <TextCustom bold>
+                  {data ? data?.lembarTerbeli : ""} Lembar
+                </TextCustom>
               </Grid.Col>
             </Grid>
           </StackCustom>
         </BaseBox>
+
         <Invesment_DetailDataPublishSection
+          data={data && data?.Investasi}
           status={"publish"}
           bottomSection={bottomSection}
         />

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

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

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

@@ -1,9 +1,73 @@
-import { BaseBox, Grid, Spacing, StackCustom, TextCustom, ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BaseBox,
+  Grid,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
 import { GStyles } from "@/styles/global-styles";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
+import { useLocalSearchParams, useFocusEffect } from "expo-router";
+import React from "react";
 
 export default function InvestmentFailed() {
+  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+
+  const [data, setData] = React.useState<any | null>(null);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetInvoice({
+        id: id as string,
+        category: "invoice",
+      });
+
+      console.log("[RES INVOICE]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Bank",
+      value: (data && data?.MasterBank?.namaBank) || "-",
+    },
+    {
+      label: "Rekening Penerima",
+      value: (data && data?.MasterBank?.namaAkun) || "-",
+    },
+    {
+      label: "No Rekening",
+      value: (data && data?.MasterBank?.norek) || "-",
+    },
+    {
+      label: "Jumlah",
+      value: `Rp ${data && formatCurrencyDisplay(data?.nominal)}` || "-",
+    },
+    {
+      label: "Tanggal",
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
+    },
+    {
+      label: "Lembar Terbeli",
+      value: (data && formatCurrencyDisplay(data?.lembarTerbeli)) || "-",
+    },
+  ];
+
   return (
     <ViewWrapper>
       <StackCustom>
@@ -11,8 +75,7 @@ export default function InvestmentFailed() {
           <StackCustom>
             <TextCustom bold align="center">
               Transaksi anda gagal karena bukti transfer tidak sesuai dengan
-              data kami. Jika ini masalah khusus silahkan hubungi pada kontak
+              data kami. Hubungi admin untuk memperbaiki masalah ini.
-              whatsapp kami.
             </TextCustom>
 
             <FontAwesome6
@@ -50,30 +113,3 @@ export default function InvestmentFailed() {
     </ViewWrapper>
   );
 }
-
-const listData = [
-  {
-    label: "Bank",
-    value: " BCA",
-  },
-  {
-    label: "Rekening Penerima",
-    value: "Himpunan Pengusaha Muda Indonesia",
-  },
-  {
-    label: "No Rekening",
-    value: "2304235678854332",
-  },
-  {
-    label: "Jumlah",
-    value: "Rp. 1.000.000",
-  },
-  {
-    label: "Tanggal",
-    value: "2022-01-01",
-  },
-  {
-    label: "Lembar Terbeli",
-    value: "100",
-  },
-];

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

@@ -108,7 +108,9 @@ export default function InvestmentInvest() {
                 <TextCustom>Sisa Lembar Saham</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>{data?.sisaLembar || "-"}</TextCustom>
+                <TextCustom>
+                  {data && formatCurrencyDisplay(data?.sisaLembar) || "-"}
+                </TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>
@@ -116,7 +118,9 @@ export default function InvestmentInvest() {
                 <TextCustom>Harga Per Lembar</TextCustom>
               </Grid.Col>
               <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-                <TextCustom>{data?.hargaLembar || "-"}</TextCustom>
+                <TextCustom>
+                  {data && formatCurrencyDisplay(data?.hargaLembar) || "-"}
+                </TextCustom>
               </Grid.Col>
             </Grid>
             <Grid>

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BaseBox,
   Grid,
@@ -7,10 +8,66 @@ import {
   ViewWrapper,
 } from "@/components";
 import { MainColor } from "@/constants/color-palet";
+import { apiInvestmentGetInvoice } from "@/service/api-client/api-investment";
 import { GStyles } from "@/styles/global-styles";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
 import { FontAwesome6 } from "@expo/vector-icons";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import React from "react";
 
 export default function InvestmentSuccess() {
+  const { id } = useLocalSearchParams();
+  console.log("[ID]", id);
+
+  const [data, setData] = React.useState<any | null>(null);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+  const onLoadData = async () => {
+    try {
+      const response = await apiInvestmentGetInvoice({
+        id: id as string,
+        category: "invoice",
+      });
+
+      console.log("[RES INVOICE]", JSON.stringify(response.data, null, 2));
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const listData = [
+    {
+      label: "Bank",
+      value: (data && data?.MasterBank?.namaBank) || "-",
+    },
+    {
+      label: "Rekening Penerima",
+      value: (data && data?.MasterBank?.namaAkun) || "-",
+    },
+    {
+      label: "No Rekening",
+      value: (data && data?.MasterBank?.norek) || "-",
+    },
+    {
+      label: "Jumlah",
+      value: `Rp ${data && formatCurrencyDisplay(data?.nominal)}` || "-",
+    },
+    {
+      label: "Tanggal",
+      value: (data && dateTimeView({ date: data?.createdAt })) || "-",
+    },
+    {
+      label: "Lembar Terbeli",
+      value: (data && formatCurrencyDisplay(data?.lembarTerbeli)) || "-",
+    },
+  ];
+
   return (
     <ViewWrapper>
       <StackCustom>
@@ -35,8 +92,7 @@ export default function InvestmentSuccess() {
             Detail Transaksi
           </TextCustom>
 
-          <Spacing/>
+          <Spacing />
-
 
           <StackCustom>
             {listData.map((item, i) => (
@@ -45,7 +101,9 @@ export default function InvestmentSuccess() {
                   <TextCustom bold>{item.label}</TextCustom>
                 </Grid.Col>
                 <Grid.Col span={7}>
-                  <TextCustom style={{paddingLeft: 10}}>{item.value}</TextCustom>
+                  <TextCustom style={{ paddingLeft: 10 }}>
+                    {item.value}
+                  </TextCustom>
                 </Grid.Col>
               </Grid>
             ))}
@@ -55,30 +113,3 @@ export default function InvestmentSuccess() {
     </ViewWrapper>
   );
 }
-
-const listData = [
-  {
-    label: "Bank",
-    value: " BCA",
-  },
-  {
-    label: "Rekening Penerima",
-    value: "Himpunan Pengusaha Muda Indonesia",
-  },
-  {
-    label: "No Rekening",
-    value: "2304235678854332",
-  },
-  {
-    label: "Jumlah",
-    value: "Rp. 1.000.000",
-  },
-  {
-    label: "Tanggal",
-    value: "2022-01-01",
-  },
-  {
-    label: "Lembar Terbeli",
-    value: "100",
-  },
-];

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,14 +9,17 @@ import {
 import { useAuth } from "@/hooks/use-auth";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { apiJobGetByStatus } from "@/service/api-client/api-job";
-import { useFocusEffect } from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import { useCallback, useState } from "react";
 
 export default function JobStatus() {
   const { user } = useAuth();
+  const { status } = useLocalSearchParams<{ status?: string }>();
+  console.log("STATUS", status);
+
   const [activeCategory, setActiveCategory] = useState<string | null>(
-    "publish"
+    status || "publish"
   );
   const [listData, setListData] = useState<any[]>([]);
   const [isLoadList, setIsLoadList] = useState(false);
@@ -60,25 +63,29 @@ export default function JobStatus() {
   );
 
   return (
-    <ViewWrapper headerComponent={scrollComponent} hideFooter>
+    <>
-      {isLoadList ? (
+      <ViewWrapper headerComponent={scrollComponent} hideFooter>
-        <LoaderCustom />
+        {isLoadList ? (
-      ) : _.isEmpty(listData) ? (
+          <LoaderCustom />
-        <TextCustom align="center">Tidak ada data {activeCategory}</TextCustom>
+        ) : _.isEmpty(listData) ? (
-      ) : (
+          <TextCustom align="center">
-        listData.map((e, i) => (
+            Tidak ada data {activeCategory}
-          <BaseBox
+          </TextCustom>
-            key={i}
+        ) : (
-            paddingTop={20}
+          listData.map((e, i) => (
-            paddingBottom={20}
+            <BaseBox
-            href={`/job/${e?.id}/${activeCategory}/detail`}
+              key={i}
-          >
+              paddingTop={20}
-            <TextCustom align="center" bold truncate size="large">
+              paddingBottom={20}
-              {e?.title}
+              href={`/job/${e?.id}/${activeCategory}/detail`}
-            </TextCustom>
+            >
-          </BaseBox>
+              <TextCustom align="center" bold truncate size="large">
-        ))
+                {e?.title}
-      )}
+              </TextCustom>
-    </ViewWrapper>
+            </BaseBox>
+          ))
+        )}
+      </ViewWrapper>
+    </>
   );
 }

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

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

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

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

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

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

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

@@ -1,32 +1,6 @@
-import {
+import MapsView from "@/screens/Maps/MapsView";
-  ButtonCustom,
+import MapsView2 from "@/screens/Maps/MapsView2";
-  DrawerCustom,
+import { Text, View } from "react-native";
-  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";
-import { apiMapsGetAll } from "@/service/api-client/api-maps";
-import { openInDeviceMaps } from "@/utils/openInDeviceMaps";
-import { FontAwesome, Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { router, useFocusEffect } from "expo-router";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
-import MapView, { Marker } from "react-native-maps";
-
-const defaultRegion = {
-  latitude: -8.737109,
-  longitude: 115.1756897,
-  latitudeDelta: 0.1,
-  longitudeDelta: 0.1,
-  height: 300,
-};
 
 export interface LocationItem {
   id: string | number;
@@ -37,198 +11,11 @@ export interface LocationItem {
 }
 
 export default function Maps() {
-  const [list, setList] = useState<any[] | null>(null);
-  const [loadList, setLoadList] = useState(false);
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [selected, setSelected] = useState({
-    id: "",
-    bidangBisnis: "",
-    nomorTelepon: "",
-    alamatBisnis: "",
-    namePin: "",
-    imageId: "",
-    portofolioId: "",
-    latitude: 0,
-    longitude: 0,
-  });
-
-  useFocusEffect(
-    useCallback(() => {
-      handlerLoadList();
-    }, [])
-  );
-
-  const handlerLoadList = async () => {
-    try {
-      setLoadList(true);
-      const response = await apiMapsGetAll();
-
-      if (response.success) {
-        setList(response.data);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setLoadList(false);
-    }
-  };
-
   return (
     <>
-      <ViewWrapper style={{ paddingInline: 0, paddingBlock: 0 }}>
+      <MapsView />
-        {/* <MapCustom height={"100%"} /> */}
+      {/* <MapsView2 />, */}
-        <View style={{ flex: 1 }}>
+      {/* <View style={{ flex: 1, backgroundColor: "gray" }}><Text style={{ color: "white" }}>Map disabled</Text></View> */}
-          {loadList ? (
-            <MapView
-              initialRegion={defaultRegion}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            />
-          ) : (
-            <MapView
-              initialRegion={defaultRegion}
-              style={{
-                width: "100%",
-                height: "100%",
-              }}
-            >
-              {list?.map((item: any, index: number) => {
-                return (
-                  <Marker
-                    key={item?.id}
-                    coordinate={{
-                      latitude: item?.latitude,
-                      longitude: item?.longitude,
-                    }}
-                    title={item?.namePin}
-                    onPress={() => {
-                      setOpenDrawer(true);
-                      setSelected({
-                        id: item?.id,
-                        bidangBisnis:
-                          item?.Portofolio?.MasterBidangBisnis?.name,
-                        nomorTelepon: item?.Portofolio?.tlpn,
-                        alamatBisnis: item?.Portofolio?.alamatKantor,
-                        namePin: item?.namePin,
-                        imageId: item?.imageId,
-                        portofolioId: item?.Portofolio?.id,
-                        latitude: item?.latitude,
-                        longitude: item?.longitude,
-                      });
-                    }}
-                    // Gunakan gambar kustom jika tersedia
-                  >
-                    <View style={{}}>
-                      <Image
-                        source={{
-                          uri: API_IMAGE.GET({
-                            fileId: item?.Portofolio?.logoId,
-                          }),
-                        }}
-                        style={{
-                          width: 30,
-                          height: 30,
-                          borderRadius: 100,
-                          borderWidth: 1,
-                        }}
-                      />
-                    </View>
-                  </Marker>
-                );
-              })}
-            </MapView>
-          )}
-        </View>
-      </ViewWrapper>
-
-      <DrawerCustom
-        isVisible={openDrawer}
-        closeDrawer={() => setOpenDrawer(false)}
-        height={"auto"}
-      >
-        <DummyLandscapeImage height={200} imageId={selected.imageId} />
-        <Spacing />
-        <StackCustom gap={"xs"}>
-          <GridTwoView
-            spanLeft={2}
-            spanRight={10}
-            leftIcon={
-              <FontAwesome
-                name="building-o"
-                size={ICON_SIZE_SMALL}
-                color="white"
-              />
-            }
-            rightIcon={<TextCustom>{selected.namePin}</TextCustom>}
-          />
-
-          <GridTwoView
-            spanLeft={2}
-            spanRight={10}
-            leftIcon={
-              <Ionicons
-                name="list-outline"
-                size={ICON_SIZE_SMALL}
-                color="white"
-              />
-            }
-            rightIcon={<TextCustom>{selected.bidangBisnis}</TextCustom>}
-          />
-
-          <GridTwoView
-            spanLeft={2}
-            spanRight={10}
-            leftIcon={
-              <Ionicons
-                name="call-outline"
-                size={ICON_SIZE_SMALL}
-                color="white"
-              />
-            }
-            rightIcon={<TextCustom>{selected.nomorTelepon}</TextCustom>}
-          />
-          <GridTwoView
-            spanLeft={2}
-            spanRight={10}
-            leftIcon={
-              <Ionicons
-                name="location-outline"
-                size={ICON_SIZE_SMALL}
-                color="white"
-              />
-            }
-            rightIcon={<TextCustom>{selected.alamatBisnis}</TextCustom>}
-          />
-
-          <Grid>
-            <Grid.Col span={6} style={{ paddingRight: 10 }}>
-              <ButtonCustom
-                onPress={() => {
-                  setOpenDrawer(false);
-                  router.push(`/portofolio/${selected.portofolioId}`);
-                }}
-              >
-                Detail
-              </ButtonCustom>
-            </Grid.Col>
-            <Grid.Col span={6} style={{ paddingLeft: 10 }}>
-              <ButtonCustom
-                onPress={() => {
-                  openInDeviceMaps({
-                    latitude: selected.latitude,
-                    longitude: selected.longitude,
-                    title: selected.namePin,
-                  });
-                }}
-              >
-                Buka Maps
-              </ButtonCustom>
-            </Grid.Col>
-          </Grid>
-        </StackCustom>
-      </DrawerCustom>
     </>
   );
 }

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

@@ -1,79 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  AlertDefaultSystem,
+  BackButton,
   BaseBox,
-  Grid,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  NewWrapper,
   ScrollableCustom,
   StackCustom,
   TextCustom,
-  ViewWrapper,
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
+import { IconDot } from "@/components/_Icon/IconComponent";
-import { useState } from "react";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
-import { View } from "react-native";
+import NoDataText from "@/components/_ShareComponent/NoDataText";
-
+import { AccentColor, MainColor } from "@/constants/color-palet";
-const categories = [
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
-  { value: "all", label: "Semua" },
+import { useAuth } from "@/hooks/use-auth";
-  { value: "event", label: "Event" },
+import { useNotificationStore } from "@/hooks/use-notification-store";
-  { value: "job", label: "Job" },
+import { apiGetNotificationsById } from "@/service/api-notifications";
-  { value: "voting", label: "Voting" },
+import { listOfcategoriesAppNotification } from "@/types/type-notification-category";
-  { value: "donasi", label: "Donasi" },
+import { formatChatTime } from "@/utils/formatChatTime";
-  { value: "investasi", label: "Investasi" },
+import { Ionicons } from "@expo/vector-icons";
-  { value: "forum", label: "Forum" },
+import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router";
-  { value: "collaboration", label: "Collaboration" },
+import _ from "lodash";
-];
+import { useCallback, useState } from "react";
+import { RefreshControl, View } from "react-native";
 
 const selectedCategory = (value: string) => {
-  const category = categories.find((c) => c.value === value);
+  const category = listOfcategoriesAppNotification.find(
+    (c) => c.value === value
+  );
   return category?.label;
 };
 
+const fixPath = ({
+  deepLink,
+  categoryApp,
+}: {
+  deepLink: string;
+  categoryApp: string;
+}) => {
+  if (categoryApp === "OTHER") {
+    return deepLink;
+  }
+
+  const separator = deepLink.includes("?") ? "&" : "?";
+
+  const fixedPath = `${deepLink}${separator}from=notifications&category=${_.lowerCase(
+    categoryApp
+  )}`;
+
+  console.log("Fix Path", fixedPath);
+
+  return fixedPath;
+};
+
 const BoxNotification = ({
-  index,
+  data,
   activeCategory,
 }: {
-  index: number;
+  data: any;
   activeCategory: string | null;
 }) => {
+  // console.log("DATA NOTIFICATION", JSON.stringify(data, null, 2));
+  const { markAsRead } = useNotificationStore();
   return (
     <>
       <BaseBox
-        onPress={() =>
+        backgroundColor={data.isRead ? AccentColor.darkblue : AccentColor.blue}
-          console.log(
+        onPress={() => {
-            "Notification >",
+          // console.log(
-            selectedCategory(activeCategory as string)
+          //   "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 bold>
+          <TextCustom truncate={2} bold>
-            # {selectedCategory(activeCategory as string)}
+            {data.title}
           </TextCustom>
 
-          <View
+          <TextCustom truncate={2}>{data.pesan}</TextCustom>
-            style={{
-              borderBottomColor: MainColor.white_gray,
-              borderBottomWidth: 1,
-            }}
-          />
 
-          <TextCustom truncate={2}>
+          <TextCustom size="small" color="gray">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
+            {formatChatTime(data.createdAt)}
-            unde quidem voluptate quam culpa sequi molestias ipsa corrupti id,
-            soluta, nostrum adipisci similique, et illo asperiores deleniti eum
-            labore.
           </TextCustom>
-
-          <Grid>
-            <Grid.Col span={6}>
-              <TextCustom size="small" color="gray">
-                {index + 1} Agustus 2025
-              </TextCustom>
-            </Grid.Col>
-            <Grid.Col span={6} style={{ alignItems: "flex-end" }}>
-              <TextCustom size="small" color="gray">
-                Belum lihat
-              </TextCustom>
-            </Grid.Col>
-          </Grid>
         </StackCustom>
       </BaseBox>
     </>
@@ -81,31 +103,146 @@ const BoxNotification = ({
 };
 
 export default function Notifications() {
-  const [activeCategory, setActiveCategory] = useState<string | null>("all");
+  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.
   };
-  return (
+
-    <ViewWrapper
+  useFocusEffect(
-      headerComponent={
+    useCallback(() => {
-        <ScrollableCustom
+      fecthData();
-          data={categories.map((e, i) => ({
+    }, [activeCategory])
-            id: i,
+  );
-            label: e.label,
+
-            value: e.value,
+  const fecthData = async () => {
-          }))}
+    try {
-          onButtonPress={handlePress}
+      setLoading(true);
-          activeId={activeCategory as string}
+      const response = await apiGetNotificationsById({
-        />
+        id: user?.id as any,
+        category: activeCategory as any,
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      } else {
+        setListData([]);
       }
-    >
+    } catch (error) {
-      {Array.from({ length: 20 }).map((e, i) => (
+      console.log("Error Notification", error);
-        <View key={i}>
+    } finally {
-          <BoxNotification index={i} activeCategory={activeCategory as any} />
+      setLoading(false);
-        </View>
+    }
-      ))}
+  };
-    </ViewWrapper>
+
+  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>
+    </>
   );
 }

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

@@ -31,9 +31,9 @@ import {
 import pickImage from "@/utils/pickImage";
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { useLocalSearchParams } from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import { Avatar } from "react-native-paper";
@@ -76,7 +76,7 @@ export default function PortofolioCreate() {
   function handleInputValue(phoneNumber: string) {
     setInputValue(phoneNumber);
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
-    const fixNumber = inputValue.replace(/\s+/g, "");
+    let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
     const realNumber = callingCode + fixNumber;
     setData({ ...data, tlpn: realNumber });
   }
@@ -85,10 +85,12 @@ export default function PortofolioCreate() {
     setSelectedCountry(country);
   }
 
-  useEffect(() => {
+  useFocusEffect(
-    onLoadMaster();
+    useCallback(() => {
-    onLoadMasterSubBidangBisnis();
+      onLoadMaster();
-  }, []);
+      onLoadMasterSubBidangBisnis();
+    }, [])
+  );
 
   const onLoadMaster = async () => {
     try {

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

@@ -244,7 +244,7 @@ export default function PortofolioEdit() {
 
   const handleSubmitUpdate = async () => {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
-    const fixNumber = data.tlpn.replace(/\s+/g, "");
+    let fixNumber = data.tlpn.replace(/\s+/g, "").replace(/^0+/, "");
     const realNumber = callingCode + fixNumber;
 
     const newData: IFormData = {

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

@@ -0,0 +1,148 @@
+import {
+  AvatarUsernameAndOtherComponent,
+  BadgeCustom,
+  ClickableCustom,
+  Divider,
+  SelectCustom,
+  TextCustom,
+} from "@/components";
+import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
+import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
+import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import { usePaginatedApi } from "@/hooks/use-paginated-api";
+import { apiGetBlocked } from "@/service/api-client/api-blocked";
+import { apiMasterAppCategory } from "@/service/api-client/api-master";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+const PAGE_SIZE = 10;
+export default function ProfileBlockedList() {
+  const { user } = useAuth();
+  const [masterApp, setMasterApp] = useState<any[]>([]);
+  const isInitialMount = useRef(true);
+
+  const {
+    data: listData,
+    loading,
+    refreshing,
+    hasMore,
+    search,
+    setSearch,
+    onRefresh,
+    loadMore,
+  } = usePaginatedApi({
+    fetcher: async (params: { page: number; search?: string }) => {
+      const response = await apiGetBlocked({
+        id: user?.id as any,
+        search: search,
+        page: String(params.page) as any,
+      });
+
+      return response.data;
+    },
+    initialSearch: "",
+    pageSize: PAGE_SIZE,
+    dependencies: [user?.id],
+  });
+
+  useEffect(() => {
+    fetchMasterApp();
+  }, []);
+
+  // 🔁 Refresh otomatis saat kembali ke halaman ini
+  useFocusEffect(
+    useCallback(() => {
+      if (isInitialMount.current) {
+        // Skip saat pertama kali mount
+        isInitialMount.current = false;
+        return;
+      }
+      // Hanya refresh saat kembali dari screen lain
+      onRefresh();
+    }, [onRefresh])
+  );
+
+  const fetchMasterApp = async () => {
+    const response = await apiMasterAppCategory();
+    setMasterApp(response.data);
+  };
+
+  const renderHeader = () => (
+    <SelectCustom
+      placeholder="Pilih Kategori Fitur"
+      data={masterApp.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }))}
+      value={search === "" ? undefined : search}
+      onChange={(value) => {
+        setSearch(value as any);
+      }}
+    />
+  );
+
+  const renderItem = ({ item }: { item: any }) => (
+    <>
+      <ClickableCustom
+        onPress={() => {
+          router.push(`/profile/${item.id}/detail-blocked`);
+        }}
+      >
+        <View
+          style={{
+            paddingInline: 8,
+          }}
+        >
+          <AvatarUsernameAndOtherComponent
+            avatarHref={`/profile/${item?.blocked?.Profile?.id}`}
+            avatar={item?.blocked?.Profile?.imageId}
+            name={item?.blocked?.username}
+            rightComponent={
+              <View style={{ flexDirection: "row", gap: 4 }}>
+                <BadgeCustom>
+                  <TextCustom size={"small"} bold truncate>
+                    {item?.menuFeature?.name}
+                  </TextCustom>
+                </BadgeCustom>
+              </View>
+            }
+          />
+          <Divider color="gray" />
+        </View>
+      </ClickableCustom>
+    </>
+  );
+
+  return (
+    <>
+      <NewWrapper
+        // headerComponent={renderHeader()}
+        listData={listData}
+        renderItem={renderItem}
+        onEndReached={loadMore}
+        refreshControl={
+          <RefreshControl
+            progressBackgroundColor={MainColor.yellow}
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+          />
+        }
+        ListFooterComponent={
+          hasMore && !refreshing ? <ListLoaderFooterComponent /> : null
+        }
+        ListEmptyComponent={
+          !loading && _.isEmpty(listData) ? (
+            <ListSkeletonComponent />
+          ) : (
+            <ListEmptyComponent />
+          )
+        }
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,93 @@
+import {
+  AlertDefaultSystem,
+  AvatarUsernameAndOtherComponent,
+  BaseBox,
+  BoxButtonOnFooter,
+  BoxWithHeaderSection,
+  ButtonCustom,
+  NewWrapper,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import AvatarAndBackground from "@/screens/Profile/AvatarAndBackground";
+import {
+  apiGetBlockedById,
+  apiUnblock,
+} from "@/service/api-client/api-blocked";
+import { router, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useEffect, useState } from "react";
+
+export default function ProfileDetailBlocked() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    fetchData();
+  }, [id]);
+
+  const fetchData = async () => {
+    const response = await apiGetBlockedById({ id: String(id) });
+    // console.log("[RESPONSE >>]", JSON.stringify(response, null, 2));
+    setData(response.data);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      setIsLoading(true);
+      await apiUnblock({ id: String(id) });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR >>]", JSON.stringify(error, null, 2));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <NewWrapper
+        footerComponent={
+          <BoxButtonOnFooter>
+            <ButtonCustom
+              isLoading={isLoading}
+              onPress={() => {
+                AlertDefaultSystem({
+                  title: "Buka Blokir",
+                  message: "Apakah anda yakin ingin membuka blokir ini?",
+                  textLeft: "Tidak",
+                  textRight: "Ya",
+                  onPressRight: () => {
+                    handleSubmit();
+                  },
+                });
+              }}
+            >
+              Buka Blokir
+            </ButtonCustom>
+          </BoxButtonOnFooter>
+        }
+      >
+        <BoxWithHeaderSection>
+          <StackCustom>
+            <AvatarUsernameAndOtherComponent
+              avatarHref={`/profile/${data?.blocked?.Profile?.id}`}
+              avatar={data?.blocked?.Profile?.imageId}
+              name={data?.blocked?.username}
+            />
+
+            <TextCustom align="center">
+              Jika anda membuka blokir ini maka semua postingan terkait user ini
+              akan muncul kembali di beranda
+              <TextCustom bold color="red">
+                {" "}
+                {_.upperCase(data?.menuFeature?.name)}
+              </TextCustom>
+            </TextCustom>
+          </StackCustom>
+        </BoxWithHeaderSection>
+      </NewWrapper>
+    </>
+  );
+}