feat: tambah pengecekan villageIsActive saat desa dinonaktifkan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1,72 @@
+# 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
+
+### Routing (Expo Router — file-based)
+
+- `app/index.tsx` — Login/splash (public); OTP verification is handled inline via `components/auth/viewVerification.tsx` (not a separate route)
+- `app/(application)/` — All authenticated screens; Expo Router enforces auth guard here
+- Deep-link navigation is handled by `lib/pushToPage.ts`, which maps notification payloads to routes
+
+### State Management (three layers)
+
+1. **Context** (`providers/`) — Auth (token encryption/decryption via CryptoES.AES), Theme (light/dark, persisted to AsyncStorage), and React Query client
+2. **Redux Toolkit** (`lib/store.ts` + slices) — Feature-level state for CRUD operations. Slices follow a naming pattern: `*Slice.ts` for read state, `*Update.ts`/`*Create.ts` for mutation state
+3. **TanStack React Query** — All server data fetching; configured with 5-min stale time, 24-hour cache retention, 2 retries, and AsyncStorage persistence for offline support
+
+### API Layer (`lib/api.ts`)
+
+Single 773-line file defining 50+ Axios-based endpoints. The Axios instance reads `baseURL` from `Constants.expoConfig.extra.URL_API` (set in `.env` via `app.config.js`). Authentication uses Bearer tokens in headers. File uploads use `FormData` with `multipart/form-data`.
+
+Three separate backend services are integrated:
+- **REST API** (axios) — main business logic
+- **WhatsApp server** — OTP delivery (separate token in `.env`)
+- **Firebase** — real-time database (`lib/firebaseDatabase.ts`) and push notifications (`lib/useNotification.ts`, `lib/registerForPushNotificationsAsync.ts`)
+
+### Providers Initialization Order
+
+`app/_layout.tsx` wraps the app in: `ErrorBoundary` → `NotifierWrapper` → `ThemeProvider` → `QueryProvider` → `AuthProvider` → navigation stack. Redux `store` is provided inside `app/(application)/_layout.tsx`, not at the root.
+
+### Error Boundary
+
+`components/ErrorBoundary.tsx` is a class component (required by React) wrapping the entire app. It uses React Native's built-in `Text` — **do not replace it with the custom `components/Text.tsx`** as that pulls in `ThemeProvider` → `AsyncStorage`, which breaks Jest tests.
+
+Tests for ErrorBoundary live in `__tests__/ErrorBoundary-test.tsx` and use `@testing-library/react-native`.
+
+## Key Conventions
+
+**Imports:** Use `@/` alias (maps to project root, configured in `tsconfig.json`). Never use relative paths like `../../`.
+
+**Utility functions:** Prefixed with `fun_` (e.g., `lib/fun_stringToDate.ts`, `lib/fun_validateName.ts`).
+
+**Styling:** Use theme-aware colors from `useTheme()` hook. Global `StyleSheet` definitions live in `constants/Styles.ts`. Color tokens are in `constants/Colors.ts` with explicit `light`/`dark` variants.
+
+**Component structure:** Feature-specific subdirectories under `components/` (e.g., `components/announcement/`) typically contain a header component alongside list/card components for that feature.
+
+**Environment config:** All env vars are declared in `.env`, exposed through `app.config.js` `extra` field, and accessed via `Constants.expoConfig.extra.*` or the `constants/ConstEnv.ts` wrapper.
+
+**EAS builds:** Profiles are `development`, `preview`, and `production` in `eas.json`. Production builds auto-increment the app version via the `bump` script.

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

@@ -1,334 +1,249 @@
-# Panduan Penggunaan Aplikasi Desa+
+# Panduan Aplikasi Desa+
 
 ## Daftar Isi
