.easignore

@@ -39,5 +39,7 @@ app-example
 
 x.ts
 x.sh
-/android
-/ios
+
+.env
+
+android/

.gitignore

@@ -32,6 +32,9 @@ yarn-error.*
 # local env files
 .env*.local
 
+#env
+.env
+
 # typescript
 *.tsbuildinfo
 
@@ -41,4 +44,5 @@ x.ts
 x.sh
 
 google-services.json
-mobile-darmasaba-firebase-adminsdk-fbsvc-f5abb292b5.json
+service-account.json
+

CLAUDE.md

@@ -0,0 +1,37 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+**Desa+** is a React Native (Expo) mobile app for village administration — managing announcements, projects, discussions, members, divisions, and documents. Primary platforms are Android and iOS.
+
+## Commands
+
+```bash
+npm run start           # Start Expo dev server
+npm run android         # Run on Android
+npm run ios             # Run on iOS
+npm run lint            # Expo lint
+npm run test            # Jest tests
+npm run build:android   # Production Android build via EAS (bumps version first)
+```
+
+Run a single test file:
+```bash
+bunx jest path/to/test.tsx --no-coverage
+```
+
+> Project uses **Bun** as the package manager (`bun.lock` present). Use `bun add` / `bunx` instead of `npm install` / `npx`.
+
+## Architecture
+
+See @docs/ARCHITECTURE.md
+
+## Key Conventions
+
+See @docs/CONVENTIONS.md
+
+## File Health
+
+See @docs/FILE-HEALTH.md

GEMINI.md

@@ -0,0 +1,86 @@
+# Project Overview: Desa+
+
+Desa+ is a mobile application built with React Native and Expo, designed to facilitate management and communication within villages/communities. It aims to streamline village administration, inter-community communication, and the management of essential information.
+
+## Key Features:
+- Village announcements and information
+- Community discussion forum
+- Village activity calendar
+- Village documentation and archives
+- Project and task management
+- Member and organizational structure management
+- Push notifications for important updates
+- Verification and authentication features
+
+## Technologies Used:
+- **React Native**: Cross-platform mobile development framework.
+- **Expo**: Platform for React Native application development.
+- **Firebase**: Backend services including Authentication, Realtime Database, and Cloud Messaging.
+- **Redux Toolkit**: State management.
+- **React Navigation**: Application navigation.
+- **TypeScript**: For type safety.
+
+## Building and Running:
+
+### Installation
+1.  **Clone the repository:**
+    ```bash
+    git clone <repository-url>
+    cd mobile-darmasaba
+    ```
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+3.  **Configure environment variables:**
+    Create a `.env` file in the root directory and add the following variables:
+    ```
+    URL_API=<api-endpoint>
+    URL_OTP=<otp-service-endpoint>
+    URL_STORAGE=<storage-endpoint>
+    URL_FIREBASE_DB=<firebase-database-url>
+    PASS_ENC=<encryption-password>
+    WA_SERVER_TOKEN=<whatsapp-server-token>
+    IOS_GOOGLE_SERVICES_FILE=<path-to-ios-google-services>
+    ```
+
+### Running the Application
+-   **Start development server:**
+    ```bash
+    npx expo start
+    ```
+-   **Run on Android emulator/device:**
+    ```bash
+    npm run android
+    ```
+-   **Run on iOS simulator/device:**
+    ```bash
+    npm run ios
+    ```
+
+### Build Production
+-   **Build Android production package:**
+    ```bash
+    npm run build:android
+    ```
+
+## Development Conventions:
+
+### Project Structure:
+-   `app/`: Main page files.
+-   `components/`: Reusable UI components, categorized by feature (e.g., `announcement/`, `auth/`, `discussion/`).
+-   `assets/`: Images and static assets.
+-   `constants/`: Global constants.
+-   `lib/`: Libraries and utilities.
+
+### Contribution Guidelines:
+1.  Fork the repository.
+2.  Create a new feature branch (`git checkout -b feature/FeatureName`).
+3.  Commit your changes (`git commit -m 'Add FeatureName feature'`).
+4.  Push to the branch (`git push origin feature/FeatureName`).
+5.  Create a pull request.
+
+## Platform Support:
+-   ✅ Android
+-   ✅ iOS
+-   ❌ Web (not yet optimized)

Panduan-Penggunaan-Aplikasi.md

@@ -0,0 +1,249 @@
+# Panduan Aplikasi Desa+
+
+## Daftar Isi
+
+1. [Gambaran Umum Aplikasi](#gambaran-umum-aplikasi)
+2. [User Roles dan Hak Akses](#user-roles-dan-hak-akses)
+3. [Fitur-fitur Aplikasi](#fitur-fitur-aplikasi)
+4. [Troubleshooting](#troubleshooting)
+
+## Gambaran Umum Aplikasi
+
+Aplikasi Desa+ adalah platform digital berbasis mobile yang dirancang untuk khusus untuk pegawai desa dalam mengelola data dan memantau progres kegiatan internal. Aplikasi ini menyediakan berbagai fitur seperti pengelolaan data per divisi, pemantauan kegiatan umum, forum diskusi, pengumuman, hingga manajemen folder dokumen, aplikasi ini membantu meningkatkan efisiensi kerja, koordinasi, serta transparansi di lingkungan desa.
+
+### Teknologi yang Digunakan
+
+- React Native dengan Expo
+- Firebase (Authentication, Realtime Database, Cloud Messaging)
+- Redux Toolkit untuk manajemen state
+- TypeScript untuk type safety
+
+## User Roles dan Hak Akses
+
+Aplikasi Desa+ memiliki sistem hierarki peran pengguna sebagai berikut:
+
+### 1. Super Admin
+
+- **Hak akses:**
+  - Semua fitur dan fungsi dalam aplikasi
+  - Manajemen pengguna dengan role Wakil Super Admin, Admin, Wakil Admin, dan User
+  - Akses ke semua data dan fungsi administratif
+
+### 2. Wakil Super Admin
+
+- **Hak akses:**
+  - Manajemen pengguna dengan role Admin, Wakil Admin, dan User
+  - Akses ke sebagian besar fitur administratif
+  - Dapat mengelola banner
+
+### 3. Admin
+
+- **Hak akses:**
+  - Manajemen pengguna dengan role Wakil Admin dan User
+  - Akses ke fitur-fitur administratif dasar
+  - Tidak dapat mengelola Wakil Super Admin dan Super Admin
+
+### 4. Wakil Admin
+
+- **Hak akses:**
+  - Manajemen pengguna dengan role User
+  - Akses terbatas ke fitur-fitur administratif
+  - Tidak dapat mengelola Admin ke atas
+
+### 5. User
+
+- **Hak akses:**
+  - Akses ke fitur-fitur umum
+  - Tidak dapat mengelola pengguna lain
+  - Tidak dapat mengakses fungsi administratif (kecuali dalam divisi dimana pengguna tersebut adalah anggota)
+
+## Fitur-fitur Aplikasi
+
+### 1. Otentikasi (Login & Verifikasi)
+
+**Deskripsi:** Sistem login menggunakan nomor telepon dan verifikasi OTP (One Time Password)
+
+- **Fungsi:** Memverifikasi identitas pengguna sebelum mengakses aplikasi
+- **Siapa yang bisa mengakses:** Semua pengguna yang terdaftar
+
+### 2. Dashboard/Home Screen
+
+**Deskripsi:** Tampilan utama aplikasi yang menampilkan informasi dan akses cepat ke berbagai fitur
+
+- **Fungsi:** Menyediakan ringkasan informasi desa dan akses cepat ke fitur-fitur utama
+- **Siapa yang bisa mengakses:** Semua pengguna yang telah login
+- **Komponen:**
+  - Carousel banner untuk promosi atau informasi penting
+  - Fitur untuk mengakses semua fitur aplikasi
+  - Grafik progres kegiatan
+  - Grafik jumlah dokumen
+  - Daftar kegiatan terupdate
+  - Daftar divisi aktif
+  - Daftar acara mendatang
+  - Diskusi terbaru
+
+### 3. Pencarian
+
+**Deskripsi:** Fitur untuk mencari anggota, kegiatan dan divisi
+
+- **Fungsi:** Mencari anggota, kegiatan dan divisi
+- **Siapa yang bisa mengakses:** Semua pengguna
+
+### 4. Notifikasi
+
+**Deskripsi:** Sistem notifikasi untuk memberitahu pengguna tentang aktivitas penting
+
+- **Fungsi:** Memberitahu pengguna tentang pengumuman, komentar, atau aktivitas lainnya
+- **Siapa yang bisa mengakses:** Semua pengguna
+
+### 5. Profil
+
+**Deskripsi:** Fitur untuk melihat dan mengedit informasi pribadi pengguna
+
+- **Fungsi:** Menampilkan dan mengelola informasi akun pengguna
+- **Siapa yang bisa mengakses:** Pengguna yang bersangkutan
+
+### 6. Banner
+
+**Deskripsi:** Fitur untuk mengelola banner promosi atau informasi penting di halaman utama
+
+- **Fungsi:** Menampilkan informasi atau promosi penting di tampilan awal
+- **Siapa yang bisa mengakses:** Super Admin, Wakil Super Admin
+
+### 7. Lembaga Desa
+
+**Deskripsi:** Fitur untuk mengelola berbagai lembaga dalam desa
+
+- **Fungsi:** Mengorganisir struktur organisasi desa berdasarkan lembaga
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin
+  - Melihat: Super Admin
+
+### 8. Jabatan
+
+**Deskripsi:** Fitur untuk mengelola posisi atau jabatan
+
+- **Fungsi:** Mengelola data jabatan
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin, Wakil Admin
+  - Melihat: Semua pengguna
+
+### 9. Anggota
+
+**Deskripsi:** Fitur untuk mengelola data pengguna
+
+- **Fungsi:** Menyimpan dan mengelola informasi tentang pengguna
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin, Wakil Admin
+  - Melihat: Semua pengguna
+
+### 10. Diskusi Umum
+
+**Deskripsi:** Forum diskusi untuk komunikasi anggota terpilih
+
+- **Fungsi:** Tempat berdiskusi mengenai berbagai topik yang berkaitan dengan desa
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin
+  - Melihat: Semua pengguna
+  - Berkomentar: Pengguna terpilih
+
+### 11. Kegiatan/Proyek
+
+**Deskripsi:** Fitur untuk mengelola dan melacak proyek atau kegiatan desa
+
+- **Fungsi:** Mengelola dan memonitor kemajuan proyek-proyek desa
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus/Membatalkan/Mengelola anggota: Super Admin, Wakil Super Admin, Admin
+  - Mengelola detail (file, task, link, laporan) : Super Admin, Wakil Super Admin, Admin, Anggota dari kegiatan
+  - Melihat: Semua pengguna
+- **Status Kegiatan:**
+  - Segera: Proyek yang akan segera dimulai
+  - Dikerjakan: Proyek yang sedang dalam proses pengerjaan
+  - Selesai: Proyek yang telah selesai
+  - Batal: Proyek yang dibatalkan
+
+### 12. Pengumuman
+
+**Deskripsi:** Fitur untuk membuat, melihat, dan mengelola pengumuman desa
+
+- **Fungsi:** Menyebarkan informasi penting kepada anggota divisi terpilih
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin
+  - Melihat:
+    - Super admin: Semua pengumuman
+    - Wakil super admin & admin : Pengumuman sesuai lembaga desa
+    - Lainnya: Pengumuman yang ditujukan ke divisi mereka
+
+### 13. Divisi
+
+**Deskripsi:** Fitur untuk mengelola data desa berdasarkan divisi
+
+- **Fungsi:** Mengorganisir tugas-tugas berdasarkan divisi-divisi tertentu
+- **Catatan:** Anggota divisi (role : Wakil Admin dan User) yg diangkat menjadi "Admin Divisi", mendapat akses khusus untuk mengelola divisi tersebut
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin
+  - Edit Divisi / Non aktifkan Divisi tertentu / Mengelola Anggota divisi tertentu : Super Admin, Wakil Super Admin, Admin, Admin Divisi
+  - Laporan semua divisi : Super Admin, Wakil Super Admin
+  - Laporan divisi tertentu : semua pengguna
+  - Melihat: Semua pengguna
+
+### 14. Diskusi Divisi
+
+**Deskripsi:** Forum diskusi khusus untuk masing-masing divisi
+
+- **Fungsi:** Tempat berdiskusi secara internal dalam divisi
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin, Admin Divisi
+  - Memberi komentar : Super Admin, Wakil Super Admin, Admin, Anggota divisi
+  - Melihat: Semua pengguna
+
+### 15. Tugas Divisi
+
+**Deskripsi:** Fitur untuk mengelola tugas-tugas dalam masing-masing divisi
+
+- **Fungsi:** Menetapkan dan melacak tugas-tugas yang harus diselesaikan oleh anggota divisi
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin, Admin Divisi
+  - Mengelola detail (file, task, link, laporan) : Super Admin, Wakil Super Admin, Admin, Anggota divisi
+  - Melihat: Semua pengguna
+
+### 16. Dokumen Divisi
+
+**Deskripsi:** Sistem manajemen dokumen untuk menyimpan dan mengelola file-file disetiap divisi
+
+- **Fungsi:** Menyimpan dokumen penting dalam struktur folder disetiap divisi
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin, Anggota divisi
+  - Melihat: Semua pengguna
+
+### 17. Kalender/Acara Divisi
+
+**Deskripsi:** Fitur untuk menjadwalkan dan mengelola acara-acara desa disetiap divisi
+
+- **Fungsi:** Menjadwalkan kegiatan dan acara penting desa disetiap divisi
+- **Siapa yang bisa mengakses:**
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin, Anggota divisi
+  - Melihat: Semua pengguna
+  - Riwayat: Semua pengguna
+
+## Troubleshooting
+
+### Masalah Login
+
+- Pastikan nomor telepon yang dimasukkan sudah benar dan terdaftar
+- Pastikan koneksi internet stabil saat menerima OTP
+- Jika tidak menerima OTP, coba kirim ulang setelah beberapa menit
+
+### Tidak Bisa Mengakses Fitur Tertentu
+
+- Pastikan peran Anda memiliki hak akses ke fitur tersebut
+- Beberapa fitur hanya tersedia untuk peran tertentu (misalnya Admin ke atas)
+
+### Lupa Password
+
+- Aplikasi ini menggunakan sistem login OTP, jadi tidak ada password yang disimpan
+- Cukup gunakan nomor telepon dan minta OTP kembali
+
+## Dukungan dan Bantuan
+
+Jika Anda mengalami masalah atau memiliki pertanyaan tentang penggunaan aplikasi, silakan hubungi tim pengembang aplikasi.

QWEN.md

@@ -0,0 +1,153 @@
+# Desa+ Mobile Application - Project Overview
+
+## Project Summary
+Desa+ is a comprehensive village/desa management mobile application built with React Native and Expo. The application serves as a digital platform for village administration, community communication, and information management. It provides various features to facilitate village governance, resident communication, and administrative tasks.
+
+## Architecture & Technology Stack
+- **Framework**: React Native with Expo (SDK 53)
+- **State Management**: Redux Toolkit with React-Redux
+- **Navigation**: Expo Router with React Navigation
+- **Backend Services**: Firebase (Authentication, Realtime Database, Cloud Messaging)
+- **UI Components**: Custom-built components with React Native elements
+- **Language**: TypeScript for type safety
+- **Build System**: EAS (Expo Application Service) for builds and deployments
+
+## Key Features
+- Announcement and village information system
+- Community discussion forums
+- Village event calendar
+- Document management and archiving
+- Project and task management
+- Member and organizational structure management
+- Push notifications for important updates
+- Verification and authentication features
+
+## Project Structure
+```
+├── app/                    # Application routes and pages (Expo Router)
+│   ├── (application)/     # Main application screens
+│   │   ├── announcement/
+│   │   ├── banner/
+│   │   ├── discussion/
+│   │   ├── division/
+│   │   ├── group/
+│   │   ├── member/
+│   │   ├── position/
+│   │   ├── project/
+│   │   ├── _layout.tsx
+│   │   ├── edit-profile.tsx
+│   │   ├── feature.tsx
+│   │   ├── home.tsx
+│   │   ├── notification.tsx
+│   │   ├── profile.tsx
+│   │   └── search.tsx
+│   ├── _layout.tsx        # Root layout
+│   ├── index.tsx          # Splash/login screen
+│   ├── verification.tsx   # OTP verification screen
+├── components/            # Reusable UI components
+│   ├── announcement/
+│   ├── auth/
+│   ├── banner/
+│   ├── calendar/
+│   ├── discussion/
+│   ├── division/
+│   ├── document/
+│   ├── group/
+│   ├── home/
+│   ├── member/
+│   ├── position/
+│   ├── project/
+│   ├── task/
+│   ├── alertKonfirmasi.ts
+│   ├── AppHeader.tsx
+│   ├── Text.tsx
+│   └── ... (many more components)
+├── constants/             # Constants and styles
+│   ├── Colors.ts
+│   ├── ColorsStatus.ts
+│   ├── ConstEnv.ts
+│   ├── Headers.ts
+│   ├── RoleUser.ts
+│   ├── Styles.ts
+│   └── ... (other constants)
+├── assets/                # Static assets (images, fonts)
+├── lib/                   # Business logic and API utilities
+├── providers/             # Context providers (AuthProvider)
+├── android/               # Android native code
+├── ios/                   # iOS native code
+├── scripts/               # Build and utility scripts
+├── index.js               # Entry point
+├── app.config.js          # Expo configuration
+├── package.json           # Dependencies and scripts
+└── eas.json               # EAS build configuration
+```
+
+## Environment Configuration
+The application uses environment variables defined in a `.env` file:
+- `URL_API` - API endpoint
+- `URL_OTP` - OTP service endpoint
+- `URL_STORAGE` - Storage endpoint
+- `URL_FIREBASE_DB` - Firebase database URL
+- `PASS_ENC` - Encryption password
+- `WA_SERVER_TOKEN` - WhatsApp server token
+- `IOS_GOOGLE_SERVICES_FILE` - Path to iOS Google services file
+
+## Building and Running
+
+### Development
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Run the development server:
+   ```bash
+   npx expo start
+   ```
+
+3. For platform-specific builds:
+   - Android: `npm run android`
+   - iOS: `npm run ios`
+   - Web: `npm run web`
+
+### Production Builds
+- Android: `npm run build:android` (uses EAS to build an app bundle)
+
+### Testing
+- Run tests: `npm run test`
+
+### Linting
+- Check code quality: `npm run lint`
+
+## Key Dependencies
+- `@react-native-firebase/*` - Firebase integration
+- `@react-navigation/*` - Navigation solutions
+- `@reduxjs/toolkit` - State management
+- `expo-router` - File-based routing
+- `react-native-gesture-handler` - Touch gesture support
+- `react-native-reanimated` - Advanced animations
+- `react-native-svg` - SVG rendering support
+
+## Development Conventions
+- Uses TypeScript for type safety
+- Implements custom styling through the Styles.ts constant file
+- Follows Expo's file-based routing convention
+- Uses Redux Toolkit for centralized state management
+- Implements custom components in the components directory
+- Uses absolute imports with @/ alias (e.g., "@/components/...")
+- Implements Firebase for authentication and real-time data
+
+## Deployment
+- Uses EAS for building and submitting to app stores
+- Supports both Android (APK and App Bundle) and iOS (TestFlight/App Store)
+- Configured for internal testing, preview, and production distributions
+
+## Special Features
+- Background message handling for push notifications
+- Biometric authentication support
+- Image picking and media library access
+- Document picker functionality
+- Date/time pickers with localization
+- Custom toast notifications
+- Carousel components for featured content
+- Data visualization with charts

README.md

@@ -1,50 +1,114 @@
-# Welcome to your Expo app 👋
+# Desa+
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+Desa+ (Desa Plus) adalah aplikasi mobile berbasis React Native yang dikembangkan dengan Expo untuk membantu pengelolaan dan komunikasi di lingkungan desa/kelurahan. Aplikasi ini menyediakan berbagai fitur untuk memudahkan administrasi desa, komunikasi antar warga, dan pengelolaan informasi penting.
 
-## Get started
+## Fitur Utama
 
-1. Install dependencies
+- 📢 Pengumuman dan informasi desa
+- 💬 Forum diskusi komunitas
+- 📅 Kalender kegiatan desa
+- 📄 Dokumentasi dan arsip desa
+- 📊 Pengelolaan proyek dan tugas desa
+- 👥 Manajemen anggota dan struktur organisasi
+- 📱 Notifikasi push untuk informasi penting
+- 🎯 Fitur verifikasi dan otentikasi
 
+## Teknologi yang Digunakan
+
+- [React Native](https://reactnative.dev/) - Framework mobile cross-platform
+- [Expo](https://expo.dev/) - Platform pengembangan aplikasi React Native
+- [Firebase](https://firebase.google.com/) - Backend services (Authentication, Realtime Database, Cloud Messaging)
+- [Redux Toolkit](https://redux-toolkit.js.org/) - State management
+- [React Navigation](https://reactnavigation.org/) - Navigasi aplikasi
+- [TypeScript](https://www.typescriptlang.org/) - Type safety
+
+## Instalasi
+
+1. Clone repository ini
+   ```bash
+   git clone <repository-url>
+   cd mobile-darmasaba
+   ```
+
+2. Install dependencies
    ```bash
    npm install
    ```
 
-2. Start the app
-
-   ```bash
-    npx expo start
+3. Konfigurasi environment variables
+   Buat file `.env` di root direktori dan tambahkan variabel berikut:
+   ```
+   URL_API=<api-endpoint>
+   URL_OTP=<otp-service-endpoint>
+   URL_STORAGE=<storage-endpoint>
+   URL_FIREBASE_DB=<firebase-database-url>
+   PASS_ENC=<encryption-password>
+   WA_SERVER_TOKEN=<whatsapp-server-token>
+   IOS_GOOGLE_SERVICES_FILE=<path-to-ios-google-services>
    ```
 
-In the output, you'll find options to open the app in a
+4. Jalankan aplikasi
+   ```bash
+   npx expo start
+   ```
 
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+## Struktur Proyek
 
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
-
-When you're ready, run:
-
-```bash
-npm run reset-project
+```
+├── app/                    # File-file halaman utama
+├── components/            # Komponen reusable
+│   ├── announcement/      # Komponen pengumuman
+│   ├── auth/             # Komponen otentikasi
+│   ├── discussion/       # Komponen forum diskusi
+│   ├── document/         # Komponen dokumentasi
+│   ├── project/          # Komponen pengelolaan proyek
+│   └── ...
+├── assets/               # Gambar dan aset statis
+├── constants/            # Konstanta global
+├── lib/                  # Library dan utilitas
+└── ...
 ```
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+## Platform Support
 
-## Learn more
+Aplikasi ini didukung untuk:
+- ✅ Android
+- ✅ iOS
+- ❌ Web (belum dioptimalkan)
 
-To learn more about developing your project with Expo, look at the following resources:
+## Development
 
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+Untuk menjalankan aplikasi di masing-masing platform:
 
-## Join the community
+### Android
+```bash
+npm run android
+```
 
-Join our community of developers creating universal apps.
+### iOS
+```bash
+npm run ios
+```
 
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+### Build Production
+
+Untuk membuat build production Android:
+```bash
+npm run build:android
+```
+
+## Kontribusi
+
+1. Fork repository ini
+2. Buat branch fitur baru (`git checkout -b fitur/NamaFitur`)
+3. Commit perubahan Anda (`git commit -m 'Tambahkan fitur NamaFitur'`)
+4. Push ke branch (`git push origin fitur/NamaFitur`)
+5. Buat pull request
+
+## Lisensi
+
+Proyek ini dilisensikan di bawah lisensi MIT - lihat file [LICENSE](LICENSE) untuk detail selengkapnya.
+
+## Dukungan
+
+Jika Anda menemukan masalah atau memiliki pertanyaan, silakan buka issue di repository ini.

__tests__/ErrorBoundary-test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import ErrorBoundary from '@/components/ErrorBoundary';
+
+// Komponen yang sengaja throw error saat render
+const BrokenComponent = () => {
+  throw new Error('Test error boundary!');
+};
+
+// Komponen normal
+const NormalComponent = () => <></>;
+
+// Suppress React's error boundary console output selama test
+
+beforeEach(() => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  (console.error as jest.Mock).mockRestore();
+});
+
+describe('ErrorBoundary', () => {
+  it('merender children dengan normal jika tidak ada error', () => {
+    // Tidak boleh throw dan tidak menampilkan teks error
+    const { queryByText } = render(
+      <ErrorBoundary>
+        <NormalComponent />
+      </ErrorBoundary>
+    );
+    expect(queryByText('Terjadi Kesalahan')).toBeNull();
+  });
+
+  it('menampilkan UI fallback ketika child throw error', () => {
+    const { getByText } = render(
+      <ErrorBoundary>
+        <BrokenComponent />
+      </ErrorBoundary>
+    );
+    expect(getByText('Terjadi Kesalahan')).toBeTruthy();
+  });
+
+  it('menampilkan pesan error yang dilempar', () => {
+    const { getByText } = render(
+      <ErrorBoundary>
+        <BrokenComponent />
+      </ErrorBoundary>
+    );
+    expect(getByText('Test error boundary!')).toBeTruthy();
+  });
+
+  it('merender custom fallback jika prop fallback diberikan', () => {
+    const { getByText } = render(
+      <ErrorBoundary fallback={<></>}>
+        <BrokenComponent />
+      </ErrorBoundary>
+    );
+    // Custom fallback fragment kosong — pastikan teks default tidak muncul
+    expect(() => getByText('Terjadi Kesalahan')).toThrow();
+  });
+
+  it('mereset error state saat tombol Coba Lagi ditekan', () => {
+    const { getByText } = render(
+      <ErrorBoundary>
+        <BrokenComponent />
+      </ErrorBoundary>
+    );
+
+    const button = getByText('Coba Lagi');
+    expect(button).toBeTruthy();
+
+    // Tekan tombol reset — hasError kembali false, BrokenComponent throw lagi
+    // sehingga fallback muncul kembali (membuktikan reset berjalan)
+    fireEvent.press(button);
+    expect(getByText('Terjadi Kesalahan')).toBeTruthy();
+  });
+});

android/app/build.gradle

@@ -92,8 +92,8 @@ android {
         applicationId 'mobiledarmasaba.app'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0.0"
+        versionCode 21
+        versionName "2.2.0"
     }
     signingConfigs {
         debug {

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,9 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
+  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" tools:node="remove"/>
+  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" tools:node="remove"/>
   <uses-permission android:name="android.permission.RECORD_AUDIO"/>
   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
   <uses-permission android:name="android.permission.VIBRATE"/>

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

@@ -1,5 +1,5 @@
 <resources>
-  <string name="app_name">mobile-darmasaba</string>
+  <string name="app_name">Desa+</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/values/styles.xml

@@ -1,9 +1,9 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
   <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
   </style>
   <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
     <item name="windowSplashScreenBackground">@color/splashscreen_background</item>

android/settings.gradle

@@ -31,7 +31,7 @@ extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
 }
 expoAutolinking.useExpoModules()
 
-rootProject.name = 'mobile-darmasaba'
+rootProject.name = 'Desa+'
 
 expoAutolinking.useExpoVersionCatalog()
 

app.config.js

@@ -0,0 +1,91 @@
+import 'dotenv/config';
+
+export default {
+   expo: {
+      name: "Desa+",
+      slug: "mobile-darmasaba",
+      version: "2.2.0", // Versi aplikasi (App Store)
+      jsEngine: "jsc",
+      orientation: "portrait",
+      icon: "./assets/images/logo-icon-small.png",
+      scheme: "myapp",
+      userInterfaceStyle: "automatic",
+      newArchEnabled: false,
+      ios: {
+         supportsTablet: true,
+         bundleIdentifier: "mobiledarmasaba.app",
+         buildNumber: "10",
+         infoPlist: {
+            ITSAppUsesNonExemptEncryption: false,
+            CFBundleDisplayName: "Desa+"
+         },
+         googleServicesFile: process.env.IOS_GOOGLE_SERVICES_FILE
+      },
+      android: {
+         package: "mobiledarmasaba.app",
+         versionCode: 21,
+         adaptiveIcon: {
+            foregroundImage: "./assets/images/logo-icon-small.png",
+            backgroundColor: "#ffffff"
+         },
+         googleServicesFile: "./google-services.json",
+         permissions: [
+            "READ_EXTERNAL_STORAGE",
+            "WRITE_EXTERNAL_STORAGE",
+            "READ_MEDIA_AUDIO"
+         ]
+      },
+      web: {
+         bundler: "metro",
+         output: "static",
+         favicon: "./assets/images/favicon.png"
+      },
+      plugins: [
+         "expo-router",
+         [
+            "expo-splash-screen",
+            {
+               image: "./assets/images/logo-icon-small.png",
+               imageWidth: 200,
+               resizeMode: "contain",
+               backgroundColor: "#ffffff"
+            }
+         ],
+         "expo-font",
+         "expo-image-picker",
+         "expo-web-browser",
+         "./plugins/withRemoveMediaPermissions",
+         [
+            "@react-native-firebase/app",
+            {
+               ios: {
+                  googleServicesFile: process.env.IOS_GOOGLE_SERVICES_FILE
+               }
+            }
+         ]
+      ],
+      experiments: {
+         typedRoutes: true
+      },
+      extra: {
+         router: {},
+         eas: {
+            projectId: "cfe34fb8-da8c-4004-b5c6-29d07df75cf2"
+         },
+         URL_API: process.env.URL_API,
+         URL_OTP: process.env.URL_OTP,
+         URL_STORAGE: process.env.URL_STORAGE,
+         URL_FIREBASE_DB: process.env.URL_FIREBASE_DB,
+         PASS_ENC: process.env.PASS_ENC,
+         WA_SERVER_TOKEN: process.env.WA_SERVER_TOKEN,
+         FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
+         FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
+         FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
+         FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
+         FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
+         FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
+         URL_MONITORING: process.env.URL_MONITORING,
+         KEY_API_MONITORING: process.env.KEY_API_MONITORING,
+      }
+   }
+};

app/(application)/_layout.tsx

@@ -1,5 +1,6 @@
 import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
+import Styles from "@/constants/Styles";
 import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
 import HeaderRightDivisionList from "@/components/division/headerDivisionList";
 import HeaderRightGroupList from "@/components/group/headerGroupList";
@@ -8,25 +9,107 @@ import HeaderRightPositionList from "@/components/position/headerRightPositionLi
 import HeaderRightProjectList from "@/components/project/headerProjectList";
 import Text from "@/components/Text";
 import ToastCustom from "@/components/toastCustom";
-import { Headers } from "@/constants/Headers";
-import { apiReadOneNotification } from "@/lib/api";
+import ModalUpdateMaintenance from "@/components/ModalUpdateMaintenance";
+import { apiGetVersion, apiReadOneNotification } from "@/lib/api";
 import { pushToPage } from "@/lib/pushToPage";
 import store from "@/lib/store";
 import { useAuthSession } from "@/providers/AuthProvider";
-import firebase from '@react-native-firebase/app';
-import { Redirect, router, Stack } from "expo-router";
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from "react";
-import { Easing, Notifier } from 'react-native-notifier';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import Constants from "expo-constants";
+import { getApp } from "@react-native-firebase/app";
+import { getMessaging, onMessage } from "@react-native-firebase/messaging";
+import { Redirect, router, Stack, usePathname } from "expo-router";
+import { StatusBar } from 'expo-status-bar'; 
+import { useEffect, useState } from "react";
+import { Easing, Notifier, NotifierComponents } from 'react-native-notifier';
 import { Provider } from "react-redux";
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function RootLayout() {
    const { token, decryptToken, isLoading } = useAuthSession()
+   const pathname = usePathname()
+   const { colors } = useTheme()
+   const [modalUpdateMaintenance, setModalUpdateMaintenance] = useState(false)
+   const [modalType, setModalType] = useState<'update' | 'maintenance'>('update')
+   const [isForceUpdate, setIsForceUpdate] = useState(false)
+   const [updateMessage, setUpdateMessage] = useState('')
 
-   async function handleReadNotification(id: string, category: string, idContent: string) {
+   const currentVersion = Constants.expoConfig?.version ?? '0.0.0'
+
+   const compareVersions = (v1: string, v2: string) => {
+      const parts1 = v1.split('.').map(Number);
+      const parts2 = v2.split('.').map(Number);
+      for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+         const p1 = parts1[i] || 0;
+         const p2 = parts2[i] || 0;
+         if (p1 < p2) return -1;
+         if (p1 > p2) return 1;
+      }
+      return 0;
+   };
+
+   useEffect(() => {
+      const checkVersion = async () => {
+         try {
+            const response = await apiGetVersion();
+            if (response.success && response.data) {
+               const maintenance = response.data.find((item: any) => item.id === 'mobile_maintenance')?.value === 'true';
+               const latestVersion = response.data.find((item: any) => item.id === 'mobile_latest_version')?.value || '0.0.0';
+               const minVersion = response.data.find((item: any) => item.id === 'mobile_minimum_version')?.value || '0.0.0';
+               const message = response.data.find((item: any) => item.id === 'mobile_message_update')?.value || '';
+
+               if (maintenance) {
+                  setModalType('maintenance');
+                  setModalUpdateMaintenance(true);
+                  setIsForceUpdate(true);
+                  return;
+               }
+
+               if (compareVersions(currentVersion, minVersion) === -1) {
+                  setModalType('update');
+                  setIsForceUpdate(true);
+                  setUpdateMessage(message);
+                  setModalUpdateMaintenance(true);
+               } else if (compareVersions(currentVersion, latestVersion) === -1) {
+                  // Check if this soft update version was already dismissed
+                  const dismissedVersion = await AsyncStorage.getItem('dismissed_update_version');
+                  if (dismissedVersion !== latestVersion) {
+                     setModalType('update');
+                     setIsForceUpdate(false);
+                     setUpdateMessage(message);
+                     setModalUpdateMaintenance(true);
+                  }
+               }
+            }
+         } catch (error) {
+            console.error('Failed to check version:', error);
+         }
+      };
+
+      checkVersion();
+   }, [currentVersion]);
+
+   const handleDismissUpdate = async () => {
+      if (!isForceUpdate) {
+         try {
+            const response = await apiGetVersion();
+            const latestVersion = response.data.find((item: any) => item.id === 'mobile_latest_version')?.value;
+            if (latestVersion) {
+               await AsyncStorage.setItem('dismissed_update_version', latestVersion);
+            }
+         } catch (e) {
+            console.error(e);
+         }
+         setModalUpdateMaintenance(false);
+      }
+   }
+
+   async function handleReadNotification(id: string, category: string, idContent: string, title: string) {
       try {
-         const hasil = await decryptToken(String(token?.current))
-         const response = await apiReadOneNotification({ user: hasil, id: id })
+         if (title !== "Komentar Baru") {
+            const hasil = await decryptToken(String(token?.current))
+            await apiReadOneNotification({ user: hasil, id: id })
+         }
          pushToPage(category, idContent)
       } catch (error) {
          console.error(error)
@@ -34,25 +117,68 @@ export default function RootLayout() {
    }
 
    useEffect(() => {
-      const unsubscribe = firebase.app().messaging().onMessage(async remoteMessage => {
+      const checkNavigation = async () => {
+         const navData = await AsyncStorage.getItem('navigateOnOpen');
+         if (navData) {
+            const { screen, content } = JSON.parse(navData);
+            await AsyncStorage.removeItem('navigateOnOpen'); // reset
+            pushToPage(screen, content)
+         }
+      };
+
+      checkNavigation();
+   }, []);
+
+   useEffect(() => {
+      const mess = getMessaging(getApp());
+
+      const unsubscribe = onMessage(mess, async remoteMessage => {
          const id = remoteMessage?.data?.id;
          const category = remoteMessage?.data?.category;
          const content = remoteMessage?.data?.content;
-         if (remoteMessage.notification != undefined && remoteMessage.notification.title != undefined && remoteMessage.notification.body != undefined) {
-            Notifier.showNotification({
-               title: remoteMessage.notification?.title,
-               description: remoteMessage.notification?.body,
-               duration: 3000,
-               animationDuration: 300,
-               showEasing: Easing.ease,
-               onPress: () => handleReadNotification(String(id), String(category), String(content)),
-               hideOnPress: true,
-            });
+         const title = remoteMessage?.notification?.title;
+
+         if (remoteMessage.notification?.title && remoteMessage.notification?.body) {
+            if (category === 'discussion-general' && pathname === '/discussion/' + content) {
+               return null;
+            } else if (pathname !== `/${category}/${content}`) {
+               Notifier.showNotification({
+                  title: title,
+                  description: String(remoteMessage.notification?.body),
+                  duration: 3000,
+                  animationDuration: 300,
+                  showEasing: Easing.ease,
+                  onPress: () => handleReadNotification(String(id), String(category), String(content), String(title)),
+                  hideOnPress: true,
+                  Component: NotifierComponents.Notification,
+                  componentProps: {
+                     containerStyle: [
+                        Styles.shadowBox,
+                        {
+                           backgroundColor: colors.modalBackground,
+                           borderRadius: 5,
+                           marginHorizontal: 15,
+                           marginTop: 10,
+                           padding: 15,
+                        }
+                     ],
+                     titleStyle: {
+                        color: colors.text,
+                        fontWeight: 'bold',
+                        fontSize: 16,
+                     },
+                     descriptionStyle: {
+                        color: colors.dimmed,
+                        fontSize: 14,
+                     },
+                  }
+               });
+            }
          }
       });
 
       return unsubscribe;
-   }, []);
+   }, [pathname]);
 
 
    if (isLoading) {
@@ -65,65 +191,126 @@ export default function RootLayout() {
 
    return (
       <Provider store={store}>
-         <Stack screenOptions={Headers.shadow} >
+         <Stack screenOptions={{
+            headerShown: true,
+            animation: "slide_from_right",
+            animationTypeForReplace: "pop",
+            fullScreenGestureEnabled: true,
+            gestureEnabled: true,
+            contentStyle: { backgroundColor: colors.header },
+         }} >
             <Stack.Screen name="home" options={{ title: 'Home' }} />
             <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
             <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
             <Stack.Screen name="notification" options={{
-               title: 'Notifikasi',
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Notifikasi',
-               headerTitleAlign: 'center'
+               headerTitleAlign: 'center',
+               header: () => (
+                  <AppHeader title="Notifikasi" showBack={true} onPressLeft={() => router.back()} />
+               )
             }} />
             <Stack.Screen name="profile" options={{ title: 'Profile' }} />
+            <Stack.Screen name="setting/index" options={{
+               title: 'Pengaturan',
+               headerTitleAlign: 'center',
+               header: () => (
+                  <AppHeader title="Pengaturan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               )
+            }} />
             <Stack.Screen name="member/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderMemberList />
+               header: () => (
+                  <AppHeader title="Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderMemberList />}
+                  />
+               )
             }} />
             <Stack.Screen name="discussion/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Diskusi Umum',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderDiscussionGeneral />
+               header: () => (
+                  <AppHeader
+                     title="Diskusi Umum"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderDiscussionGeneral />}
+                  />
+               )
             }} />
             <Stack.Screen name="project/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Kegiatan',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightProjectList />
+               header: () => (
+                  <AppHeader title="Kegiatan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightProjectList />}
+                  />
+               )
             }} />
             <Stack.Screen name="division/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDivisionList />
+               header: () => (
+                  <AppHeader title="Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightDivisionList />}
+                  />
+               )
             }} />
             <Stack.Screen name="division/[id]/(fitur-division)" options={{ headerShown: false }} />
             <Stack.Screen name="group/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Lembaga Desa',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightGroupList />
+               header: () => (
+                  <AppHeader title="Lembaga Desa"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightGroupList />}
+                  />
+               )
             }} />
             <Stack.Screen name="position/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Jabatan',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightPositionList />
+               header: () => (
+                  <AppHeader title="Jabatan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightPositionList />}
+                  />
+               )
             }} />
             <Stack.Screen name="announcement/index"
                options={{
-                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                   headerTitle: 'Pengumuman',
                   headerTitleAlign: 'center',
-                  headerRight: () => <HeaderRightAnnouncementList />
+                  header: () => (
+                     <AppHeader title="Pengumuman"
+                        showBack={true}
+                        onPressLeft={() => router.back()}
+                        right={<HeaderRightAnnouncementList />}
+                     />
+                  )
                }}
             />
          </Stack>
-         <StatusBar style="light" translucent={false} backgroundColor="black" />
+         <StatusBar style={'light'} translucent={false} backgroundColor="black" />
          <ToastCustom />
+         <ModalUpdateMaintenance
+            visible={modalUpdateMaintenance}
+            type={modalType}
+            isForceUpdate={isForceUpdate}
+            customDescription={updateMessage}
+            onDismiss={handleDismissUpdate}
+         />
       </Provider>
    )
 }

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

@@ -1,143 +1,327 @@
 import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import Skeleton from "@/components/skeleton";
 import Text from '@/components/Text';
+import ErrorView from "@/components/ErrorView";
+import { ConstEnv } from "@/constants/ConstEnv";
+import { isImageFile } from "@/constants/FileExtensions";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo, MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { startActivityAsync } from 'expo-intent-launcher';
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from 'expo-sharing';
 import React, { useEffect, useState } from "react";
-import { Dimensions, SafeAreaView, ScrollView, View } from "react-native";
+import { Dimensions, Platform, Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import ImageViewing from 'react-native-image-viewing';
+import * as mime from 'react-native-mime-types';
 import RenderHTML from 'react-native-render-html';
+import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
-type Props = {
-   id: string
-   title: string
-   desc: string
+interface AnnouncementData {
+   id: string;
+   title: string;
+   desc: string;
+}
+
+interface FileData {
+   id: string;
+   idStorage: string;
+   name: string;
+   extension: string;
+}
+
+interface MemberData {
+   group: string;
+   division: string;
+}
+
+interface ApiResponse {
+   success: boolean;
+   data: AnnouncementData;
+   member: Record<string, MemberData[]>;
+   file: FileData[];
+   message: string;
 }
 
 export default function DetailAnnouncement() {
    const { id } = useLocalSearchParams<{ id: string }>();
    const { token, decryptToken } = useAuthSession()
-   const [data, setData] = useState<Props>({ id: '', title: '', desc: '' })
-   const [dataMember, setDataMember] = useState<any>({})
+   const { colors } = useTheme();
+   const [data, setData] = useState<AnnouncementData>({ id: '', title: '', desc: '' })
+   const [dataMember, setDataMember] = useState<Record<string, MemberData[]>>({})
+   const [dataFile, setDataFile] = useState<FileData[]>([])
    const update = useSelector((state: any) => state.announcementUpdate)
    const entityUser = useSelector((state: any) => state.user)
-   const contentWidth = Dimensions.get('window').width
+   const contentWidth = Dimensions.get('window').width - 62
    const [loading, setLoading] = useState(true)
-   const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
+   const [refreshing, setRefreshing] = useState(false)
+   const [loadingOpen, setLoadingOpen] = useState(false)
+   const [preview, setPreview] = useState(false)
+   const [chooseFile, setChooseFile] = useState<FileData>()
+   const [isError, setIsError] = useState(false)
+
+   const themed = {
+      background:      { backgroundColor: colors.background },
+      card:            { backgroundColor: colors.card, borderColor: colors.icon + '18' },
+      iconBox:         { backgroundColor: colors.icon + '18' },
+      sectionLabel:    { color: colors.dimmed },
+      titleText:       { color: colors.text },
+      fileChipBorder:  { borderColor: colors.icon + '30' },
+      fileChipPressed: { backgroundColor: colors.icon + '10' },
+      groupSeparator:  { borderTopColor: colors.icon + '18' },
+      divisionIconBg:  { backgroundColor: colors.icon + '15' },
+   }
+
+   function handleChooseFile(item: FileData) {
+      setChooseFile(item)
+      setPreview(true)
+   }
 
    async function handleLoad(loading: boolean) {
       try {
+         setIsError(false)
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetAnnouncementOne({ id: id, user: hasil })
-         setData(response.data)
-         setDataMember(response.member)
-      } catch (error) {
-         console.error(error)
+         const response: ApiResponse = await apiGetAnnouncementOne({ id: id, user: hasil })
+         if (response.success) {
+            setData(response.data)
+            setDataMember(response.member)
+            setDataFile(response.file)
+         } else {
+            setIsError(true)
+            Toast.show({ type: 'small', text1: response.message })
+         }
+      } catch (error: any) {
+         console.error(error);
+         setIsError(true)
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
    }
 
-   useEffect(() => {
-      handleLoad(false)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true)
-   }, [])
+   useEffect(() => { handleLoad(false) }, [update])
+   useEffect(() => { handleLoad(true) }, [])
 
    function hasHtmlTags(text: string) {
-      const htmlRegex = /<[a-z][\s\S]*>/i;
-      return htmlRegex.test(text);
+      return /<[a-z][\s\S]*>/i.test(text);
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const openFile = async (item: FileData) => {
+      try {
+         setLoadingOpen(true);
+         const remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
+         const fileName = item.name + '.' + item.extension;
+         const localPath = `${FileSystem.documentDirectory}/${fileName}`;
+         const mimeType = mime.lookup(fileName);
+         const downloadResult = await FileSystem.downloadAsync(remoteUrl, localPath);
+         if (downloadResult.status !== 200) {
+            throw new Error(`Download failed with status ${downloadResult.status}`);
+         }
+         const contentURL = await FileSystem.getContentUriAsync(downloadResult.uri);
+         try {
+            if (Platform.OS === 'android') {
+               await startActivityAsync('android.intent.action.VIEW', {
+                  data: contentURL,
+                  flags: 1,
+                  type: mimeType as string,
+               });
+            } else if (Platform.OS === 'ios') {
+               await Sharing.shareAsync(localPath);
+            }
+         } catch {
+            Toast.show({ type: 'error', text1: 'Tidak ada aplikasi yang dapat membuka file ini' });
+         }
+      } catch {
+         Toast.show({ type: 'error', text1: 'Gagal membuka file', text2: 'Silakan coba lagi nanti' });
+      } finally {
+         setLoadingOpen(false);
+      }
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, themed.background]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Pengumuman',
-               headerTitleAlign: 'center',
-               headerRight: () => entityUser.role != 'user' && entityUser.role != 'coadmin' ? <HeaderRightAnnouncementDetail id={id} /> : <></>,
+               header: () => (
+                  <AppHeader
+                     title="Pengumuman"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={entityUser.role != 'user' && entityUser.role != 'coadmin'
+                        ? <HeaderRightAnnouncementDetail id={id} />
+                        : <></>
+                     }
+                  />
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper]}>
-                  {
-                     loading ?
-                        <View>
-                           <View style={[Styles.rowOnly]}>
-                              <Skeleton width={30} height={30} borderRadius={10} />
-                              <View style={[{ flex: 1 }, Styles.ph05]}>
-                                 <Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
-                              </View>
+         <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={[Styles.flex1, themed.background]}
+            refreshControl={
+               <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />
+            }
+         >
+            {isError && !loading ? (
+               <View style={Styles.mv50}>
+                  <ErrorView />
+               </View>
+            ) : (
+               <View style={Styles.announcementDetailContainer}>
+
+                  {/* Title + Description */}
+                  <View style={[Styles.wrapPaper, Styles.noShadow, Styles.sectionCard, Styles.announcementDetailCard, themed.card]}>
+                     {loading ? (
+                        <View style={Styles.announcementDetailSkeletonGap}>
+                           <View style={[Styles.rowItemsCenter, Styles.announcementDetailSkeletonIconRow]}>
+                              <Skeleton width={38} height={38} borderRadius={10} />
+                              <Skeleton width={60} widthType="percent" height={16} borderRadius={6} />
                            </View>
-                           <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
-                           <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
-                           <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                           <Skeleton width={100} widthType="percent" height={10} borderRadius={6} />
+                           <Skeleton width={100} widthType="percent" height={10} borderRadius={6} />
+                           <Skeleton width={80} widthType="percent" height={10} borderRadius={6} />
                         </View>
-                        :
+                     ) : (
                         <>
-                           <View style={Styles.rowItemsCenter}>
-                              <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
-                              <Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
-                           </View>
-                           <View style={[Styles.mt10]}>
-                              {
-                                 hasHtmlTags(data?.desc) ?
-                                    <RenderHTML
-                                       contentWidth={contentWidth}
-                                       source={{ html: data?.desc }}
-                                    />
-                                    :
-                                    <Text>{data?.desc}</Text>
-                              }
+                           <View style={[Styles.rowItemsCenter, Styles.announcementDetailTitleRow]}>
+                              <View style={[Styles.sectionIconBox, Styles.announcementDetailIconBox, themed.iconBox]}>
+                                 <MaterialIcons name="campaign" size={22} color={colors.icon} />
+                              </View>
+                              <Text style={[Styles.textDefaultSemiBold, Styles.announcementDetailTitleText, themed.titleText]} numberOfLines={2}>
+                                 {data.title}
+                              </Text>
                            </View>
+                           {hasHtmlTags(data.desc)
+                              ? <RenderHTML
+                                 contentWidth={contentWidth}
+                                 source={{ html: data.desc }}
+                                 baseStyle={{ color: colors.text }}
+                              />
+                              : <Text style={Styles.textDefault}>{data.desc}</Text>
+                           }
                         </>
-                  }
+                     )}
+                  </View>
 
-               </View>
-               <View style={[Styles.wrapPaper, Styles.mv15]}>
-                  {
-                     loading ?
-                        arrSkeleton.map((item, index) => {
-                           return (
-                              <View key={index}>
-                                 <Skeleton width={30} widthType="percent" height={10} borderRadius={10} />
-                                 <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
-                                 <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                  {/* Files */}
+                  {dataFile.length > 0 && (
+                     <View>
+                        <View style={[Styles.rowItemsCenter, Styles.announcementDetailSectionLabelRow]}>
+                           <MaterialCommunityIcons name="paperclip" size={14} color={colors.dimmed} />
+                           <Text style={[Styles.textInformation, themed.sectionLabel]}>
+                              Lampiran ({dataFile.length})
+                           </Text>
+                        </View>
+                        <View style={[Styles.wrapPaper, Styles.noShadow, Styles.sectionCard, Styles.announcementDetailCard, Styles.announcementDetailFileCardPadding, themed.card]}>
+                           <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                              <View style={[Styles.rowItemsCenter, Styles.announcementDetailFileChipList]}>
+                                 {dataFile.map((item, index) => (
+                                    <Pressable
+                                       key={`${item.id}-${index}`}
+                                       onPress={() => isImageFile(item.extension) ? handleChooseFile(item) : openFile(item)}
+                                       style={({ pressed }) => [Styles.announcementDetailFileChip, themed.fileChipBorder,
+                                          pressed ? themed.fileChipPressed : themed.background]}
+                                    >
+                                       <MaterialCommunityIcons
+                                          name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
+                                          size={16}
+                                          color={colors.icon}
+                                       />
+                                       <Text style={[Styles.textInformation, Styles.announcementDetailFileChipText, themed.titleText]} numberOfLines={1}>
+                                          {item.name}.{item.extension}
+                                       </Text>
+                                    </Pressable>
+                                 ))}
                               </View>
-                           )
-                        })
-                        :
-                        Object.keys(dataMember).map((v: any, i: any) => {
-                           return (
-                              <View key={i} style={[Styles.mb05]}>
-                                 <Text style={[Styles.textDefaultSemiBold]}>{dataMember[v]?.[0].group}</Text>
-                                 {
-                                    dataMember[v].map((item: any, x: any) => {
-                                       return (
-                                          <View key={x} style={[Styles.rowItemsCenter, Styles.w90]}>
-                                             <Entypo name="dot-single" size={24} color="black" />
-                                             <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
+                           </ScrollView>
+                        </View>
+                     </View>
+                  )}
+
+                  {/* Recipients */}
+                  <View>
+                     <View style={[Styles.rowItemsCenter, Styles.announcementDetailSectionLabelRow]}>
+                        <MaterialIcons name="groups" size={14} color={colors.dimmed} />
+                        <Text style={[Styles.textInformation, themed.sectionLabel]}>
+                           Ditujukan Kepada
+                        </Text>
+                     </View>
+                     <View style={[Styles.wrapPaper, Styles.noShadow, Styles.sectionCard, Styles.announcementDetailCard, themed.card]}>
+                        {loading ? (
+                           <View style={Styles.announcementDetailRecipientGap}>
+                              <Skeleton width={40} widthType="percent" height={10} borderRadius={6} />
+                              <Skeleton width={100} widthType="percent" height={10} borderRadius={6} />
+                              <Skeleton width={60} widthType="percent" height={10} borderRadius={6} />
+                              <Skeleton width={100} widthType="percent" height={10} borderRadius={6} />
+                           </View>
+                        ) : (
+                           Object.keys(dataMember).map((v, i) => (
+                              <View key={i} style={i > 0 ? [Styles.announcementDetailGroupSeparator, themed.groupSeparator] : undefined}>
+                                 <Text style={[Styles.textInformation, Styles.announcementDetailGroupLabel, themed.sectionLabel]}>
+                                    {dataMember[v]?.[0].group}
+                                 </Text>
+                                 <View>
+                                    {dataMember[v].map((item, x) => (
+                                       <View key={x} style={[Styles.rowItemsCenter, Styles.announcementDetailDivisionRow]}>
+                                          <View style={[Styles.announcementDetailDivisionIconCircle, themed.divisionIconBg]}>
+                                             <MaterialIcons name="group" size={14} color={colors.icon} />
                                           </View>
-                                       )
-                                    })
-                                 }
-
+                                          <Text style={[Styles.textDefault, Styles.flex1, themed.titleText]}>
+                                             {item.division}
+                                          </Text>
+                                       </View>
+                                    ))}
+                                 </View>
                               </View>
-                           )
-                        })
-                  }
+                           ))
+                        )}
+                     </View>
+                  </View>
+
                </View>
-            </View>
+            )}
          </ScrollView>
+
+         <ImageViewing
+            images={[{ uri: `${ConstEnv.url_storage}/files/${chooseFile?.idStorage}` }]}
+            imageIndex={0}
+            visible={preview}
+            onRequestClose={() => setPreview(false)}
+            doubleTapToZoomEnabled
+            HeaderComponent={() => (
+               <View style={Styles.headerModalViewImg}>
+                  <Pressable onPress={() => setPreview(false)} accessibilityRole="button">
+                     <Text style={[Styles.textWhite, Styles.font26]}>✕</Text>
+                  </Pressable>
+                  <Pressable
+                     onPress={() => chooseFile && openFile(chooseFile)}
+                     accessibilityRole="button"
+                     disabled={loadingOpen}
+                  >
+                     <Text style={[Styles.font26, { color: loadingOpen ? 'gray' : 'white' }]}>⋯</Text>
+                  </Pressable>
+               </View>
+            )}
+            FooterComponent={() => (
+               <View style={[Styles.pb20, Styles.ph16, Styles.alignCenter]}>
+                  <Text style={[Styles.textWhite, Styles.font16]}>{chooseFile?.name}.{chooseFile?.extension}</Text>
+               </View>
+            )}
+         />
       </SafeAreaView>
    )
-}
+}

app/(application)/announcement/create.tsx

@@ -1,162 +1,274 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiCreateAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
-import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function CreateAnnouncement() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.announcementUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [disableBtn, setDisableBtn] = useState(true);
    const [modalDivisi, setModalDivisi] = useState(false);
-   const [divisionMember, setDivisionMember] = useState<any>([]);
-   const [dataForm, setDataForm] = useState({
-      title: "",
-      desc: "",
-   });
-   const [error, setError] = useState({
-      title: false,
-      desc: false,
-   });
+   const [divisionMember, setDivisionMember] = useState<any[]>([])
+   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [dataForm, setDataForm] = useState({ title: "", desc: "" });
+   const [error, setError] = useState({ title: false, desc: false });
+
+   const totalDivisi = divisionMember.reduce((acc: number, g: any) => acc + g.Division.length, 0)
 
    function validationForm(cat: string, val: any) {
-      if (cat == "title") {
+      if (cat === "title") {
          setDataForm({ ...dataForm, title: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, title: true });
-         } else {
-            setError({ ...error, title: false });
-         }
-      } else if (cat == "desc") {
+         setError({ ...error, title: val === "" || val === "null" });
+      } else if (cat === "desc") {
          setDataForm({ ...dataForm, desc: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, desc: true });
-         } else {
-            setError({ ...error, desc: false });
-         }
+         setError({ ...error, desc: val === "" || val === "null" });
       }
    }
 
    function checkForm() {
-      if (
-         Object.values(error).some((v) => v == true) ||
-         Object.values(dataForm).some((v) => v == "")
-      ) {
-         setDisableBtn(true);
-      } else {
-         setDisableBtn(false);
-      }
+      const hasError = Object.values(error).some(v => v)
+      const hasEmpty = Object.values(dataForm).some(v => v === "")
+      setDisableBtn(hasError || hasEmpty);
    }
 
-   useEffect(() => {
-      checkForm();
-   }, [error, dataForm]);
+   useEffect(() => { checkForm() }, [error, dataForm]);
 
    async function handleCreate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateAnnouncement({
-            data: { ...dataForm, user: hasil, groups: divisionMember },
-         });
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil, groups: divisionMember, ...dataForm }))
+         const response = await apiCreateAnnouncement(fd)
          if (response.success) {
             dispatch(setUpdateAnnouncement(!update))
-            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
+            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data' })
             router.back();
+         } else {
+            Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Tidak dapat terhubung ke server" })
+      } finally {
+         setLoading(false)
       }
    }
 
+   const pickDocumentAsync = async () => {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (!result.canceled) {
+         let skipped = 0
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            if (fileForm.some(f => f.name === asset.name)) {
+               skipped++
+            } else {
+               setFileForm(prev => [...prev, asset])
+            }
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm(fileForm.filter((_, i) => i !== index))
+      setModalFile(false)
+   }
+
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Tambah Pengumuman"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || divisionMember.length === 0 || loading}
+                           category="create"
+                           onPress={() => {
+                              divisionMember.length === 0
+                                 ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi" })
+                                 : handleCreate()
+                           }}
+                        />
+                     }
                   />
-               ),
-               headerTitle: "Tambah Pengumuman",
-               headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="create"
-                     onPress={() => {
-                        divisionMember.length == 0
-                           ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
-                           : handleCreate();
-                     }}
-                  />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+            <View style={Styles.p15}>
+
                <InputForm
                   label="Judul"
                   type="default"
                   placeholder="Judul Pengumuman"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul harus diisi"
                   onChange={(val) => validationForm("title", val)}
                />
+
                <InputForm
                   label="Pengumuman"
                   type="default"
                   placeholder="Deskripsi Pengumuman"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Pengumuman harus diisi"
                   onChange={(val) => validationForm("desc", val)}
                   multiline
                />
-               <ButtonSelect
-                  value="Pilih divisi penerima pengumuman"
-                  onPress={() => {
-                     setModalDivisi(true)
-                  }}
-               />
 
-               {
-                  divisionMember.length > 0
-                  &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                     {
-                        divisionMember.map((item: { name: any; Division: any }, index: any) => {
+               {/* File */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {fileForm.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {fileForm.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {fileForm.length > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
                            return (
-                              <View key={index}>
-                                 <Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
-                                 {
-                                    item.Division.map((division: any, i: any) => (
-                                       <View key={i} style={[Styles.rowItemsCenter, Styles.mv05]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
-                                          <Text style={[Styles.textDefault]}>{division.name}</Text>
-                                       </View>
-                                    ))
-                                 }
-                              </View>
+                              <Pressable
+                                 key={index}
+                                 onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
                            )
-                        })
-                     }
-                  </View>
-               }
+                        })}
+                     </View>
+                  )}
+               </View>
+
+               {/* Divisi Penerima */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={() => setModalDivisi(true)}
+                     style={[Styles.sectionActionRow, { marginBottom: divisionMember.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
+                        <MaterialIcons name="groups" size={18} color={colors.tabActive} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Divisi Penerima</Text>
+                        {divisionMember.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada divisi dipilih</Text>
+                        )}
+                     </View>
+                     {divisionMember.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{totalDivisi} divisi</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {divisionMember.length > 0 && (
+                     <View style={{ gap: 10 }}>
+                        {divisionMember.map((item: any, index: number) => (
+                           <View key={index}>
+                              <Text style={[Styles.textMediumNormal, { color: colors.dimmed, marginBottom: 4 }]}>
+                                 {item.name}
+                              </Text>
+                              <View style={{ gap: 6 }}>
+                                 {item.Division.map((division: any, i: number) => (
+                                    <View key={i} style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}>
+                                       <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18', width: 28, height: 28, borderRadius: 8 }]}>
+                                          <MaterialIcons name="group" size={14} color={colors.tabActive} />
+                                       </View>
+                                       <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>
+                                          {division.name}
+                                       </Text>
+                                    </View>
+                                 ))}
+                              </View>
+                           </View>
+                        ))}
+                     </View>
+                  )}
+               </View>
+
             </View>
          </ScrollView>
 
@@ -171,19 +283,16 @@ export default function CreateAnnouncement() {
                setModalDivisi(false)
             }}
          />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => deleteFile(indexDelFile)}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    );
 }
-
-const styles = StyleSheet.create({
-   container: {
-      padding: 20,
-   },
-   textArea: {
-      height: 100, // Or use flex-based sizing
-      borderColor: 'gray',
-      borderWidth: 1,
-      padding: 10,
-      textAlignVertical: 'top', // Important for Android to align text at the top
-   },
-});

app/(application)/announcement/edit/[id].tsx

@@ -1,28 +1,48 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from '@/components/Text';
 import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
 
 type GroupDivision = {
    id: string;
    name: string;
-   Division: {
-      id: string;
-      name: string;
-   }[];
+   Division: { id: string; name: string }[];
 }
 
 export default function EditAnnouncement() {
@@ -30,177 +50,282 @@ export default function EditAnnouncement() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.announcementUpdate)
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const [modalDivisi, setModalDivisi] = useState(false);
    const [disableBtn, setDisableBtn] = useState(true);
-   const [dataMember, setDataMember] = useState<any>([]);
-   const [dataForm, setDataForm] = useState({
-      title: "",
-      desc: "",
-   });
-   const [error, setError] = useState({
-      title: false,
-      desc: false,
-   });
+   const [dataMember, setDataMember] = useState<GroupDivision[]>([]);
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
+   const [isModalFile, setModalFile] = useState(false)
+   const [loading, setLoading] = useState(false)
+   const [dataForm, setDataForm] = useState({ title: "", desc: "" });
+   const [error, setError] = useState({ title: false, desc: false });
+
+   const visibleOldFiles = dataFile.filter(v => !v.delete)
+   const totalFiles = fileForm.length + visibleOldFiles.length
+   const totalDivisi = dataMember.reduce((acc: number, g: any) => acc + g.Division.length, 0)
 
    async function handleLoad() {
       try {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetAnnouncementOne({ id: id, user: hasil });
          setDataForm(response.data);
-
-         const arrNew: GroupDivision[] = []
-         const coba = Object.keys(response.member).map((v: any, i: any) => {
-            const newObject = {
-               "id": response.member[v][0].idGroup,
-               "name": v,
-               "Division": response.member[v]
-            }
-
-            response.member[v].map((v: any, i: any) => {
-               newObject["Division"][i] = {
-                  "id": v.idDivision,
-                  "name": v.division
-               }
-            })
-            arrNew.push(newObject)
-         })
+         const arrNew: GroupDivision[] = Object.keys(response.member).map((v) => ({
+            id: response.member[v][0].idGroup,
+            name: v,
+            Division: response.member[v].map((m: any) => ({ id: m.idDivision, name: m.division }))
+         }))
          setDataMember(arrNew);
+         setDataFile(response.file);
       } catch (error) {
          console.error(error);
       }
    }
 
-   useEffect(() => {
-      handleLoad();
-   }, []);
+   useEffect(() => { handleLoad() }, []);
 
    function validationForm(cat: string, val: any) {
-      if (cat == "title") {
+      if (cat === "title") {
          setDataForm({ ...dataForm, title: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, title: true });
-         } else {
-            setError({ ...error, title: false });
-         }
-      } else if (cat == "desc") {
+         setError({ ...error, title: val === "" || val === "null" });
+      } else if (cat === "desc") {
          setDataForm({ ...dataForm, desc: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, desc: true });
-         } else {
-            setError({ ...error, desc: false });
-         }
+         setError({ ...error, desc: val === "" || val === "null" });
       }
    }
 
    function checkForm() {
-      if (
-         Object.values(error).some((v) => v == true) ||
-         Object.values(dataForm).some((v) => v == "")
-      ) {
-         setDisableBtn(true);
-      } else {
-         setDisableBtn(false);
-      }
+      const hasError = Object.values(error).some(v => v)
+      const hasEmpty = Object.values(dataForm).some(v => v === "")
+      setDisableBtn(hasError || hasEmpty);
    }
 
-   useEffect(() => {
-      checkForm();
-   }, [error, dataForm]);
+   useEffect(() => { checkForm() }, [error, dataForm]);
 
    async function handleEdit() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiEditAnnouncement({
-            ...dataForm, user: hasil, groups: dataMember,
-         }, id);
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
+         }
+         fd.append("data", JSON.stringify({ ...dataForm, user: hasil, groups: dataMember, oldFile: dataFile }))
+         const response = await apiEditAnnouncement(fd, id);
          if (response.success) {
             dispatch(setUpdateAnnouncement(!update))
-            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
+            Toast.show({ type: 'small', text1: 'Berhasil mengubah data' })
             router.back();
+         } else {
+            Toast.show({ type: 'small', text1: 'Gagal mengubah data' })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengubah data" })
+      } finally {
+         setLoading(false)
       }
    }
 
+   const pickDocumentAsync = async () => {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (!result.canceled) {
+         let skipped = 0
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            const isDup = fileForm.some(f => f.name === asset.name) ||
+               visibleOldFiles.some(f => `${f.name}.${f.extension}` === asset.name)
+            if (isDup) {
+               skipped++
+            } else {
+               setFileForm(prev => [...prev, asset])
+            }
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+      }
+   };
+
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat === "newFile") {
+         setFileForm(fileForm.filter((_, i) => i !== index))
+      } else {
+         setDataFile(prev => prev.map(item => item.id === index ? { ...item, delete: true } : item))
+      }
+      setModalFile(false)
+   }
+
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Edit Pengumuman"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || dataMember.length === 0 || loading}
+                           category="update"
+                           onPress={() => {
+                              dataMember.length === 0
+                                 ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi" })
+                                 : handleEdit()
+                           }}
+                        />
+                     }
                   />
-               ),
-               headerTitle: "Edit Pengumuman",
-               headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="update"
-                     onPress={() => {
-                        dataMember.length == 0
-                           ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
-                           : handleEdit();
-                     }}
-                  />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+            <View style={Styles.p15}>
+
                <InputForm
                   label="Judul"
                   type="default"
                   placeholder="Judul Pengumuman"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul harus diisi"
                   onChange={(val) => validationForm("title", val)}
                   value={dataForm.title}
                />
+
                <InputForm
                   label="Pengumuman"
                   type="default"
                   placeholder="Deskripsi Pengumuman"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Pengumuman harus diisi"
                   onChange={(val) => validationForm("desc", val)}
                   value={dataForm.desc}
                   multiline
                />
-               <ButtonSelect
-                  value="Pilih divisi penerima pengumuman"
-                  onPress={() => {
-                     setModalDivisi(true)
-                  }}
-               />
-               {
-                  dataMember.length > 0
-                  &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                     {
-                        dataMember.map((item: { name: any; Division: any }, index: any) => {
+
+               {/* File */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: totalFiles > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {totalFiles === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {totalFiles > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{totalFiles} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {totalFiles > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {visibleOldFiles.map((item, index) => {
+                           const ext = item.extension.toLowerCase()
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
                            return (
-                              <View key={index}>
-                                 <Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
-                                 {
-                                    item.Division.map((division: any, i: any) => (
-                                       <View key={i} style={[Styles.rowItemsCenter, Styles.mv05]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
-                                          <Text style={[Styles.textDefault]}>{division.name}</Text>
-                                       </View>
-                                    ))
-                                 }
-                              </View>
+                              <Pressable
+                                 key={`old-${index}`}
+                                 onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{item.name}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
                            )
-                        })
-                     }
-                  </View>
-               }
+                        })}
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={`new-${index}`}
+                                 onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                     </View>
+                  )}
+               </View>
+
+               {/* Divisi Penerima */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={() => setModalDivisi(true)}
+                     style={[Styles.sectionActionRow, { marginBottom: dataMember.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
+                        <MaterialIcons name="groups" size={18} color={colors.tabActive} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Divisi Penerima</Text>
+                        {dataMember.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada divisi dipilih</Text>
+                        )}
+                     </View>
+                     {dataMember.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{totalDivisi} divisi</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {dataMember.length > 0 && (
+                     <View style={{ gap: 10 }}>
+                        {dataMember.map((item, index) => (
+                           <View key={index}>
+                              <Text style={[Styles.textMediumNormal, { color: colors.dimmed, marginBottom: 4 }]}>
+                                 {item.name}
+                              </Text>
+                              <View style={{ gap: 6 }}>
+                                 {item.Division.map((division, i) => (
+                                    <View key={i} style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}>
+                                       <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18', width: 28, height: 28, borderRadius: 8 }]}>
+                                          <MaterialIcons name="group" size={14} color={colors.tabActive} />
+                                       </View>
+                                       <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>
+                                          {division.name}
+                                       </Text>
+                                    </View>
+                                 ))}
+                              </View>
+                           </View>
+                        ))}
+                     </View>
+                  )}
+               </View>
+
             </View>
          </ScrollView>
 
@@ -216,6 +341,16 @@ export default function EditAnnouncement() {
             }}
             value={dataMember}
          />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => deleteFile(indexDelFile.id, indexDelFile.cat)}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    );
 }

app/(application)/announcement/index.tsx

@@ -1,139 +1,155 @@
-import BorderBottomItem from "@/components/borderBottomItem";
+import GuideOverlay from "@/components/GuideOverlay";
 import InputSearch from "@/components/inputSearch";
-import SkeletonContent from "@/components/skeletonContent";
+import Skeleton from "@/components/skeleton";
 import Text from '@/components/Text';
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncement } from "@/lib/api";
+import { GUIDE_ANNOUNCEMENT } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialIcons } from "@expo/vector-icons";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
-import { useEffect, useState } from "react";
-import { RefreshControl, View, VirtualizedList } from "react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, RefreshControl, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
 type Props = {
-   id: string,
-   title: string,
-   desc: string,
+   id: string
+   title: string
+   desc: string
    createdAt: string
 }
 
-
 export default function Announcement() {
    const { token, decryptToken } = useAuthSession()
-   const [data, setData] = useState<Props[]>([])
+   const { colors } = useTheme();
    const [search, setSearch] = useState('')
    const update = useSelector((state: any) => state.announcementUpdate)
-   const [loading, setLoading] = useState(true)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
-   const [refreshing, setRefreshing] = useState(false)
+   const isFirstRender = useRef(true)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('announcement')
+   const arrSkeleton = Array.from({ length: 5 }, (_, i) => i)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
-         const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetAnnouncement({ user: hasil, search: search, page: thisPage })
-         if (thisPage == 1) {
-            setData(response.data)
-         } else if (thisPage > 1 && response.data.length > 0) {
-            setData([...data, ...response.data])
-         } else {
-            return;
-         }
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-         setWaiting(false)
-      }
+   const themed = {
+      background:  { backgroundColor: colors.background },
+      card:        { backgroundColor: colors.card, borderColor: colors.icon + '18' },
+      iconBox:     { backgroundColor: colors.icon + '18' },
+      title:       { color: colors.text },
+      desc:        { color: colors.dimmed },
+      date:        { color: colors.dimmed },
+      cardPressed: { backgroundColor: colors.icon + '08' },
    }
 
-   useEffect(() => {
-      handleLoad(false, 1)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [search])
-
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
-
-   const handleRefresh = async () => {
-      setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      setRefreshing(false)
-   };
-
-   const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      title: data[index].title,
-      desc: data[index].desc,
-      createdAt: data[index].createdAt,
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch,
+      isRefetching
+   } = useInfiniteQuery({
+      queryKey: ['announcements', search],
+      queryFn: async ({ pageParam = 1 }) => {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetAnnouncement({ user: hasil, search, page: pageParam })
+         return response.data
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.length > 0 ? allPages.length + 1 : undefined
+      },
    })
 
-   return (
-      <View style={[Styles.p15, { flex: 1 }]}>
-         <View>
-            <InputSearch onChange={setSearch} />
+   useEffect(() => {
+      if (isFirstRender.current) { isFirstRender.current = false; return }
+      refetch()
+   }, [update])
+
+   const flattenedData = useMemo(() => data?.pages.flat() || [], [data])
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: flattenedData[index].id,
+      title: flattenedData[index].title,
+      desc: flattenedData[index].desc,
+      createdAt: flattenedData[index].createdAt,
+   })
+
+   const renderSkeleton = () => (
+      <View style={Styles.announcementListSkeletonCard}>
+         <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.announcementListSkeletonHeader]}>
+            <View style={[Styles.rowItemsCenter, Styles.announcementListSkeletonTitleRow]}>
+               <Skeleton width={28} height={28} borderRadius={8} />
+               <Skeleton width={50} widthType="percent" height={12} borderRadius={6} />
+            </View>
+            <Skeleton width={15} widthType="percent" height={10} borderRadius={6} />
          </View>
-         <View style={[{ flex: 2 }, Styles.mb50]}>
-            {
-               loading ?
-                  arrSkeleton.map((item, index) => {
-                     return (
-                        <SkeletonContent key={index} />
-                     )
-                  })
-                  :
-                  data.length > 0
-                     ?
-                     <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
-                        getItem={getItem}
-                        renderItem={({ item, index }: { item: Props, index: number }) => {
-                           return (
-                              <BorderBottomItem
-                                 key={index}
-                                 onPress={() => { router.push(`/announcement/${item.id}`) }}
-                                 borderType="bottom"
-                                 icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialIcons name="campaign" size={25} color={'#384288'} />
-                                    </View>
-                                 }
-                                 title={item.title}
-                                 desc={item.desc.replace(/<[^>]*>?/gm, '')}
-                                 rightTopInfo={item.createdAt}
-                              />
-                           )
-                        }}
-                        keyExtractor={(item, index) => String(index)}
-                        onEndReached={loadMoreData}
-                        onEndReachedThreshold={0.5}
-                        showsVerticalScrollIndicator={false}
-                        refreshControl={
-                           <RefreshControl
-                              refreshing={refreshing}
-                              onRefresh={handleRefresh}
-                           />
-                        }
+         <Skeleton width={100} widthType="percent" height={10} borderRadius={6} />
+         <Skeleton width={80} widthType="percent" height={10} borderRadius={6} />
+      </View>
+   )
+
+   const renderItem = ({ item }: { item: Props }) => (
+      <Pressable
+         onPress={() => router.push(`/announcement/${item.id}`)}
+         style={({ pressed }) => [Styles.announcementListCard, themed.card, pressed && themed.cardPressed]}
+      >
+         <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.announcementListCardHeader]}>
+            <View style={[Styles.rowItemsCenter, Styles.announcementListTitleRow]}>
+               <View style={[Styles.announcementListIconBox, themed.iconBox]}>
+                  <MaterialIcons name="campaign" size={16} color={colors.icon} />
+               </View>
+               <Text style={[Styles.textDefaultSemiBold, Styles.announcementListTitleText, themed.title]} numberOfLines={1}>
+                  {item.title}
+               </Text>
+            </View>
+            <Text style={[Styles.textInformation, Styles.announcementListDateText, themed.date]}>
+               {item.createdAt}
+            </Text>
+         </View>
+         <Text style={[Styles.textMediumNormal, Styles.announcementListDescText, themed.title]} numberOfLines={2}>
+            {item.desc.replace(/<[^>]*>?/gm, '').replace(/\r?\n|\r/g, ' ')}
+         </Text>
+      </Pressable>
+   )
+
+   return (
+      <View style={[Styles.flex1, Styles.announcementListContainer, themed.background]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_ANNOUNCEMENT} onDismiss={dismissGuide} />
+         <InputSearch onChange={setSearch} />
+         <View style={[Styles.flex1, Styles.announcementListInner]}>
+            {isLoading && !flattenedData.length ? (
+               arrSkeleton.map((_, i) => (
+                  <View key={i} style={[Styles.announcementListCard, themed.card]}>
+                     {renderSkeleton()}
+                  </View>
+               ))
+            ) : flattenedData.length > 0 ? (
+               <VirtualizedList
+                  data={flattenedData}
+                  getItemCount={() => flattenedData.length}
+                  getItem={getItem}
+                  renderItem={renderItem}
+                  keyExtractor={(item, index) => String(item.id || index)}
+                  onEndReached={() => { if (hasNextPage && !isFetchingNextPage) fetchNextPage() }}
+                  onEndReachedThreshold={0.5}
+                  showsVerticalScrollIndicator={false}
+                  ItemSeparatorComponent={() => <View style={Styles.announcementListSeparator} />}
+                  refreshControl={
+                     <RefreshControl
+                        refreshing={isRefetching && !isFetchingNextPage}
+                        onRefresh={refetch}
+                        tintColor={colors.icon}
                      />
-                     :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
-            }
+                  }
+               />
+            ) : (
+               <Text style={[Styles.textDefault, Styles.textCenter, Styles.mt30, themed.desc]}>
+                  Tidak ada pengumuman
+               </Text>
+            )}
          </View>
       </View>
    )
-}
+}

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

@@ -1,11 +1,14 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiEditBanner, apiGetBanner, apiGetBannerOne } from "@/lib/api";
 import { setEntities } from "@/lib/bannerSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +26,7 @@ import { useDispatch } from "react-redux";
 export default function EditBanner() {
    const dispatch = useDispatch();
    const { decryptToken, token } = useAuthSession();
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [selectedImage, setSelectedImage] = useState<
       string | undefined | { uri: string }
@@ -30,6 +34,7 @@ export default function EditBanner() {
    const [title, setTitle] = useState("");
    const [error, setError] = useState(false);
    const [imgForm, setImgForm] = useState<any>();
+   const [loading, setLoading] = useState(false)
 
    const pickImageAsync = async () => {
       let result = await ImagePicker.launchImageLibraryAsync({
@@ -42,8 +47,6 @@ export default function EditBanner() {
       if (!result.canceled) {
          setSelectedImage(result.assets[0].uri);
          setImgForm(result.assets[0]);
-      } else {
-         alert("Tidak ada gambar yang dipilih");
       }
    };
 
@@ -51,7 +54,7 @@ export default function EditBanner() {
       const hasil = await decryptToken(String(token?.current));
       const data = await apiGetBannerOne({ user: hasil, id });
       setSelectedImage({
-         uri: `https://wibu-storage.wibudev.com/api/files/${data.data.image}`,
+         uri: `${ConstEnv.url_storage}/files/${data.data.image}`,
       });
       setTitle(data.data.title);
    };
@@ -71,6 +74,7 @@ export default function EditBanner() {
 
    const handleUpdateEntity = async () => {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const fd = new FormData();
 
@@ -102,32 +106,50 @@ export default function EditBanner() {
          } else {
             Toast.show({ type: 'small', text1: 'Gagal mengupdate data', })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Gagal mengupdate data', })
+         const message = error?.response?.data?.message || "Gagal mengupdate data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Edit Banner",
                headerTitleAlign: "center",
-               headerRight: () => <ButtonSaveHeader
-                  disable={title == "" || error ? true : false}
-                  onPress={() => { handleUpdateEntity() }}
-                  category="update" />,
+               // headerRight: () => <ButtonSaveHeader
+               //    disable={title == "" || error || loading ? true : false}
+               //    onPress={() => { handleUpdateEntity() }}
+               //    category="update" />,
+               header: () => (
+                  <AppHeader
+                     title="Edit Banner"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={title == "" || error || loading ? true : false}
+                           onPress={() => { handleUpdateEntity() }}
+                           category="update" />
+                     }
+                  />
+               )
             }}
          />
-         <ScrollView>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.mb15]}>
                   {selectedImage != undefined ? (
@@ -138,7 +160,7 @@ export default function EditBanner() {
                                  ? selectedImage
                                  : selectedImage.uri
                            }
-                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                           style={[Styles.resizeContain, Styles.w100, { height: 100 }]}
                         />
                      </Pressable>
                   ) : (
@@ -147,11 +169,11 @@ export default function EditBanner() {
                         style={[Styles.wrapPaper, Styles.contentItemCenter]}
                      >
                         <View
-                           style={{ justifyContent: "center", alignItems: "center" }}
+                           style={[Styles.contentItemCenter]}
                         >
                            <Entypo name="image" size={50} color={"#aeaeae"} />
                            <Text style={[Styles.textInformation, Styles.mt05]}>
-                              Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk
+                              Mohon unggah gambar dalam resolusi 1650 x 720 pixel untuk
                               memastikan
                            </Text>
                         </View>
@@ -163,7 +185,7 @@ export default function EditBanner() {
                   type="default"
                   placeholder="Judul"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={title}
                   error={error}
                   onChange={onValidate}

app/(application)/banner/create.tsx

@@ -1,11 +1,13 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiCreateBanner, apiGetBanner } from "@/lib/api";
 import { setEntities } from "@/lib/bannerSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack } from "expo-router";
@@ -22,6 +24,7 @@ import { useDispatch } from "react-redux";
 
 export default function CreateBanner() {
    const { decryptToken, token } = useAuthSession();
+   const { colors } = useTheme();
    const dispatch = useDispatch();
    const [selectedImage, setSelectedImage] = useState<string | undefined>(
       undefined
@@ -29,6 +32,7 @@ export default function CreateBanner() {
    const [imgForm, setImgForm] = useState<any>();
    const [title, setTitle] = useState("");
    const [error, setError] = useState(false);
+   const [loading, setLoading] = useState(false)
 
    const pickImageAsync = async () => {
       let result = await ImagePicker.launchImageLibraryAsync({
@@ -41,8 +45,6 @@ export default function CreateBanner() {
          if (result.assets?.[0].uri) {
             setSelectedImage(result.assets[0].uri);
             setImgForm(result.assets[0]);
-         } else {
-            alert("Tidak ada gambar yang dipilih");
          }
       }
    };
@@ -57,80 +59,91 @@ export default function CreateBanner() {
    }
 
    const handleCreateEntity = async () => {
-      const hasil = await decryptToken(String(token?.current));
-      const fd = new FormData();
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
 
-      fd.append("file", {
-         uri: imgForm.uri,
-         type: imgForm.mimeType,
-         name: imgForm.fileName,
-      } as any);
+         fd.append("file", {
+            uri: imgForm.uri,
+            type: imgForm.mimeType,
+            name: imgForm.fileName,
+         } as any);
 
-      fd.append(
-         "data",
-         JSON.stringify({
-            title,
-            user: hasil,
-         })
-      );
-
-      const createdEntity = await apiCreateBanner(fd);
-      if (createdEntity.success) {
-         Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
-         apiGetBanner({ user: hasil }).then((data) =>
-            dispatch(setEntities(data.data))
+         fd.append(
+            "data",
+            JSON.stringify({
+               title,
+               user: hasil,
+            })
          );
-         router.back();
-      } else {
-         Toast.show({ type: 'small', text1: 'Gagal menambahkan data', })
+
+         const createdEntity = await apiCreateBanner(fd);
+         if (createdEntity.success) {
+            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
+            apiGetBanner({ user: hasil }).then((data) =>
+               dispatch(setEntities(data.data))
+            );
+            router.back();
+         } else {
+            Toast.show({ type: 'small', text1: 'Gagal menambahkan data', })
+         }
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
                headerTitle: "Tambah Banner",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={title == "" || selectedImage == undefined || error ? true : false}
-                     category="create"
-                     onPress={() => {
-                        handleCreateEntity();
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Fitur"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={title == "" || selectedImage == undefined || error || loading ? true : false}
+                           category="create"
+                           onPress={() => {
+                              handleCreateEntity();
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+            <View style={[Styles.p15]}>
                <View style={[Styles.mb15]}>
                   {selectedImage != undefined ? (
                      <Pressable onPress={pickImageAsync}>
                         <Image
                            src={selectedImage}
-                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                           style={[Styles.resizeContain, Styles.w100, { height: 100 }]}
                         />
                      </Pressable>
                   ) : (
                      <Pressable
                         onPress={pickImageAsync}
-                        style={[Styles.wrapPaper, Styles.contentItemCenter]}
+                        style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.borderAll, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}
                      >
                         <View
-                           style={{ justifyContent: "center", alignItems: "center" }}
+                           style={[Styles.contentItemCenter]}
                         >
-                           <Entypo name="image" size={50} color={"#aeaeae"} />
-                           <Text style={[Styles.textInformation, Styles.mt05]}>
-                              Mohon unggah gambar dalam resolusi 1535 x 450 pixel untuk
+                           <Entypo name="image" size={50} color={colors.dimmed} />
+                           <Text style={[Styles.textInformation, Styles.mt05, { color: colors.dimmed }]}>
+                              Mohon unggah gambar dalam resolusi 1650 x 720 pixel untuk
                               memastikan
                            </Text>
                         </View>
@@ -142,7 +155,7 @@ export default function CreateBanner() {
                   type="default"
                   placeholder="Judul"
                   required
-                  bg="white"
+                  bg={colors.card}
                   onChange={onValidate}
                   error={error}
                   errorText="Judul harus diisi"

app/(application)/banner/index.tsx

@@ -1,26 +1,34 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import AppHeader from "@/components/AppHeader"
+import GuideOverlay from "@/components/GuideOverlay"
 import HeaderRightBannerList from "@/components/banner/headerBannerList"
 import BorderBottomItem from "@/components/borderBottomItem"
-import ButtonBackHeader from "@/components/buttonBackHeader"
 import DrawerBottom from "@/components/drawerBottom"
 import MenuItemRow from "@/components/menuItemRow"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import ModalLoading from "@/components/modalLoading"
+import Skeleton from "@/components/skeleton"
+import Text from "@/components/Text"
+import { ConstEnv } from "@/constants/ConstEnv"
 import Styles from "@/constants/Styles"
 import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
 import { setEntities } from "@/lib/bannerSlice"
+import { GUIDE_BANNER } from "@/lib/guideSteps"
+import { useGuide } from "@/lib/useGuide"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import * as FileSystem from 'expo-file-system'
 import { startActivityAsync } from 'expo-intent-launcher'
 import { router, Stack } from "expo-router"
 import * as Sharing from 'expo-sharing'
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Alert, Image, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
+import ImageViewing from 'react-native-image-viewing'
 import * as mime from 'react-native-mime-types'
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
 
-
 type Props = {
    id: string
    title: string
@@ -30,6 +38,7 @@ type Props = {
 
 export default function BannerList() {
    const { decryptToken, token } = useAuthSession()
+   const { colors } = useTheme()
    const [isModal, setModal] = useState(false)
    const entities = useSelector((state: any) => state.banner)
    const [dataId, setDataId] = useState('')
@@ -37,41 +46,61 @@ export default function BannerList() {
    const dispatch = useDispatch()
    const [refreshing, setRefreshing] = useState(false)
    const [loadingOpen, setLoadingOpen] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('banner')
+   const [viewImg, setViewImg] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const queryClient = useQueryClient()
 
-   const handleDeleteEntity = async () => {
-      try {
-         const hasil = await decryptToken(String(token?.current));
-         const deletedEntity = await apiDeleteBanner({ user: hasil }, dataId);
-         if (deletedEntity.success) {
-            Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
-            apiGetBanner({ user: hasil }).then((data) =>
-               dispatch(setEntities(data.data))
-            );
-         } else {
-            Toast.show({ type: 'small', text1: 'Gagal menghapus data', })
-         }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
-      } finally {
-         setModal(false)
+   // 1. Fetching logic with useQuery
+   const { data: bannersRes, isLoading } = useQuery({
+      queryKey: ['banners'],
+      queryFn: async () => {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetBanner({ user: hasil })
+         return response.data || []
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
+
+   // Sync results with Redux
+   useEffect(() => {
+      if (bannersRes) {
+         dispatch(setEntities(bannersRes))
       }
+   }, [bannersRes, dispatch])
+
+   // 2. Deletion logic with useMutation
+   const deleteMutation = useMutation({
+      mutationFn: async (id: string) => {
+         const hasil = await decryptToken(String(token?.current))
+         return await apiDeleteBanner({ user: hasil }, id)
+      },
+      onSuccess: () => {
+         Toast.show({ type: 'small', text1: 'Berhasil menghapus data' })
+         queryClient.invalidateQueries({ queryKey: ['banners'] })
+      },
+      onError: (error: any) => {
+         const message = error?.response?.data?.message || "Gagal menghapus data"
+         Toast.show({ type: 'small', text1: message })
+      }
+   })
+
+   const handleDeleteEntity = () => {
+      deleteMutation.mutate(dataId)
+      setModal(false)
    };
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      const hasil = await decryptToken(String(token?.current));
-      apiGetBanner({ user: hasil }).then((data) =>
-         dispatch(setEntities(data.data))
-      );
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['banners'] })
       setRefreshing(false)
    };
 
    const openFile = () => {
       setModal(false)
       setLoadingOpen(true)
-      let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.image;
+      let remoteUrl = ConstEnv.url_storage + '/files/' + selectFile?.image;
       const fileName = selectFile?.title + '.' + selectFile?.extension;
       let localPath = `${FileSystem.documentDirectory}/${fileName}`;
       const mimeType = mime.lookup(fileName)
@@ -102,51 +131,77 @@ export default function BannerList() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Banner',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightBannerList />
+               // headerRight: () => <HeaderRightBannerList />
+               header: () => (
+                  <AppHeader
+                     title="Banner"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <HeaderRightBannerList />
+                     }
+                  />
+               )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_BANNER} onDismiss={dismissGuide} />
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
-         <ScrollView 
+         <ScrollView
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15, Styles.mb100]}>
-               {entities.map((index: any, key: number) => (
-                  <BorderBottomItem
-                     key={key}
-                     onPress={() => {
-                        setDataId(index.id)
-                        setSelectFile(index)
-                        setModal(true)
-                     }}
-                     borderType="all"
-                     icon={
-                        <Image
-                           source={{ uri: `https://wibu-storage.wibudev.com/api/files/${index.image}` }}
-                           style={[Styles.imgListBanner]}
-                        />
-                     }
-                     title={index.title}
-                  />
-               ))}
+               {
+                  isLoading ? (
+                     <>
+                        <Skeleton width={100} height={150} borderRadius={10} widthType="percent" />
+                        <Skeleton width={100} height={150} borderRadius={10} widthType="percent" />
+                        <Skeleton width={100} height={150} borderRadius={10} widthType="percent" />
+                     </>
+                  ) :
+                     entities.length > 0 ?
+                        entities.map((index: any, key: number) => (
+                           <BorderBottomItem
+                              key={key}
+                              onPress={() => {
+                                 setDataId(index.id)
+                                 setSelectFile(index)
+                                 setModal(true)
+                              }}
+                              borderType="all"
+                              icon={
+                                 <Image
+                                    source={{ uri: `${ConstEnv.url_storage}/files/${index.image}` }}
+                                    style={[Styles.imgListBanner]}
+                                 />
+                              }
+                              title={index.title}
+                           />
+                        ))
+                        :
+                        <View style={[Styles.p15, Styles.mb100]}>
+                           <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
+                        </View>
+               }
             </View>
          </ScrollView>
 
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setModal(false)
@@ -154,24 +209,49 @@ export default function BannerList() {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
-                  title="Lihat File"
-                  onPress={() => { openFile() }}
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
+                  title="Lihat"
+                  onPress={() => {
+                     setModal(false)
+                     setTimeout(() => {
+                        setViewImg(true);
+                     }, 1000);
+                     // openFile() 
+                  }}
                />
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus data?',
-                        onPress: () => { handleDeleteEntity() }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                   }}
                />
             </View>
          </DrawerBottom>
+
+         <ImageViewing
+            images={[{ uri: `${ConstEnv.url_storage}/files/${selectFile?.image}` }]}
+            imageIndex={0}
+            visible={viewImg}
+            onRequestClose={() => setViewImg(false)}
+            doubleTapToZoomEnabled
+         />
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus data?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteEntity()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
       </SafeAreaView>
    )
 }

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

@@ -1,21 +1,28 @@
-import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
+import BorderBottomItem2 from "@/components/borderBottomItem2";
 import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
+import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
-import LabelStatus from "@/components/labelStatus";
+import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import Skeleton from "@/components/skeleton";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from '@/components/Text';
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import { ConstEnv } from "@/constants/ConstEnv";
+import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
 import Styles from "@/constants/Styles";
-import { apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar } from "@/lib/api";
+import { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiUpdateDiscussionGeneralCommentar } from "@/lib/api";
+import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import { firebase } from '@react-native-firebase/database';
+import { useTheme } from "@/providers/ThemeProvider";
+import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { ref } from '@react-native-firebase/database';
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Platform, Pressable, ScrollView, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -34,21 +41,44 @@ type PropsKomentar = {
    idUser: string
    img: string
    username: string
+   isEdited: boolean
+   updatedAt: string
+}
+
+type PropsFile = {
+   id: string;
+   idStorage: string;
+   name: string;
+   extension: string
 }
 
 export default function DetailDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
+   const entities = useSelector((state: any) => state.entities)
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props>()
    const [dataKomentar, setDataKomentar] = useState<PropsKomentar[]>([])
    const [memberDiscussion, setMemberDiscussion] = useState(false)
+   const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
    const [komentar, setKomentar] = useState('')
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
    const [loading, setLoading] = useState(true)
    const [loadingKomentar, setLoadingKomentar] = useState(true)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
-   const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-general/${id}`);
+   const reference = ref(getDB(), `/discussion-general/${id}`);
+   const headerHeight = useHeaderHeight();
+   const [detailMore, setDetailMore] = useState<any>([])
+   const [loadingSendKomentar, setLoadingSendKomentar] = useState(false)
+   const [isVisible, setVisible] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
+   const [selectKomentar, setSelectKomentar] = useState({
+      id: '',
+      comment: ''
+   })
+   const [viewEdit, setViewEdit] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
    useEffect(() => {
       const onValueChange = reference.on('value', snapshot => {
@@ -70,7 +100,7 @@ export default function DetailDiscussionGeneral() {
    }
 
 
-   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota', loading: boolean) {
+   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota' | 'file', loading: boolean) {
       try {
          if (cat == "detail") {
             setLoading(loading)
@@ -87,6 +117,8 @@ export default function DetailDiscussionGeneral() {
             setDataKomentar(response.data)
          } else if (cat == 'cek-anggota') {
             setMemberDiscussion(response.data)
+         } else if (cat == 'file') {
+            setFileDiscussion(response.data)
          }
 
       } catch (error) {
@@ -101,73 +133,176 @@ export default function DetailDiscussionGeneral() {
       handleLoad('detail', false)
       handleLoad('komentar', false)
       handleLoad('cek-anggota', false)
+      handleLoad('file', false)
    }, [update]);
 
    useEffect(() => {
       handleLoad('detail', true)
       handleLoad('komentar', true)
       handleLoad('cek-anggota', true)
+      handleLoad('file', true)
    }, []);
 
    async function handleKomentar() {
       try {
+         setLoadingSendKomentar(true)
          if (komentar != '') {
             const hasil = await decryptToken(String(token?.current))
             const response = await apiSendDiscussionGeneralCommentar({ id: id, data: { desc: komentar, user: hasil } })
             if (response.success) {
                setKomentar('')
                updateTrigger()
+            } else {
+               Toast.show({ type: 'small', text1: response.message })
             }
          }
-      } catch (error) {
-         console.error(error)
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoadingSendKomentar(false)
       }
    }
 
+   async function handleEditKomentar() {
+      try {
+         setLoadingSendKomentar(true)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiUpdateDiscussionGeneralCommentar({ id: selectKomentar.id, data: { desc: selectKomentar.comment, user: hasil } })
+         if (response.success) {
+            updateTrigger()
+         } else {
+            Toast.show({ type: 'small', text1: response.message })
+         }
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengupdate data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoadingSendKomentar(false)
+         handleViewEditKomentar()
+      }
+   }
+
+   async function handleDeleteKomentar() {
+      try {
+         setLoadingSendKomentar(true)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiDeleteDiscussionGeneralCommentar({ id: selectKomentar.id, data: { user: hasil } })
+         if (response.success) {
+            updateTrigger()
+         } else {
+            Toast.show({ type: 'small', text1: response.message })
+         }
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menghapus data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoadingSendKomentar(false)
+         setVisible(false)
+      }
+   }
+
+   function handleMenuKomentar(id: string, comment: string) {
+      setSelectKomentar({ id, comment })
+      setVisible(true)
+   }
+
+   function handleViewEditKomentar() {
+      setVisible(false)
+      setViewEdit(!viewEdit)
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad('detail', false)
+      handleLoad('komentar', false)
+      handleLoad('cek-anggota', false)
+      handleLoad('file', false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    return (
       <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Diskusi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />,
+               // headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />,
+               header: () => (
+                  <AppHeader
+                     title="Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />}
+                  />
+               )
             }}
          />
-         <View style={{ flex: 1 }}>
-            <ScrollView>
-               <View style={[Styles.p15, Styles.mb100]}>
+         <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+               style={[Styles.h100, { backgroundColor: colors.background }]}
+               refreshControl={
+                  <RefreshControl
+                     refreshing={refreshing}
+                     onRefresh={() => handleRefresh()}
+                     tintColor={colors.icon}
+                  />
+               }
+            >
+               <View style={[Styles.p15]}>
                   {
                      loading ?
                         <SkeletonContent />
                         :
-                        <BorderBottomItem
+                        <BorderBottomItem2
+                           dataFile={fileDiscussion}
                            descEllipsize={false}
-                           width={55}
-                           borderType="bottom"
+                           borderType="all"
+                           bgColor="white"
                            icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <MaterialIcons name="chat" size={25} color={'#384288'} />
+                              <View style={[Styles.discussionIconCircleLg, { backgroundColor: colors.icon + '20' }]}>
+                                 <Feather name="message-circle" size={22} color={colors.icon} />
                               </View>
                            }
                            title={data?.title}
+                           titleShowAll={true}
                            subtitle={
-                              !data?.isActive ?
-                                 <LabelStatus category='warning' text='ARSIP' size="small" />
-                                 :
-                                 <LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} size="small" />
+                              <View style={[Styles.discussionStatusPill, {
+                                 borderColor: !data?.isActive
+                                    ? '#F59E0B'
+                                    : data?.status == 1 ? '#10B981' : colors.dimmed + '80',
+                              }]}>
+                                 <Text style={[Styles.discussionStatusText, {
+                                    color: !data?.isActive
+                                       ? '#F59E0B'
+                                       : data?.status == 1 ? '#10B981' : colors.dimmed,
+                                 }]}>
+                                    {!data?.isActive ? 'Arsip' : data?.status == 1 ? 'Buka' : 'Tutup'}
+                                 </Text>
+                              </View>
                            }
-                           rightTopInfo={data?.createdAt}
                            desc={data?.desc}
                            leftBottomInfo={
                               <View style={[Styles.rowItemsCenter]}>
-                                 <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
+                                 <Feather name="message-square" size={14} color={colors.dimmed} style={Styles.mr05} />
+                                 <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dataKomentar.length} Komentar</Text>
                               </View>
                            }
+                           rightBottomInfo={
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{data?.createdAt}</Text>
+                           }
                         />
                   }
-                  <View style={[Styles.p15]}>
+                  <View style={[Styles.mt10]}>
                      {
                         loadingKomentar ?
                            arrSkeleton.map((item: any, i: number) => {
@@ -176,54 +311,174 @@ export default function DetailDiscussionGeneral() {
                               )
                            })
                            :
-                           dataKomentar.map((item, i) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={i}
-                                    width={55}
-                                    borderType="bottom"
-                                    icon={
-                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="xs" />
+                           dataKomentar.map((item, i) => (
+                              <Pressable
+                                 key={i}
+                                 onPress={() => {
+                                    setDetailMore((prev: any) =>
+                                       prev.includes(item.id)
+                                          ? prev.filter((id: string) => id !== item.id)
+                                          : [...prev, item.id]
+                                    )
+                                 }}
+                                 onLongPress={() => {
+                                    item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
+                                 }}
+                                 style={({ pressed }) => [
+                                    Styles.discussionCommentCard,
+                                    {
+                                       backgroundColor: pressed ? colors.icon + '10' : colors.card,
+                                       borderColor: colors.icon + '20',
                                     }
-                                    title={item.username}
-                                    rightTopInfo={item.createdAt}
-                                    desc={item.comment}
-                                 />
-                              )
-                           })
+                                 ]}
+                              >
+                                 <View style={Styles.flex1}>
+                                    {/* Name + time */}
+                                    <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
+                                       <View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
+                                          <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                                          <Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
+                                             {item.username}
+                                          </Text>
+                                          {item.isEdited && (
+                                             <Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>
+                                                diedit
+                                             </Text>
+                                          )}
+                                       </View>
+                                       <Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
+                                          {item.createdAt}
+                                       </Text>
+                                    </View>
+
+                                    {/* Comment text */}
+                                    <Text
+                                       style={[Styles.textDefault, { color: colors.text }]}
+                                       numberOfLines={detailMore.includes(item.id) ? 0 : 3}
+                                    >
+                                       {item.comment}
+                                    </Text>
+                                 </View>
+                              </Pressable>
+                           ))
                      }
                   </View>
                </View>
             </ScrollView>
             <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-               keyboardVerticalOffset={110}
+               keyboardVerticalOffset={headerHeight}
             >
                <View style={[
                   Styles.contentItemCenter,
                   Styles.w100,
-                  { backgroundColor: "#f4f4f4" },
+                  { backgroundColor: colors.background },
+                  viewEdit && Styles.borderTop
                ]}>
-                  <InputForm
-                     disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
-                     type="default"
-                     round
-                     placeholder="Kirim Komentar"
-                     bg="white"
-                     onChange={setKomentar}
-                     value={komentar}
-                     itemRight={
-                        <Pressable onPress={() => {
-                           (komentar != '' && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
-                              && handleKomentar()
-                        }}>
-                           <MaterialIcons name="send" size={25} style={(komentar == '' || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? Styles.cGray : Styles.cDefault} />
-                        </Pressable>
-                     }
-                  />
+                  {
+                     viewEdit ?
+                        <>
+                           <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
+                                 <Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
+                              </View>
+                              <Pressable onPress={() => handleViewEditKomentar()}>
+                                 <MaterialIcons name="close" color={colors.text} size={22} />
+                              </Pressable>
+                           </View>
+                           <InputForm
+                              disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
+                              type="default"
+                              round
+                              placeholder="Kirim Komentar"
+                              onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
+                              value={selectKomentar.comment}
+                              multiline
+                              focus={viewEdit}
+                              itemRight={
+                                 <Pressable
+                                    onPress={() => {
+                                       (!loadingSendKomentar && selectKomentar.comment != '' && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
+                                          && handleEditKomentar()
+                                    }}
+                                    style={[Platform.OS == 'android' && Styles.mb12]}
+                                 >
+   <MaterialIcons name="send" size={25} style={(loadingSendKomentar || selectKomentar.comment == '' || regexOnlySpacesOrEnter.test(selectKomentar.comment) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
+                                 </Pressable>
+                              }
+                           />
+                        </>
+                        :
+                        data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") || memberDiscussion)
+                           ?
+                           <InputForm
+                              disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
+                              type="default"
+                              round
+                              placeholder="Kirim Komentar"
+                              onChange={setKomentar}
+                              value={komentar}
+                              multiline
+                              focus={viewEdit}
+                              itemRight={
+                                 <Pressable
+                                    onPress={() => {
+                                       (!loadingSendKomentar && komentar != '' && !regexOnlySpacesOrEnter.test(komentar) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
+                                          && handleKomentar()
+                                    }}
+                                    style={[Platform.OS == 'android' && Styles.mb12]}
+                                 >
+   <MaterialIcons name="send" size={25} style={(loadingSendKomentar || komentar == '' || regexOnlySpacesOrEnter.test(komentar) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
+                                 </Pressable>
+                              }
+                           />
+                           :
+                           <View style={[Styles.pv20, Styles.itemsCenter]}>
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
+                                 {
+                                    data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota diskusi yang dapat memberikan komentar"
+                                 }
+                              </Text>
+                           </View>
+                  }
+
                </View>
             </KeyboardAvoidingView>
          </View >
+
+         <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
+                  title="Edit"
+                  onPress={() => { handleViewEditKomentar() }}
+               />
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => {
+                     setVisible(false)
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus komentar?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteKomentar()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
       </>
    )
 }

app/(application)/discussion/add-member/[id].tsx

@@ -1,13 +1,15 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from '@/components/Text';
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiAddMemberDiscussionGeneral, apiGetDiscussionGeneralOne, apiGetUser } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -25,12 +27,14 @@ export default function AddMemberDiscussionDetail() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
    const [data, setData] = useState<Props[]>([])
    const [idGroup, setIdGroup] = useState('')
    const [selectMember, setSelectMember] = useState<any[]>([])
    const [search, setSearch] = useState('')
+   const [loading, setLoading] = useState(false)
 
    async function handleLoad() {
       try {
@@ -70,51 +74,75 @@ export default function AddMemberDiscussionDetail() {
 
    async function handleAddMember() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiAddMemberDiscussionGeneral({ id: id, data: { user: hasil, member: selectMember } })
          if (response.success) {
             Toast.show({ type: 'small', text1: 'Berhasil menambahkan anggota', })
             dispatch(setUpdateDiscussionGeneralDetail(!update))
             router.back()
+         } else {
+            Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah Anggota Diskusi',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="update"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Tambah Anggota Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={selectMember.length == 0 || loading ? true : false}
+                           onPress={() => {
+                              handleAddMember()
+                           }}
+                        />
+                     }
                   />
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
             <InputSearch onChange={setSearch} value={search} />
 
             {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -123,9 +151,11 @@ export default function AddMemberDiscussionDetail() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+            >
 
                {
                   data.length > 0 ?
@@ -134,32 +164,32 @@ export default function AddMemberDiscussionDetail() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  !found && onChoose(item.id, item.name, item.img)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]}>{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
                      }
                      )
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/discussion/create.tsx

@@ -1,26 +1,51 @@
-import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Text from '@/components/Text';
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiCreateDiscussionGeneral } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
 
 export default function CreateDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user);
    const userLogin = useSelector((state: any) => state.entities)
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -31,210 +56,273 @@ export default function CreateDiscussionGeneral() {
    const [isSelect, setSelect] = useState(false);
    const entitiesMember = useSelector((state: any) => state.memberChoose)
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
-   const [dataForm, setDataForm] = useState({
-      idGroup: "",
-      title: "",
-      desc: "",
-   });
-   const [error, setError] = useState({
-      group: false,
-      title: false,
-      desc: false,
-   });
+   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [dataForm, setDataForm] = useState({ idGroup: "", title: "", desc: "" });
+   const [error, setError] = useState({ group: false, title: false, desc: false });
 
    function validationForm(cat: string, val: any, label?: string) {
-      if (cat == "group") {
+      if (cat === "group") {
          setChooseGroup({ val, label: String(label) });
          dispatch(setMemberChoose([]))
          setDataForm({ ...dataForm, idGroup: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, group: true });
-         } else {
-            setError({ ...error, group: false });
-         }
-      } else if (cat == "title") {
+         setError({ ...error, group: val === "" || val === "null" });
+      } else if (cat === "title") {
          setDataForm({ ...dataForm, title: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, title: true });
-         } else {
-            setError({ ...error, title: false });
-         }
-      } else if (cat == "desc") {
+         setError({ ...error, title: val === "" || val === "null" });
+      } else if (cat === "desc") {
          setDataForm({ ...dataForm, desc: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, desc: true });
-         } else {
-            setError({ ...error, desc: false });
-         }
+         setError({ ...error, desc: val === "" || val === "null" });
       }
    }
 
    function checkForm() {
-      if (
-         Object.values(error).some((v) => v == true) ||
-         Object.values(dataForm).some((v) => v == "")
-      ) {
-         setDisableBtn(true);
+      const hasError = Object.values(error).some(v => v)
+      const hasEmpty = Object.values(dataForm).some(v => v === "")
+      setDisableBtn(hasError || hasEmpty);
+   }
+
+   useEffect(() => { checkForm() }, [error, dataForm]);
+   useEffect(() => { dispatch(setMemberChoose([])) }, [])
+
+   function handleOpenMemberPicker() {
+      if (entityUser.role === "supadmin" || entityUser.role === "developer") {
+         if (chooseGroup.val !== "") {
+            setSelect(true);
+            setValSelect("member");
+         } else {
+            Toast.show({ type: 'small', text1: 'Pilih Lembaga Desa terlebih dahulu' })
+         }
       } else {
-         setDisableBtn(false);
+         validationForm('group', userLogin.idGroup, userLogin.group);
+         setValChoose(userLogin.idGroup)
+         setSelect(true);
+         setValSelect("member");
       }
    }
 
-   useEffect(() => {
-      checkForm();
-   }, [error, dataForm]);
+   const pickDocumentAsync = async () => {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (!result.canceled) {
+         let skipped = 0
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            if (fileForm.some(f => f.name === asset.name)) {
+               skipped++
+            } else {
+               setFileForm(prev => [...prev, asset])
+            }
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+      }
+   };
 
-   useEffect(() => {
-      dispatch(setMemberChoose([]))
-   }, [])
-
-   function handleBack() {
-      dispatch(setMemberChoose([]))
-      router.back()
+   function deleteFile(index: number) {
+      setFileForm(fileForm.filter((_, i) => i !== index))
+      setModalFile(false)
    }
 
    async function handleCreate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateDiscussionGeneral({
-            data: { ...dataForm, user: hasil, member: entitiesMember },
-         })
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
+         }
+         fd.append("data", JSON.stringify({ ...dataForm, user: hasil, member: entitiesMember }))
+         const response = await apiCreateDiscussionGeneral(fd)
          if (response.success) {
             dispatch(setMemberChoose([]))
             dispatch(setUpdateDiscussionGeneralDetail(!update))
-            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
+            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data' })
             router.back()
          } else {
-            Toast.show({ type: 'small', text1: response.message, })
+            Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan data" })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => { handleBack() }}
+               header: () => (
+                  <AppHeader
+                     title="Tambah Diskusi"
+                     showBack={true}
+                     onPressLeft={() => { dispatch(setMemberChoose([])); router.back() }}
+                     right={
+                        <ButtonSaveHeader
+                           category="create"
+                           disable={disableBtn || entitiesMember.length === 0 || loading}
+                           onPress={() => {
+                              entitiesMember.length === 0
+                                 ? Toast.show({ type: 'small', text1: 'Anda belum memilih anggota' })
+                                 : handleCreate()
+                           }}
+                        />
+                     }
                   />
-               ),
-               headerTitle: "Tambah Diskusi",
-               headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="create"
-                     disable={disableBtn}
-                     onPress={() => {
-                        entitiesMember.length == 0
-                           ? Toast.show({ type: 'small', text1: 'Anda belum memilih anggota', })
-                           : handleCreate()
-                     }}
-                  />
-               ),
+               )
             }}
          />
-         <ScrollView>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
-               {
-                  (entityUser.role == "supadmin" ||
-                     entityUser.role == "developer") && (
-                     <SelectForm
-                        label="Lembaga Desa"
-                        placeholder="Pilih Lembaga Desa"
-                        value={chooseGroup.label}
-                        required
-                        onPress={() => {
-                           setValChoose(chooseGroup.val);
-                           setValSelect("group");
-                           setSelect(true);
-                        }}
-                        error={error.group}
-                        errorText="Lembaga Desa tidak boleh kosong"
-                     />
-                  )
-               }
+
+               {(entityUser.role === "supadmin" || entityUser.role === "developer") && (
+                  <SelectForm
+                     label="Lembaga Desa"
+                     placeholder="Pilih Lembaga Desa"
+                     value={chooseGroup.label}
+                     required
+                     bg={colors.card}
+                     onPress={() => { setValChoose(chooseGroup.val); setValSelect("group"); setSelect(true) }}
+                     error={error.group}
+                     errorText="Lembaga Desa tidak boleh kosong"
+                  />
+               )}
+
                <InputForm
                   label="Judul"
                   type="default"
                   placeholder="Judul"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul tidak boleh kosong"
-                  onChange={(val) => { validationForm("title", val) }}
+                  onChange={(val) => validationForm("title", val)}
                />
+
                <InputForm
                   label="Diskusi"
                   type="default"
                   placeholder="Hal yang didiskusikan"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Diskusi tidak boleh kosong"
-                  onChange={(val) => { validationForm("desc", val) }}
+                  onChange={(val) => validationForm("desc", val)}
                   multiline
                />
-               <ButtonSelect
-                  value="Pilih Anggota"
-                  onPress={() => {
-                     if (entityUser.role == "supadmin" || entityUser.role == "developer") {
-                        if (chooseGroup.val != "") {
-                           setSelect(true);
-                           setValSelect("member");
-                        } else {
-                           Toast.show({ type: 'small', text1: 'Pilih Lembaga Desa terlebih dahulu', })
-                        }
-                     } else {
-                        validationForm('group', userLogin.idGroup, userLogin.group);
-                        setValChoose(userLogin.idGroup)
-                        setSelect(true);
-                        setValSelect("member");
-                     }
 
-                  }}
-               />
-               {
-                  entitiesMember.length > 0 &&
-                  <View>
-                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text>Anggota</Text>
-                        <Text>Total {entitiesMember.length} Anggota</Text>
+               {/* File */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
                      </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {fileForm.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {fileForm.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {fileForm.length > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={index}
+                                 onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                     </View>
+                  )}
+               </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                        {
-                           entitiesMember.map((item: { img: any; name: any; }, index: any) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="bottom"
-                                    icon={
-                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                                    }
-                                    title={item.name}
-                                 />
-                              )
-                           })
-                        }
+               {/* Anggota */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={handleOpenMemberPicker}
+                     style={[Styles.sectionActionRow, { marginBottom: entitiesMember.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
+                        <MaterialIcons name="people" size={18} color={colors.tabActive} />
                      </View>
-                  </View>
-               }
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Anggota</Text>
+                        {entitiesMember.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada anggota dipilih</Text>
+                        )}
+                     </View>
+                     {entitiesMember.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{entitiesMember.length} anggota</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {entitiesMember.length > 0 && (
+                     <View style={{ gap: 6 }}>
+                        {entitiesMember.map((item: any, index: number) => (
+                           <View key={index} style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}>
+                              <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                              <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>
+                                 {item.name}
+                              </Text>
+                           </View>
+                        ))}
+                     </View>
+                  )}
+               </View>
+
             </View>
          </ScrollView>
 
          <ModalSelect
             category={valSelect}
             close={setSelect}
-            onSelect={(value) => {
-               validationForm(valSelect, value.val, value.label);
-            }}
-            title={valSelect == "group" ? "Lembaga Desa" : "Pilih Anggota"}
+            onSelect={(value) => validationForm(valSelect, value.val, value.label)}
+            title={valSelect === "group" ? "Lembaga Desa" : "Pilih Anggota"}
             open={isSelect}
-            idParent={valSelect == "member" ? chooseGroup.val : ""}
+            idParent={valSelect === "member" ? chooseGroup.val : ""}
             valChoose={valChoose}
          />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => deleteFile(indexDelFile)}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    );
 }

app/(application)/discussion/edit/[id].tsx

@@ -1,144 +1,276 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
+import MenuItemRow from "@/components/menuItemRow";
+import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function EditDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [disableBtn, setDisableBtn] = useState(false)
    const dispatch = useDispatch()
+   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
-   const [dataForm, setDataForm] = useState({
-      title: "",
-      desc: "",
-   });
-   const [error, setError] = useState({
-      title: false,
-      desc: false,
-   })
+   const [dataForm, setDataForm] = useState({ title: "", desc: "" });
+   const [error, setError] = useState({ title: false, desc: false })
+
+   const visibleOldFiles = dataFile.filter(v => !v.delete)
+   const totalFiles = fileForm.length + visibleOldFiles.length
 
    async function handleLoad() {
       try {
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetDiscussionGeneralOne({
-            id: id,
-            user: hasil,
-            cat: "detail",
-         });
-         if (response.success) {
-            setDataForm(response.data);
-         }
+         const response = await apiGetDiscussionGeneralOne({ id, user: hasil, cat: "detail" });
+         const responseFile = await apiGetDiscussionGeneralOne({ id, user: hasil, cat: "file" });
+         if (response.success) setDataForm(response.data);
+         if (responseFile.success) setDataFile(responseFile.data);
       } catch (error) {
          console.error(error);
       }
    }
 
-
-   useEffect(() => {
-      handleLoad();
-   }, []);
+   useEffect(() => { handleLoad() }, []);
 
    function validationForm(cat: string, val: any) {
-      if (cat == "title") {
+      if (cat === "title") {
          setDataForm({ ...dataForm, title: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, title: true });
-         } else {
-            setError({ ...error, title: false });
-         }
-      } else if (cat == "desc") {
+         setError({ ...error, title: val === "" || val === "null" });
+      } else if (cat === "desc") {
          setDataForm({ ...dataForm, desc: val });
-         if (val == "" || val == "null") {
-            setError({ ...error, desc: true });
-         } else {
-            setError({ ...error, desc: false });
-         }
+         setError({ ...error, desc: val === "" || val === "null" });
       }
    }
 
    function checkForm() {
-      if (Object.values(error).some((v) => v == true) == true || Object.values(dataForm).some((v) => v == "") == true) {
-         setDisableBtn(true)
-      } else {
-         setDisableBtn(false)
-      }
+      const hasError = Object.values(error).some(v => v)
+      const hasEmpty = Object.values(dataForm).some(v => v === "")
+      setDisableBtn(hasError || hasEmpty);
    }
 
-   useEffect(() => {
-      checkForm()
-   }, [error, dataForm])
+   useEffect(() => { checkForm() }, [error, dataForm])
 
+   const pickDocumentAsync = async () => {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (!result.canceled) {
+         let skipped = 0
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            const isDup = fileForm.some(f => f.name === asset.name) ||
+               visibleOldFiles.some(f => `${f.name}.${f.extension}` === asset.name)
+            if (isDup) {
+               skipped++
+            } else {
+               setFileForm(prev => [...prev, asset])
+            }
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+      }
+   };
+
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat === "newFile") {
+         setFileForm(fileForm.filter((_, i) => i !== index))
+      } else {
+         setDataFile(prev => prev.map(item => item.id === index ? { ...item, delete: true } : item))
+      }
+      setModalFile(false)
+   }
 
    async function handleEdit() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditDiscussionGeneral({ user: hasil, title: dataForm.title, desc: dataForm.desc }, id);
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil, title: dataForm.title, desc: dataForm.desc, oldFile: dataFile }))
+         const response = await apiEditDiscussionGeneral(fd, id);
          if (response.success) {
             dispatch(setUpdateDiscussionGeneralDetail(!update))
-            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
+            Toast.show({ type: 'small', text1: 'Berhasil mengubah data' })
             router.back();
+         } else {
+            Toast.show({ type: 'small', text1: 'Gagal mengubah data' })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengubah data" })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Edit Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || loading}
+                           category="update"
+                           onPress={() => handleEdit()}
+                        />
+                     }
                   />
-               ),
-               headerTitle: "Edit Diskusi",
-               headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="update"
-                     onPress={() => { handleEdit() }}
-                  />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
+            <View style={Styles.p15}>
+
                <InputForm
                   label="Judul"
                   type="default"
                   placeholder="Judul"
                   required
+                  bg={colors.card}
                   error={error.title}
                   value={dataForm.title}
                   errorText="Judul tidak boleh kosong"
                   onChange={(val) => validationForm("title", val)}
                />
+
                <InputForm
                   label="Diskusi"
                   type="default"
                   placeholder="Hal yang didiskusikan"
                   required
+                  bg={colors.card}
                   error={error.desc}
                   value={dataForm.desc}
                   errorText="Diskusi tidak boleh kosong"
                   onChange={(val) => validationForm("desc", val)}
                   multiline
                />
+
+               {/* File */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: totalFiles > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {totalFiles === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {totalFiles > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{totalFiles} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {totalFiles > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {visibleOldFiles.map((item, index) => {
+                           const ext = item.extension.toLowerCase()
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={`old-${index}`}
+                                 onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{item.name}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={`new-${index}`}
+                                 onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                     </View>
+                  )}
+               </View>
+
             </View>
          </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => deleteFile(indexDelFile.id, indexDelFile.cat)}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    );
 }

app/(application)/discussion/index.tsx

@@ -1,20 +1,23 @@
-import BorderBottomItem from "@/components/borderBottomItem";
+import GuideOverlay from "@/components/GuideOverlay";
 import ButtonTab from "@/components/buttonTab";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussionGeneral } from "@/lib/api";
+import { GUIDE_DISCUSSION } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Feather } from "@expo/vector-icons";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
-import { RefreshControl, View, VirtualizedList } from "react-native";
+import { useEffect, useMemo, useState } from "react";
+import { FlatList, Pressable, RefreshControl, View } from "react-native";
 import { useSelector } from "react-redux";
 
-
 type Props = {
    id: string
    title: string
@@ -27,187 +30,196 @@ type Props = {
 export default function Discussion() {
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
    const [search, setSearch] = useState('')
-   const [nameGroup, setNameGroup] = useState('')
-   const [data, setData] = useState<Props[]>([])
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
-   const [loading, setLoading] = useState(true)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
+   const queryClient = useQueryClient()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
    const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('discussion')
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['discussions', { status, search, group }],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetDiscussionGeneral({ user: hasil, active: status, search: search, group: String(group), page: thisPage })
-         if (thisPage == 1) {
-            setData(response.data)
-         } else if (thisPage > 1 && response.data.length > 0) {
-            setData([...data, ...response.data])
-         } else {
-            return;
-         }
-         setNameGroup(response.filter.name)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-         setWaiting(false)
-      }
-   }
+         const response = await apiGetDiscussionGeneral({
+            user: hasil,
+            active: status,
+            search: search,
+            group: String(group),
+            page: pageParam
+         })
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
+
+   const nameGroup = useMemo(() => {
+      return data?.pages[0]?.filter?.name || "";
+   }, [data])
 
    useEffect(() => {
-      handleLoad(false, 1)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [status, search, group])
-
-
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
+      refetch()
+   }, [update, refetch])
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['discussions'] })
       setRefreshing(false)
    };
 
-   const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      title: data[index].title,
-      desc: data[index].desc,
-      status: data[index].status,
-      total_komentar: data[index].total_komentar,
-      createdAt: data[index].createdAt,
-   })
+   const isOpen = (item: Props) => item.status === 1
+
+   const themed = {
+      background:       { backgroundColor: colors.background },
+      card:             { backgroundColor: colors.card, borderColor: colors.icon + '20' },
+      cardPressed:      { backgroundColor: colors.icon + '10' },
+      iconCircle:       { backgroundColor: colors.icon + '20' },
+      title:            { color: colors.text },
+      dimmed:           { color: colors.dimmed },
+      statusOpen:       { borderColor: '#10B981' as const },
+      statusClosed:     { borderColor: colors.dimmed + '80' },
+      statusTextOpen:   { color: '#10B981' as const },
+      statusTextClosed: { color: colors.dimmed },
+   }
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
-         <View>
-            <View style={[Styles.wrapBtnTab]}>
-               <ButtonTab
-                  active={status == "false" ? "false" : "true"}
-                  value="true"
-                  onPress={() => { setStatus("true") }}
-                  label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
-                  n={2} />
-               <ButtonTab
-                  active={status == "false" ? "false" : "true"}
-                  value="false"
-                  onPress={() => { setStatus("false") }}
-                  label="Arsip"
-                  icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
-                  n={2} />
-            </View>
+      <View style={[Styles.flex1, themed.background]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DISCUSSION} onDismiss={dismissGuide} />
+         {/* Header controls */}
+         <View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
+            {entityUser.role != "user" && entityUser.role != "coadmin" && (
+               <WrapTab>
+                  <ButtonTab
+                     active={status == "false" ? "false" : "true"}
+                     value="true"
+                     onPress={() => setStatus("true")}
+                     label="Aktif"
+                     icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
+                     n={2}
+                  />
+                  <ButtonTab
+                     active={status == "false" ? "false" : "true"}
+                     value="false"
+                     onPress={() => setStatus("false")}
+                     label="Arsip"
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
+                     n={2}
+                  />
+               </WrapTab>
+            )}
             <InputSearch onChange={setSearch} />
-            {
-               (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-               <View style={[Styles.mv05]}>
-                  <Text>Filter : {nameGroup}</Text>
+            {(entityUser.role == "supadmin" || entityUser.role == "developer") && (
+               <View style={[Styles.mt10, Styles.rowOnly]}>
+                  <Text>Filter :</Text>
+                  <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mh05]} />
                </View>
-            }
+            )}
          </View>
-         <View style={[{ flex: 2 }]}>
-            {
-               loading ?
-                  arrSkeleton.map((item: any, i: number) => {
-                     return (
-                        <SkeletonContent key={i} />
-                     )
-                  })
-                  :
-                  data.length > 0
-                     ?
-                     <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
-                        getItem={getItem}
-                        renderItem={({ item, index }: { item: Props, index: number }) => {
-                           return (
-                              <BorderBottomItem
-                                 key={index}
-                                 onPress={() => { router.push(`/discussion/${item.id}`) }}
-                                 borderType="bottom"
-                                 icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialIcons name="chat" size={25} color={'#384288'} />
-                                    </View>
-                                 }
-                                 title={item.title}
-                                 subtitle={
-                                    status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
-                                 }
-                                 rightTopInfo={item.createdAt}
-                                 desc={item.desc}
-                                 leftBottomInfo={
-                                    <View style={[Styles.rowItemsCenter]}>
-                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                                    </View>
-                                 }
-                                 rightBottomInfo={`${item.total_komentar} Komentar`}
 
-                              />
-                           )
-                        }}
-                        keyExtractor={(item, index) => String(index)}
-                        onEndReached={loadMoreData}
-                        onEndReachedThreshold={0.5}
-                        showsVerticalScrollIndicator={false}
-                        refreshControl={
-                           <RefreshControl
-                              refreshing={refreshing}
-                              onRefresh={handleRefresh}
-                           />
-                        }
+         {/* List */}
+         <View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
+            {isLoading ? (
+               [0, 1, 2, 3, 4].map((_, i) => <SkeletonContent key={i} />)
+            ) : flatData.length === 0 ? (
+               <View style={[Styles.contentItemCenter, Styles.mt30]}>
+                  <Feather name="message-circle" size={42} color={colors.icon + '40'} />
+                  <Text style={[Styles.mt10, Styles.discussionEmptyText, themed.dimmed]}>
+                     Tidak ada diskusi
+                  </Text>
+               </View>
+            ) : (
+               <FlatList
+                  data={flatData}
+                  keyExtractor={(_, i) => String(i)}
+                  showsVerticalScrollIndicator={false}
+                  onEndReached={() => {
+                     if (hasNextPage && !isFetchingNextPage) fetchNextPage()
+                  }}
+                  onEndReachedThreshold={0.5}
+                  refreshControl={
+                     <RefreshControl
+                        refreshing={refreshing}
+                        onRefresh={handleRefresh}
+                        tintColor={colors.icon}
                      />
-                     // data.map((item: any, i: number) => {
-                     //    return (
-                     //       <BorderBottomItem
-                     //          key={i}
-                     //          onPress={() => { router.push(`/discussion/${item.id}`) }}
-                     //          borderType="bottom"
-                     //          icon={
-                     //             <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                     //                <MaterialIcons name="chat" size={25} color={'#384288'} />
-                     //             </View>
-                     //          }
-                     //          title={item.title}
-                     //          subtitle={
-                     //             status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
-                     //          }
-                     //          rightTopInfo={item.createdAt}
-                     //          desc={item.desc}
-                     //          leftBottomInfo={
-                     //             <View style={[Styles.rowItemsCenter]}>
-                     //                <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                     //                <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                     //             </View>
-                     //          }
-                     //          rightBottomInfo={`${item.total_komentar} Komentar`}
+                  }
+                  ItemSeparatorComponent={() => <View style={Styles.discussionSeparator} />}
+                  renderItem={({ item }: { item: Props }) => (
+                     <Pressable
+                        onPress={() => router.push(`/discussion/${item.id}`)}
+                        style={({ pressed }) => [
+                           Styles.discussionCard,
+                           themed.card,
+                           pressed && themed.cardPressed,
+                        ]}
+                     >
+                        {/* Top row: icon + title + status badge */}
+                        <View style={[Styles.rowItemsCenter, Styles.mb08]}>
+                           {/* Discussion icon */}
+                           <View style={[Styles.discussionIconCircle, themed.iconCircle]}>
+                              <Feather name="message-circle" size={20} color={colors.icon} />
+                           </View>
 
-                     //       />
-                     //    )
-                     // })
-                     :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-            }
+                           {/* Title + status badge */}
+                           <View style={[Styles.flex1, Styles.discussionTitleCol]}>
+                              <Text style={[Styles.textDefaultSemiBold, themed.title]} numberOfLines={1}>
+                                 {item.title}
+                              </Text>
+                              {status !== "false" && (
+                                 <View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
+                                    <Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
+                                       {isOpen(item) ? 'Buka' : 'Tutup'}
+                                    </Text>
+                                 </View>
+                              )}
+                           </View>
+                        </View>
+
+                        {/* Description */}
+                        {item.desc ? (
+                           <Text
+                              style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]}
+                              numberOfLines={2}
+                           >
+                              {item.desc.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
+                           </Text>
+                        ) : null}
+
+                        {/* Bottom row: comment count + date */}
+                        <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
+                           <View style={Styles.rowItemsCenter}>
+                              <Feather name="message-square" size={14} color={colors.dimmed} />
+                              <Text style={[Styles.discussionCommentText, themed.dimmed]}>
+                                 {item.total_komentar} Komentar
+                              </Text>
+                           </View>
+                           <Text style={[Styles.discussionDateText, themed.dimmed]}>
+                              {item.createdAt}
+                           </Text>
+                        </View>
+                     </Pressable>
+                  )}
+               />
+            )}
          </View>
       </View>
    );
-}
+}

app/(application)/discussion/member/[id].tsx

@@ -1,19 +1,18 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
-import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import MenuItemRow from "@/components/menuItemRow";
-import SkeletonTwoItem from "@/components/skeletonTwoItem";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import Text from '@/components/Text';
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
@@ -23,8 +22,11 @@ type Props = {
    img: string
 }
 
+const SKELETON_COUNT = 5
+
 export default function MemberDiscussionDetail() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props[]>([])
@@ -32,11 +34,12 @@ export default function MemberDiscussionDetail() {
    const [chooseUser, setChooseUser] = useState({ idUser: '', name: '', img: '' })
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
    const [loading, setLoading] = useState(true)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const canManage = entityUser.role !== "user" && entityUser.role !== "coadmin"
 
-   async function handleLoad(loading: boolean) {
+   async function handleLoad(showLoadingIndicator: boolean) {
       try {
-         setLoading(loading)
+         setLoading(showLoadingIndicator)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat: 'anggota' })
          setData(response.data)
@@ -47,111 +50,147 @@ export default function MemberDiscussionDetail() {
       }
    }
 
-   useEffect(() => {
-      handleLoad(false)
-   }, [update]);
-
-
-   useEffect(() => {
-      handleLoad(true)
-   }, []);
+   useEffect(() => { handleLoad(false) }, [update]);
+   useEffect(() => { handleLoad(true) }, []);
 
    async function handleDeleteUser() {
       try {
          const hasil = await decryptToken(String(token?.current))
          await apiDeleteMemberDiscussionGeneral({ user: hasil, idUser: chooseUser.idUser }, id)
-         Toast.show({ type: 'small', text1: 'Berhasil mengeluarkan anggota dari diskusi', })
+         Toast.show({ type: 'small', text1: 'Berhasil mengeluarkan anggota dari diskusi' })
          handleLoad(false)
-      } catch (error) {
-         console.error(error)
+      } catch (error: any) {
+         console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengeluarkan anggota" })
       } finally {
          setModal(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Anggota Diskusi',
-               headerTitleAlign: 'center',
+               header: () => (
+                  <AppHeader
+                     title="Anggota Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15]}>
-               <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
-               <View style={[Styles.wrapPaper, Styles.mb100]}>
-                  {
-                     entityUser.role != "user" && entityUser.role != "coadmin" &&
-                     <BorderBottomItem
-                        onPress={() => { router.push(`/discussion/add-member/${id}`) }}
-                        borderType="none"
-                        icon={
-                           <View style={[Styles.iconContent, ColorsStatus.gray]}>
-                              <Feather name="user-plus" size={25} color={'#384288'} />
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
+            <View style={[Styles.p15, Styles.mb100]}>
+
+               {/* Tombol tambah anggota */}
+               {canManage && (
+                  <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.mb15,
+                     { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                     <Pressable
+                        onPress={() => router.push(`/discussion/add-member/${id}`)}
+                        style={Styles.sectionActionRow}
+                     >
+                        <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '18' }]}>
+                           <MaterialCommunityIcons name="account-plus-outline" size={18} color={colors.icon} />
+                        </View>
+                        <View style={Styles.flex1}>
+                           <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tambah Anggota</Text>
+                        </View>
+                        <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                     </Pressable>
+                  </View>
+               )}
+
+               {/* Full list */}
+               <View style={[Styles.wrapPaper, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
+                  <View style={[Styles.sectionActionRow, { padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                        <MaterialIcons name="people" size={18} color={colors.dimmed} />
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Anggota</Text>
+                     {!loading && (
+                        <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>{data.length} anggota</Text>
+                     )}
+                  </View>
+                  {loading
+                     ? Array.from({ length: SKELETON_COUNT }).map((_, i) => (
+                        <View
+                           key={i}
+                           style={[Styles.rowItemsCenter, Styles.ph15,
+                              { paddingVertical: 14, gap: 14, borderBottomWidth: i < SKELETON_COUNT - 1 ? 1 : 0, borderBottomColor: colors.icon + '14' }]}
+                        >
+                           <View style={[Styles.userProfileExtraSmall, { backgroundColor: colors.icon + '20', borderRadius: 100 }]} />
+                           <View style={{ height: 13, borderRadius: 6, flex: 1, backgroundColor: colors.icon + '20', maxWidth: 140 + (i % 3) * 30 }} />
+                        </View>
+                     ))
+                     : data.length === 0
+                        ? (
+                           <View style={[Styles.contentItemCenter, { paddingVertical: 40 }]}>
+                              <MaterialIcons name="people-outline" size={34} color={colors.icon + '50'} />
+                              <Text style={[Styles.textMediumNormal, Styles.mt10, { color: colors.dimmed }]}>Belum ada anggota</Text>
                            </View>
-                        }
-                        title="Tambah Anggota"
-                     />
-                  }
-                  {
-                     loading ?
-                        arrSkeleton.map((item, index) => {
-                           return (
-                              <SkeletonTwoItem key={index} />
-                           )
-                        })
-                        :
-                        data.map((item, index) => {
-                           return (
-                              <BorderBottomItem
-                                 key={index}
-                                 borderType="bottom"
-                                 icon={
-                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                                 }
-                                 title={item.name}
-                                 onPress={() => {
-                                    setChooseUser(item)
-                                    setModal(true)
-                                 }}
-                              />
-                           )
-                        })
+                        )
+                        : data.map((item, index) => (
+                           <Pressable
+                              key={index}
+                              onPress={() => { setChooseUser(item); setModal(true) }}
+                              style={({ pressed }) => [
+                                 Styles.rowItemsCenter, Styles.ph15,
+                                 {
+                                    paddingVertical: 13, gap: 14,
+                                    borderBottomWidth: index < data.length - 1 ? 1 : 0,
+                                    borderBottomColor: colors.icon + '14',
+                                    backgroundColor: pressed ? colors.icon + '0E' : 'transparent',
+                                 },
+                              ]}
+                           >
+                              <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                              <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>
+                                 {item.name}
+                              </Text>
+                              <MaterialCommunityIcons name="chevron-right" size={18} color={colors.icon + '60'} />
+                           </Pressable>
+                        ))
                   }
                </View>
+
             </View>
          </ScrollView>
 
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={chooseUser.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
                   title="Lihat Profil"
                   onPress={() => {
                      setModal(false)
                      router.push(`/member/${chooseUser.idUser}`)
                   }}
                />
-
-               <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
-                  title="Keluarkan"
-                  onPress={() => {
-                     setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
-                        onPress: () => {
-                           handleDeleteUser()
-                        }
-                     })
-
-                  }}
-               />
+               {canManage && (
+                  <MenuItemRow
+                     icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
+                     title="Keluarkan"
+                     onPress={() => {
+                        setModal(false)
+                        setTimeout(() => setShowDeleteModal(true), 600)
+                     }}
+                  />
+               )}
             </View>
          </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => { setShowDeleteModal(false); handleDeleteUser() }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
       </SafeAreaView>
    )
 }

app/(application)/division/[id]/(fitur-division)/_layout.tsx

@@ -1,4 +1,4 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import AppHeader from "@/components/AppHeader"
 import HeaderRightDiscussionList from "@/components/discussion/headerDiscussionList"
 import HeaderRightTaskList from "@/components/task/headerTaskList"
 import { Headers } from "@/constants/Headers"
@@ -9,22 +9,49 @@ export default function RootLayout() {
       <>
          <Stack screenOptions={Headers.shadow}>
             <Stack.Screen name="task/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Tugas Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightTaskList />
+               // headerRight: () => <HeaderRightTaskList />
+               header: () => (
+                  <AppHeader
+                     title="Tugas Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <HeaderRightTaskList />
+                     }
+                  />
+               )
             }} />
             <Stack.Screen name="discussion/index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Diskusi Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDiscussionList />
+               // headerRight: () => <HeaderRightDiscussionList />
+               header: () => (
+                  <AppHeader
+                     title="Diskusi Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <HeaderRightDiscussionList />
+                     }
+                  />
+               )
             }} />
             <Stack.Screen name="calendar/history"
                options={{
-                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+                  // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                   headerTitle: 'Riwayat Acara',
                   headerTitleAlign: 'center',
+                  header: () => (
+                     <AppHeader
+                        title="Riwayat Acara"
+                        showBack={true}
+                        onPressLeft={() => router.back()}
+                     />
+                  )
                }}
             />
          </Stack>

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx

@@ -1,13 +1,15 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiAddMemberCalendar, apiGetCalendarOne, apiGetDivisionMember } from "@/lib/api";
 import { setUpdateCalendar } from "@/lib/calendarUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -22,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberCalendarEvent() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.calendarUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -31,6 +34,7 @@ export default function AddMemberCalendarEvent() {
    const [selectMember, setSelectMember] = useState<any[]>([])
    const [search, setSearch] = useState('')
    const [idCalendar, setIdCalendar] = useState('')
+   const [loading, setLoading] = useState(false)
 
    async function handleLoadOldMember() {
       try {
@@ -78,6 +82,7 @@ export default function AddMemberCalendarEvent() {
 
    async function handleAddMember() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiAddMemberCalendar({ id: idCalendar, data: { user: hasil, member: selectMember } })
          if (response.success) {
@@ -87,27 +92,47 @@ export default function AddMemberCalendarEvent() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="update"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Tambah Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={selectMember.length == 0 || loading ? true : false}
+                           onPress={() => {
+                              handleAddMember()
+                           }}
+                        />
+                     }
                   />
                )
             }}
@@ -118,13 +143,13 @@ export default function AddMemberCalendarEvent() {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -133,9 +158,12 @@ export default function AddMemberCalendarEvent() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+               style={[Styles.h100]}
+            >
                {
                   data.length > 0 ?
                      data.map((item: any, index: any) => {
@@ -143,23 +171,22 @@ export default function AddMemberCalendarEvent() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, {borderColor: colors.icon + '20'}]}
                               onPress={() => {
                                  !found && onChoose(item.idUser, item.name, item.img)
-                                 onChoose(item.idUser, item.name, item.img)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10, { width: '80%' }]}>
                                     <Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefault]}>{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx

@@ -1,4 +1,4 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import AppHeader from "@/components/AppHeader"
 import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import { InputDate } from "@/components/inputDate"
 import { InputForm } from "@/components/inputForm"
@@ -9,18 +9,23 @@ import { valueTypeEventRepeat } from "@/constants/TypeEventRepeat"
 import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api"
 import { stringToDateTime } from "@/lib/fun_stringToDate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider";
+import { useHeaderHeight } from "@react-navigation/elements"
 import { Stack, router, useLocalSearchParams } from "expo-router"
 import moment from "moment"
 import { useEffect, useState } from "react"
-import { SafeAreaView, ScrollView, View } from "react-native"
+import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 
 export default function EditEventCalendar() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const [choose, setChoose] = useState({ val: "", label: "" })
    const [isSelect, setSelect] = useState(false)
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>()
    const [idCalendar, setIdCalendar] = useState('')
+   const [loading, setLoading] = useState(false)
+   const headerHeight = useHeaderHeight()
 
    const [error, setError] = useState({
       title: false,
@@ -52,9 +57,11 @@ export default function EditEventCalendar() {
          setData({ ...response.data, dateStart: moment(response.data.dateStartFormat, 'DD-MM-YYYY').format('DD-MM-YYYY') })
          setIdCalendar(response.data.idCalendar)
          setChoose({ val: response.data.repeatEventTyper, label: valueTypeEventRepeat.find((item) => item.id == response.data.repeatEventTyper)?.name || "" })
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Gagal mendapatkan data', })
+         const message = error?.response?.data?.message || "Gagal mendapatkan data"
+
+         Toast.show({ type: 'small', text1: message })
       }
    }
 
@@ -140,6 +147,7 @@ export default function EditEventCalendar() {
 
    async function handleUpdate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiUpdateCalendar({ data: { ...data, user: hasil }, id: idCalendar })
          if (response.success) {
@@ -148,118 +156,144 @@ export default function EditEventCalendar() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal mengubah acara', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengubah acara"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Edit Acara',
                headerTitleAlign: 'center',
-               headerRight: () =>
-                  <ButtonSaveHeader
-                     disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventTyper == ""}
-                     category="update-calendar"
-                     onPress={() => {
-                        handleUpdate()
-                     }}
+               // headerRight: () =>
+               //    <ButtonSaveHeader
+               //       disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventTyper == "" || loading}
+               //       category="update-calendar"
+               //       onPress={() => {
+               //          handleUpdate()
+               //       }}
+               //    />
+               header: () => (
+                  <AppHeader
+                     title="Edit Acara"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventTyper == "" || loading}
+                           category="update-calendar"
+                           onPress={() => {
+                              handleUpdate()
+                           }}
+                        />
+                     }
                   />
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
-               <InputForm
-                  label="Nama Acara"
-                  type="default"
-                  placeholder="Nama Acara"
-                  required
-                  bg="white"
-                  value={data.title}
-                  onChange={(val) => validationForm("title", val)}
-                  error={error.title}
-                  errorText="Nama acara tidak boleh kosong"
-               />
-               <InputDate
-                  onChange={(val) => validationForm("dateStart", val)}
-                  mode="date"
-                  value={data.dateStart}
-                  label="Tanggal Acara"
-                  required
-                  error={error.dateStart}
-                  errorText="Tanggal acara tidak boleh kosong"
-                  placeholder="Pilih Tanggal Acara"
-               />
-               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
-                  <View style={[{ width: "48%" }]}>
-                     <InputDate
-                        onChange={(val) => validationForm("timeStart", val)}
-                        mode="time"
-                        value={data.timeStart}
-                        label="Waktu Awal"
-                        required
-                        error={error.timeStart}
-                        errorText="Waktu awal tidak valid"
-                        placeholder="--:--"
-                     />
-                  </View>
-                  <View style={[{ width: "48%" }]}>
-                     <InputDate
-                        onChange={(val) => validationForm("timeEnd", val)}
-                        mode="time"
-                        value={data.timeEnd}
-                        label="Waktu Akhir"
-                        required
-                        error={error.timeEnd}
-                        errorText="Waktu akhir tidak valid"
-                        placeholder="--:--"
-                     />
+         <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            keyboardVerticalOffset={headerHeight}
+         >
+            <ScrollView>
+               <View style={[Styles.p15]}>
+                  <InputForm
+                     label="Nama Acara"
+                     type="default"
+                     placeholder="Nama Acara"
+                     required
+                     bg={colors.card}
+                     value={data.title}
+                     onChange={(val) => validationForm("title", val)}
+                     error={error.title}
+                     errorText="Nama acara tidak boleh kosong"
+                  />
+                  <InputDate
+                     onChange={(val) => validationForm("dateStart", val)}
+                     mode="date"
+                     value={data.dateStart}
+                     label="Tanggal Acara"
+                     required
+                     error={error.dateStart}
+                     errorText="Tanggal acara tidak boleh kosong"
+                     placeholder="Pilih Tanggal Acara"
+                  />
+                  <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
+                     <View style={[{ width: "48%" }]}>
+                        <InputDate
+                           onChange={(val) => validationForm("timeStart", val)}
+                           mode="time"
+                           value={data.timeStart}
+                           label="Waktu Awal"
+                           required
+                           error={error.timeStart}
+                           errorText="Waktu awal tidak valid"
+                           placeholder="--:--"
+                        />
+                     </View>
+                     <View style={[{ width: "48%" }]}>
+                        <InputDate
+                           onChange={(val) => validationForm("timeEnd", val)}
+                           mode="time"
+                           value={data.timeEnd}
+                           label="Waktu Akhir"
+                           required
+                           error={error.timeEnd}
+                           errorText="Waktu akhir tidak valid"
+                           placeholder="--:--"
+                        />
+                     </View>
                   </View>
+                  <InputForm
+                     label="Link Meet"
+                     type="default"
+                     placeholder="Link Meet"
+                     bg={colors.card}
+                     value={data.linkMeet}
+                     onChange={(val) => validationForm("linkMeet", val)}
+                  />
+                  <SelectForm
+                     bg={colors.card}
+                     label="Ulangi Acara"
+                     placeholder="Ulangi Acara"
+                     value={choose.label}
+                     required
+                     onPress={() => { setSelect(true) }}
+                  />
+                  <InputForm
+                     label="Jumlah Pengulangan"
+                     type="numeric"
+                     placeholder="Jumlah Pengulangan"
+                     required
+                     bg={colors.card}
+                     value={String(data.repeatValue)}
+                     onChange={(val) => validationForm("repeatValue", val)}
+                     error={error.repeatValue}
+                     errorText="Jumlah pengulangan tidak valid"
+                     disable={choose.val == "once"}
+                  />
+                  <InputForm
+                     label="Deskripsi"
+                     type="default"
+                     placeholder="Deskripsi"
+                     bg={colors.card}
+                     value={data.desc}
+                     onChange={(val) => validationForm("desc", val)}
+                     multiline
+                  />
                </View>
-               <InputForm
-                  label="Link Meet"
-                  type="default"
-                  placeholder="Link Meet"
-                  bg="white"
-                  value={data.linkMeet}
-                  onChange={(val) => validationForm("linkMeet", val)}
-               />
-               <SelectForm
-                  bg="white"
-                  label="Ulangi Acara"
-                  placeholder="Ulangi Acara"
-                  value={choose.label}
-                  required
-                  onPress={() => { setSelect(true) }}
-               />
-               <InputForm
-                  label="Jumlah Pengulangan"
-                  type="numeric"
-                  placeholder="Jumlah Pengulangan"
-                  required
-                  bg="white"
-                  value={String(data.repeatValue)}
-                  onChange={(val) => validationForm("repeatValue", val)}
-                  error={error.repeatValue}
-                  errorText="Jumlah pengulangan tidak valid"
-                  disable={choose.val == "once"}
-               />
-               <InputForm
-                  label="Deskripsi"
-                  type="default"
-                  placeholder="Deskripsi"
-                  bg="white"
-                  value={data.desc}
-                  onChange={(val) => validationForm("desc", val)}
-                  multiline
-               />
-            </View>
-         </ScrollView>
+            </ScrollView>
+         </KeyboardAvoidingView>
+
 
          <ModalSelect
             category={"type-event-repeat"}

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx

@@ -1,20 +1,21 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
-import BorderBottomItem from "@/components/borderBottomItem"
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
+import AppHeader from "@/components/AppHeader"
 import DrawerBottom from "@/components/drawerBottom"
+import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
 import ImageUser from "@/components/imageNew"
 import MenuItemRow from "@/components/menuItemRow"
-import Skeleton from "@/components/skeleton"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import Text from "@/components/Text"
+import { ConstEnv } from "@/constants/ConstEnv"
 import Styles from "@/constants/Styles"
 import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
-import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { useTheme } from "@/providers/ThemeProvider"
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import Clipboard from "@react-native-clipboard/clipboard"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
 
@@ -42,6 +43,7 @@ type PropsMember = {
 }
 
 export default function DetailEventCalendar() {
+   const { colors } = useTheme()
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const [data, setData] = useState<Props>()
    const [member, setMember] = useState<PropsMember[]>([])
@@ -52,6 +54,7 @@ export default function DetailEventCalendar() {
    const dispatch = useDispatch()
    const entityUser = useSelector((state: any) => state.user);
    const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [loading, setLoading] = useState(true)
    const [refreshing, setRefreshing] = useState(false)
 
@@ -70,7 +73,7 @@ export default function DetailEventCalendar() {
       }
    }
 
-   async function handleLoad(loading:boolean) {
+   async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
@@ -114,6 +117,11 @@ export default function DetailEventCalendar() {
       handleLoadMember();
    }, [update.member]);
 
+   const handleCopy = (text: string) => {
+      Clipboard.setString(text);
+      Toast.show({ type: 'small', text1: 'Berhasil menyalin link', })
+   };
+
    async function handleDeleteUser() {
       try {
          const hasil = await decryptToken(String(token?.current));
@@ -126,9 +134,11 @@ export default function DetailEventCalendar() {
             dispatch(setUpdateCalendar({ ...update, member: !update.member }));
          }
          Toast.show({ type: 'small', text1: response.message, })
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal menghapus anggota"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setModalMember(false)
       }
@@ -143,120 +153,142 @@ export default function DetailEventCalendar() {
       setRefreshing(false)
    };
 
+   const canManage = !((entityUser.role === "user" || entityUser.role === "coadmin") && !isMemberDivision)
+
+   const repeatLabel: Record<string, string> = {
+      once: 'Acara 1 Kali',
+      daily: 'Setiap Hari',
+      weekly: 'Mingguan',
+      monthly: 'Bulanan',
+      yearly: 'Tahunan',
+   }
+
+   function InfoRow({ icon, label, value, onCopy }: { icon: string, label: string, value?: string, onCopy?: () => void }) {
+      return (
+         <View style={[Styles.sectionActionRow, { paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
+            <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+               <MaterialCommunityIcons name={icon as any} size={18} color={colors.dimmed} />
+            </View>
+            <View style={Styles.flex1}>
+               <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginBottom: 2 }]}>{label}</Text>
+               {loading
+                  ? <View style={{ height: 13, borderRadius: 6, backgroundColor: colors.icon + '20', width: '70%' }} />
+                  : <Text style={[Styles.textDefault, { color: colors.text }]}>{value || '-'}</Text>
+               }
+            </View>
+            {onCopy && !loading && value && (
+               <Pressable onPress={onCopy} style={{ padding: 4 }}>
+                  <MaterialCommunityIcons name="content-copy" size={16} color={colors.dimmed} />
+               </Pressable>
+            )}
+         </View>
+      )
+   }
+
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Detail Acara',
-               headerTitleAlign: 'center',
-               headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
+               header: () => (
+                  <AppHeader
+                     title="Detail Acara"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        (entityUser.role === "user" || entityUser.role === "coadmin") && !isMemberDivision
+                           ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
+                     }
+                  />
+               )
             }}
          />
          <ScrollView
-            style={[Styles.h100]}
-            refreshControl={
-               <RefreshControl
-                  refreshing={refreshing}
-                  onRefresh={handleRefresh}
-               />
-            }
+            showsVerticalScrollIndicator={false}
+            style={Styles.h100}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
          >
-            <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.mb15]}>
-                  <View style={Styles.rowItemsCenter}>
-                     <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           : <Text style={[Styles.textDefault]}>{data?.title}</Text>
-                     }
+            <View style={[Styles.p15, Styles.mb100]}>
 
+               {/* Info acara */}
+               <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow, Styles.mb15,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
+                  <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }}>
+                     <View style={Styles.sectionActionRow}>
+                        <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                           <MaterialCommunityIcons name="calendar-text" size={18} color={colors.dimmed} />
+                        </View>
+                        <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Detail Acara</Text>
+                     </View>
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           :
-                           <Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
-                     }
+                  <View style={{ paddingHorizontal: 16 }}>
+                     <InfoRow icon="format-title" label="Judul" value={data?.title} />
+                     <InfoRow icon="calendar-month-outline" label="Tanggal" value={data?.dateStart} />
+                     <InfoRow icon="clock-outline" label="Waktu" value={data ? `${data.timeStart} – ${data.timeEnd}` : undefined} />
+                     <InfoRow icon="repeat" label="Pengulangan" value={data?.repeatEventTyper ? repeatLabel[data.repeatEventTyper] : undefined} />
+                     <InfoRow icon="link-variant" label="Link Meet" value={data?.linkMeet} onCopy={data?.linkMeet ? () => handleCopy(data.linkMeet) : undefined} />
+                     <View style={[Styles.sectionActionRow, { paddingVertical: 10, alignItems: 'flex-start' }]}>
+                        <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                           <MaterialCommunityIcons name="card-text-outline" size={18} color={colors.dimmed} />
+                        </View>
+                        <View style={Styles.flex1}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginBottom: 2 }]}>Deskripsi</Text>
+                           {loading
+                              ? <View style={{ height: 13, borderRadius: 6, backgroundColor: colors.icon + '20', width: '80%' }} />
+                              : <Text style={[Styles.textDefault, { color: colors.text, lineHeight: 22 }]}>{data?.desc || '-'}</Text>
+                           }
+                        </View>
+                     </View>
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           :
-                           <Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
-                     }
+               </View>
+
+               {/* Daftar anggota */}
+               <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
+
+                  <View style={[Styles.sectionActionRow, { padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                        <MaterialIcons name="people" size={18} color={colors.dimmed} />
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Anggota</Text>
+                     <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>{member.length} anggota</Text>
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           :
-                           <Text style={[Styles.textDefault]}>
+
+                  {member.length === 0
+                     ? (
+                        <View style={[Styles.contentItemCenter, { paddingVertical: 40 }]}>
+                           <MaterialIcons name="people-outline" size={34} color={colors.icon + '50'} />
+                           <Text style={[Styles.textMediumNormal, Styles.mt10, { color: colors.dimmed }]}>Belum ada anggota</Text>
+                        </View>
+                     )
+                     : member.map((item, index) => (
+                        <Pressable
+                           key={index}
+                           onPress={() => {
+                              if (!canManage) return
+                              setMemberChoose({ id: item.idUser, name: item.name })
+                              setModalMember(true)
+                           }}
+                           style={({ pressed }) => [
+                              Styles.rowItemsCenter, Styles.ph15,
                               {
-                                 data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
-                                    data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
-                                       data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
-                                          data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
-                                             data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
-                                                ''
-                              }
-                           </Text>
-                     }
-                  </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           :
-                           <Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
-                     }
-                  </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           :
-                           <Text style={[Styles.textDefault]}>{data?.desc}</Text>
-                     }
-                  </View>
+                                 paddingVertical: 12, gap: 14,
+                                 borderBottomWidth: index < member.length - 1 ? 1 : 0,
+                                 borderBottomColor: colors.icon + '14',
+                                 backgroundColor: pressed && canManage ? colors.icon + '0E' : 'transparent',
+                              },
+                           ]}
+                        >
+                           <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                           <View style={Styles.flex1}>
+                              <Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
+                              <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]} numberOfLines={1}>{item.email}</Text>
+                           </View>
+                           {canManage && <MaterialCommunityIcons name="chevron-right" size={18} color={colors.icon + '60'} />}
+                        </Pressable>
+                     ))
+                  }
                </View>
 
-               <View style={[Styles.mb15]}>
-                  <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
-                     <Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text>
-                  </View>
-
-                  <View style={[Styles.wrapPaper]}>
-                     {
-                        member.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType="bottom"
-                              icon={<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />}
-                              title={item.name}
-                              subtitle={item.email}
-                              onPress={() => {
-                                 if ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision) {
-                                    null
-                                 } else {
-                                    setMemberChoose({ id: item.idUser, name: item.name })
-                                    setModalMember(true)
-                                 }
-                              }}
-                           />
-                        ))
-                     }
-                  </View>
-               </View>
             </View>
          </ScrollView>
 
@@ -264,7 +296,7 @@ export default function DetailEventCalendar() {
          <DrawerBottom animation="slide" isVisible={isModalMember} setVisible={setModalMember} title={memberChoose.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
                   title="Lihat Profil"
                   onPress={() => {
                      setModalMember(false)
@@ -273,22 +305,30 @@ export default function DetailEventCalendar() {
                />
 
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
                   title="Keluarkan"
                   onPress={() => {
                      setModalMember(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
-                        onPress: () => {
-                           handleDeleteUser()
-                        }
-                     })
-
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                   }}
                />
             </View>
          </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteUser()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+         />
       </SafeAreaView>
    )
 }

app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx

@@ -1,14 +1,16 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiCreateCalendar, apiGetDivisionMember } from "@/lib/api";
 import { setFormCreateCalendar } from "@/lib/calendarCreate";
 import { setUpdateCalendar } from "@/lib/calendarUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -23,6 +25,7 @@ type Props = {
 }
 
 export default function CreateCalendarAddMember() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props[]>([])
@@ -31,6 +34,7 @@ export default function CreateCalendarAddMember() {
    const update = useSelector((state: any) => state.calendarCreate)
    const dispatch = useDispatch()
    const updateRefresh = useSelector((state: any) => state.calendarUpdate)
+   const [loading, setLoading] = useState(false)
 
 
 
@@ -58,6 +62,7 @@ export default function CreateCalendarAddMember() {
 
    async function handleAddMember() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiCreateCalendar({ data: { ...update, user: hasil, idDivision: id, member: selectMember } })
          if (response.success) {
@@ -78,24 +83,42 @@ export default function CreateCalendarAddMember() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal membuat acara', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal membuat acara"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Pilih Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="create"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => { handleAddMember() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="create"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => { handleAddMember() }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Pilih Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="create"
+                           disable={selectMember.length == 0 || loading ? true : false}
+                           onPress={() => { handleAddMember() }}
+                        />
+                     }
                   />
                )
             }}
@@ -107,13 +130,13 @@ export default function CreateCalendarAddMember() {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -122,9 +145,12 @@ export default function CreateCalendarAddMember() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+               style={[Styles.h100]}
+            >
 
                {
                   data.length > 0 ?
@@ -132,17 +158,17 @@ export default function CreateCalendarAddMember() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => { onChoose(item.idUser, item.name, item.img) }}
                            >
                               <View style={[Styles.rowItemsCenter, Styles.w70]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

app/(application)/division/[id]/(fitur-division)/calendar/create.tsx

@@ -1,3 +1,4 @@
+import AppHeader from "@/components/AppHeader";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonNextHeader from "@/components/buttonNextHeader";
 import { InputDate } from "@/components/inputDate";
@@ -7,6 +8,8 @@ import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
 import { setFormCreateCalendar } from "@/lib/calendarCreate";
 import { stringToDateTime } from "@/lib/fun_stringToDate";
+import { useHeaderHeight } from '@react-navigation/elements';
+import { useTheme } from "@/providers/ThemeProvider";
 import { Stack, router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import {
@@ -19,11 +22,13 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CalendarDivisionCreate() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [choose, setChoose] = useState({ val: "", label: "" })
    const [isSelect, setSelect] = useState(false)
    const update = useSelector((state: any) => state.calendarCreate)
    const dispatch = useDispatch()
+   const headerHeight = useHeaderHeight();
    const [error, setError] = useState({
       title: false,
       dateStart: false,
@@ -123,38 +128,54 @@ export default function CalendarDivisionCreate() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Tambah Acara",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonNextHeader
-                     onPress={() => { handleSetData() }}
-                     disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
+               // headerRight: () => (
+               //    <ButtonNextHeader
+               //       onPress={() => { handleSetData() }}
+               //       disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Tambah Acara"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonNextHeader
+                           onPress={() => { handleSetData() }}
+                           disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+               style={[Styles.h100]}
+            >
                <View style={[Styles.p15]}>
                   <InputForm
                      label="Nama Acara"
                      type="default"
                      placeholder="Nama Acara"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={data.title}
                      onChange={(val) => validationForm("title", val)}
                      error={error.title}
@@ -200,12 +221,12 @@ export default function CalendarDivisionCreate() {
                      label="Link Meet"
                      type="default"
                      placeholder="Link Meet"
-                     bg="white"
+                     bg={colors.card}
                      value={data.linkMeet}
                      onChange={(val) => validationForm("linkMeet", val)}
                   />
                   <SelectForm
-                     bg="white"
+                     bg={colors.card}
                      label="Ulangi Acara"
                      placeholder="Ulangi Acara"
                      value={choose.label}
@@ -217,7 +238,7 @@ export default function CalendarDivisionCreate() {
                      type="numeric"
                      placeholder="Jumlah Pengulangan"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={String(data.repeatValue)}
                      onChange={(val) => validationForm("repeatValue", val)}
                      error={error.repeatValue}
@@ -228,7 +249,7 @@ export default function CalendarDivisionCreate() {
                      label="Deskripsi"
                      type="default"
                      placeholder="Deskripsi"
-                     bg="white"
+                     bg={colors.card}
                      value={data.desc}
                      onChange={(val) => validationForm("desc", val)}
                      multiline

app/(application)/division/[id]/(fitur-division)/calendar/history.tsx

@@ -1,10 +1,10 @@
 import InputSearch from "@/components/inputSearch";
 import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarHistory } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { FlatList, View, VirtualizedList } from "react-native";
@@ -15,6 +15,7 @@ type Props = {
    data: []
 }
 export default function CalendarHistory() {
+   const { colors, activeTheme } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const { token, decryptToken } = useAuthSession();
    const [data, setData] = useState<Props[]>([])
@@ -64,11 +65,11 @@ export default function CalendarHistory() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             <InputSearch onChange={(val) => setSearch(val)} />
          </View>
-         <View style={[{ flex: 2, }]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
                loading ?
                   arrSkeleton.map((item, index) => (
@@ -81,7 +82,7 @@ export default function CalendarHistory() {
                      getItem={getItem}
                      renderItem={({ item, index }: { item: Props, index: number }) => {
                         return (
-                           <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
+                           <View key={index} style={[{ flexDirection: 'row' }, Styles.mb05, Styles.borderAll, { backgroundColor: colors.card }, Styles.p10, Styles.round05, { borderColor: colors.icon + '20' }]}>
                               <View style={[Styles.mr10, Styles.ph05]}>
                                  <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
                                  <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
@@ -89,7 +90,7 @@ export default function CalendarHistory() {
                               <View style={[{ flex: 1 }]}>
                                  <FlatList data={item.data}
                                     renderItem={({ item, index }: { item: { title: string, timeStart: string, timeEnd: string }, index: number }) => (
-                                       <View key={index} style={[Styles.mb05, Styles.w80]}>
+                                       <View key={index} style={[Styles.mb05]}>
                                           <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title}</Text>
                                           <Text style={[Styles.textDefault]}>{item.timeStart} | {item.timeEnd}</Text>
                                        </View>

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -1,4 +1,5 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
+import GuideOverlay from "@/components/GuideOverlay";
 import HeaderRightCalendarList from "@/components/calendar/headerCalendarList";
 import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
 import EventItem from "@/components/eventItem";
@@ -6,9 +7,11 @@ import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
+import { GUIDE_DIVISION_CALENDAR } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
-import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
 import 'intl/locale-data/jsonp/id';
@@ -35,6 +38,7 @@ type Props = {
 };
 
 export default function CalendarDivision() {
+   const { colors, activeTheme } = useTheme();
    const [selected, setSelected] = useState<any>(new Date())
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
@@ -45,6 +49,7 @@ export default function CalendarDivision() {
    const [loading, setLoading] = useState(true)
    const [loadingBtn, setLoadingBtn] = useState(false)
    const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-calendar')
 
 
    async function handleLoad(loading: boolean) {
@@ -53,7 +58,7 @@ export default function CalendarDivision() {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetCalendarByDateDivision({
             user: hasil,
-            date: dayjs(selected).format("YYYY-MM-DD"),
+            date: moment(selected).format("YYYY-MM-DD"),
             division: id,
          });
          setData(response.data);
@@ -71,14 +76,16 @@ export default function CalendarDivision() {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetIndicatorCalendar({
             user: hasil,
-            date: dayjs(newDate).format("YYYY-MM-DD"),
+            date: moment(newDate).format("YYYY-MM-DD"),
             division: id,
          });
          setDataIndicator(response.data);
       } catch (error) {
          console.error(error);
       } finally {
-         setLoadingBtn(false)
+         setTimeout(() => {
+            setLoadingBtn(false)
+         }, 500)
       }
    }
 
@@ -111,65 +118,76 @@ export default function CalendarDivision() {
                text={day.text}
                isSelected={day.isSelected}
                isSign={sign}
+               onPress={() => setSelected(new Date(today))}
             />
          );
       },
       IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}>
-         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : 'black'} />
+         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : colors.text} />
       </Pressable>,
       IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}>
-         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : 'black'} />
+         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : colors.text} />
       </Pressable>,
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Kalender",
                headerTitleAlign: "center",
-               headerRight: () => <HeaderRightCalendarList />,
+               // headerRight: () => <HeaderRightCalendarList />,
+               header: () => (
+                  <AppHeader
+                     title="Kalender"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightCalendarList />}
+                  />
+               )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_CALENDAR} onDismiss={dismissGuide} />
          <ScrollView
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
             style={[Styles.h100]}
          >
             <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.p10]}>
+               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <Datepicker
                      components={components}
                      mode="single"
                      date={selected}
                      month={month}
-                     onChange={({ date }) => setSelected(date)}
+                     onMonthChange={(month) => setMonth(month)}
                      styles={{
                         selected: Styles.selectedDate,
-                        month_label: Styles.cBlack,
-                        month_selector_label: Styles.cBlack,
-                        year_label: Styles.cBlack,
-                        year_selector_label: Styles.cBlack,
-                        day_label: Styles.cBlack,
-                        time_label: Styles.cBlack,
-                        weekday_label: Styles.cBlack,
+                        month_label: { color: colors.text },
+                        month_selector_label: { color: colors.text },
+                        year_label: { color: colors.text },
+                        year_selector_label: { color: colors.text },
+                        day_label: { color: colors.text },
+                        time_label: { color: colors.text },
+                        weekday_label: { color: colors.text },
                      }}
                   />
                </View>
                <View style={[Styles.mb15, Styles.mt15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         loading ?
                            <>
@@ -192,7 +210,7 @@ export default function CalendarDivision() {
                                  />
                               ))
                            ) : (
-                              <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
+                              <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada acara</Text>
                            )
                      }
                   </View>

app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx

@@ -1,84 +1,148 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
+import MenuItemRow from "@/components/menuItemRow";
+import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiEditDiscussion, apiGetDiscussionOne } from "@/lib/api";
 import { setUpdateDiscussion } from "@/lib/discussionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function DiscussionDivisionEdit() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const [data, setData] = useState("");
    const update = useSelector((state: any) => state.discussionUpdate);
    const dispatch = useDispatch();
+   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
+
+   const visibleOldFiles = dataFile.filter(v => !v.delete)
+   const totalFiles = fileForm.length + visibleOldFiles.length
 
    async function handleLoad() {
       try {
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetDiscussionOne({
-            id: detail,
-            user: hasil,
-            cat: "data",
-         });
+         const response = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "data" });
+         const response2 = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "file" });
          setData(response.data.desc);
+         setDataFile(response2.data);
       } catch (error) {
          console.error(error);
       }
    }
 
-   useEffect(() => {
-      handleLoad();
-   }, []);
+   useEffect(() => { handleLoad() }, []);
+
+   const pickDocumentAsync = async () => {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (!result.canceled) {
+         let skipped = 0
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            const isDup = fileForm.some(f => f.name === asset.name) ||
+               visibleOldFiles.some(f => `${f.name}.${f.extension}` === asset.name)
+            if (isDup) {
+               skipped++
+            } else {
+               setFileForm(prev => [...prev, asset])
+            }
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+      }
+   };
+
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat === "newFile") {
+         setFileForm(fileForm.filter((_, i) => i !== index))
+      } else {
+         setDataFile(prev => prev.map(item => item.id === index ? { ...item, delete: true } : item))
+      }
+      setModalFile(false)
+   }
 
    async function handleUpdate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditDiscussion({
-            data: { user: hasil, desc: data },
-            id: detail,
-         });
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil, desc: data, oldFile: dataFile }))
+         const response = await apiEditDiscussion(fd, detail);
          if (response.success) {
-            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
+            Toast.show({ type: 'small', text1: 'Berhasil mengubah data' })
             dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
             router.back();
+         } else {
+            Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengubah data" })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Edit Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={data == "" || loading}
+                           category="update"
+                           onPress={() => handleUpdate()}
+                        />
+                     }
                   />
-               ),
-               headerTitle: "Edit Diskusi",
-               headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={data == ""}
-                     category="update"
-                     onPress={() => {
-                        handleUpdate();
-                     }}
-                  />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
+            <View style={Styles.p15}>
                <InputForm
                   label="Diskusi"
                   type="default"
@@ -86,9 +150,91 @@ export default function DiscussionDivisionEdit() {
                   required
                   value={data}
                   onChange={setData}
+                  multiline
+                  bg={colors.card}
                />
+
+               {/* File */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: totalFiles > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {totalFiles === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {totalFiles > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{totalFiles} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {totalFiles > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {visibleOldFiles.map((item, index) => {
+                           const ext = item.extension.toLowerCase()
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={`old-${index}`}
+                                 onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{item.name}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={`new-${index}`}
+                                 onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                     </View>
+                  )}
+               </View>
             </View>
          </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => deleteFile(indexDelFile.id, indexDelFile.cat)}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx

@@ -1,24 +1,34 @@
-import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
+import BorderBottomItem2 from "@/components/borderBottomItem2";
 import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussionDetail";
+import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
-import LabelStatus from "@/components/labelStatus";
+import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import Skeleton from "@/components/skeleton";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
+import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
 import Styles from "@/constants/Styles";
 import {
+   apiDeleteDiscussionCommentar,
+   apiEditDiscussionCommentar,
    apiGetDiscussionOne,
    apiGetDivisionOneFeature,
    apiSendDiscussionCommentar,
 } from "@/lib/api";
+import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import { firebase } from "@react-native-firebase/database";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { ref } from "@react-native-firebase/database";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -40,12 +50,24 @@ type PropsComment = {
    createdAt: string;
    username: string;
    img: string;
+   idUser: string;
+   isEdited: boolean;
+   updatedAt: string;
 };
 
+type PropsFile = {
+   id: string;
+   idStorage: string;
+   name: string;
+   extension: string
+}
+
 export default function DiscussionDetail() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [data, setData] = useState<Props>();
    const [dataComment, setDataComment] = useState<PropsComment[]>([]);
+   const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
    const { token, decryptToken } = useAuthSession();
    const [komentar, setKomentar] = useState("");
    const [loadingSend, setLoadingSend] = useState(false);
@@ -57,19 +79,21 @@ export default function DiscussionDetail() {
    const [loading, setLoading] = useState(true)
    const [loadingKomentar, setLoadingKomentar] = useState(true)
    const arrSkeleton = Array.from({ length: 3 })
-   const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-division/${detail}`);
+   const reference = ref(getDB(), `/discussion-division/${detail}`);
    const [refreshing, setRefreshing] = useState(false)
-
+   const headerHeight = useHeaderHeight();
+   const [detailMore, setDetailMore] = useState<any>([])
+   const entities = useSelector((state: any) => state.entities)
+   const [isVisible, setVisible] = useState(false)
+   const [selectKomentar, setSelectKomentar] = useState({ id: '', comment: '' })
+   const [viewEdit, setViewEdit] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
    useEffect(() => {
       const onValueChange = reference.on('value', snapshot => {
-         if (snapshot.val() == null) {
-            reference.set({ trigger: true })
-         }
+         if (snapshot.val() == null) { reference.set({ trigger: true }) }
          handleLoadComment(false)
       });
-
-      // Stop listening for updates when no longer required
       return () => reference.off('value', onValueChange);
    }, []);
 
@@ -80,17 +104,14 @@ export default function DiscussionDetail() {
       });
    }
 
-
    async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetDiscussionOne({
-            id: detail,
-            user: hasil,
-            cat: "data",
-         });
+         const response = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "data" });
+         const responseFile = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "file" });
          setData(response.data);
+         setFileDiscussion(responseFile.data)
          setIsCreator(response.data.createdBy == hasil);
       } catch (error) {
          console.error(error);
@@ -103,11 +124,7 @@ export default function DiscussionDetail() {
       try {
          setLoadingKomentar(loading)
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetDiscussionOne({
-            id: detail,
-            user: hasil,
-            cat: "comment",
-         });
+         const response = await apiGetDiscussionOne({ id: detail, user: hasil, cat: "comment" });
          setDataComment(response.data);
       } catch (error) {
          console.error(error);
@@ -119,17 +136,8 @@ export default function DiscussionDetail() {
    async function handleCheckMember() {
       try {
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetDivisionOneFeature({
-            id,
-            user: hasil,
-            cat: "check-member",
-         });
-
-         const response2 = await apiGetDivisionOneFeature({
-            id,
-            user: hasil,
-            cat: "check-admin",
-         });
+         const response = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-member" });
+         const response2 = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-admin" });
          setIsMemberDivision(response.data);
          setIsAdminDivision(response2.data);
       } catch (error) {
@@ -137,35 +145,62 @@ export default function DiscussionDetail() {
       }
    }
 
-   useEffect(() => {
-      handleLoad(false);
-   }, [update.data]);
-
-   useEffect(() => {
-      handleLoad(true)
-      handleLoadComment(true);
-      handleCheckMember();
-   }, []);
+   useEffect(() => { handleLoad(false); }, [update.data]);
+   useEffect(() => { handleLoad(true); handleLoadComment(true); handleCheckMember(); }, []);
 
    async function handleKomentar() {
       try {
          setLoadingSend(true);
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiSendDiscussionCommentar({
-            id: detail,
-            data: { comment: komentar, user: hasil },
-         });
-         if (response.success) {
-            setKomentar("")
-            updateTrigger()
-         }
-      } catch (error) {
+         const response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
+         if (response.success) { setKomentar(""); updateTrigger() }
+      } catch (error: any) {
          console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan komentar" })
       } finally {
          setLoadingSend(false);
       }
    }
 
+   async function handleEditKomentar() {
+      try {
+         setLoadingSend(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiEditDiscussionCommentar({ id: selectKomentar.id, data: { comment: selectKomentar.comment, user: hasil } });
+         if (response.success) { updateTrigger() } else { Toast.show({ type: 'small', text1: response.message }) }
+      } catch (error: any) {
+         console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengedit komentar" })
+      } finally {
+         setLoadingSend(false);
+         handleViewEditKomentar()
+      }
+   }
+
+   async function handleDeleteKomentar() {
+      try {
+         setLoadingSend(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteDiscussionCommentar({ id: selectKomentar.id, data: { user: hasil } });
+         if (response.success) { updateTrigger() } else { Toast.show({ type: 'small', text1: response.message }) }
+      } catch (error: any) {
+         console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus komentar" })
+      } finally {
+         setLoadingSend(false)
+         setVisible(false)
+      }
+   }
+
+   function handleMenuKomentar(id: string, comment: string) {
+      setSelectKomentar({ id, comment })
+      setVisible(true)
+   }
+
+   function handleViewEditKomentar() {
+      setVisible(false)
+      setViewEdit(!viewEdit)
+   }
 
    const handleRefresh = async () => {
       setRefreshing(true)
@@ -175,175 +210,205 @@ export default function DiscussionDetail() {
       setRefreshing(false)
    };
 
+   const canWrite = data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision)
+   const isOpen = data?.status === 1
+
    return (
       <>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
                headerTitle: "Diskusi",
                headerTitleAlign: "center",
-               headerRight: () =>
-                  (entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator ?
-                     <HeaderRightDiscussionDetail
-                        id={detail}
-                        status={data?.status}
-                        isActive={data?.isActive}
-                     /> : (<></>)
-               ,
+               header: () => (
+                  <AppHeader
+                     title="Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator) ?
+                           <HeaderRightDiscussionDetail id={detail} status={data?.status} isActive={data?.isActive} /> : undefined
+                     }
+                  />
+               )
             }}
          />
-         <View style={{ flex: 1 }}>
+         <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
             <ScrollView
-               refreshControl={
-                  <RefreshControl
-                     refreshing={refreshing}
-                     onRefresh={handleRefresh}
-                  />
-               }
+               showsVerticalScrollIndicator={false}
+               refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
             >
-               <View style={[Styles.p15, Styles.mb100]}>
-                  {
-                     loading ?
-                        <SkeletonContent />
-                        :
-                        <BorderBottomItem
-                           descEllipsize={false}
-                           width={55}
-                           borderType="bottom"
-                           icon={
-                              <ImageUser
-                                 src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
-                                 size="sm"
-                              />
-                           }
-                           title={data?.username}
-                           subtitle={
-                              data?.isActive ? (
-                                 data?.status == 1 ? (
-                                    <LabelStatus category="success" text="BUKA" size="small" />
-                                 ) : (
-                                    <LabelStatus category="error" text="TUTUP" size="small" />
+               <View style={[Styles.p15]}>
+                  {loading ? (
+                     <SkeletonContent />
+                  ) : (
+                     <BorderBottomItem2
+                        dataFile={fileDiscussion}
+                        descEllipsize={false}
+                        borderType="all"
+                        bgColor="white"
+                        icon={
+                           <ImageUser src={`${ConstEnv.url_storage}/files/${data?.user_img}`} size="sm" />
+                        }
+                        title={data?.username}
+                        titleShowAll={true}
+                        subtitle={
+                           <View style={[Styles.discussionStatusPill, {
+                              borderColor: !data?.isActive ? '#F59E0B' : isOpen ? '#10B981' : colors.dimmed + '80',
+                           }]}>
+                              <Text style={[Styles.discussionStatusText, {
+                                 color: !data?.isActive ? '#F59E0B' : isOpen ? '#10B981' : colors.dimmed,
+                              }]}>
+                                 {!data?.isActive ? 'Arsip' : isOpen ? 'Buka' : 'Tutup'}
+                              </Text>
+                           </View>
+                        }
+                        desc={data?.desc}
+                        leftBottomInfo={
+                           <View style={Styles.rowItemsCenter}>
+                              <Feather name="message-square" size={14} color={colors.dimmed} style={Styles.mr05} />
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dataComment.length} Komentar</Text>
+                           </View>
+                        }
+                        rightBottomInfo={<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{data?.createdAt}</Text>}
+                     />
+                  )}
+
+                  <View style={Styles.mt10}>
+                     {loadingKomentar ? (
+                        arrSkeleton.map((_, i) => (
+                           <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
+                        ))
+                     ) : (
+                        dataComment.map((item, i) => (
+                           <Pressable
+                              key={i}
+                              onPress={() => {
+                                 setDetailMore((prev: any) =>
+                                    prev.includes(item.id) ? prev.filter((id: string) => id !== item.id) : [...prev, item.id]
                                  )
-                              ) : (
-                                 <LabelStatus category="secondary" text="ARSIP" size="small" />
-                              )
-                           }
-                           rightTopInfo={data?.createdAt}
-                           desc={data?.desc}
-                           leftBottomInfo={
-                              <View style={[Styles.rowItemsCenter]}>
-                                 <Ionicons
-                                    name="chatbox-ellipses-outline"
-                                    size={18}
-                                    color="grey"
-                                    style={Styles.mr05}
-                                 />
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]} >
-                                    {dataComment.length} Komentar
+                              }}
+                              onLongPress={() => {
+                                 item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
+                              }}
+                              style={({ pressed }) => [
+                                 Styles.discussionCommentCard,
+                                 { backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
+                              ]}
+                           >
+                              <View style={Styles.flex1}>
+                                 <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
+                                    <View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
+                                       <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                                       <Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
+                                          {item.username}
+                                       </Text>
+                                       {item.isEdited && (
+                                          <Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>diedit</Text>
+                                       )}
+                                    </View>
+                                    <Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
+                                       {item.createdAt}
+                                    </Text>
+                                 </View>
+                                 <Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={detailMore.includes(item.id) ? 0 : 3}>
+                                    {item.comment}
                                  </Text>
                               </View>
-                           }
-                        />
-                  }
-
-                  <View style={[Styles.p15]}>
-                     {
-                        loadingKomentar ?
-                           arrSkeleton.map((item, index) => (
-                              <Skeleton key={index} width={100} widthType="percent" height={40} borderRadius={5} />
-                           ))
-                           :
-                           dataComment.map((item, index) => (
-                              <BorderBottomItem
-                                 key={index}
-                                 width={55}
-                                 borderType="bottom"
-                                 icon={
-                                    <ImageUser
-                                       src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
-                                       size="xs"
-                                    />
-                                 }
-                                 title={item.username}
-                                 rightTopInfo={item.createdAt}
-                                 desc={item.comment}
-                                 descEllipsize={false}
-                              />
-                           ))
-                     }
-
+                           </Pressable>
+                        ))
+                     )}
                   </View>
                </View>
             </ScrollView>
-            <KeyboardAvoidingView
-               behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-               keyboardVerticalOffset={110}
-            >
-               <View
-                  style={[
-                     Styles.contentItemCenter,
-                     Styles.w100,
-                     { backgroundColor: "#f4f4f4" },
-                  ]}
-               >
-                  <InputForm
-                     disable={
-                        data?.status == 2 ||
-                        data?.isActive == false ||
-                        ((entityUser.role == "user" || entityUser.role == "coadmin") &&
-                           !isMemberDivision)
-                     }
-                     bg="white"
-                     type="default"
-                     round
-                     placeholder="Kirim Komentar"
-                     onChange={setKomentar}
-                     value={komentar}
-                     itemRight={
-                        <Pressable
-                           onPress={() => {
-                              komentar != "" &&
-                                 !loadingSend &&
-                                 data?.status != 2 &&
-                                 data?.isActive &&
-                                 (((entityUser.role == "user" ||
-                                    entityUser.role == "coadmin") &&
-                                    isMemberDivision) ||
-                                    entityUser.role == "admin" ||
-                                    entityUser.role == "supadmin" ||
-                                    entityUser.role == "developer" ||
-                                    entityUser.role == "cosupadmin") &&
-                                 handleKomentar();
-                           }}
-                        >
-                           <MaterialIcons
-                              name="send"
-                              size={25}
-                              style={
-                                 komentar == "" ||
-                                    loadingSend ||
-                                    data?.status == 2 ||
-                                    data?.isActive == false ||
-                                    ((entityUser.role == "user" ||
-                                       entityUser.role == "coadmin") &&
-                                       !isMemberDivision)
-                                    ? Styles.cGray
-                                    : Styles.cDefault
-                              }
-                           />
-                        </Pressable>
-                     }
-                  />
+
+            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={headerHeight}>
+               <View style={[Styles.contentItemCenter, Styles.w100, { backgroundColor: colors.background }, viewEdit && Styles.borderTop]}>
+                  {viewEdit ? (
+                     <>
+                        <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
+                           <View style={Styles.rowItemsCenter}>
+                              <Feather name="edit-3" color={colors.text} size={22} style={Styles.mh05} />
+                              <Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
+                           </View>
+                           <Pressable onPress={() => handleViewEditKomentar()}>
+                              <MaterialIcons name="close" color={colors.text} size={22} />
+                           </Pressable>
+                        </View>
+                        <InputForm
+                           bg={colors.card}
+                           type="default" round multiline
+                           placeholder="Kirim Komentar"
+                           onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
+                           value={selectKomentar.comment}
+                           itemRight={
+                              <Pressable
+                                 onPress={() => {
+                                    selectKomentar.comment != "" && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && !loadingSend && data?.status != 2 && data?.isActive
+                                       && (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
+                                       && handleEditKomentar();
+                                 }}
+                                 style={[Platform.OS == 'android' && Styles.mb12]}
+                              >
+                                 <MaterialIcons name="send" size={25}
+                                    style={[
+                                       selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
+                                          ? { color: colors.dimmed } : { color: colors.tint },
+                                    ]}
+                                 />
+                              </Pressable>
+                           }
+                        />
+                     </>
+                  ) : canWrite ? (
+                     <InputForm
+                        type="default" round multiline
+                        placeholder="Kirim Komentar"
+                        onChange={setKomentar} value={komentar}
+                        itemRight={
+                           <Pressable
+                              onPress={() => {
+                                 komentar != "" && !regexOnlySpacesOrEnter.test(komentar) && !loadingSend && data?.status != 2 && data?.isActive
+                                    && (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
+                                    && handleKomentar();
+                              }}
+                              style={[Platform.OS == 'android' && Styles.mb12]}
+                           >
+                              <MaterialIcons name="send" size={25}
+                                 style={[
+                                    komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
+                                       ? { color: colors.dimmed } : { color: colors.tint },
+                                 ]}
+                              />
+                           </Pressable>
+                        }
+                     />
+                  ) : (
+                     <View style={[Styles.pv20, Styles.itemsCenter]}>
+                        <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
+                           {data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota divisi yang dapat memberikan komentar"}
+                        </Text>
+                     </View>
+                  )}
                </View>
             </KeyboardAvoidingView>
-
          </View>
+
+         <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />} title="Edit" onPress={() => handleViewEditKomentar()} />
+               <MenuItemRow icon={<MaterialIcons name="delete-outline" color={colors.text} size={25} />} title="Hapus" onPress={() => { setVisible(false); setTimeout(() => setShowDeleteModal(true), 600) }} />
+            </View>
+         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus komentar?"
+            onConfirm={() => { setShowDeleteModal(false); handleDeleteKomentar() }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
       </>
    );
 }

app/(application)/division/[id]/(fitur-division)/discussion/create.tsx

@@ -1,60 +1,195 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import AppHeader from "@/components/AppHeader"
 import ButtonSaveHeader from "@/components/buttonSaveHeader"
+import DrawerBottom from "@/components/drawerBottom"
 import { InputForm } from "@/components/inputForm"
+import LoadingCenter from "@/components/loadingCenter"
+import MenuItemRow from "@/components/menuItemRow"
+import Text from "@/components/Text"
 import Styles from "@/constants/Styles"
 import { apiCreateDiscussion } from "@/lib/api"
 import { setUpdateDiscussion } from "@/lib/discussionUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
+import * as DocumentPicker from "expo-document-picker"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useState } from "react"
-import { SafeAreaView, ScrollView, View } from "react-native"
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function CreateDiscussionDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [desc, setDesc] = useState('')
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.discussionUpdate)
    const dispatch = useDispatch();
+   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+
+   const pickDocumentAsync = async () => {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (!result.canceled) {
+         let skipped = 0
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            if (fileForm.some(f => f.name === asset.name)) {
+               skipped++
+            } else {
+               setFileForm(prev => [...prev, asset])
+            }
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm(fileForm.filter((_, i) => i !== index))
+      setModalFile(false)
+   }
 
    async function handleCreate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateDiscussion({ data: { user: hasil, desc, idDivision: id } })
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil, desc, idDivision: id }))
+         const response = await apiCreateDiscussion(fd)
          if (response.success) {
-            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
+            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data' })
             dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
             router.back()
          } else {
-            Toast.show({ type: 'small', text1: response.message, })
+            Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+      } catch (error: any) {
+         console.error(error);
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan data" })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Tambah Diskusi',
-               headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader
-                  disable={desc == ""}
-                  category="create"
-                  onPress={() => {
-                     handleCreate()
-                  }} />
+               header: () => (
+                  <AppHeader
+                     title="Tambah Diskusi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={desc == "" || loading}
+                           category="create"
+                           onPress={() => handleCreate()}
+                        />
+                     }
+                  />
+               )
             }}
          />
-         <ScrollView>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
-               <InputForm label="Diskusi" type="default" placeholder="Hal yang didiskusikan" required onChange={setDesc} />
+               <InputForm
+                  label="Diskusi"
+                  type="default"
+                  placeholder="Hal yang didiskusikan"
+                  required
+                  onChange={setDesc}
+                  multiline
+                  bg={colors.card}
+               />
+
+               {/* File */}
+               <View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {fileForm.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {fileForm.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {fileForm.length > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={index}
+                                 onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                     </View>
+                  )}
+               </View>
             </View>
          </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                  title="Hapus"
+                  onPress={() => deleteFile(indexDelFile)}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    )
-}
+}

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -1,20 +1,23 @@
-import BorderBottomItem from "@/components/borderBottomItem";
+import GuideOverlay from "@/components/GuideOverlay";
 import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
 import InputSearch from "@/components/inputSearch";
-import LabelStatus from "@/components/labelStatus";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
-import { apiGetDiscussion } from "@/lib/api";
+import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
+import { GUIDE_DIVISION_DISCUSSION } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Feather } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { RefreshControl, View, VirtualizedList } from "react-native";
+import { FlatList, Pressable, RefreshControl, View } from "react-native";
 import { useSelector } from "react-redux";
 
-
 type Props = {
    id: string,
    title: string,
@@ -27,8 +30,8 @@ type Props = {
    isActive: boolean
 }
 
-
 export default function DiscussionDivision() {
+   const { colors } = useTheme();
    const { id, active } = useLocalSearchParams<{ id: string, active?: string }>()
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
@@ -40,6 +43,22 @@ export default function DiscussionDivision() {
    const [waiting, setWaiting] = useState(false)
    const [status, setStatus] = useState<'true' | 'false'>('true')
    const [refreshing, setRefreshing] = useState(false)
+   const [isMemberDivision, setIsMemberDivision] = useState(false)
+   const [isAdminDivision, setIsAdminDivision] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-discussion')
+
+   async function handleCheckMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-member" });
+         const response2 = await apiGetDivisionOneFeature({ id, user: hasil, cat: "check-admin" });
+         setIsMemberDivision(response.data);
+         setIsAdminDivision(response2.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -52,8 +71,6 @@ export default function DiscussionDivision() {
             setData(response.data)
          } else if (thisPage > 1 && response.data.length > 0) {
             setData([...data, ...response.data])
-         } else {
-            return;
          }
       } catch (error) {
          console.error(error)
@@ -63,20 +80,13 @@ export default function DiscussionDivision() {
       }
    }
 
-   useEffect(() => {
-      handleLoad(false, 1)
-   }, [update.data])
-
-
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [status, search])
+   useEffect(() => { handleLoad(false, 1) }, [update.data])
+   useEffect(() => { handleLoad(true, 1) }, [status, search])
+   useEffect(() => { handleCheckMember() }, [])
 
    const loadMoreData = () => {
       if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
+      setTimeout(() => { handleLoad(false, page + 1) }, 1000);
    }
 
    const handleRefresh = async () => {
@@ -86,121 +96,115 @@ export default function DiscussionDivision() {
       setRefreshing(false)
    };
 
-   const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      title: data[index].title,
-      desc: data[index].desc,
-      status: data[index].status,
-      user_name: data[index].user_name,
-      img: data[index].img,
-      total_komentar: data[index].total_komentar,
-      createdAt: data[index].createdAt,
-      isActive: data[index].isActive,
-   })
+   const isOpen = (item: Props) => item.status === 1
+
+   const themed = {
+      background:       { backgroundColor: colors.background },
+      card:             { backgroundColor: colors.card, borderColor: colors.icon + '20' },
+      cardPressed:      { backgroundColor: colors.icon + '10' },
+      title:            { color: colors.text },
+      dimmed:           { color: colors.dimmed },
+      statusOpen:       { borderColor: '#10B981' as const },
+      statusClosed:     { borderColor: colors.dimmed + '80' },
+      statusTextOpen:   { color: '#10B981' as const },
+      statusTextClosed: { color: colors.dimmed },
+   }
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
-         <View>
-            <View style={[Styles.wrapBtnTab]}>
-               <ButtonTab
-                  active={status == "false" ? "false" : "true"}
-                  value="true"
-                  onPress={() => { setStatus("true") }}
-                  label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
-                  n={2} />
-               <ButtonTab
-                  active={status == "false" ? "false" : "true"}
-                  value="false"
-                  onPress={() => { setStatus("false") }}
-                  label="Arsip"
-                  icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
-                  n={2} />
+      <View style={[Styles.flex1, themed.background]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DISCUSSION} onDismiss={dismissGuide} />
+         {((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && (
+            <View style={[Styles.ph15, Styles.discussionHeaderPadding]}>
+               <WrapTab>
+                  <ButtonTab
+                     active={status == "false" ? "false" : "true"}
+                     value="true"
+                     onPress={() => setStatus("true")}
+                     label="Aktif"
+                     icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
+                     n={2}
+                  />
+                  <ButtonTab
+                     active={status == "false" ? "false" : "true"}
+                     value="false"
+                     onPress={() => setStatus("false")}
+                     label="Arsip"
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
+                     n={2}
+                  />
+               </WrapTab>
+               <InputSearch onChange={setSearch} />
             </View>
-            <InputSearch onChange={setSearch} />
-         </View>
+         )}
 
-         <View style={[{ flex: 2 }]}>
-            {
-               loading ?
-                  arrSkeleton.map((item: any, i: number) => {
-                     return (
-                        <SkeletonContent key={i} />
-                     )
-                  })
-                  :
-                  data.length > 0 ?
-                     <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
-                        getItem={getItem}
-                        renderItem={({ item, index }: { item: Props, index: number }) => {
-                           return (
-                              <BorderBottomItem
-                                 key={index}
-                                 width={55}
-                                 onPress={() => { router.push(`./discussion/${item.id}`) }}
-                                 borderType="bottom"
-                                 icon={
-                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                                 }
-                                 title={item.user_name}
-                                 subtitle={
-                                    status == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
-                                 }
-                                 rightTopInfo={item.createdAt}
-                                 desc={item.desc}
-                                 leftBottomInfo={
-                                    <View style={[Styles.rowItemsCenter]}>
-                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                                    </View>
-                                 }
-                                 rightBottomInfo={item.total_komentar + ' Komentar'}
-                              />
-                           )
-                        }}
-                        keyExtractor={(item, index) => String(index)}
-                        onEndReached={loadMoreData}
-                        onEndReachedThreshold={0.5}
-                        showsVerticalScrollIndicator={false}
-                        refreshControl={
-                           <RefreshControl
-                              refreshing={refreshing}
-                              onRefresh={handleRefresh}
-                           />
-                        }
-                     />
-                     // data.map((item, index) => (
-                     //    <BorderBottomItem
-                     //       key={index}
-                     //       width={55}
-                     //       onPress={() => { router.push(`./discussion/${item.id}`) }}
-                     //       borderType="bottom"
-                     //       icon={
-                     //          <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                     //       }
-                     //       title={item.user_name}
-                     //       subtitle={
-                     //          active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
-                     //       }
-                     //       rightTopInfo={item.createdAt}
-                     //       desc={item.desc}
-                     //       leftBottomInfo={
-                     //          <View style={[Styles.rowItemsCenter]}>
-                     //             <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
-                     //             <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
-                     //          </View>
-                     //       }
-                     //       rightBottomInfo={item.total_komentar + ' Komentar'}
-                     //    />
-                     // ))
-                     :
-                     (
-                        <Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
-                     )
-            }
+         <View style={[Styles.flex1, Styles.ph15, Styles.discussionListPadding]}>
+            {loading ? (
+               arrSkeleton.map((_, i) => <SkeletonContent key={i} />)
+            ) : data.length === 0 ? (
+               <View style={[Styles.contentItemCenter, Styles.mt30]}>
+                  <Feather name="message-circle" size={42} color={colors.icon + '40'} />
+                  <Text style={[Styles.mt10, Styles.discussionEmptyText, themed.dimmed]}>
+                     Tidak ada diskusi
+                  </Text>
+               </View>
+            ) : (
+               <FlatList
+                  data={data}
+                  keyExtractor={(_, i) => String(i)}
+                  showsVerticalScrollIndicator={false}
+                  onEndReached={loadMoreData}
+                  onEndReachedThreshold={0.5}
+                  refreshControl={
+                     <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />
+                  }
+                  ItemSeparatorComponent={() => <View style={Styles.discussionSeparator} />}
+                  renderItem={({ item }: { item: Props }) => (
+                     <Pressable
+                        onPress={() => router.push(`./discussion/${item.id}`)}
+                        style={({ pressed }) => [
+                           Styles.discussionCard,
+                           themed.card,
+                           pressed && themed.cardPressed,
+                        ]}
+                     >
+                        <View style={[Styles.rowItemsCenter, Styles.mb08]}>
+                           <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                           <View style={[Styles.flex1, Styles.discussionTitleCol]}>
+                              <Text style={[Styles.textDefaultSemiBold, themed.title]} numberOfLines={1}>
+                                 {item.user_name}
+                              </Text>
+                              {status === "true" && (
+                                 <View style={[Styles.discussionStatusPill, isOpen(item) ? themed.statusOpen : themed.statusClosed]}>
+                                    <Text style={[Styles.discussionStatusText, isOpen(item) ? themed.statusTextOpen : themed.statusTextClosed]}>
+                                       {isOpen(item) ? 'Buka' : 'Tutup'}
+                                    </Text>
+                                 </View>
+                              )}
+                           </View>
+                        </View>
+
+                        {item.desc ? (
+                           <Text style={[Styles.textMediumNormal, Styles.discussionCardIndent, Styles.discussionDescMargin, themed.title]} numberOfLines={2}>
+                              {item.desc}
+                           </Text>
+                        ) : null}
+
+                        <View style={[Styles.rowItemsCenter, Styles.rowSpaceBetween, Styles.discussionCardIndent]}>
+                           <View style={Styles.rowItemsCenter}>
+                              <Feather name="message-square" size={14} color={colors.dimmed} />
+                              <Text style={[Styles.discussionCommentText, themed.dimmed]}>
+                                 {item.total_komentar} Komentar
+                              </Text>
+                           </View>
+                           <Text style={[Styles.discussionDateText, themed.dimmed]}>
+                              {item.createdAt}
+                           </Text>
+                        </View>
+                     </Pressable>
+                  )}
+               />
+            )}
          </View>
       </View>
    );
-}
+}

app/(application)/division/[id]/(fitur-division)/document/index.tsx

@@ -1,5 +1,6 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import GuideOverlay from "@/components/GuideOverlay";
+import ModalConfirmation from "@/components/ModalConfirmation";
+import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import HeaderRightDocument from "@/components/document/headerDocument";
 import ItemFile from "@/components/document/itemFile";
@@ -12,16 +13,20 @@ import ModalLoading from "@/components/modalLoading";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import {
    apiDocumentDelete,
    apiDocumentRename,
+   apiGetDivisionOneFeature,
    apiGetDocument,
    apiShareDocument,
 } from "@/lib/api";
 import { setUpdateDokumen } from "@/lib/dokumenUpdate";
+import { GUIDE_DIVISION_DOCUMENT } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    MaterialCommunityIcons,
@@ -64,6 +69,8 @@ type PropsPath = {
 };
 
 export default function DocumentDivision() {
+   const { colors } = useTheme();
+   const [loadingRename, setLoadingRename] = useState(false)
    const [isShare, setShare] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
@@ -83,6 +90,10 @@ export default function DocumentDivision() {
    const update = useSelector((state: any) => state.dokumenUpdate)
    const [refreshing, setRefreshing] = useState(false)
    const [loadingOpen, setLoadingOpen] = useState(false)
+   const [isMemberDivision, setIsMemberDivision] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-document')
    const [bodyRename, setBodyRename] = useState({
       id: "",
       name: "",
@@ -91,6 +102,24 @@ export default function DocumentDivision() {
       extension: "",
    });
 
+   async function handleCheckMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-member",
+         });
+         setIsMemberDivision(response.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleCheckMember()
+   }, [id])
+
    async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
@@ -200,6 +229,7 @@ export default function DocumentDivision() {
 
    async function handleRename() {
       try {
+         setLoadingRename(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiDocumentRename({ user: hasil, ...bodyRename });
          if (response.success) {
@@ -209,11 +239,14 @@ export default function DocumentDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal mengubah nama"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
-         setRename(false);
+         setLoadingRename(false)
+         setRename(false)
       }
    }
 
@@ -231,9 +264,11 @@ export default function DocumentDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal menghapus"
+
+         Toast.show({ type: 'small', text1: message })
       }
    }
 
@@ -257,9 +292,11 @@ export default function DocumentDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal membagikan"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setShare(false);
       }
@@ -268,7 +305,7 @@ export default function DocumentDivision() {
 
    const openFile = (item: Props) => {
       if (Platform.OS == 'android') setLoadingOpen(true)
-      let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + item.idStorage;
+      let remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
       const fileName = item.name + '.' + item.extension;
       let localPath = `${FileSystem.documentDirectory}/${fileName}`;
       const mimeType = mime.lookup(fileName)
@@ -309,75 +346,106 @@ export default function DocumentDivision() {
    }, [path]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () =>
-                  selectedFiles.length > 0 || dariSelectAll ? (
-                     <ButtonHeader
-                        item={<MaterialIcons name="close" size={20} color="white" />}
-                        onPress={() => {
-                           handleBatal();
-                        }}
-                     />
-                  ) : (
-                     <ButtonBackHeader
-                        onPress={() => {
-                           router.back();
-                        }}
-                     />
-                  ),
+               // headerLeft: () =>
+               //    selectedFiles.length > 0 || dariSelectAll ? (
+               //       <ButtonHeader
+               //          item={<MaterialIcons name="close" size={20} color="white" />}
+               //          onPress={() => {
+               //             handleBatal();
+               //          }}
+               //       />
+               //    ) : (
+               //       <ButtonBackHeader
+               //          onPress={() => {
+               //             router.back();
+               //          }}
+               //       />
+               //    ),
                headerTitle:
                   selectedFiles.length > 0 || dariSelectAll
                      ? `${selectedFiles.length} item terpilih`
                      : "Dokumen Divisi",
                headerTitleAlign: "center",
-               headerRight: () =>
-                  selectedFiles.length > 0 || dariSelectAll ? (
-                     <ButtonHeader
-                        item={
-                           <MaterialIcons name="checklist-rtl" size={20} color="white" />
-                        }
-                        onPress={() => {
-                           handleSelectAll();
-                        }}
-                     />
-                  ) : (
-                     <HeaderRightDocument path={path} />
-                  ),
+               // headerRight: () =>
+               //    selectedFiles.length > 0 || dariSelectAll ? (
+               //       <ButtonHeader
+               //          item={
+               //             <MaterialIcons name="checklist-rtl" size={20} color="white" />
+               //          }
+               //          onPress={() => {
+               //             handleSelectAll();
+               //          }}
+               //       />
+               //    ) : (
+               //       <HeaderRightDocument path={path} isMember={isMemberDivision} />
+               //    ),
+               header: () => (
+                  <AppHeader
+                     title={
+                        selectedFiles.length > 0 || dariSelectAll
+                           ? `${selectedFiles.length} item terpilih`
+                           : "Dokumen Divisi"
+                     }
+                     showBack={(selectedFiles.length > 0 || dariSelectAll) ? false : true}
+                     left={
+                        <ButtonHeader
+                           item={<MaterialIcons name="close" size={25} color="white" />}
+                           onPress={() => {
+                              handleBatal();
+                           }}
+                        />
+                     }
+                     onPressLeft={() => {
+                        (selectedFiles.length > 0 || dariSelectAll) ? handleBatal() : router.back();
+                     }}
+                     right={
+                        selectedFiles.length > 0 || dariSelectAll ? (
+                           <ButtonHeader
+                              item={
+                                 <MaterialIcons name="checklist-rtl" size={25} color="white" />
+                              }
+                              onPress={() => {
+                                 handleSelectAll();
+                              }}
+                           />
+                        ) : (
+                           <HeaderRightDocument path={path} isMember={isMemberDivision} />
+                        )
+                     }
+                  />
+               )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_DIVISION_DOCUMENT} onDismiss={dismissGuide} />
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <ScrollView
-            style={[Styles.h100]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.rowItemsCenter]}>
                   {
-                     loading ?
-                        arrSkeleton.map((item, index) => (
-                           <Skeleton key={index} width={60} height={10} borderRadius={10} style={[Styles.mr05]} />
-                        ))
-                        :
-                        dataJalur.map((item, index) => (
-                           <Pressable
-                              key={index}
-                              style={[Styles.rowItemsCenter]}
-                              onPress={() => {
-                                 setPath(item.id);
-                              }}
-                           >
-                              {item.id != "home" && (
-                                 <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color="black" />
-                              )}
-                              <Text> {item.name} </Text>
-                           </Pressable>
-                        ))
+                     dataJalur.map((item, index) => (
+                        <Pressable
+                           key={index}
+                           style={[Styles.rowItemsCenter]}
+                           onPress={() => {
+                              setPath(item.id);
+                           }}
+                        >
+                           {item.id != "home" && (
+                              <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
+                           )}
+                           <Text style={{ color: colors.text }}> {item.name} </Text>
+                        </Pressable>
+                     ))
                   }
                </View>
                <View>
@@ -408,6 +476,7 @@ export default function DocumentDivision() {
                                           : `${item.name}.${item.extension}`
                                     }
                                     dateTime={item.createdAt}
+                                    canChecked={(entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision}
                                     onChecked={() => {
                                        handleCheckboxChange(index);
                                     }}
@@ -423,14 +492,7 @@ export default function DocumentDivision() {
                               );
                            })
                         ) : (
-                           <Text
-                              style={[
-                                 Styles.textDefault,
-                                 Styles.cGray,
-                                 Styles.mt15,
-                                 { textAlign: "center" },
-                              ]}
-                           >
+                           <Text style={[Styles.textDefault, Styles.mt15, { textAlign: "center", color: colors.dimmed }]} >
                               Tidak ada dokumen
                            </Text>
                         )}
@@ -438,22 +500,8 @@ export default function DocumentDivision() {
             </View>
          </ScrollView>
          {(selectedFiles.length > 0 || dariSelectAll) && (
-            <View style={[ColorsStatus.primary, Styles.bottomMenuSelectDocument]}>
+            <View style={[Styles.bottomMenuSelectDocument, { backgroundColor: colors.header }]}>
                <View style={[Styles.rowItemsCenter, { justifyContent: "center" }]}>
-                  {/* <MenuItemRow
-                     icon={
-                        <MaterialCommunityIcons
-                           name="download-outline"
-                           color="white"
-                           size={25}
-                        />
-                     }
-                     title="Unduh"
-                     onPress={() => { }}
-                     column="many"
-                     color="white"
-                     disabled={selectedFiles.length == 0 || !copyAllowed}
-                  /> */}
                   <MenuItemRow
                      icon={
                         <MaterialCommunityIcons
@@ -464,13 +512,7 @@ export default function DocumentDivision() {
                      }
                      title="Hapus"
                      onPress={() => {
-                        AlertKonfirmasi({
-                           title: "Konfirmasi",
-                           desc: "Apakah anda yakin ingin menghapus dokumen?",
-                           onPress: () => {
-                              handleDelete();
-                           },
-                        });
+                        setShowDeleteModal(true)
                      }}
                      column="many"
                      color="white"
@@ -551,7 +593,7 @@ export default function DocumentDivision() {
             isVisible={isRename}
             setVisible={() => { setRename(false) }}
             onSubmit={() => { handleRename() }}
-            disableSubmit={bodyRename.name == ""}
+            disableSubmit={bodyRename.name == "" || loadingRename}
          >
             <View>
                <InputForm
@@ -577,6 +619,19 @@ export default function DocumentDivision() {
             value={id}
             item={selectedFiles[0]?.id}
          />
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus dokumen?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/(fitur-division)/task/[detail]/add-file.tsx

@@ -1,5 +1,5 @@
+import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiAddFileTask, apiCheckFileTask } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionAddFile() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [fileForm, setFileForm] = useState<any[]>([]);
    const [listFile, setListFile] = useState<any[]>([]);
@@ -32,6 +34,7 @@ export default function TaskDivisionAddFile() {
    const [loadingCheck, setLoadingCheck] = useState(false);
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
+   const [loading, setLoading] = useState(false);
 
    const pickDocumentAsync = async () => {
       let result = await DocumentPicker.getDocumentAsync({
@@ -90,6 +93,7 @@ export default function TaskDivisionAddFile() {
 
    async function handleAddFile() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const fd = new FormData();
 
@@ -116,32 +120,50 @@ export default function TaskDivisionAddFile() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal menambahkan file"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Tambah File",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="create"
-                     disable={fileForm.length == 0 ? true : false}
-                     onPress={() => { handleAddFile() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="create"
+               //       disable={fileForm.length == 0 || loading ? true : false}
+               //       onPress={() => { handleAddFile() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Tambah File"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="create"
+                           disable={fileForm.length == 0 || loading ? true : false}
+                           onPress={() => { handleAddFile() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <ScrollView>
@@ -151,13 +173,13 @@ export default function TaskDivisionAddFile() {
                   listFile.length > 0 && (
                      <View style={[Styles.mb15]}>
                         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
+                        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                            {
                               listFile.map((item, index) => (
                                  <BorderBottomItem
                                     key={index}
                                     borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                     title={item}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -171,12 +193,15 @@ export default function TaskDivisionAddFile() {
                {
                   loadingCheck && <ActivityIndicator size="small" />
                }
+               {
+                  loading && <ActivityIndicator size="large" />
+               }
             </View>
          </ScrollView>
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />

app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx

@@ -1,17 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiAddMemberTask, apiGetDivisionMember, apiGetTaskOne } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -22,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberTask() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -30,6 +33,7 @@ export default function AddMemberTask() {
    const [data, setData] = useState<Props[]>([])
    const [selectMember, setSelectMember] = useState<any[]>([])
    const [search, setSearch] = useState('')
+   const [loading, setLoading] = useState(false)
 
    async function handleLoadOldMember() {
       try {
@@ -72,6 +76,7 @@ export default function AddMemberTask() {
 
    async function handleAddMember() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiAddMemberTask({ id: detail, data: { user: hasil, member: selectMember, idDivision: id } })
          if (response.success) {
@@ -81,45 +86,65 @@ export default function AddMemberTask() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal menambahkan anggota', })
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah Anggota Kegiatan',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="update"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Tambah Anggota Kegiatan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={selectMember.length == 0 || loading ? true : false}
+                           onPress={() => {
+                              handleAddMember()
+                           }}
+                        />
+                     }
                   />
                )
             }}
          />
-         <View style={[Styles.p15, Styles.mb100]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -128,9 +153,11 @@ export default function AddMemberTask() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+            >
 
                {
                   data.length > 0 ?
@@ -139,22 +166,22 @@ export default function AddMemberTask() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  !found && onChoose(item.idUser, item.name, item.img)
                               }}
                            >
-                              <View style={[Styles.rowItemsCenter, Styles.w80]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                              <View style={[Styles.rowItemsCenter, Styles.w80,]}>
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
@@ -165,6 +192,6 @@ export default function AddMemberTask() {
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx

@@ -1,16 +1,25 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiCreateTaskTugas } from "@/lib/api";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
-import dayjs from "dayjs";
+import { useTheme } from "@/providers/ThemeProvider";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
-   KeyboardAvoidingView, Platform, SafeAreaView,
+   KeyboardAvoidingView, Platform,
+   SafeAreaView,
    ScrollView,
    View
 } from "react-native";
@@ -19,11 +28,14 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionAddTask() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [disable, setDisable] = useState(true);
+   const [loading, setLoading] = useState(false)
+   const headerHeight = useHeaderHeight();
    const [range, setRange] = useState<{
       startDate: DateType;
       endDate: DateType;
@@ -33,12 +45,13 @@ export default function TaskDivisionAddTask() {
       endDate: false,
       title: false,
    });
-   const [title, setTitle] = useState("");
+   const [title, setTitle] = useState("")
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
+   const [dsbButton, setDsbButton] = useState(true)
 
-   const from = range.startDate
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+   const from = formatDateOnly(range.startDate);
+   const to = formatDateOnly(range.endDate);
 
    function checkAll() {
       if (
@@ -67,20 +80,49 @@ export default function TaskDivisionAddTask() {
       }
    }
 
+
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll();
    }, [from, to, title, error]);
 
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
    async function handleCreate() {
       try {
+         setLoading(true)
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
          const hasil = await decryptToken(String(token?.current));
          const response = await apiCreateTaskTugas({
             data: {
                title,
-               dateStart: dayjs(range.startDate).format("YYYY-MM-DD"),
-               dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"),
+               dateStart: formatDateOnly(range.startDate, "YYYY-MM-DD"),
+               dateEnd: formatDateOnly(range.endDate, "YYYY-MM-DD"),
                user: hasil,
                idDivision: id,
+               dataDetail: dataDetailFix,
             },
             id: detail,
          });
@@ -91,43 +133,63 @@ export default function TaskDivisionAddTask() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Gagal menambah data', })
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Tambah Tugas",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="create"
-                     disable={disable}
-                     onPress={() => {
-                        handleCreate();
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="create"
+               //       disable={disable || loading}
+               //       onPress={() => {
+               //          handleCreate();
+               //       }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Tambah Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="create"
+                           disable={disable || loading}
+                           onPress={() => {
+                              handleCreate();
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
@@ -137,6 +199,15 @@ export default function TaskDivisionAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: { color: colors.text },
+                           month_selector_label: { color: colors.text },
+                           year_label: { color: colors.text },
+                           year_selector_label: { color: colors.text },
+                           day_label: { color: colors.text },
+                           time_label: { color: colors.text },
+                           weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
@@ -144,31 +215,39 @@ export default function TaskDivisionAddTask() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
+                     {/* <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
@@ -179,7 +258,14 @@ export default function TaskDivisionAddTask() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
-
+         <ModalAddDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/(fitur-division)/task/[detail]/cancel.tsx

@@ -1,10 +1,11 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import Styles from "@/constants/Styles";
 import { apiCancelTask } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionCancel() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
@@ -19,6 +21,7 @@ export default function TaskDivisionCancel() {
    const [reason, setReason] = useState("");
    const [error, setError] = useState(false);
    const [disable, setDisable] = useState(false);
+   const [loading, setLoading] = useState(false)
 
    function onValidation(val: string) {
       setReason(val);
@@ -43,6 +46,7 @@ export default function TaskDivisionCancel() {
 
    async function handleCancel() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiCancelTask(
             {
@@ -58,34 +62,54 @@ export default function TaskDivisionCancel() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Gagal membatalkan kegiatan', })
+         const message = error?.response?.data?.message || "Gagal membatalkan kegiatan"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Pembatalan Tugas",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disable}
-                     category="cancel"
-                     onPress={() => {
-                        handleCancel();
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disable || loading}
+               //       category="cancel"
+               //       onPress={() => {
+               //          handleCancel();
+               //       }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Pembatalan Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disable || loading}
+                           category="cancel"
+                           onPress={() => {
+                              handleCancel();
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <ScrollView>
@@ -95,7 +119,7 @@ export default function TaskDivisionCancel() {
                   type="default"
                   placeholder="Alasan Pembatalan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   error={error}
                   errorText="Alasan pembatalan harus diisi"
                   onChange={(val) => onValidation(val)}

app/(application)/division/[id]/(fitur-division)/task/[detail]/edit.tsx

@@ -1,10 +1,11 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import Styles from "@/constants/Styles";
 import { apiEditTask, apiGetTaskOne } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function TaskDivisionEdit() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const [judul, setJudul] = useState("");
@@ -19,6 +21,7 @@ export default function TaskDivisionEdit() {
    const [disable, setDisable] = useState(false);
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
+   const [loading, setLoading] = useState(false)
 
    async function handleLoad() {
       try {
@@ -61,6 +64,7 @@ export default function TaskDivisionEdit() {
 
    async function handleUpdate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiEditTask(
             {
@@ -76,32 +80,49 @@ export default function TaskDivisionEdit() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Edit Judul",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="update"
-                     disable={disable}
-                     onPress={() => { handleUpdate() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={disable || loading}
+               //       onPress={() => { handleUpdate() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader title="Tambah Kegiatan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={disable || loading}
+                           onPress={() => { handleUpdate() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <ScrollView>
@@ -111,7 +132,7 @@ export default function TaskDivisionEdit() {
                   type="default"
                   placeholder="Judul Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={judul}
                   onChange={(val) => { onValidation(val) }}
                   error={error}

app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx

@@ -1,13 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
+import GuideOverlay from "@/components/GuideOverlay";
 import SectionCancel from "@/components/sectionCancel";
 import SectionProgress from "@/components/sectionProgress";
 import HeaderRightTaskDetail from "@/components/task/headerTaskDetail";
 import SectionFileTask from "@/components/task/sectionFileTask";
+import SectionLinkTask from "@/components/task/sectionLinkTask";
 import SectionMemberTask from "@/components/task/sectionMemberTask";
+import SectionReportTask from "@/components/task/sectionReportTask";
 import SectionTanggalTugasTask from "@/components/task/sectionTanggalTugasTask";
 import Styles from "@/constants/Styles";
-import { apiGetTaskOne } from "@/lib/api";
+import { apiGetDivisionOneFeature, apiGetTaskOne } from "@/lib/api";
+import { GUIDE_PROJECT_DETAIL } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -20,17 +26,61 @@ type Props = {
    reason: string
    status: number
    isActive: boolean
+   idGroup: string
 }
 
 export default function DetailTaskDivision() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props>()
    const [loading, setLoading] = useState(true)
    const [progress, setProgress] = useState(0)
+   const [taskStats, setTaskStats] = useState<{ done: number, total: number } | undefined>()
    const update = useSelector((state: any) => state.taskUpdate)
    const [refreshing, setRefreshing] = useState(false)
+   const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('division-task-detail')
+   const [isAdminDivision, setIsAdminDivision] = useState(false);
+   const entityUser = useSelector((state: any) => state.user);
 
+   async function handleCheckMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-member",
+         });
+
+         setIsMemberDivision(response.data);
+
+         const response2 = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-admin",
+         });
+         setIsAdminDivision(response2.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleCheckMember()
+   }, [])
+
+
+   async function handleLoadTaskStats() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetTaskOne({ id: detail, user: hasil, cat: 'task' })
+         const tasks: { status: number }[] = response.data
+         setTaskStats({ done: tasks.filter(t => t.status === 1).length, total: tasks.length })
+      } catch (error) {
+         console.error(error)
+      }
+   }
 
    async function handleLoad(cat: 'data' | 'progress') {
       try {
@@ -57,29 +107,50 @@ export default function DetailTaskDivision() {
       handleLoad('progress')
    }, [update.progress])
 
+   useEffect(() => {
+      handleLoadTaskStats()
+   }, [update.task])
+
    const handleRefresh = async () => {
       setRefreshing(true)
       await handleLoad('data')
       await handleLoad('progress')
+      await handleLoadTaskStats()
       await new Promise(resolve => setTimeout(resolve, 2000));
       setRefreshing(false)
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: loading ? 'Loading...                            ' : data?.title,
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightTaskDetail id={detail} division={id} status={data?.status} />,
+               // headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision
+               //    ? <></>
+               //    : <HeaderRightTaskDetail id={detail} division={id} status={data?.status} isAdminDivision={isAdminDivision} />,
+               header: () => (
+                  <AppHeader
+                     title={loading ? 'Loading...' : data ? data?.title : ''}
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision
+                           ? <></>
+                           : <HeaderRightTaskDetail id={detail} division={id} status={data?.status} isAdminDivision={isAdminDivision} />
+                     }
+                  />
+               )
             }}
          />
+         <GuideOverlay visible={guideVisible} steps={GUIDE_PROJECT_DETAIL} onDismiss={dismissGuide} />
          <ScrollView
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >
@@ -87,10 +158,12 @@ export default function DetailTaskDivision() {
                {
                   data?.reason != null && data?.reason != "" && <SectionCancel text={data?.reason} />
                }
-               <SectionProgress text={`Kemajuan Kegiatan ${progress}%`} progress={progress} />
-               <SectionTanggalTugasTask refreshing={refreshing}/>
-               <SectionFileTask refreshing={refreshing}/>
-               <SectionMemberTask refreshing={refreshing}/>
+               <SectionProgress progress={progress} doneCount={taskStats?.done} totalCount={taskStats?.total} />
+               <SectionReportTask refreshing={refreshing} />
+               <SectionTanggalTugasTask refreshing={refreshing} isMemberDivision={isMemberDivision} isAdminDivision={isAdminDivision} status={data?.status} idGroup={data?.idGroup ?? ''} />
+               <SectionFileTask refreshing={refreshing} isMemberDivision={isMemberDivision} />
+               <SectionLinkTask refreshing={refreshing} isMemberDivision={isMemberDivision} />
+               <SectionMemberTask refreshing={refreshing} isAdminDivision={isAdminDivision} />
             </View>
          </ScrollView>
       </SafeAreaView>

app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx

@@ -0,0 +1,146 @@
+import AppHeader from "@/components/AppHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiGetTaskOne, apiReportTask } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function TaskDivisionReport() {
+   const { colors } = useTheme();
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const { token, decryptToken } = useAuthSession();
+   const [laporan, setLaporan] = useState("");
+   const [error, setError] = useState(false);
+   const [disable, setDisable] = useState(false);
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+   const [loading, setLoading] = useState(false)
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTaskOne({
+            user: hasil,
+            cat: "data",
+            id: detail,
+         });
+         setLaporan(response.data.report);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   function onValidation(val: string) {
+      setLaporan(val);
+      if (val == "" || val == "null") {
+         setError(true);
+      } else {
+         setError(false);
+      }
+   }
+
+   function checkAll() {
+      if (laporan == "" || laporan == "null" || laporan == undefined || laporan == null || error) {
+         setDisable(true);
+      } else {
+         setDisable(false);
+      }
+   }
+
+   useEffect(() => {
+      checkAll();
+   }, [laporan, error]);
+
+   async function handleUpdate() {
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiReportTask(
+            {
+               report: laporan,
+               user: hasil,
+            },
+            detail
+         );
+         if (response.success) {
+            dispatch(setUpdateTask({ ...update, report: !update.report }));
+            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
+            router.back();
+         } else {
+            Toast.show({ type: 'small', text1: response.message, })
+         }
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   return (
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
+         <Stack.Screen
+            options={{
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
+               headerTitle: "Laporan Kegiatan",
+               headerTitleAlign: "center",
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={disable || loading}
+               //       onPress={() => { handleUpdate() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader title="Laporan Kegiatan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={disable || loading}
+                           onPress={() => { handleUpdate() }}
+                        />
+                     }
+                  />
+               )
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Laporan Kegiatan"
+                  type="default"
+                  placeholder="Laporan Kegiatan"
+                  required
+                  bg={colors.card}
+                  value={laporan}
+                  onChange={(val) => { onValidation(val) }}
+                  error={error}
+                  errorText="Laporan kegiatan harus diisi"
+                  multiline
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

app/(application)/division/[id]/(fitur-division)/task/[detail]/tugas-file/[taskId].tsx

@@ -0,0 +1,382 @@
+import AppHeader from "@/components/AppHeader";
+import BorderBottomItem from "@/components/borderBottomItem";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
+import ModalConfirmation from "@/components/ModalConfirmation";
+import ModalLoading from "@/components/modalLoading";
+import MenuItemRow from "@/components/menuItemRow";
+import Skeleton from "@/components/skeleton";
+import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
+import Styles from "@/constants/Styles";
+import {
+   apiAddTugasTaskFile,
+   apiDeleteTugasTaskFile,
+   apiGetTaskOne,
+   apiGetTugasTaskFile,
+   apiLinkTugasTaskFile,
+} from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
+import * as FileSystem from "expo-file-system";
+import { startActivityAsync } from "expo-intent-launcher";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from "expo-sharing";
+import { useEffect, useState } from "react";
+import {
+   ActivityIndicator,
+   Alert,
+   Platform,
+   SafeAreaView,
+   ScrollView,
+   View,
+} from "react-native";
+import * as mime from "react-native-mime-types";
+import Toast from "react-native-toast-message";
+import { useDispatch, useSelector } from "react-redux";
+
+type FileItem = {
+   id: string;      // DivisionProjectTaskFile.id
+   idFile: string;  // DivisionProjectFile.id
+   name: string;
+   extension: string;
+   idStorage: string;
+};
+
+type ProjectFile = {
+   id: string;
+   name: string;
+   extension: string;
+   idStorage: string;
+};
+
+export default function TugasFileScreen() {
+   const { colors } = useTheme();
+   const { id, detail, taskId, member: memberParam } = useLocalSearchParams<{
+      id: string;
+      detail: string;
+      taskId: string;
+      member: string;
+   }>();
+   const { token, decryptToken } = useAuthSession();
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+   const entityUser = useSelector((state: any) => state.user);
+   const isMember = memberParam === "true";
+   const canEdit = isMember || (entityUser.role !== "user" && entityUser.role !== "coadmin");
+
+   const [data, setData] = useState<FileItem[]>([]);
+   const [loading, setLoading] = useState(true);
+   const [loadingOpen, setLoadingOpen] = useState(false);
+   const [loadingUpload, setLoadingUpload] = useState(false);
+   const [loadingLink, setLoadingLink] = useState(false);
+
+   const [selectFile, setSelectFile] = useState<FileItem | null>(null);
+   const [isMenuModal, setMenuModal] = useState(false);
+   const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+   const [projectFiles, setProjectFiles] = useState<ProjectFile[]>([]);
+   const [isPickerModal, setPickerModal] = useState(false);
+   const [loadingProjectFiles, setLoadingProjectFiles] = useState(false);
+   const [selectedProjectFiles, setSelectedProjectFiles] = useState<string[]>([]);
+
+   const arrSkeleton = Array.from({ length: 4 });
+
+   async function loadFiles() {
+      try {
+         setLoading(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTugasTaskFile({ user: hasil, id: taskId });
+         setData(response.data ?? []);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   async function loadProjectFiles() {
+      try {
+         setLoadingProjectFiles(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTaskOne({ id: detail, user: hasil, cat: "file" });
+         setProjectFiles(response.data ?? []);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingProjectFiles(false);
+      }
+   }
+
+   useEffect(() => {
+      loadFiles();
+   }, []);
+
+   const openFile = () => {
+      setMenuModal(false);
+      setLoadingOpen(true);
+      const remoteUrl = ConstEnv.url_storage + "/files/" + selectFile?.idStorage;
+      const fileName = selectFile?.name + "." + selectFile?.extension;
+      const localPath = `${FileSystem.documentDirectory}/${fileName}`;
+      const mimeType = mime.lookup(fileName);
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         try {
+            if (Platform.OS === "android") {
+               await startActivityAsync("android.intent.action.VIEW", {
+                  data: contentURL,
+                  flags: 1,
+                  type: mimeType as string,
+               });
+            } else {
+               Sharing.shareAsync(localPath);
+            }
+         } catch {
+            Alert.alert("INFO", "Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini");
+         } finally {
+            setLoadingOpen(false);
+         }
+      });
+   };
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteTugasTaskFile({ user: hasil }, String(selectFile?.id));
+         if (response.success) {
+            Toast.show({ type: "small", text1: "Berhasil menghapus file" });
+            dispatch(setUpdateTask({ ...update, task: !update.task }));
+            loadFiles();
+         } else {
+            Toast.show({ type: "small", text1: response.message });
+         }
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menghapus file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setMenuModal(false);
+      }
+   }
+
+   async function handleUpload() {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (result.canceled) return;
+
+      try {
+         setLoadingUpload(true);
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
+
+         for (let i = 0; i < result.assets.length; i++) {
+            fd.append(`file${i}`, {
+               uri: result.assets[i].uri,
+               type: "application/octet-stream",
+               name: result.assets[i].name,
+            } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil }));
+
+         const response = await apiAddTugasTaskFile({ data: fd, id: taskId });
+         if (response.success) {
+            Toast.show({ type: "small", text1: "Berhasil menambahkan file" });
+            dispatch(setUpdateTask({ ...update, task: !update.task }));
+            loadFiles();
+         } else {
+            Toast.show({ type: "small", text1: response.message });
+         }
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menambahkan file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setLoadingUpload(false);
+      }
+   }
+
+   function toggleProjectFileSelect(id: string) {
+      setSelectedProjectFiles((prev) =>
+         prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+      );
+   }
+
+   async function handleLinkFiles() {
+      if (selectedProjectFiles.length === 0) return;
+      try {
+         setLoadingLink(true);
+         const hasil = await decryptToken(String(token?.current));
+         for (const idFile of selectedProjectFiles) {
+            await apiLinkTugasTaskFile({ user: hasil, idFile, id: taskId });
+         }
+         Toast.show({ type: "small", text1: "Berhasil menambahkan file" });
+         dispatch(setUpdateTask({ ...update, task: !update.task }));
+         setPickerModal(false);
+         setSelectedProjectFiles([]);
+         loadFiles();
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menambahkan file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setLoadingLink(false);
+      }
+   }
+
+   const attachedFileIds = new Set(data.map((f) => f.idFile));
+
+   return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <Stack.Screen
+            options={{
+               header: () => (
+                  <AppHeader
+                     title="File Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               ),
+            }}
+         />
+         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
+
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {canEdit && (
+                  <>
+                     <ButtonSelect
+                        value="Upload dari Perangkat"
+                        onPress={handleUpload}
+                        disabled={loadingUpload}
+                     />
+                     <ButtonSelect
+                        value="Pilih dari File Kegiatan ini"
+                        onPress={() => {
+                           setSelectedProjectFiles([]);
+                           setPickerModal(true);
+                           loadProjectFiles();
+                        }}
+                     />
+                  </>
+               )}
+
+               {loadingUpload && <ActivityIndicator size="small" style={Styles.mv05} />}
+
+               <View style={[Styles.mb15, Styles.mt10]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File Terlampir</Text>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                     {loading ? (
+                        arrSkeleton.map((_, index) => (
+                           <Skeleton key={index} width={100} height={40} widthType="percent" borderRadius={10} />
+                        ))
+                     ) : data.length > 0 ? (
+                        data.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="all"
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                              title={item.name + "." + item.extension}
+                              titleWeight="normal"
+                              onPress={() => {
+                                 setSelectFile(item);
+                                 setMenuModal(true);
+                              }}
+                           />
+                        ))
+                     ) : (
+                        <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]}>
+                           Tidak ada file
+                        </Text>
+                     )}
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+
+         {/* Menu per file */}
+         <DrawerBottom animation="slide" isVisible={isMenuModal} setVisible={setMenuModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
+                  title="Lihat / Share"
+                  onPress={openFile}
+               />
+               {canEdit && (
+                  <MenuItemRow
+                     icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                     title="Hapus"
+                     onPress={() => {
+                        setMenuModal(false);
+                        setTimeout(() => setShowDeleteModal(true), 600);
+                     }}
+                  />
+               )}
+            </View>
+         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus file ini?"
+            onConfirm={() => {
+               setShowDeleteModal(false);
+               handleDelete();
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
+
+         {/* Picker file dari proyek */}
+         <DrawerBottom
+            animation="slide"
+            isVisible={isPickerModal}
+            setVisible={setPickerModal}
+            title="Pilih File Proyek"
+            height={60}
+         >
+            <ScrollView>
+               {loadingProjectFiles ? (
+                  <ActivityIndicator size="small" />
+               ) : projectFiles.length > 0 ? (
+                  projectFiles.map((item, index) => {
+                     const isAttached = attachedFileIds.has(item.id);
+                     const isSelected = selectedProjectFiles.includes(item.id);
+                     return (
+                        <View key={index} style={isAttached ? { opacity: 0.4 } : undefined}>
+                           <BorderBottomItem
+                              borderType="bottom"
+                              icon={
+                                 isAttached || isSelected ? (
+                                    <Ionicons name="checkmark-circle" size={25} color={colors.primary} />
+                                 ) : (
+                                    <MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />
+                                 )
+                              }
+                              title={item.name + "." + item.extension}
+                              titleWeight="normal"
+                              onPress={() => !isAttached && toggleProjectFileSelect(item.id)}
+                              bgColor="transparent"
+                           />
+                        </View>
+                     );
+                  })
+               ) : (
+                  <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]}>
+                     Tidak ada file tersedia
+                  </Text>
+               )}
+            </ScrollView>
+            {projectFiles.length > 0 && (
+               <View>
+                  <ButtonForm
+                     text={loadingLink ? "Menyimpan..." : `Tambahkan (${selectedProjectFiles.length})`}
+                     disabled={selectedProjectFiles.length === 0 || loadingLink}
+                     onPress={handleLinkFiles} />
+               </View>
+            )}
+         </DrawerBottom>
+      </SafeAreaView>
+   );
+}

app/(application)/division/[id]/(fitur-division)/task/create.tsx

@@ -1,7 +1,5 @@
-import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
@@ -9,22 +7,45 @@ import MenuItemRow from "@/components/menuItemRow";
 import ModalSelect from "@/components/modalSelect";
 import SectionListAddTask from "@/components/project/sectionListAddTask";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiCreateTask } from "@/lib/api";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { setTaskCreate } from "@/lib/taskCreate";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
 export default function CreateTaskDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
@@ -38,6 +59,7 @@ export default function CreateTaskDivision() {
    const [title, setTitle] = useState('')
    const [error, setError] = useState(false);
    const [isModal, setModal] = useState(false)
+   const [loading, setLoading] = useState(false)
    let hitung = 0;
 
    useEffect(() => {
@@ -77,6 +99,7 @@ export default function CreateTaskDivision() {
 
    async function handleCreate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const fd = new FormData()
 
@@ -100,32 +123,51 @@ export default function CreateTaskDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        handleBack();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          handleBack();
+               //       }}
+               //    />
+               // ),
                headerTitle: `Tambah Tugas`,
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={title == "" || entitiesMember.length == 0 || taskCreate.length == 0}
-                     category="create"
-                     onPress={() => { handleCreate() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={title == "" || entitiesMember.length == 0 || taskCreate.length == 0 || loading}
+               //       category="create"
+               //       onPress={() => { handleCreate() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Tambah Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={title == "" || entitiesMember.length == 0 || taskCreate.length == 0 || loading}
+                           category="create"
+                           onPress={() => { handleCreate() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <ScrollView>
@@ -141,61 +183,134 @@ export default function CreateTaskDivision() {
                      val == "" || val == "null" ? setError(true) : setError(false);
                   }}
                   error={error}
+                  bg={colors.card}
                   errorText="Judul Tugas tidak boleh kosong"
                />
-               <ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => { router.push(`/division/${id}/task/create/task`); }} />
-               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
-               <ButtonSelect value="Tambah Anggota" onPress={() => { router.push(`/division/${id}/task/create/member`); }} />
-               <SectionListAddTask />
-               {
-                  fileForm.length > 0 && (
-                     <View style={[Styles.mb15]}>
-                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
-                           {
-                              fileForm.map((item, index) => (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                                    title={item.name}
-                                    titleWeight="normal"
-                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
-                                 />
-                              ))
-                           }
-                        </View>
-                     </View>
-                  )
-               }
-               {entitiesMember.length > 0 && (
-                  <View>
-                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text>Anggota</Text>
-                        <Text>Total {entitiesMember.length} Anggota</Text>
-                     </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                        {entitiesMember.map(
-                           (item: { img: any; name: any }, index: any) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={index}
-                                    borderType="bottom"
-                                    icon={
-                                       <ImageUser
-                                          src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
-                                          size="sm"
-                                       />
-                                    }
-                                    title={item.name}
-                                 />
-                              );
-                           }
+               {/* Tanggal & Tugas */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }
+               ]}>
+                  <Pressable
+                     onPress={() => router.push(`/division/${id}/task/create/task`)}
+                     style={[Styles.sectionActionRow, { marginBottom: taskCreate.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
+                        <MaterialCommunityIcons name="calendar-check-outline" size={18} color={colors.tabActive} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tanggal & Tugas</Text>
+                        {taskCreate.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada tugas ditambahkan</Text>
                         )}
                      </View>
-                  </View>
-               )}
+                     {taskCreate.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{taskCreate.length} tugas</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {taskCreate.length > 0 && <SectionListAddTask showTitle={false} />}
+               </View>
+
+               {/* File */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }
+               ]}>
+                  <Pressable
+                     onPress={pickDocumentAsync}
+                     style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
+                        <MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
+                        {fileForm.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
+                        )}
+                     </View>
+                     {fileForm.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {fileForm.length > 0 && (
+                     <View style={Styles.fileGrid}>
+                        {fileForm.map((item, index) => {
+                           const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
+                           const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
+                           const iconName = getFileIcon(ext)
+                           const iconColor = getFileColor(ext)
+                           return (
+                              <Pressable
+                                 key={index}
+                                 onPress={() => { setIndexDelFile(index); setModal(true) }}
+                                 style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
+                                    <MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+                                 </View>
+                              </Pressable>
+                           )
+                        })}
+                     </View>
+                  )}
+               </View>
+
+               {/* Anggota */}
+               <View style={[
+                  Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }
+               ]}>
+                  <Pressable
+                     onPress={() => router.push(`/division/${id}/task/create/member`)}
+                     style={[Styles.sectionActionRow, { marginBottom: entitiesMember.length > 0 ? 12 : 0 }]}
+                  >
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.tabActive + '18' }]}>
+                        <MaterialCommunityIcons name="account-group-outline" size={18} color={colors.tabActive} />
+                     </View>
+                     <View style={Styles.flex1}>
+                        <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Anggota</Text>
+                        {entitiesMember.length === 0 && (
+                           <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Belum ada anggota dipilih</Text>
+                        )}
+                     </View>
+                     {entitiesMember.length > 0 && (
+                        <View style={[Styles.sectionBadge, { backgroundColor: colors.tabActive + '18' }]}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.tabActive }]}>{entitiesMember.length} orang</Text>
+                        </View>
+                     )}
+                     <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                  </Pressable>
+                  {entitiesMember.length > 0 && (
+                     <View style={{ gap: 6 }}>
+                        {entitiesMember.map((item: { img: any; name: any; position?: string }, index: any) => (
+                           <View
+                              key={index}
+                              style={[Styles.listItemCard, { borderColor: colors.icon + '18' }]}
+                           >
+                              <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                              <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
+                              {item.position && (
+                                 <View style={[Styles.positionBadge, { backgroundColor: colors.dimmed + '15' }]}>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>{item.position}</Text>
+                                 </View>
+                              )}
+                           </View>
+                        ))}
+                     </View>
+                  )}
+               </View>
 
             </View>
          </ScrollView>
@@ -203,7 +318,7 @@ export default function CreateTaskDivision() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />

app/(application)/division/[id]/(fitur-division)/task/create/member.tsx

@@ -1,17 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetDivisionMember } from "@/lib/api";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -22,10 +24,10 @@ type Props = {
 }
 
 export default function AddMemberCreateTask() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string, detail: string }>()
-   const [dataOld, setDataOld] = useState<Props[]>([])
    const [data, setData] = useState<Props[]>([])
    const [selectMember, setSelectMember] = useState<any[]>([])
    const [search, setSearch] = useState('')
@@ -64,37 +66,53 @@ export default function AddMemberCreateTask() {
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Pilih Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="create"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="create"
+               //       disable={selectMember.length > 0 ? false : true}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Pilih Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="create"
+                           disable={selectMember.length > 0 ? false : true}
+                           onPress={() => {
+                              handleAddMember()
+                           }}
+                        />
+                     }
                   />
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -103,9 +121,11 @@ export default function AddMemberCreateTask() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+            >
 
                {
                   data.length > 0 ?
@@ -113,19 +133,19 @@ export default function AddMemberCreateTask() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  onChoose(item.idUser, item.name, item.img)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]}>{item.name}</Text>
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
@@ -136,6 +156,6 @@ export default function AddMemberCreateTask() {
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/division/[id]/(fitur-division)/task/create/task.tsx

@@ -1,11 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setTaskCreate } from "@/lib/taskCreate";
-import dayjs from "dayjs";
+import { useTheme } from "@/providers/ThemeProvider";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
@@ -20,6 +28,8 @@ import DateTimePicker, {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateTaskAddTugas() {
+   const { colors } = useTheme();
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const [disable, setDisable] = useState(true);
    const [range, setRange] = useState<{
@@ -33,11 +43,12 @@ export default function CreateTaskAddTugas() {
    })
    const [title, setTitle] = useState('');
    const taskCreate = useSelector((state: any) => state.taskCreate)
+   const [dsbButton, setDsbButton] = useState(true)
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
 
-   const from = range.startDate
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+   const from = formatDateOnly(range.startDate, "DD-MM-YYYY")
+   const to = formatDateOnly(range.endDate, "DD-MM-YYYY")
 
    function checkAll() {
       if (from == "" || to == "" || title == "" || title == "null" || error.startDate || error.endDate || error.title) {
@@ -58,19 +69,50 @@ export default function CreateTaskAddTugas() {
       }
    }
 
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll()
    }, [from, to, title, error])
 
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
    async function handleCreate() {
       try {
-         dispatch(setTaskCreate([...taskCreate, {
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
+         const hasilOrder = [...taskCreate, {
             title: title,
             dateStart: from,
             dateEnd: to,
-            dateStartFix: dayjs(range.startDate).format("YYYY-MM-DD"),
-            dateEndFix: dayjs(range.endDate).format("YYYY-MM-DD"),
-         }]))
+            dateStartFix: formatDateOnly(range.startDate, "YYYY-MM-DD"),
+            dateEndFix: formatDateOnly(range.endDate, "YYYY-MM-DD"),
+            dataDetail: dataDetailFix
+         }].sort((a, b) => {
+            return new Date(a.dateStartFix).getTime() - new Date(b.dateStartFix).getTime();
+         });
+
+         dispatch(setTaskCreate(hasilOrder))
          router.back();
       } catch (error) {
          console.error(error);
@@ -78,34 +120,47 @@ export default function CreateTaskAddTugas() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Tambah Tugas",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disable}
-                     category="create"
-                     onPress={() => { handleCreate() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disable}
+               //       category="create"
+               //       onPress={() => { handleCreate() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader title="Tambah Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disable}
+                           category="create"
+                           onPress={() => { handleCreate() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
@@ -115,6 +170,15 @@ export default function CreateTaskAddTugas() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: { color: colors.text },
+                           month_selector_label: { color: colors.text },
+                           year_label: { color: colors.text },
+                           year_selector_label: { color: colors.text },
+                           day_label: { color: colors.text },
+                           time_label: { color: colors.text },
+                           weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
@@ -122,31 +186,39 @@ export default function CreateTaskAddTugas() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
+                     {/* <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
@@ -157,6 +229,14 @@ export default function CreateTaskAddTugas() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
+         <ModalAddDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -11,6 +11,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetTask } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Ionicons,
@@ -20,6 +21,7 @@ import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Pressable, RefreshControl, ScrollView, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 type Props = {
    id: string;
@@ -31,9 +33,22 @@ type Props = {
 };
 
 export default function ListTask() {
-   const { id, status } = useLocalSearchParams<{ id: string; status: string }>()
+   const { colors } = useTheme()
+   const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>()
    const [isList, setList] = useState(false)
    const { token, decryptToken } = useAuthSession()
+
+   useEffect(() => {
+      AsyncStorage.getItem('division_view_mode').then((val) => {
+         if (val !== null) setList(val === 'list')
+      })
+   }, [])
+
+   function toggleView() {
+      const next = !isList
+      setList(next)
+      AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
+   }
    const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState("")
    const update = useSelector((state: any) => state.taskUpdate)
@@ -43,6 +58,8 @@ export default function ListTask() {
    const [page, setPage] = useState(1)
    const [waiting, setWaiting] = useState(false)
    const [refreshing, setRefreshing] = useState(false)
+   const [isYear, setYear] = useState("")
+
 
    async function handleLoad(loading: boolean, thisPage: number) {
       try {
@@ -55,8 +72,12 @@ export default function ListTask() {
             division: id,
             status: statusFix,
             search,
-            page: thisPage
+            page: thisPage,
+            year
          });
+
+         setYear(response.tahun)
+
          if (thisPage == 1) {
             setData(response.data);
          } else if (thisPage > 1 && response.data.length > 0) {
@@ -104,9 +125,9 @@ export default function ListTask() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
-            <ScrollView horizontal style={[Styles.mb10]}>
+            <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
                <ButtonTab
                   active={statusFix}
                   value="0"
@@ -115,7 +136,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : "black"}
+                        color={statusFix == "0" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -129,7 +150,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="progress-check"
-                        color={statusFix == "1" ? "white" : "black"}
+                        color={statusFix == "1" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -143,7 +164,7 @@ export default function ListTask() {
                   icon={
                      <Ionicons
                         name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : "black"}
+                        color={statusFix == "2" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -157,28 +178,30 @@ export default function ListTask() {
                   icon={
                      <AntDesign
                         name="closecircleo"
-                        color={statusFix == "3" ? "white" : "black"}
+                        color={statusFix == "3" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
                   n={4}
                />
             </ScrollView>
-            <View style={[Styles.rowSpaceBetween]}>
+            <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                <InputSearch width={68} onChange={setSearch} />
-               <Pressable
-                  onPress={() => {
-                     setList(!isList);
-                  }}
-               >
+               <Pressable onPress={toggleView}>
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
             </View>
          </View>
+         <View style={[Styles.mv05]}>
+            <View style={[Styles.rowOnly]}>
+               <Text style={[Styles.mr05]}>Filter :</Text>
+               <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
+            </View>
+         </View>
          <View style={[{ flex: 2 }]}>
             {
                loading ?
@@ -205,9 +228,10 @@ export default function ListTask() {
                                        router.push(`./task/${item.id}`);
                                     }}
                                     borderType="bottom"
+                                    bgColor="transparent"
                                     icon={
-                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                          <AntDesign name="areachart" size={25} color={"#384288"} />
+                                       <View style={[Styles.iconContent]}>
+                                          <AntDesign name="areachart" size={25} color={"black"} />
                                        </View>
                                     }
                                     title={item.title}
@@ -221,6 +245,7 @@ export default function ListTask() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -262,11 +287,11 @@ export default function ListTask() {
                                        <LabelStatus
                                           size="default"
                                           category={
-                                             item.status === 0 ? 'primary' :
+                                             item.status === 0 ? 'secondary' :
                                                 item.status === 1 ? 'warning' :
                                                    item.status === 2 ? 'success' :
                                                       item.status === 3 ? 'error' :
-                                                         'primary'
+                                                         'secondary'
                                           }
                                           text={
                                              item.status === 0 ? 'SEGERA' :
@@ -287,6 +312,7 @@ export default function ListTask() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -326,13 +352,13 @@ export default function ListTask() {
                         </View>
                      )
                   ) : (
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: "center" },]} >
+                     <Text style={[Styles.textDefault, Styles.textCenter]} >
                         Tidak ada data
                      </Text>
                   )
 
             }
-         </View>
-      </View>
+         </View >
+      </View >
    );
 }

app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx

@@ -1,13 +1,21 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
-import dayjs from "dayjs";
+import { useTheme } from "@/providers/ThemeProvider";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
@@ -21,6 +29,8 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function UpdateProjectTaskDivision() {
+   const { colors } = useTheme();
+   const headerHeight = useHeaderHeight();
    const { detail } = useLocalSearchParams<{ detail: string }>();
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
@@ -29,10 +39,14 @@ export default function UpdateProjectTaskDivision() {
       startDate: DateType;
       endDate: DateType;
    }>({ startDate: undefined, endDate: undefined });
+   const [loadingSubmit, setLoadingSubmit] = useState(false)
    const [month, setMonth] = useState<any>();
    const [year, setYear] = useState<any>();
    const [loading, setLoading] = useState(true);
    const [disableBtn, setDisableBtn] = useState(false);
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
+   const [dsbButton, setDsbButton] = useState(true)
    const [title, setTitle] = useState("");
    const [error, setError] = useState({
       startDate: false,
@@ -40,10 +54,8 @@ export default function UpdateProjectTaskDivision() {
       title: false,
    });
 
-   const from = range.startDate
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+   const from = formatDateOnly(range.startDate);
+   const to = formatDateOnly(range.endDate);
 
    async function handleLoad() {
       try {
@@ -60,6 +72,22 @@ export default function UpdateProjectTaskDivision() {
          });
          setMonth(new Date(response.data.dateStart).getMonth());
          setYear(new Date(response.data.dateStart).getFullYear());
+
+         const response2 = await apiGetTaskTugas({
+            user: hasil,
+            id: detail,
+            cat: "detailTask"
+         });
+         if (response2.data.length == 0) {
+            const datanya = getDatesInRange(response.data.dateStart, response.data.dateEnd)
+            setDataDetail(datanya.map((item: any) => ({
+               date: item,
+               timeStart: null,
+               timeEnd: null,
+            })))
+         } else {
+            setDataDetail(response2.data)
+         }
       } catch (error) {
          console.error(error);
       } finally {
@@ -73,8 +101,23 @@ export default function UpdateProjectTaskDivision() {
 
    async function handleEdit() {
       try {
+         setLoadingSubmit(true)
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditTaskTugas({ data: { title, dateStart: dayjs(range.startDate).format("YYYY-MM-DD"), dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"), user: hasil }, id: detail });
+         const response = await apiEditTaskTugas({
+            data: {
+               title,
+               dateStart: formatDateOnly(range.startDate, "YYYY-MM-DD"),
+               dateEnd: formatDateOnly(range.endDate, "YYYY-MM-DD"),
+               user: hasil,
+               dataDetail: dataDetailFix
+            },
+            id: detail
+         });
          if (response.success) {
             dispatch(setUpdateTask({ ...update, task: !update.task }))
             Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
@@ -82,9 +125,13 @@ export default function UpdateProjectTaskDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Gagal mengubah data', })
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoadingSubmit(false)
       }
    }
 
@@ -115,41 +162,80 @@ export default function UpdateProjectTaskDivision() {
       }
    }
 
+
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll();
    }, [from, to, title, error]);
 
+
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Edit Tanggal dan Tugas",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="update"
-                     onPress={() => {
-                        handleEdit()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disableBtn || loadingSubmit}
+               //       category="update"
+               //       onPress={() => {
+               //          handleEdit()
+               //       }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Edit Tanggal dan Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || loadingSubmit}
+                           category="update"
+                           onPress={() => {
+                              handleEdit()
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {!loading && (
                         <DateTimePicker
                            mode="range"
@@ -162,6 +248,15 @@ export default function UpdateProjectTaskDivision() {
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
+                              month_label: { color: colors.text },
+                              month_selector_label: { color: colors.text },
+                              year_label: { color: colors.text },
+                              year_selector_label: { color: colors.text },
+                              day_label: { color: colors.text },
+                              time_label: { color: colors.text },
+                              weekday_label: { color: colors.text },
+                              button_next_image: { tintColor: colors.text },
+                              button_prev_image: { tintColor: colors.text },
                            }}
                         />
                      )}
@@ -170,33 +265,41 @@ export default function UpdateProjectTaskDivision() {
                      <View style={[Styles.rowSpaceBetween]}>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                               <Text style={{ textAlign: "center" }}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {(error.endDate || error.startDate) && (
-                        <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]} >
+                        <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]} >
                            Tanggal tidak boleh kosong
                         </Text>
                      )}
+                     {/* <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
@@ -207,7 +310,14 @@ export default function UpdateProjectTaskDivision() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
-
+         <ModalAddDetailTugasTask
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/[id]/add-member.tsx

@@ -1,17 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetUser } from "@/lib/api";
 import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -22,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberDivision() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
@@ -31,9 +34,11 @@ export default function AddMemberDivision() {
    const [search, setSearch] = useState('')
    const update = useSelector((state: any) => state.divisionUpdate)
    const dispatch = useDispatch()
+   const [loading, setLoading] = useState(false)
 
    async function handleLoad() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneDetail({ user: hasil, id })
          setDataOld(response.data.member)
@@ -42,6 +47,8 @@ export default function AddMemberDivision() {
          setData(responsemember.data.filter((i: any) => i.idUserRole != 'supadmin'))
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -72,6 +79,7 @@ export default function AddMemberDivision() {
 
    async function handleAddMember() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiAddMemberDivision({ id: id, data: { user: hasil, member: selectMember } })
          if (response.success) {
@@ -81,45 +89,65 @@ export default function AddMemberDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal menambahkan anggota', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="update"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Tambah Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={selectMember.length == 0 || loading ? true : false}
+                           onPress={() => {
+                              handleAddMember()
+                           }}
+                        />
+                     }
                   />
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => handleSearch(val)} value={search} />
 
             {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -128,9 +156,11 @@ export default function AddMemberDivision() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+            >
 
                {
                   data.length > 0 ?
@@ -139,22 +169,22 @@ export default function AddMemberDivision() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderBottomColor: colors.icon + '20' }]}
                               onPress={() => {
                                  !found && onChoose(item.id, item.name, item.img)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
@@ -165,6 +195,6 @@ export default function AddMemberDivision() {
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/division/[id]/edit.tsx

@@ -1,10 +1,11 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import Styles from "@/constants/Styles";
 import { apiEditDivision, apiGetDivisionOneDetail } from "@/lib/api";
 import { setUpdateDivision } from "@/lib/divisionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,10 +13,12 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function EditDivision() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.divisionUpdate)
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
+   const [loading, setLoading] = useState(false)
    const [data, setData] = useState({
       name: "",
       desc: "",
@@ -43,6 +46,7 @@ export default function EditDivision() {
 
    async function handleEdit() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiEditDivision({ user: hasil, name: data.name, desc: data.desc }, id)
          if (response.success) {
@@ -52,35 +56,53 @@ export default function EditDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Edit Divisi",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={error.name}
-                     category="update"
-                     onPress={() => { handleEdit() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={error.name || loading ? true : false}
+               //       category="update"
+               //       onPress={() => { handleEdit() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Edit Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={error.name || loading ? true : false}
+                           category="update"
+                           onPress={() => { handleEdit() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
                   label="Nama Divisi"

app/(application)/division/[id]/index.tsx

@@ -1,4 +1,4 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import AppHeader from "@/components/AppHeader"
 import DiscussionDivisionDetail from "@/components/division/discussionDivisionDetail"
 import FileDivisionDetail from "@/components/division/fileDivisionDetail"
 import FiturDivisionDetail from "@/components/division/fiturDivisionDetail"
@@ -8,9 +8,10 @@ import CaraouselHome from "@/components/home/carouselHome"
 import Styles from "@/constants/Styles"
 import { apiGetDivisionOneDetail } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
-import { SafeAreaView, ScrollView, View } from "react-native"
+import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
 
 type Props = {
    id: string,
@@ -22,15 +23,17 @@ type Props = {
 }
 
 export default function DetailDivisionFitur() {
+   const { colors } = useTheme()
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props>()
    const [loading, setLoading] = useState(true)
+   const [refreshing, setRefreshing] = useState(false)
 
 
-   async function handleLoad() {
+   async function handleLoad(loading: boolean) {
       try {
-         setLoading(true)
+         setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDivisionOneDetail({ user: hasil, id })
          setData(response.data.division)
@@ -42,26 +45,50 @@ export default function DetailDivisionFitur() {
    }
 
    useEffect(() => {
-      handleLoad()
+      handleLoad(true)
    }, [])
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: loading ? 'Loading...                            ' : data?.name,
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDivisionDetail id={id} />,
+               // headerRight: () => <HeaderRightDivisionDetail id={id} />,
+               header: () => (
+                  <AppHeader
+                     title={loading ? 'Loading...' : data?.name || ''}
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<HeaderRightDivisionDetail id={id} />}
+                  />
+               )
             }}
          />
-         <ScrollView>
-            <CaraouselHome />
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            showsVerticalScrollIndicator={false}
+         >
+            <CaraouselHome refreshing={refreshing} />
             <View style={[Styles.ph15, Styles.mb100]}>
-               <FiturDivisionDetail />
-               <TaskDivisionDetail />
-               <FileDivisionDetail />
-               <DiscussionDivisionDetail />
+               <FiturDivisionDetail refreshing={refreshing} />
+               <TaskDivisionDetail refreshing={refreshing} />
+               <FileDivisionDetail refreshing={refreshing} />
+               <DiscussionDivisionDetail refreshing={refreshing} />
             </View>
          </ScrollView>
       </SafeAreaView>

app/(application)/division/[id]/info.tsx

@@ -1,20 +1,20 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
-import BorderBottomItem from "@/components/borderBottomItem"
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
+import AppHeader from "@/components/AppHeader"
 import DrawerBottom from "@/components/drawerBottom"
+import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
 import ImageUser from "@/components/imageNew"
+import MenuItemRow from "@/components/menuItemRow"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import SectionCancel from "@/components/sectionCancel"
-import Skeleton from "@/components/skeleton"
-import SkeletonTwoItem from "@/components/skeletonTwoItem"
-import { ColorsStatus } from "@/constants/ColorsStatus"
+import Text from "@/components/Text"
+import { ConstEnv } from "@/constants/ConstEnv"
 import Styles from "@/constants/Styles"
-import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiUpdateStatusAdminDivision } from "@/lib/api"
+import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiGetDivisionOneFeature, apiUpdateStatusAdminDivision } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
-import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import { useTheme } from "@/providers/ThemeProvider"
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
-import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useSelector } from "react-redux"
 
@@ -37,6 +37,9 @@ type PropsMember = {
 }
 
 export default function InformationDivision() {
+   const { colors } = useTheme()
+   const [refreshing, setRefreshing] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
    const { id } = useLocalSearchParams<{ id: string }>()
    const [isModal, setModal] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -44,21 +47,22 @@ export default function InformationDivision() {
    const [dataMember, setDataMember] = useState<PropsMember[]>([])
    const [refresh, setRefresh] = useState(false)
    const update = useSelector((state: any) => state.divisionUpdate)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
+   const SKELETON_COUNT = 5
+   const [isMemberDivision, setIsMemberDivision] = useState(false)
+   const [isAdminDivision, setIsAdminDivision] = useState(false)
    const [dataMemberChoose, setDataMemberChoose] = useState({
       id: '',
       name: '',
       isAdmin: false
    })
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
    function handleMemberOut() {
       setModal(false)
-      AlertKonfirmasi({
-         title: 'Konfirmasi',
-         desc: 'Apakah anda yakin ingin mengeluarkan anggota?',
-         onPress: () => { memberOut() }
-      })
+      setTimeout(() => {
+         setShowDeleteModal(true)
+      }, 600)
    }
 
    async function memberOut() {
@@ -71,9 +75,11 @@ export default function InformationDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengeluarkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setModal(false)
       }
@@ -89,9 +95,11 @@ export default function InformationDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengubah status admin"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setModal(false)
       }
@@ -111,12 +119,42 @@ export default function InformationDivision() {
       }
    }
 
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      handleCheckMember()
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   async function handleCheckMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-member",
+         });
+
+         const response2 = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-admin",
+         });
+         setIsMemberDivision(response.data);
+         setIsAdminDivision(response2.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
    useEffect(() => {
       handleLoad(false)
    }, [refresh, update])
 
    useEffect(() => {
       handleLoad(true)
+      handleCheckMember()
    }, [])
 
    function handleChooseMember(item: PropsMember) {
@@ -125,112 +163,158 @@ export default function InformationDivision() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Informasi Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive} />,
+               // headerRight: () => ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive} />,
+               header: () => (
+                  <AppHeader
+                     title="Informasi Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive} />
+                     }
+                  />
+               )
             }}
          />
-         <ScrollView style={[Styles.h100]}>
-            <View style={[Styles.p15]}>
-               {
-                  dataDetail?.isActive == false && (
-                     <SectionCancel title={'Divisi nonaktif'} />
-                  )
-               }
-               <View style={[Styles.mb15]}>
-                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
-                  <View style={[Styles.wrapPaper]}>
-                     {loading ?
-                        arrSkeleton.map((item, index) => {
+         <ScrollView
+            showsVerticalScrollIndicator={false}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <View style={[Styles.p15, Styles.mb100]}>
+
+               {dataDetail?.isActive === false && <SectionCancel title="Divisi nonaktif" />}
+
+               {/* Deskripsi */}
+               <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow, Styles.mb15,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                  <View style={[Styles.sectionActionRow, { marginBottom: 12 }]}>
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                        <MaterialIcons name="info-outline" size={18} color={colors.dimmed} />
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Deskripsi</Text>
+                  </View>
+                  {loading
+                     ? Array.from({ length: 3 }).map((_, i) => (
+                        <View key={i} style={{ height: 13, borderRadius: 6, marginBottom: 8, backgroundColor: colors.icon + '20', width: i === 2 ? '60%' : '100%' }} />
+                     ))
+                     : <Text style={[Styles.textDefault, { color: colors.text, lineHeight: 22 }]}>{dataDetail?.desc}</Text>
+                  }
+               </View>
+
+               {/* Tombol tambah anggota */}
+               {((entityUser.role !== "user" && entityUser.role !== "coadmin") || isAdminDivision) && dataDetail?.isActive && (
+                  <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.mb15,
+                     { backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
+                     <Pressable
+                        onPress={() => router.push(`/division/${id}/add-member`)}
+                        style={Styles.sectionActionRow}
+                     >
+                        <View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '18' }]}>
+                           <MaterialCommunityIcons name="account-plus-outline" size={18} color={colors.icon} />
+                        </View>
+                        <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Tambah Anggota</Text>
+                        <MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
+                     </Pressable>
+                  </View>
+               )}
+
+               {/* Daftar anggota */}
+               <View style={[Styles.wrapPaper, Styles.sectionCard,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
+
+                  {/* Header */}
+                  <View style={[Styles.sectionActionRow, { padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                        <MaterialIcons name="people" size={18} color={colors.dimmed} />
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Anggota</Text>
+                     {!loading && (
+                        <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>{dataMember.length} anggota</Text>
+                     )}
+                  </View>
+
+                  {loading
+                     ? Array.from({ length: SKELETON_COUNT }).map((_, i) => (
+                        <View key={i} style={[Styles.rowItemsCenter, Styles.ph15,
+                           { paddingVertical: 14, gap: 14, borderBottomWidth: i < SKELETON_COUNT - 1 ? 1 : 0, borderBottomColor: colors.icon + '14' }]}>
+                           <View style={[Styles.userProfileExtraSmall, { backgroundColor: colors.icon + '20', borderRadius: 100 }]} />
+                           <View style={{ height: 13, borderRadius: 6, flex: 1, backgroundColor: colors.icon + '20', maxWidth: 140 + (i % 3) * 30 }} />
+                        </View>
+                     ))
+                     : dataMember.length === 0
+                        ? (
+                           <View style={[Styles.contentItemCenter, { paddingVertical: 40 }]}>
+                              <MaterialIcons name="people-outline" size={34} color={colors.icon + '50'} />
+                              <Text style={[Styles.textMediumNormal, Styles.mt10, { color: colors.dimmed }]}>Belum ada anggota</Text>
+                           </View>
+                        )
+                        : dataMember.map((item, index) => {
+                           const canPress = dataDetail?.isActive && (isAdminDivision || (entityUser.role !== "user" && entityUser.role !== "coadmin"))
                            return (
-                              <Skeleton key={index} width={100} height={10} widthType="percent" borderRadius={10} />
+                              <Pressable
+                                 key={index}
+                                 onPress={() => canPress && handleChooseMember(item)}
+                                 style={({ pressed }) => [
+                                    Styles.rowItemsCenter, Styles.ph15,
+                                    {
+                                       paddingVertical: 13, gap: 14,
+                                       borderBottomWidth: index < dataMember.length - 1 ? 1 : 0,
+                                       borderBottomColor: colors.icon + '14',
+                                       backgroundColor: pressed && canPress ? colors.icon + '0E' : 'transparent',
+                                    },
+                                 ]}
+                              >
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                                 <Text style={[Styles.textDefault, Styles.flex1, { color: colors.text }]} numberOfLines={1}>
+                                    {item.name}
+                                 </Text>
+                                 <Text style={[Styles.textMediumNormal, { color: item.isAdmin ? colors.tabActive : colors.dimmed }]}>
+                                    {item.isAdmin ? 'Admin' : 'Anggota'}
+                                 </Text>
+                                 {canPress && <MaterialCommunityIcons name="chevron-right" size={18} color={colors.icon + '60'} />}
+                              </Pressable>
                            )
                         })
-                        :
-                        <Text>{dataDetail?.desc}</Text>
-                     }
-                  </View>
+                  }
                </View>
-               <View style={[Styles.mb15]}>
-                  <Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text>
-                  <View style={[Styles.wrapPaper]}>
-                     {
-                        dataDetail?.isActive && (
-                           <BorderBottomItem
-                              onPress={() => { router.push(`/division/${id}/add-member`) }}
-                              borderType="none"
-                              icon={
-                                 <View style={[Styles.iconContent, ColorsStatus.gray]}>
-                                    <Feather name="user-plus" size={25} color={'#384288'} />
-                                 </View>
-                              }
-                              title="Tambah Anggota"
-                           />
-                        )
-                     }
 
-                     {
-                        loading ?
-                           arrSkeleton.map((item, index) => {
-                              return (
-                                 <SkeletonTwoItem key={index} />
-                              )
-                           })
-                           :
-                           dataMember.map((item, index) => {
-                              return (
-                                 <BorderBottomItem
-                                    width={55}
-                                    key={index}
-                                    borderType="bottom"
-                                    onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
-                                    icon={
-                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                                    }
-                                    title={item.name}
-                                    rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
-                                 />
-                              )
-                           })
-                     }
-                  </View>
-               </View>
             </View>
          </ScrollView>
 
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={dataMemberChoose.name}>
-            <View>
-               <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberAdmin() }}>
-                  <View style={[Styles.rowItemsCenter]}>
-                     <View style={[Styles.iconContent, ColorsStatus.info]}>
-                        <MaterialIcons name="verified-user" size={25} color='#19345E' />
-                     </View>
-                     <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
-                        <View style={[Styles.ml10]}>
-                           <Text style={[Styles.textDefault]}>{dataMemberChoose.isAdmin ? 'Memberhentikan sebagai admin' : 'Jadikan admin'}</Text>
-                        </View>
-                     </View>
-                  </View>
-               </Pressable>
-
-               <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}>
-                  <View style={[Styles.rowItemsCenter]}>
-                     <View style={[Styles.iconContent, ColorsStatus.info]}>
-                        <MaterialCommunityIcons name="close-circle" size={25} color='#19345E' />
-                     </View>
-                     <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
-                        <View style={[Styles.ml10]}>
-                           <Text style={[Styles.textDefault]}>Keluarkan dari divisi</Text>
-                        </View>
-                     </View>
-                  </View>
-               </Pressable>
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialIcons name="verified-user" color={colors.text} size={25} />}
+                  title={dataMemberChoose.isAdmin ? 'Berhentikan admin' : 'Jadikan admin'}
+                  onPress={handleMemberAdmin}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
+                  title="Keluarkan"
+                  onPress={handleMemberOut}
+               />
             </View>
          </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               memberOut()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+         />
       </SafeAreaView>
    )
 }

app/(application)/division/[id]/report.tsx

@@ -1,4 +1,4 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import AppHeader from "@/components/AppHeader"
 import ReportChartDocument from "@/components/division/reportChartDocument"
 import ReportChartEvent from "@/components/division/reportChartEvent"
 import ReportChartProgress from "@/components/division/reportChartProgress"
@@ -6,6 +6,7 @@ import { InputDate } from "@/components/inputDate"
 import Styles from "@/constants/Styles"
 import { apiGetDivisionReport } from "@/lib/api"
 import { stringToDate } from "@/lib/fun_stringToDate"
+import { useTheme } from "@/providers/ThemeProvider"
 import { useAuthSession } from "@/providers/AuthProvider"
 import dayjs from "dayjs"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -14,6 +15,7 @@ import { SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 
 export default function ReportDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const { token, decryptToken } = useAuthSession();
    const [showReport, setShowReport] = useState(false);
@@ -92,8 +94,11 @@ export default function ReportDivision() {
          } else {
             Toast.show({ type: 'small', text1: response.message, });
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+
+         Toast.show({ type: 'small', text1: message })
       }
    }
 
@@ -104,15 +109,22 @@ export default function ReportDivision() {
    }, [showReport]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Laporan Divisi',
                headerTitleAlign: 'center',
+               header: () => (
+                  <AppHeader
+                     title="Laporan Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputDate
                   onChange={(val) => validationForm("date", val)}

app/(application)/division/create.tsx

@@ -1,22 +1,31 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import ModalConfirmation from "@/components/ModalConfirmation";
+import AppHeader from "@/components/AppHeader";
 import ButtonNextHeader from "@/components/buttonNextHeader";
 import { InputForm } from "@/components/inputForm";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
+import { apiCheckDivisionName } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateDivision() {
-   const [isSelect, setSelect] = useState(false);
-   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
-   const dispatch = useDispatch();
-   const update = useSelector((state: any) => state.divisionCreate);
+   const { colors } = useTheme();
+   const { token, decryptToken } = useAuthSession()
+   const [isSelect, setSelect] = useState(false)
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" })
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.divisionCreate)
    const entityUser = useSelector((state: any) => state.user)
    const userLogin = useSelector((state: any) => state.entities)
+   const [loadingBtn, setLoadingBtn] = useState(false)
+   const [showWarningModal, setShowWarningModal] = useState(false)
    const [error, setError] = useState({
       idGroup: false,
       name: false,
@@ -54,7 +63,31 @@ export default function CreateDivision() {
       }
    }
 
-   function handleSetData() {
+   async function handleCheckName() {
+      try {
+         setLoadingBtn(true)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCheckDivisionName({ data: { ...dataForm }, user: hasil })
+         if (response.success) {
+            if (!response.available) {
+               setShowWarningModal(true)
+            } else {
+               handleSetData()
+            }
+         } else {
+            Toast.show({ type: 'small', text1: response.message, })
+         }
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoadingBtn(false)
+      }
+   }
+
+   async function handleSetData() {
       dispatch(setFormCreateDivision({ ...update, data: dataForm }))
       router.push(`./create/add-member`)
    }
@@ -66,28 +99,41 @@ export default function CreateDivision() {
    }, []);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Tambah Divisi",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonNextHeader
-                     onPress={() => { handleSetData() }}
-                     disable={error.idGroup || error.name || chooseGroup.val == "" || chooseGroup.val == "null" || dataForm.name == "" || dataForm.name == "null"}
+               // headerRight: () => (
+               //    <ButtonNextHeader
+               //       onPress={() => { handleCheckName() }}
+               //       disable={loadingBtn || error.idGroup || error.name || chooseGroup.val == "" || chooseGroup.val == "null" || dataForm.name == "" || dataForm.name == "null"}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader title="Tambah Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<ButtonNextHeader
+                        onPress={() => { handleCheckName() }}
+                        disable={loadingBtn || error.idGroup || error.name || chooseGroup.val == "" || chooseGroup.val == "null" || dataForm.name == "" || dataForm.name == "null"}
+                     />}
                   />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <View style={[Styles.p15]}>
                {
                   (entityUser.role == "supadmin" || entityUser.role == "developer") &&
                   (
@@ -133,6 +179,15 @@ export default function CreateDivision() {
             open={isSelect}
             valChoose={chooseGroup.val}
          />
+
+         <ModalConfirmation
+            visible={showWarningModal}
+            title="Peringatan"
+            message="Nama divisi sudah ada. Tidak dapat membuat divisi dengan nama yang sama"
+            onConfirm={() => setShowWarningModal(false)}
+            onCancel={() => setShowWarningModal(false)}
+            confirmText="Oke"
+         />
       </SafeAreaView>
    );
 }

app/(application)/division/create/add-admin-division.tsx

@@ -1,16 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiCreateDivision } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
 import { setUpdateDivision } from "@/lib/divisionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
+import { StackActions, useNavigation } from "@react-navigation/native";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -21,7 +24,9 @@ type Props = {
 }
 
 export default function CreateDivisionAddAdmin() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
+   const navigation = useNavigation()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
    const [data, setData] = useState<Props[]>([])
@@ -29,6 +34,7 @@ export default function CreateDivisionAddAdmin() {
    const update = useSelector((state: any) => state.divisionCreate)
    const updateDivision = useSelector((state: any) => state.divisionUpdate)
    const dispatch = useDispatch()
+   const [loading, setLoading] = useState(false)
 
    async function handleLoadMember() {
       setData(update.member)
@@ -48,43 +54,61 @@ export default function CreateDivisionAddAdmin() {
 
    async function handleAddMember() {
       try {
-         dispatch(setFormCreateDivision({ ...update, admin: selectMember }))
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateDivision({ ...update, user: hasil })
+         const response = await apiCreateDivision({ ...update, admin: selectMember, user: hasil })
          if (response.success) {
             Toast.show({ type: 'small', text1: 'Berhasil membuat divisi', })
             dispatch(setFormCreateDivision({ admin: [], member: [], data: { idGroup: '', name: '', desc: '' } }))
             dispatch(setUpdateDivision(!updateDivision))
-            router.replace(`/division/`)
+            navigation.dispatch(StackActions.pop(3))
+            // router.replace(`/division/`)
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal membuat divisi', })
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Pilih Admin Divisi',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="create"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="create"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader title="Pilih Admin Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<ButtonSaveHeader
+                        category="create"
+                        disable={selectMember.length == 0 || loading ? true : false}
+                        onPress={() => {
+                           handleAddMember()
+                        }}
+                     />}
                   />
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <ScrollView>
                {
                   data.length > 0 ?
@@ -93,22 +117,22 @@ export default function CreateDivisionAddAdmin() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderBottomColor: colors.icon + '20' }]}
                               onPress={() => {
                                  !found && onChoose(item.idUser)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter, Styles.w70]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
@@ -119,6 +143,6 @@ export default function CreateDivisionAddAdmin() {
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/division/create/add-member.tsx

@@ -1,17 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonNextHeader from "@/components/buttonNextHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 
 type Props = {
@@ -21,6 +23,7 @@ type Props = {
 }
 
 export default function CreateDivisionAddMember() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [dataOld, setDataOld] = useState<Props[]>([])
@@ -59,34 +62,44 @@ export default function CreateDivisionAddMember() {
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Pilih Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonNextHeader
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => { handleAddMember() }}
+               // headerRight: () => (
+               //    <ButtonNextHeader
+               //       disable={selectMember.length > 0 ? false : true}
+               //       onPress={() => { handleAddMember() }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader title="Pilih Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={<ButtonNextHeader
+                        disable={selectMember.length > 0 ? false : true}
+                        onPress={() => { handleAddMember() }}
+                     />}
                   />
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -95,9 +108,11 @@ export default function CreateDivisionAddMember() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+            >
 
                {
                   data.length > 0 ?
@@ -106,22 +121,22 @@ export default function CreateDivisionAddMember() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderBottomColor: colors.icon + '20' }]}
                               onPress={() => {
                                  !found && onChoose(item.id, item.name, item.img)
                               }}
                            >
                               <View style={[Styles.rowItemsCenter, Styles.w70]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )
@@ -132,6 +147,6 @@ export default function CreateDivisionAddMember() {
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/division/index.tsx

@@ -1,23 +1,26 @@
 import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonTab from "@/components/buttonTab";
 import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
 import PaperGridContent from "@/components/paperGridContent";
 import Skeleton from "@/components/skeleton";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiGetDivision } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Feather,
    Ionicons,
-   MaterialCommunityIcons,
-   MaterialIcons,
+   MaterialCommunityIcons
 } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Pressable, RefreshControl, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -35,25 +38,39 @@ export default function ListDivision() {
       cat?: string;
    }>();
    const [isList, setList] = useState(false);
+
+   useEffect(() => {
+      AsyncStorage.getItem('division_view_mode').then((val) => {
+         if (val !== null) setList(val === 'list')
+      })
+   }, [])
+
+   function toggleView() {
+      const next = !isList
+      setList(next)
+      AsyncStorage.setItem('division_view_mode', next ? 'list' : 'grid')
+   }
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [search, setSearch] = useState("")
-   const [nameGroup, setNameGroup] = useState("")
-   const [data, setData] = useState<Props[]>([])
+   const queryClient = useQueryClient()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
+   const [category, setCategory] = useState<'divisi-saya' | 'semua'>(cat == 'semua' ? 'semua' : 'divisi-saya')
    const update = useSelector((state: any) => state.divisionUpdate)
-   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
-   const [loading, setLoading] = useState(false)
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya')
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
    const [refreshing, setRefreshing] = useState(false)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   // TanStack Query for Divisions with Infinite Scroll
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['divisions', { status, search, group, category }],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDivision({
             user: hasil,
@@ -61,63 +78,61 @@ export default function ListDivision() {
             search: search,
             group: String(group),
             kategori: category,
-            page: thisPage
+            page: pageParam
          });
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-         if (response.success) {
-            if (thisPage == 1) {
-               setData(response.data);
-            } else if (thisPage > 1 && response.data.length > 0) {
-               setData([...data, ...response.data]);
-            } else {
-               return;
-            }
-            setNameGroup(response.filter.name);
-         }
-      } catch (error) {
-         console.error(error);
-      } finally {
-         setLoading(false)
-         setWaiting(false)
-      }
-   }
-
+   // Refetch when manual update state changes
    useEffect(() => {
-      handleLoad(false, 1);
-   }, [update]);
+      refetch()
+   }, [update, refetch])
 
-   useEffect(() => {
-      handleLoad(true, 1);
-   }, [status, search, group, category]);
+   // Flatten pages into a single data array
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
 
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
+   // Get nameGroup from the first available page
+   const nameGroup = useMemo(() => {
+      return data?.pages[0]?.filter?.name || "";
+   }, [data])
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['divisions'] })
       setRefreshing(false)
    };
 
+   const loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
+
+   const arrSkeleton = [0, 1, 2]
+
    const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      name: data[index].name,
-      desc: data[index].desc,
-      jumlah_member: data[index].jumlah_member,
+      id: flatData[index]?.id,
+      name: flatData[index]?.name,
+      desc: flatData[index]?.desc,
+      jumlah_member: flatData[index]?.jumlah_member,
    })
 
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" ?
-                  <View style={[Styles.wrapBtnTab]}>
+                  <WrapTab>
                      <ButtonTab
                         active={status == "false" ? "false" : "true"}
                         value="true"
@@ -126,7 +141,7 @@ export default function ListDivision() {
                         icon={
                            <Feather
                               name="check-circle"
-                              color={status == "false" ? "black" : "white"}
+                              color={status == "false" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
@@ -140,15 +155,15 @@ export default function ListDivision() {
                         icon={
                            <AntDesign
                               name="closecircleo"
-                              color={status == "true" ? "black" : "white"}
+                              color={status == "true" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
                         n={2}
                      />
-                  </View>
+                  </WrapTab>
                   :
-                  <View style={[Styles.wrapBtnTab]}>
+                  <WrapTab>
                      <ButtonTab
                         active={category == "semua" ? "false" : "true"}
                         value="true"
@@ -157,7 +172,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-outline"
-                              color={category == "semua" ? "black" : "white"}
+                              color={category == "semua" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
@@ -171,38 +186,35 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-stacked-outline"
-                              color={category == "semua" ? "white" : "black"}
+                              color={category == "semua" ? "white" : colors.dimmed}
                               size={20}
                            />
                         }
                         n={2}
                      />
-                  </View>
+                  </WrapTab>
             }
 
-            <View style={[Styles.rowSpaceBetween]}>
+            <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                <InputSearch width={68} onChange={setSearch} />
-               <Pressable
-                  onPress={() => {
-                     setList(!isList);
-                  }}
-               >
+               <Pressable onPress={toggleView}>
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
             </View>
             {(entityUser.role == "supadmin" || entityUser.role == "developer") && (
-               <View style={[Styles.mv05]}>
-                  <Text>Filter : {nameGroup}</Text>
+               <View style={[Styles.mt10, Styles.rowOnly]}>
+                  <Text>Filter :</Text>
+                  <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mh05]} />
                </View>
             )}
          </View>
-         <View style={[{ flex: 2 }]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   isList ?
                      arrSkeleton.map((item, index) => (
                         <SkeletonTwoItem key={index} />
@@ -212,17 +224,17 @@ export default function ListDivision() {
                         <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
                      ))
                   :
-                  data.length == 0 ? (
+                  flatData.length == 0 ? (
                      <View style={[Styles.mt15]}>
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
                      </View>
                   ) : (
                      isList ? (
                         <View style={[Styles.h100]}>
                            <VirtualizedList
-                              data={data}
+                              data={flatData}
                               style={[{ paddingBottom: 100 }]}
-                              getItemCount={() => data.length}
+                              getItemCount={() => flatData.length}
                               getItem={getItem}
                               renderItem={({ item, index }: { item: Props, index: number }) => {
                                  return (
@@ -230,13 +242,13 @@ export default function ListDivision() {
                                        key={index}
                                        onPress={() => { router.push(`/division/${item.id}`) }}
                                        borderType="bottom"
+                                       bgColor="transparent"
                                        icon={
-                                          <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                             <MaterialIcons name="group" size={25} color={"#384288"} />
+                                          <View style={[Styles.iconContent]}>
+                                             <Feather name="users" size={25} color={'black'} />
                                           </View>
                                        }
                                        title={item.name}
-                                       titleWeight="normal"
                                     />
                                  )
                               }}
@@ -248,6 +260,7 @@ export default function ListDivision() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -255,9 +268,9 @@ export default function ListDivision() {
                      ) : (
                         <View style={[Styles.h100]}>
                            <VirtualizedList
-                              data={data}
+                              data={flatData}
                               style={[{ paddingBottom: 100 }]}
-                              getItemCount={() => data.length}
+                              getItemCount={() => flatData.length}
                               getItem={getItem}
                               renderItem={({ item, index }: { item: Props, index: number }) => {
                                  return (
@@ -283,6 +296,7 @@ export default function ListDivision() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />

app/(application)/division/report.tsx

@@ -1,4 +1,4 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ReportChartDocument from "@/components/division/reportChartDocument";
 import ReportChartEvent from "@/components/division/reportChartEvent";
 import ReportChartProgress from "@/components/division/reportChartProgress";
@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionReport } from "@/lib/api";
 import { stringToDate } from "@/lib/fun_stringToDate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import dayjs from "dayjs";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
@@ -16,6 +17,7 @@ import { SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 
 export default function Report() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
    const [showReport, setShowReport] = useState(false);
@@ -110,8 +112,11 @@ export default function Report() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+
+         Toast.show({ type: 'small', text1: message })
       }
    }
 
@@ -122,24 +127,33 @@ export default function Report() {
    }, [showReport]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Laporan Divisi",
                headerTitleAlign: "center",
+               header: () => (
+                  <AppHeader title="Laporan Divisi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <View style={[Styles.p15, Styles.mb50]}>
                <SelectForm
-                  bg="white"
+                  bg={colors.card}
                   label="Lembaga Desa"
                   placeholder="Pilih Lembaga Desa"
                   value={chooseGroup.label}

app/(application)/edit-profile.tsx

@@ -1,18 +1,25 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiEditProfile, apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
+import { validateName } from "@/lib/fun_validateName";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useHeaderHeight } from "@react-navigation/elements";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import {
    Image,
+   KeyboardAvoidingView,
+   Platform,
    Pressable,
    SafeAreaView,
    ScrollView,
@@ -35,10 +42,13 @@ type Props = {
 };
 
 export default function EditProfile() {
+   const headerHeight = useHeaderHeight()
    const dispatch = useDispatch()
+   const { colors } = useTheme();
    const entities = useSelector((state: any) => state.entities)
    const { token, decryptToken } = useAuthSession()
    const [errorImg, setErrorImg] = useState(false)
+   // ... keeping state same ...
    const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
    const [choosePosition, setChoosePosition] = useState({ val: entities.idPosition, label: entities.position });
    const [chooseGender, setChooseGender] = useState({ val: entities.gender, label: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' });
@@ -46,7 +56,8 @@ export default function EditProfile() {
    const [isSelect, setSelect] = useState(false);
    const [disableBtn, setDisableBtn] = useState(false)
    const [valChoose, setValChoose] = useState("")
-   const [imgForm, setImgForm] = useState<any>();
+   const [imgForm, setImgForm] = useState<any>()
+   const [loading, setLoading] = useState(false)
    const [data, setData] = useState<Props>({
       id: entities.id,
       name: entities.name,
@@ -102,7 +113,7 @@ export default function EditProfile() {
          }
       } else if (cat == "name") {
          setData({ ...data, name: val });
-         if (val == "") {
+         if (!validateName(val)) {
             setError({ ...error, name: true });
          } else {
             setError({ ...error, name: false });
@@ -119,7 +130,7 @@ export default function EditProfile() {
          }
       } else if (cat == "phone") {
          setData({ ...data, phone: val });
-         if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+         if (val == "" || !(val.length >= 9 && val.length <= 16)) {
             setError({ ...error, phone: true });
          } else {
             setError({ ...error, phone: false });
@@ -150,14 +161,15 @@ export default function EditProfile() {
 
    async function handleEdit() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const fd = new FormData()
 
          if (imgForm != undefined) {
             fd.append("file", {
                uri: imgForm.uri,
-               type: imgForm.mimeType,
-               name: imgForm.fileName,
+               type: imgForm.mimeType || "image/jpeg",
+               name: imgForm.fileName || "image.jpg",
             } as any);
          } else {
             fd.append("file", "undefined",);
@@ -176,9 +188,16 @@ export default function EditProfile() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal mengupdate data', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengupdate data"
+
+         Toast.show({
+            type: 'small',
+            text1: message
+         })
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -187,9 +206,9 @@ export default function EditProfile() {
    const pickImageAsync = async () => {
       let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ["images"],
-         allowsEditing: false,
-         quality: 1,
-         aspect: [1, 1],
+         allowsEditing: true,
+         quality: 0.9,
+         aspect: [1, 1]
       });
 
       if (!result.canceled) {
@@ -197,141 +216,166 @@ export default function EditProfile() {
          setSelectedImage(result.assets[0].uri);
          setImgForm(result.assets[0]);
       } else {
-         alert("Tidak ada gambar yang dipilih");
          setErrorImg(false)
       }
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Edit Profile",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="update"
-                     onPress={() => {
-                        handleEdit()
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Edit Profile"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || loading ? true : false}
+                           category="update"
+                           onPress={() => {
+                              handleEdit()
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disableBtn || loading ? true : false}
+               //       category="update"
+               //       onPress={() => {
+               //          handleEdit()
+               //       }}
+               //    />
+               // ),
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
-               <View style={{ justifyContent: "center", alignItems: "center" }}>
-                  {
-                     selectedImage != undefined ? (
-                        <Pressable onPress={pickImageAsync}>
-                           <Image
-                              src={
-                                 typeof selectedImage === "string"
-                                    ? selectedImage
-                                    : selectedImage.uri
-                              }
-                              style={[Styles.userProfileBig]}
-                              onError={() => { setErrorImg(true) }}
-                           />
-                        </Pressable>
-                     ) : (
-                        <Pressable onPress={pickImageAsync}>
-                           {
+         <KeyboardAvoidingView
+            style={[Styles.h100]}
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            keyboardVerticalOffset={headerHeight}
+         >
+            <ScrollView showsVerticalScrollIndicator={false}>
+               <View style={[Styles.p15]}>
+                  <View style={[Styles.contentItemCenter]}>
+                     {
+                        selectedImage != undefined ? (
+                           <Pressable onPress={pickImageAsync}>
                               <Image
-                                 source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
+                                 src={
+                                    typeof selectedImage === "string"
+                                       ? selectedImage
+                                       : selectedImage.uri
+                                 }
                                  style={[Styles.userProfileBig]}
                                  onError={() => { setErrorImg(true) }}
                               />
-                           }
-                        </Pressable>
-                     )
-                  }
+                              <View style={[Styles.absoluteIconPicker]}>
+                                 <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                              </View>
+                           </Pressable>
+                        ) : (
+                           <Pressable onPress={pickImageAsync}>
+                              <Image
+                                 source={errorImg ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${data?.img}` }}
+                                 style={[Styles.userProfileBig]}
+                                 onError={() => { setErrorImg(true) }}
+                              />
+                              <View style={[Styles.absoluteIconPicker]}>
+                                 <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                              </View>
+                           </Pressable>
+                        )
+                     }
+                  </View>
+                  <SelectForm
+                     label="Jabatan"
+                     placeholder="Pilih Jabatan"
+                     value={choosePosition.label}
+                     required
+                     onPress={() => {
+                        setValChoose(choosePosition.val);
+                        setValSelect("position");
+                        setSelect(true);
+                     }}
+                     error={error.position}
+                     errorText="Jabatan tidak boleh kosong"
+                  />
+                  <InputForm
+                     label="NIK"
+                     type="numeric"
+                     placeholder="NIK"
+                     required
+                     value={data?.nik}
+                     error={error.nik}
+                     errorText="NIK Harus 16 Karakter"
+                     onChange={val => {
+                        validationForm("nik", val)
+                     }}
+                  />
+                  <InputForm
+                     label="Nama"
+                     type="default"
+                     placeholder="Nama"
+                     required
+                     value={data?.name}
+                     error={error.name}
+                     errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
+                     onChange={val => {
+                        validationForm("name", val)
+                     }}
+                  />
+                  <InputForm
+                     label="Email"
+                     type="default"
+                     placeholder="Email"
+                     required
+                     value={data?.email}
+                     error={error.email}
+                     errorText="Email tidak valid"
+                     onChange={val => {
+                        validationForm("email", val)
+                     }}
+                  />
+                  <InputForm
+                     label="Nomor Telepon"
+                     type="numeric"
+                     placeholder="8XX-XXX-XXX"
+                     required
+                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+62</Text>}
+                     value={data?.phone}
+                     error={error.phone}
+                     errorText="Nomor Telepon tidak valid"
+                     onChange={val => {
+                        validationForm("phone", val)
+                     }}
+                  />
+                  <SelectForm
+                     label="Jenis Kelamin"
+                     placeholder="Pilih Jenis Kelamin"
+                     value={chooseGender.label}
+                     required
+                     onPress={() => {
+                        setValChoose(chooseGender.val);
+                        setValSelect("gender");
+                        setSelect(true);
+                     }}
+                     error={error.gender}
+                     errorText="Jenis Kelamin tidak boleh kosong"
+                  />
                </View>
-               <SelectForm
-                  label="Jabatan"
-                  placeholder="Pilih Jabatan"
-                  value={choosePosition.label}
-                  required
-                  onPress={() => {
-                     setValChoose(choosePosition.val);
-                     setValSelect("position");
-                     setSelect(true);
-                  }}
-                  error={error.position}
-                  errorText="Jabatan tidak boleh kosong"
-               />
-               <InputForm
-                  label="NIK"
-                  type="numeric"
-                  placeholder="NIK"
-                  required
-                  value={data?.nik}
-                  error={error.nik}
-                  errorText="NIK Harus 16 Karakter"
-                  onChange={val => {
-                     validationForm("nik", val)
-                  }}
-               />
-               <InputForm
-                  label="Nama"
-                  type="default"
-                  placeholder="Nama"
-                  required
-                  value={data?.name}
-                  error={error.name}
-                  errorText="Nama tidak boleh kosong"
-                  onChange={val => {
-                     validationForm("name", val)
-                  }}
-               />
-               <InputForm
-                  label="Email"
-                  type="default"
-                  placeholder="Email"
-                  required
-                  value={data?.email}
-                  error={error.email}
-                  errorText="Email tidak valid"
-                  onChange={val => {
-                     validationForm("email", val)
-                  }}
-               />
-               <InputForm
-                  label="Nomor Telepon"
-                  type="numeric"
-                  placeholder="8XX-XXX-XXX"
-                  required
-                  itemLeft={<Text>+62</Text>}
-                  value={data?.phone}
-                  error={error.phone}
-                  errorText="Nomor Telepon tidak valid"
-                  onChange={val => {
-                     validationForm("phone", val)
-                  }}
-               />
-               <SelectForm
-                  label="Jenis Kelamin"
-                  placeholder="Pilih Jenis Kelamin"
-                  value={chooseGender.label}
-                  required
-                  onPress={() => {
-                     setValChoose(chooseGender.val);
-                     setValSelect("gender");
-                     setSelect(true);
-                  }}
-                  error={error.gender}
-                  errorText="Jenis Kelamin tidak boleh kosong"
-               />
-            </View>
-         </ScrollView>
+            </ScrollView>
+         </KeyboardAvoidingView>
 
          <ModalSelect
             category={valSelect}

app/(application)/feature.tsx

@@ -1,51 +1,47 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import { ButtonFiturMenu } from "@/components/buttonFiturMenu";
 import Styles from "@/constants/Styles";
-import { AntDesign, Entypo, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Entypo, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { SafeAreaView, View } from "react-native";
 import { useSelector } from "react-redux";
 
 export default function Feature() {
    const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme();
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Fitur',
-               headerTitleAlign: 'center'
+               headerTitleAlign: 'center',
+               header: () => (
+                  <AppHeader title="Fitur" showBack={true} onPressLeft={() => router.back()} />
+               )
             }}
          />
          <View style={[Styles.p15]}>
-            <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
-               <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
-               <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
-               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
-            </View>
-            <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} />
-               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} />
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 20 }}>
+               <ButtonFiturMenu icon={<Feather name="users" size={30} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
+               <ButtonFiturMenu icon={<Feather name="bar-chart" size={30} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
+               <ButtonFiturMenu icon={<Ionicons name="megaphone-outline" size={30} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
+               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-outline" size={30} color={colors.icon} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
+               <ButtonFiturMenu icon={<Feather name="calendar" size={30} color={colors.icon} />} text="Kalender" onPress={() => { router.push('/village-calendar') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-group-outline" size={30} color={colors.icon} />} text="Anggota" onPress={() => { router.push('/member') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie-outline" size={30} color={colors.icon} />} text="Jabatan" onPress={() => { router.push('/position') }} />
                {
-                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
+                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
                }
                {
                   (entityUser.role == "supadmin" || entityUser.role == "developer") &&
                   <>
-                     <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
-                     {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} /> */}
-                     <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
+                     <ButtonFiturMenu icon={<Ionicons name="bookmarks-outline" size={30} color={colors.icon} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
+                     <ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
                   </>
                }
             </View>
-            {/* {
-               (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-               <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-                  <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
-               </View>
-            } */}
          </View>
       </SafeAreaView>
    )

app/(application)/group/index.tsx

@@ -1,4 +1,5 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import GuideOverlay from "@/components/GuideOverlay";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -8,14 +9,18 @@ import InputSearch from "@/components/inputSearch";
 import MenuItemRow from "@/components/menuItemRow";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
 import { setUpdateGroup } from "@/lib/groupSlice";
+import { GUIDE_GROUP } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
-import { useEffect, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { RefreshControl, View, VirtualizedList } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -27,39 +32,63 @@ type Props = {
 
 export default function Index() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
-   const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [loading, setLoading] = useState(true)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [status, setStatus] = useState<'true' | 'false'>('true')
-
+   const [loadingSubmit, setLoadingSubmit] = useState(false)
    const [idChoose, setIdChoose] = useState('')
    const [activeChoose, setActiveChoose] = useState(true)
    const [titleChoose, setTitleChoose] = useState('')
+   const queryClient = useQueryClient()
    const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('group')
 
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.groupUpdate)
+   const [error, setError] = useState({
+      title: false,
+   });
 
-   const [data11, setData1] = useState(Array.from({ length: 20 }, (_, i) => `Item ${i}`));
+   // TanStack Query for Groups
+   const {
+      data: queryData,
+      isLoading,
+      refetch
+   } = useQuery({
+      queryKey: ['groups', { status, search }],
+      queryFn: async () => {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetGroup({ 
+            user: hasil, 
+            active: status, 
+            search: search 
+         })
+         return response;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-   const renderItem = ({ item }: { item: string }) => (
-      <View style={{ padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }}>
-         <Text>{item}</Text>
-      </View>
-   );
+   const data = useMemo(() => queryData?.data || [], [queryData])
 
+   useEffect(() => {
+      refetch()
+   }, [update, refetch])
 
    async function handleEdit() {
       try {
+         setLoadingSubmit(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiEditGroup({ user: hasil, name: titleChoose }, idChoose)
+         await queryClient.invalidateQueries({ queryKey: ['groups'] })
          dispatch(setUpdateGroup(!update))
       } catch (error) {
          console.error(error)
       } finally {
+         setLoadingSubmit(false)
          setVisibleEdit(false)
          setModal(false)
          Toast.show({ type: 'small', text1: 'Berhasil mengupdate data', })
@@ -71,6 +100,7 @@ export default function Index() {
       try {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiDeleteGroup({ user: hasil, isActive: activeChoose }, idChoose)
+         await queryClient.invalidateQueries({ queryKey: ['groups'] })
          dispatch(setUpdateGroup(!update))
       } catch (error) {
          console.error(error)
@@ -80,119 +110,119 @@ export default function Index() {
       }
    }
 
-   async function handleLoad(loading: boolean) {
-      try {
-         setLoading(loading)
-         const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetGroup({ user: hasil, active: status, search: search })
-         setData(response.data)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-
-      }
-   }
-
-   useEffect(() => {
-      handleLoad(false)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true)
-   }, [status, search])
-
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['groups'] })
       setRefreshing(false)
    };
 
+   function validationForm(val: any, cat: 'title') {
+      if (cat === 'title') {
+         setTitleChoose(val)
+         if (val == "" || val.length < 3) {
+            setError((prev) => ({ ...prev, title: true }))
+         } else {
+            setError((prev) => ({ ...prev, title: false }))
+         }
+      }
+   }
+
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      name: data[index].name,
+      isActive: data[index].isActive,
+   });
+
+
+
+   const arrSkeleton = [0, 1, 2, 3, 4]
 
    return (
-      <SafeAreaView>
-         <View style={[Styles.p15]}>
-            <View style={[Styles.wrapBtnTab]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_GROUP} onDismiss={dismissGuide} />
+         <View style={[Styles.mb10]}>
+            <WrapTab>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
-            </View>
+            </WrapTab>
             <InputSearch onChange={setSearch} />
-            <ScrollView
-               refreshControl={
-                  <RefreshControl
-                     refreshing={refreshing}
-                     onRefresh={handleRefresh}
-                  />
-               }
-               style={[Styles.h100]}
-            >
-               <View>
-                  {
-
-                     loading ?
-                        arrSkeleton.map((item, index) => {
+         </View>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
+            {
+               isLoading ?
+                  arrSkeleton.map((item, index) => {
+                     return (
+                        <SkeletonTwoItem key={index} />
+                     )
+                  })
+                  :
+                  data.length > 0 ?
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
-                              <SkeletonTwoItem key={index} />
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => {
+                                    setIdChoose(item.id)
+                                    setActiveChoose(item.isActive)
+                                    setTitleChoose(item.name)
+                                    setModal(true)
+                                 }}
+                                 borderType="all"
+                                 icon={
+                                    <View style={[Styles.iconContent]}>
+                                       <Ionicons name="bookmark-outline" size={25} color={'black'} />
+                                    </View>
+                                 }
+                                 title={item.name}
+                              />
                            )
-                        })
-                        :
-                        data.length > 0 ?
-                           data.map((item, index) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={index}
-                                    onPress={() => {
-                                       setIdChoose(item.id)
-                                       setActiveChoose(item.isActive)
-                                       setTitleChoose(item.name)
-                                       setModal(true)
-                                    }}
-                                    borderType="all"
-                                    icon={
-                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                          <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
-                                       </View>
-                                    }
-                                    title={item.name}
-                                 />
-                              )
-                           })
-                           :
-                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-                  }
-               </View>
-            </ScrollView>
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                              tintColor={colors.icon}
+                           />
+                        }
+                     />
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+            }
          </View>
 
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={titleChoose}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
                   title={activeChoose ? "Non Aktifkan" : "Aktifkan"}
                   onPress={() => {
                      setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: activeChoose ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?',
-                        onPress: () => { handleDelete() }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setModal(false)
@@ -207,15 +237,36 @@ export default function Index() {
          <DrawerBottom animation="none" keyboard height={30} isVisible={isVisibleEdit} setVisible={() => setVisibleEdit(false)} title="Edit Lembaga Desa">
             <View style={{ flex: 1 }}>
                <View>
-                  <InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa" value={titleChoose} onChange={setTitleChoose} />
+                  <InputForm
+                     type="default"
+                     placeholder="Nama Lembaga Desa"
+                     required
+                     label="Lembaga Desa"
+                     value={titleChoose}
+                     error={error.title}
+                     bg={"transparent"}
+                     errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
+                     onChange={(val) => { validationForm(val, 'title') }} />
                </View>
                <View>
-                  <ButtonForm text="SIMPAN" onPress={() => { handleEdit() }} />
+                  <ButtonForm text="SIMPAN" disabled={Object.values(error).some((v) => v == true) || titleChoose == "" || loadingSubmit} onPress={() => { handleEdit() }} />
                </View>
             </View>
          </DrawerBottom>
 
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message={activeChoose ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?'}
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText={activeChoose ? "Nonaktifkan" : "Aktifkan"}
+            cancelText="Batal"
+         />
+      </View >
 
-      </SafeAreaView>
    )
 }

app/(application)/home.tsx

@@ -1,10 +1,9 @@
-import CaraouselHome from "@/components/home/carouselHome";
+import CaraouselHome2 from "@/components/home/carouselHome2";
 import ChartDokumenHome from "@/components/home/chartDokumenHome";
 import ChartProgresHome from "@/components/home/chartProgresHome";
 import DisccussionHome from "@/components/home/discussionHome";
 import DivisionHome from "@/components/home/divisionHome";
 import EventHome from "@/components/home/eventHome";
-import FiturHome from "@/components/home/fiturHome";
 import { HeaderRightHome } from "@/components/home/headerRightHome";
 import ProjectHome from "@/components/home/projectHome";
 import Text from "@/components/Text";
@@ -12,9 +11,12 @@ import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { LinearGradient } from "expo-linear-gradient";
 import { Stack } from "expo-router";
-import { useEffect } from "react";
-import { Platform, SafeAreaView, ScrollView, View } from "react-native";
+import { useEffect, useState } from "react";
+import { Alert, Dimensions, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -22,42 +24,118 @@ import { useDispatch, useSelector } from "react-redux";
 export default function Home() {
    const entities = useSelector((state: any) => state.entities)
    const dispatch = useDispatch()
-   const { token, decryptToken } = useAuthSession()
-   const insets = useSafeAreaInsets();
+   const queryClient = useQueryClient()
+   const { token, decryptToken, signOut } = useAuthSession()
+   const { colors } = useTheme();
+   const insets = useSafeAreaInsets()
+   const [refreshing, setRefreshing] = useState(false)
+
+   const { data: profile, isError } = useQuery({
+      queryKey: ['profile'],
+      queryFn: async () => {
+         const hasil = await decryptToken(String(token?.current))
+         const data = await apiGetProfile({ id: hasil })
+         return data.data
+      },
+      enabled: !!token?.current,
+      staleTime: 0, // Ensure it refetches every time the component mounts
+   })
+
+   // Sync to Redux for global usage
+   useEffect(() => {
+      if (profile) {
+         dispatch(setEntities(profile))
+      }
+   }, [profile, dispatch])
+
+   // Auto Sign Out if profile fetch fails (e.g. invalid/expired token)
+   useEffect(() => {
+      if (isError) {
+         signOut()
+      }
+   }, [isError, signOut])
 
    useEffect(() => {
-      handleUserLogin()
-   }, [dispatch]);
+      if (profile && profile.isActive === false) {
+         Alert.alert(
+            'Akun Dinonaktifkan',
+            'Akun kamu telah dinonaktifkan. Silahkan hubungi admin untuk informasi lebih lanjut.',
+            [{ text: 'OK', onPress: signOut }]
+         )
+      }
+   }, [profile, signOut])
 
-   async function handleUserLogin() {
-      const hasil = await decryptToken(String(token?.current))
-      apiGetProfile({ id: hasil }).then((data) => dispatch(setEntities(data.data)));
-   }
+   useEffect(() => {
+      if (profile && profile.villageIsActive === false) {
+         Alert.alert(
+            'Desa Dinonaktifkan',
+            'Desa kamu saat ini telah dinonaktifkan. Silahkan hubungi pengelola sistem untuk informasi lebih lanjut.',
+            [{ text: 'OK', onPress: signOut }]
+         )
+      }
+   }, [profile, signOut])
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      // Invalidate all queries related to the home screen
+      await queryClient.invalidateQueries({ queryKey: ['profile'] })
+      await queryClient.invalidateQueries({ queryKey: ['banners'] })
+      await queryClient.invalidateQueries({ queryKey: ['homeData'] })
+
+      // Artificial delay to show refresh indicator if sync is too fast
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setRefreshing(false)
+   };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                title: 'Home',
                headerTitle: entities.village,
                header: () => (
-                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: '#19345E', paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
+                  <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.header, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
                      <Text style={Styles.textHeaderHome}>{entities.village}</Text>
                      <HeaderRightHome />
                   </View>
                ),
             }}
          />
-         <ScrollView>
-            <CaraouselHome />
-            <View style={[Styles.ph15, Styles.mb100]}>
-               <FiturHome />
-               <ProjectHome />
-               <DivisionHome />
-               <ChartProgresHome />
-               <ChartDokumenHome />
-               <EventHome />
-               <DisccussionHome />
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            showsVerticalScrollIndicator={false}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <LinearGradient
+               colors={[colors.header, colors.header, colors.header, colors.header, colors.homeGradient]}
+               style={[
+                  Styles.posAbsolute,
+                  Styles.zIndexMinus1,
+                  {
+                     width: Dimensions.get('window').width * 1.5,
+                     height: Dimensions.get('window').width * 1.5,
+                     borderRadius: Dimensions.get('window').width * 0.5,
+                     top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
+                     left: -Dimensions.get('window').width * 0.25,
+                  }
+               ]}
+            />
+            {/* <CaraouselHome refreshing={refreshing} /> */}
+            <View style={[Styles.ph15]}>
+               <CaraouselHome2 refreshing={refreshing} />
+               {/* <FiturHome /> */}
+               <ProjectHome refreshing={refreshing} />
+               <DivisionHome refreshing={refreshing} />
+               <ChartProgresHome refreshing={refreshing} />
+               <ChartDokumenHome refreshing={refreshing} />
+               <EventHome refreshing={refreshing} />
+               <DisccussionHome refreshing={refreshing} />
             </View>
          </ScrollView>
       </SafeAreaView>

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

@@ -1,15 +1,22 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ImageUser from "@/components/imageNew";
-import ItemDetailMember from "@/components/itemDetailMember";
+import LabelStatus from "@/components/labelStatus";
 import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
 import Skeleton from "@/components/skeleton";
 import Text from "@/components/Text";
+import { assetUserImage } from "@/constants/AssetsError";
+import { ConstEnv } from "@/constants/ConstEnv";
 import { valueRoleUser } from "@/constants/RoleUser";
 import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
+import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { LinearGradient } from "expo-linear-gradient";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import ImageViewing from 'react-native-image-viewing';
+import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
 type Props = {
@@ -23,27 +30,37 @@ type Props = {
    group: string,
    img: string,
    isActive: boolean,
+   isApprover: boolean,
    role: string
 }
 
 export default function MemberDetail() {
    const { id } = useLocalSearchParams<{ id: string }>();
+   const { colors } = useTheme();
    const [data, setData] = useState<Props>()
-   const [error, setError] = useState(false)
+   const [errorImg, setErrorImg] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
    const [isEdit, setEdit] = useState(true)
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
    const [refreshing, setRefreshing] = useState(false)
+   const [preview, setPreview] = useState(false)
 
    async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
          const response = await apiGetProfile({ id: id })
-         setData(response.data)
-         setEdit(valueRoleUser.filter((v) => v.login == entityUser.role)[0]?.data.some((i: any) => i.id == response.data.idUserRole))
-      } catch (error) {
-         console.error(error)
+         if (response.success) {
+            setData(response.data)
+            setEdit(valueRoleUser.filter((v) => v.login == entityUser.role)[0]?.data.some((i: any) => i.id == response.data.idUserRole))
+         } else {
+            Toast.show({ type: 'small', text1: response.message })
+         }
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -63,66 +80,111 @@ export default function MemberDetail() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} /> : <></>,
-               headerShadowVisible: false
+               header: () => (
+                  <AppHeader title="Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        (entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} isApprover={data?.isApprover ?? false} /> : <></>
+                     }
+                  />
+               )
             }}
          />
          <ScrollView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >
-            <View style={[Styles.wrapHeadViewMember,]}>
-               {
-                  loading ?
-                     <>
-                        <Skeleton width={100} height={100} borderRadius={100} />
-                        <Skeleton width={200} height={10} borderRadius={5} />
-                        <Skeleton width={150} height={10} borderRadius={5} />
-                     </>
-                     :
-                     <>
-                        <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${data?.img}`} size="lg" />
-                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{data?.name}</Text>
-                        <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
-                     </>
+            <LinearGradient
+               colors={[colors.header, colors.homeGradient]}
+               style={[Styles.wrapHeadViewMember]}
+            >
+               {loading ? (
+                  <>
+                     <Skeleton width={100} height={100} borderRadius={100} />
+                     <Skeleton width={200} height={10} borderRadius={5} />
+                     <Skeleton width={150} height={10} borderRadius={5} />
+                  </>
+               ) : (
+                  <>
+                     <Pressable onPress={() => setPreview(true)}>
+                        <View style={[Styles.memberAvatarRing]}>
+                           <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" onError={setErrorImg} />
+                        </View>
+                     </Pressable>
+                     <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{data?.name}</Text>
+                     <Text style={[Styles.textMediumNormal, Styles.cWhiteDimmed]}>{data?.role}</Text>
+                     <View style={[Styles.memberBadgeRow]}>
+                        {data?.isApprover && (
+                           <View style={[Styles.memberBadgeApprover]}>
+                              <Text style={[Styles.textSmallSemiBold, Styles.cWhite]}>APPROVER</Text>
+                           </View>
+                        )}
+                        <View style={[Styles.memberBadgePill, { backgroundColor: data?.isActive ? colors.success : colors.error }]}>
+                           <Text style={[Styles.textSmallSemiBold, Styles.cWhite]}>{data?.isActive ? 'AKTIF' : 'TIDAK AKTIF'}</Text>
+                        </View>
+                     </View>
+                  </>
+               )}
+            </LinearGradient>
 
-               }
-            </View>
             <View style={[Styles.p15]}>
-               <View style={[Styles.rowSpaceBetween]}>
-                  <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
+               <Text style={[Styles.textDefaultSemiBold, Styles.mb08, { color: colors.dimmed }]}>Informasi</Text>
+               <View>
+                  {loading ? (
+                     arrSkeleton.map((_, index) => (
+                        <View key={index} style={[Styles.pv14, { borderBottomWidth: index < arrSkeleton.length - 1 ? 1 : 0, borderBottomColor: `${colors.dimmed}30` }]}>
+                           <Skeleton width={80} height={8} borderRadius={4} />
+                           <View style={[Styles.mt05]}>
+                              <Skeleton width={60} widthType="percent" height={10} borderRadius={4} />
+                           </View>
+                        </View>
+                     ))
+                  ) : (
+                     [
+                        { icon: <MaterialCommunityIcons name="card-account-details" size={20} color={colors.icon} />, label: 'NIK', value: data?.nik },
+                        { icon: <MaterialCommunityIcons name="office-building-outline" size={20} color={colors.icon} />, label: 'Lembaga Desa', value: data?.group },
+                        { icon: <MaterialCommunityIcons name="account-tie" size={20} color={colors.icon} />, label: 'Jabatan', value: data?.position },
+                        { icon: <MaterialIcons name="phone" size={20} color={colors.icon} />, label: 'No Telepon', value: `+62${data?.phone}` },
+                        { icon: <MaterialIcons name="email" size={20} color={colors.icon} />, label: 'Email', value: data?.email },
+                        { icon: <MaterialCommunityIcons name="gender-male-female" size={20} color={colors.icon} />, label: 'Jenis Kelamin', value: data?.gender == "F" ? "Perempuan" : "Laki-Laki" },
+                     ].map((item, index, arr) => (
+                        <View
+                           key={index}
+                           style={[Styles.memberInfoRow, { borderBottomWidth: index < arr.length - 1 ? 1 : 0, borderBottomColor: `${colors.dimmed}30` }]}
+                        >
+                           <View style={[Styles.memberInfoIcon]}>
+                              {item.icon}
+                           </View>
+                           <View style={[Styles.memberInfoContent]}>
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{item.label}</Text>
+                              <Text style={[Styles.textDefault, Styles.mt02, { color: colors.text }]} numberOfLines={1}>{item.value ?? '-'}</Text>
+                           </View>
+                        </View>
+                     ))
+                  )}
                </View>
-               {
-                  loading ?
-                     arrSkeleton.map((item, index) => {
-                        return (
-                           <Skeleton key={index} width={100} widthType="percent" height={25} borderRadius={5} />
-                        )
-                     })
-                     :
-                     <>
-                        <ItemDetailMember category="nik" value={data?.nik} />
-                        <ItemDetailMember category="group" value={data?.group} />
-                        <ItemDetailMember category="position" value={data?.position} />
-                        <ItemDetailMember category="phone" value={`+62${data?.phone}`} />
-                        <ItemDetailMember category="email" value={data?.email} />
-                        <ItemDetailMember category="gender" value={data?.gender == "F" ? "Perempuan" : "Laki-Laki"} />
-                     </>
-               }
-
             </View>
          </ScrollView>
+
+         <ImageViewing
+            images={[{ uri: errorImg ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${data?.img}` }]}
+            imageIndex={0}
+            visible={preview}
+            onRequestClose={() => setPreview(false)}
+            doubleTapToZoomEnabled
+         />
       </SafeAreaView>
    )
 }

app/(application)/member/create.tsx

@@ -1,15 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Text from "@/components/Text";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiCreateUser } from "@/lib/api";
+import { validateName } from "@/lib/fun_validateName";
 import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useHeaderHeight } from '@react-navigation/elements';
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
@@ -26,9 +30,11 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateMember() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group");
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
    const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
@@ -41,6 +47,7 @@ export default function CreateMember() {
    const [disableBtn, setDisableBtn] = useState(true)
    const [valChoose, setValChoose] = useState("")
    const [imgForm, setImgForm] = useState<any>()
+   const [loading, setLoading] = useState(false)
    const [error, setError] = useState({
       group: false,
       position: false,
@@ -97,7 +104,7 @@ export default function CreateMember() {
          }
       } else if (cat == "name") {
          setDataForm({ ...dataForm, name: val });
-         if (val == "") {
+         if (!validateName(val)) {
             setError({ ...error, name: true });
          } else {
             setError({ ...error, name: false });
@@ -114,7 +121,7 @@ export default function CreateMember() {
          }
       } else if (cat == "phone") {
          setDataForm({ ...dataForm, phone: val });
-         if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+         if (val == "" || !(val.length >= 9 && val.length <= 16)) {
             setError({ ...error, phone: true });
          } else {
             setError({ ...error, phone: false });
@@ -144,7 +151,7 @@ export default function CreateMember() {
    }, [error, dataForm])
 
    useEffect(() => {
-      if(entityUser.role !="supadmin" && entityUser.role != "developer"){
+      if (entityUser.role != "supadmin" && entityUser.role != "developer") {
          validationForm("group", entities.idGroup, entities.group)
       }
    }, [])
@@ -152,6 +159,7 @@ export default function CreateMember() {
 
    async function handleCreate() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const fd = new FormData()
 
@@ -162,14 +170,14 @@ export default function CreateMember() {
          if (imgForm != undefined) {
             fd.append("file", {
                uri: imgForm.uri,
-               type: imgForm.mimeType,
-               name: imgForm.fileName,
+               type: imgForm.mimeType || "image/jpeg",
+               name: imgForm.fileName || "image.jpg",
             } as any)
          } else {
             fd.append("file", "undefined")
          }
 
-         const response = await apiCreateUser({data: fd})
+         const response = await apiCreateUser({ data: fd })
          if (response.success) {
             Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
             dispatch(setUpdateMember(!update))
@@ -177,8 +185,13 @@ export default function CreateMember() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -186,64 +199,60 @@ export default function CreateMember() {
    const pickImageAsync = async () => {
       let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ["images"],
-         allowsEditing: false,
-         quality: 1,
-         aspect: [1, 1],
+         allowsEditing: true,
+         quality: 0.9,
+         aspect: [1, 1]
       });
 
       if (!result.canceled) {
          setSelectedImage(result.assets[0].uri);
          setImgForm(result.assets[0]);
-
-      } else {
-         alert("Tidak ada gambar yang dipilih");
       }
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
                headerTitle: "Tambah Anggota",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="create"
-                     onPress={() => { handleCreate() }}
+               header: () => (
+                  <AppHeader title="Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || loading}
+                           category="create"
+                           onPress={() => { handleCreate() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
+         {loading && <LoadingCenter />}
          <KeyboardAvoidingView
-             style={[Styles.h100]}
-             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-             keyboardVerticalOffset={110}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
+            <ScrollView showsVerticalScrollIndicator={false}>
                <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                      {selectedImage != undefined ? (
                         <Pressable onPress={pickImageAsync}>
                            <Image src={selectedImage} style={[Styles.userProfileBig]} />
+                           <View style={[Styles.absoluteIconPicker]}>
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                         </Pressable>
                      ) : (
-                        <Pressable
-                           onPress={pickImageAsync}
-                           style={[Styles.iconContent, ColorsStatus.gray]}
-                        >
-                           <MaterialCommunityIcons
-                              name="account-tie"
-                              size={100}
-                              color={"gray"}
-                           />
+                        <Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]} >
+                           <MaterialCommunityIcons name="account-tie" size={85} color={"gray"} />
+                           <View style={[Styles.absoluteIconPicker]}>
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                         </Pressable>
                      )}
                   </View>
@@ -254,6 +263,7 @@ export default function CreateMember() {
                            placeholder="Pilih Lembaga Desa"
                            value={chooseGroup.label}
                            required
+                           bg={colors.card}
                            onPress={() => {
                               setValChoose(chooseGroup.val);
                               setValSelect("group");
@@ -268,6 +278,7 @@ export default function CreateMember() {
                      placeholder="Pilih Jabatan"
                      value={choosePosition.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(choosePosition.val);
                         setValSelect("position");
@@ -281,6 +292,7 @@ export default function CreateMember() {
                      placeholder="Pilih Role"
                      value={chooseRole.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseRole.val);
                         setValSelect("role");
@@ -294,6 +306,7 @@ export default function CreateMember() {
                      type="numeric"
                      placeholder="NIK"
                      required
+                     bg={colors.card}
                      error={error.nik}
                      errorText="NIK Harus 16 Karakter"
                      onChange={val => {
@@ -305,8 +318,9 @@ export default function CreateMember() {
                      type="default"
                      placeholder="Nama"
                      required
+                     bg={colors.card}
                      error={error.name}
-                     errorText="Nama tidak boleh kosong"
+                     errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
                      onChange={val => {
                         validationForm("name", val)
                      }}
@@ -316,6 +330,7 @@ export default function CreateMember() {
                      type="default"
                      placeholder="Email"
                      required
+                     bg={colors.card}
                      error={error.email}
                      errorText="Email tidak valid"
                      onChange={val => {
@@ -327,7 +342,8 @@ export default function CreateMember() {
                      type="numeric"
                      placeholder="8XX-XXX-XXX"
                      required
-                     itemLeft={<Text>+62</Text>}
+                     bg={colors.card}
+                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02, { color: colors.text }]}>+62</Text>}
                      error={error.phone}
                      errorText="Nomor Telepon tidak valid"
                      onChange={val => {
@@ -339,6 +355,7 @@ export default function CreateMember() {
                      placeholder="Pilih Jenis Kelamin"
                      value={chooseGender.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseGender.val);
                         setValSelect("gender");

app/(application)/member/edit/[id].tsx

@@ -1,13 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
+import LoadingCenter from "@/components/loadingCenter";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiEditUser, apiGetProfile } from "@/lib/api";
+import { validateName } from "@/lib/fun_validateName";
 import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useHeaderHeight } from '@react-navigation/elements';
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -38,10 +44,12 @@ type Props = {
 };
 
 export default function EditMember() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>();
+   const { colors } = useTheme();
    const [errorImg, setErrorImg] = useState(false)
    const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
    const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
@@ -52,6 +60,7 @@ export default function EditMember() {
    const [disableBtn, setDisableBtn] = useState(false)
    const [valChoose, setValChoose] = useState("")
    const [imgForm, setImgForm] = useState<any>();
+   const [loading, setLoading] = useState(false)
    const [data, setData] = useState<Props>({
       id: "",
       name: "",
@@ -79,7 +88,7 @@ export default function EditMember() {
       try {
          const response = await apiGetProfile({ id: id });
          setData(response.data);
-         setSelectedImage({ uri: `https://wibu-storage.wibudev.com/api/files/${response.data.img}`, });
+         setSelectedImage({ uri: `${ConstEnv.url_storage}/files/${response.data.img}`, });
          setChoosePosition({
             val: response.data.idPosition,
             label: response.data.position,
@@ -127,7 +136,7 @@ export default function EditMember() {
          }
       } else if (cat == "name") {
          setData({ ...data, name: val });
-         if (val == "") {
+         if (!validateName(val)) {
             setError({ ...error, name: true });
          } else {
             setError({ ...error, name: false });
@@ -144,7 +153,7 @@ export default function EditMember() {
          }
       } else if (cat == "phone") {
          setData({ ...data, phone: val });
-         if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+         if (val == "" || !(val.length >= 9 && val.length <= 16)) {
             setError({ ...error, phone: true });
          } else {
             setError({ ...error, phone: false });
@@ -162,11 +171,9 @@ export default function EditMember() {
    }
 
    function checkForm() {
-      if (Object.values(error).some((v) => v == true) || Object.values(data).some((v) => v == "")) {
-         setDisableBtn(true)
-      } else {
-         setDisableBtn(false)
-      }
+      const requiredFields: (keyof Props)[] = ["idPosition", "idUserRole", "nik", "name", "email", "phone", "gender"];
+      const hasEmpty = requiredFields.some((key) => data[key] === "");
+      setDisableBtn(Object.values(error).some((v) => v === true) || hasEmpty);
    }
 
    useEffect(() => {
@@ -175,14 +182,15 @@ export default function EditMember() {
 
    async function handleEdit() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const fd = new FormData()
 
          if (imgForm != undefined) {
             fd.append("file", {
                uri: imgForm.uri,
-               type: imgForm.mimeType,
-               name: imgForm.fileName,
+               type: imgForm.mimeType || "image/jpeg",
+               name: imgForm.fileName || "image.jpg",
             } as any);
          } else {
             fd.append("file", "undefined",);
@@ -201,9 +209,13 @@ export default function EditMember() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal mengupdate data', })
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -212,9 +224,9 @@ export default function EditMember() {
    const pickImageAsync = async () => {
       let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ["images"],
-         allowsEditing: false,
-         quality: 1,
-         aspect: [1, 1],
+         allowsEditing: true,
+         quality: 0.9,
+         aspect: [1, 1]
       });
 
       if (!result.canceled) {
@@ -222,54 +234,54 @@ export default function EditMember() {
          setSelectedImage(result.assets[0].uri);
          setImgForm(result.assets[0]);
       } else {
-         alert("Tidak ada gambar yang dipilih");
          setErrorImg(false)
       }
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
                headerTitle: "Edit Anggota",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn}
-                     category="update"
-                     onPress={() => {
-                        handleEdit()
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Edit Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || loading}
+                           category="update"
+                           onPress={() => {
+                              handleEdit()
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
-
+         {loading && <LoadingCenter />}
          <KeyboardAvoidingView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
-               <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+            <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+               <View style={[Styles.p15]}>
+                  <View style={[Styles.contentItemCenter]}>
                      {
                         errorImg ?
                            <Pressable onPress={pickImageAsync}>
-                              {
-                                 <Image
-                                    source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
-                                    style={[Styles.userProfileBig]}
-                                    onError={() => { setErrorImg(true) }}
-                                 />
-                              }
+                              <Image
+                                 source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${data?.img}` }}
+                                 style={[Styles.userProfileBig]}
+                                 onError={() => { setErrorImg(true) }}
+                              />
+                              <View style={[Styles.absoluteIconPicker]}>
+                                 <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                              </View>
                            </Pressable>
                            :
                            selectedImage != undefined ? (
@@ -283,6 +295,9 @@ export default function EditMember() {
                                     style={[Styles.userProfileBig]}
                                     onError={() => { setErrorImg(true) }}
                                  />
+                                 <View style={[Styles.absoluteIconPicker]}>
+                                    <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                                 </View>
                               </Pressable>
                            ) : (
                               <Image
@@ -297,6 +312,7 @@ export default function EditMember() {
                      placeholder="Pilih Jabatan"
                      value={choosePosition.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(choosePosition.val);
                         setValSelect("position");
@@ -310,6 +326,7 @@ export default function EditMember() {
                      placeholder="Pilih Role"
                      value={chooseRole.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseRole.val);
                         setValSelect("role");
@@ -324,6 +341,7 @@ export default function EditMember() {
                      placeholder="NIK"
                      required
                      value={data?.nik}
+                     bg={colors.card}
                      error={error.nik}
                      errorText="NIK Harus 16 Karakter"
                      onChange={val => {
@@ -336,8 +354,9 @@ export default function EditMember() {
                      placeholder="Nama"
                      required
                      value={data?.name}
+                     bg={colors.card}
                      error={error.name}
-                     errorText="Nama tidak boleh kosong"
+                     errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
                      onChange={val => {
                         validationForm("name", val)
                      }}
@@ -348,6 +367,7 @@ export default function EditMember() {
                      placeholder="Email"
                      required
                      value={data?.email}
+                     bg={colors.card}
                      error={error.email}
                      errorText="Email tidak valid"
                      onChange={val => {
@@ -359,8 +379,9 @@ export default function EditMember() {
                      type="numeric"
                      placeholder="8XX-XXX-XXX"
                      required
-                     itemLeft={<Text>+62</Text>}
+                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02, { color: colors.text }]}>+62</Text>}
                      value={data?.phone}
+                     bg={colors.card}
                      error={error.phone}
                      errorText="Nomor Telepon tidak valid"
                      onChange={val => {
@@ -372,6 +393,7 @@ export default function EditMember() {
                      placeholder="Pilih Jenis Kelamin"
                      value={chooseGender.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseGender.val);
                         setValSelect("gender");

app/(application)/member/index.tsx

@@ -1,15 +1,23 @@
+import GuideOverlay from "@/components/GuideOverlay";
 import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonTab from "@/components/buttonTab";
 import ImageUser from "@/components/imageNew";
 import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
+import { GUIDE_MEMBER } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather } from "@expo/vector-icons";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { RefreshControl, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -31,117 +39,129 @@ export default function Index() {
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
    const { token, decryptToken } = useAuthSession()
    const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme();
    const [search, setSearch] = useState('')
-   const [nameGroup, setNameGroup] = useState('')
-   const [data, setData] = useState<Props[]>([])
    const update = useSelector((state: any) => state.memberUpdate)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [loading, setLoading] = useState(true)
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
+   const queryClient = useQueryClient()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
    const [refreshing, setRefreshing] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('member')
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   // TanStack Query for Members with Infinite Scroll
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['members', { status, search, group }],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetUser({ user: hasil, active: status, search, group: String(group), page: thisPage })
-         if (thisPage == 1) {
-            setData(response.data)
-         } else if (thisPage > 1 && response.data.length > 0) {
-            setData([...data, ...response.data])
-         } else {
-            return;
-         }
-         setNameGroup(response.filter.name)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-         setWaiting(false)
-      }
-   }
+         const response = await apiGetUser({ 
+            user: hasil, 
+            active: status, 
+            search, 
+            group: String(group), 
+            page: pageParam 
+         })
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
+   // Flatten pages into a single data array
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
 
+   // Get nameGroup from the first available page
+   const nameGroup = useMemo(() => {
+      return data?.pages[0]?.filter?.name || "";
+   }, [data])
+
+   // Refetch when manual update state changes
    useEffect(() => {
-      handleLoad(false, 1)
-   }, [update])
-
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [group, search, status])
+      refetch()
+   }, [update, refetch])
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['members'] })
       setRefreshing(false)
    };
 
+   const loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
+
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      name: data[index].name,
-      nik: data[index].nik,
-      email: data[index].email,
-      phone: data[index].phone,
-      gender: data[index].gender,
-      position: data[index].position,
-      group: data[index].group,
-      img: data[index].img,
-      isActive: data[index].isActive,
-      role: data[index].role,
+      id: flatData[index]?.id,
+      name: flatData[index]?.name,
+      nik: flatData[index]?.nik,
+      email: flatData[index]?.email,
+      phone: flatData[index]?.phone,
+      gender: flatData[index]?.gender,
+      position: flatData[index]?.position,
+      group: flatData[index]?.group,
+      img: flatData[index]?.img,
+      isActive: flatData[index]?.isActive,
+      role: flatData[index]?.role,
    });
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_MEMBER} onDismiss={dismissGuide} />
          <View>
-            <View style={[Styles.wrapBtnTab]}>
+            <WrapTab>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
-            </View>
+            </WrapTab>
             <InputSearch onChange={setSearch} />
             {
                (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-               <View style={[Styles.mv05]}>
-                  <Text>Filter : {nameGroup}</Text>
+               <View style={[Styles.mt10, Styles.rowOnly]}>
+                  <Text>Filter :</Text>
+                  <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mh05]} />
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonTwoItem key={index} />
                      )
                   })
                   :
-                  data.length > 0
+                  flatData.length > 0
                      ?
                      <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
+                        data={flatData}
+                        getItemCount={() => flatData.length}
                         getItem={getItem}
                         renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
@@ -150,7 +170,7 @@ export default function Index() {
                                  onPress={() => { router.push(`/member/${item.id}`) }}
                                  borderType="all"
                                  icon={
-                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />
+                                    <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />
                                  }
                                  title={item.name}
                                  subtitle={`${item.group} - ${item.position}`}
@@ -165,11 +185,12 @@ export default function Index() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                            />
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </View>

app/(application)/notification.tsx

@@ -1,15 +1,18 @@
-import BorderBottomItem from "@/components/borderBottomItem";
+import AppHeader from "@/components/AppHeader";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
-import { apiGetNotification, apiReadOneNotification } from "@/lib/api";
+import { apiGetNotification, apiReadAllNotification, apiReadOneNotification } from "@/lib/api";
 import { setUpdateNotification } from "@/lib/notificationSlice";
 import { pushToPage } from "@/lib/pushToPage";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
-import { useEffect, useState } from "react";
-import { SafeAreaView, View, VirtualizedList } from "react-native";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { router, Stack } from "expo-router";
+import { useEffect, useMemo, useState } from "react";
+import { FlatList, Pressable, RefreshControl, SafeAreaView, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 
 type Props = {
@@ -22,65 +25,121 @@ type Props = {
    createdAt: string
 }
 
+type HeaderRow = { _type: 'header'; date: string }
+type ItemRow = Props & { _type: 'item' }
+type ListRow = HeaderRow | ItemRow
+
+function getNotifStyle(category: string): { icon: keyof typeof Feather.glyphMap; color: string } {
+   if (category === 'announcement') return { icon: 'volume-2', color: '#3B82F6' }
+   if (category === 'project') return { icon: 'activity', color: '#10B981' }
+   if (category.includes('/task')) return { icon: 'clipboard', color: '#8B5CF6' }
+   if (category === 'division') return { icon: 'users', color: '#3B82F6' }
+   if (category.includes('/discussion') || category === 'discussion-general') return { icon: 'message-square', color: '#06B6D4' }
+   if (category.includes('/calendar')) return { icon: 'calendar', color: '#F59E0B' }
+   if (category.includes('/document')) return { icon: 'file-text', color: '#FBBF24' }
+   if (category === 'member') return { icon: 'user', color: '#1F3C88' }
+   return { icon: 'bell', color: '#6B7280' }
+}
+
 export default function Notification() {
    const { token, decryptToken } = useAuthSession()
-   const [loading, setLoading] = useState(false)
-   const [data, setData] = useState<Props[]>([])
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const { colors } = useTheme();
+   const queryClient = useQueryClient()
    const dispatch = useDispatch()
    const updateNotification = useSelector((state: any) => state.notificationUpdate)
+   const [refreshing, setRefreshing] = useState(false)
+   const [markingAll, setMarkingAll] = useState(false)
+   const [showConfirm, setShowConfirm] = useState(false)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setLoading(loading)
-         setPage(thisPage)
-         setWaiting(true)
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['notifications'],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetNotification({ user: hasil, page: thisPage })
-         if (thisPage == 1) {
-            setData(response.data)
-         } else if (thisPage > 1 && response.data.length > 0) {
-            setData([...data, ...response.data])
-         } else {
-            return;
+         const response = await apiGetNotification({ user: hasil, page: pageParam })
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
+
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
+
+   const listData = useMemo<ListRow[]>(() => {
+      const BULAN: Record<string, number> = {
+         'JAN': 0, 'FEB': 1, 'MAR': 2, 'APR': 3, 'MEI': 4, 'JUN': 5,
+         'JUL': 6, 'AGU': 7, 'SEP': 8, 'OKT': 9, 'NOV': 10, 'DES': 11,
+      }
+      const parseDate = (str: string) => {
+         const [d, m, y] = str.split(' ')
+         return new Date(Number(y), BULAN[m] ?? 0, Number(d)).getTime()
+      }
+
+      const groups: Record<string, Props[]> = {}
+      const dateOrder: string[] = []
+
+      flatData.forEach((item) => {
+         if (!groups[item.createdAt]) {
+            groups[item.createdAt] = []
+            dateOrder.push(item.createdAt)
          }
+         groups[item.createdAt].push(item)
+      })
+
+      dateOrder.sort((a, b) => parseDate(b) - parseDate(a))
+
+      const result: ListRow[] = []
+      dateOrder.forEach((date) => {
+         result.push({ _type: 'header', date })
+         const sorted = [...groups[date]].sort((a, b) => Number(a.isRead) - Number(b.isRead))
+         sorted.forEach((item) => result.push({ ...item, _type: 'item' }))
+      })
+      return result
+   }, [flatData])
+
+   useEffect(() => {
+      refetch()
+   }, [updateNotification, refetch])
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      await queryClient.invalidateQueries({ queryKey: ['notifications'] })
+      setRefreshing(false)
+   };
+
+   const hasUnread = flatData.some((item) => !item.isRead)
+
+   async function handleReadAll() {
+      try {
+         setMarkingAll(true)
+         const hasil = await decryptToken(String(token?.current))
+         await apiReadAllNotification({ user: hasil })
+         await queryClient.invalidateQueries({ queryKey: ['notifications'] })
+         dispatch(setUpdateNotification(!updateNotification))
       } catch (error) {
          console.error(error)
       } finally {
-         setLoading(false)
-         setWaiting(false)
+         setMarkingAll(false)
       }
    }
 
-
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   };
-
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [])
-
-
-   const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      title: data[index].title,
-      desc: data[index].desc,
-      category: data[index].category,
-      idContent: data[index].idContent,
-      isRead: data[index].isRead,
-      createdAt: data[index].createdAt,
-   });
-
    async function handleReadNotification(id: string, category: string, idContent: string) {
       try {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiReadOneNotification({ user: hasil, id: id })
+         await apiReadOneNotification({ user: hasil, id: id })
+         await queryClient.invalidateQueries({ queryKey: ['notifications'] })
          pushToPage(category, idContent)
          dispatch(setUpdateNotification(!updateNotification))
       } catch (error) {
@@ -88,80 +147,150 @@ export default function Notification() {
       }
    }
 
-   // function pushToPage(category: string, idContent: string) {
-   //    const cat = category.split('/')
-   //    if (cat.length > 1) {
-   //       if (cat[2] == 'calendar') {
-   //          router.push(`/division/${cat[1]}/calendar/${idContent}`)
-   //       } else if (cat[2] == 'discussion') {
-   //          router.push(`/division/${cat[1]}/discussion/${idContent}`)
-   //       } else if (cat[2] == 'document') {
-   //          router.push(`/division/${cat[1]}/document/${idContent}`)
-   //       } else if (cat[2] == 'task') {
-   //          router.push(`/division/${cat[1]}/task/${idContent}`)
-   //       }
-   //    } else {
-   //       if (cat[0] == 'announcement') {
-   //          router.push(`/announcement/${idContent}`)
-   //       } else if (cat[0] == 'discussion-general') {
-   //          router.push(`/discussion/${idContent}`)
-   //       } else if (cat[0] == 'division') {
-   //          router.push(`/division/${idContent}`)
-   //       } else if (cat[0] == 'member') {
-   //          router.push(`/member/${idContent}`)
-   //       } else if (cat[0] == 'project') {
-   //          router.push(`/project/${idContent}`)
-   //       }
-   //    }
-   // }
-
+   async function handleMarkOneRead(id: string) {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         await apiReadOneNotification({ user: hasil, id: id })
+         await queryClient.invalidateQueries({ queryKey: ['notifications'] })
+         dispatch(setUpdateNotification(!updateNotification))
+      } catch (error) {
+         console.error(error)
+      }
+   }
 
    return (
-      <SafeAreaView>
-         <View style={[Styles.p15]}>
-            {
-               loading ?
-                  arrSkeleton.map((item, index) => {
-                     return (
-                        <SkeletonTwoItem key={index} />
-                     )
-                  })
-                  :
-                  data.length > 0 ?
-                     <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
-                        getItem={getItem}
-                        renderItem={({ item, index }: { item: Props, index: number }) => {
-                           return (
-                              <BorderBottomItem
-                                 borderType="bottom"
-                                 width={55}
-                                 icon={
-                                    <View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
-                                       <Feather name="bell" size={25} color="white" />
-                                    </View>
-                                 }
-                                 title={item.title}
-                                 rightTopInfo={item.createdAt}
-                                 desc={item.desc}
-                                 textColor={item.isRead ? 'gray' : 'black'}
-                                 onPress={() => {
-                                    handleReadNotification(item.id, item.category, item.idContent)
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
+         <Stack.Screen
+            options={{
+               header: () => (
+                  <AppHeader
+                     title="Notifikasi"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        hasUnread ? (
+                           <Pressable
+                              onPress={() => setShowConfirm(true)}
+                              disabled={markingAll}
+                              style={{ opacity: markingAll ? 0.5 : 1, padding: 4 }}
+                           >
+                              <Feather name="check-square" size={20} color="white" />
+                           </Pressable>
+                        ) : undefined
+                     }
+                  />
+               )
+            }}
+         />
 
-                                 }}
-                              />
-                           )
-                        }}
-                        keyExtractor={(item, index) => String(index)}
-                        onEndReached={loadMoreData}
-                        onEndReachedThreshold={0.5}
-                        showsVerticalScrollIndicator={false}
+         <ModalConfirmation
+            visible={showConfirm}
+            title="Tandai Semua Dibaca"
+            message="Semua notifikasi akan ditandai sebagai telah dibaca."
+            confirmText="Tandai"
+            cancelText="Batal"
+            onConfirm={() => {
+               setShowConfirm(false)
+               handleReadAll()
+            }}
+            onCancel={() => setShowConfirm(false)}
+         />
+
+
+<View style={[Styles.flex1, Styles.ph15, Styles.notifContainer]}>
+            {isLoading ? (
+               [0, 1, 2, 3, 4].map((_, i) => <SkeletonTwoItem key={i} />)
+            ) : flatData.length === 0 ? (
+               <View style={[Styles.contentItemCenter, Styles.mt30]}>
+                  <Feather name="bell-off" size={42} color={colors.icon + '40'} />
+                  <Text style={[Styles.mt10, { color: colors.dimmed, fontSize: 14 }]}>
+                     Tidak ada notifikasi
+                  </Text>
+               </View>
+            ) : (
+               <FlatList
+                  data={listData}
+                  keyExtractor={(item, index) => String(index)}
+                  showsVerticalScrollIndicator={false}
+                  onEndReached={() => {
+                     if (hasNextPage && !isFetchingNextPage) fetchNextPage()
+                  }}
+                  onEndReachedThreshold={0.5}
+                  refreshControl={
+                     <RefreshControl
+                        refreshing={refreshing}
+                        onRefresh={handleRefresh}
+                        tintColor={colors.icon}
                      />
-                     :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-            }
+                  }
+                  renderItem={({ item }) => {
+                     if (item._type === 'header') {
+                        return (
+                           <View style={[Styles.rowItemsCenter, Styles.notifHeaderRow]}>
+                              <Text style={[Styles.notifDateText, { color: colors.dimmed }]}>
+                                 {item.date}
+                              </Text>
+                              <View style={[Styles.notifDateSeparator, { backgroundColor: colors.icon + '20' }]} />
+                           </View>
+                        )
+                     }
+
+                     const { icon, color } = getNotifStyle(item.category)
+
+                     return (
+                        <Pressable
+                           onPress={() => handleReadNotification(item.id, item.category, item.idContent)}
+                           style={({ pressed }) => [Styles.notifItemRow, {
+                              borderColor: colors.icon + '20',
+                              backgroundColor: pressed
+                                 ? colors.icon + '10'
+                                 : item.isRead
+                                    ? colors.icon + '10'
+                                    : colors.card,
+                           }]}
+                        >
+                           <View style={[Styles.notifIconContainer, { backgroundColor: color + '20' }]}>
+                              <Feather name={icon} size={20} color={color} />
+                           </View>
+
+                           <View style={[Styles.flex1, Styles.notifContent]}>
+                              <View style={[Styles.rowSpaceBetween, Styles.itemsCenter]}>
+                                 <View style={[Styles.flex1, Styles.mr10]}>
+                                    <Text
+                                       style={[Styles.textDefaultSemiBold, { color: item.isRead ? colors.dimmed : colors.text }]}
+                                       numberOfLines={1}
+                                    >
+                                       {item.title}
+                                    </Text>
+                                 </View>
+                                 {!item.isRead && (
+                                    <Pressable
+                                       onPress={(e) => {
+                                          e.stopPropagation()
+                                          handleMarkOneRead(item.id)
+                                       }}
+                                       hitSlop={8}
+                                       style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, flexShrink: 0 })}
+                                    >
+                                       <Text style={Styles.notifMarkReadText}>
+                                          Tandai dibaca
+                                       </Text>
+                                    </Pressable>
+                                 )}
+                              </View>
+                              <Text
+                                 style={[Styles.textMediumNormal, { color: item.isRead ? colors.dimmed : colors.text, opacity: item.isRead ? 0.7 : 1 }]}
+                                 numberOfLines={2}
+                              >
+                                 {item.desc}
+                              </Text>
+                           </View>
+                        </Pressable>
+                     )
+                  }}
+               />
+            )}
          </View>
       </SafeAreaView>
    )
-}
+}

app/(application)/position/index.tsx

@@ -1,22 +1,28 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import GuideOverlay from "@/components/GuideOverlay";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
 import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
 import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
 import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
-import { ColorsStatus } from "@/constants/ColorsStatus";
+import WrapTab from "@/components/wrapTab";
 import Styles from "@/constants/Styles";
 import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
 import { setUpdatePosition } from "@/lib/positionSlice";
+import { GUIDE_POSITION } from "@/lib/guideSteps";
+import { useGuide } from "@/lib/useGuide";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { useEffect, useMemo, useState } from "react";
+import { RefreshControl, View, VirtualizedList } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -29,48 +35,54 @@ type Props = {
 }
 
 export default function Index() {
-   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
-   const [loading, setLoading] = useState(true)
    const { token, decryptToken } = useAuthSession()
-   const [status, setStatus] = useState<'true' | 'false'>('true')
-   const entityUser = useSelector((state: any) => state.user)
+   const { colors } = useTheme()
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
+   const [status, setStatus] = useState<'true' | 'false'>(active == 'false' ? 'false' : 'true')
+   const entityUser = useSelector((state: any) => state.user)
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
-   const [data, setData] = useState<Props[]>([])
    const [search, setSearch] = useState('')
-   const [nameGroup, setNameGroup] = useState('')
+   const [loadingSubmit, setLoadingSubmit] = useState(false)
    const [chooseData, setChooseData] = useState({ name: '', id: '', active: false, idGroup: '' })
    const [error, setError] = useState({
       name: false,
    });
+   const queryClient = useQueryClient()
    const [refreshing, setRefreshing] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const { visible: guideVisible, dismiss: dismissGuide } = useGuide('position')
 
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.positionUpdate)
 
-   async function handleLoad(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Positions
+   const {
+      data: queryData,
+      isLoading,
+      refetch
+   } = useQuery({
+      queryKey: ['positions', { status, search, group }],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetPosition({ user: hasil, active: status, search: search, group: String(group) })
-         setData(response.data)
-         setNameGroup(response.filter.name)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
+         const response = await apiGetPosition({
+            user: hasil,
+            active: status,
+            search: search,
+            group: String(group)
+         })
+         return response;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
+
+   const data = useMemo(() => queryData?.data || [], [queryData])
+   const nameGroup = useMemo(() => queryData?.filter?.name || "", [queryData])
 
    useEffect(() => {
-      handleLoad(false)
-   }, [update])
-
-
-   useEffect(() => {
-      handleLoad(true)
-   }, [status, search, group])
+      refetch()
+   }, [update, refetch])
 
 
    function handleChooseData(id: string, name: string, active: boolean, group: string) {
@@ -83,8 +95,11 @@ export default function Index() {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiDeletePosition({ user: hasil, isActive: chooseData.active }, chooseData.id)
          dispatch(setUpdatePosition(!update))
-      } catch (error) {
-         console.error(error)
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menghapus data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setModal(false)
          Toast.show({ type: 'small', text1: 'Berhasil mengupdate data', })
@@ -94,15 +109,23 @@ export default function Index() {
 
    async function handleEdit() {
       try {
+         setLoadingSubmit(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiEditPosition({ user: hasil, name: chooseData.name, idGroup: chooseData.idGroup }, chooseData.id)
-         dispatch(setUpdatePosition(!update))
-      } catch (error) {
-         console.error(error)
+         if (response.success) {
+            dispatch(setUpdatePosition(!update))
+         } else {
+            Toast.show({ type: 'small', text1: response.message, })
+         }
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
+         setLoadingSubmit(false)
          setVisibleEdit(false)
          setModal(false)
-         Toast.show({ type: 'small', text1: 'Berhasil mengupdate data', })
       }
 
    }
@@ -122,96 +145,113 @@ export default function Index() {
       handleEdit()
    }
 
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['positions'] })
       setRefreshing(false)
    };
 
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      name: data[index].name,
+      idGroup: data[index].idGroup,
+      group: data[index].group,
+      isActive: data[index].isActive,
+   });
+
    return (
-      <SafeAreaView>
-         <View style={[Styles.p15]}>
-            <View style={[Styles.wrapBtnTab]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
+         <GuideOverlay visible={guideVisible} steps={GUIDE_POSITION} onDismiss={dismissGuide} />
+         <View>
+            <WrapTab>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="true"
                   onPress={() => { setStatus("true") }}
                   label="Aktif"
-                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
+                  icon={<Feather name="check-circle" color={status == "true" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
                   value="false"
                   onPress={() => { setStatus("false") }}
                   label="Tidak Aktif"
-                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
+                  icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
                   n={2} />
-            </View>
+            </WrapTab>
             <InputSearch onChange={setSearch} />
             {
                (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-               <View style={[Styles.mv05]}>
-                  <Text>Filter : {nameGroup}</Text>
+               <View style={[Styles.mt10, Styles.rowOnly]}>
+                  <Text>Filter :</Text>
+                  <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mh05]} />
                </View>
             }
-            <ScrollView
-               style={[Styles.h100]}
-               refreshControl={
-                  <RefreshControl
-                     refreshing={refreshing}
-                     onRefresh={handleRefresh}
-                  />
-               }>
-               <View>
-                  {
-                     loading ?
-                        arrSkeleton.map((item, index) => {
-                           return (
-                              <SkeletonTwoItem key={index} />
-                           )
-                        })
-                        :
-                        data.length > 0 ?
-                           data.map((item, index) => {
-                              return (
-                                 <BorderBottomItem
-                                    key={index}
-                                    onPress={() => { handleChooseData(item.id, item.name, item.isActive, item.idGroup) }}
-                                    borderType="all"
-                                    icon={
-                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                          <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                                       </View>
-                                    }
-                                    title={item.name}
-                                    subtitle={item.group}
-                                 />
-                              )
-                           })
-                           :
-                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-                  }
-               </View>
-            </ScrollView>
          </View>
-
+         <View style={[Styles.flex2, Styles.mt10]}>
+            {
+               isLoading ?
+                  arrSkeleton.map((item, index) => {
+                     return (
+                        <SkeletonTwoItem key={index} />
+                     )
+                  })
+                  :
+                  data.length > 0 ?
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => {
+                                    entityUser.role != "user" &&
+                                       handleChooseData(item.id, item.name, item.isActive, item.idGroup)
+                                 }}
+                                 borderType="all"
+                                 icon={
+                                    <View style={[Styles.iconContent]}>
+                                       <MaterialCommunityIcons name="account-tie-outline" size={25} color={'black'} />
+                                    </View>
+                                 }
+                                 title={item.name}
+                                 subtitle={item.group}
+                              />
+                           )
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                              tintColor={colors.icon}
+                           />
+                        }
+                     />
+                     :
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
+            }
+         </View>
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
                   title={chooseData.active ? 'Non Aktifkan' : "Aktifkan"}
                   onPress={() => {
                      setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: chooseData.active ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?',
-                        onPress: () => { handleDelete() }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setModal(false)
@@ -225,13 +265,14 @@ export default function Index() {
 
 
          <DrawerBottom animation="none" keyboard height={30} backdropPressable={false} isVisible={isVisibleEdit} setVisible={() => setVisibleEdit(false)} title="Edit Jabatan">
-            <View style={{ justifyContent: 'space-between', flex: 1 }}>
+            <View style={[Styles.justifySpaceBetween, Styles.flex1]}>
                <View>
                   <InputForm
                      type="default"
                      placeholder="Nama Jabatan"
                      required
                      label="Jabatan"
+                     bg={"transparent"}
                      value={chooseData.name}
                      onChange={(val) => { validationForm(val) }}
                      error={error.name}
@@ -239,11 +280,23 @@ export default function Index() {
                   />
                </View>
                <View style={Styles.mb30}>
-                  <ButtonForm text="SIMPAN" onPress={() => { checkForm() }} />
+                  <ButtonForm text="SIMPAN" onPress={() => { handleEdit() }} disabled={Object.values(error).some((v) => v == true) || chooseData.name == "" || loadingSubmit} />
                </View>
             </View>
          </DrawerBottom>
 
-      </SafeAreaView>
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message={chooseData.active ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?'}
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText={chooseData.active ? "Nonaktifkan" : "Aktifkan"}
+            cancelText="Batal"
+         />
+      </View>
    )
 }

app/(application)/profile.tsx

@@ -1,69 +1,138 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
-import ItemDetailMember from "@/components/itemDetailMember";
 import Text from "@/components/Text";
+import { assetUserImage } from "@/constants/AssetsError";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
+import { apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign } from "@expo/vector-icons";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { LinearGradient } from "expo-linear-gradient";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, SafeAreaView, ScrollView, View } from "react-native";
-import { useSelector } from 'react-redux';
+import { Image, Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import ImageViewing from 'react-native-image-viewing';
+import { useDispatch, useSelector } from 'react-redux';
 
 export default function Profile() {
-   const { signOut } = useAuthSession()
+   const { colors } = useTheme();
    const entities = useSelector((state: any) => state.entities)
    const [error, setError] = useState(false)
+   const [preview, setPreview] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
 
+   async function handleUserLogin() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetProfile({ id: hasil })
+         .then((data) => dispatch(setEntities(data.data)))
+         .catch((error) => {
+            console.error(error)
+         });
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleUserLogin()
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const infoRows = [
+      { icon: <MaterialCommunityIcons name="card-account-details" size={20} color={colors.icon} />, label: 'NIK', value: entities.nik },
+      { icon: <MaterialCommunityIcons name="office-building-outline" size={20} color={colors.icon} />, label: 'Lembaga Desa', value: entities.group },
+      { icon: <MaterialCommunityIcons name="account-tie" size={20} color={colors.icon} />, label: 'Jabatan', value: entities.position },
+      { icon: <MaterialIcons name="phone" size={20} color={colors.icon} />, label: 'No Telepon', value: `0${entities.phone}` },
+      { icon: <MaterialIcons name="email" size={20} color={colors.icon} />, label: 'Email', value: entities.email },
+      { icon: <MaterialCommunityIcons name="gender-male-female" size={20} color={colors.icon} />, label: 'Jenis Kelamin', value: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' },
+   ]
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Profile',
                headerTitleAlign: 'center',
-               headerShadowVisible: false,
-               headerRight: () => <ButtonHeader
-                  item={<AntDesign name="logout" size={20} color="white" />}
-                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Keluar',
-                        desc: 'Apakah anda yakin ingin keluar?',
-                        onPress: () => { signOut() }
-                     })
-                  }}
-               />
+               header: () => (
+                  <AppHeader
+                     title="Profile"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonHeader
+                           item={<Feather name="settings" size={20} color="white" />}
+                           onPress={() => router.push('/setting')}
+                        />
+                     }
+                  />
+               )
             }}
          />
-         <ScrollView>
-            <View style={{ flexDirection: 'column' }}>
-               <View style={[Styles.wrapHeadViewMember]}>
-                  <Image
-                     source={error ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${entities.img}` }}
-                     onError={() => { setError(true) }}
-                     style={[Styles.userProfileBig]}
-                  />
-                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
-                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
-               </View>
-               <View style={[Styles.p15]}>
-                  <View style={[Styles.rowSpaceBetween]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
-                     {
-                        entities.idUserRole != "developer" && <Text onPress={() => { router.push('/edit-profile') }} style={[Styles.textLink]}>Edit</Text>
-                     }
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <LinearGradient
+               colors={[colors.header, colors.homeGradient]}
+               style={[Styles.wrapHeadViewMember]}
+            >
+               <Pressable onPress={() => setPreview(true)}>
+                  <View style={[Styles.memberAvatarRing]}>
+                     <Image
+                        source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
+                        onError={() => setError(true)}
+                        style={[Styles.userProfileBig]}
+                     />
                   </View>
-                  <ItemDetailMember category="nik" value={entities.nik} />
-                  <ItemDetailMember category="group" value={entities.group} />
-                  <ItemDetailMember category="position" value={entities.position} />
-                  <ItemDetailMember category="phone" value={`0${entities.phone}`} />
-                  <ItemDetailMember category="email" value={entities.email} />
-                  <ItemDetailMember category="gender" value={entities.gender == "F" ? 'Perempuan' : 'Laki-laki'} />
+               </Pressable>
+               <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{entities.name}</Text>
+               <Text style={[Styles.textMediumNormal, Styles.cWhiteDimmed]}>{entities.role}</Text>
+               {entities.isApprover && (
+                  <View style={[Styles.memberBadgeRow, { justifyContent: 'center' }]}>
+                     <View style={[Styles.memberBadgeApprover]}>
+                        <Text style={[Styles.textSmallSemiBold, Styles.cWhite]}>APPROVER</Text>
+                     </View>
+                  </View>
+               )}
+            </LinearGradient>
+
+            <View style={[Styles.p15]}>
+               <Text style={[Styles.textDefaultSemiBold, Styles.mb08, { color: colors.dimmed }]}>Informasi</Text>
+               <View>
+                  {infoRows.map((item, index, arr) => (
+                     <View
+                        key={index}
+                        style={[Styles.memberInfoRow, { borderBottomWidth: index < arr.length - 1 ? 1 : 0, borderBottomColor: `${colors.dimmed}30` }]}
+                     >
+                        <View style={[Styles.memberInfoIcon]}>
+                           {item.icon}
+                        </View>
+                        <View style={[Styles.memberInfoContent]}>
+                           <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{item.label}</Text>
+                           <Text style={[Styles.textDefault, Styles.mt02, { color: colors.text }]} numberOfLines={1}>{item.value ?? '-'}</Text>
+                        </View>
+                     </View>
+                  ))}
                </View>
             </View>
          </ScrollView>
+
+         <ImageViewing
+            images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]}
+            imageIndex={0}
+            visible={preview}
+            onRequestClose={() => setPreview(false)}
+            doubleTapToZoomEnabled
+         />
       </SafeAreaView>
    )
-}
+}

app/(application)/project/[id]/add-file.tsx

@@ -1,13 +1,15 @@
+import AppHeader from "@/components/AppHeader"
 import BorderBottomItem from "@/components/borderBottomItem"
-import ButtonBackHeader from "@/components/buttonBackHeader"
 import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import ButtonSelect from "@/components/buttonSelect"
 import DrawerBottom from "@/components/drawerBottom"
+import LoadingCenter from "@/components/loadingCenter"
 import MenuItemRow from "@/components/menuItemRow"
 import Styles from "@/constants/Styles"
 import { apiAddFileProject, apiCheckFileProject } from "@/lib/api"
 import { setUpdateProject } from "@/lib/projectUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
 import * as DocumentPicker from "expo-document-picker"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -17,6 +19,7 @@ import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
 
 export default function ProjectAddFile() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [fileForm, setFileForm] = useState<any[]>([])
    const [listFile, setListFile] = useState<any[]>([])
@@ -26,6 +29,7 @@ export default function ProjectAddFile() {
    const [loadingCheck, setLoadingCheck] = useState(false)
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
+   const [loading, setLoading] = useState(false)
 
    const pickDocumentAsync = async () => {
       let result = await DocumentPicker.getDocumentAsync({
@@ -86,6 +90,7 @@ export default function ProjectAddFile() {
 
    async function handleAddFile() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const fd = new FormData();
 
@@ -113,9 +118,13 @@ export default function ProjectAddFile() {
          } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
@@ -123,32 +132,49 @@ export default function ProjectAddFile() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah File',
                headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader
-                  disable={fileForm.length == 0 ? true : false}
-                  category="create"
-                  onPress={() => { handleAddFile() }} />
+               // headerRight: () => <ButtonSaveHeader
+               //    disable={fileForm.length == 0 || loading ? true : false}
+               //    category="create"
+               //    onPress={() => { handleAddFile() }} />
+               header: () => (
+                  <AppHeader
+                     title="Tambah File"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={fileForm.length == 0 || loading ? true : false}
+                           category="create"
+                           onPress={() => { handleAddFile() }}
+                        />
+                     }
+                  />
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         {
+            loading && <LoadingCenter size="large" />
+         }
+         <ScrollView style={[Styles.flex1, { backgroundColor: colors.background }]}>
+            <View style={[Styles.p15]}>
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
                   listFile.length > 0 && (
                      <View style={[Styles.mb15]}>
-                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        <View style={[Styles.wrapPaper]}>
+                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05, { color: colors.text }]}>File</Text>
+                        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                            {
                               listFile.map((item, index) => (
                                  <BorderBottomItem
                                     key={index}
                                     borderType="all"
-                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
                                     title={item}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -167,7 +193,7 @@ export default function ProjectAddFile() {
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => { deleteFile(indexDelFile) }}
                />

app/(application)/project/[id]/add-member.tsx

@@ -1,17 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ImageUser from "@/components/imageNew";
 import ImageWithLabel from "@/components/imageWithLabel";
 import InputSearch from "@/components/inputSearch";
 import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiAddMemberProject, apiGetProjectOne, apiGetUser } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -22,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberProject() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -31,6 +34,7 @@ export default function AddMemberProject() {
    const [idGroup, setIdGroup] = useState('')
    const [selectMember, setSelectMember] = useState<any[]>([])
    const [search, setSearch] = useState('')
+   const [loading, setLoading] = useState(false)
 
    async function handleLoad() {
       try {
@@ -41,8 +45,11 @@ export default function AddMemberProject() {
          setIdGroup(responseGroup.data.idGroup)
          const responsemember = await apiGetUser({ user: hasil, active: "true", search: search, group: String(responseGroup.data.idGroup) })
          setData(responsemember.data.filter((i: any) => i.idUserRole != 'supadmin'))
-      } catch (error) {
-         console.error(error)
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+
+         Toast.show({ type: 'small', text1: message })
       }
    }
 
@@ -73,6 +80,7 @@ export default function AddMemberProject() {
 
    async function handleAddMember() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiAddMemberProject({ id: id, data: { user: hasil, member: selectMember } })
          if (response.success) {
@@ -80,43 +88,64 @@ export default function AddMemberProject() {
             dispatch(setUpdateProject({ ...update, member: !update.member }))
             router.back()
          }
-      } catch (error) {
-         console.error(error)
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Tambah Anggota Kegiatan',
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     category="update"
-                     disable={selectMember.length > 0 ? false : true}
-                     onPress={() => {
-                        handleAddMember()
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       category="update"
+               //       disable={selectMember.length == 0 || loading ? true : false}
+               //       onPress={() => {
+               //          handleAddMember()
+               //       }}
+               //    />
+               // )
+               header: () => (
+                  <AppHeader
+                     title="Tambah Anggota"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           category="update"
+                           disable={selectMember.length == 0 || loading ? true : false}
+                           onPress={() => {
+                              handleAddMember()
+                           }}
+                        />
+                     }
                   />
                )
             }}
          />
-         <View style={[Styles.p15, Styles.mb100]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => handleSearch(val)} value={search} />
             {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
                                  key={index}
                                  label={item.name}
-                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 src={`${ConstEnv.url_storage}/files/${item.img}`}
                                  onClick={() => onChoose(item.idUser, item.name, item.img)}
                               />
                            ))
@@ -125,42 +154,50 @@ export default function AddMemberProject() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
-            <ScrollView>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+               style={[Styles.h100, { backgroundColor: colors.background }]}
+            >
                {
                   data.length > 0 ?
-                     data.map((item: any, index: any) => {
-                        const found = dataOld.some((i: any) => i.idUser == item.id)
-                        return (
-                           <Pressable
-                              key={index}
-                              style={[Styles.itemSelectModal]}
-                              onPress={() => {
-                                 !found && onChoose(item.id, item.name, item.img)
-                              }}
-                           >
-                              <View style={[Styles.rowItemsCenter, Styles.w80]}>
-                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
-                                 <View style={[Styles.ml10]}>
-                                    <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
+                     <View style={[Styles.mb100]}>
+                        {
+                           data.map((item: any, index: any) => {
+                              const found = dataOld.some((i: any) => i.idUser == item.id)
+                              return (
+                                 <Pressable
+                                    key={index}
+                                    style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
+                                    onPress={() => {
+                                       !found && onChoose(item.id, item.name, item.img)
+                                    }}
+                                 >
+                                    <View style={[Styles.rowItemsCenter, Styles.w80]}>
+                                       <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} border />
+                                       <View style={[Styles.ml10]}>
+                                          <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
+                                          {
+                                             found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
+                                          }
+                                       </View>
+                                    </View>
                                     {
-                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                       selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                                     }
-                                 </View>
-                              </View>
-                              {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
-                              }
-                           </Pressable>
-                        )
-                     }
-                     )
+                                 </Pressable>
+                              )
+                           }
+                           )
+                        }
+                     </View>
+
                      :
                      <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
                }
             </ScrollView>
          </View>
-      </SafeAreaView>
+      </>
    )
 }

app/(application)/project/[id]/add-task.tsx

@@ -1,13 +1,21 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
+import ModalAddDetailTugasProject from "@/components/project/modalAddDetailTugasProject";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiCreateProjectTask } from "@/lib/api";
+import { formatDateOnly } from "@/lib/fun_formatDateOnly";
+import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
-import dayjs from "dayjs";
+import { useTheme } from "@/providers/ThemeProvider";
+import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
+import moment from "moment";
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
@@ -23,9 +31,13 @@ import DateTimePicker, {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function ProjectAddTask() {
+   const { colors } = useTheme();
+   const headerHeight = useHeaderHeight();
    const { token, decryptToken } = useAuthSession()
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
+   const [dataDetail, setDataDetail] = useState<any>([])
+   const [modalDetail, setModalDetail] = useState(false)
    const { id } = useLocalSearchParams<{ id: string }>();
    const [disable, setDisable] = useState(true);
    const [range, setRange] = useState<{
@@ -38,11 +50,11 @@ export default function ProjectAddTask() {
       title: false,
    })
    const [title, setTitle] = useState('');
+   const [loading, setLoading] = useState(false)
+   const [dsbButton, setDsbButton] = useState(true)
 
-   const from = range.startDate
-      ? dayjs(range.startDate).format("DD-MM-YYYY")
-      : "";
-   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+   const from = formatDateOnly(range.startDate);
+   const to = formatDateOnly(range.endDate);
 
    function checkAll() {
       if (from == "" || to == "" || title == "" || title == "null" || error.startDate || error.endDate || error.title) {
@@ -63,94 +75,168 @@ export default function ProjectAddTask() {
       }
    }
 
+   function checkButton() {
+      if (range.startDate == null || range.endDate == null || range.startDate == undefined || range.endDate == undefined) {
+         setDsbButton(true)
+         setDataDetail([])
+      } else {
+         setDsbButton(false)
+         const awal = formatDateOnly(range.startDate, "YYYY-MM-DD")
+         const akhir = formatDateOnly(range.endDate, "YYYY-MM-DD")
+         const datanya = getDatesInRange(awal, akhir)
+         setDataDetail(datanya.map((item: any) => ({
+            date: item,
+            timeStart: null,
+            timeEnd: null,
+         })))
+      }
+   }
+
    useEffect(() => {
       checkAll()
    }, [from, to, title, error])
 
+   useEffect(() => {
+      checkButton()
+   }, [range])
+
+
    async function handleCreate() {
       try {
+         setLoading(true)
+         const dataDetailFix = dataDetail.map((item: any) => ({
+            date: moment(item.date, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            timeStart: item.timeStart,
+            timeEnd: item.timeEnd,
+         }))
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiCreateProjectTask({ data: { name: title, dateStart: dayjs(range.startDate).format("YYYY-MM-DD"), dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"), user: hasil }, id });
+         const response = await apiCreateProjectTask({
+            data: {
+               name: title,
+               dateStart: formatDateOnly(range.startDate, "YYYY-MM-DD"),
+               dateEnd: formatDateOnly(range.endDate, "YYYY-MM-DD"),
+               user: hasil,
+               dataDetail: dataDetailFix
+            }, id
+         });
          if (response.success) {
             dispatch(setUpdateProject({ ...update, task: !update.task, progress: !update.progress }))
             Toast.show({ type: 'small', text1: 'Berhasil menambah data', })
             router.back();
+         } else {
+            Toast.show({ type: 'small', text1: response.message, })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan data"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Tambah Tugas",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disable}
-                     category="create"
-                     onPress={() => { handleCreate() }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disable || loading}
+               //       category="create"
+               //       onPress={() => { handleCreate() }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Tambah Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disable || loading}
+                           category="create"
+                           onPress={() => { handleCreate() }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
                <View style={[Styles.p15, Styles.mb100]}>
-                  <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
                         mode="range"
                         startDate={range.startDate}
                         endDate={range.endDate}
-                        onChange={(param) => setRange(param)}
+                        onChange={(param) => { setRange(param) }}
                         styles={{
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: { color: colors.text },
+                           month_selector_label: { color: colors.text },
+                           year_label: { color: colors.text },
+                           year_selector_label: { color: colors.text },
+                           day_label: { color: colors.text },
+                           time_label: { color: colors.text },
+                           weekday_label: { color: colors.text },
+                           button_next_image: { tintColor: colors.text },
+                           button_prev_image: { tintColor: colors.text },
                         }}
                      />
                   </View>
                   <View style={[Styles.mv10]}>
-                     <View style={[Styles.rowSpaceBetween]}>
-                        <View style={[{ width: "48%" }]}>
+                     <View style={[Styles.rowSpaceBetween, Styles.mb10]}>
+                        <View style={[Styles.w48]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Mulai <Text style={Styles.cError}>*</Text>
+                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
-                              <Text style={{ textAlign: "center" }}>{from}</Text>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                              <Text style={Styles.textCenter}>{from}</Text>
                            </View>
                         </View>
-                        <View style={[{ width: "48%" }]}>
+                        <View style={[Styles.w48]}>
                            <Text style={[Styles.mb05]}>
-                              Tanggal Berakhir <Text style={Styles.cError}>*</Text>
+                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
-                              <Text style={{ textAlign: "center" }}>{to}</Text>
+                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                              <Text style={Styles.textCenter}>{to}</Text>
                            </View>
                         </View>
                      </View>
                      {
-                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                        (error.endDate || error.startDate) && <Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
                      }
+                     {/* <Pressable
+                        style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
+                        disabled={dsbButton}
+                        onPress={() => { setModalDetail(true) }}
+                     >
+                        <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} disabled={from == "" || to == ""} />
                   </View>
                   <InputForm
                      label="Judul Tugas"
                      type="default"
                      placeholder="Judul Tugas"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={title}
                      error={error.title}
                      errorText="Judul tidak boleh kosong"
@@ -161,6 +247,14 @@ export default function ProjectAddTask() {
                </View>
             </ScrollView>
          </KeyboardAvoidingView>
+         <ModalAddDetailTugasProject
+            isVisible={modalDetail}
+            setVisible={setModalDetail}
+            dataTanggal={dataDetail}
+            onSubmit={(data) => {
+               setDataDetail(data)
+            }}
+         />
       </SafeAreaView>
    );
 }

app/(application)/project/[id]/cancel.tsx

@@ -1,17 +1,19 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import Styles from "@/constants/Styles";
 import { apiCancelProject } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function ProjectCancel() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch();
@@ -19,6 +21,7 @@ export default function ProjectCancel() {
    const [reason, setReason] = useState("");
    const [error, setError] = useState(false);
    const [disable, setDisable] = useState(false);
+   const [loading, setLoading] = useState(false)
 
 
    function onValidation(val: string) {
@@ -44,6 +47,7 @@ export default function ProjectCancel() {
 
    async function handleCancel() {
       try {
+         setLoading(true)
          const hasil = await decryptToken(String(token?.current));
          const response = await apiCancelProject({
             reason: reason,
@@ -54,46 +58,71 @@ export default function ProjectCancel() {
             Toast.show({ type: 'small', text1: 'Berhasil membatalkan kegiatan', })
             router.back();
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal membatalkan kegiatan"
+
+         Toast.show({ type: 'small', text1: message })
+      } finally {
+         setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Pembatalan Kegiatan",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disable}
-                     category="cancel"
-                     onPress={() => {
-                        handleCancel();
-                     }}
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disable || loading}
+               //       category="cancel"
+               //       onPress={() => {
+               //          handleCancel();
+               //       }}
+               //    />
+               // ),
+               header: () => (
+                  <AppHeader
+                     title="Pembatalan Kegiatan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disable || loading}
+                           category="cancel"
+                           onPress={() => {
+                              handleCancel();
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <View style={[Styles.p15]}>
                <InputForm
                   label="Alasan Pembatalan"
                   type="default"
                   placeholder="Alasan Pembatalan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   error={error}
                   errorText="Alasan pembatalan harus diisi"
                   onChange={(val) => onValidation(val)}
+                  multiline
                />
             </View>
          </ScrollView>