+
 1. [Gambaran Umum Aplikasi](#gambaran-umum-aplikasi)
-2. [Fitur-fitur Utama](#fitur-fitur-utama)
-3. [User Roles dan Hak Akses](#user-roles-dan-hak-akses)
-4. [Petunjuk Penggunaan](#petunjuk-penggunaan)
-5. [Troubleshooting](#troubleshooting)
+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 membantu pengelolaan dan komunikasi di lingkungan desa/kelurahan. Aplikasi ini menyediakan berbagai fitur untuk memudahkan administrasi desa, komunikasi antar warga, dan pengelolaan informasi penting.
+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
 
-## Fitur-fitur Utama
+## 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
-- **Cara menggunakan:**
-  1. Masukkan nomor telepon yang terdaftar
-  2. Klik "Kirim OTP"
-  3. Masukkan kode OTP yang diterima melalui WhatsApp
-  4. Klik "Verifikasi" untuk masuk ke aplikasi
 
 ### 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 dokumen
-  - Daftar kegiatan terbaru
+  - Grafik jumlah dokumen
+  - Daftar kegiatan terupdate
   - Daftar divisi aktif
   - Daftar acara mendatang
   - Diskusi terbaru
 
-### 3. Pengumuman
-**Deskripsi:** Fitur untuk membuat, melihat, dan mengelola pengumuman desa
-- **Fungsi:** Menyebarkan informasi penting kepada seluruh warga
-- **Siapa yang bisa mengakses:** 
-  - Pembuatan/Edit/Hapus: Super Admin, Admin, Deputy Super Admin
-  - Melihat: Semua pengguna
-- **Cara menggunakan:**
-  1. Pilih menu "Pengumuman" dari fitur utama
-  2. Untuk membuat pengumuman baru, klik tombol "+" di kanan atas
-  3. Isi judul dan deskripsi pengumuman
-  4. Pilih grup yang akan menerima pengumuman (opsional)
-  5. Klik "Simpan" untuk menerbitkan
+### 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
 
-### 4. Diskusi Umum
-**Deskripsi:** Forum diskusi untuk komunikasi antar warga dan pihak pengelola
 - **Fungsi:** Tempat berdiskusi mengenai berbagai topik yang berkaitan dengan desa
 - **Siapa yang bisa mengakses:**
-  - Pembuatan/Edit/Hapus: Super Admin, Admin, Deputy Super Admin
+  - Pembuatan/Edit/Hapus: Super Admin, Wakil Super Admin, Admin
   - Melihat: Semua pengguna
-  - Berkomentar: Semua pengguna
-- **Cara menggunakan:**
-  1. Pilih menu "Diskusi" dari fitur utama
-  2. Untuk membuat diskusi baru, klik tombol "+" di kanan atas
-  3. Isi judul dan deskripsi diskusi
-  4. Pilih anggota yang akan menjadi partisipan
-  5. Klik "Simpan" untuk membuat diskusi
-  6. Klik pada judul diskusi untuk membuka dan memberikan komentar
+  - Berkomentar: Pengguna terpilih
+
+### 11. Kegiatan/Proyek
 
-### 5. 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: Super Admin, Admin, Deputy Super Admin
+  - 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 (Buka/Tutup): Berdasarkan hak akses
 - **Status Kegiatan:**
   - Segera: Proyek yang akan segera dimulai
   - Dikerjakan: Proyek yang sedang dalam proses pengerjaan
   - Selesai: Proyek yang telah selesai
   - Batal: Proyek yang dibatalkan
-- **Cara menggunakan:**
-  1. Pilih menu "Kegiatan" dari fitur utama
-  2. Untuk membuat kegiatan baru, klik tombol "+" di kanan atas
-  3. Isi nama kegiatan dan deskripsi
-  4. Pilih tahun pelaksanaan
-  5. Tambahkan anggota yang terlibat
-  6. Klik "Simpan" untuk membuat kegiatan
 
-### 6. Divisi
-**Deskripsi:** Fitur untuk mengelola struktur organisasi desa berdasarkan divisi
-- **Fungsi:** Mengorganisir warga dan tugas-tugas berdasarkan divisi-divisi tertentu
+### 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, Admin, Deputy Super Admin
-  - Melihat: Semua pengguna
-  - Anggota: Berdasarkan divisi yang diikuti
-- **Cara menggunakan:**
-  1. Pilih menu "Divisi" dari fitur utama
-  2. Untuk membuat divisi baru, klik tombol "+" di kanan atas
-  3. Isi nama dan deskripsi divisi
-  4. Pilih grup induk (jika ada)
-  5. Tambahkan anggota dan admin divisi
-  6. Klik "Simpan" untuk membuat divisi
-  7. Klik pada nama divisi untuk melihat detail dan fitur dalam divisi tersebut
+  - 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
 
-### 7. Anggota
-**Deskripsi:** Fitur untuk mengelola data warga atau anggota desa
-- **Fungsi:** Menyimpan dan mengelola informasi tentang warga desa
+### 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, Admin, Deputy Super Admin
+  - 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
-- **Cara menggunakan:**
-  1. Pilih menu "Anggota" dari fitur utama
-  2. Gunakan fitur pencarian untuk menemukan anggota tertentu
-  3. Gunakan filter untuk menampilkan anggota aktif/tidak aktif
-  4. Klik pada nama anggota untuk melihat detail profil
-  5. Untuk menambah anggota baru, klik tombol "+" di kanan atas
 
-### 8. Jabatan
-**Deskripsi:** Fitur untuk mengelola posisi atau jabatan dalam organisasi desa
-- **Fungsi:** Mendefinisikan struktur jabatan dalam lembaga desa
-- **Siapa yang bisa mengakses:**
-  - Pembuatan/Edit/Hapus: Super Admin, Admin, Deputy Super Admin
-  - Melihat: Semua pengguna
-- **Cara menggunakan:**
-  1. Pilih menu "Jabatan" dari fitur utama
-  2. Gunakan fitur pencarian untuk menemukan jabatan tertentu
-  3. Gunakan filter untuk menampilkan jabatan aktif/tidak aktif
-  4. Untuk menambah jabatan baru, klik tombol "+" di kanan atas
+### 14. Diskusi Divisi
 
-### 9. 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, Developer
-  - Melihat: Semua pengguna
-- **Cara menggunakan:**
-  1. Pilih menu "Lembaga Desa" dari fitur utama
-  2. Gunakan fitur pencarian untuk menemukan lembaga tertentu
-  3. Gunakan filter untuk menampilkan lembaga aktif/tidak aktif
-  4. Untuk menambah lembaga baru, klik tombol "+" di kanan atas
-
-### 10. Diskusi Divisi
 **Deskripsi:** Forum diskusi khusus untuk masing-masing divisi
+
 - **Fungsi:** Tempat berdiskusi secara internal dalam divisi
-- **Siapa yang bisa mengakses:** Hanya anggota divisi yang bersangkutan
-- **Cara menggunakan:**
-  1. Pilih sebuah divisi dari menu "Divisi"
-  2. Pilih submenu "Diskusi Divisi"
-  3. Klik tombol "+" untuk membuat diskusi baru
-  4. Isi judul dan deskripsi diskusi
-  5. Klik "Simpan" untuk membuat diskusi
+- **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
 
-### 11. 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:** Hanya anggota divisi yang bersangkutan
-- **Cara menggunakan:**
-  1. Pilih sebuah divisi dari menu "Divisi"
-  2. Pilih submenu "Tugas Divisi"
-  3. Klik tombol "+" untuk membuat tugas baru
-  4. Isi nama tugas dan detail lainnya
-  5. Tambahkan anggota yang bertugas
-  6. Klik "Simpan" untuk membuat tugas
+- **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
 
-### 12. Dokumen
-**Deskripsi:** Sistem manajemen dokumen untuk menyimpan dan mengelola file-file desa
-- **Fungsi:** Menyimpan dokumen penting dalam struktur folder
-- **Siapa yang bisa mengakses:** Akses berdasarkan divisi dan hak akses
-- **Cara menggunakan:**
-  1. Pilih sebuah divisi dari menu "Divisi"
-  2. Pilih submenu "Dokumen"
-  3. Buat folder baru atau upload file
-  4. Gunakan fitur share untuk membagikan dokumen ke divisi lain
+### 16. Dokumen Divisi
 
-### 13. Kalender/Acara
-**Deskripsi:** Fitur untuk menjadwalkan dan mengelola acara-acara desa
-- **Fungsi:** Menjadwalkan kegiatan dan acara penting desa
-- **Siapa yang bisa mengakses:** Hanya anggota divisi yang bersangkutan
-- **Cara menggunakan:**
-  1. Pilih sebuah divisi dari menu "Divisi"
-  2. Pilih submenu "Kalender"
-  3. Klik tombol "+" untuk membuat acara baru
-  4. Isi detail acara (judul, deskripsi, tanggal, waktu)
-  5. Tambahkan anggota yang ikut serta
-  6. Klik "Simpan" untuk membuat acara
+**Deskripsi:** Sistem manajemen dokumen untuk menyimpan dan mengelola file-file disetiap divisi
 
-### 14. 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
-- **Cara menggunakan:**
-  1. Klik ikon notifikasi di bagian atas layar
-  2. Lihat daftar notifikasi yang belum dibaca
-  3. Klik pada notifikasi untuk membuka konten terkait
+- **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
 
-### 15. Profil
-**Deskripsi:** Fitur untuk melihat dan mengedit informasi pribadi pengguna
-- **Fungsi:** Menampilkan dan mengelola informasi akun pengguna
-- **Siapa yang bisa mengakses:** Pengguna yang bersangkutan
-- **Cara menggunakan:**
-  1. Klik menu "Profil" dari navigasi bawah
-  2. Lihat informasi pribadi
-  3. Klik "Edit" untuk mengubah informasi (tidak tersedia untuk developer)
+### 17. Kalender/Acara Divisi
 
-### 16. 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, Deputy Super Admin, Developer
-- **Cara menggunakan:**
-  1. Pilih menu "Banner" dari fitur utama (jika tersedia)
-  2. Klik tombol "+" untuk membuat banner baru
-  3. Upload gambar banner dan isi deskripsi
-  4. Klik "Simpan" untuk menerbitkan banner
+**Deskripsi:** Fitur untuk menjadwalkan dan mengelola acara-acara desa disetiap divisi
 
-## User Roles dan Hak Akses
-
-Aplikasi Desa+ memiliki sistem hierarki peran pengguna sebagai berikut:
-
-### 1. Developer
-- **Deskripsi:** Peran tertinggi dengan semua hak akses
-- **Hak akses:**
-  - Semua fitur dan fungsi dalam aplikasi
-  - Manajemen semua data dan pengaturan sistem
-
-### 2. Super Admin (Supadmin)
-- **Deskripsi:** Administrator utama desa
-- **Hak akses:**
-  - Semua fitur kecuali beberapa fungsi sistem tingkat tinggi
-  - Manajemen Deputy Super Admin, Admin, Co-Admin, dan User
-  - Akses ke semua data dan fungsi administratif
-
-### 3. Deputy Super Admin (Cosupadmin)
-- **Deskripsi:** Wakil administrator utama
-- **Hak akses:**
-  - Manajemen Admin, Co-Admin, dan User
-  - Akses ke sebagian besar fitur administratif
-  - Dapat mengelola banner
-
-### 4. Admin
-- **Deskripsi:** Administrator tingkat menengah
-- **Hak akses:**
-  - Manajemen Co-Admin dan User
-  - Akses ke fitur-fitur administratif dasar
-  - Tidak dapat mengelola Deputy Super Admin dan Super Admin
-
-### 5. Deputy Admin (Coadmin)
-- **Deskripsi:** Wakil administrator
-- **Hak akses:**
-  - Manajemen User
-  - Akses terbatas ke fitur-fitur administratif
-  - Tidak dapat mengelola Admin ke atas
-
-### 6. User
-- **Deskripsi:** Pengguna biasa
-- **Hak akses:**
-  - Akses ke fitur-fitur umum
-  - Tidak dapat mengelola pengguna lain
-  - Tidak dapat mengakses fungsi administratif
-
-## Petunjuk Penggunaan
-
-### Login ke Aplikasi
-1. Buka aplikasi Desa+
-2. Masukkan nomor telepon yang terdaftar
-3. Klik "Kirim OTP"
-4. Cek WhatsApp untuk menerima kode OTP
-5. Masukkan kode OTP yang diterima
-6. Klik "Verifikasi" untuk masuk ke aplikasi
-
-### Navigasi Utama
-- **Home:** Tampilan utama dengan informasi dan akses cepat
-- **Fitur:** Menu utama untuk mengakses semua fitur aplikasi
-- **Pencarian:** Mencari konten di seluruh aplikasi
-- **Notifikasi:** Melihat pemberitahuan penting
-- **Profil:** Informasi akun dan pengaturan pribadi
-
-### Membuat Pengumuman Baru
-1. Pilih menu "Fitur" dari navigasi bawah
-2. Klik "Pengumuman"
-3. Klik tombol "+" di kanan atas
-4. Isi judul dan deskripsi pengumuman
-5. Pilih grup sasaran (opsional)
-6. Klik "Simpan"
-
-### Bergabung dalam Diskusi
-1. Pilih menu "Fitur" dari navigasi bawah
-2. Klik "Diskusi"
-3. Pilih diskusi yang ingin diikuti
-4. Ketik komentar di kotak bawah
-5. Klik "Kirim" untuk mengirim komentar
-
-### Mengelola Divisi
-1. Pilih menu "Fitur" dari navigasi bawah
-2. Klik "Divisi"
-3. Klik pada nama divisi untuk melihat detail
-4. Di dalam detail divisi, Anda dapat mengakses:
-   - Tugas Divisi
-   - Dokumen Divisi
-   - Diskusi Divisi
-   - Kalender 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)
 
-### Notifikasi Tidak Muncul
-- Pastikan izin notifikasi diaktifkan di pengaturan aplikasi
-- Pastikan aplikasi tetap berjalan di latar belakang
-
-### Gambar Tidak Muncul
-- Periksa koneksi internet
-- Coba refresh halaman atau restart aplikasi
-
 ### 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 administrator desa atau tim pengembang aplikasi.
-
----
-*Dokumen ini terakhir diperbarui pada 4 Februari 2026*
+Jika Anda mengalami masalah atau memiliki pertanyaan tentang penggunaan aplikasi, silakan hubungi tim pengembang aplikasi.

README.md

@@ -1,6 +1,6 @@
 # Desa+
 
-Desa+ 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.
+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.
 
 ## Fitur Utama
 

__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 6
-        versionName "1.0.2"
+        versionCode 16
+        versionName "2.1.0"
     }
     signingConfigs {
         debug {

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>

app.config.js

@@ -4,7 +4,7 @@ export default {
    expo: {
       name: "Desa+",
       slug: "mobile-darmasaba",
-      version: "2.0.5", // Versi aplikasi (App Store)
+      version: "2.1.0", // Versi aplikasi (App Store)
       jsEngine: "jsc",
       orientation: "portrait",
       icon: "./assets/images/logo-icon-small.png",
@@ -14,7 +14,7 @@ export default {
       ios: {
          supportsTablet: true,
          bundleIdentifier: "mobiledarmasaba.app",
-         buildNumber: "7",
+         buildNumber: "9",
          infoPlist: {
             ITSAppUsesNonExemptEncryption: false,
             CFBundleDisplayName: "Desa+"
@@ -23,7 +23,7 @@ export default {
       },
       android: {
          package: "mobiledarmasaba.app",
-         versionCode: 15,
+         versionCode: 16,
          adaptiveIcon: {
             foregroundImage: "./assets/images/logo-icon-small.png",
             backgroundColor: "#ffffff"
@@ -79,6 +79,14 @@ export default {
          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 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,28 +9,106 @@ import HeaderRightPositionList from "@/components/position/headerRightPositionLi
 import HeaderRightProjectList from "@/components/project/headerProjectList";
 import Text from "@/components/Text";
 import ToastCustom from "@/components/toastCustom";
-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 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 } from "react";
-import { Easing, Notifier } from 'react-native-notifier';
+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('')
+
+   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 {
-         if (title != "Komentar Baru") {
+         if (title !== "Komentar Baru") {
             const hasil = await decryptToken(String(token?.current))
-            const response = await apiReadOneNotification({ user: hasil, id: id })
+            await apiReadOneNotification({ user: hasil, id: id })
          }
          pushToPage(category, idContent)
       } catch (error) {
@@ -65,12 +144,34 @@ export default function RootLayout() {
             } else if (pathname !== `/${category}/${content}`) {
                Notifier.showNotification({
                   title: title,
-                  description: remoteMessage.notification?.body,
+                  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,
+                     },
+                  }
                });
             }
          }
@@ -93,18 +194,15 @@ export default function RootLayout() {
          <Stack screenOptions={{
             headerShown: true,
             animation: "slide_from_right",
-
-            // ⬇️ PENTING BANGET
             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',
                header: () => (
@@ -112,11 +210,19 @@ export default function RootLayout() {
                )
             }} />
             <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}
@@ -126,10 +232,8 @@ export default function RootLayout() {
                )
             }} />
             <Stack.Screen name="discussion/index" options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Diskusi Umum',
                headerTitleAlign: 'center',
-               // headerRight: () => <HeaderDiscussionGeneral />
                header: () => (
                   <AppHeader
                      title="Diskusi Umum"
@@ -140,10 +244,8 @@ export default function RootLayout() {
                )
             }} />
             <Stack.Screen name="project/index" options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Kegiatan',
                headerTitleAlign: 'center',
-               // headerRight: () => <HeaderRightProjectList />
                header: () => (
                   <AppHeader title="Kegiatan"
                      showBack={true}
@@ -153,10 +255,8 @@ export default function RootLayout() {
                )
             }} />
             <Stack.Screen name="division/index" options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Divisi',
                headerTitleAlign: 'center',
-               // headerRight: () => <HeaderRightDivisionList />
                header: () => (
                   <AppHeader title="Divisi"
                      showBack={true}
@@ -167,10 +267,8 @@ export default function RootLayout() {
             }} />
             <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}
@@ -180,10 +278,8 @@ export default function RootLayout() {
                )
             }} />
             <Stack.Screen name="position/index" options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Jabatan',
                headerTitleAlign: 'center',
-               // headerRight: () => <HeaderRightPositionList />
                header: () => (
                   <AppHeader title="Jabatan"
                      showBack={true}
@@ -194,10 +290,8 @@ export default function RootLayout() {
             }} />
             <Stack.Screen name="announcement/index"
                options={{
-                  // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                   headerTitle: 'Pengumuman',
                   headerTitleAlign: 'center',
-                  // headerRight: () => <HeaderRightAnnouncementList />
                   header: () => (
                      <AppHeader title="Pengumuman"
                         showBack={true}
@@ -210,6 +304,13 @@ export default function RootLayout() {
          </Stack>
          <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

@@ -3,11 +3,13 @@ import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 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 { useTheme } from "@/providers/ThemeProvider";
 import { Entypo, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
@@ -51,6 +53,7 @@ interface ApiResponse {
 export default function DetailAnnouncement() {
    const { id } = useLocalSearchParams<{ id: string }>();
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [data, setData] = useState<AnnouncementData>({ id: '', title: '', desc: '' })
    const [dataMember, setDataMember] = useState<Record<string, MemberData[]>>({})
    const [dataFile, setDataFile] = useState<FileData[]>([])
@@ -63,6 +66,7 @@ export default function DetailAnnouncement() {
    const [loadingOpen, setLoadingOpen] = useState(false)
    const [preview, setPreview] = useState(false)
    const [chooseFile, setChooseFile] = useState<FileData>()
+   const [isError, setIsError] = useState(false)
 
    /**
     * Opens the image preview modal for the selected image file
@@ -77,6 +81,7 @@ export default function DetailAnnouncement() {
 
    async function handleLoad(loading: boolean) {
       try {
+         setIsError(false)
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response: ApiResponse = await apiGetAnnouncementOne({ id: id, user: hasil })
@@ -85,11 +90,15 @@ export default function DetailAnnouncement() {
             setDataMember(response.member)
             setDataFile(response.file)
          } else {
+            setIsError(true)
             Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal mengambil data' })
+      } 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)
       }
@@ -175,7 +184,7 @@ export default function DetailAnnouncement() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -193,112 +202,119 @@ export default function DetailAnnouncement() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={() => handleRefresh()}
+                  tintColor={colors.icon}
                />
             }
          >
-            <View style={[Styles.p15, Styles.mb50]}>
-               <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>
-                           </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} />
-                        </View>
-                        :
-                        <>
-                           <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
-                              <MaterialIcons name="campaign" size={25} color="black" style={[Styles.mr05]} />
-                              <Text style={[Styles.textDefaultSemiBold, Styles.w90, Styles.mt02]}>{data?.title}</Text>
-                           </View>
-                           <View style={[Styles.mt10]}>
-                              {
-                                 hasHtmlTags(data?.desc) ?
-                                    <RenderHTML
-                                       contentWidth={contentWidth}
-                                       source={{ html: data?.desc }}
-                                       baseStyle={{ color: 'black' }}
-                                    />
-                                    :
-                                    <Text>{data?.desc}</Text>
-                              }
-                           </View>
-                        </>
-                  }
-
+            {isError && !loading ? (
+               <View style={[Styles.mv50]}>
+                  <ErrorView />
                </View>
-               {
-                  dataFile.length > 0 && (
-                     <View style={[Styles.wrapPaper, Styles.mt10]}>
-                        <View style={[Styles.mb05]}>
-                           <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                        </View>
-                        {dataFile.map((item, index) => (
-                           <BorderBottomItem
-                              key={`${item.id}-${index}`}
-                              borderType="bottom"
-                              icon={<MaterialCommunityIcons
-                                 name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
-                                 size={25}
-                                 color="black"
-                              />}
-                              title={item.name + '.' + item.extension}
-                              titleWeight="normal"
-                              onPress={() => {
-                                 isImageFile(item.extension) ?
-                                    handleChooseFile(item)
-                                    : openFile(item)
-                              }}
-                           />
-                        ))}
-                     </View>
-                  )
-               }
-               <View style={[Styles.wrapPaper, Styles.mt10]}>
-                  {
-                     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} />
+            ) : (
+               <View style={[Styles.p15, Styles.mb50]}>
+                  <View style={[Styles.wrapPaper, Styles.borderAll, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                     {
+                        loading ?
+                           <View>
+                              <View style={[Styles.rowOnly]}>
+                                 <Skeleton width={30} height={30} borderRadius={10} />
+                                 <View style={[Styles.flex1, Styles.ph05]}>
+                                    <Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
+                                 </View>
                               </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>
+                              <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} />
+                           </View>
+                           :
+                           <>
+                              <View style={[Styles.rowOnly, Styles.alignStart]}>
+                                 <MaterialIcons name="campaign" size={25} color={colors.text} style={[Styles.mr05]} />
+                                 <Text style={[Styles.textDefaultSemiBold, Styles.w90, Styles.mt02]}>{data?.title}</Text>
+                              </View>
+                              <View style={[Styles.mt10]}>
                                  {
-                                    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>
-                                          </View>
-                                       )
-                                    })
+                                    hasHtmlTags(data?.desc) ?
+                                       <RenderHTML
+                                          contentWidth={contentWidth}
+                                          source={{ html: data?.desc }}
+                                          baseStyle={{ color: colors.text }}
+                                       />
+                                       :
+                                       <Text>{data?.desc}</Text>
                                  }
-
                               </View>
-                           )
-                        })
+                           </>
+                     }
+
+                  </View>
+                  {
+                     dataFile.length > 0 && (
+                        <View style={[Styles.wrapPaper, Styles.borderAll, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                           <View style={[Styles.mb05]}>
+                              <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                           </View>
+                           {dataFile.map((item, index) => (
+                              <BorderBottomItem
+                                 key={`${item.id}-${index}`}
+                                 borderType={index === dataFile.length - 1 ? 'none' : 'bottom'}
+                                 icon={<MaterialCommunityIcons
+                                    name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
+                                    size={25}
+                                    color={colors.text}
+                                 />}
+                                 title={item.name + '.' + item.extension}
+                                 titleWeight="normal"
+                                 onPress={() => {
+                                    isImageFile(item.extension) ?
+                                       handleChooseFile(item)
+                                       : openFile(item)
+                                 }}
+                              />
+                           ))}
+                        </View>
+                     )
                   }
+                  <View style={[Styles.wrapPaper, Styles.borderAll, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                     {
+                        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} />
+                                 </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={colors.text} />
+                                                <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
+                                             </View>
+                                          )
+                                       })
+                                    }
+
+                                 </View>
+                              )
+                           })
+                     }
+                  </View>
                </View>
-            </View>
+            )}
          </ScrollView>
 
          <ImageViewing
@@ -315,7 +331,7 @@ export default function DetailAnnouncement() {
                      accessibilityRole="button"
                      accessibilityLabel="Close image viewer"
                   >
-                     <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
+                     <Text style={[Styles.textWhite, Styles.font26]}>✕</Text>
                   </Pressable>
 
                   {/* MENU */}
@@ -325,17 +341,17 @@ export default function DetailAnnouncement() {
                      accessibilityLabel="Download or share image"
                      disabled={loadingOpen}
                   >
-                     <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 22 }}>⋯</Text>
+                     <Text style={[{ color: loadingOpen ? 'gray' : 'white' }, Styles.font26]}>⋯</Text>
                   </Pressable>
                </View>
             )}
             FooterComponent={({ imageIndex }) => (
-               <View style={{
-                  paddingBottom: 20,
-                  paddingHorizontal: 16,
-                  alignItems: 'center',
-               }}>
-                  <Text style={{ color: 'white', fontSize: 16 }}>{chooseFile?.name}.{chooseFile?.extension}</Text>
+               <View style={[
+                  Styles.pb20,
+                  Styles.ph16,
+                  Styles.alignCenter,
+               ]}>
+                  <Text style={[Styles.textWhite, Styles.font16]}>{chooseFile?.name}.{chooseFile?.extension}</Text>
                </View>
             )}
          />

app/(application)/announcement/create.tsx

@@ -4,7 +4,7 @@ import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
-import LoadingOverlay from "@/components/loadingOverlay";
+import LoadingCenter from "@/components/loadingCenter";
 import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from "@/components/Text";
@@ -12,11 +12,12 @@ import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiCreateAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import React, { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -24,6 +25,7 @@ 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>([])
@@ -93,17 +95,21 @@ export default function CreateAnnouncement() {
 
          const response = await apiCreateAnnouncement(fd)
 
-         // const response = await apiCreateAnnouncement({
-         //    data: { ...dataForm, user: hasil, groups: divisionMember },
-         // });
-
          if (response.success) {
             dispatch(setUpdateAnnouncement(!update))
             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);
+         const message = error?.response?.data?.message || "Tidak dapat terhubung ke server"
+
+         Toast.show({
+            type: 'small',
+            text1: message
+         })
       } finally {
          setLoading(false)
       }
@@ -129,7 +135,7 @@ export default function CreateAnnouncement() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,24 +164,24 @@ export default function CreateAnnouncement() {
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
-                           <ButtonSaveHeader
-                              disable={disableBtn || divisionMember.length == 0 || loading ? true : false}
-                              category="create"
-                              onPress={() => {
-                                 divisionMember.length == 0
-                                    ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
-                                    : handleCreate();
-                              }}
-                           />
+                        <ButtonSaveHeader
+                           disable={disableBtn || divisionMember.length == 0 || loading ? true : false}
+                           category="create"
+                           onPress={() => {
+                              divisionMember.length == 0
+                                 ? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
+                                 : handleCreate();
+                           }}
+                        />
                      }
                   />
                )
             }}
          />
-         <LoadingOverlay visible={loading} />
+         {loading && <LoadingCenter />}
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -184,6 +190,7 @@ export default function CreateAnnouncement() {
                   placeholder="Judul Pengumuman"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul harus diisi"
                   onChange={(val) => validationForm("title", val)}
                />
@@ -193,6 +200,7 @@ export default function CreateAnnouncement() {
                   placeholder="Deskripsi Pengumuman"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Pengumuman harus diisi"
                   onChange={(val) => validationForm("desc", val)}
                   multiline
@@ -201,21 +209,27 @@ export default function CreateAnnouncement() {
                {
                   fileForm.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                     {
-                        fileForm.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        <Text style={[Styles.textDefault]}>{fileForm.length} file</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, Styles.mb10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           fileForm.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={fileForm.length - 1 == index ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name}
+                                 bgColor="transparent"
+                                 titleWeight="normal"
+                                 onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                     </View>
+                  </>
                }
 
                <ButtonSelect
@@ -228,25 +242,30 @@ export default function CreateAnnouncement() {
                {
                   divisionMember.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                     {
-                        divisionMember.map((item: { name: any; Division: any }, index: any) => {
-                           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.w90]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
-                                          <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
-                                       </View>
-                                    ))
-                                 }
-                              </View>
-                           )
-                        })
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>Divisi</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           divisionMember.map((item: { name: any; Division: any }, index: any) => {
+                              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.w90]}>
+                                             <Entypo name="dot-single" size={24} color={colors.text} />
+                                             <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
+                                          </View>
+                                       ))
+                                    }
+                                 </View>
+                              )
+                           })
+                        }
+                     </View>
+                  </>
                }
             </View>
          </ScrollView>
@@ -266,7 +285,7 @@ export default function CreateAnnouncement() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} 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) }}
                />
@@ -276,15 +295,4 @@ export default function CreateAnnouncement() {
    );
 }
 
-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

@@ -4,7 +4,7 @@ import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
-import LoadingOverlay from "@/components/loadingOverlay";
+import LoadingCenter from "@/components/loadingCenter";
 import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from '@/components/Text';
@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -35,6 +36,7 @@ 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>([]);
@@ -142,9 +144,14 @@ export default function EditAnnouncement() {
             dispatch(setUpdateAnnouncement(!update))
             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);
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -180,7 +187,7 @@ export default function EditAnnouncement() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -223,10 +230,10 @@ export default function EditAnnouncement() {
                )
             }}
          />
-         <LoadingOverlay visible={loading} />
+         {loading && <LoadingCenter />}
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -235,6 +242,7 @@ export default function EditAnnouncement() {
                   placeholder="Judul Pengumuman"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul harus diisi"
                   onChange={(val) => validationForm("title", val)}
                   value={dataForm.title}
@@ -245,6 +253,7 @@ export default function EditAnnouncement() {
                   placeholder="Deskripsi Pengumuman"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Pengumuman harus diisi"
                   onChange={(val) => validationForm("desc", val)}
                   value={dataForm.desc}
@@ -254,33 +263,40 @@ export default function EditAnnouncement() {
                {
                   (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                     {
-                        dataFile.filter((val) => !val.delete).map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name + '.' + item.extension}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                     {
-                        fileForm.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        <Text style={[Styles.textDefault]}>{fileForm.length + dataFile.filter((val) => !val.delete).length} file</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, Styles.mb10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           dataFile.filter((val) => !val.delete).map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={dataFile.filter((val) => !val.delete).length - 1 == index && fileForm.length == 0 ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name + '.' + item.extension}
+                                 titleWeight="normal"
+                                 bgColor="transparent"
+                                 onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                        {
+                           fileForm.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={fileForm.length - 1 == index ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name}
+                                 titleWeight="normal"
+                                 bgColor="transparent"
+                                 onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                     </View>
+                  </>
                }
                <ButtonSelect
                   value="Pilih divisi penerima pengumuman"
@@ -291,25 +307,30 @@ export default function EditAnnouncement() {
                {
                   dataMember.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
-                     {
-                        dataMember.map((item: { name: any; Division: any }, index: any) => {
-                           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.w90]}>
-                                          <Entypo name="dot-single" size={24} color="black" />
-                                          <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
-                                       </View>
-                                    ))
-                                 }
-                              </View>
-                           )
-                        })
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>Divisi</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           dataMember.map((item: { name: any; Division: any }, index: any) => {
+                              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.w90]}>
+                                             <Entypo name="dot-single" size={24} color={colors.text} />
+                                             <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
+                                          </View>
+                                       ))
+                                    }
+                                 </View>
+                              )
+                           })
+                        }
+                     </View>
+                  </>
                }
             </View>
          </ScrollView>
@@ -330,7 +351,7 @@ export default function EditAnnouncement() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} 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.id, indexDelFile.cat) }}
                />

app/(application)/announcement/index.tsx

@@ -2,13 +2,14 @@ import BorderBottomItem from "@/components/borderBottomItem";
 import InputSearch from "@/components/inputSearch";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from '@/components/Text';
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncement } from "@/lib/api";
 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 { useEffect, useMemo, useState } from "react";
 import { RefreshControl, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -19,88 +20,81 @@ type Props = {
    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)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   // TanStack Query Infinite Query
+   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: 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 response = await apiGetAnnouncement({
+            user: hasil,
+            search: search,
+            page: pageParam
+         })
+         return response.data
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.length > 0 ? allPages.length + 1 : undefined
+      },
+   })
 
+   // Trigger refetch when Redux state 'update' changes
    useEffect(() => {
-      handleLoad(false, 1)
-   }, [update])
+      refetch()
+   }, [update, refetch])
 
-   useEffect(() => {
-      handleLoad(true, 1)
-   }, [search])
+   // Flatten data from pages
+   const flattenedData = useMemo(() => {
+      return data?.pages.flat() || []
+   }, [data])
 
    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)
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
    };
 
    const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      title: data[index].title,
-      desc: data[index].desc,
-      createdAt: data[index].createdAt,
+      id: flattenedData[index].id,
+      title: flattenedData[index].title,
+      desc: flattenedData[index].desc,
+      createdAt: flattenedData[index].createdAt,
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             <InputSearch onChange={setSearch} />
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt05]}>
             {
-               loading ?
+               isLoading && !flattenedData.length ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonContent key={index} />
                      )
                   })
                   :
-                  data.length > 0
+                  flattenedData.length > 0
                      ?
                      <VirtualizedList
-                        data={data}
-                        getItemCount={() => data.length}
+                        data={flattenedData}
+                        getItemCount={() => flattenedData.length}
                         getItem={getItem}
                         renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
@@ -108,10 +102,9 @@ export default function Announcement() {
                                  key={index}
                                  onPress={() => { router.push(`/announcement/${item.id}`) }}
                                  borderType="bottom"
+                                 bgColor="transparent"
                                  icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialIcons name="campaign" size={25} color={'#384288'} />
-                                    </View>
+                                    <MaterialIcons name="campaign" size={25} color={colors.text} />
                                  }
                                  title={item.title}
                                  desc={item.desc.replace(/<[^>]*>?/gm, '').replace(/\r?\n|\r/g, ' ')}
@@ -119,19 +112,20 @@ export default function Announcement() {
                               />
                            )
                         }}
-                        keyExtractor={(item, index) => String(index)}
+                        keyExtractor={(item, index) => String(item.id || index)}
                         onEndReached={loadMoreData}
                         onEndReachedThreshold={0.5}
                         showsVerticalScrollIndicator={false}
                         refreshControl={
                            <RefreshControl
-                              refreshing={refreshing}
-                              onRefresh={handleRefresh}
+                              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, { color: colors.dimmed }]}>Tidak ada pengumuman</Text>
             }
          </View>
       </View>

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

@@ -1,12 +1,14 @@
 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";
@@ -24,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 }
@@ -103,16 +106,18 @@ 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: () => (
@@ -143,7 +148,8 @@ export default function EditBanner() {
                )
             }}
          />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.mb15]}>
                   {selectedImage != undefined ? (
@@ -154,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>
                   ) : (
@@ -163,7 +169,7 @@ 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]}>
@@ -179,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 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
@@ -85,36 +88,22 @@ export default function CreateBanner() {
          } else {
             Toast.show({ type: 'small', text1: 'Gagal menambahkan data', })
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Gagal menambahkan data', })
+         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 || loading ? true : false}
-               //       category="create"
-               //       onPress={() => {
-               //          handleCreateEntity();
-               //       }}
-               //    />
-               // ),
                header: () => (
                   <AppHeader
                      title="Fitur"
@@ -133,26 +122,27 @@ export default function CreateBanner() {
                )
             }}
          />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         {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]}>
+                           <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>
@@ -165,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,22 +1,26 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import styles from "@/components/AppHeader"
 import AppHeader from "@/components/AppHeader"
 import HeaderRightBannerList from "@/components/banner/headerBannerList"
 import BorderBottomItem from "@/components/borderBottomItem"
 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 { 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'
@@ -32,6 +36,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('')
@@ -40,34 +45,52 @@ export default function BannerList() {
    const [refreshing, setRefreshing] = useState(false)
    const [loadingOpen, setLoadingOpen] = useState(false)
    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)
    };
 
@@ -105,7 +128,7 @@ export default function BannerList() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -130,47 +153,51 @@ export default function BannerList() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
-            {
-               entities.length > 0
-                  ?
-                  <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: `${ConstEnv.url_storage}/files/${index.image}` }}
-                                 style={[Styles.imgListBanner]}
-                              />
-                           }
-                           title={index.title}
-                           width={65}
-                        />
-                     ))}
-                  </View>
-                  :
-                  <View style={[Styles.p15, Styles.mb100]}>
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-                  </View>
-            }
-
-
+            <View style={[Styles.p15, Styles.mb100]}>
+               {
+                  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)
@@ -178,7 +205,7 @@ export default function BannerList() {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
                   title="Lihat"
                   onPress={() => {
                      setModal(false)
@@ -189,15 +216,13 @@ export default function BannerList() {
                   }}
                />
                <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>
@@ -210,6 +235,19 @@ export default function BannerList() {
             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,4 +1,3 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
@@ -8,16 +7,17 @@ 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 { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiUpdateDiscussionGeneralCommentar } from "@/lib/api";
 import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
+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';
@@ -56,6 +56,7 @@ type PropsFile = {
 
 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 }>();
@@ -79,6 +80,7 @@ export default function DetailDiscussionGeneral() {
       comment: ''
    })
    const [viewEdit, setViewEdit] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
    useEffect(() => {
       const onValueChange = reference.on('value', snapshot => {
@@ -156,8 +158,11 @@ export default function DetailDiscussionGeneral() {
                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)
       }
@@ -173,8 +178,11 @@ export default function DetailDiscussionGeneral() {
          } 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 mengupdate data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSendKomentar(false)
          handleViewEditKomentar()
@@ -191,8 +199,11 @@ export default function DetailDiscussionGeneral() {
          } 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 menghapus data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSendKomentar(false)
          setVisible(false)
@@ -237,14 +248,15 @@ export default function DetailDiscussionGeneral() {
                )
             }}
          />
-         <View style={{ flex: 1 }}>
+         <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
             <ScrollView
                showsVerticalScrollIndicator={false}
-               style={[Styles.h100]}
+               style={[Styles.h100, { backgroundColor: colors.background }]}
                refreshControl={
                   <RefreshControl
                      refreshing={refreshing}
                      onRefresh={() => handleRefresh()}
+                     tintColor={colors.icon}
                   />
                }
             >
@@ -256,10 +268,11 @@ export default function DetailDiscussionGeneral() {
                         <BorderBottomItem2
                            dataFile={fileDiscussion}
                            descEllipsize={false}
-                           borderType="bottom"
+                           borderType="all"
+                           bgColor="white"
                            icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <MaterialIcons name="chat" size={25} color={'#384288'} />
+                              <View style={[Styles.iconContent]}>
+                                 <MaterialIcons name="chat" size={25} color={'black'} />
                               </View>
                            }
                            title={data?.title}
@@ -273,18 +286,18 @@ export default function DetailDiscussionGeneral() {
                            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>
+                                 <Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
+                                 <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
                               </View>
                            }
                            rightBottomInfo={
                               <View style={[Styles.rowItemsCenter]}>
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{data?.createdAt}</Text>
+                                 <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>{data?.createdAt}</Text>
                               </View>
                            }
                         />
                   }
-                  <View style={[Styles.p15]}>
+                  <View style={[Styles.mt10]}>
                      {
                         loadingKomentar ?
                            arrSkeleton.map((item: any, i: number) => {
@@ -297,7 +310,7 @@ export default function DetailDiscussionGeneral() {
                               return (
                                  <BorderBottomItem
                                     key={i}
-                                    borderType="bottom"
+                                    borderType="all"
                                     colorPress
                                     icon={
                                        <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
@@ -307,6 +320,7 @@ export default function DetailDiscussionGeneral() {
                                     desc={item.comment}
                                     rightBottomInfo={item.isEdited ? "Edited" : ""}
                                     descEllipsize={detailMore.includes(item.id) ? false : true}
+                                    bgColor="white"
                                     onPress={() => {
                                        setDetailMore((prev: any) => {
                                           if (prev.includes(item.id)) {
@@ -333,7 +347,7 @@ export default function DetailDiscussionGeneral() {
                <View style={[
                   Styles.contentItemCenter,
                   Styles.w100,
-                  { backgroundColor: "#f4f4f4" },
+                  { backgroundColor: colors.background },
                   viewEdit && Styles.borderTop
                ]}>
                   {
@@ -341,11 +355,11 @@ export default function DetailDiscussionGeneral() {
                         <>
                            <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
                               <View style={[Styles.rowItemsCenter]}>
-                                 <Feather name="edit-3" color="black" size={22} style={[Styles.mh05]} />
+                                 <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="black" size={22} />
+                                 <MaterialIcons name="close" color={colors.text} size={22} />
                               </Pressable>
                            </View>
                            <InputForm
@@ -353,7 +367,6 @@ export default function DetailDiscussionGeneral() {
                               type="default"
                               round
                               placeholder="Kirim Komentar"
-                              bg="white"
                               onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
                               value={selectKomentar.comment}
                               multiline
@@ -367,7 +380,7 @@ export default function DetailDiscussionGeneral() {
                                        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"))) ? Styles.cGray : Styles.cDefault} />
+                                    <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>
                               }
                            />
@@ -380,7 +393,6 @@ export default function DetailDiscussionGeneral() {
                               type="default"
                               round
                               placeholder="Kirim Komentar"
-                              bg="white"
                               onChange={setKomentar}
                               value={komentar}
                               multiline
@@ -394,13 +406,13 @@ export default function DetailDiscussionGeneral() {
                                        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"))) ? Styles.cGray : Styles.cDefault} />
+                                    <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, { alignItems: 'center' }]}>
-                              <Text style={[Styles.textInformation, Styles.cGray]}>
+                           <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"
                                  }
@@ -415,25 +427,35 @@ export default function DetailDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
             <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={() => { handleViewEditKomentar() }}
                />
                <MenuItemRow
-                  icon={<MaterialIcons name="delete" color="black" size={25} />}
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus komentar?',
-                        onPress: () => {
-                           handleDeleteKomentar()
-                        }
-                     })
+                     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

@@ -9,6 +9,7 @@ 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";
@@ -26,6 +27,7 @@ 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[]>([])
@@ -82,9 +84,11 @@ export default function AddMemberDiscussionDetail() {
          } 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)
       }
@@ -92,7 +96,7 @@ export default function AddMemberDiscussionDetail() {
 
 
    return (
-      <SafeAreaView>
+      <>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -125,7 +129,7 @@ export default function AddMemberDiscussionDetail() {
                )
             }}
          />
-         <View style={[Styles.p15]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
             <InputSearch onChange={setSearch} value={search} />
 
             {
@@ -147,7 +151,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -160,7 +164,7 @@ 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)
                               }}
@@ -170,22 +174,22 @@ export default function AddMemberDiscussionDetail() {
                                  <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} color={'black'} />
+                                 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

@@ -5,7 +5,7 @@ import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
-import LoadingOverlay from "@/components/loadingOverlay";
+import LoadingCenter from "@/components/loadingCenter";
 import MenuItemRow from "@/components/menuItemRow";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
@@ -16,6 +16,7 @@ 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 } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
@@ -27,6 +28,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 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: "" });
@@ -154,16 +156,18 @@ export default function CreateDiscussionGeneral() {
          } 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)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -204,8 +208,8 @@ export default function CreateDiscussionGeneral() {
                )
             }}
          />
-         <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         {loading && <LoadingCenter />}
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                {
                   (entityUser.role == "supadmin" ||
@@ -215,6 +219,7 @@ export default function CreateDiscussionGeneral() {
                         placeholder="Pilih Lembaga Desa"
                         value={chooseGroup.label}
                         required
+                        bg={colors.card}
                         onPress={() => {
                            setValChoose(chooseGroup.val);
                            setValSelect("group");
@@ -231,6 +236,7 @@ export default function CreateDiscussionGeneral() {
                   placeholder="Judul"
                   required
                   error={error.title}
+                  bg={colors.card}
                   errorText="Judul tidak boleh kosong"
                   onChange={(val) => { validationForm("title", val) }}
                />
@@ -240,6 +246,7 @@ export default function CreateDiscussionGeneral() {
                   placeholder="Hal yang didiskusikan"
                   required
                   error={error.desc}
+                  bg={colors.card}
                   errorText="Diskusi tidak boleh kosong"
                   onChange={(val) => { validationForm("desc", val) }}
                   multiline
@@ -248,21 +255,27 @@ export default function CreateDiscussionGeneral() {
                {
                   fileForm.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                     {
-                        fileForm.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        <Text style={[Styles.textDefault]}>{fileForm.length} file</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, Styles.mb10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           fileForm.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={fileForm.length - 1 == index ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name}
+                                 bgColor="transparent"
+                                 titleWeight="normal"
+                                 onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                     </View>
+                  </>
                }
                <ButtonSelect
                   value="Pilih Anggota"
@@ -287,21 +300,22 @@ export default function CreateDiscussionGeneral() {
                   entitiesMember.length > 0 &&
                   <View>
                      <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-                        <Text>Anggota</Text>
-                        <Text>Total {entitiesMember.length} Anggota</Text>
+                        <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
+                        <Text style={[Styles.textDefault]}>{entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                         {
                            entitiesMember.map((item: { img: any; name: any; }, index: any) => {
                               return (
                                  <BorderBottomItem
                                     key={index}
-                                    borderType="bottom"
+                                    borderType={entitiesMember.length - 1 == index ? "none" : "bottom"}
                                     icon={
-                                       <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="sm" />
+                                       <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                                     }
                                     title={item.name}
+                                    bgColor="transparent"
                                  />
                               )
                            })
@@ -327,7 +341,7 @@ export default function CreateDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} 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)/discussion/edit/[id].tsx

@@ -5,12 +5,13 @@ import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
-import LoadingOverlay from "@/components/loadingOverlay";
+import LoadingCenter from "@/components/loadingCenter";
 import MenuItemRow from "@/components/menuItemRow";
 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";
@@ -21,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 export default function EditDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [disableBtn, setDisableBtn] = useState(false)
    const dispatch = useDispatch()
@@ -152,17 +154,21 @@ export default function EditDiscussionGeneral() {
             dispatch(setUpdateDiscussionGeneralDetail(!update))
             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: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -197,14 +203,15 @@ export default function EditDiscussionGeneral() {
                )
             }}
          />
-         <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
+         {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"
@@ -215,6 +222,7 @@ export default function EditDiscussionGeneral() {
                   type="default"
                   placeholder="Hal yang didiskusikan"
                   required
+                  bg={colors.card}
                   error={error.desc}
                   value={dataForm.desc}
                   errorText="Diskusi tidak boleh kosong"
@@ -225,33 +233,40 @@ export default function EditDiscussionGeneral() {
                {
                   (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                     {
-                        dataFile.filter((val) => !val.delete).map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name + '.' + item.extension}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                     {
-                        fileForm.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        <Text style={[Styles.textDefault]}>{fileForm.length + dataFile.filter((val) => !val.delete).length} file</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, Styles.mb10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           dataFile.filter((val) => !val.delete).map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={dataFile.filter((val) => !val.delete).length - 1 == index && fileForm.length == 0 ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name + '.' + item.extension}
+                                 titleWeight="normal"
+                                 bgColor="transparent"
+                                 onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                        {
+                           fileForm.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={fileForm.length - 1 == index ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name}
+                                 titleWeight="normal"
+                                 bgColor="transparent"
+                                 onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                     </View>
+                  </>
                }
             </View>
          </ScrollView>
@@ -259,7 +274,7 @@ export default function EditDiscussionGeneral() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} 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.id, indexDelFile.cat) }}
                />

app/(application)/discussion/index.tsx

@@ -4,13 +4,16 @@ 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 { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDiscussionGeneral } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, Ionicons, MaterialIcons } 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";
 
@@ -27,95 +30,102 @@ 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)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setWaiting(true)
-         setLoading(loading)
-         setPage(thisPage)
+   // TanStack Query for Discussions with Infinite Scroll
+   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,
+   })
 
+   // 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)
-   }, [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 loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
+
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    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,
+      id: flatData[index]?.id,
+      title: flatData[index]?.title,
+      desc: flatData[index]?.desc,
+      status: flatData[index]?.status,
+      total_komentar: flatData[index]?.total_komentar,
+      createdAt: flatData[index]?.createdAt,
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" &&
-               <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="Arsip"
-                     icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
                      n={2} />
-               </View>
+               </WrapTab>
             }
 
             <InputSearch onChange={setSearch} />
@@ -127,42 +137,41 @@ export default function Discussion() {
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt05]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item: any, i: number) => {
                      return (
                         <SkeletonContent key={i} />
                      )
                   })
                   :
-                  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 (
                               <BorderBottomItem
+                                 bgColor="transparent"
                                  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>
+                                    <MaterialIcons name="chat" size={25} color={colors.text} />
                                  }
                                  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.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
+                                 desc={item.desc?.replace(/<[^>]*>?/gm, ' ').replace(/\r?\n|\r/g, ' ')}
                                  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>
+                                       <Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
+                                       <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
                                     </View>
                                  }
                                  rightBottomInfo={`${item.total_komentar} Komentar`}
@@ -178,11 +187,12 @@ export default function Discussion() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                            />
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </View>

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

@@ -1,9 +1,9 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 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";
@@ -11,6 +11,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ type Props = {
 
 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[]>([])
@@ -34,6 +36,8 @@ export default function MemberDiscussionDetail() {
    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)
+
 
    async function handleLoad(loading: boolean) {
       try {
@@ -63,15 +67,18 @@ export default function MemberDiscussionDetail() {
          await apiDeleteMemberDiscussionGeneral({ user: hasil, idUser: chooseUser.idUser }, id)
          Toast.show({ type: 'small', text1: 'Berhasil mengeluarkan anggota dari diskusi', })
          handleLoad(false)
-      } catch (error) {
-         console.error(error)
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengeluarkan anggota"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setModal(false)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -86,10 +93,10 @@ export default function MemberDiscussionDetail() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15]}>
                <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
-               <View style={[Styles.wrapPaper, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   {
                      entityUser.role != "user" && entityUser.role != "coadmin" &&
                      <BorderBottomItem
@@ -135,7 +142,7 @@ export default function MemberDiscussionDetail() {
          <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)
@@ -145,24 +152,32 @@ export default function MemberDiscussionDetail() {
                {
                   entityUser.role != "user" && entityUser.role != "coadmin" &&
                   <MenuItemRow
-                     icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                     icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
                      title="Keluarkan"
                      onPress={() => {
                         setModal(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="Hapus"
+            cancelText="Batal"
+         />
       </SafeAreaView>
    )
 }

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

@@ -9,6 +9,7 @@ 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";
@@ -23,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()
@@ -90,9 +92,11 @@ 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)
       }
@@ -100,7 +104,7 @@ export default function AddMemberCalendarEvent() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -154,7 +158,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -167,7 +171,7 @@ 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)
                               }}
@@ -177,12 +181,12 @@ export default function AddMemberCalendarEvent() {
                                  <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.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 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

@@ -9,6 +9,7 @@ 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"
@@ -17,6 +18,7 @@ import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "
 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)
@@ -55,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 })
       }
    }
 
@@ -152,9 +156,11 @@ export default function EditEventCalendar() {
          } 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 acara"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -162,7 +168,7 @@ export default function EditEventCalendar() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -205,7 +211,7 @@ export default function EditEventCalendar() {
                      type="default"
                      placeholder="Nama Acara"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={data.title}
                      onChange={(val) => validationForm("title", val)}
                      error={error.title}
@@ -251,12 +257,12 @@ export default function EditEventCalendar() {
                      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}
@@ -268,7 +274,7 @@ export default function EditEventCalendar() {
                      type="numeric"
                      placeholder="Jumlah Pengulangan"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={String(data.repeatValue)}
                      onChange={(val) => validationForm("repeatValue", val)}
                      error={error.repeatValue}
@@ -279,7 +285,7 @@ export default function EditEventCalendar() {
                      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/[detail]/index.tsx

@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import AppHeader from "@/components/AppHeader"
 import BorderBottomItem from "@/components/borderBottomItem"
 import ButtonBackHeader from "@/components/buttonBackHeader"
@@ -13,6 +13,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
 import Clipboard from "@react-native-clipboard/clipboard"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -45,6 +46,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[]>([])
@@ -55,6 +57,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)
 
@@ -134,9 +137,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)
       }
@@ -152,14 +157,14 @@ export default function DetailEventCalendar() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, 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:()=>(
+               header: () => (
                   <AppHeader
                      title="Detail Acara"
                      showBack={true}
@@ -177,13 +182,14 @@ export default function DetailEventCalendar() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >
             <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.mb15]}>
+               <View style={[Styles.wrapPaper, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
-                     <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="calendar-text" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -192,7 +198,7 @@ export default function DetailEventCalendar() {
 
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -201,7 +207,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="clock-outline" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -210,7 +216,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="repeat" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -228,7 +234,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10]}>
-                     <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="link-variant" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -241,7 +247,7 @@ export default function DetailEventCalendar() {
                      }
                   </View>
                   <View style={[Styles.rowItemsCenter, Styles.mt10, { alignItems: 'flex-start' }]}>
-                     <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
+                     <MaterialCommunityIcons name="card-text-outline" size={30} color={colors.text} style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -257,7 +263,7 @@ export default function DetailEventCalendar() {
                      <Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text>
                   </View>
 
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         member.map((item, index) => (
                            <BorderBottomItem
@@ -286,7 +292,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)
@@ -295,22 +301,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

@@ -10,6 +10,7 @@ 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";
@@ -24,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[]>([])
@@ -81,16 +83,18 @@ export default function CreateCalendarAddMember() {
          } 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 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() }} />,
@@ -141,7 +145,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -154,7 +158,7 @@ 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]}>
@@ -164,7 +168,7 @@ export default function CreateCalendarAddMember() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 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

@@ -9,6 +9,7 @@ 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 {
@@ -21,6 +22,7 @@ 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)
@@ -126,7 +128,7 @@ export default function CalendarDivisionCreate() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -144,7 +146,7 @@ export default function CalendarDivisionCreate() {
                //       disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
                //    />
                // ),
-               header:()=>(
+               header: () => (
                   <AppHeader
                      title="Tambah Acara"
                      showBack={true}
@@ -173,7 +175,7 @@ export default function CalendarDivisionCreate() {
                      type="default"
                      placeholder="Nama Acara"
                      required
-                     bg="white"
+                     bg={colors.card}
                      value={data.title}
                      onChange={(val) => validationForm("title", val)}
                      error={error.title}
@@ -219,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}
@@ -236,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}
@@ -247,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

@@ -7,6 +7,7 @@ import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -34,6 +35,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()
@@ -117,15 +119,15 @@ export default function CalendarDivision() {
          );
       },
       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: () => (
@@ -153,12 +155,13 @@ export default function CalendarDivision() {
                <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"
@@ -167,19 +170,19 @@ export default function CalendarDivision() {
                      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 ?
                            <>
@@ -202,7 +205,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

@@ -4,13 +4,14 @@ import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import DrawerBottom from "@/components/drawerBottom";
 import { InputForm } from "@/components/inputForm";
-import LoadingOverlay from "@/components/loadingOverlay";
+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";
@@ -20,6 +21,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function DiscussionDivisionEdit() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const { token, decryptToken } = useAuthSession();
    const [data, setData] = useState("");
@@ -87,9 +89,11 @@ export default function DiscussionDivisionEdit() {
          } 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)
       }
@@ -127,7 +131,7 @@ export default function DiscussionDivisionEdit() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -166,7 +170,7 @@ export default function DiscussionDivisionEdit() {
                )
             }}
          />
-         <LoadingOverlay visible={loading} />
+         {loading && <LoadingCenter />}
          <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
             <View style={[Styles.p15]}>
                <InputForm
@@ -177,39 +181,45 @@ export default function DiscussionDivisionEdit() {
                   value={data}
                   onChange={setData}
                   multiline
+                  bg={colors.card}
                />
 
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
                   (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                     {
-                        dataFile.filter((val) => !val.delete).map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name + '.' + item.extension}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                     {
-                        fileForm.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        <Text style={[Styles.textDefault]}>{fileForm.length + dataFile.filter((val) => !val.delete).length} file</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, Styles.mb10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           dataFile.filter((val) => !val.delete).map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={dataFile.filter((val) => !val.delete).length - 1 == index && fileForm.length == 0 ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name + '.' + item.extension}
+                                 titleWeight="normal"
+                                 onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                        {
+                           fileForm.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={fileForm.length - 1 == index ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name}
+                                 titleWeight="normal"
+                                 onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                     </View>
+                  </>
                }
             </View>
          </ScrollView>
@@ -218,7 +228,7 @@ export default function DiscussionDivisionEdit() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} 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.id, indexDelFile.cat) }}
                />

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

@@ -1,4 +1,3 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
@@ -8,6 +7,7 @@ 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";
@@ -23,6 +23,7 @@ import {
 } from "@/lib/api";
 import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
+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';
@@ -64,6 +65,7 @@ type PropsFile = {
 }
 
 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[]>([]);
@@ -90,6 +92,7 @@ export default function DiscussionDetail() {
       comment: ''
    })
    const [viewEdit, setViewEdit] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
 
 
@@ -199,8 +202,11 @@ export default function DiscussionDetail() {
             setKomentar("")
             updateTrigger()
          }
-      } catch (error) {
+      } catch (error: any) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal menambahkan komentar"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSend(false);
       }
@@ -219,8 +225,11 @@ export default function DiscussionDetail() {
          } else {
             Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengedit komentar"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSend(false);
          handleViewEditKomentar()
@@ -240,8 +249,11 @@ export default function DiscussionDetail() {
          } else {
             Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
+         const message = error?.response?.data?.message || "Gagal menghapus komentar"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSend(false)
          setVisible(false)
@@ -295,7 +307,7 @@ export default function DiscussionDetail() {
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
-                        (entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator ?
+                        ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator) ?
                            <HeaderRightDiscussionDetail
                               id={detail}
                               status={data?.status}
@@ -306,12 +318,13 @@ export default function DiscussionDetail() {
                )
             }}
          />
-         <View style={{ flex: 1 }}>
+         <View style={{ flex: 1, backgroundColor: colors.background }}>
             <ScrollView
                refreshControl={
                   <RefreshControl
                      refreshing={refreshing}
                      onRefresh={handleRefresh}
+                     tintColor={colors.icon}
                   />
                }
             >
@@ -323,7 +336,8 @@ export default function DiscussionDetail() {
                         <BorderBottomItem2
                            dataFile={fileDiscussion}
                            descEllipsize={false}
-                           borderType="bottom"
+                           bgColor="white"
+                           borderType="all"
                            icon={
                               <ImageUser
                                  src={`${ConstEnv.url_storage}/files/${data?.user_img}`}
@@ -352,7 +366,7 @@ export default function DiscussionDetail() {
                                     color="grey"
                                     style={Styles.mr05}
                                  />
-                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]} >
+                                 <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]} >
                                     {dataComment.length} Komentar
                                  </Text>
                               </View>
@@ -360,7 +374,7 @@ export default function DiscussionDetail() {
                         />
                   }
 
-                  <View style={[Styles.p15]}>
+                  <View style={[Styles.mt10]}>
                      {
                         loadingKomentar ?
                            arrSkeleton.map((item, index) => (
@@ -370,7 +384,7 @@ export default function DiscussionDetail() {
                            dataComment.map((item, index) => (
                               <BorderBottomItem
                                  key={index}
-                                 borderType="bottom"
+                                 borderType="all"
                                  colorPress
                                  icon={
                                     <ImageUser
@@ -383,6 +397,7 @@ export default function DiscussionDetail() {
                                  desc={item.comment}
                                  rightBottomInfo={item.isEdited ? "Edited" : ""}
                                  descEllipsize={detailMore.includes(item.id) ? false : true}
+                                 bgColor="white"
                                  onPress={() => {
                                     setDetailMore((prev: any) => {
                                        if (prev.includes(item.id)) {
@@ -410,7 +425,7 @@ export default function DiscussionDetail() {
                   style={[
                      Styles.contentItemCenter,
                      Styles.w100,
-                     { backgroundColor: "#f4f4f4" },
+                     { backgroundColor: colors.background },
                      viewEdit && Styles.borderTop
                   ]}
                >
@@ -419,15 +434,15 @@ export default function DiscussionDetail() {
                         <>
                            <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
                               <View style={[Styles.rowItemsCenter]}>
-                                 <Feather name="edit-3" color="black" size={22} style={[Styles.mh05]} />
+                                 <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="black" size={22} />
+                                 <MaterialIcons name="close" color={colors.text} size={22} />
                               </Pressable>
                            </View>
                            <InputForm
-                              bg="white"
+                              bg={colors.card}
                               type="default"
                               round
                               multiline
@@ -460,8 +475,8 @@ export default function DiscussionDetail() {
                                        size={25}
                                        style={
                                           [selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
-                                             ? Styles.cGray
-                                             : Styles.cDefault,
+                                             ? { color: colors.dimmed }
+                                             : { color: colors.tint },
                                           ]
                                        }
                                     />
@@ -474,7 +489,6 @@ export default function DiscussionDetail() {
                            isMemberDivision)
                            ?
                            <InputForm
-                              bg="white"
                               type="default"
                               round
                               multiline
@@ -507,8 +521,8 @@ export default function DiscussionDetail() {
                                        size={25}
                                        style={
                                           [komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
-                                             ? Styles.cGray
-                                             : Styles.cDefault,
+                                             ? { color: colors.dimmed }
+                                             : { color: colors.tint }
                                           ]
                                        }
                                     />
@@ -517,7 +531,7 @@ export default function DiscussionDetail() {
                            />
                            :
                            <View style={[Styles.pv20, { alignItems: 'center' }]}>
-                              <Text style={[Styles.textInformation, Styles.cGray]}>
+                              <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"
                                  }
@@ -531,25 +545,35 @@ export default function DiscussionDetail() {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
             <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={() => { handleViewEditKomentar() }}
                />
                <MenuItemRow
-                  icon={<MaterialIcons name="delete" color="black" size={25} />}
+                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus komentar?',
-                        onPress: () => {
-                           handleDeleteKomentar()
-                        }
-                     })
+                     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

@@ -4,13 +4,14 @@ import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import ButtonSelect from "@/components/buttonSelect"
 import DrawerBottom from "@/components/drawerBottom"
 import { InputForm } from "@/components/inputForm"
-import LoadingOverlay from "@/components/loadingOverlay"
+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"
@@ -21,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux"
 
 
 export default function CreateDiscussionDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>()
    const [desc, setDesc] = useState('')
    const { token, decryptToken } = useAuthSession()
@@ -79,16 +81,18 @@ export default function CreateDiscussionDivision() {
          } 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 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() }} />,
@@ -117,7 +121,7 @@ export default function CreateDiscussionDivision() {
                )
             }}
          />
-         <LoadingOverlay visible={loading} />
+         {loading && <LoadingCenter />}
          <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
@@ -127,26 +131,33 @@ export default function CreateDiscussionDivision() {
                   required
                   onChange={setDesc}
                   multiline
+                  bg={colors.card}
                />
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
                   fileForm.length > 0
                   &&
-                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
-                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
-                     {
-                        fileForm.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType={fileForm.length > 1 ? "bottom" : "none"}
-                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                              title={item.name}
-                              titleWeight="normal"
-                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
-                           />
-                        ))
-                     }
-                  </View>
+                  <>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        <Text style={[Styles.textDefault]}>{fileForm.length} file</Text>
+                     </View>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, Styles.mb10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
+                        {
+                           fileForm.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType={fileForm.length - 1 == index ? "none" : "bottom"}
+                                 icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                                 title={item.name}
+                                 titleWeight="normal"
+                                 onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                              />
+                           ))
+                        }
+                     </View>
+                  </>
+
                }
             </View>
          </ScrollView>
@@ -154,7 +165,7 @@ export default function CreateDiscussionDivision() {
          <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} 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)/discussion/index.tsx

@@ -5,10 +5,12 @@ 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, apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -30,6 +32,7 @@ type Props = {
 
 
 export default function DiscussionDivision() {
+   const { colors } = useTheme();
    const { id, active } = useLocalSearchParams<{ id: string, active?: string }>()
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
@@ -128,26 +131,26 @@ export default function DiscussionDivision() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          {
             ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
             <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="Arsip"
-                     icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
                      n={2} />
-               </View>
+               </WrapTab>
                <InputSearch onChange={setSearch} />
             </View>
          }
@@ -174,7 +177,7 @@ export default function DiscussionDivision() {
                                  onPress={() => { router.push(`./discussion/${item.id}`) }}
                                  borderType="bottom"
                                  icon={
-                                    <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="sm" />
+                                    <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                                  }
                                  title={item.user_name}
                                  subtitle={
@@ -184,11 +187,12 @@ export default function DiscussionDivision() {
                                  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>
+                                       <Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
+                                       <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
                                     </View>
                                  }
                                  rightBottomInfo={item.total_komentar + ' Komentar'}
+                                 bgColor="transparent"
                               />
                            )
                         }}
@@ -200,11 +204,12 @@ export default function DiscussionDivision() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                            />
                         }
                      />
                      :
-                     (<Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>)
+                     (<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color: colors.dimmed }]}>Tidak ada diskusi</Text>)
             }
          </View>
       </View>

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

@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import HeaderRightDocument from "@/components/document/headerDocument";
@@ -12,7 +12,6 @@ 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 {
@@ -24,6 +23,7 @@ import {
 } from "@/lib/api";
 import { setUpdateDokumen } from "@/lib/dokumenUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    MaterialCommunityIcons,
@@ -66,6 +66,7 @@ type PropsPath = {
 };
 
 export default function DocumentDivision() {
+   const { colors } = useTheme();
    const [loadingRename, setLoadingRename] = useState(false)
    const [isShare, setShare] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -88,6 +89,7 @@ export default function DocumentDivision() {
    const [loadingOpen, setLoadingOpen] = useState(false)
    const [isMemberDivision, setIsMemberDivision] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [bodyRename, setBodyRename] = useState({
       id: "",
       name: "",
@@ -233,9 +235,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 mengubah nama"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingRename(false)
          setRename(false)
@@ -256,9 +260,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 })
       }
    }
 
@@ -282,9 +288,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);
       }
@@ -334,7 +342,7 @@ export default function DocumentDivision() {
    }, [path]);
 
    return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () =>
@@ -380,7 +388,7 @@ export default function DocumentDivision() {
                      showBack={(selectedFiles.length > 0 || dariSelectAll) ? false : true}
                      left={
                         <ButtonHeader
-                           item={<MaterialIcons name="close" size={20} color="white" />}
+                           item={<MaterialIcons name="close" size={25} color="white" />}
                            onPress={() => {
                               handleBatal();
                            }}
@@ -393,7 +401,7 @@ export default function DocumentDivision() {
                         selectedFiles.length > 0 || dariSelectAll ? (
                            <ButtonHeader
                               item={
-                                 <MaterialIcons name="checklist-rtl" size={20} color="white" />
+                                 <MaterialIcons name="checklist-rtl" size={25} color="white" />
                               }
                               onPress={() => {
                                  handleSelectAll();
@@ -413,6 +421,7 @@ export default function DocumentDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }>
             <View style={[Styles.p15, Styles.mb100]}>
@@ -427,9 +436,9 @@ export default function DocumentDivision() {
                            }}
                         >
                            {item.id != "home" && (
-                              <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color="black" />
+                              <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
                            )}
-                           <Text> {item.name} </Text>
+                           <Text style={{ color: colors.text }}> {item.name} </Text>
                         </Pressable>
                      ))
                   }
@@ -478,14 +487,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>
                         )}
@@ -493,7 +495,7 @@ 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={
@@ -505,13 +507,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"
@@ -618,6 +614,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

@@ -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[]>([]);
@@ -118,16 +120,18 @@ 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: () => (
@@ -169,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) }}
@@ -197,7 +201,7 @@ export default function TaskDivisionAddFile() {
          <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

@@ -9,6 +9,7 @@ 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";
@@ -23,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()
@@ -84,9 +86,11 @@ export default function AddMemberTask() {
          } 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)
       }
@@ -127,7 +131,7 @@ export default function AddMemberTask() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -149,7 +153,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -162,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]}>
+                              <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} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

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

@@ -1,5 +1,6 @@
 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";
@@ -9,6 +10,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -16,7 +18,8 @@ import 'intl/locale-data/jsonp/id';
 import moment from "moment";
 import { useEffect, useState } from "react";
 import {
-   KeyboardAvoidingView, Platform, Pressable, SafeAreaView,
+   KeyboardAvoidingView, Platform,
+   SafeAreaView,
    ScrollView,
    View
 } from "react-native";
@@ -25,6 +28,7 @@ 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);
@@ -129,16 +133,18 @@ 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: 'Terjadi kesalahan', })
+         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: () => (
@@ -183,7 +189,7 @@ export default function TaskDivisionAddTask() {
          >
             <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}
@@ -193,13 +199,13 @@ export default function TaskDivisionAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           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>
@@ -207,38 +213,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
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </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"

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

@@ -5,6 +5,7 @@ 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();
@@ -60,16 +62,18 @@ 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: 'Terjadi kesalahan', })
+         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: () => (
@@ -115,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

@@ -5,6 +5,7 @@ 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("");
@@ -78,16 +80,18 @@ 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: () => (
@@ -128,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

@@ -10,6 +10,7 @@ import SectionTanggalTugasTask from "@/components/task/sectionTanggalTugasTask";
 import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature, apiGetTaskOne } 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 { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -25,6 +26,7 @@ type Props = {
 }
 
 export default function DetailTaskDivision() {
+   const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props>()
@@ -97,7 +99,7 @@ export default function DetailTaskDivision() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -125,6 +127,7 @@ export default function DetailTaskDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >

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

@@ -5,6 +5,7 @@ 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";
@@ -12,6 +13,7 @@ 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("");
@@ -78,16 +80,18 @@ export default function TaskDivisionReport() {
          } 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={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -128,7 +132,7 @@ export default function TaskDivisionReport() {
                   type="default"
                   placeholder="Laporan Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={laporan}
                   onChange={(val) => { onValidation(val) }}
                   error={error}

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

@@ -16,6 +16,7 @@ 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";
@@ -26,6 +27,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 
 export default function CreateTaskDivision() {
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams();
    const { token, decryptToken } = useAuthSession();
    const dispatch = useDispatch();
@@ -103,9 +105,11 @@ export default function CreateTaskDivision() {
          } 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 data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -113,7 +117,7 @@ export default function CreateTaskDivision() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -161,6 +165,7 @@ 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`); }} />
@@ -171,13 +176,13 @@ export default function CreateTaskDivision() {
                   fileForm.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 }]}>
                            {
                               fileForm.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.name}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -195,7 +200,7 @@ export default function CreateTaskDivision() {
                         <Text>Total {entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                         {entitiesMember.map(
                            (item: { img: any; name: any }, index: any) => {
                               return (
@@ -223,7 +228,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

@@ -9,6 +9,7 @@ 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";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberCreateTask() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string, detail: string }>()
@@ -97,7 +99,7 @@ export default function AddMemberCreateTask() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -119,7 +121,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -131,7 +133,7 @@ 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)
                               }}
@@ -143,7 +145,7 @@ export default function AddMemberCreateTask() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

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

@@ -1,5 +1,6 @@
 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";
@@ -7,6 +8,7 @@ import Styles from "@/constants/Styles";
 import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setTaskCreate } from "@/lib/taskCreate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack } from "expo-router";
 import 'intl';
@@ -16,7 +18,6 @@ import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -27,6 +28,7 @@ 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);
@@ -118,7 +120,7 @@ export default function CreateTaskAddTugas() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,7 +160,7 @@ export default function CreateTaskAddTugas() {
          >
             <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}
@@ -168,13 +170,13 @@ export default function CreateTaskAddTugas() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           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>
@@ -182,38 +184,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
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </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"

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,
@@ -31,6 +32,7 @@ type Props = {
 };
 
 export default function ListTask() {
+   const { colors } = useTheme()
    const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>()
    const [isList, setList] = useState(false)
    const { token, decryptToken } = useAuthSession()
@@ -110,7 +112,7 @@ 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]} showsHorizontalScrollIndicator={false}>
                <ButtonTab
@@ -121,7 +123,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : "black"}
+                        color={statusFix == "0" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -135,7 +137,7 @@ export default function ListTask() {
                   icon={
                      <MaterialCommunityIcons
                         name="progress-check"
-                        color={statusFix == "1" ? "white" : "black"}
+                        color={statusFix == "1" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -149,7 +151,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}
                      />
                   }
@@ -163,7 +165,7 @@ export default function ListTask() {
                   icon={
                      <AntDesign
                         name="closecircleo"
-                        color={statusFix == "3" ? "white" : "black"}
+                        color={statusFix == "3" ? "white" : colors.dimmed}
                         size={20}
                      />
                   }
@@ -179,7 +181,7 @@ export default function ListTask() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
@@ -188,7 +190,7 @@ export default function ListTask() {
          <View style={[Styles.mv05]}>
             <View style={[Styles.rowOnly]}>
                <Text style={[Styles.mr05]}>Filter :</Text>
-               <LabelStatus size="small" category="secondary" text={isYear} style={{ marginRight: 5 }} />
+               <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
             </View>
          </View>
          <View style={[{ flex: 2 }]}>
@@ -233,6 +235,7 @@ export default function ListTask() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -274,11 +277,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' :
@@ -299,6 +302,7 @@ export default function ListTask() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -338,13 +342,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,5 +1,6 @@
 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";
@@ -9,6 +10,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -18,7 +20,6 @@ import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -28,6 +29,7 @@ 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();
@@ -123,9 +125,11 @@ 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: 'Terjadi kesalahan', })
+         const message = error?.response?.data?.message || "Gagal mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSubmit(false)
       }
@@ -186,7 +190,7 @@ export default function UpdateProjectTaskDivision() {
    }, [range])
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -231,7 +235,7 @@ export default function UpdateProjectTaskDivision() {
          >
             <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"
@@ -244,13 +248,13 @@ export default function UpdateProjectTaskDivision() {
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
-                              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 },
                            }}
                         />
                      )}
@@ -259,40 +263,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
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </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"

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

@@ -8,6 +8,7 @@ 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";
@@ -23,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[]>([])
@@ -87,9 +89,11 @@ export default function AddMemberDivision() {
          } 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)
       }
@@ -130,7 +134,7 @@ export default function AddMemberDivision() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => handleSearch(val)} value={search} />
 
             {
@@ -152,7 +156,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -175,12 +179,12 @@ export default function AddMemberDivision() {
                                  <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} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

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

@@ -5,6 +5,7 @@ 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,6 +13,7 @@ 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();
@@ -54,16 +56,18 @@ 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: () => (
@@ -98,7 +102,7 @@ export default function EditDivision() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
                   label="Nama Divisi"

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

@@ -8,6 +8,7 @@ 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 { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
@@ -22,6 +23,7 @@ type Props = {
 }
 
 export default function DetailDivisionFitur() {
+   const { colors } = useTheme()
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [data, setData] = useState<Props>()
@@ -54,7 +56,7 @@ export default function DetailDivisionFitur() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -76,6 +78,7 @@ export default function DetailDivisionFitur() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
             showsVerticalScrollIndicator={false}

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

@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import AppHeader from "@/components/AppHeader"
 import BorderBottomItem from "@/components/borderBottomItem"
 import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
@@ -13,6 +13,7 @@ import { ConstEnv } from "@/constants/ConstEnv"
 import Styles from "@/constants/Styles"
 import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiGetDivisionOneFeature, apiUpdateStatusAdminDivision } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -39,6 +40,7 @@ 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 }>()
@@ -57,14 +59,13 @@ export default function InformationDivision() {
       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() {
@@ -77,9 +78,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)
       }
@@ -95,9 +98,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)
       }
@@ -161,7 +166,7 @@ export default function InformationDivision() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -185,9 +190,10 @@ export default function InformationDivision() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                {
@@ -197,7 +203,7 @@ export default function InformationDivision() {
                }
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, Styles.noShadow, { backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
                      {loading ?
                         arrSkeleton.map((item, index) => {
                            return (
@@ -211,7 +217,7 @@ export default function InformationDivision() {
                </View>
                <View style={[Styles.mb15]}>
                   <Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, Styles.noShadow, { backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
                      {
                         ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
                         dataDetail?.isActive && (
@@ -219,8 +225,8 @@ export default function InformationDivision() {
                               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 style={[Styles.iconContent]}>
+                                    <Feather name="user-plus" size={25} color={'black'} />
                                  </View>
                               }
                               title="Tambah Anggota"
@@ -260,8 +266,8 @@ export default function InformationDivision() {
             <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 style={[Styles.iconContent]}>
+                        <MaterialIcons name="verified-user" size={25} color={'black'} />
                      </View>
                      <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
                         <View style={[Styles.ml10]}>
@@ -274,7 +280,7 @@ export default function InformationDivision() {
                <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}>
                   <View style={[Styles.rowItemsCenter]}>
                      <View style={[Styles.iconContent, ColorsStatus.info]}>
-                        <MaterialCommunityIcons name="close-circle" size={25} color='#19345E' />
+                        <MaterialCommunityIcons name="close-circle" size={25} color={colors.primary} />
                      </View>
                      <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
                         <View style={[Styles.ml10]}>
@@ -285,6 +291,19 @@ export default function InformationDivision() {
                </Pressable>
             </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

@@ -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,7 +109,7 @@ export default function ReportDivision() {
    }, [showReport]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -119,7 +124,7 @@ export default function ReportDivision() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={{ backgroundColor: colors.background }}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputDate
                   onChange={(val) => validationForm("date", val)}

app/(application)/division/create.tsx

@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import ButtonNextHeader from "@/components/buttonNextHeader";
 import { InputForm } from "@/components/inputForm";
@@ -8,6 +8,7 @@ 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";
@@ -15,6 +16,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateDivision() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const [isSelect, setSelect] = useState(false)
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" })
@@ -23,6 +25,7 @@ export default function CreateDivision() {
    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,
@@ -67,21 +70,18 @@ export default function CreateDivision() {
          const response = await apiCheckDivisionName({ data: { ...dataForm }, user: hasil })
          if (response.success) {
             if (!response.available) {
-               AlertKonfirmasi({
-                  title: 'Peringatan',
-                  category: 'warning',
-                  desc: 'Nama divisi sudah ada. Tidak dapat membuat divisi dengan nama yang sama',
-                  onPress: () => { }
-               })
+               setShowWarningModal(true)
             } else {
                handleSetData()
             }
          } 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 data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingBtn(false)
       }
@@ -99,7 +99,7 @@ export default function CreateDivision() {
    }, []);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -131,7 +131,7 @@ export default function CreateDivision() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                {
@@ -179,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

@@ -8,6 +8,7 @@ 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";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function CreateDivisionAddAdmin() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession()
    const navigation = useNavigation()
    const { id } = useLocalSearchParams<{ id: string }>()
@@ -64,9 +66,11 @@ export default function CreateDivisionAddAdmin() {
          } 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 data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -104,7 +108,7 @@ export default function CreateDivisionAddAdmin() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <ScrollView>
                {
                   data.length > 0 ?
@@ -123,12 +127,12 @@ export default function CreateDivisionAddAdmin() {
                                  <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} color={'black'} />
+                                 selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

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

@@ -10,6 +10,7 @@ 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, ScrollView, View } from "react-native";
@@ -22,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[]>([])
@@ -84,7 +86,7 @@ export default function CreateDivisionAddMember() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -106,7 +108,7 @@ 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
                showsVerticalScrollIndicator={false}
@@ -129,12 +131,12 @@ export default function CreateDivisionAddMember() {
                                  <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} color={'black'} />
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                               }
                            </Pressable>
                         )

app/(application)/division/index.tsx

@@ -6,19 +6,20 @@ 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 { 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";
 
@@ -38,23 +39,25 @@ export default function ListDivision() {
    const [isList, setList] = useState(false);
    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,
@@ -62,63 +65,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"
@@ -127,7 +128,7 @@ export default function ListDivision() {
                         icon={
                            <Feather
                               name="check-circle"
-                              color={status == "false" ? "black" : "white"}
+                              color={status == "false" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
@@ -141,15 +142,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"
@@ -158,7 +159,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-outline"
-                              color={category == "semua" ? "black" : "white"}
+                              color={category == "semua" ? colors.dimmed : "white"}
                               size={20}
                            />
                         }
@@ -172,13 +173,13 @@ 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, { alignItems: 'center' }]}>
@@ -190,7 +191,7 @@ export default function ListDivision() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
@@ -202,9 +203,9 @@ export default function ListDivision() {
                </View>
             )}
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   isList ?
                      arrSkeleton.map((item, index) => (
                         <SkeletonTwoItem key={index} />
@@ -214,17 +215,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 (
@@ -232,13 +233,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"
                                     />
                                  )
                               }}
@@ -250,6 +251,7 @@ export default function ListDivision() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
@@ -257,9 +259,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 (
@@ -285,6 +287,7 @@ export default function ListDivision() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />

app/(application)/division/report.tsx

@@ -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,7 +127,7 @@ export default function Report() {
    }, [showReport]);
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -144,11 +149,11 @@ export default function Report() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            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,4 +1,4 @@
-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";
@@ -10,6 +10,7 @@ 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";
@@ -43,9 +44,11 @@ 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' });
@@ -185,9 +188,14 @@ 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)
       }
@@ -213,27 +221,43 @@ export default function EditProfile() {
    };
 
    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 || loading ? true : false}
-                     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()
+               //       }}
+               //    />
+               // ),
             }}
          />
          <KeyboardAvoidingView
@@ -243,7 +267,7 @@ export default function EditProfile() {
          >
             <ScrollView showsVerticalScrollIndicator={false}>
                <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                      {
                         selectedImage != undefined ? (
                            <Pressable onPress={pickImageAsync}>

app/(application)/feature.tsx

@@ -1,16 +1,18 @@
 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={{
                headerTitle: 'Fitur',
@@ -22,32 +24,26 @@ export default function Feature() {
          />
          <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') }} />
+               <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') }} />
             </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') }} />
+               <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="color-palette-sharp" size={30} color={colors.icon} />} text="Tema" onPress={() => { }} /> */}
+                     <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,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -8,13 +8,15 @@ 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 { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
-import { useEffect, useState } from "react";
+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,17 +29,17 @@ 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 dispatch = useDispatch()
@@ -46,12 +48,38 @@ export default function Index() {
       title: false,
    });
 
+   // 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 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)
@@ -68,6 +96,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)
@@ -77,32 +106,9 @@ 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)
    };
 
@@ -126,30 +132,32 @@ export default function Index() {
 
 
 
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View style={[Styles.mb10]}>
-            <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 == "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} />
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonTwoItem key={index} />
@@ -173,8 +181,8 @@ export default function Index() {
                                  }}
                                  borderType="all"
                                  icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                                    <View style={[Styles.iconContent]}>
+                                       <Ionicons name="bookmark-outline" size={25} color={'black'} />
                                     </View>
                                  }
                                  title={item.name}
@@ -187,30 +195,29 @@ 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>
 
          <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)
@@ -232,6 +239,7 @@ export default function Index() {
                      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>
@@ -240,6 +248,19 @@ export default function Index() {
                </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 >
 
    )

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, useState } from "react";
-import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+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,38 +24,77 @@ import { useDispatch, useSelector } from "react-redux";
 export default function Home() {
    const entities = useSelector((state: any) => state.entities)
    const dispatch = useDispatch()
+   const queryClient = useQueryClient()
    const { token, decryptToken, signOut } = useAuthSession()
+   const { colors } = useTheme();
    const insets = useSafeAreaInsets()
    const [refreshing, setRefreshing] = useState(false)
 
-   useEffect(() => {
-      handleUserLogin()
-   }, [dispatch]);
+   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
+   })
 
-   async function handleUserLogin() {
-      const hasil = await decryptToken(String(token?.current))
-      apiGetProfile({ id: hasil })
-         .then((data) => dispatch(setEntities(data.data)))
-         .catch((error) => {
-            signOut()
-         });
-   }
+   // 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(() => {
+      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])
+
+   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)
-      handleUserLogin()
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      // 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>
@@ -65,19 +106,36 @@ export default function Home() {
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
             showsVerticalScrollIndicator={false}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
-            <CaraouselHome refreshing={refreshing}/>
-            <View style={[Styles.ph15, Styles.mb100]}>
-               <FiturHome />
-               <ProjectHome refreshing={refreshing}/>
-               <DivisionHome refreshing={refreshing}/>
-               <ChartProgresHome refreshing={refreshing}/>
-               <ChartDokumenHome refreshing={refreshing}/>
-               <EventHome refreshing={refreshing}/>
-               <DisccussionHome refreshing={refreshing}/>
+            <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

@@ -10,6 +10,8 @@ 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 { LinearGradient } from "expo-linear-gradient";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -33,6 +35,7 @@ type Props = {
 
 export default function MemberDetail() {
    const { id } = useLocalSearchParams<{ id: string }>();
+   const { colors } = useTheme();
    const [data, setData] = useState<Props>()
    const [errorImg, setErrorImg] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
@@ -52,9 +55,11 @@ export default function MemberDetail() {
          } else {
             Toast.show({ type: 'small', text1: response.message })
          }
-      } catch (error) {
-         console.error(error)
-         Toast.show({ type: 'small', text1: 'Gagal mengambil data' })
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -74,13 +79,11 @@ 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} /> : <></>,
                header: () => (
                   <AppHeader title="Anggota"
                      showBack={true}
@@ -93,15 +96,19 @@ export default function MemberDetail() {
             }}
          />
          <ScrollView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >
-            <View style={[Styles.wrapHeadViewMember]}>
+            <LinearGradient
+               colors={[colors.header, colors.homeGradient]}
+               style={[Styles.wrapHeadViewMember]}
+            >
                {
                   loading ?
                      <>
@@ -114,15 +121,15 @@ export default function MemberDetail() {
                         <Pressable onPress={() => setPreview(true)}>
                            <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" onError={setErrorImg} />
                         </Pressable>
-                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, { textAlign: 'center' }]}>{data?.name}</Text>
+                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{data?.name}</Text>
                         <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
                      </>
 
                }
-            </View>
+            </LinearGradient>
             <View style={[Styles.p15]}>
                <View style={[Styles.rowSpaceBetween]}>
-                  <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
+                  <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
                   <LabelStatus
                      size="small"
                      category={data?.isActive ? 'success' : 'error'}

app/(application)/member/create.tsx

@@ -1,6 +1,7 @@
 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";
@@ -10,6 +11,7 @@ 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";
@@ -32,6 +34,7 @@ export default function CreateMember() {
    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: "" });
@@ -182,9 +185,11 @@ export default function CreateMember() {
          } 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 data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -206,25 +211,11 @@ export default function CreateMember() {
    };
 
    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 || loading}
-               //       category="create"
-               //       onPress={() => { handleCreate() }}
-               //    />
-               // ),
                header: () => (
                   <AppHeader title="Anggota"
                      showBack={true}
@@ -240,14 +231,15 @@ export default function CreateMember() {
                )
             }}
          />
+         {loading && <LoadingCenter />}
          <KeyboardAvoidingView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
             <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]} />
@@ -271,6 +263,7 @@ export default function CreateMember() {
                            placeholder="Pilih Lembaga Desa"
                            value={chooseGroup.label}
                            required
+                           bg={colors.card}
                            onPress={() => {
                               setValChoose(chooseGroup.val);
                               setValSelect("group");
@@ -285,6 +278,7 @@ export default function CreateMember() {
                      placeholder="Pilih Jabatan"
                      value={choosePosition.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(choosePosition.val);
                         setValSelect("position");
@@ -298,6 +292,7 @@ export default function CreateMember() {
                      placeholder="Pilih Role"
                      value={chooseRole.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseRole.val);
                         setValSelect("role");
@@ -311,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 => {
@@ -322,6 +318,7 @@ export default function CreateMember() {
                      type="default"
                      placeholder="Nama"
                      required
+                     bg={colors.card}
                      error={error.name}
                      errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
                      onChange={val => {
@@ -333,6 +330,7 @@ export default function CreateMember() {
                      type="default"
                      placeholder="Email"
                      required
+                     bg={colors.card}
                      error={error.email}
                      errorText="Email tidak valid"
                      onChange={val => {
@@ -344,7 +342,8 @@ export default function CreateMember() {
                      type="numeric"
                      placeholder="8XX-XXX-XXX"
                      required
-                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+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 => {
@@ -356,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,6 +1,7 @@
 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";
@@ -10,6 +11,7 @@ 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";
@@ -47,6 +49,7 @@ export default function EditMember() {
    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: "" });
@@ -208,9 +211,11 @@ export default function EditMember() {
          } 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 data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -236,27 +241,11 @@ export default function EditMember() {
    };
 
    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 || loading}
-               //       category="update"
-               //       onPress={() => {
-               //          handleEdit()
-               //       }}
-               //    />
-               // ),
                header: () => (
                   <AppHeader
                      title="Edit Anggota"
@@ -275,15 +264,15 @@ export default function EditMember() {
                )
             }}
          />
-
+         {loading && <LoadingCenter />}
          <KeyboardAvoidingView
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
             <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
                <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                      {
                         errorImg ?
                            <Pressable onPress={pickImageAsync}>
@@ -325,6 +314,7 @@ export default function EditMember() {
                      placeholder="Pilih Jabatan"
                      value={choosePosition.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(choosePosition.val);
                         setValSelect("position");
@@ -338,6 +328,7 @@ export default function EditMember() {
                      placeholder="Pilih Role"
                      value={chooseRole.label}
                      required
+                     bg={colors.card}
                      onPress={() => {
                         setValChoose(chooseRole.val);
                         setValSelect("role");
@@ -352,6 +343,7 @@ export default function EditMember() {
                      placeholder="NIK"
                      required
                      value={data?.nik}
+                     bg={colors.card}
                      error={error.nik}
                      errorText="NIK Harus 16 Karakter"
                      onChange={val => {
@@ -364,6 +356,7 @@ export default function EditMember() {
                      placeholder="Nama"
                      required
                      value={data?.name}
+                     bg={colors.card}
                      error={error.name}
                      errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
                      onChange={val => {
@@ -376,6 +369,7 @@ export default function EditMember() {
                      placeholder="Email"
                      required
                      value={data?.email}
+                     bg={colors.card}
                      error={error.email}
                      errorText="Email tidak valid"
                      onChange={val => {
@@ -387,8 +381,9 @@ export default function EditMember() {
                      type="numeric"
                      placeholder="8XX-XXX-XXX"
                      required
-                     itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+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 => {
@@ -400,6 +395,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

@@ -5,13 +5,16 @@ 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 { 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";
 
@@ -33,95 +36,104 @@ 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)
 
-   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 }]}>
          <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") &&
@@ -131,20 +143,20 @@ export default function Index() {
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <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 (
@@ -168,11 +180,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,4 +1,4 @@
-import BorderBottomItem from "@/components/borderBottomItem";
+import BorderBottomItemVertical from "@/components/borderBottomItemVertical";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
 import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -7,8 +7,10 @@ import { apiGetNotification, 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 { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
 import { RefreshControl, SafeAreaView, View, VirtualizedList } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -24,64 +26,62 @@ type Props = {
 
 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)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setLoading(loading)
-         setPage(thisPage)
-         setWaiting(true)
+   // TanStack Query for Notifications with Infinite Scroll
+   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;
-         }
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-         setWaiting(false)
-      }
-   }
+         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,
+   })
 
+   // 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);
+   // Refetch when manual update state changes
+   useEffect(() => {
+      refetch()
+   }, [updateNotification, refetch])
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      await queryClient.invalidateQueries({ queryKey: ['notifications'] })
+      setRefreshing(false)
    };
 
-   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,
-   });
+   const loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
 
    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 queryClient.invalidateQueries({ queryKey: ['notifications'] })
          pushToPage(category, idContent)
          dispatch(setUpdateNotification(!updateNotification))
       } catch (error) {
@@ -89,46 +89,51 @@ export default function Notification() {
       }
    }
 
-   const handleRefresh = async () => {
-      setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
-      setRefreshing(false)
-   };
+   const arrSkeleton = [0, 1, 2, 3, 4]
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: flatData[index]?.id,
+      title: flatData[index]?.title,
+      desc: flatData[index]?.desc,
+      category: flatData[index]?.category,
+      idContent: flatData[index]?.idContent,
+      isRead: flatData[index]?.isRead,
+      createdAt: flatData[index]?.createdAt,
+   });
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <View style={[Styles.p15]}>
             {
-               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 (
-                              <BorderBottomItem
+                              <BorderBottomItemVertical
                                  borderType="bottom"
                                  icon={
-                                    <View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
-                                       <Feather name="bell" size={25} color="white" />
+                                    <View style={[Styles.iconContent, item.isRead && ColorsStatus.secondary]}>
+                                       <Feather name="bell" size={25} color="black" />
                                     </View>
                                  }
                                  title={item.title}
                                  rightTopInfo={item.createdAt}
                                  desc={item.desc}
-                                 textColor={item.isRead ? 'gray' : 'black'}
+                                 textColor={item.isRead ? 'gray' : colors.text}
                                  onPress={() => {
                                     handleReadNotification(item.id, item.category, item.idContent)
-
                                  }}
+                                 bgColor={'transparent'}
                               />
                            )
                         }}
@@ -140,11 +145,12 @@ export default function Notification() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                            />
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </SafeAreaView>

app/(application)/position/index.tsx

@@ -1,4 +1,3 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -7,16 +6,19 @@ 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 { 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 { 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";
@@ -30,49 +32,53 @@ 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 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) {
@@ -85,8 +91,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', })
@@ -104,8 +113,11 @@ export default function Index() {
          } 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 mengubah data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoadingSubmit(false)
          setVisibleEdit(false)
@@ -129,10 +141,11 @@ 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)
    };
 
@@ -146,24 +159,24 @@ export default function Index() {
    });
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <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 == "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") &&
@@ -173,9 +186,9 @@ export default function Index() {
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   arrSkeleton.map((item, index) => {
                      return (
                         <SkeletonTwoItem key={index} />
@@ -197,8 +210,8 @@ export default function Index() {
                                  }}
                                  borderType="all"
                                  icon={
-                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                       <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
+                                    <View style={[Styles.iconContent]}>
+                                       <MaterialCommunityIcons name="account-tie-outline" size={25} color={'black'} />
                                     </View>
                                  }
                                  title={item.name}
@@ -212,29 +225,28 @@ 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, 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)
@@ -248,13 +260,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}
@@ -266,6 +279,19 @@ export default function Index() {
                </View>
             </View>
          </DrawerBottom>
+
+         <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,4 +1,3 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
@@ -6,23 +5,45 @@ 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 } from "@expo/vector-icons";
+import { LinearGradient } from "expo-linear-gradient";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { Image, Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
-import { useSelector } from 'react-redux';
+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)
+   };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                headerTitle: 'Profile',
@@ -34,33 +55,31 @@ export default function Profile() {
                      onPressLeft={() => router.back()}
                      right={
                         <ButtonHeader
-                           item={<AntDesign name="logout" size={20} color="white" />}
+                           item={<Feather name="settings" size={20} color="white" />}
                            onPress={() => {
-                              AlertKonfirmasi({
-                                 title: 'Keluar',
-                                 desc: 'Apakah anda yakin ingin keluar?',
-                                 onPress: () => { signOut() }
-                              })
+                              router.push('/setting')
                            }}
                         />
                      }
                   />
                )
-               // headerRight: () => <ButtonHeader
-               //    item={<AntDesign name="logout" size={20} color="white" />}
-               //    onPress={() => {
-               //       AlertKonfirmasi({
-               //          title: 'Keluar',
-               //          desc: 'Apakah anda yakin ingin keluar?',
-               //          onPress: () => { signOut() }
-               //       })
-               //    }}
-               // />
             }}
          />
-         <ScrollView style={[Styles.h100]}>
-            <View style={{ flexDirection: 'column' }}>
-               <View style={[Styles.wrapHeadViewMember]}>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
+            <View style={[Styles.flexColumn]}>
+               <LinearGradient
+                  colors={[colors.header, colors.homeGradient]}
+                  style={[Styles.wrapHeadViewMember]}
+               >
                   <Pressable onPress={() => setPreview(true)}>
                      <Image
                         source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
@@ -70,14 +89,12 @@ export default function Profile() {
                   </Pressable>
                   <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
                   <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
-               </View>
+               </LinearGradient>
                <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>
-                     }
+                     <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
                   </View>
+                  {/* Note: ItemDetailMember might need updates to support dynamic colors if it uses default text colors */}
                   <ItemDetailMember category="nik" value={entities.nik} />
                   <ItemDetailMember category="group" value={entities.group} />
                   <ItemDetailMember category="position" value={entities.position} />
@@ -87,6 +104,7 @@ export default function Profile() {
                </View>
             </View>
          </ScrollView>
+
          <ImageViewing
             images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]}
             imageIndex={0}

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

@@ -3,11 +3,13 @@ import BorderBottomItem from "@/components/borderBottomItem"
 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[]>([])
@@ -115,9 +118,11 @@ 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)
       }
@@ -127,7 +132,7 @@ export default function ProjectAddFile() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -153,20 +158,23 @@ export default function ProjectAddFile() {
                )
             }}
          />
-         <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) }}
@@ -180,15 +188,12 @@ export default function ProjectAddFile() {
                {
                   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)/project/[id]/add-member.tsx

@@ -9,6 +9,7 @@ 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";
@@ -23,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()
@@ -43,9 +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)
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+      } catch (error : any ) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal mengambil data"
+
+         Toast.show({ type: 'small', text1: message })
       }
    }
 
@@ -84,9 +88,11 @@ export default function AddMemberProject() {
             dispatch(setUpdateProject({ ...update, member: !update.member }))
             router.back()
          }
-      } 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)
       }
@@ -98,7 +104,7 @@ export default function AddMemberProject() {
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Tambah Anggota Kegiatan',
+               headerTitle: 'Tambah Anggota',
                headerTitleAlign: 'center',
                // headerRight: () => (
                //    <ButtonSaveHeader
@@ -111,7 +117,7 @@ export default function AddMemberProject() {
                // )
                header: () => (
                   <AppHeader
-                     title="Tambah Anggota Kegiatan"
+                     title="Tambah Anggota"
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
@@ -127,7 +133,7 @@ export default function AddMemberProject() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => handleSearch(val)} value={search} />
             {
                selectMember.length > 0
@@ -148,11 +154,11 @@ 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
                showsVerticalScrollIndicator={false}
-               style={[Styles.h100]}
+               style={[Styles.h100, { backgroundColor: colors.background }]}
             >
                {
                   data.length > 0 ?
@@ -163,7 +169,7 @@ export default function AddMemberProject() {
                               return (
                                  <Pressable
                                     key={index}
-                                    style={[Styles.itemSelectModal]}
+                                    style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                                     onPress={() => {
                                        !found && onChoose(item.id, item.name, item.img)
                                     }}
@@ -173,12 +179,12 @@ export default function AddMemberProject() {
                                        <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.id) && <AntDesign name="check" size={20} color={'black'} />
+                                       selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
                                     }
                                  </Pressable>
                               )

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

@@ -1,5 +1,6 @@
 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";
@@ -9,6 +10,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -18,7 +20,6 @@ import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -30,6 +31,7 @@ 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()
@@ -124,16 +126,18 @@ export default function ProjectAddTask() {
          } 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)
       }
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,11 +162,11 @@ export default function ProjectAddTask() {
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
-                           <ButtonSaveHeader
-                              disable={disable || loading}
-                              category="create"
-                              onPress={() => { handleCreate() }}
-                           />
+                        <ButtonSaveHeader
+                           disable={disable || loading}
+                           category="create"
+                           onPress={() => { handleCreate() }}
+                        />
                      }
                   />
                )
@@ -172,9 +176,9 @@ export default function ProjectAddTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             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}
@@ -184,52 +188,53 @@ export default function ProjectAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           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.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
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </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"

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

@@ -5,6 +5,7 @@ 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 React, { 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 ProjectCancel() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch();
@@ -56,16 +58,18 @@ export default function ProjectCancel() {
             Toast.show({ type: 'small', text1: 'Berhasil membatalkan kegiatan', })
             router.back();
          }
-      } catch (error) {
+      } catch (error : any ) {
          console.error(error);
-         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
+         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: () => (
@@ -106,7 +110,7 @@ export default function ProjectCancel() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -114,7 +118,7 @@ export default function ProjectCancel() {
                   type="default"
                   placeholder="Alasan Pembatalan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   error={error}
                   errorText="Alasan pembatalan harus diisi"
                   onChange={(val) => onValidation(val)}

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

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiEditProject, apiGetProjectOne } 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 { 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 EditProject() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch()
@@ -75,9 +77,11 @@ export default function EditProject() {
          } 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)
       }
@@ -86,7 +90,7 @@ export default function EditProject() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -121,14 +125,14 @@ export default function EditProject() {
                )
             }}
          />
-         <ScrollView>
+         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
                   label="Judul Kegiatan"
                   type="default"
                   placeholder="Judul Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={judul}
                   onChange={(val) => { onValidation(val) }}
                   error={error}

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

@@ -10,6 +10,7 @@ import SectionProgress from "@/components/sectionProgress";
 import Styles from "@/constants/Styles";
 import { apiGetProjectOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -32,6 +33,7 @@ type Props = {
 
 export default function DetailProject() {
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props>()
    const [progress, setProgress] = useState(0)
@@ -91,7 +93,7 @@ export default function DetailProject() {
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -111,10 +113,12 @@ export default function DetailProject() {
             }}
          />
          <ScrollView
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}
                   onRefresh={handleRefresh}
+                  tintColor={colors.icon}
                />
             }
          >

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

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
 import { apiGetProjectOne, apiReportProject } 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 { 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 ReportProject() {
+   const { colors } = useTheme();
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const dispatch = useDispatch()
@@ -75,9 +77,11 @@ export default function ReportProject() {
          } 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)
       }
@@ -86,7 +90,7 @@ export default function ReportProject() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -123,7 +127,7 @@ export default function ReportProject() {
          />
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                <InputForm
@@ -131,7 +135,7 @@ export default function ReportProject() {
                   type="default"
                   placeholder="Laporan Kegiatan"
                   required
-                  bg="white"
+                  bg={colors.card}
                   value={laporan}
                   onChange={(val) => { onValidation(val) }}
                   error={error}

app/(application)/project/create.tsx

@@ -5,6 +5,7 @@ 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 SectionListAddTask from "@/components/project/sectionListAddTask";
@@ -18,6 +19,7 @@ import { setMemberChoose } from "@/lib/memberChoose";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { setTaskCreate } from "@/lib/taskCreate";
 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 } from "expo-router";
@@ -31,6 +33,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateProject() {
+   const { colors } = useTheme();
    const [loading, setLoading] = useState(false)
    const { token, decryptToken } = useAuthSession();
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -148,9 +151,11 @@ export default function CreateProject() {
          } 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 data"
+
+         Toast.show({ type: 'small', text1: message })
       } finally {
          setLoading(false)
       }
@@ -190,7 +195,7 @@ export default function CreateProject() {
 
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -228,9 +233,12 @@ export default function CreateProject() {
                )
             }}
          />
+         {
+            loading && <LoadingCenter />
+         }
          <ScrollView
             showsVerticalScrollIndicator={false}
-            style={[Styles.h100]}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <View style={[Styles.p15]}>
                {
@@ -242,6 +250,7 @@ export default function CreateProject() {
                         placeholder="Pilih Lembaga Desa"
                         value={chooseGroup.label}
                         required
+                        bg={colors.card}
                         onPress={() => {
                            setValChoose(chooseGroup.val);
                            setValSelect("group");
@@ -257,6 +266,7 @@ export default function CreateProject() {
                   type="default"
                   placeholder="Nama Kegiatan"
                   required
+                  bg={colors.card}
                   value={dataForm.title}
                   error={error.title}
                   errorText="Nama kegiatan tidak boleh kosong"
@@ -294,13 +304,13 @@ export default function CreateProject() {
                   fileForm.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 }]}>
                            {
                               fileForm.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.name}
                                     titleWeight="normal"
                                     onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -318,7 +328,7 @@ export default function CreateProject() {
                         <Text>Total {entitiesMember.length} Anggota</Text>
                      </View>
 
-                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     <View style={[Styles.borderAll, Styles.round05, Styles.p10, { borderColor: colors.icon + '20', backgroundColor: colors.card }]}>
                         {entitiesMember.map(
                            (item: { img: any; name: any }, index: any) => {
                               return (
@@ -344,7 +354,7 @@ export default function CreateProject() {
          <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/create/member.tsx

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
 import { apiGetUser } 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 } from "expo-router";
 import React, { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
 }
 
 export default function AddMemberCreateProject() {
+   const { colors } = useTheme();
    const dispatch = useDispatch()
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props[]>([])
@@ -103,7 +105,7 @@ export default function AddMemberCreateProject() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1 }]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -125,10 +127,11 @@ export default function AddMemberCreateProject() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }, Styles.pv05]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
+               style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}
             >
 
                {
@@ -137,7 +140,7 @@ export default function AddMemberCreateProject() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => {
                                  onChoose(item.id, item.name, item.img)
                               }}
@@ -149,14 +152,14 @@ export default function AddMemberCreateProject() {
                                  </View>
                               </View>
                               {
-                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                                 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>

app/(application)/project/create/task.tsx

@@ -1,5 +1,6 @@
 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";
@@ -7,6 +8,7 @@ import Styles from "@/constants/Styles";
 import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setTaskCreate } from "@/lib/taskCreate";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack } from "expo-router";
 import 'intl';
@@ -16,7 +18,6 @@ import React, { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
    Platform,
-   Pressable,
    SafeAreaView,
    ScrollView,
    View
@@ -27,6 +28,7 @@ import DateTimePicker, {
 import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateProjectAddTask() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const [disable, setDisable] = useState(true);
@@ -119,7 +121,7 @@ export default function CreateProjectAddTask() {
    }
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,9 +160,9 @@ export default function CreateProjectAddTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             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}
@@ -170,52 +172,53 @@ export default function CreateProjectAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
-                           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.mv10]}>
-                     <View style={[Styles.rowSpaceBetween]}>
+                     <View style={[Styles.rowSpaceBetween, Styles.mb10]}>
                         <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]}>
-                              <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%" }]}>
                            <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, Styles.mt05, { color: colors.error }]}>Tanggal tidak boleh kosong</Text>
                      }
-                     <Pressable
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </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"

app/(application)/project/index.tsx

@@ -7,17 +7,20 @@ import ProgressBar from "@/components/progressBar";
 import Skeleton from "@/components/skeleton";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
+import WrapTab from "@/components/wrapTab";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetProject } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Ionicons,
    MaterialCommunityIcons,
 } 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 { Pressable, RefreshControl, ScrollView, View, VirtualizedList } from "react-native";
 import { useSelector } from "react-redux";
 
@@ -38,26 +41,29 @@ export default function ListProject() {
       cat?: string;
       year?: string;
    }>();
-   const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
+   const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>(
+      (status == '1' || status == '2' || status == '3') ? status : '0'
+   )
    const { token, decryptToken } = useAuthSession();
+   const { colors } = useTheme();
    const entityUser = useSelector((state: any) => state.user)
    const [search, setSearch] = useState("")
-   const [nameGroup, setNameGroup] = useState("")
-   const [isYear, setYear] = useState("")
-   const [data, setData] = useState<Props[]>([])
    const [isList, setList] = useState(false)
    const update = useSelector((state: any) => state.projectUpdate)
-   const [loading, setLoading] = useState(true)
-   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
-   const [page, setPage] = useState(1)
-   const [waiting, setWaiting] = useState(false)
+   const queryClient = useQueryClient()
    const [refreshing, setRefreshing] = useState(false)
 
-   async function handleLoad(loading: boolean, thisPage: number) {
-      try {
-         setLoading(loading)
-         setWaiting(true)
-         setPage(thisPage)
+   // TanStack Query for Projects with Infinite Scroll
+   const {
+      data,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      isLoading,
+      refetch
+   } = useInfiniteQuery({
+      queryKey: ['projects', { statusFix, search, group, cat, year }],
+      queryFn: async ({ pageParam = 1 }) => {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetProject({
             user: hasil,
@@ -65,124 +71,122 @@ export default function ListProject() {
             search: search,
             group: String(group),
             kategori: String(cat),
-            page: thisPage,
+            page: pageParam,
             year: String(year)
          });
+         return response;
+      },
+      initialPageParam: 1,
+      getNextPageParam: (lastPage, allPages) => {
+         return lastPage.data.length > 0 ? allPages.length + 1 : undefined;
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
-         if (response.success) {
-            setNameGroup(response.filter.name);
-            setYear(response.tahun)
-            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)
-      }
-   }
-
+   // Refetch when manual update state changes
    useEffect(() => {
-      handleLoad(false, 1);
-   }, [update.data]);
+      refetch()
+   }, [update.data, refetch])
 
+   // Flatten pages into a single data array
+   const flatData = useMemo(() => {
+      return data?.pages.flatMap(page => page.data) || [];
+   }, [data])
 
-   useEffect(() => {
-      handleLoad(true, 1);
-   }, [statusFix, search, group, cat, year]);
-
-   const loadMoreData = () => {
-      if (waiting) return
-      setTimeout(() => {
-         handleLoad(false, page + 1)
-      }, 1000);
-   }
+   // Get metadata from the first available page
+   const nameGroup = useMemo(() => data?.pages[0]?.filter?.name || "", [data])
+   const isYear = useMemo(() => data?.pages[0]?.tahun || "", [data])
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad(false, 1)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      await queryClient.invalidateQueries({ queryKey: ['projects'] })
       setRefreshing(false)
-   }
+   };
+
+   const loadMoreData = () => {
+      if (hasNextPage && !isFetchingNextPage) {
+         fetchNextPage()
+      }
+   };
+
+   const arrSkeleton = [0, 1, 2]
 
    const getItem = (_data: unknown, index: number): Props => ({
-      id: data[index].id,
-      title: data[index].title,
-      desc: data[index].desc,
-      status: data[index].status,
-      member: data[index].member,
-      progress: data[index].progress,
-      createdAt: data[index].createdAt,
+      id: flatData[index]?.id,
+      title: flatData[index]?.title,
+      desc: flatData[index]?.desc,
+      status: flatData[index]?.status,
+      member: flatData[index]?.member,
+      progress: flatData[index]?.progress,
+      createdAt: flatData[index]?.createdAt,
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
-            <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
-               <ButtonTab
-                  active={statusFix}
-                  value="0"
-                  onPress={() => { setStatusFix("0") }}
-                  label="Segera"
-                  icon={
-                     <MaterialCommunityIcons
-                        name="clock-alert-outline"
-                        color={statusFix == "0" ? "white" : "black"}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-               <ButtonTab
-                  active={statusFix}
-                  value="1"
-                  onPress={() => { setStatusFix("1") }}
-                  label="Dikerjakan"
-                  icon={
-                     <MaterialCommunityIcons
-                        name="progress-check"
-                        color={statusFix == "1" ? "white" : "black"}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-               <ButtonTab
-                  active={statusFix}
-                  value="2"
-                  onPress={() => { setStatusFix("2") }}
-                  label="Selesai"
-                  icon={
-                     <Ionicons
-                        name="checkmark-done-circle-outline"
-                        color={statusFix == "2" ? "white" : "black"}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-               <ButtonTab
-                  active={statusFix}
-                  value="3"
-                  onPress={() => { setStatusFix("3") }}
-                  label="Batal"
-                  icon={
-                     <AntDesign
-                        name="closecircleo"
-                        color={statusFix == "3" ? "white" : "black"}
-                        size={20}
-                     />
-                  }
-                  n={4}
-               />
-            </ScrollView>
-            <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
+            <WrapTab>
+               <ScrollView horizontal showsHorizontalScrollIndicator={false} style={[Styles.round20]}>
+                  <ButtonTab
+                     active={statusFix}
+                     value="0"
+                     onPress={() => { setStatusFix("0") }}
+                     label="Segera"
+                     icon={
+                        <MaterialCommunityIcons
+                           name="clock-alert-outline"
+                           color={statusFix == "0" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+                  <ButtonTab
+                     active={statusFix}
+                     value="1"
+                     onPress={() => { setStatusFix("1") }}
+                     label="Dikerjakan"
+                     icon={
+                        <MaterialCommunityIcons
+                           name="progress-check"
+                           color={statusFix == "1" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+                  <ButtonTab
+                     active={statusFix}
+                     value="2"
+                     onPress={() => { setStatusFix("2") }}
+                     label="Selesai"
+                     icon={
+                        <Ionicons
+                           name="checkmark-done-circle-outline"
+                           color={statusFix == "2" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+                  <ButtonTab
+                     active={statusFix}
+                     value="3"
+                     onPress={() => { setStatusFix("3") }}
+                     label="Batal"
+                     icon={
+                        <AntDesign
+                           name="closecircleo"
+                           color={statusFix == "3" ? "white" : colors.dimmed}
+                           size={20}
+                        />
+                     }
+                     n={4}
+                  />
+               </ScrollView>
+            </WrapTab>
+
+            <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter]}>
                <InputSearch width={68} onChange={setSearch} />
                <Pressable
                   onPress={() => {
@@ -191,38 +195,32 @@ export default function ListProject() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
             </View>
-            <View style={[Styles.mv05]}>
+            <View style={[Styles.mt10]}>
                {
-                  // entityUser.role != 'cosupadmin' && entityUser.role != 'admin' &&
                   <View style={[Styles.rowOnly]}>
                      <Text style={[Styles.mr05]}>Filter :</Text>
                      {
                         (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-                        <LabelStatus size="small" category="secondary" text={nameGroup} style={{ marginRight: 5 }} />
+                        <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mr05]} />
                      }
                      {
                         (entityUser.role == 'user' || entityUser.role == 'coadmin')
-                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="secondary" text="Kegiatan Saya" style={{ marginRight: 5 }} /> : <LabelStatus size="small" category="secondary" text="Semua Kegiatan" style={{ marginRight: 5 }} />
+                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="secondary" text="Kegiatan Saya" style={[Styles.mr05]} /> : <LabelStatus size="small" category="secondary" text="Semua Kegiatan" style={[Styles.mr05]} />
                            : ''
                      }
-                     <LabelStatus size="small" category="secondary" text={isYear} style={{ marginRight: 5 }} />
-                     {/* {
-                        (entityUser.role == 'user' || entityUser.role == 'coadmin')
-                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="primary" text="Kegiatan Saya" /> : <LabelStatus size="small" category="primary" text="Semua Kegiatan" />
-                           : ''
-                     } */}
+                     <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
                   </View>
                }
             </View>
          </View>
-         <View style={[{ flex: 2 }]}>
+         <View style={[Styles.flex2, Styles.mt10]}>
             {
-               loading ?
+               isLoading ?
                   isList ?
                      arrSkeleton.map((item, index) => (
                         <SkeletonTwoItem key={index} />
@@ -232,13 +230,13 @@ export default function ListProject() {
                         <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
                      ))
                   :
-                  data.length > 0
+                  flatData.length > 0
                      ?
                      isList ? (
                         <View style={[Styles.h100]}>
                            <VirtualizedList
-                              data={data}
-                              getItemCount={() => data.length}
+                              data={flatData}
+                              getItemCount={() => flatData.length}
                               getItem={getItem}
                               renderItem={({ item, index }: { item: Props, index: number }) => {
                                  return (
@@ -246,12 +244,13 @@ export default function ListProject() {
                                        key={index}
                                        onPress={() => { router.push(`/project/${item.id}`); }}
                                        borderType="bottom"
+                                       bgColor="transparent"
                                        icon={
-                                          <View style={[Styles.iconContent, ColorsStatus.lightGreen]} >
+                                          <View style={[Styles.iconContent]} >
                                              <AntDesign
                                                 name="areachart"
                                                 size={25}
-                                                color={"#384288"}
+                                                color={"black"}
                                              />
                                           </View>
                                        }
@@ -267,38 +266,16 @@ export default function ListProject() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
-                           {/* {
-                              data.map((item, index) => {
-                                 return (
-                                    <BorderBottomItem
-                                       key={index}
-                                       onPress={() => { router.push(`/project/${item.id}`); }}
-                                       borderType="bottom"
-                                       icon={
-                                          <View
-                                             style={[Styles.iconContent, ColorsStatus.lightGreen]}
-                                          >
-                                             <AntDesign
-                                                name="areachart"
-                                                size={25}
-                                                color={"#384288"}
-                                             />
-                                          </View>
-                                       }
-                                       title={item.title}
-                                    />
-                                 );
-                              })
-                           } */}
                         </View>
                      ) : (
                         <View style={[Styles.h100]}>
                            <VirtualizedList
-                              data={data}
-                              getItemCount={() => data.length}
+                              data={flatData}
+                              getItemCount={() => flatData.length}
                               getItem={getItem}
                               renderItem={({ item, index }: { item: Props, index: number }) => {
                                  return (
@@ -310,20 +287,21 @@ export default function ListProject() {
                                        content="page"
                                        title={item.title}
                                        headerColor="primary"
+                                       titleTail={2}
                                     >
                                        <ProgressBar value={item.progress} category="list" />
                                        <View style={[Styles.rowSpaceBetween]}>
-                                          <Text style={[Styles.textDefault, Styles.cGray]}>
+                                          <Text style={[Styles.textDefault, { color: colors.dimmed }]}>
                                              {item.createdAt}
                                           </Text>
                                           <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' :
@@ -345,51 +323,15 @@ export default function ListProject() {
                                  <RefreshControl
                                     refreshing={refreshing}
                                     onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                  />
                               }
                            />
-                           {/* {data.map((item, index) => {
-                              return (
-                                 <PaperGridContent
-                                    key={index}
-                                    onPress={() => {
-                                       router.push(`/project/${item.id}`);
-                                    }}
-                                    content="page"
-                                    title={item.title}
-                                    headerColor="primary"
-                                 >
-                                    <ProgressBar value={item.progress} category="list" />
-                                    <View style={[Styles.rowSpaceBetween]}>
-                                       <Text style={[Styles.textDefault, Styles.cGray]}>
-                                          {item.createdAt}
-                                       </Text>
-                                       <LabelStatus
-                                          size="default"
-                                          category={
-                                             item.status === 0 ? 'primary' :
-                                                item.status === 1 ? 'warning' :
-                                                   item.status === 2 ? 'success' :
-                                                      item.status === 3 ? 'error' :
-                                                         'primary'
-                                          }
-                                          text={
-                                             item.status === 0 ? 'SEGERA' :
-                                                item.status === 1 ? 'DIKERJAKAN' :
-                                                   item.status === 2 ? 'SELESAI' :
-                                                      item.status === 3 ? 'DIBATALKAN' :
-                                                         'SEGERA'
-                                          }
-                                       />
-                                    </View>
-                                 </PaperGridContent>
-                              );
-                           })} */}
                         </View>
                      )
                      :
                      <View style={[Styles.mt15]}>
-                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada kegiatan</Text>
+                        <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada kegiatan</Text>
                      </View>
             }
          </View>

app/(application)/project/update/[detail].tsx

@@ -1,5 +1,6 @@
 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";
@@ -9,18 +10,20 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
 import { getDatesInRange } from "@/lib/fun_getDatesInRange";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+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 React, { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Platform, Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function UpdateProjectTask() {
+   const { colors } = useTheme();
    const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
@@ -115,9 +118,11 @@ export default function UpdateProjectTask() {
          } 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 {
          setLoadingSubmit(false)
       }
@@ -169,7 +174,7 @@ export default function UpdateProjectTask() {
    }, [range])
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -200,9 +205,9 @@ export default function UpdateProjectTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             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 }]}>
                      {
                         !loading
                         &&
@@ -217,50 +222,51 @@ export default function UpdateProjectTask() {
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
-                              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.mv10]}>
-                     <View style={[Styles.rowSpaceBetween]}>
+                     <View style={[Styles.rowSpaceBetween, Styles.mb10]}>
                         <View style={[{ width: '48%' }]}>
-                           <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
-                              <Text style={{ textAlign: 'center' }}>{from}</Text>
+                           <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={{ color: colors.error }}>*</Text></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%' }]}>
-                           <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text>
-                           <View style={[Styles.wrapPaper, Styles.p10]}>
-                              <Text style={{ textAlign: 'center' }}>{to}</Text>
+                           <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text></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
+                     {/* <Pressable
                         style={[Styles.btnTab, Styles.btnLainnya, dsbButton && Styles.btnDisabled]}
                         disabled={dsbButton}
                         onPress={() => { setModalDetail(true) }}
                      >
                         <Text style={[dsbButton ? Styles.cGray : Styles.cWhite]}>Detail</Text>
-                     </Pressable>
+                     </Pressable> */}
+                     <ButtonSelect value="Detail" onPress={() => { setModalDetail(true) }} />
                   </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"

app/(application)/search.tsx

@@ -8,12 +8,14 @@ import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetSearch } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import React, { useState } from "react";
 import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 
+// ... types ...
 type PropsUser = {
    id: string
    name: string
@@ -43,6 +45,7 @@ export default function Search() {
    const [dataProject, setDataProject] = useState<PropProject[]>([])
    const [refreshing, setRefreshing] = useState(false)
    const [search, setSearch] = useState('')
+   const { colors } = useTheme();
 
    async function handleSearch(cari: string) {
       try {
@@ -62,9 +65,14 @@ export default function Search() {
             setDataDivisi([])
             setDataProject([])
          }
-      } catch (error) {
-         console.error(error)
-         return Toast.show({ type: 'small', text1: 'Gagal melakukan pencarian', })
+      } catch (error: any) {
+         console.error(error);
+         const message = error?.response?.data?.message || "Gagal melakukan pencarian"
+
+         Toast.show({
+            type: 'small',
+            text1: message
+         })
       }
    }
 
@@ -79,7 +87,7 @@ export default function Search() {
 
    return (
       <>
-         <SafeAreaView>
+         <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
             <Stack.Screen
                options={{
                   headerTitle: 'Pencarian',
@@ -100,6 +108,7 @@ export default function Search() {
                            <RefreshControl
                               refreshing={refreshing}
                               onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                            />
                         }
                      >
@@ -177,7 +186,7 @@ export default function Search() {
                      </ScrollView>
                      :
                      <View style={[Styles.contentItemCenter, Styles.mt10]}>
-                        <Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text>
+                        <Text style={[Styles.textInformation, { color: colors.icon }]}>Tidak ada data</Text>
                      </View>
                }