Merge pull request 'amalia/21-jul-25' (#1) from amalia/21-jul-25 into join

Reviewed-on: bip/mobile-darmasaba#1

.easignore

@@ -0,0 +1,43 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+x.ts
+x.sh
+/android
+/ios

.gitignore

@@ -36,3 +36,9 @@ yarn-error.*
 *.tsbuildinfo
 
 app-example
+
+x.ts
+x.sh
+
+google-services.json
+mobile-darmasaba-firebase-adminsdk-fbsvc-f5abb292b5.json

android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

android/.kotlin/errors/errors-1748403150221.log

@@ -0,0 +1,4 @@
+kotlin version: 2.0.21
+error message: The daemon has terminated unexpectedly on startup attempt #1 with error code: 0. The daemon process output:
+    1. Kotlin compile daemon is ready
+

android/.kotlin/errors/errors-1749523770398.log

@@ -0,0 +1,4 @@
+kotlin version: 2.0.21
+error message: The daemon has terminated unexpectedly on startup attempt #1 with error code: 0. The daemon process output:
+    1. Kotlin compile daemon is ready
+

android/app/build.gradle

@@ -0,0 +1,181 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+// apply from: new File(["node", "--print", "require.resolve('expo-modules-core/package.json')"].execute(null, rootDir).text.trim(), "../gradle.groovy")
+// apply from: new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../react.gradle")
+// apply from: new File(["node", "--print", "require.resolve('expo-updates/package.json')"].execute(null, rootDir).text.trim(), "../scripts/create-manifest-android.gradle")
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'mobiledarmasaba.app'
+    defaultConfig {
+        applicationId 'mobiledarmasaba.app'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+apply plugin: 'com.google.gms.google-services'

android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,35 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:requestLegacyExternalStorage="true">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="myapp"/>
+        <data android:scheme="mobiledarmasaba.app"/>
+        <data android:scheme="exp+mobile-darmasaba"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

android/app/src/main/java/mobiledarmasaba/app/MainActivity.kt

@@ -0,0 +1,65 @@
+package mobiledarmasaba.app
+import expo.modules.splashscreen.SplashScreenManager
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

android/app/src/main/java/mobiledarmasaba/app/MainApplication.kt

@@ -0,0 +1,57 @@
+package mobiledarmasaba.app
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import com.facebook.soloader.SoLoader
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+        this,
+        object : DefaultReactNativeHost(this) {
+          override fun getPackages(): List<ReactPackage> {
+            val packages = PackageList(this).packages
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(new MyReactNativePackage());
+            return packages
+          }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, OpenSourceMergedSoMapping)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/iconBackground"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

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

@@ -0,0 +1 @@
+<resources/>

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

@@ -0,0 +1,6 @@
+<resources>
+  <color name="splashscreen_background">#ffffff</color>
+  <color name="iconBackground">#ffffff</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#ffffff</color>
+</resources>

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

@@ -0,0 +1,6 @@
+<resources>
+  <string name="app_name">mobile-darmasaba</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+</resources>

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

@@ -0,0 +1,20 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <item name="android:textColor">@android:color/black</item>
+    <item name="android:editTextStyle">@style/ResetEditText</item>
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</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="ResetEditText" parent="@android:style/Widget.EditText">
+    <item name="android:padding">0dp</item>
+    <item name="android:textColorHint">#c8c8c8</item>
+    <item name="android:textColor">@android:color/black</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+  </style>
+</resources>

android/build.gradle

@@ -0,0 +1,42 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext {
+        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '35.0.0'
+        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '24')
+        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '35')
+        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
+        kotlinVersion = findProperty('android.kotlinVersion') ?: '2.0.21'
+
+        ndkVersion = "27.1.12297006"
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.google.gms:google-services:4.4.1'
+        classpath('com.android.tools.build:gradle')
+        classpath('com.facebook.react:react-native-gradle-plugin')
+        classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+    }
+}
+
+apply plugin: "com.facebook.react.rootproject"
+
+allprojects {
+    repositories {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url(new File(['node', '--print', "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), '../android'))
+        }
+        maven {
+            // Android JSC is installed from npm
+            url(new File(['node', '--print', "require.resolve('jsc-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), '../dist'))
+        }
+
+        google()
+        mavenCentral()
+        maven { url 'https://www.jitpack.io' }
+    }
+}

android/gradle.properties

@@ -0,0 +1,59 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+# Whether the app is configured to use edge-to-edge via the app config or `react-native-edge-to-edge` plugin
+expo.edgeToEdgeEnabled=false

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,252 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,44 @@
+pluginManagement {
+    includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().toString())
+}
+plugins { id("com.facebook.react.settings") }
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    def command = [
+      'node',
+      '--no-warnings',
+      '--eval',
+      'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
+      'react-native-config',
+      '--json',
+      '--platform',
+      'android'
+    ].toList()
+    ex.autolinkLibrariesFromCommand(command)
+  }
+}
+
+rootProject.name = 'mobile-darmasaba'
+
+dependencyResolutionManagement {
+  versionCatalogs {
+    reactAndroidLibs {
+      from(files(new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../gradle/libs.versions.toml")))
+    }
+  }
+}
+
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
+useExpoModules()
+
+include ':app'
+includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())
+
+// apply from: new File(["node", "--print", "require.resolve('expo-modules-core/package.json')"].execute(null, rootDir).text.trim(), "../gradle.groovy");
+// includeUnimodulesProjects()
+
+// apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+// applyNativeModulesSettingsGradle(settings)

app.json

@@ -9,13 +9,19 @@
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "mobiledarmasaba.app",
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false
+      }
     },
     "android": {
+      "package": "mobiledarmasaba.app",
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/images/splash-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "googleServicesFile": "./google-services.json"
     },
     "web": {
       "bundler": "metro",
@@ -32,10 +38,18 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      "expo-font",
+      "expo-web-browser"
     ],
     "experiments": {
       "typedRoutes": true
+    },
+    "extra": {
+      "router": {},
+      "eas": {
+        "projectId": "cfe34fb8-da8c-4004-b5c6-29d07df75cf2"
+      }
     }
   }
 }

app/(application)/_layout.tsx

@@ -1,14 +1,127 @@
+import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
+import HeaderRightDivisionList from "@/components/division/headerDivisionList";
+import HeaderRightGroupList from "@/components/group/headerGroupList";
+import HeaderMemberList from "@/components/member/headerMemberList";
+import HeaderRightPositionList from "@/components/position/headerRightPositionList";
+import HeaderRightProjectList from "@/components/project/headerProjectList";
 import { Headers } from "@/constants/Headers";
-import { Stack } from "expo-router";
+import { apiReadOneNotification } from "@/lib/api";
+import { pushToPage } from "@/lib/pushToPage";
+import store from "@/lib/store";
+import { useAuthSession } from "@/providers/AuthProvider";
+import messaging from "@react-native-firebase/messaging";
+import { Redirect, router, Stack } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
+import { useEffect } from "react";
+import { Text } from "react-native";
+import { Easing, Notifier } from 'react-native-notifier';
+import { Provider } from "react-redux";
 
 export default function RootLayout() {
+   const { token, decryptToken, isLoading } = useAuthSession()
+
+   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 })
+         pushToPage(category, idContent)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   useEffect(() => {
+      const unsubscribe = messaging().onMessage(async remoteMessage => {
+         const id = remoteMessage?.data?.id;
+         const category = remoteMessage?.data?.category;
+         const content = remoteMessage?.data?.content;
+         if (remoteMessage.notification != undefined && remoteMessage.notification.title != undefined && remoteMessage.notification.body != undefined) {
+            Notifier.showNotification({
+               title: remoteMessage.notification?.title,
+               description: remoteMessage.notification?.body,
+               duration: 3000,
+               animationDuration: 300,
+               showEasing: Easing.ease,
+               onPress: () => handleReadNotification(String(id), String(category), String(content)),
+               hideOnPress: true,
+            });
+         }
+      });
+
+      return unsubscribe;
+   }, []);
+
+
+   if (isLoading) {
+      return <Text>Loading...</Text>;
+   }
+
+   if (!token?.current) {
+      return <Redirect href="/" />;
+   }
+
    return (
-      <>
-         <Stack screenOptions={Headers.shadow}>
+      <Provider store={store}>
+         <Stack screenOptions={Headers.shadow} >
             <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'
+            }} />
+            <Stack.Screen name="profile" options={{ title: 'Profile' }} />
+            <Stack.Screen name="member/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               title: 'Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderMemberList />
+            }} />
+            <Stack.Screen name="discussion/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               title: 'Diskusi Umum',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderDiscussionGeneral />
+            }} />
+            <Stack.Screen name="project/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               title: 'Kegiatan',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightProjectList />
+            }} />
+            <Stack.Screen name="division/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               title: 'Divisi',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightDivisionList />
+            }} />
+            <Stack.Screen name="division/[id]/(fitur-division)" options={{ headerShown: false }} />
+            <Stack.Screen name="group/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Lembaga Desa',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightGroupList />
+            }} />
+            <Stack.Screen name="position/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Jabatan',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightPositionList />
+            }} />
+            <Stack.Screen name="announcement/index"
+               options={{
+                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+                  headerTitle: 'Pengumuman',
+                  headerTitleAlign: 'center',
+                  headerRight: () => <HeaderRightAnnouncementList />
+               }}
+            />
          </Stack>
-         <StatusBar style="light" />
-      </>
+         <StatusBar style="light" translucent={false} backgroundColor="black" />
+      </Provider>
    )
 }

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

@@ -0,0 +1,132 @@
+import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import Skeleton from "@/components/skeleton";
+import Styles from "@/constants/Styles";
+import { apiGetAnnouncementOne } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Entypo, MaterialIcons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Dimensions, SafeAreaView, ScrollView, Text, View } from "react-native";
+import RenderHTML from 'react-native-render-html';
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string
+   title: string
+   desc: string
+}
+
+export default function DetailAnnouncement() {
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<Props>({ id: '', title: '', desc: '' })
+   const [dataMember, setDataMember] = useState<any>({})
+   const update = useSelector((state: any) => state.announcementUpdate)
+   const entityUser = useSelector((state: any) => state.user)
+   const contentWidth = Dimensions.get('window').width
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
+
+   async function handleLoad(loading: boolean) {
+      try {
+         setLoading(loading)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetAnnouncementOne({ id: id, user: hasil })
+         setData(response.data)
+         setDataMember(response.member)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false)
+   }, [update])
+
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pengumuman',
+               headerTitleAlign: 'center',
+               headerRight: () => entityUser.role != 'user' && entityUser.role != 'coadmin' ? <HeaderRightAnnouncementDetail id={id} /> : <></>,
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <View style={[Styles.wrapPaper]}>
+                  {
+                     loading ?
+                        <View>
+                           <View style={[Styles.rowOnly]}>
+                              <Skeleton width={30} height={30} borderRadius={10} />
+                              <View style={[{ flex: 1 }, Styles.ph05]}>
+                                 <Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
+                              </View>
+                           </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}>
+                              <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
+                              <Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
+                           </View>
+                           <View style={[Styles.mt10]}>
+                              <RenderHTML
+                                 contentWidth={contentWidth}
+                                 source={{ html: data?.desc }}
+                              />
+                           </View>
+                        </>
+                  }
+
+               </View>
+               <View style={[Styles.wrapPaper, Styles.mv15]}>
+                  {
+                     loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <View key={index}>
+                                 <Skeleton width={30} widthType="percent" height={10} borderRadius={10} />
+                                 <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                                 <Skeleton width={100} widthType="percent" height={10} borderRadius={10} />
+                              </View>
+                           )
+                        })
+                        :
+                        Object.keys(dataMember).map((v: any, i: any) => {
+                           return (
+                              <View key={i} style={[Styles.mb05]}>
+                                 <Text style={[Styles.textDefaultSemiBold]}>{dataMember[v]?.[0].group}</Text>
+                                 {
+                                    dataMember[v].map((item: any, x: any) => {
+                                       return (
+                                          <View key={x} style={[Styles.rowItemsCenter, Styles.w90]}>
+                                             <Entypo name="dot-single" size={24} color="black" />
+                                             <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
+                                          </View>
+                                       )
+                                    })
+                                 }
+
+                              </View>
+                           )
+                        })
+                  }
+               </View>
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/announcement/create.tsx

@@ -0,0 +1,187 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
+import { InputForm } from "@/components/inputForm";
+import ModalSelectMultiple from "@/components/modalSelectMultiple";
+import Styles from "@/constants/Styles";
+import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
+import { apiCreateAnnouncement } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Entypo } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, StyleSheet, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function CreateAnnouncement() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.announcementUpdate)
+   const { token, decryptToken } = useAuthSession()
+   const [disableBtn, setDisableBtn] = useState(true);
+   const [modalDivisi, setModalDivisi] = useState(false);
+   const [divisionMember, setDivisionMember] = useState<any>([]);
+   const [dataForm, setDataForm] = useState({
+      title: "",
+      desc: "",
+   });
+   const [error, setError] = useState({
+      title: false,
+      desc: false,
+   });
+
+   function validationForm(cat: string, val: any) {
+      if (cat == "title") {
+         setDataForm({ ...dataForm, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      } else if (cat == "desc") {
+         setDataForm({ ...dataForm, desc: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, desc: true });
+         } else {
+            setError({ ...error, desc: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) ||
+         Object.values(dataForm).some((v) => v == "")
+      ) {
+         setDisableBtn(true);
+      } else {
+         setDisableBtn(false);
+      }
+   }
+
+   useEffect(() => {
+      checkForm();
+   }, [error, dataForm]);
+
+   async function handleCreate() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCreateAnnouncement({
+            data: { ...dataForm, user: hasil, groups: divisionMember },
+         });
+         if (response.success) {
+            dispatch(setUpdateAnnouncement(!update))
+            ToastAndroid.show("Berhasil menambahkan data", ToastAndroid.SHORT);
+            router.back();
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Pengumuman",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="create"
+                     onPress={() => {
+                        divisionMember.length == 0
+                           ? ToastAndroid.show("Anda belum memilih divisi", ToastAndroid.SHORT)
+                           : handleCreate();
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul Pengumuman"
+                  required
+                  error={error.title}
+                  errorText="Judul harus diisi"
+                  onChange={(val) => validationForm("title", val)}
+               />
+               <InputForm
+                  label="Pengumuman"
+                  type="default"
+                  placeholder="Deskripsi Pengumuman"
+                  required
+                  error={error.desc}
+                  errorText="Pengumuman harus diisi"
+                  onChange={(val) => validationForm("desc", val)}
+                  multiline
+               />
+               <ButtonSelect
+                  value="Pilih divisi penerima pengumuman"
+                  onPress={() => {
+                     setModalDivisi(true)
+                  }}
+               />
+
+               {
+                  divisionMember.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     {
+                        divisionMember.map((item: { name: any; Division: any }, index: any) => {
+                           return (
+                              <View key={index}>
+                                 <Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
+                                 {
+                                    item.Division.map((division: any, i: any) => (
+                                       <View key={i} style={[Styles.rowItemsCenter, Styles.mv05]}>
+                                          <Entypo name="dot-single" size={24} color="black" />
+                                          <Text style={[Styles.textDefault]}>{division.name}</Text>
+                                       </View>
+                                    ))
+                                 }
+                              </View>
+                           )
+                        })
+                     }
+                  </View>
+               }
+            </View>
+         </ScrollView>
+
+         <ModalSelectMultiple
+            choose="dinas"
+            title="Pilih Divisi"
+            category="choose-division"
+            open={modalDivisi}
+            close={setModalDivisi}
+            onSelect={(val) => {
+               setDivisionMember(val)
+               setModalDivisi(false)
+            }}
+         />
+      </SafeAreaView>
+   );
+}
+
+const styles = StyleSheet.create({
+   container: {
+      padding: 20,
+   },
+   textArea: {
+      height: 100, // Or use flex-based sizing
+      borderColor: 'gray',
+      borderWidth: 1,
+      padding: 10,
+      textAlignVertical: 'top', // Important for Android to align text at the top
+   },
+});

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

@@ -0,0 +1,219 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
+import { InputForm } from "@/components/inputForm";
+import ModalSelectMultiple from "@/components/modalSelectMultiple";
+import Styles from "@/constants/Styles";
+import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
+import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Entypo } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+
+type GroupDivision = {
+   id: string;
+   name: string;
+   Division: {
+      id: string;
+      name: string;
+   }[];
+}
+
+export default function EditAnnouncement() {
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.announcementUpdate)
+   const { token, decryptToken } = useAuthSession();
+   const [modalDivisi, setModalDivisi] = useState(false);
+   const [disableBtn, setDisableBtn] = useState(true);
+   const [dataMember, setDataMember] = useState<any>([]);
+   const [dataForm, setDataForm] = useState({
+      title: "",
+      desc: "",
+   });
+   const [error, setError] = useState({
+      title: false,
+      desc: false,
+   });
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetAnnouncementOne({ id: id, user: hasil });
+         setDataForm(response.data);
+
+         const arrNew: GroupDivision[] = []
+         const coba = Object.keys(response.member).map((v: any, i: any) => {
+            const newObject = {
+               "id": response.member[v][0].idGroup,
+               "name": v,
+               "Division": response.member[v]
+            }
+
+            response.member[v].map((v: any, i: any) => {
+               newObject["Division"][i] = {
+                  "id": v.idDivision,
+                  "name": v.division
+               }
+            })
+            arrNew.push(newObject)
+         })
+         setDataMember(arrNew);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   function validationForm(cat: string, val: any) {
+      if (cat == "title") {
+         setDataForm({ ...dataForm, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      } else if (cat == "desc") {
+         setDataForm({ ...dataForm, desc: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, desc: true });
+         } else {
+            setError({ ...error, desc: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) ||
+         Object.values(dataForm).some((v) => v == "")
+      ) {
+         setDisableBtn(true);
+      } else {
+         setDisableBtn(false);
+      }
+   }
+
+   useEffect(() => {
+      checkForm();
+   }, [error, dataForm]);
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiEditAnnouncement({
+            ...dataForm, user: hasil, groups: dataMember,
+         }, id);
+         if (response.success) {
+            dispatch(setUpdateAnnouncement(!update))
+            ToastAndroid.show("Berhasil mengubah data", ToastAndroid.SHORT);
+            router.back();
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Pengumuman",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="update"
+                     onPress={() => {
+                        dataMember.length == 0
+                           ? ToastAndroid.show("Anda belum memilih divisi", ToastAndroid.SHORT)
+                           : handleEdit();
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul Pengumuman"
+                  required
+                  error={error.title}
+                  errorText="Judul harus diisi"
+                  onChange={(val) => validationForm("title", val)}
+                  value={dataForm.title}
+               />
+               <InputForm
+                  label="Pengumuman"
+                  type="default"
+                  placeholder="Deskripsi Pengumuman"
+                  required
+                  error={error.desc}
+                  errorText="Pengumuman harus diisi"
+                  onChange={(val) => validationForm("desc", val)}
+                  value={dataForm.desc}
+                  multiline
+               />
+               <ButtonSelect
+                  value="Pilih divisi penerima pengumuman"
+                  onPress={() => {
+                     setModalDivisi(true)
+                  }}
+               />
+               {
+                  dataMember.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                     {
+                        dataMember.map((item: { name: any; Division: any }, index: any) => {
+                           return (
+                              <View key={index}>
+                                 <Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
+                                 {
+                                    item.Division.map((division: any, i: any) => (
+                                       <View key={i} style={[Styles.rowItemsCenter, Styles.mv05]}>
+                                          <Entypo name="dot-single" size={24} color="black" />
+                                          <Text style={[Styles.textDefault]}>{division.name}</Text>
+                                       </View>
+                                    ))
+                                 }
+                              </View>
+                           )
+                        })
+                     }
+                  </View>
+               }
+            </View>
+         </ScrollView>
+
+         <ModalSelectMultiple
+            choose="dinas"
+            title="Pilih Divisi"
+            category="choose-division"
+            open={modalDivisi}
+            close={setModalDivisi}
+            onSelect={(val) => {
+               setDataMember(val)
+               setModalDivisi(false)
+            }}
+            value={dataMember}
+         />
+      </SafeAreaView>
+   );
+}

app/(application)/announcement/index.tsx

@@ -0,0 +1,138 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import InputSearch from "@/components/inputSearch";
+import SkeletonContent from "@/components/skeletonContent";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiGetAnnouncement } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { MaterialIcons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useEffect, useState } from "react";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string,
+   title: string,
+   desc: string,
+   createdAt: string
+}
+
+
+export default function Announcement() {
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<Props[]>([])
+   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)
+         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)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false, 1)
+   }, [update])
+
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [search])
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      createdAt: data[index].createdAt,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <InputSearch onChange={setSearch} />
+         </View>
+         <View style={[{ flex: 2 }, Styles.mb50]}>
+            {
+               loading ?
+                  arrSkeleton.map((item, index) => {
+                     return (
+                        <SkeletonContent key={index} />
+                     )
+                  })
+                  :
+                  data.length > 0
+                     ?
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => { router.push(`/announcement/${item.id}`) }}
+                                 borderType="bottom"
+                                 icon={
+                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                       <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                                    </View>
+                                 }
+                                 title={item.title}
+                                 desc={item.desc.replace(/<[^>]*>?/gm, '')}
+                                 rightTopInfo={item.createdAt}
+                              />
+                           )
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        onEndReached={loadMoreData}
+                        onEndReachedThreshold={0.5}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
+                     />
+                     :
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada pengumuman</Text>
+            }
+         </View>
+      </View>
+   )
+}

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

@@ -0,0 +1,176 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditBanner, apiGetBanner, apiGetBannerOne } from "@/lib/api";
+import { setEntities } from "@/lib/bannerSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Entypo } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   Image,
+   Pressable,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import { useDispatch } from "react-redux";
+
+export default function EditBanner() {
+   const dispatch = useDispatch();
+   const { decryptToken, token } = useAuthSession();
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [selectedImage, setSelectedImage] = useState<
+      string | undefined | { uri: string }
+   >(undefined);
+   const [title, setTitle] = useState("");
+   const [error, setError] = useState(false);
+   const [imgForm, setImgForm] = useState<any>();
+
+   const pickImageAsync = async () => {
+      let result = await ImagePicker.launchImageLibraryAsync({
+         mediaTypes: ["images"],
+         allowsEditing: true,
+         quality: 1,
+         aspect: [1535, 450],
+      });
+
+      if (!result.canceled) {
+         setSelectedImage(result.assets[0].uri);
+         setImgForm(result.assets[0]);
+      } else {
+         alert("Tidak ada gambar yang dipilih");
+      }
+   };
+
+   const handleLoadData = async () => {
+      const hasil = await decryptToken(String(token?.current));
+      const data = await apiGetBannerOne({ user: hasil, id });
+      setSelectedImage({
+         uri: `https://wibu-storage.wibudev.com/api/files/${data.data.image}`,
+      });
+      setTitle(data.data.title);
+   };
+
+   useEffect(() => {
+      handleLoadData();
+   }, []);
+
+   function onValidate(val: string) {
+      setTitle(val);
+      if (val == "") {
+         setError(true);
+      } else {
+         setError(false);
+      }
+   }
+
+   const handleUpdateEntity = async () => {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
+
+         if (imgForm != undefined) {
+            fd.append("file", {
+               uri: imgForm.uri,
+               type: imgForm.mimeType,
+               name: imgForm.fileName,
+            } as any);
+         } else {
+            fd.append("file", "undefined",);
+         }
+
+         fd.append(
+            "data",
+            JSON.stringify({
+               title,
+               user: hasil,
+            })
+         );
+
+         const updatedEntity = await apiEditBanner(fd, id)
+         if (updatedEntity.success) {
+            ToastAndroid.show("Berhasil mengupdate data", ToastAndroid.SHORT);
+            apiGetBanner({ user: hasil }).then((data) =>
+               dispatch(setEntities(data.data))
+            );
+            router.back();
+         } else {
+            ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT);
+      }
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Banner",
+               headerTitleAlign: "center",
+               headerRight: () => <ButtonSaveHeader
+                  disable={title == "" || error ? true : false}
+                  onPress={() => { handleUpdateEntity() }}
+                  category="update" />,
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.mb15]}>
+                  {selectedImage != undefined ? (
+                     <Pressable onPress={pickImageAsync}>
+                        <Image
+                           src={
+                              typeof selectedImage === "string"
+                                 ? selectedImage
+                                 : selectedImage.uri
+                           }
+                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                        />
+                     </Pressable>
+                  ) : (
+                     <Pressable
+                        onPress={pickImageAsync}
+                        style={[Styles.wrapPaper, Styles.contentItemCenter]}
+                     >
+                        <View
+                           style={{ justifyContent: "center", alignItems: "center" }}
+                        >
+                           <Entypo name="image" size={50} color={"#aeaeae"} />
+                           <Text style={[Styles.textInformation, Styles.mt05]}>
+                              Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk
+                              memastikan
+                           </Text>
+                        </View>
+                     </Pressable>
+                  )}
+               </View>
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul"
+                  required
+                  bg="white"
+                  value={title}
+                  error={error}
+                  onChange={onValidate}
+                  errorText="Judul tidak boleh kosong"
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

app/(application)/banner/create.tsx

@@ -0,0 +1,154 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiCreateBanner, apiGetBanner } from "@/lib/api";
+import { setEntities } from "@/lib/bannerSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Entypo } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { router, Stack } from "expo-router";
+import { useState } from "react";
+import {
+   Image,
+   Pressable,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import { useDispatch } from "react-redux";
+
+export default function CreateBanner() {
+   const { decryptToken, token } = useAuthSession();
+   const dispatch = useDispatch();
+   const [selectedImage, setSelectedImage] = useState<string | undefined>(
+      undefined
+   );
+   const [imgForm, setImgForm] = useState<any>();
+   const [title, setTitle] = useState("");
+   const [error, setError] = useState(false);
+
+   const pickImageAsync = async () => {
+      let result = await ImagePicker.launchImageLibraryAsync({
+         mediaTypes: ["images"],
+         allowsEditing: true,
+         quality: 1,
+         aspect: [1535, 450],
+      });
+      if (!result.canceled) {
+         if (result.assets?.[0].uri) {
+            setSelectedImage(result.assets[0].uri);
+            setImgForm(result.assets[0]);
+         } else {
+            alert("Tidak ada gambar yang dipilih");
+         }
+      }
+   };
+
+   function onValidate(val: string) {
+      setTitle(val)
+      if (val == "") {
+         setError(true);
+      } else {
+         setError(false);
+      }
+   }
+
+   const handleCreateEntity = async () => {
+      const hasil = await decryptToken(String(token?.current));
+      const fd = new FormData();
+
+      fd.append("file", {
+         uri: imgForm.uri,
+         type: imgForm.mimeType,
+         name: imgForm.fileName,
+      } as any);
+
+      fd.append(
+         "data",
+         JSON.stringify({
+            title,
+            user: hasil,
+         })
+      );
+
+      const createdEntity = await apiCreateBanner(fd);
+      if (createdEntity.success) {
+         ToastAndroid.show("Berhasil menambahkan data", ToastAndroid.SHORT);
+         apiGetBanner({ user: hasil }).then((data) =>
+            dispatch(setEntities(data.data))
+         );
+         router.back();
+      } else {
+         ToastAndroid.show('Gagal menambahkan data', ToastAndroid.SHORT);
+      }
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Banner",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={title == "" || selectedImage == undefined || error ? true : false}
+                     category="create"
+                     onPress={() => {
+                        handleCreateEntity();
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.mb15]}>
+                  {selectedImage != undefined ? (
+                     <Pressable onPress={pickImageAsync}>
+                        <Image
+                           src={selectedImage}
+                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                        />
+                     </Pressable>
+                  ) : (
+                     <Pressable
+                        onPress={pickImageAsync}
+                        style={[Styles.wrapPaper, Styles.contentItemCenter]}
+                     >
+                        <View
+                           style={{ justifyContent: "center", alignItems: "center" }}
+                        >
+                           <Entypo name="image" size={50} color={"#aeaeae"} />
+                           <Text style={[Styles.textInformation, Styles.mt05]}>
+                              Mohon unggah gambar dalam resolusi 1535 x 450 pixel untuk
+                              memastikan
+                           </Text>
+                        </View>
+                     </Pressable>
+                  )}
+               </View>
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul"
+                  required
+                  bg="white"
+                  onChange={onValidate}
+                  error={error}
+                  errorText="Judul harus diisi"
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

app/(application)/banner/index.tsx

@@ -0,0 +1,179 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import HeaderRightBannerList from "@/components/banner/headerBannerList"
+import BorderBottomItem from "@/components/borderBottomItem"
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import DrawerBottom from "@/components/drawerBottom"
+import MenuItemRow from "@/components/menuItemRow"
+import ModalLoading from "@/components/modalLoading"
+import Styles from "@/constants/Styles"
+import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
+import { setEntities } from "@/lib/bannerSlice"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
+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 { Alert, Image, Platform, RefreshControl, SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+import * as mime from 'react-native-mime-types'
+import { useDispatch, useSelector } from "react-redux"
+
+
+type Props = {
+   id: string
+   name: string
+   extension: string
+   image: string
+}
+
+export default function BannerList() {
+   const { decryptToken, token } = useAuthSession()
+   const [isModal, setModal] = useState(false)
+   const entities = useSelector((state: any) => state.banner)
+   const [dataId, setDataId] = useState('')
+   const [selectFile, setSelectFile] = useState<Props | null>(null)
+   const dispatch = useDispatch()
+   const [refreshing, setRefreshing] = useState(false)
+   const [loadingOpen, setLoadingOpen] = useState(false)
+
+   const handleDeleteEntity = async () => {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const deletedEntity = await apiDeleteBanner({ user: hasil }, dataId);
+         if (deletedEntity.success) {
+            ToastAndroid.show("Berhasil menghapus data", ToastAndroid.SHORT);
+            apiGetBanner({ user: hasil }).then((data) =>
+               dispatch(setEntities(data.data))
+            );
+         } else {
+            ToastAndroid.show('Gagal menghapus data', ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         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));
+      setRefreshing(false)
+   };
+
+   const openFile = () => {
+      setModal(false)
+      setLoadingOpen(true)
+      let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + selectFile?.image;
+      const fileName = selectFile?.name + '.' + selectFile?.extension;
+      let localPath = `${FileSystem.documentDirectory}/${fileName}`;
+      const mimeType = mime.lookup(fileName)
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         try {
+
+            if (Platform.OS == 'android') {
+               // open with android intent
+               await startActivityAsync(
+                  'android.intent.action.VIEW',
+                  {
+                     data: contentURL,
+                     flags: 1,
+                     type: mimeType as string,
+                  }
+               );
+               // or
+               // Sharing.shareAsync(localPath);      
+
+            } else if (Platform.OS == 'ios') {
+               Sharing.shareAsync(localPath);
+            }
+         } catch (error) {
+            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
+         } finally {
+            setLoadingOpen(false)
+         }
+      });
+   };
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Banner',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightBannerList />
+            }}
+         />
+         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }
+         >
+            <View style={[Styles.p15, Styles.mb100]}>
+               {entities.map((index: any, key: number) => (
+                  <BorderBottomItem
+                     key={key}
+                     onPress={() => {
+                        setDataId(index.id)
+                        setSelectFile(index)
+                        setModal(true)
+                     }}
+                     borderType="all"
+                     icon={
+                        <Image
+                           source={{ uri: `https://wibu-storage.wibudev.com/api/files/${index.image}` }}
+                           style={[Styles.imgListBanner]}
+                        />
+                     }
+                     title={index.title}
+                  />
+               ))}
+            </View>
+         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  title="Edit"
+                  onPress={() => {
+                     setModal(false)
+                     router.push(`/banner/${dataId}`)
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  title="Lihat File"
+                  onPress={() => { openFile() }}
+               />
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => {
+                     setModal(false)
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menghapus data?',
+                        onPress: () => { handleDeleteEntity() }
+                     })
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,224 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
+import ImageUser from "@/components/imageNew";
+import { InputForm } from "@/components/inputForm";
+import LabelStatus from "@/components/labelStatus";
+import Skeleton from "@/components/skeleton";
+import SkeletonContent from "@/components/skeletonContent";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { firebase } from '@react-native-firebase/database';
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string
+   isActive: boolean
+   title: string
+   desc: string
+   status: number
+   createdAt: string
+}
+
+type PropsKomentar = {
+   id: string
+   comment: string
+   createdAt: string
+   idUser: string
+   img: string
+   username: string
+}
+
+export default function DetailDiscussionGeneral() {
+   const { token, decryptToken } = useAuthSession()
+   const entityUser = useSelector((state: any) => state.user)
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [data, setData] = useState<Props>()
+   const [dataKomentar, setDataKomentar] = useState<PropsKomentar[]>([])
+   const [memberDiscussion, setMemberDiscussion] = useState(false)
+   const [komentar, setKomentar] = useState('')
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   const [loading, setLoading] = useState(true)
+   const [loadingKomentar, setLoadingKomentar] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
+   const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-general/${id}`);
+
+   useEffect(() => {
+      const onValueChange = reference.on('value', snapshot => {
+         if (snapshot.val() == null) {
+            reference.set({ trigger: true })
+         }
+         handleLoad('komentar', false)
+      });
+
+      // Stop listening for updates when no longer required
+      return () => reference.off('value', onValueChange);
+   }, []);
+
+   function updateTrigger() {
+      reference.once('value', snapshot => {
+         const data = snapshot.val();
+         reference.update({ trigger: !data.trigger });
+      });
+   }
+
+
+   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota', loading: boolean) {
+      try {
+         if (cat == "detail") {
+            setLoading(loading)
+         } else if (cat == "komentar") {
+            setLoadingKomentar(loading)
+         }
+
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat })
+
+         if (cat == 'detail') {
+            setData(response.data)
+         } else if (cat == 'komentar') {
+            setDataKomentar(response.data)
+         } else if (cat == 'cek-anggota') {
+            setMemberDiscussion(response.data)
+         }
+
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+         setLoadingKomentar(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad('detail', false)
+      handleLoad('komentar', false)
+      handleLoad('cek-anggota', false)
+   }, [update]);
+
+   useEffect(() => {
+      handleLoad('detail', true)
+      handleLoad('komentar', true)
+      handleLoad('cek-anggota', true)
+   }, []);
+
+   async function handleKomentar() {
+      try {
+         if (komentar != '') {
+            const hasil = await decryptToken(String(token?.current))
+            const response = await apiSendDiscussionGeneralCommentar({ id: id, data: { desc: komentar, user: hasil } })
+            if (response.success) {
+               setKomentar('')
+               updateTrigger()
+            }
+         }
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   return (
+      <>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Diskusi',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />,
+            }}
+         />
+         <View style={{ flex: 1 }}>
+            <ScrollView>
+               <View style={[Styles.p15, Styles.mb100]}>
+                  {
+                     loading ?
+                        <SkeletonContent />
+                        :
+                        <BorderBottomItem
+                           descEllipsize={false}
+                           width={55}
+                           borderType="bottom"
+                           icon={
+                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                 <MaterialIcons name="chat" size={25} color={'#384288'} />
+                              </View>
+                           }
+                           title={data?.title}
+                           subtitle={
+                              !data?.isActive ?
+                                 <LabelStatus category='warning' text='ARSIP' size="small" />
+                                 :
+                                 <LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} size="small" />
+                           }
+                           rightTopInfo={data?.createdAt}
+                           desc={data?.desc}
+                           leftBottomInfo={
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                                 <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
+                              </View>
+                           }
+                        />
+                  }
+                  <View style={[Styles.p15]}>
+                     {
+                        loadingKomentar ?
+                           arrSkeleton.map((item: any, i: number) => {
+                              return (
+                                 <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
+                              )
+                           })
+                           :
+                           dataKomentar.map((item, i) => {
+                              return (
+                                 <BorderBottomItem
+                                    key={i}
+                                    width={55}
+                                    borderType="bottom"
+                                    icon={
+                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="xs" />
+                                    }
+                                    title={item.username}
+                                    rightTopInfo={item.createdAt}
+                                    desc={item.comment}
+                                 />
+                              )
+                           })
+                     }
+                  </View>
+               </View>
+            </ScrollView>
+            <View style={[
+               Styles.contentItemCenter,
+               Styles.absolute0,
+               Styles.w100,
+               { backgroundColor: "#f4f4f4" },
+            ]}>
+               <InputForm
+                  disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
+                  type="default"
+                  round
+                  placeholder="Kirim Komentar"
+                  bg="white"
+                  onChange={setKomentar}
+                  value={komentar}
+                  itemRight={
+                     <Pressable onPress={() => {
+                        (komentar != '' && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
+                           && handleKomentar()
+                     }}>
+                        <MaterialIcons name="send" size={25} style={(komentar == '' || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? Styles.cGray : Styles.cDefault} />
+                     </Pressable>
+                  }
+               />
+            </View>
+         </View >
+      </>
+   )
+}

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

@@ -0,0 +1,163 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiAddMemberDiscussionGeneral, apiGetDiscussionGeneralOne, apiGetUser } from "@/lib/api";
+import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function AddMemberDiscussionDetail() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [idGroup, setIdGroup] = useState('')
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat: 'anggota' })
+         setDataOld(response.data)
+         const responseGroup = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat: 'detail' })
+         setIdGroup(responseGroup.data.idGroup)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function handleLoadMember() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetUser({ user: hasil, active: "true", search: search, group: String(idGroup) })
+      setData(response.data.filter((i: any) => i.idUserRole != 'supadmin'))
+   }
+
+
+   useEffect(() => {
+      handleLoad()
+   }, []);
+
+
+   useEffect(() => {
+      handleLoadMember()
+   }, [search])
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiAddMemberDiscussionGeneral({ id: id, data: { user: hasil, member: selectMember } })
+         if (response.success) {
+            ToastAndroid.show('Berhasil menambahkan anggota', ToastAndroid.SHORT)
+            dispatch(setUpdateDiscussionGeneralDetail(!update))
+            router.back()
+         }
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Anggota Diskusi',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="update"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={setSearch} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={item.img}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.id)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && onChoose(item.id, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]}>{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

app/(application)/discussion/create.tsx

@@ -0,0 +1,237 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
+import ImageUser from "@/components/imageNew";
+import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { apiCreateDiscussionGeneral } from "@/lib/api";
+import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
+import { setMemberChoose } from "@/lib/memberChoose";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+
+export default function CreateDiscussionGeneral() {
+   const { token, decryptToken } = useAuthSession()
+   const entityUser = useSelector((state: any) => state.user);
+   const userLogin = useSelector((state: any) => state.entities)
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const [valChoose, setValChoose] = useState("")
+   const [valSelect, setValSelect] = useState<"group" | "member">("group");
+   const dispatch = useDispatch()
+   const [disableBtn, setDisableBtn] = useState(true);
+   const [isSelect, setSelect] = useState(false);
+   const entitiesMember = useSelector((state: any) => state.memberChoose)
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   const [dataForm, setDataForm] = useState({
+      idGroup: "",
+      title: "",
+      desc: "",
+   });
+   const [error, setError] = useState({
+      group: false,
+      title: false,
+      desc: false,
+   });
+
+   function validationForm(cat: string, val: any, label?: string) {
+      if (cat == "group") {
+         setChooseGroup({ val, label: String(label) });
+         dispatch(setMemberChoose([]))
+         setDataForm({ ...dataForm, idGroup: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, group: true });
+         } else {
+            setError({ ...error, group: false });
+         }
+      } else if (cat == "title") {
+         setDataForm({ ...dataForm, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      } else if (cat == "desc") {
+         setDataForm({ ...dataForm, desc: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, desc: true });
+         } else {
+            setError({ ...error, desc: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) ||
+         Object.values(dataForm).some((v) => v == "")
+      ) {
+         setDisableBtn(true);
+      } else {
+         setDisableBtn(false);
+      }
+   }
+
+   useEffect(() => {
+      checkForm();
+   }, [error, dataForm]);
+
+
+   function handleBack() {
+      dispatch(setMemberChoose([]))
+      router.back()
+   }
+
+   async function handleCreate() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCreateDiscussionGeneral({
+            data: { ...dataForm, user: hasil, member: entitiesMember },
+         })
+         if (response.success) {
+            dispatch(setMemberChoose([]))
+            dispatch(setUpdateDiscussionGeneralDetail(!update))
+            ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+            router.back()
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => { handleBack() }}
+                  />
+               ),
+               headerTitle: "Tambah Diskusi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={disableBtn}
+                     onPress={() => {
+                        entitiesMember.length == 0
+                           ? ToastAndroid.show(
+                              "Anda belum memilih anggota",
+                              ToastAndroid.SHORT
+                           )
+                           : handleCreate()
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {
+                  (entityUser.role == "supadmin" ||
+                     entityUser.role == "developer") && (
+                     <SelectForm
+                        label="Lembaga Desa"
+                        placeholder="Pilih Lembaga Desa"
+                        value={chooseGroup.label}
+                        required
+                        onPress={() => {
+                           setValChoose(chooseGroup.val);
+                           setValSelect("group");
+                           setSelect(true);
+                        }}
+                        error={error.group}
+                        errorText="Lembaga Desa tidak boleh kosong"
+                     />
+                  )
+               }
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul"
+                  required
+                  error={error.title}
+                  errorText="Judul tidak boleh kosong"
+                  onChange={(val) => { validationForm("title", val) }}
+               />
+               <InputForm
+                  label="Diskusi"
+                  type="default"
+                  placeholder="Hal yang didiskusikan"
+                  required
+                  error={error.desc}
+                  errorText="Diskusi tidak boleh kosong"
+                  onChange={(val) => { validationForm("desc", val) }}
+               />
+               <ButtonSelect
+                  value="Pilih Anggota"
+                  onPress={() => {
+                     if (entityUser.role == "supadmin" || entityUser.role == "developer") {
+                        if (chooseGroup.val != "") {
+                           setSelect(true);
+                           setValSelect("member");
+                        } else {
+                           ToastAndroid.show(
+                              "Pilih Lembaga Desa terlebih dahulu",
+                              ToastAndroid.SHORT
+                           );
+                        }
+                     }else{
+                        validationForm('group', userLogin.idGroup, userLogin.group);
+                        setValChoose(userLogin.idGroup)
+                        setSelect(true);
+                        setValSelect("member");
+                     }
+
+                  }}
+               />
+               {
+                  entitiesMember.length > 0 &&
+                  <View>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text>Anggota</Text>
+                        <Text>Total {entitiesMember.length} Anggota</Text>
+                     </View>
+
+                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                        {
+                           entitiesMember.map((item: { img: any; name: any; }, index: any) => {
+                              return (
+                                 <BorderBottomItem
+                                    key={index}
+                                    borderType="bottom"
+                                    icon={
+                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                    }
+                                    title={item.name}
+                                 />
+                              )
+                           })
+                        }
+                     </View>
+                  </View>
+               }
+            </View>
+         </ScrollView>
+
+         <ModalSelect
+            category={valSelect}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm(valSelect, value.val, value.label);
+            }}
+            title={valSelect == "group" ? "Lembaga Desa" : "Pilih Anggota"}
+            open={isSelect}
+            idParent={valSelect == "member" ? chooseGroup.val : ""}
+            valChoose={valChoose}
+         />
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,142 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
+import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function EditDiscussionGeneral() {
+   const { token, decryptToken } = useAuthSession();
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [disableBtn, setDisableBtn] = useState(false)
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   const [dataForm, setDataForm] = useState({
+      title: "",
+      desc: "",
+   });
+   const [error, setError] = useState({
+      title: false,
+      desc: false,
+   })
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDiscussionGeneralOne({
+            id: id,
+            user: hasil,
+            cat: "detail",
+         });
+         if (response.success) {
+            setDataForm(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   function validationForm(cat: string, val: any) {
+      if (cat == "title") {
+         setDataForm({ ...dataForm, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      } else if (cat == "desc") {
+         setDataForm({ ...dataForm, desc: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, desc: true });
+         } else {
+            setError({ ...error, desc: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (Object.values(error).some((v) => v == true) == true || Object.values(dataForm).some((v) => v == "") == true) {
+         setDisableBtn(true)
+      } else {
+         setDisableBtn(false)
+      }
+   }
+
+   useEffect(() => {
+      checkForm()
+   }, [error, dataForm])
+
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiEditDiscussionGeneral({ user: hasil, title: dataForm.title, desc: dataForm.desc }, id);
+         if (response.success) {
+            dispatch(setUpdateDiscussionGeneralDetail(!update))
+            ToastAndroid.show("Berhasil mengubah data", ToastAndroid.SHORT);
+            router.back();
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Diskusi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="update"
+                     onPress={() => { handleEdit() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <InputForm
+                  label="Judul"
+                  type="default"
+                  placeholder="Judul"
+                  required
+                  error={error.title}
+                  value={dataForm.title}
+                  errorText="Judul tidak boleh kosong"
+                  onChange={(val) => validationForm("title", val)}
+               />
+               <InputForm
+                  label="Diskusi"
+                  type="default"
+                  placeholder="Hal yang didiskusikan"
+                  required
+                  error={error.desc}
+                  value={dataForm.desc}
+                  errorText="Diskusi tidak boleh kosong"
+                  onChange={(val) => validationForm("desc", val)}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

app/(application)/discussion/index.tsx

@@ -0,0 +1,212 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
+import SkeletonContent from "@/components/skeletonContent";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiGetDiscussionGeneral } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
+import { useSelector } from "react-redux";
+
+
+type Props = {
+   id: string
+   title: string
+   desc: string
+   status: number
+   total_komentar: number
+   createdAt: string
+}
+
+export default function Discussion() {
+   const entityUser = useSelector((state: any) => state.user)
+   const { token, decryptToken } = useAuthSession()
+   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 [refreshing, setRefreshing] = useState(false)
+
+   async function handleLoad(loading: boolean, thisPage: number) {
+      try {
+         setWaiting(true)
+         setLoading(loading)
+         setPage(thisPage)
+         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)
+      }
+   }
+
+
+   useEffect(() => {
+      handleLoad(false, 1)
+   }, [update])
+
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [status, search, group])
+
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      status: data[index].status,
+      total_komentar: data[index].total_komentar,
+      createdAt: data[index].createdAt,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <View style={[Styles.wrapBtnTab]}>
+               <ButtonTab
+                  active={status == "false" ? "false" : "true"}
+                  value="true"
+                  onPress={() => { setStatus("true") }}
+                  label="Aktif"
+                  icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
+                  n={2} />
+               <ButtonTab
+                  active={status == "false" ? "false" : "true"}
+                  value="false"
+                  onPress={() => { setStatus("false") }}
+                  label="Arsip"
+                  icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
+                  n={2} />
+            </View>
+            <InputSearch onChange={setSearch} />
+            {
+               (entityUser.role == "supadmin" || entityUser.role == "developer") &&
+               <View style={[Styles.mv05]}>
+                  <Text>Filter : {nameGroup}</Text>
+               </View>
+            }
+         </View>
+         <View style={[{ flex: 2 }]}>
+            {
+               loading ?
+                  arrSkeleton.map((item: any, i: number) => {
+                     return (
+                        <SkeletonContent key={i} />
+                     )
+                  })
+                  :
+                  data.length > 0
+                     ?
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => { router.push(`/discussion/${item.id}`) }}
+                                 borderType="bottom"
+                                 icon={
+                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                       <MaterialIcons name="chat" size={25} color={'#384288'} />
+                                    </View>
+                                 }
+                                 title={item.title}
+                                 subtitle={
+                                    status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
+                                 }
+                                 rightTopInfo={item.createdAt}
+                                 desc={item.desc}
+                                 leftBottomInfo={
+                                    <View style={[Styles.rowItemsCenter]}>
+                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                                    </View>
+                                 }
+                                 rightBottomInfo={`${item.total_komentar} Komentar`}
+
+                              />
+                           )
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        onEndReached={loadMoreData}
+                        onEndReachedThreshold={0.5}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
+                     />
+                     // data.map((item: any, i: number) => {
+                     //    return (
+                     //       <BorderBottomItem
+                     //          key={i}
+                     //          onPress={() => { router.push(`/discussion/${item.id}`) }}
+                     //          borderType="bottom"
+                     //          icon={
+                     //             <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                     //                <MaterialIcons name="chat" size={25} color={'#384288'} />
+                     //             </View>
+                     //          }
+                     //          title={item.title}
+                     //          subtitle={
+                     //             status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
+                     //          }
+                     //          rightTopInfo={item.createdAt}
+                     //          desc={item.desc}
+                     //          leftBottomInfo={
+                     //             <View style={[Styles.rowItemsCenter]}>
+                     //                <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                     //                <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                     //             </View>
+                     //          }
+                     //          rightBottomInfo={`${item.total_komentar} Komentar`}
+
+                     //       />
+                     //    )
+                     // })
+                     :
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+            }
+         </View>
+      </View>
+   );
+}

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

@@ -0,0 +1,155 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import DrawerBottom from "@/components/drawerBottom";
+import ImageUser from "@/components/imageNew";
+import MenuItemRow from "@/components/menuItemRow";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function MemberDiscussionDetail() {
+   const { token, decryptToken } = useAuthSession()
+   const entityUser = useSelector((state: any) => state.user)
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [data, setData] = useState<Props[]>([])
+   const [isModal, setModal] = useState(false)
+   const [chooseUser, setChooseUser] = useState({ idUser: '', name: '', img: '' })
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+
+   async function handleLoad(loading: boolean) {
+      try {
+         setLoading(loading)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat: 'anggota' })
+         setData(response.data)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false)
+   }, [update]);
+
+
+   useEffect(() => {
+      handleLoad(true)
+   }, []);
+
+   async function handleDeleteUser() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         await apiDeleteMemberDiscussionGeneral({ user: hasil, idUser: chooseUser.idUser }, id)
+         ToastAndroid.show("Berhasil mengeluarkan anggota dari diskusi", ToastAndroid.SHORT)
+         handleLoad(false)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setModal(false)
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Anggota Diskusi',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
+               <View style={[Styles.wrapPaper, Styles.mb100]}>
+                  {
+                     entityUser.role != "user" && entityUser.role != "coadmin" &&
+                     <BorderBottomItem
+                        onPress={() => { router.push(`/discussion/add-member/${id}`) }}
+                        borderType="none"
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.gray]}>
+                              <Feather name="user-plus" size={25} color={'#384288'} />
+                           </View>
+                        }
+                        title="Tambah Anggota"
+                     />
+                  }
+                  {
+                     loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <SkeletonTwoItem key={index} />
+                           )
+                        })
+                        :
+                        data.map((item, index) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                 }
+                                 title={item.name}
+                                 onPress={() => {
+                                    setChooseUser(item)
+                                    setModal(true)
+                                 }}
+                              />
+                           )
+                        })
+                  }
+               </View>
+            </View>
+         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={chooseUser.name}>
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  title="Lihat Profil"
+                  onPress={() => {
+                     setModal(false)
+                     router.push(`/member/${chooseUser.idUser}`)
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                  title="Keluarkan"
+                  onPress={() => {
+                     setModal(false)
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                        onPress: () => {
+                           handleDeleteUser()
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </SafeAreaView>
+   )
+}

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

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

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

@@ -0,0 +1,173 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiAddMemberCalendar, apiGetCalendarOne, apiGetDivisionMember } from "@/lib/api";
+import { setUpdateCalendar } from "@/lib/calendarUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function AddMemberCalendarEvent() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.calendarUpdate)
+   const { token, decryptToken } = useAuthSession()
+   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const [idCalendar, setIdCalendar] = useState('')
+
+   async function handleLoadOldMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'member',
+         });
+         setDataOld(response.data)
+         const responseData = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'data',
+         });
+         setIdCalendar(responseData.data.idCalendar)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function handleLoadMemberDivision() {
+      const hasil = await decryptToken(String(token?.current))
+      const responMemberDivision = await apiGetDivisionMember({ id: id, user: hasil, search: search })
+      setData(responMemberDivision.data)
+   }
+
+
+   useEffect(() => {
+      handleLoadOldMember()
+   }, []);
+
+   useEffect(() => {
+      handleLoadMemberDivision()
+   }, [search]);
+
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiAddMemberCalendar({ id: idCalendar, data: { user: hasil, member: selectMember } })
+         if (response.success) {
+            ToastAndroid.show('Berhasil menambahkan anggota', ToastAndroid.SHORT)
+            dispatch(setUpdateCalendar({ ...update, member: !update.member }))
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="update"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => setSearch(val)} value={search} />
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.idUser)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && onChoose(item.idUser, item.name, item.img)
+                                 onChoose(item.idUser, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <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>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,275 @@
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
+import { InputDate } from "@/components/inputDate"
+import { InputForm } from "@/components/inputForm"
+import ModalSelect from "@/components/modalSelect"
+import SelectForm from "@/components/selectForm"
+import Styles from "@/constants/Styles"
+import { valueTypeEventRepeat } from "@/constants/TypeEventRepeat"
+import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api"
+import { stringToDateTime } from "@/lib/fun_stringToDate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { Stack, router, useLocalSearchParams } from "expo-router"
+import moment from "moment"
+import { useEffect, useState } from "react"
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+
+export default function EditEventCalendar() {
+   const { token, decryptToken } = useAuthSession();
+   const [choose, setChoose] = useState({ val: "", label: "" })
+   const [isSelect, setSelect] = useState(false)
+   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>()
+   const [idCalendar, setIdCalendar] = useState('')
+
+   const [error, setError] = useState({
+      title: false,
+      dateStart: false,
+      timeStart: false,
+      timeEnd: false,
+      repeatEventType: false,
+      repeatValue: false,
+   });
+   const [data, setData] = useState({
+      timeStart: '',
+      timeEnd: '',
+      dateStart: '',
+      title: '',
+      desc: '',
+      linkMeet: '',
+      repeatEventTyper: '',
+      repeatValue: 1,
+   })
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'data',
+         });
+         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) {
+         console.error(error);
+         ToastAndroid.show('Gagal mendapatkan data', ToastAndroid.SHORT)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+
+
+   function validationForm(cat: "title" | "desc" | "dateStart" | "timeStart" | "timeEnd" | "repeatEventType" | "repeatValue" | "linkMeet", val: string, label?: string) {
+      if (cat == "title") {
+         setData({ ...data, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      } else if (cat == "desc") {
+         setData({ ...data, desc: val });
+      } else if (cat == "dateStart") {
+         setData({ ...data, dateStart: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, dateStart: true });
+         } else {
+            setError({ ...error, dateStart: false });
+         }
+      } else if (cat == "timeStart") {
+         setData({ ...data, timeStart: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, timeStart: true });
+         } else {
+            setError({ ...error, timeStart: false });
+         }
+         const start = stringToDateTime(data.dateStart, data.timeStart);
+         const end = stringToDateTime(data.dateStart, data.timeEnd);
+         const timestampAwal = start.getTime();
+         const timestampAkhir = end.getTime();
+
+         if (timestampAwal > timestampAkhir) {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+      } else if (cat == "timeEnd") {
+         setData({ ...data, timeEnd: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+         const start = stringToDateTime(data.dateStart, data.timeStart);
+         const end = stringToDateTime(data.dateStart, val);
+         const timestampAwal = start.getTime();
+         const timestampAkhir = end.getTime();
+
+         if (timestampAwal > timestampAkhir) {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+      } else if (cat == "repeatEventType") {
+         setChoose({ val, label: String(label) })
+         setData({ ...data, repeatEventTyper: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, repeatEventType: true });
+         } else {
+            setError({ ...error, repeatEventType: false });
+            if (val == "once") {
+               setData(data => ({ ...data, repeatValue: 1 }));
+            }
+         }
+      } else if (cat == "repeatValue") {
+         setData({ ...data, repeatValue: Number(val) });
+         if (val == "" || val == "null") {
+            setError({ ...error, repeatValue: true });
+         } else {
+            setError({ ...error, repeatValue: false });
+         }
+      } else if (cat == "linkMeet") {
+         setData({ ...data, linkMeet: val });
+      }
+   }
+
+   async function handleUpdate() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiUpdateCalendar({ data: { ...data, user: hasil }, id: idCalendar })
+         if (response.success) {
+            router.replace(`/division/${id}/calendar/`)
+            ToastAndroid.show('Berhasil mengubah acara', ToastAndroid.SHORT)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal mengubah acara', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Edit Acara',
+               headerTitleAlign: 'center',
+               headerRight: () =>
+                  <ButtonSaveHeader
+                     disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventTyper == ""}
+                     category="update-calendar"
+                     onPress={() => {
+                        handleUpdate()
+                     }}
+                  />
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Nama Acara"
+                  type="default"
+                  placeholder="Nama Acara"
+                  required
+                  bg="white"
+                  value={data.title}
+                  onChange={(val) => validationForm("title", val)}
+                  error={error.title}
+                  errorText="Nama acara tidak boleh kosong"
+               />
+               <InputDate
+                  onChange={(val) => validationForm("dateStart", val)}
+                  mode="date"
+                  value={data.dateStart}
+                  label="Tanggal Acara"
+                  required
+                  error={error.dateStart}
+                  errorText="Tanggal acara tidak boleh kosong"
+                  placeholder="Pilih Tanggal Acara"
+               />
+               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
+                  <View style={[{ width: "48%" }]}>
+                     <InputDate
+                        onChange={(val) => validationForm("timeStart", val)}
+                        mode="time"
+                        value={data.timeStart}
+                        label="Waktu Awal"
+                        required
+                        error={error.timeStart}
+                        errorText="Waktu awal tidak valid"
+                        placeholder="--:--"
+                     />
+                  </View>
+                  <View style={[{ width: "48%" }]}>
+                     <InputDate
+                        onChange={(val) => validationForm("timeEnd", val)}
+                        mode="time"
+                        value={data.timeEnd}
+                        label="Waktu Akhir"
+                        required
+                        error={error.timeEnd}
+                        errorText="Waktu akhir tidak valid"
+                        placeholder="--:--"
+                     />
+                  </View>
+               </View>
+               <InputForm
+                  label="Link Meet"
+                  type="default"
+                  placeholder="Link Meet"
+                  bg="white"
+                  value={data.linkMeet}
+                  onChange={(val) => validationForm("linkMeet", val)}
+               />
+               <SelectForm
+                  bg="white"
+                  label="Ulangi Acara"
+                  placeholder="Ulangi Acara"
+                  value={choose.label}
+                  required
+                  onPress={() => { setSelect(true) }}
+               />
+               <InputForm
+                  label="Jumlah Pengulangan"
+                  type="numeric"
+                  placeholder="Jumlah Pengulangan"
+                  required
+                  bg="white"
+                  value={String(data.repeatValue)}
+                  onChange={(val) => validationForm("repeatValue", val)}
+                  error={error.repeatValue}
+                  errorText="Jumlah pengulangan tidak valid"
+                  disable={choose.val == "once"}
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi"
+                  bg="white"
+                  value={data.desc}
+                  onChange={(val) => validationForm("desc", val)}
+                  multiline
+               />
+            </View>
+         </ScrollView>
+
+         <ModalSelect
+            category={"type-event-repeat"}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm("repeatEventType", value.val, value.label);
+            }}
+            title={"Ulangi Acara"}
+            open={isSelect}
+            valChoose={choose.val}
+         />
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,277 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import BorderBottomItem from "@/components/borderBottomItem"
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
+import DrawerBottom from "@/components/drawerBottom"
+import ImageUser from "@/components/imageNew"
+import MenuItemRow from "@/components/menuItemRow"
+import Skeleton from "@/components/skeleton"
+import Styles from "@/constants/Styles"
+import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
+import { setUpdateCalendar } from "@/lib/calendarUpdate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { router, Stack, useLocalSearchParams } from "expo-router"
+import { useEffect, useState } from "react"
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+
+type Props = {
+   id: string;
+   timeStart: string;
+   timeEnd: string;
+   dateStart: string;
+   dateEnd: string;
+   idCalendar: string;
+   status: number;
+   title: string;
+   desc: string;
+   linkMeet: string;
+   repeatEventTyper: string;
+   repeatValue: number;
+}
+
+type PropsMember = {
+   id: string;
+   idUser: string;
+   name: string;
+   img: string;
+   email: string
+}
+
+export default function DetailEventCalendar() {
+   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
+   const [data, setData] = useState<Props>()
+   const [member, setMember] = useState<PropsMember[]>([])
+   const { token, decryptToken } = useAuthSession();
+   const [memberChoose, setMemberChoose] = useState({ id: '', name: '' })
+   const [isModalMember, setModalMember] = useState(false)
+   const update = useSelector((state: any) => state.calendarUpdate)
+   const dispatch = useDispatch()
+   const entityUser = useSelector((state: any) => state.user);
+   const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
+
+   async function handleCheckMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-member",
+         });
+
+         setIsMemberDivision(response.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   async function handleLoad() {
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'data',
+         });
+         if (response.success) {
+            setData(response.data);
+         } else {
+            router.replace(`/division/${id}/calendar/`)
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   async function handleLoadMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'member',
+         });
+         setMember(response.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+      handleCheckMember()
+   }, []);
+
+   useEffect(() => {
+      handleLoadMember();
+   }, [update.member]);
+
+   async function handleDeleteUser() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteCalendarMember({
+            user: hasil,
+            idUser: memberChoose.id,
+         }, String(data?.idCalendar));
+
+         if (response.success) {
+            dispatch(setUpdateCalendar({ ...update, member: !update.member }));
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT);
+      } finally {
+         setModalMember(false)
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <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)} />
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <View style={[Styles.wrapPaper, Styles.mb15]}>
+                  <View style={Styles.rowItemsCenter}>
+                     <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           : <Text style={[Styles.textDefault]}>{data?.title}</Text>
+                     }
+
+                  </View>
+                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
+                           <Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
+                     }
+                  </View>
+                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                     <MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
+                           <Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
+                     }
+                  </View>
+                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                     <MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
+                           <Text style={[Styles.textDefault]}>
+                              {
+                                 data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
+                                    data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
+                                       data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
+                                          data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
+                                             data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
+                                                ''
+                              }
+                           </Text>
+                     }
+                  </View>
+                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                     <MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
+                           <Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
+                     }
+                  </View>
+                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                     <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
+                     {
+                        loading ?
+                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           :
+                           <Text style={[Styles.textDefault]}>{data?.desc}</Text>
+                     }
+                  </View>
+               </View>
+
+               <View style={[Styles.mb15]}>
+                  <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
+                     <Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text>
+                  </View>
+
+                  <View style={[Styles.wrapPaper]}>
+                     {
+                        member.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="bottom"
+                              icon={<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />}
+                              title={item.name}
+                              subtitle={item.email}
+                              onPress={() => {
+                                 if ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision) {
+                                    null
+                                 } else {
+                                    setMemberChoose({ id: item.idUser, name: item.name })
+                                    setModalMember(true)
+                                 }
+                              }}
+                           />
+                        ))
+                     }
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+
+
+         <DrawerBottom animation="slide" isVisible={isModalMember} setVisible={setModalMember} title={memberChoose.name}>
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  title="Lihat Profil"
+                  onPress={() => {
+                     setModalMember(false)
+                     router.push(`/member/${memberChoose.id}`)
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                  title="Keluarkan"
+                  onPress={() => {
+                     setModalMember(false)
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                        onPress: () => {
+                           handleDeleteUser()
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,156 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiCreateCalendar, apiGetDivisionMember } from "@/lib/api";
+import { setFormCreateCalendar } from "@/lib/calendarCreate";
+import { setUpdateCalendar } from "@/lib/calendarUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function CreateCalendarAddMember() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const update = useSelector((state: any) => state.calendarCreate)
+   const dispatch = useDispatch()
+   const updateRefresh = useSelector((state: any) => state.calendarUpdate)
+
+
+
+   async function handleLoadMemberDivision() {
+      const hasil = await decryptToken(String(token?.current))
+      const responMemberDivision = await apiGetDivisionMember({ id: id, user: hasil, search: search })
+      setData(responMemberDivision.data)
+      if (update.member.length > 0) {
+         setSelectMember(update.member)
+      }
+   }
+
+   useEffect(() => {
+      handleLoadMemberDivision()
+   }, [search]);
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+
+   async function handleAddMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCreateCalendar({ data: { ...update, user: hasil, idDivision: id, member: selectMember } })
+         if (response.success) {
+            ToastAndroid.show('Berhasil membuat acara', ToastAndroid.SHORT)
+            dispatch(setFormCreateCalendar({
+               title: "",
+               desc: "",
+               dateStart: "",
+               timeStart: "",
+               timeEnd: "",
+               repeatEventType: "",
+               repeatValue: 1,
+               linkMeet: "",
+               member: [],
+            }))
+            dispatch(setUpdateCalendar({ ...updateRefresh, data: !updateRefresh.data }));
+            router.replace(`/division/${id}/calendar`)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal membuat acara', ToastAndroid.SHORT)
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => { handleAddMember() }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => setSearch(val)} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {onChoose(item.idUser, item.name, item.img) }}
+                           >
+                              <View style={[Styles.rowItemsCenter, Styles.w70]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,245 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonNextHeader from "@/components/buttonNextHeader";
+import { InputDate } from "@/components/inputDate";
+import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { setFormCreateCalendar } from "@/lib/calendarCreate";
+import { stringToDateTime } from "@/lib/fun_stringToDate";
+import { Stack, router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import {
+   SafeAreaView,
+   ScrollView,
+   View
+} from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function CalendarDivisionCreate() {
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [choose, setChoose] = useState({ val: "", label: "" })
+   const [isSelect, setSelect] = useState(false)
+   const update = useSelector((state: any) => state.calendarCreate)
+   const dispatch = useDispatch()
+   const [error, setError] = useState({
+      title: false,
+      dateStart: false,
+      timeStart: false,
+      timeEnd: false,
+      repeatEventType: false,
+      repeatValue: false,
+   });
+   const [data, setData] = useState({
+      title: "",
+      desc: "",
+      dateStart: "",
+      timeStart: "",
+      timeEnd: "",
+      repeatEventType: "",
+      repeatValue: 1,
+      linkMeet: "",
+   });
+
+   function validationForm(cat: "title" | "desc" | "dateStart" | "timeStart" | "timeEnd" | "repeatEventType" | "repeatValue" | "linkMeet", val: string, label?: string) {
+      if (cat == "title") {
+         setData({ ...data, title: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, title: true });
+         } else {
+            setError({ ...error, title: false });
+         }
+      } else if (cat == "desc") {
+         setData({ ...data, desc: val });
+      } else if (cat == "dateStart") {
+         setData({ ...data, dateStart: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, dateStart: true });
+         } else {
+            setError({ ...error, dateStart: false });
+         }
+      } else if (cat == "timeStart") {
+         setData({ ...data, timeStart: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, timeStart: true });
+         } else {
+            setError({ ...error, timeStart: false });
+         }
+         const start = stringToDateTime(data.dateStart, data.timeStart);
+         const end = stringToDateTime(data.dateStart, data.timeEnd);
+         const timestampAwal = start.getTime();
+         const timestampAkhir = end.getTime();
+
+         if (timestampAwal > timestampAkhir) {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+      } else if (cat == "timeEnd") {
+         setData({ ...data, timeEnd: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+         const start = stringToDateTime(data.dateStart, data.timeStart);
+         const end = stringToDateTime(data.dateStart, val);
+         const timestampAwal = start.getTime();
+         const timestampAkhir = end.getTime();
+
+         if (timestampAwal > timestampAkhir) {
+            setError({ ...error, timeEnd: true });
+         } else {
+            setError({ ...error, timeEnd: false });
+         }
+      } else if (cat == "repeatEventType") {
+         setChoose({ val, label: String(label) })
+         setData({ ...data, repeatEventType: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, repeatEventType: true });
+         } else {
+            setError({ ...error, repeatEventType: false });
+            if (val == "once") {
+               setData(data => ({ ...data, repeatValue: 1 }));
+            }
+         }
+      } else if (cat == "repeatValue") {
+         setData({ ...data, repeatValue: Number(val) });
+         if (val == "" || val == "null") {
+            setError({ ...error, repeatValue: true });
+         } else {
+            setError({ ...error, repeatValue: false });
+         }
+      } else if (cat == "linkMeet") {
+         setData({ ...data, linkMeet: val });
+      }
+   }
+
+   function handleSetData() {
+      dispatch(setFormCreateCalendar(data))
+      router.push(`./create-member`)
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Acara",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonNextHeader
+                     onPress={() => { handleSetData() }}
+                     disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Nama Acara"
+                  type="default"
+                  placeholder="Nama Acara"
+                  required
+                  bg="white"
+                  value={data.title}
+                  onChange={(val) => validationForm("title", val)}
+                  error={error.title}
+                  errorText="Nama acara tidak boleh kosong"
+               />
+               <InputDate
+                  onChange={(val) => validationForm("dateStart", val)}
+                  mode="date"
+                  value={data.dateStart}
+                  label="Tanggal Acara"
+                  required
+                  error={error.dateStart}
+                  errorText="Tanggal acara tidak boleh kosong"
+                  placeholder="Pilih Tanggal Acara"
+               />
+               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
+                  <View style={[{ width: "48%" }]}>
+                     <InputDate
+                        onChange={(val) => validationForm("timeStart", val)}
+                        mode="time"
+                        value={data.timeStart}
+                        label="Waktu Awal"
+                        required
+                        error={error.timeStart}
+                        errorText="Waktu awal tidak valid"
+                        placeholder="--:--"
+                     />
+                  </View>
+                  <View style={[{ width: "48%" }]}>
+                     <InputDate
+                        onChange={(val) => validationForm("timeEnd", val)}
+                        mode="time"
+                        value={data.timeEnd}
+                        label="Waktu Akhir"
+                        required
+                        error={error.timeEnd}
+                        errorText="Waktu akhir tidak valid"
+                        placeholder="--:--"
+                     />
+                  </View>
+               </View>
+               <InputForm
+                  label="Link Meet"
+                  type="default"
+                  placeholder="Link Meet"
+                  bg="white"
+                  value={data.linkMeet}
+                  onChange={(val) => validationForm("linkMeet", val)}
+               />
+               <SelectForm
+                  bg="white"
+                  label="Ulangi Acara"
+                  placeholder="Ulangi Acara"
+                  value={choose.label}
+                  required
+                  onPress={() => { setSelect(true) }}
+               />
+               <InputForm
+                  label="Jumlah Pengulangan"
+                  type="numeric"
+                  placeholder="Jumlah Pengulangan"
+                  required
+                  bg="white"
+                  value={String(data.repeatValue)}
+                  onChange={(val) => validationForm("repeatValue", val)}
+                  error={error.repeatValue}
+                  errorText="Jumlah pengulangan tidak valid"
+                  disable={choose.val == "once"}
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi"
+                  bg="white"
+                  value={data.desc}
+                  onChange={(val) => validationForm("desc", val)}
+                  multiline
+               />
+            </View>
+         </ScrollView>
+
+         <ModalSelect
+            category={"type-event-repeat"}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm("repeatEventType", value.val, value.label);
+            }}
+            title={"Ulangi Acara"}
+            open={isSelect}
+            valChoose={choose.val}
+         />
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,111 @@
+import InputSearch from "@/components/inputSearch";
+import Skeleton from "@/components/skeleton";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiGetCalendarHistory } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { FlatList, Text, View, VirtualizedList } from "react-native";
+
+type Props = {
+   dateStart: Date
+   year: string
+   data: []
+}
+export default function CalendarHistory() {
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const { token, decryptToken } = useAuthSession();
+   const [data, setData] = useState<Props[]>([])
+   const [search, setSearch] = useState('')
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
+   const [page, setPage] = useState(1)
+   const [waiting, setWaiting] = useState(false)
+
+   async function handleLoad(loading: boolean, thisPage: number) {
+      try {
+         setWaiting(true)
+         setLoading(loading)
+         setPage(thisPage)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarHistory({ user: hasil, search: search, division: id, 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)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [search])
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      dateStart: data[index].dateStart,
+      year: data[index].year,
+      data: data[index].data,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <InputSearch onChange={(val) => setSearch(val)} />
+         </View>
+         <View style={[{ flex: 2, }]}>
+            {
+               loading ?
+                  arrSkeleton.map((item, index) => (
+                     <Skeleton key={index} width={100} height={60} widthType="percent" borderRadius={10} />
+                  ))
+                  :
+                  <VirtualizedList
+                     data={data}
+                     getItemCount={() => data.length}
+                     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 style={[Styles.mr10, Styles.ph05]}>
+                                 <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
+                                 <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>
+                              </View>
+                              <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]}>
+                                          <Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title}</Text>
+                                          <Text style={[Styles.textDefault]}>{item.timeStart} | {item.timeEnd}</Text>
+                                       </View>
+                                    )}
+                                    keyExtractor={(item, index) => String(index)}
+                                 />
+                              </View>
+                           </View>
+                        )
+                     }}
+                     keyExtractor={(item, index) => String(index)}
+                     onEndReached={loadMoreData}
+                     onEndReachedThreshold={0.5}
+                     showsVerticalScrollIndicator={false}
+                  />
+            }
+         </View>
+      </View>
+   )
+}

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

@@ -0,0 +1,192 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import HeaderRightCalendarList from "@/components/calendar/headerCalendarList";
+import ItemDateCalendar from "@/components/calendar/itemDateCalendar";
+import EventItem from "@/components/eventItem";
+import Skeleton from "@/components/skeleton";
+import Styles from "@/constants/Styles";
+import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Feather } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import moment from "moment";
+import { useEffect, useState } from "react";
+import { Pressable, RefreshControl, SafeAreaView, ScrollView, Text, View } from "react-native";
+import Datepicker, {
+   CalendarComponents,
+   CalendarDay
+} from "react-native-ui-datepicker";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   idCalendar: string;
+   timeStart: string;
+   timeEnd: string;
+   dateStart: string;
+   dateEnd: string;
+   status: number;
+   title: string;
+   desc: string;
+   user_name: string;
+};
+
+export default function CalendarDivision() {
+   const [selected, setSelected] = useState<any>(new Date())
+   const [data, setData] = useState<Props[]>([])
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataIndicator, setDataIndicator] = useState<any>([])
+   const [month, setMonth] = useState<number>(new Date().getMonth())
+   const update = useSelector((state: any) => state.calendarUpdate)
+   const [loading, setLoading] = useState(true)
+   const [loadingBtn, setLoadingBtn] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
+
+
+   async function handleLoad(loading: boolean) {
+      try {
+         setLoading(loading)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarByDateDivision({
+            user: hasil,
+            date: dayjs(selected).format("YYYY-MM-DD"),
+            division: id,
+         });
+         setData(response.data);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   async function handleLoadIndicator() {
+      try {
+         setLoadingBtn(true)
+         const newDate = new Date(selected?.getFullYear(), month, 1);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetIndicatorCalendar({
+            user: hasil,
+            date: dayjs(newDate).format("YYYY-MM-DD"),
+            division: id,
+         });
+         setDataIndicator(response.data);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingBtn(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(true)
+   }, [selected])
+
+   useEffect(() => {
+      handleLoad(false);
+   }, [update.data]);
+
+   useEffect(() => {
+      handleLoadIndicator();
+   }, [month, update.data]);
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const components: CalendarComponents = {
+      Day: (day: CalendarDay) => {
+         const now = String(day.date);
+         const today = moment(now).format("YYYY-MM-DD");
+         const sign = dataIndicator.includes(today);
+         return (
+            <ItemDateCalendar
+               text={day.text}
+               isSelected={day.isSelected}
+               isSign={sign}
+            />
+         );
+      },
+      IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}>
+         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : 'black'} />
+      </Pressable>,
+      IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}>
+         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : 'black'} />
+      </Pressable>,
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Kalender",
+               headerTitleAlign: "center",
+               headerRight: () => <HeaderRightCalendarList />,
+            }}
+         />
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }>
+            <View style={[Styles.p15]}>
+               <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <Datepicker
+                     components={components}
+                     mode="single"
+                     date={selected}
+                     month={month}
+                     onChange={({ date }) => setSelected(date)}
+                     styles={{
+                        selected: Styles.selectedDate,
+                     }}
+                  />
+               </View>
+               <View style={[Styles.mb15, Styles.mt15]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
+                  <View style={[Styles.wrapPaper]}>
+                     {
+                        loading ?
+                           <>
+                              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+                           </>
+                           :
+                           data.length > 0 ? (
+                              data.map((item, index) => (
+                                 <EventItem
+                                    key={index}
+                                    category={index % 2 == 0 ? 'purple' : 'orange'}
+                                    title={item.title}
+                                    user={item.user_name}
+                                    jamAwal={item.timeStart}
+                                    jamAkhir={item.timeEnd}
+                                    onPress={() => {
+                                       router.push(`./calendar/${item.id}`);
+                                    }}
+                                 />
+                              ))
+                           ) : (
+                              <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada acara</Text>
+                           )
+                     }
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,93 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditDiscussion, apiGetDiscussionOne } from "@/lib/api";
+import { setUpdateDiscussion } from "@/lib/discussionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function DiscussionDivisionEdit() {
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const { token, decryptToken } = useAuthSession();
+   const [data, setData] = useState("");
+   const update = useSelector((state: any) => state.discussionUpdate);
+   const dispatch = useDispatch();
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDiscussionOne({
+            id: detail,
+            user: hasil,
+            cat: "data",
+         });
+         setData(response.data.desc);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   async function handleUpdate() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiEditDiscussion({
+            data: { user: hasil, desc: data },
+            id: detail,
+         });
+         if (response.success) {
+            ToastAndroid.show("Berhasil mengubah data", ToastAndroid.SHORT);
+            dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
+            router.back();
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Diskusi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={data == ""}
+                     category="update"
+                     onPress={() => {
+                        handleUpdate();
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <InputForm
+                  label="Diskusi"
+                  type="default"
+                  placeholder="Hal yang didiskusikan"
+                  required
+                  value={data}
+                  onChange={setData}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,328 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussionDetail";
+import ImageUser from "@/components/imageNew";
+import { InputForm } from "@/components/inputForm";
+import LabelStatus from "@/components/labelStatus";
+import Skeleton from "@/components/skeleton";
+import SkeletonContent from "@/components/skeletonContent";
+import Styles from "@/constants/Styles";
+import {
+   apiGetDiscussionOne,
+   apiGetDivisionOneFeature,
+   apiSendDiscussionCommentar,
+} from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { firebase } from "@react-native-firebase/database";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   title: string;
+   desc: string;
+   status: number;
+   createdAt: string;
+   createdBy: string;
+   username: string;
+   user_img: string;
+   isCreator: boolean;
+   isActive: boolean;
+};
+
+type PropsComment = {
+   id: string;
+   comment: string;
+   createdAt: string;
+   username: string;
+   img: string;
+};
+
+export default function DiscussionDetail() {
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const [data, setData] = useState<Props>();
+   const [dataComment, setDataComment] = useState<PropsComment[]>([]);
+   const { token, decryptToken } = useAuthSession();
+   const [komentar, setKomentar] = useState("");
+   const [loadingSend, setLoadingSend] = useState(false);
+   const update = useSelector((state: any) => state.discussionUpdate);
+   const entityUser = useSelector((state: any) => state.user);
+   const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const [isAdminDivision, setIsAdminDivision] = useState(false);
+   const [isCreator, setIsCreator] = useState(false);
+   const [loading, setLoading] = useState(true)
+   const [loadingKomentar, setLoadingKomentar] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
+   const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-division/${detail}`);
+
+
+   useEffect(() => {
+      const onValueChange = reference.on('value', snapshot => {
+         if (snapshot.val() == null) {
+            reference.set({ trigger: true })
+         }
+         handleLoadComment(false)
+      });
+
+      // Stop listening for updates when no longer required
+      return () => reference.off('value', onValueChange);
+   }, []);
+
+   function updateTrigger() {
+      reference.once('value', snapshot => {
+         const data = snapshot.val();
+         reference.update({ trigger: !data.trigger });
+      });
+   }
+
+
+   async function handleLoad(loading: boolean) {
+      try {
+         setLoading(loading)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDiscussionOne({
+            id: detail,
+            user: hasil,
+            cat: "data",
+         });
+         setData(response.data);
+         setIsCreator(response.data.createdBy == hasil);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   async function handleLoadComment(loading: boolean) {
+      try {
+         setLoadingKomentar(loading)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDiscussionOne({
+            id: detail,
+            user: hasil,
+            cat: "comment",
+         });
+         setDataComment(response.data);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingKomentar(false)
+      }
+   }
+
+   async function handleCheckMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-member",
+         });
+
+         const response2 = await apiGetDivisionOneFeature({
+            id,
+            user: hasil,
+            cat: "check-admin",
+         });
+         setIsMemberDivision(response.data);
+         setIsAdminDivision(response2.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false);
+   }, [update.data]);
+
+   useEffect(() => {
+      handleLoad(true)
+      handleLoadComment(true);
+      handleCheckMember();
+   }, []);
+
+   async function handleKomentar() {
+      try {
+         setLoadingSend(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiSendDiscussionCommentar({
+            id: detail,
+            data: { comment: komentar, user: hasil },
+         });
+         if (response.success) {
+            setKomentar("")
+            updateTrigger()
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingSend(false);
+      }
+   }
+
+   return (
+      <>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Diskusi",
+               headerTitleAlign: "center",
+               headerRight: () =>
+                  (entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision || isCreator ?
+                     <HeaderRightDiscussionDetail
+                        id={detail}
+                        status={data?.status}
+                        isActive={data?.isActive}
+                     /> : (<></>)
+               ,
+            }}
+         />
+         <View style={{ flex: 1 }}>
+            <ScrollView>
+               <View style={[Styles.p15, Styles.mb100]}>
+                  {
+                     loading ?
+                        <SkeletonContent />
+                        :
+                        <BorderBottomItem
+                           descEllipsize={false}
+                           width={55}
+                           borderType="bottom"
+                           icon={
+                              <ImageUser
+                                 src={`https://wibu-storage.wibudev.com/api/files/${data?.user_img}`}
+                                 size="sm"
+                              />
+                           }
+                           title={data?.username}
+                           subtitle={
+                              data?.isActive ? (
+                                 data?.status == 1 ? (
+                                    <LabelStatus category="success" text="BUKA" size="small" />
+                                 ) : (
+                                    <LabelStatus category="error" text="TUTUP" size="small" />
+                                 )
+                              ) : (
+                                 <LabelStatus category="secondary" text="ARSIP" size="small" />
+                              )
+                           }
+                           rightTopInfo={data?.createdAt}
+                           desc={data?.desc}
+                           leftBottomInfo={
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <Ionicons
+                                    name="chatbox-ellipses-outline"
+                                    size={18}
+                                    color="grey"
+                                    style={Styles.mr05}
+                                 />
+                                 <Text
+                                    style={[Styles.textInformation, Styles.cGray, Styles.mb05]}
+                                 >
+                                    {dataComment.length} Komentar
+                                 </Text>
+                              </View>
+                           }
+                        />
+                  }
+
+                  <View style={[Styles.p15]}>
+                     {
+                        loadingKomentar ?
+                           arrSkeleton.map((item, index) => (
+                              <Skeleton key={index} width={100} widthType="percent" height={40} borderRadius={5} />
+                           ))
+                           :
+                           dataComment.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 width={55}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser
+                                       src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                       size="xs"
+                                    />
+                                 }
+                                 title={item.username}
+                                 rightTopInfo={item.createdAt}
+                                 desc={item.comment}
+                                 descEllipsize={false}
+                              />
+                           ))
+                     }
+
+                  </View>
+               </View>
+            </ScrollView>
+            <View
+               style={[
+                  Styles.contentItemCenter,
+                  Styles.absolute0,
+                  Styles.w100,
+                  { backgroundColor: "#f4f4f4" },
+               ]}
+            >
+               <InputForm
+                  disable={
+                     data?.status == 2 ||
+                     data?.isActive == false ||
+                     ((entityUser.role == "user" || entityUser.role == "coadmin") &&
+                        !isMemberDivision)
+                  }
+                  bg="white"
+                  type="default"
+                  round
+                  placeholder="Kirim Komentar"
+                  onChange={setKomentar}
+                  value={komentar}
+                  itemRight={
+                     <Pressable
+                        onPress={() => {
+                           komentar != "" &&
+                              !loadingSend &&
+                              data?.status != 2 &&
+                              data?.isActive &&
+                              (((entityUser.role == "user" ||
+                                 entityUser.role == "coadmin") &&
+                                 isMemberDivision) ||
+                                 entityUser.role == "admin" ||
+                                 entityUser.role == "superadmin" ||
+                                 entityUser.role == "developer" ||
+                                 entityUser.role == "cosupadmin") &&
+                              handleKomentar();
+                        }}
+                     >
+                        <MaterialIcons
+                           name="send"
+                           size={25}
+                           style={
+                              komentar == "" ||
+                                 loadingSend ||
+                                 data?.status == 2 ||
+                                 data?.isActive == false ||
+                                 ((entityUser.role == "user" ||
+                                    entityUser.role == "coadmin") &&
+                                    !isMemberDivision)
+                                 ? Styles.cGray
+                                 : Styles.cDefault
+                           }
+                        />
+                     </Pressable>
+                  }
+               />
+            </View>
+         </View>
+      </>
+   );
+}

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

@@ -0,0 +1,59 @@
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
+import { InputForm } from "@/components/inputForm"
+import Styles from "@/constants/Styles"
+import { apiCreateDiscussion } from "@/lib/api"
+import { setUpdateDiscussion } from "@/lib/discussionUpdate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { router, Stack, useLocalSearchParams } from "expo-router"
+import { useState } from "react"
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+
+export default function CreateDiscussionDivision() {
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [desc, setDesc] = useState('')
+   const { token, decryptToken } = useAuthSession()
+   const update = useSelector((state: any) => state.discussionUpdate)
+   const dispatch = useDispatch();
+
+   async function handleCreate() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCreateDiscussion({ data: { user: hasil, desc, idDivision: id } })
+         if (response.success) {
+            ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+            dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Diskusi',
+               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader
+                  disable={desc == ""}
+                  category="create"
+                  onPress={() => {
+                     handleCreate()
+                  }} />
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm label="Diskusi" type="default" placeholder="Hal yang didiskusikan" required onChange={setDesc} />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,205 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import ImageUser from "@/components/imageNew";
+import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
+import SkeletonContent from "@/components/skeletonContent";
+import Styles from "@/constants/Styles";
+import { apiGetDiscussion } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { RefreshControl, Text, View, VirtualizedList } from "react-native";
+import { useSelector } from "react-redux";
+
+
+type Props = {
+   id: string,
+   title: string,
+   desc: string,
+   status: number,
+   user_name: string,
+   img: string,
+   total_komentar: number,
+   createdAt: string,
+   isActive: boolean
+}
+
+
+export default function DiscussionDivision() {
+   const { id, active } = useLocalSearchParams<{ id: string, active?: string }>()
+   const [data, setData] = useState<Props[]>([])
+   const { token, decryptToken } = useAuthSession()
+   const [search, setSearch] = useState('')
+   const update = useSelector((state: any) => state.discussionUpdate)
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 5 })
+   const [page, setPage] = useState(1)
+   const [waiting, setWaiting] = useState(false)
+   const [status, setStatus] = useState<'true' | 'false'>('true')
+   const [refreshing, setRefreshing] = useState(false)
+
+   async function handleLoad(loading: boolean, thisPage: number) {
+      try {
+         setWaiting(true)
+         setLoading(loading)
+         setPage(thisPage)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDiscussion({ user: hasil, search, division: id, active: status, 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)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false, 1)
+   }, [update.data])
+
+
+   useEffect(() => {
+      handleLoad(true, 1)
+   }, [status, search])
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      status: data[index].status,
+      user_name: data[index].user_name,
+      img: data[index].img,
+      total_komentar: data[index].total_komentar,
+      createdAt: data[index].createdAt,
+      isActive: data[index].isActive,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <View style={[Styles.wrapBtnTab]}>
+               <ButtonTab
+                  active={status == "false" ? "false" : "true"}
+                  value="true"
+                  onPress={() => { setStatus("true") }}
+                  label="Aktif"
+                  icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
+                  n={2} />
+               <ButtonTab
+                  active={status == "false" ? "false" : "true"}
+                  value="false"
+                  onPress={() => { setStatus("false") }}
+                  label="Arsip"
+                  icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
+                  n={2} />
+            </View>
+            <InputSearch onChange={setSearch} />
+         </View>
+
+         <View style={[{ flex: 2 }]}>
+            {
+               loading ?
+                  arrSkeleton.map((item: any, i: number) => {
+                     return (
+                        <SkeletonContent key={i} />
+                     )
+                  })
+                  :
+                  data.length > 0 ?
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
+                           return (
+                              <BorderBottomItem
+                                 key={index}
+                                 width={55}
+                                 onPress={() => { router.push(`./discussion/${item.id}`) }}
+                                 borderType="bottom"
+                                 icon={
+                                    <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                 }
+                                 title={item.user_name}
+                                 subtitle={
+                                    status == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
+                                 }
+                                 rightTopInfo={item.createdAt}
+                                 desc={item.desc}
+                                 leftBottomInfo={
+                                    <View style={[Styles.rowItemsCenter]}>
+                                       <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                                       <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                                    </View>
+                                 }
+                                 rightBottomInfo={item.total_komentar + ' Komentar'}
+                              />
+                           )
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        onEndReached={loadMoreData}
+                        onEndReachedThreshold={0.5}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
+                     />
+                     // data.map((item, index) => (
+                     //    <BorderBottomItem
+                     //       key={index}
+                     //       width={55}
+                     //       onPress={() => { router.push(`./discussion/${item.id}`) }}
+                     //       borderType="bottom"
+                     //       icon={
+                     //          <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                     //       }
+                     //       title={item.user_name}
+                     //       subtitle={
+                     //          active == "true" ? item.status == 1 ? <LabelStatus category='success' text='BUKA' size="small" /> : <LabelStatus category='error' text='TUTUP' size="small" /> : <></>
+                     //       }
+                     //       rightTopInfo={item.createdAt}
+                     //       desc={item.desc}
+                     //       leftBottomInfo={
+                     //          <View style={[Styles.rowItemsCenter]}>
+                     //             <Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
+                     //             <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
+                     //          </View>
+                     //       }
+                     //       rightBottomInfo={item.total_komentar + ' Komentar'}
+                     //    />
+                     // ))
+                     :
+                     (
+                        <Text style={[Styles.textDefault, Styles.cGray, Styles.mv10, { textAlign: "center" }]}>Tidak ada diskusi</Text>
+                     )
+            }
+         </View>
+      </View>
+   );
+}

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

@@ -0,0 +1,588 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonHeader } from "@/components/buttonHeader";
+import HeaderRightDocument from "@/components/document/headerDocument";
+import ItemFile from "@/components/document/itemFile";
+import ModalMore from "@/components/document/modalMore";
+import DrawerBottom from "@/components/drawerBottom";
+import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
+import ModalFloat from "@/components/modalFloat";
+import ModalLoading from "@/components/modalLoading";
+import ModalSelectMultiple from "@/components/modalSelectMultiple";
+import Skeleton from "@/components/skeleton";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import {
+   apiDocumentDelete,
+   apiDocumentRename,
+   apiGetDocument,
+   apiShareDocument,
+} from "@/lib/api";
+import { setUpdateDokumen } from "@/lib/dokumenUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import {
+   AntDesign,
+   MaterialCommunityIcons,
+   MaterialIcons,
+} from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { startActivityAsync } from 'expo-intent-launcher';
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from 'expo-sharing';
+import { useEffect, useState } from "react";
+import {
+   Alert,
+   Platform,
+   Pressable,
+   RefreshControl,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import * as mime from 'react-native-mime-types';
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   category: string;
+   name: string;
+   extension: string;
+   idStorage: string;
+   path: string;
+   createdBy: string;
+   share: boolean;
+   createdAt: string;
+   updatedAt: string;
+};
+
+type PropsPath = {
+   id: string;
+   name: string;
+};
+
+export default function DocumentDivision() {
+   const [isShare, setShare] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [path, setPath] = useState("home")
+   const [data, setData] = useState<Props[]>([])
+   const [dataJalur, setDataJalur] = useState<PropsPath[]>([])
+   const [dariSelectAll, setDariSelectAll] = useState(false)
+   const [selectedFiles, setSelectedFiles] = useState<any>([])
+   const [selectAll, setSelectAll] = useState(false)
+   const [shareSelected, setShareSelected] = useState(false)
+   const [copyAllowed, setCopyAllowed] = useState(true)
+   const [modalMore, setModalMore] = useState(false)
+   const [isRename, setRename] = useState(false)
+   const dispatch = useDispatch();
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
+   const update = useSelector((state: any) => state.dokumenUpdate)
+   const [refreshing, setRefreshing] = useState(false)
+   const [loadingOpen, setLoadingOpen] = useState(false)
+   const [bodyRename, setBodyRename] = useState({
+      id: "",
+      name: "",
+      path: "",
+      idDivision: id,
+      extension: "",
+   });
+
+   async function handleLoad(loading: boolean) {
+      try {
+         setLoading(loading)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDocument({
+            user: hasil,
+            path,
+            division: id,
+            category: "all",
+         });
+         setData(response.data);
+         setDataJalur(response.jalur);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(true);
+   }, [path, update]);
+
+   const handleCheckboxChange = (index: number) => {
+      setDariSelectAll(false);
+      if (selectedFiles.some((i: any) => i.id == data[index].id)) {
+         setSelectedFiles(
+            selectedFiles.filter((i: any) => i.id != data[index].id)
+         );
+      } else {
+         setSelectedFiles([
+            ...selectedFiles,
+            {
+               id: data[index].id,
+               name: data[index].name,
+               path: data[index].path,
+               extension: data[index].extension,
+               category: data[index].category,
+               share: data[index].share,
+               idStorage: data[index].idStorage,
+            },
+         ]);
+      }
+   };
+
+   function cek() {
+      if (selectedFiles.length == data.length) {
+         setSelectAll(true);
+      } else {
+         setSelectAll(false);
+      }
+
+      const shareSelected = selectedFiles.some((i: any) => i?.share == true);
+      if (shareSelected) {
+         setShareSelected(true);
+      } else {
+         setShareSelected(false);
+      }
+
+      const cek = selectedFiles.some((i: any) => i?.category == "FOLDER");
+      if (cek || selectedFiles.length > 1) {
+         setCopyAllowed(false);
+      } else {
+         setCopyAllowed(true);
+      }
+   }
+
+   useEffect(() => {
+      cek();
+   }, [selectedFiles]);
+
+   const handleSelectAll = () => {
+      if (!selectAll) {
+         setDariSelectAll(false);
+         for (let index = 0; index < data.length; index++) {
+            if (!selectedFiles.some((i: any) => i.id == data[index].id)) {
+               const newArr = {
+                  id: data[index].id,
+                  name: data[index].name,
+                  path: data[index].path,
+                  extension: data[index].extension,
+                  category: data[index].category,
+                  share: data[index].share,
+                  idStorage: data[index].idStorage,
+               };
+               setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]);
+            }
+         }
+      } else {
+         setDariSelectAll(true);
+         setSelectedFiles([]);
+      }
+   };
+
+   const handleBatal = () => {
+      setSelectedFiles([]);
+      setSelectAll(false);
+      setDariSelectAll(false);
+   };
+
+   function onChooseRename() {
+      setBodyRename({
+         ...bodyRename,
+         id: selectedFiles[0].id,
+         name: selectedFiles[0].name,
+         path: selectedFiles[0].path,
+         extension: selectedFiles[0].extension,
+      });
+      setRename(true);
+   }
+
+   async function handleRename() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDocumentRename({ user: hasil, ...bodyRename });
+         if (response.success) {
+            ToastAndroid.show("Berhasil mengubah nama", ToastAndroid.SHORT);
+            dispatch(setUpdateDokumen(!update));
+            handleBatal();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT);
+      } finally {
+         setRename(false);
+      }
+   }
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDocumentDelete({
+            user: hasil,
+            data: selectedFiles,
+         });
+         if (response.success) {
+            ToastAndroid.show("Berhasil menghapus", ToastAndroid.SHORT);
+            dispatch(setUpdateDokumen(!update));
+            handleBatal();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT);
+      }
+   }
+
+   useEffect(() => {
+      handleBatal();
+   }, [update]);
+
+   async function handleShare(selectedDivision: any[]) {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiShareDocument({
+            user: hasil,
+            dataDivision: selectedDivision,
+            dataItem: selectedFiles,
+         });
+         if (response.success) {
+            ToastAndroid.show("Berhasil membagikan item", ToastAndroid.SHORT);
+            dispatch(setUpdateDokumen(!update));
+            handleBatal();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT);
+      } finally {
+         setShare(false);
+      }
+   }
+
+
+   const openFile = (item: Props) => {
+      setLoadingOpen(true)
+      let remoteUrl = 'https://wibu-storage.wibudev.com/api/files/' + item.idStorage;
+      const fileName = item.name + '.' + item.extension;
+      let localPath = `${FileSystem.documentDirectory}/${fileName}`;
+      const mimeType = mime.lookup(fileName)
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         try {
+            if (Platform.OS == 'android') {
+               // open with android intent
+               await startActivityAsync(
+                  'android.intent.action.VIEW',
+                  {
+                     data: contentURL,
+                     flags: 1,
+                     type: mimeType as string,
+                  }
+               );
+               // or
+               // Sharing.shareAsync(localPath);
+
+            } else if (Platform.OS == 'ios') {
+               Sharing.shareAsync(localPath);
+            }
+         } catch (error) {
+            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
+         } finally {
+            setLoadingOpen(false)
+         }
+      });
+   };
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () =>
+                  selectedFiles.length > 0 || dariSelectAll ? (
+                     <ButtonHeader
+                        item={<MaterialIcons name="close" size={20} color="white" />}
+                        onPress={() => {
+                           handleBatal();
+                        }}
+                     />
+                  ) : (
+                     <ButtonBackHeader
+                        onPress={() => {
+                           router.back();
+                        }}
+                     />
+                  ),
+               headerTitle:
+                  selectedFiles.length > 0 || dariSelectAll
+                     ? `${selectedFiles.length} item terpilih`
+                     : "Dokumen Divisi",
+               headerTitleAlign: "center",
+               headerRight: () =>
+                  selectedFiles.length > 0 || dariSelectAll ? (
+                     <ButtonHeader
+                        item={
+                           <MaterialIcons name="checklist-rtl" size={20} color="white" />
+                        }
+                        onPress={() => {
+                           handleSelectAll();
+                        }}
+                     />
+                  ) : (
+                     <HeaderRightDocument path={path} />
+                  ),
+            }}
+         />
+         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
+         <ScrollView
+            style={{ height: "100%" }}
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.rowItemsCenter]}>
+                  {
+                     loading ?
+                        arrSkeleton.map((item, index) => (
+                           <Skeleton key={index} width={60} height={10} borderRadius={10} style={[Styles.mr05]} />
+                        ))
+                        :
+                        dataJalur.map((item, index) => (
+                           <Pressable
+                              key={index}
+                              style={[Styles.rowItemsCenter]}
+                              onPress={() => {
+                                 setPath(item.id);
+                              }}
+                           >
+                              {item.id != "home" && (
+                                 <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
+                              )}
+                              <Text> {item.name} </Text>
+                           </Pressable>
+                        ))
+                  }
+               </View>
+               <View>
+                  {
+                     loading ?
+                        arrSkeleton.map((item, index) => (
+                           <Skeleton key={index} width={100} widthType="percent" height={50} borderRadius={10} />
+                        ))
+                        :
+                        data.length > 0 ? (
+                           data.map((item, index) => {
+                              const isSelected = selectedFiles.some((i: any) => i?.id == item.id);
+                              return (
+                                 <ItemFile
+                                    key={index}
+                                    category={
+                                       item.category == "FOLDER"
+                                          ? item.share
+                                             ? "folder-shared"
+                                             : "folder"
+                                          : item.share
+                                             ? "file-shared"
+                                             : "file"
+                                    }
+                                    title={
+                                       item.category == "FOLDER"
+                                          ? item.name
+                                          : `${item.name}.${item.extension}`
+                                    }
+                                    dateTime={item.createdAt}
+                                    onChecked={() => {
+                                       handleCheckboxChange(index);
+                                    }}
+                                    checked={isSelected}
+                                    onPress={() => {
+                                       if (item.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
+                                          setPath(item.id);
+                                       } else if (item.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
+                                          openFile(item)
+                                       }
+                                    }}
+                                 />
+                              );
+                           })
+                        ) : (
+                           <Text
+                              style={[
+                                 Styles.textDefault,
+                                 Styles.cGray,
+                                 Styles.mt15,
+                                 { textAlign: "center" },
+                              ]}
+                           >
+                              Tidak ada dokumen
+                           </Text>
+                        )}
+               </View>
+            </View>
+         </ScrollView>
+         {(selectedFiles.length > 0 || dariSelectAll) && (
+            <View style={[ColorsStatus.primary, Styles.bottomMenuSelectDocument]}>
+               <View style={[Styles.rowItemsCenter, { justifyContent: "center" }]}>
+                  {/* <MenuItemRow
+                     icon={
+                        <MaterialCommunityIcons
+                           name="download-outline"
+                           color="white"
+                           size={25}
+                        />
+                     }
+                     title="Unduh"
+                     onPress={() => { }}
+                     column="many"
+                     color="white"
+                     disabled={selectedFiles.length == 0 || !copyAllowed}
+                  /> */}
+                  <MenuItemRow
+                     icon={
+                        <MaterialCommunityIcons
+                           name="trash-can-outline"
+                           color="white"
+                           size={25}
+                        />
+                     }
+                     title="Hapus"
+                     onPress={() => {
+                        AlertKonfirmasi({
+                           title: "Konfirmasi",
+                           desc: "Apakah anda yakin ingin menghapus dokumen?",
+                           onPress: () => {
+                              handleDelete();
+                           },
+                        });
+                     }}
+                     column="many"
+                     color="white"
+                     disabled={selectedFiles.length == 0 || shareSelected}
+                  />
+                  <MenuItemRow
+                     icon={
+                        <MaterialCommunityIcons
+                           name="pencil-outline"
+                           color="white"
+                           size={25}
+                        />
+                     }
+                     title="Ganti Nama"
+                     onPress={() => {
+                        onChooseRename();
+                     }}
+                     column="many"
+                     color="white"
+                     disabled={selectedFiles.length != 1 || shareSelected}
+                  />
+                  <MenuItemRow
+                     icon={
+                        <MaterialCommunityIcons
+                           name="share-variant-outline"
+                           color="white"
+                           size={25}
+                        />
+                     }
+                     title="Bagikan"
+                     onPress={() => {
+                        setShare(true);
+                     }}
+                     column="many"
+                     color="white"
+                     disabled={selectedFiles.length != 1 || shareSelected}
+                  />
+                  <MenuItemRow
+                     icon={
+                        <MaterialCommunityIcons
+                           name="dots-vertical"
+                           color="white"
+                           size={25}
+                        />
+                     }
+                     title="Lainnya"
+                     onPress={() => {
+                        setModalMore(true);
+                     }}
+                     column="many"
+                     color="white"
+                     disabled={
+                        selectedFiles.length == 1 ||
+                           (selectedFiles.length > 0 && !shareSelected)
+                           ? false
+                           : true
+                     }
+                  />
+               </View>
+            </View>
+         )}
+
+         <DrawerBottom
+            animation="slide"
+            isVisible={modalMore}
+            setVisible={setModalMore}
+            title=""
+         >
+            <ModalMore
+               onClose={() => {
+                  setModalMore(false);
+               }}
+               data={selectedFiles}
+               share={shareSelected}
+            />
+         </DrawerBottom>
+
+         <ModalFloat
+            title="Ganti Nama"
+            isVisible={isRename}
+            setVisible={setRename}
+            onSubmit={() => {
+               handleRename();
+            }}
+            disableSubmit={bodyRename.name == ""}
+         >
+            <View>
+               <InputForm
+                  type="default"
+                  placeholder="Nama File"
+                  value={bodyRename.name}
+                  onChange={(text) => {
+                     setBodyRename({ ...bodyRename, name: text });
+                  }}
+               />
+            </View>
+         </ModalFloat>
+
+         <ModalSelectMultiple
+            choose="dinas"
+            title="Bagikan"
+            category="share-division"
+            open={isShare}
+            close={setShare}
+            onSelect={(value) => {
+               handleShare(value)
+            }}
+            value={id}
+            item={selectedFiles[0]?.id}
+         />
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,185 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
+import MenuItemRow from "@/components/menuItemRow";
+import Styles from "@/constants/Styles";
+import { apiAddFileTask, apiCheckFileTask } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import {
+   ActivityIndicator,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function TaskDivisionAddFile() {
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const [fileForm, setFileForm] = useState<any[]>([]);
+   const [listFile, setListFile] = useState<any[]>([]);
+   const [indexDelFile, setIndexDelFile] = useState<number>(0);
+   const [isModal, setModal] = useState(false);
+   const { token, decryptToken } = useAuthSession();
+   const [loadingCheck, setLoadingCheck] = useState(false);
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+
+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: false,
+      });
+      if (!result.canceled) {
+         if (result.assets?.[0].uri) {
+            const check = await handleCheckFile(result.assets?.[0]);
+            if (check) {
+               setFileForm([...fileForm, result.assets?.[0]]);
+               setListFile([...listFile, result.assets?.[0].name]);
+            } else {
+               ToastAndroid.show("File sudah ada", ToastAndroid.SHORT);
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setListFile([...listFile.filter((val, i) => i !== index)]);
+      setFileForm([...fileForm.filter((val, i) => i !== index)]);
+      setModal(false);
+   }
+
+   async function handleCheckFile(val: any) {
+      try {
+         setLoadingCheck(true);
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
+
+         fd.append("file", {
+            uri: val.uri,
+            type: "application/octet-stream",
+            name: val.name,
+         } as any);
+
+         fd.append(
+            "data",
+            JSON.stringify({
+               user: hasil,
+            })
+         );
+
+         const response = await apiCheckFileTask({ data: fd, id: detail });
+         return response.success;
+      } catch (error) {
+         console.error(error);
+         return false;
+      } finally {
+         setLoadingCheck(false);
+      }
+   }
+
+   async function handleAddFile() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
+
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: "application/octet-stream",
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append(
+            "data",
+            JSON.stringify({
+               user: hasil,
+            })
+         );
+
+         const response = await apiAddFileTask({ data: fd, id: detail });
+         if (response.success) {
+            ToastAndroid.show("Berhasil menambahkan file", ToastAndroid.SHORT);
+            dispatch(setUpdateTask({ ...update, file: !update.file }));
+            router.back();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah File",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={fileForm.length == 0 ? true : false}
+                     onPress={() => { handleAddFile() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <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]}>
+                           {
+                              listFile.map((item, index) => (
+                                 <BorderBottomItem
+                                    key={index}
+                                    borderType="all"
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    title={item}
+                                    titleWeight="normal"
+                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
+                                 />
+                              ))
+                           }
+                        </View>
+                     </View>
+                  )
+               }
+               {
+                  loadingCheck && <ActivityIndicator size="small" />
+               }
+            </View>
+         </ScrollView>
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,168 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiAddMemberTask, apiGetDivisionMember, apiGetTaskOne } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function AddMemberTask() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.projectUpdate)
+   const { token, decryptToken } = useAuthSession()
+   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+
+   async function handleLoadOldMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTaskOne({
+            user: hasil,
+            id: detail,
+            cat: 'member',
+         });
+         setDataOld(response.data)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+
+   async function handleLoadMemberDivision() {
+      const hasil = await decryptToken(String(token?.current))
+      const responMemberDivision = await apiGetDivisionMember({ id: id, user: hasil, search: search })
+      setData(responMemberDivision.data)
+   }
+
+
+   useEffect(() => {
+      handleLoadOldMember()
+   }, []);
+
+
+   useEffect(() => {
+      handleLoadMemberDivision()
+   }, [search]);
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiAddMemberTask({ id: detail, data: { user: hasil, member: selectMember, idDivision: id } })
+         if (response.success) {
+            ToastAndroid.show('Berhasil menambahkan anggota', ToastAndroid.SHORT)
+            dispatch(setUpdateTask({ ...update, member: !update.member }))
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal menambahkan anggota', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Anggota Kegiatan',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="update"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => setSearch(val)} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.idUser)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && onChoose(item.idUser, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]}>{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,179 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiCreateTaskTugas } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import DateTimePicker, { DateType } from "react-native-ui-datepicker";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function TaskDivisionAddTask() {
+   const { token, decryptToken } = useAuthSession();
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const [disable, setDisable] = useState(true);
+   const [range, setRange] = useState<{
+      startDate: DateType;
+      endDate: DateType;
+   }>({ startDate: undefined, endDate: undefined });
+   const [error, setError] = useState({
+      startDate: false,
+      endDate: false,
+      title: false,
+   });
+   const [title, setTitle] = useState("");
+
+   const from = range.startDate
+      ? dayjs(range.startDate).format("DD-MM-YYYY")
+      : "";
+   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+
+   function checkAll() {
+      if (
+         from == "" ||
+         to == "" ||
+         title == "" ||
+         title == "null" ||
+         error.startDate ||
+         error.endDate ||
+         error.title
+      ) {
+         setDisable(true);
+      } else {
+         setDisable(false);
+      }
+   }
+
+   function onValidation(cat: string, val: string) {
+      if (cat == "title") {
+         setTitle(val);
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, title: true }));
+         } else {
+            setError((error) => ({ ...error, title: false }));
+         }
+      }
+   }
+
+   useEffect(() => {
+      checkAll();
+   }, [from, to, title, error]);
+
+   async function handleCreate() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiCreateTaskTugas({
+            data: {
+               title,
+               dateStart: dayjs(range.startDate).format("YYYY-MM-DD"),
+               dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"),
+               user: hasil,
+               idDivision: id,
+            },
+            id: detail,
+         });
+         if (response.success) {
+            dispatch(setUpdateTask({ ...update, task: !update.task, progress: !update.progress }));
+            ToastAndroid.show("Berhasil menambah data", ToastAndroid.SHORT);
+            router.back();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Gagal menambah data", ToastAndroid.SHORT);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Tugas",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={disable}
+                     onPress={() => {
+                        handleCreate();
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <DateTimePicker
+                     mode="range"
+                     startDate={range.startDate}
+                     endDate={range.endDate}
+                     onChange={(param) => setRange(param)}
+                     styles={{
+                        selected: Styles.selectedDate,
+                        selected_label: Styles.cWhite,
+                        range_fill: Styles.selectRangeDate,
+                     }}
+                  />
+               </View>
+               <View style={[Styles.mv10]}>
+                  <View style={[Styles.rowSpaceBetween]}>
+                     <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>
+                        </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>
+                        </View>
+                     </View>
+                  </View>
+                  {
+                     (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                  }
+               </View>
+               <InputForm
+                  label="Judul Tugas"
+                  type="default"
+                  placeholder="Judul Tugas"
+                  required
+                  bg="white"
+                  value={title}
+                  error={error.title}
+                  errorText="Judul tidak boleh kosong"
+                  onChange={(e) => {
+                     onValidation("title", e)
+                  }}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,106 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiCancelTask } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function TaskDivisionCancel() {
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const { token, decryptToken } = useAuthSession();
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+   const [reason, setReason] = useState("");
+   const [error, setError] = useState(false);
+   const [disable, setDisable] = useState(false);
+
+   function onValidation(val: string) {
+      setReason(val);
+      if (val == "" || val == "null") {
+         setError(true);
+      } else {
+         setError(false);
+      }
+   }
+
+   function checkAll() {
+      if (reason == "" || reason == "null" || error) {
+         setDisable(true);
+      } else {
+         setDisable(false);
+      }
+   }
+
+   useEffect(() => {
+      checkAll();
+   }, [reason, error]);
+
+   async function handleCancel() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiCancelTask(
+            {
+               reason: reason,
+               user: hasil,
+            },
+            detail
+         );
+         if (response.success) {
+            dispatch(setUpdateTask({ ...update, data: !update.data }));
+            ToastAndroid.show("Berhasil membatalkan kegiatan", ToastAndroid.SHORT);
+            router.back();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Gagal membatalkan kegiatan", ToastAndroid.SHORT);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Pembatalan Tugas",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disable}
+                     category="cancel"
+                     onPress={() => {
+                        handleCancel();
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Alasan Pembatalan"
+                  type="default"
+                  placeholder="Alasan Pembatalan"
+                  required
+                  bg="white"
+                  error={error}
+                  errorText="Alasan pembatalan harus diisi"
+                  onChange={(val) => onValidation(val)}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,123 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditTask, apiGetTaskOne } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function TaskDivisionEdit() {
+   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
+   const { token, decryptToken } = useAuthSession();
+   const [judul, setJudul] = useState("");
+   const [error, setError] = useState(false);
+   const [disable, setDisable] = useState(false);
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTaskOne({
+            user: hasil,
+            cat: "data",
+            id: detail,
+         });
+         setJudul(response.data.title);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   function onValidation(val: string) {
+      setJudul(val);
+      if (val == "" || val == "null") {
+         setError(true);
+      }else{
+         setError(false);
+      }
+   }
+
+   function checkAll() {
+      if (judul == "" || judul == "null" || error) {
+         setDisable(true);
+      } else {
+         setDisable(false);
+      }
+   }
+
+   useEffect(() => {
+      checkAll();
+   }, [judul, error]);
+
+   async function handleUpdate() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiEditTask(
+            {
+               title: judul,
+               user: hasil,
+            },
+            detail
+         );
+         if (response.success) {
+            dispatch(setUpdateTask({ ...update, data: !update.data }));
+            ToastAndroid.show("Berhasil mengubah data", ToastAndroid.SHORT);
+            router.back();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Terjadi kesalahan", ToastAndroid.SHORT);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Judul",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="update"
+                     disable={disable}
+                     onPress={() => { handleUpdate() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Judul Kegiatan"
+                  type="default"
+                  placeholder="Judul Kegiatan"
+                  required
+                  bg="white"
+                  value={judul}
+                  onChange={(val) => { onValidation(val) }}
+                  error={error}
+                  errorText="Judul Kegiatan harus diisi"
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,76 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import SectionCancel from "@/components/sectionCancel";
+import SectionProgress from "@/components/sectionProgress";
+import HeaderRightTaskDetail from "@/components/task/headerTaskDetail";
+import SectionFileTask from "@/components/task/sectionFileTask";
+import SectionMemberTask from "@/components/task/sectionMemberTask";
+import SectionTanggalTugasTask from "@/components/task/sectionTanggalTugasTask";
+import Styles from "@/constants/Styles";
+import { apiGetTaskOne } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string
+   title: string
+   desc: string
+   reason: string
+   status: number
+   isActive: boolean
+}
+
+export default function DetailTaskDivision() {
+   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<Props>()
+   const [loading, setLoading] = useState(true)
+   const [progress, setProgress] = useState(0)
+   const update = useSelector((state: any) => state.taskUpdate)
+
+
+   async function handleLoad() {
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetTaskOne({ id: detail, user: hasil, cat: 'data' })
+         setData(response.data)
+         const responseProgress = await apiGetTaskOne({ id: detail, user: hasil, cat: 'progress' })
+         setProgress(responseProgress.data.progress)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad()
+   }, [update.progress, update.data])
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: loading ? 'Loading...                            ' : data?.title,
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightTaskDetail id={detail} division={id} status={data?.status}/>,
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {
+                  data?.reason != null && data?.reason != "" && <SectionCancel text={data?.reason} />
+               }
+               <SectionProgress text={`Kemajuan Kegiatan ${progress}%`} progress={progress} />
+               <SectionTanggalTugasTask />
+               <SectionFileTask />
+               <SectionMemberTask />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,220 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
+import ImageUser from "@/components/imageNew";
+import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
+import ModalSelect from "@/components/modalSelect";
+import SectionListAddTask from "@/components/project/sectionListAddTask";
+import Styles from "@/constants/Styles";
+import { apiCreateTask } from "@/lib/api";
+import { setMemberChoose } from "@/lib/memberChoose";
+import { setTaskCreate } from "@/lib/taskCreate";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+
+export default function CreateTaskDivision() {
+   const { id } = useLocalSearchParams();
+   const { token, decryptToken } = useAuthSession();
+   const dispatch = useDispatch();
+   const [isSelect, setSelect] = useState(false);
+   const [valChoose, setValChoose] = useState("");
+   const entitiesMember = useSelector((state: any) => state.memberChoose);
+   const taskCreate = useSelector((state: any) => state.taskCreate);
+   const update = useSelector((state: any) => state.taskUpdate)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [title, setTitle] = useState('')
+   const [error, setError] = useState(false);
+   const [isModal, setModal] = useState(false)
+   let hitung = 0;
+
+   useEffect(() => {
+      if (hitung == 0) {
+         dispatch(setTaskCreate([]));
+         dispatch(setMemberChoose([]));
+      }
+      hitung++;
+   }, []);
+
+
+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: false
+      });
+      if (!result.canceled) {
+         if (result.assets[0].uri) {
+            setFileForm([...fileForm, result.assets[0]])
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModal(false)
+   }
+
+
+   function handleBack() {
+      dispatch(setTaskCreate([]));
+      dispatch(setMemberChoose([]));
+      router.back();
+   }
+
+   async function handleCreate() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const fd = new FormData()
+
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            { user: hasil, task: taskCreate, member: entitiesMember, title, idDivision: id }
+         ))
+
+         const response = await apiCreateTask(fd)
+         if (response.success) {
+            dispatch(setUpdateTask({ ...update, data: !update.data }))
+            ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+            handleBack()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        handleBack();
+                     }}
+                  />
+               ),
+               headerTitle: `Tambah Tugas`,
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={title == "" || entitiesMember.length == 0 || taskCreate.length == 0}
+                     category="create"
+                     onPress={() => { handleCreate() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Judul Tugas"
+                  type="default"
+                  placeholder="Judul Tugas"
+                  required
+                  value={title}
+                  onChange={(val) => {
+                     setTitle(val);
+                     val == "" || val == "null" ? setError(true) : setError(false);
+                  }}
+                  error={error}
+                  errorText="Judul Tugas tidak boleh kosong"
+               />
+               <ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => { router.push(`/division/${id}/task/create/task`); }} />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               <ButtonSelect value="Tambah Anggota" onPress={() => { router.push(`/division/${id}/task/create/member`); }} />
+               <SectionListAddTask />
+               {
+                  fileForm.length > 0 && (
+                     <View style={[Styles.mb15]}>
+                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+                        <View style={[Styles.wrapPaper]}>
+                           {
+                              fileForm.map((item, index) => (
+                                 <BorderBottomItem
+                                    key={index}
+                                    borderType="all"
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    title={item.name}
+                                    titleWeight="normal"
+                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
+                                 />
+                              ))
+                           }
+                        </View>
+                     </View>
+                  )
+               }
+               {entitiesMember.length > 0 && (
+                  <View>
+                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+                        <Text>Anggota</Text>
+                        <Text>Total {entitiesMember.length} Anggota</Text>
+                     </View>
+
+                     <View style={[Styles.borderAll, Styles.round10, Styles.p10]}>
+                        {entitiesMember.map(
+                           (item: { img: any; name: any }, index: any) => {
+                              return (
+                                 <BorderBottomItem
+                                    key={index}
+                                    borderType="bottom"
+                                    icon={
+                                       <ImageUser
+                                          src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                          size="sm"
+                                       />
+                                    }
+                                    title={item.name}
+                                 />
+                              );
+                           }
+                        )}
+                     </View>
+                  </View>
+               )}
+
+            </View>
+         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
+
+         <ModalSelect
+            category={"member"}
+            close={setSelect}
+            onSelect={(value) => { }}
+            title={"Pilih Anggota"}
+            open={isSelect}
+            idParent={''}
+            valChoose={valChoose}
+         />
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,139 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiGetDivisionMember } from "@/lib/api";
+import { setMemberChoose } from "@/lib/memberChoose";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function AddMemberCreateTask() {
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string, detail: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const entitiesMember = useSelector((state: any) => state.memberChoose)
+
+   async function handleLoadMemberDivision() {
+      const hasil = await decryptToken(String(token?.current))
+      const responMemberDivision = await apiGetDivisionMember({ id: id, user: hasil, search: search })
+      setData(responMemberDivision.data)
+      if (entitiesMember.length > 0) {
+         setSelectMember(entitiesMember)
+      }
+   }
+
+   useEffect(() => {
+      handleLoadMemberDivision()
+   }, [search]);
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         dispatch(setMemberChoose(selectMember))
+         router.back()
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal menambahkan anggota', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => setSearch(val)} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 onChoose(item.idUser, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]}>{item.name}</Text>
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,155 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { setTaskCreate } from "@/lib/taskCreate";
+import dayjs from "dayjs";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   SafeAreaView,
+   ScrollView,
+   Text,
+   View
+} from "react-native";
+import DateTimePicker, {
+   DateType
+} from "react-native-ui-datepicker";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function CreateTaskAddTugas() {
+   const dispatch = useDispatch()
+   const [disable, setDisable] = useState(true);
+   const [range, setRange] = useState<{
+      startDate: DateType;
+      endDate: DateType;
+   }>({ startDate: undefined, endDate: undefined });
+   const [error, setError] = useState({
+      startDate: false,
+      endDate: false,
+      title: false,
+   })
+   const [title, setTitle] = useState('');
+   const taskCreate = useSelector((state: any) => state.taskCreate)
+
+   const from = range.startDate
+      ? dayjs(range.startDate).format("DD-MM-YYYY")
+      : "";
+   const to = range.endDate ? dayjs(range.endDate).format("DD-MM-YYYY") : "";
+
+   function checkAll() {
+      if (from == "" || to == "" || title == "" || title == "null" || error.startDate || error.endDate || error.title) {
+         setDisable(true)
+      } else {
+         setDisable(false)
+      }
+   }
+
+   function onValidation(cat: string, val: string) {
+      if (cat == "title") {
+         setTitle(val)
+         if (val == "" || val == "null") {
+            setError(error => ({ ...error, title: true }))
+         } else {
+            setError(error => ({ ...error, title: false }))
+         }
+      }
+   }
+
+   useEffect(() => {
+      checkAll()
+   }, [from, to, title, error])
+
+   async function handleCreate() {
+      try {
+         dispatch(setTaskCreate([...taskCreate, {
+            title: title,
+            dateStart: from,
+            dateEnd: to,
+            dateStartFix: dayjs(range.startDate).format("YYYY-MM-DD"),
+            dateEndFix: dayjs(range.endDate).format("YYYY-MM-DD"),
+         }]))
+         router.back();
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Tugas",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disable}
+                     category="create"
+                     onPress={() => { handleCreate() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <DateTimePicker
+                     mode="range"
+                     startDate={range.startDate}
+                     endDate={range.endDate}
+                     onChange={(param) => setRange(param)}
+                     styles={{
+                        selected: Styles.selectedDate,
+                        selected_label: Styles.cWhite,
+                        range_fill: Styles.selectRangeDate,
+                     }}
+                  />
+               </View>
+               <View style={[Styles.mv10]}>
+                  <View style={[Styles.rowSpaceBetween]}>
+                     <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>
+                        </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>
+                        </View>
+                     </View>
+                  </View>
+                  {
+                     (error.endDate || error.startDate) && <Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>Tanggal tidak boleh kosong</Text>
+                  }
+               </View>
+               <InputForm
+                  label="Judul Tugas"
+                  type="default"
+                  placeholder="Judul Tugas"
+                  required
+                  bg="white"
+                  value={title}
+                  error={error.title}
+                  errorText="Judul tidak boleh kosong"
+                  onChange={(e) => {
+                     onValidation("title", e)
+                  }}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,337 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import InputSearch from "@/components/inputSearch";
+import LabelStatus from "@/components/labelStatus";
+import PaperGridContent from "@/components/paperGridContent";
+import ProgressBar from "@/components/progressBar";
+import Skeleton from "@/components/skeleton";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiGetTask } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import {
+   AntDesign,
+   Ionicons,
+   MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, RefreshControl, ScrollView, Text, View, VirtualizedList } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   title: string;
+   desc: string;
+   status: number;
+   progress: number;
+   member: number;
+};
+
+export default function ListTask() {
+   const { id, status } = useLocalSearchParams<{ id: string; status: string }>()
+   const [isList, setList] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<Props[]>([])
+   const [search, setSearch] = useState("")
+   const update = useSelector((state: any) => state.taskUpdate)
+   const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
+   const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
+   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)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTask({
+            user: hasil,
+            division: id,
+            status: statusFix,
+            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)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false, 1)
+   }, [update.data])
+
+   useEffect(() => {
+      handleLoad(true, 1);
+   }, [statusFix, search]);
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      title: data[index].title,
+      desc: data[index].desc,
+      status: data[index].status,
+      progress: data[index].progress,
+      member: data[index].member,
+   })
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            <ScrollView horizontal style={[Styles.mb10]}>
+               <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]}>
+               <InputSearch width={68} onChange={setSearch} />
+               <Pressable
+                  onPress={() => {
+                     setList(!isList);
+                  }}
+               >
+                  <MaterialCommunityIcons
+                     name={isList ? "format-list-bulleted" : "view-grid"}
+                     color={"black"}
+                     size={30}
+                  />
+               </Pressable>
+            </View>
+         </View>
+         <View style={[{ flex: 2 }]}>
+            {
+               loading ?
+                  isList ?
+                     arrSkeleton.map((item, index) => (
+                        <SkeletonTwoItem key={index} />
+                     ))
+                     :
+                     arrSkeleton.map((item, index) => (
+                        <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
+                     ))
+                  :
+                  data.length > 0 ? (
+                     isList ? (
+                        <View>
+                           <VirtualizedList
+                              data={data}
+                              getItemCount={() => data.length}
+                              getItem={getItem}
+                              renderItem={({ item, index }) => (
+                                 <BorderBottomItem
+                                    key={index}
+                                    onPress={() => {
+                                       router.push(`./task/${item.id}`);
+                                    }}
+                                    borderType="bottom"
+                                    icon={
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                          <AntDesign name="areachart" size={25} color={"#384288"} />
+                                       </View>
+                                    }
+                                    title={item.title}
+                                 />
+                              )}
+                              keyExtractor={(item, index) => index.toString()}
+                              onEndReached={loadMoreData}
+                              onEndReachedThreshold={0.5}
+                              showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
+                           />
+                           {/* {data.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => {
+                                    router.push(`./task/${item.id}`);
+                                 }}
+                                 borderType="bottom"
+                                 icon={
+                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                       <AntDesign name="areachart" size={25} color={"#384288"} />
+                                    </View>
+                                 }
+                                 title={item.title}
+                              />
+                           ))} */}
+                        </View>
+                     ) : (
+                        <View>
+                           <VirtualizedList
+                              data={data}
+                              getItemCount={() => data.length}
+                              getItem={getItem}
+                              renderItem={({ item, index }) => (
+                                 <PaperGridContent
+                                    key={index}
+                                    onPress={() => {
+                                       router.push(`./task/${item.id}`);
+                                    }}
+                                    content="page"
+                                    title={item.title}
+                                    headerColor="primary"
+                                 >
+                                    <ProgressBar category="list" value={item.progress} />
+                                    <View style={[Styles.rowSpaceBetween]}>
+                                       <Text></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>
+                              )}
+                              keyExtractor={(item, index) => index.toString()}
+                              onEndReached={loadMoreData}
+                              onEndReachedThreshold={0.5}
+                              showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
+                           />
+                           {/* {data.map((item, index) => (
+                              <PaperGridContent
+                                 key={index}
+                                 onPress={() => {
+                                    router.push(`./task/${item.id}`);
+                                 }}
+                                 content="page"
+                                 title={item.title}
+                                 headerColor="primary"
+                              >
+                                 <ProgressBar category="list" value={item.progress} />
+                                 <View style={[Styles.rowSpaceBetween]}>
+                                    <Text></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>
+                     )
+                  ) : (
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: "center" },]} >
+                        Tidak ada data
+                     </Text>
+                  )
+
+            }
+         </View>
+      </View>
+   );
+}

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

@@ -0,0 +1,207 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import DateTimePicker, { DateType } from "react-native-ui-datepicker";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function UpdateProjectTaskDivision() {
+   const { detail } = useLocalSearchParams<{ detail: string }>();
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+   const { token, decryptToken } = useAuthSession();
+   const [range, setRange] = useState<{
+      startDate: DateType;
+      endDate: DateType;
+   }>({ startDate: undefined, endDate: undefined });
+   const [month, setMonth] = useState<any>();
+   const [year, setYear] = useState<any>();
+   const [loading, setLoading] = useState(true);
+   const [disableBtn, setDisableBtn] = useState(false);
+   const [title, setTitle] = useState("");
+   const [error, setError] = useState({
+      startDate: false,
+      endDate: false,
+      title: false,
+   });
+
+   const from = range.startDate
+      ? dayjs(range.startDate).format("MMM DD, YYYY")
+      : "";
+   const to = range.endDate ? dayjs(range.endDate).format("MMM DD, YYYY") : "";
+
+   async function handleLoad() {
+      try {
+         setLoading(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTaskTugas({
+            user: hasil,
+            id: detail,
+         });
+         setTitle(response.data.title);
+         setRange({
+            startDate: new Date(response.data.dateStart),
+            endDate: new Date(response.data.dateEnd),
+         });
+         setMonth(new Date(response.data.dateStart).getMonth());
+         setYear(new Date(response.data.dateStart).getFullYear());
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiEditTaskTugas({ data: { title, dateStart: dayjs(range.startDate).format("YYYY-MM-DD"), dateEnd: dayjs(range.endDate).format("YYYY-MM-DD"), user: hasil }, id: detail });
+         if (response.success) {
+            dispatch(setUpdateTask({ ...update, task: !update.task }))
+            ToastAndroid.show("Berhasil mengubah data", ToastAndroid.SHORT);
+            router.back();
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show("Gagal mengubah data", ToastAndroid.SHORT);
+      }
+   }
+
+   function checkAll() {
+      if (
+         from == "" ||
+         to == "" ||
+         title == "" ||
+         title == "null" ||
+         error.startDate ||
+         error.endDate ||
+         error.title
+      ) {
+         setDisableBtn(true);
+      } else {
+         setDisableBtn(false);
+      }
+   }
+
+   function onValidation(cat: string, val: string) {
+      if (cat == "title") {
+         setTitle(val);
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, title: true }));
+         } else {
+            setError((error) => ({ ...error, title: false }));
+         }
+      }
+   }
+
+   useEffect(() => {
+      checkAll();
+   }, [from, to, title, error]);
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Tanggal dan Tugas",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="update"
+                     onPress={() => {
+                        handleEdit()
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, Styles.p10]}>
+                  {!loading && (
+                     <DateTimePicker
+                        mode="range"
+                        startDate={range.startDate}
+                        endDate={range.endDate}
+                        onChange={(param) => setRange(param)}
+                        month={month}
+                        year={year}
+                        styles={{
+                           selected: Styles.selectedDate,
+                           selected_label: Styles.cWhite,
+                           range_fill: Styles.selectRangeDate,
+                        }}
+                     />
+                  )}
+               </View>
+               <View style={[Styles.mv10]}>
+                  <View style={[Styles.rowSpaceBetween]}>
+                     <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>
+                        </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>
+                        </View>
+                     </View>
+                  </View>
+                  {(error.endDate || error.startDate) && (
+                     <Text
+                        style={[Styles.textInformation, Styles.cError, Styles.mt05]}
+                     >
+                        Tanggal tidak boleh kosong
+                     </Text>
+                  )}
+               </View>
+               <InputForm
+                  label="Judul Tugas"
+                  type="default"
+                  placeholder="Judul Tugas"
+                  required
+                  bg="white"
+                  value={title}
+                  error={error.title}
+                  errorText="Judul tidak boleh kosong"
+                  onChange={(e) => {
+                     onValidation("title", e)
+                  }}
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,168 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetUser } from "@/lib/api";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function AddMemberDivision() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [idGroup, setIdGroup] = useState('')
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const update = useSelector((state: any) => state.divisionUpdate)
+   const dispatch = useDispatch()
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDivisionOneDetail({ user: hasil, id })
+         setDataOld(response.data.member)
+         setIdGroup(response.data.division.idGroup)
+         const responsemember = await apiGetUser({ user: hasil, active: "true", search: search, group: String(response.data.division.idGroup) })
+         setData(responsemember.data.filter((i: any) => i.idUserRole != 'supadmin'))
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function handleLoadMember(search: string) {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetUser({ user: hasil, active: "true", search: search, group: String(idGroup) })
+      setData(response.data.filter((i: any) => i.idUserRole != 'supadmin'))
+   }
+
+
+   useEffect(() => {
+      handleLoad()
+   }, []);
+
+
+   function handleSearch(search: string) {
+      setSearch(search)
+      handleLoadMember(search)
+   }
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiAddMemberDivision({ id: id, data: { user: hasil, member: selectMember } })
+         if (response.success) {
+            dispatch(setUpdateDivision(!update))
+            ToastAndroid.show('Berhasil menambahkan anggota', ToastAndroid.SHORT)
+            router.replace(`/division/${id}/info`)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal menambahkan anggota', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="update"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => handleSearch(val)} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={item.img}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.id)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && onChoose(item.id, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,115 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { apiEditDivision, apiGetDivisionOneDetail } from "@/lib/api";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function EditDivision() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.divisionUpdate)
+   const { token, decryptToken } = useAuthSession();
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [data, setData] = useState({
+      name: "",
+      desc: "",
+   });
+   const [error, setError] = useState({
+      name: false,
+   });
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionOneDetail({ user: hasil, id });
+         setData({
+            name: response.data.division.name,
+            desc: response.data.division.desc,
+         });
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiEditDivision({ user: hasil, name: data.name, desc: data.desc }, id)
+         if (response.success) {
+            dispatch(setUpdateDivision(!update))
+            ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      }
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Divisi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={error.name}
+                     category="update"
+                     onPress={() => { handleEdit() }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm
+                  label="Nama Divisi"
+                  type="default"
+                  placeholder="Nama Divisi"
+                  required
+                  value={data.name}
+                  error={error.name}
+                  errorText="Nama divisi tidak boleh kosong"
+                  onChange={(value) => {
+                     setData({ ...data, name: value });
+                     if (value == "") {
+                        setError({ ...error, name: true });
+                     } else {
+                        setError({ ...error, name: false });
+                     }
+                  }}
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi Divisi"
+                  value={data.desc}
+                  onChange={(value) => {
+                     setData({ ...data, desc: value })
+                  }}
+                  multiline
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,69 @@
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import DiscussionDivisionDetail from "@/components/division/discussionDivisionDetail"
+import FileDivisionDetail from "@/components/division/fileDivisionDetail"
+import FiturDivisionDetail from "@/components/division/fiturDivisionDetail"
+import HeaderRightDivisionDetail from "@/components/division/headerDivisionDetail"
+import TaskDivisionDetail from "@/components/division/taskDivisionDetail"
+import CaraouselHome from "@/components/home/carouselHome"
+import Styles from "@/constants/Styles"
+import { apiGetDivisionOneDetail } from "@/lib/api"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { router, Stack, useLocalSearchParams } from "expo-router"
+import { useEffect, useState } from "react"
+import { SafeAreaView, ScrollView, View } from "react-native"
+
+type Props = {
+   id: string,
+   idVillage: string,
+   idGroup: string,
+   name: string,
+   desc: string,
+   isActive: boolean,
+}
+
+export default function DetailDivisionFitur() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [data, setData] = useState<Props>()
+   const [loading, setLoading] = useState(true)
+
+
+   async function handleLoad() {
+      try {
+         setLoading(true)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDivisionOneDetail({ user: hasil, id })
+         setData(response.data.division)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad()
+   }, [])
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: loading ? 'Loading...                            ' : data?.name,
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightDivisionDetail id={id} />,
+            }}
+         />
+         <ScrollView>
+            <CaraouselHome />
+            <View style={[Styles.ph15, Styles.mb100]}>
+               <FiturDivisionDetail />
+               <TaskDivisionDetail />
+               <FileDivisionDetail />
+               <DiscussionDivisionDetail />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,235 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import BorderBottomItem from "@/components/borderBottomItem"
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
+import DrawerBottom from "@/components/drawerBottom"
+import ImageUser from "@/components/imageNew"
+import SectionCancel from "@/components/sectionCancel"
+import Skeleton from "@/components/skeleton"
+import SkeletonTwoItem from "@/components/skeletonTwoItem"
+import { ColorsStatus } from "@/constants/ColorsStatus"
+import Styles from "@/constants/Styles"
+import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiUpdateStatusAdminDivision } from "@/lib/api"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import { router, Stack, useLocalSearchParams } from "expo-router"
+import { useEffect, useState } from "react"
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { useSelector } from "react-redux"
+
+type PropsDetail = {
+   id: string,
+   idVillage: string,
+   idGroup: string,
+   name: string,
+   desc: string,
+   isActive: boolean,
+}
+
+type PropsMember = {
+   id: string,
+   isAdmin: boolean,
+   isLeader: boolean,
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function InformationDivision() {
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [isModal, setModal] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const [dataDetail, setDataDetail] = useState<PropsDetail>()
+   const [dataMember, setDataMember] = useState<PropsMember[]>([])
+   const [refresh, setRefresh] = useState(false)
+   const update = useSelector((state: any) => state.divisionUpdate)
+   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [loading, setLoading] = useState(true)
+   const [dataMemberChoose, setDataMemberChoose] = useState({
+      id: '',
+      name: '',
+      isAdmin: false
+   })
+
+   function handleMemberOut() {
+      setModal(false)
+      AlertKonfirmasi({
+         title: 'Konfirmasi',
+         desc: 'Apakah anda yakin ingin mengeluarkan anggota?',
+         onPress: () => { memberOut() }
+      })
+   }
+
+   async function memberOut() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiDeleteMemberDivision({ user: hasil, id: dataMemberChoose.id }, id)
+         if (response.success) {
+            setRefresh(!refresh)
+            ToastAndroid.show('Berhasil mengeluarkan anggota', ToastAndroid.SHORT)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         setModal(false)
+      }
+   }
+
+   async function handleMemberAdmin() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiUpdateStatusAdminDivision({ user: hasil, id: dataMemberChoose.id, isAdmin: dataMemberChoose.isAdmin }, id)
+         if (response.success) {
+            setRefresh(!refresh)
+            ToastAndroid.show(dataMemberChoose.isAdmin ? 'Berhasil memberhentikan admin' : 'Berhasil menjadi admin', ToastAndroid.SHORT)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         setModal(false)
+      }
+   }
+
+   async function handleLoad(loading: boolean) {
+      try {
+         setLoading(loading)
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetDivisionOneDetail({ user: hasil, id })
+         setDataDetail(response.data.division)
+         setDataMember(response.data.member)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false)
+   }, [refresh, update])
+
+   useEffect(() => {
+      handleLoad(true)
+   }, [])
+
+   function handleChooseMember(item: PropsMember) {
+      setDataMemberChoose(item)
+      setModal(true)
+   }
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Informasi Divisi',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightDivisionInfo id={id} active={dataDetail?.isActive} />,
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {
+                  dataDetail?.isActive == false && (
+                     <SectionCancel title={'Divisi dinonaktifkan'} />
+                  )
+               }
+               <View style={[Styles.mb15]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
+                  <View style={[Styles.wrapPaper]}>
+                     {loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <Skeleton key={index} width={100} height={10} widthType="percent" borderRadius={10} />
+                           )
+                        })
+                        :
+                        <Text>{dataDetail?.desc}</Text>
+                     }
+                  </View>
+               </View>
+               <View style={[Styles.mb15]}>
+                  <Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text>
+                  <View style={[Styles.wrapPaper]}>
+                     {
+                        dataDetail?.isActive && (
+                           <BorderBottomItem
+                              onPress={() => { router.push(`/division/${id}/add-member`) }}
+                              borderType="none"
+                              icon={
+                                 <View style={[Styles.iconContent, ColorsStatus.gray]}>
+                                    <Feather name="user-plus" size={25} color={'#384288'} />
+                                 </View>
+                              }
+                              title="Tambah Anggota"
+                           />
+                        )
+                     }
+
+                     {
+                        loading ?
+                           arrSkeleton.map((item, index) => {
+                              return (
+                                 <SkeletonTwoItem key={index} />
+                              )
+                           })
+                           :
+                           dataMember.map((item, index) => {
+                              return (
+                                 <BorderBottomItem
+                                    width={55}
+                                    key={index}
+                                    borderType="bottom"
+                                    onPress={() => { dataDetail?.isActive && handleChooseMember(item) }}
+                                    icon={
+                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
+                                    }
+                                    title={item.name}
+                                    rightTopInfo={item.isAdmin ? "Admin" : "Anggota"}
+                                 />
+                              )
+                           })
+                     }
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={dataMemberChoose.name}>
+            <View>
+               <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberAdmin() }}>
+                  <View style={[Styles.rowItemsCenter]}>
+                     <View style={[Styles.iconContent, ColorsStatus.info]}>
+                        <MaterialIcons name="verified-user" size={25} color='#19345E' />
+                     </View>
+                     <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
+                        <View style={[Styles.ml10]}>
+                           <Text style={[Styles.textDefault]}>{dataMemberChoose.isAdmin ? 'Memberhentikan sebagai admin' : 'Jadikan admin'}</Text>
+                        </View>
+                     </View>
+                  </View>
+               </Pressable>
+
+               <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}>
+                  <View style={[Styles.rowItemsCenter]}>
+                     <View style={[Styles.iconContent, ColorsStatus.info]}>
+                        <MaterialCommunityIcons name="close-circle" size={25} color='#19345E' />
+                     </View>
+                     <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
+                        <View style={[Styles.ml10]}>
+                           <Text style={[Styles.textDefault]}>Keluarkan dari divisi</Text>
+                        </View>
+                     </View>
+                  </View>
+               </Pressable>
+            </View>
+         </DrawerBottom>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,148 @@
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import ReportChartDocument from "@/components/division/reportChartDocument"
+import ReportChartEvent from "@/components/division/reportChartEvent"
+import ReportChartProgress from "@/components/division/reportChartProgress"
+import { InputDate } from "@/components/inputDate"
+import Styles from "@/constants/Styles"
+import { apiGetDivisionReport } from "@/lib/api"
+import { stringToDate } from "@/lib/fun_stringToDate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import dayjs from "dayjs"
+import { router, Stack, useLocalSearchParams } from "expo-router"
+import { useEffect, useState } from "react"
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+
+export default function ReportDivision() {
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const { token, decryptToken } = useAuthSession();
+   const [showReport, setShowReport] = useState(false);
+   const [dataTable, setDataTable] = useState([])
+   const [dataChart, setDataChart] = useState({
+      progress: [],
+      event: [],
+      dokumen: [],
+   })
+   const [data, setData] = useState({
+      date: "",
+      dateEnd: "",
+   });
+   const [error, setError] = useState({
+      date: false,
+      dateEnd: false,
+   });
+
+   function validationForm( cat: "date" | "dateEnd", val: string) {
+      if (cat == "date") {
+         setData({ ...data, date: val, dateEnd: "" });
+         if (val == "" || val == "null") {
+            setError({ ...error, date: true, dateEnd: false });
+         } else {
+            setError({ ...error, date: false, dateEnd: true });
+         }
+      } else if (cat == "dateEnd") {
+         setData({ ...data, dateEnd: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+         const dateEnd = stringToDate(val);
+         const date = stringToDate(data.date);
+         if (dateEnd < date) {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) == true ||
+         Object.values(data).some((v) => v == "") == true
+      ) {
+         setShowReport(false);
+      } else {
+         setShowReport(true);
+      }
+   }
+
+   useEffect(() => {
+      checkForm();
+   }, [error, data]);
+
+   async function handleReport() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionReport({
+            user: hasil,
+            cat: "lainnya",
+            division: id,
+            date: dayjs(stringToDate(data.date)).format("YYYY-MM-DD"),
+            dateEnd: dayjs(stringToDate(data.dateEnd)).format("YYYY-MM-DD"),
+         });
+         if (response.success) {
+            setDataChart({
+               progress: response.data.progress,
+               event: response.data.event,
+               dokumen: response.data.dokumen,
+            })
+            setShowReport(true);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      if (showReport) {
+         handleReport();
+      }
+   }, [showReport]);
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Laporan Divisi',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputDate
+                  onChange={(val) => validationForm("date", val)}
+                  mode="date"
+                  value={data.date}
+                  label="Tanggal Awal"
+                  required
+                  error={error.date}
+                  errorText="Tanggal awal tidak boleh kosong"
+                  placeholder="Pilih Tanggal Awal"
+               />
+               <InputDate
+                  onChange={(val) => validationForm("dateEnd", val)}
+                  mode="date"
+                  value={data.dateEnd}
+                  label="Tanggal Akhir"
+                  required
+                  error={error.dateEnd}
+                  errorText="Tanggal akhir tidak boleh kosong atau lebih awal dari tanggal awal"
+                  placeholder="Pilih Tanggal Akhir"
+               />
+               {showReport && (
+                  <>
+                     <ReportChartProgress data={dataChart.progress} />
+                     <ReportChartDocument data={dataChart.dokumen} />
+                     <ReportChartEvent data={dataChart.event} />
+                  </>
+               )}
+
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/division/create.tsx

@@ -0,0 +1,138 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonNextHeader from "@/components/buttonNextHeader";
+import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { setFormCreateDivision } from "@/lib/divisionCreate";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+export default function CreateDivision() {
+   const [isSelect, setSelect] = useState(false);
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.divisionCreate);
+   const entityUser = useSelector((state: any) => state.user)
+   const userLogin = useSelector((state: any) => state.entities)
+   const [error, setError] = useState({
+      idGroup: false,
+      name: false,
+   });
+   const [dataForm, setDataForm] = useState({
+      idGroup: "",
+      name: "",
+      desc: "",
+   });
+
+   function validationForm(cat: string, val: any, label?: string) {
+      if (cat == "group") {
+         setChooseGroup({ val, label: String(label) });
+         dispatch(setFormCreateDivision({ ...update, member: [], admin: [] }));
+         setDataForm({ ...dataForm, idGroup: val });
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, group: true }));
+         } else {
+            setError((error) => ({ ...error, group: false }));
+         }
+      } else if (cat == "name") {
+         setDataForm({ ...dataForm, name: val });
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, name: true }));
+         } else {
+            setError((error) => ({ ...error, name: false }));
+         }
+      } else if (cat == "desc") {
+         setDataForm({ ...dataForm, desc: val });
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, desc: true }));
+         } else {
+            setError((error) => ({ ...error, desc: false }));
+         }
+      }
+   }
+
+   function handleSetData() {
+      dispatch(setFormCreateDivision({ ...update, data: dataForm }))
+      router.push(`./create/add-member`)
+   }
+
+   useEffect(() => {
+      if (entityUser.role != "supadmin" && entityUser.role != "developer") {
+         validationForm('group', userLogin.idGroup, userLogin.group);
+      }
+   }, []);
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Divisi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonNextHeader
+                     onPress={() => { handleSetData() }}
+                     disable={error.idGroup || error.name || chooseGroup.val == "" || chooseGroup.val == "null" || dataForm.name == "" || dataForm.name == "null"}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {
+                  (entityUser.role == "supadmin" || entityUser.role == "developer") &&
+                  (
+                     <SelectForm
+                        label="Lembaga Desa"
+                        placeholder="Pilih Lembaga Desa"
+                        value={chooseGroup.label}
+                        required
+                        onPress={() => { setSelect(true) }}
+                        error={error.idGroup}
+                        errorText="Lembaga Desa tidak boleh kosong"
+                     />
+                  )
+               }
+               <InputForm
+                  label="Nama Divisi"
+                  type="default"
+                  placeholder="Nama Divisi"
+                  required
+                  value={dataForm.name}
+                  onChange={(val) => validationForm('name', val)}
+                  error={error.name}
+                  errorText="Nama divisi tidak boleh kosong"
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi Divisi"
+                  value={dataForm.desc}
+                  onChange={(val) => setDataForm({ ...dataForm, desc: val })}
+                  multiline
+               />
+            </View>
+         </ScrollView>
+
+         <ModalSelect
+            category={"group"}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm('group', value.val, value.label);
+            }}
+            title="Lembaga Desa"
+            open={isSelect}
+            valChoose={chooseGroup.val}
+         />
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,122 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import Styles from "@/constants/Styles";
+import { apiCreateDivision } from "@/lib/api";
+import { setFormCreateDivision } from "@/lib/divisionCreate";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function CreateDivisionAddAdmin() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<string[]>([])
+   const update = useSelector((state: any) => state.divisionCreate)
+   const updateDivision = useSelector((state: any) => state.divisionUpdate)
+   const dispatch = useDispatch()
+
+   async function handleLoadMember() {
+      setData(update.member)
+   }
+
+   useEffect(() => {
+      handleLoadMember()
+   }, [])
+
+   function onChoose(val: string) {
+      if (selectMember.some((i: any) => i == val)) {
+         setSelectMember(selectMember.filter((i: any) => i != val))
+      } else {
+         setSelectMember([...selectMember, val])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         dispatch(setFormCreateDivision({ ...update, admin: selectMember }))
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCreateDivision({ ...update, user: hasil })
+         if (response.success) {
+            ToastAndroid.show('Berhasil membuat divisi', ToastAndroid.SHORT)
+            dispatch(setFormCreateDivision({ admin: [], member: [], data: { idGroup: '', name: '', desc: '' } }))
+            dispatch(setUpdateDivision(!updateDivision))
+            router.replace(`/division/`)
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal membuat divisi', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Admin Divisi',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <ScrollView>
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.id)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && onChoose(item.idUser)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter, Styles.w70]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

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

@@ -0,0 +1,137 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonNextHeader from "@/components/buttonNextHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiGetUser } from "@/lib/api";
+import { setFormCreateDivision } from "@/lib/divisionCreate";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function CreateDivisionAddMember() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const update = useSelector((state: any) => state.divisionCreate)
+   const dispatch = useDispatch()
+
+
+   async function handleLoadMember() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetUser({ user: hasil, active: "true", search: search, group: String(update.data.idGroup) })
+      setData(response.data.filter((i: any) => i.idUserRole != 'supadmin'))
+      if (update.member.length > 0) {
+         setSelectMember(update.member)
+      }
+   }
+
+   useEffect(() => {
+      handleLoadMember()
+   }, [search])
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      dispatch(setFormCreateDivision({ ...update, member: selectMember }))
+      router.push(`./add-admin-division`)
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonNextHeader
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => { handleAddMember() }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => setSearch(val)} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.id)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && onChoose(item.id, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter, Styles.w70]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

app/(application)/division/index.tsx

@@ -0,0 +1,295 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import InputSearch from "@/components/inputSearch";
+import PaperGridContent from "@/components/paperGridContent";
+import Skeleton from "@/components/skeleton";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { apiGetDivision } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import {
+   AntDesign,
+   Feather,
+   Ionicons,
+   MaterialCommunityIcons,
+   MaterialIcons,
+} from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, RefreshControl, Text, View, VirtualizedList } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   name: string;
+   desc: string;
+   jumlah_member: number;
+};
+
+export default function ListDivision() {
+   const { active, group, cat } = useLocalSearchParams<{
+      active?: string;
+      group?: string;
+      cat?: string;
+   }>();
+   const [isList, setList] = useState(false);
+   const entityUser = useSelector((state: any) => state.user)
+   const { token, decryptToken } = useAuthSession()
+   const [search, setSearch] = useState("")
+   const [nameGroup, setNameGroup] = useState("")
+   const [data, setData] = useState<Props[]>([])
+   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)
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivision({
+            user: hasil,
+            active: status,
+            search: search,
+            group: String(group),
+            kategori: category,
+            page: thisPage
+         });
+
+         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)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad(false, 1);
+   }, [update]);
+
+   useEffect(() => {
+      handleLoad(true, 1);
+   }, [status, search, group, category]);
+
+   const loadMoreData = () => {
+      if (waiting) return
+      setTimeout(() => {
+         handleLoad(false, page + 1)
+      }, 1000);
+   };
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad(false, 1)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      name: data[index].name,
+      desc: data[index].desc,
+      jumlah_member: data[index].jumlah_member,
+   })
+
+
+   return (
+      <View style={[Styles.p15, { flex: 1 }]}>
+         <View>
+            {
+               entityUser.role != "user" && entityUser.role != "coadmin" ?
+                  <View style={[Styles.wrapBtnTab]}>
+                     <ButtonTab
+                        active={status == "false" ? "false" : "true"}
+                        value="true"
+                        onPress={() => { setStatus("true") }}
+                        label="Aktif"
+                        icon={
+                           <Feather
+                              name="check-circle"
+                              color={status == "false" ? "black" : "white"}
+                              size={20}
+                           />
+                        }
+                        n={2}
+                     />
+                     <ButtonTab
+                        active={status == "false" ? "false" : "true"}
+                        value="false"
+                        onPress={() => { setStatus("false") }}
+                        label="Tidak Aktif"
+                        icon={
+                           <AntDesign
+                              name="closecircleo"
+                              color={status == "true" ? "black" : "white"}
+                              size={20}
+                           />
+                        }
+                        n={2}
+                     />
+                  </View>
+                  :
+                  <View style={[Styles.wrapBtnTab]}>
+                     <ButtonTab
+                        active={category == "semua" ? "false" : "true"}
+                        value="true"
+                        onPress={() => { setCategory("divisi-saya") }}
+                        label="Divisi Saya"
+                        icon={
+                           <Ionicons
+                              name="file-tray-outline"
+                              color={category == "semua" ? "black" : "white"}
+                              size={20}
+                           />
+                        }
+                        n={2}
+                     />
+                     <ButtonTab
+                        active={category == "semua" ? "false" : "true"}
+                        value="false"
+                        onPress={() => { setCategory("semua") }}
+                        label="Semua Divisi"
+                        icon={
+                           <Ionicons
+                              name="file-tray-stacked-outline"
+                              color={category == "semua" ? "white" : "black"}
+                              size={20}
+                           />
+                        }
+                        n={2}
+                     />
+                  </View>
+            }
+
+            <View style={[Styles.rowSpaceBetween]}>
+               <InputSearch width={68} onChange={setSearch} />
+               <Pressable
+                  onPress={() => {
+                     setList(!isList);
+                  }}
+               >
+                  <MaterialCommunityIcons
+                     name={isList ? "format-list-bulleted" : "view-grid"}
+                     color={"black"}
+                     size={30}
+                  />
+               </Pressable>
+            </View>
+            {(entityUser.role == "supadmin" || entityUser.role == "developer") && (
+               <View style={[Styles.mv05]}>
+                  <Text>Filter : {nameGroup}</Text>
+               </View>
+            )}
+         </View>
+         <View style={[{ flex: 2 }]}>
+            {
+               loading ?
+                  isList ?
+                     arrSkeleton.map((item, index) => (
+                        <SkeletonTwoItem key={index} />
+                     ))
+                     :
+                     arrSkeleton.map((item, index) => (
+                        <Skeleton key={index} width={100} height={180} widthType="percent" borderRadius={10} />
+                     ))
+                  :
+                  data.length == 0 ? (
+                     <View style={[Styles.mt15]}>
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     </View>
+                  ) : (
+                     isList ? (
+                        <View style={[Styles.mb50]}>
+                           <VirtualizedList
+                              data={data}
+                              style={[{ paddingBottom: 100 }]}
+                              getItemCount={() => data.length}
+                              getItem={getItem}
+                              renderItem={({ item, index }: { item: Props, index: number }) => {
+                                 return (
+                                    <BorderBottomItem
+                                       key={index}
+                                       onPress={() => { router.push(`/division/${item.id}`) }}
+                                       borderType="bottom"
+                                       icon={
+                                          <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                             <MaterialIcons name="group" size={25} color={"#384288"} />
+                                          </View>
+                                       }
+                                       title={item.name}
+                                       titleWeight="normal"
+                                    />
+                                 )
+                              }}
+                              keyExtractor={(item, index) => String(index)}
+                              onEndReached={loadMoreData}
+                              onEndReachedThreshold={0.5}
+                              showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
+                           />
+                        </View>
+                     ) : (
+                        <View>
+                           <VirtualizedList
+                              data={data}
+                              style={[{ paddingBottom: 100 }]}
+                              getItemCount={() => data.length}
+                              getItem={getItem}
+                              renderItem={({ item, index }: { item: Props, index: number }) => {
+                                 return (
+                                    <PaperGridContent
+                                       key={index}
+                                       onPress={() => {
+                                          router.push(`/division/${item.id}`);
+                                       }}
+                                       content="page"
+                                       title={item.name}
+                                       headerColor="primary"
+                                       contentPosition="top"
+                                    >
+                                       <Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
+                                    </PaperGridContent>
+                                 )
+                              }}
+                              keyExtractor={(item, index) => String(index)}
+                              onEndReached={loadMoreData}
+                              onEndReachedThreshold={0.5}
+                              showsVerticalScrollIndicator={false}
+                              refreshControl={
+                                 <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={handleRefresh}
+                                 />
+                              }
+                           />
+                        </View>
+                     )
+                  )
+            }
+         </View>
+      </View>
+   );
+}

app/(application)/division/report.tsx

@@ -0,0 +1,194 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ReportChartDocument from "@/components/division/reportChartDocument";
+import ReportChartEvent from "@/components/division/reportChartEvent";
+import ReportChartProgress from "@/components/division/reportChartProgress";
+import { InputDate } from "@/components/inputDate";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { apiGetDivisionReport } from "@/lib/api";
+import { stringToDate } from "@/lib/fun_stringToDate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import dayjs from "dayjs";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+
+export default function Report() {
+   const { token, decryptToken } = useAuthSession();
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const [showReport, setShowReport] = useState(false);
+   const [isSelect, setSelect] = useState(false);
+   const [dataTable, setDataTable] = useState([])
+   const [dataChart, setDataChart] = useState({
+      progress: [],
+      event: [],
+      dokumen: [],
+   })
+   const [data, setData] = useState({
+      group: "",
+      date: "",
+      dateEnd: "",
+   });
+   const [error, setError] = useState({
+      group: false,
+      date: false,
+      dateEnd: false,
+   });
+
+   function validationForm(
+      cat: "group" | "date" | "dateEnd",
+      val: string,
+      label?: string
+   ) {
+      if (cat == "group") {
+         setChooseGroup({ val, label: String(label) });
+         setData({ ...data, group: val, dateEnd: "", date: "" });
+         if (val == "" || val == "null") {
+            setError({ ...error, group: true });
+         } else {
+            setError({ ...error, group: false });
+         }
+      } else if (cat == "date") {
+         setData({ ...data, date: val, dateEnd: "" });
+         if (val == "" || val == "null") {
+            setError({ ...error, date: true, dateEnd: false });
+         } else {
+            setError({ ...error, date: false, dateEnd: true });
+         }
+      } else if (cat == "dateEnd") {
+         setData({ ...data, dateEnd: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+         const dateEnd = stringToDate(val);
+         const date = stringToDate(data.date);
+         if (dateEnd < date) {
+            setError({ ...error, dateEnd: true });
+         } else {
+            setError({ ...error, dateEnd: false });
+         }
+      }
+   }
+
+   function checkForm() {
+      if (
+         Object.values(error).some((v) => v == true) == true ||
+         Object.values(data).some((v) => v == "") == true
+      ) {
+         setShowReport(false);
+      } else {
+         setShowReport(true);
+      }
+   }
+
+   useEffect(() => {
+      checkForm();
+   }, [error, data]);
+
+   async function handleReport() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivisionReport({
+            user: hasil,
+            cat: "lainnya",
+            division: "undefined",
+            date: dayjs(stringToDate(data.date)).format("YYYY-MM-DD"),
+            dateEnd: dayjs(stringToDate(data.dateEnd)).format("YYYY-MM-DD"),
+            group: chooseGroup.val,
+         });
+         if (response.success) {
+            setDataChart({
+               progress: response.data.progress,
+               event: response.data.event,
+               dokumen: response.data.dokumen,
+            })
+            setShowReport(true);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      if (showReport) {
+         handleReport();
+      }
+   }, [showReport]);
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Laporan Divisi",
+               headerTitleAlign: "center",
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <SelectForm
+                  bg="white"
+                  label="Lembaga Desa"
+                  placeholder="Pilih Lembaga Desa"
+                  value={chooseGroup.label}
+                  required
+                  onPress={() => {
+                     setSelect(true);
+                  }}
+                  error={error.group}
+                  errorText="Lembaga Desa tidak boleh kosong"
+               />
+               <InputDate
+                  onChange={(val) => validationForm("date", val)}
+                  mode="date"
+                  value={data.date}
+                  label="Tanggal Awal"
+                  required
+                  error={error.date}
+                  errorText="Tanggal awal tidak boleh kosong"
+                  placeholder="Pilih Tanggal Awal"
+               />
+               <InputDate
+                  onChange={(val) => validationForm("dateEnd", val)}
+                  mode="date"
+                  value={data.dateEnd}
+                  label="Tanggal Akhir"
+                  required
+                  error={error.dateEnd}
+                  errorText="Tanggal akhir tidak boleh kosong atau lebih awal dari tanggal awal"
+                  placeholder="Pilih Tanggal Akhir"
+               />
+               {showReport && (
+                  <>
+                     <ReportChartProgress data={dataChart.progress} />
+                     <ReportChartDocument data={dataChart.dokumen} />
+                     <ReportChartEvent data={dataChart.event} />
+                  </>
+               )}
+            </View>
+         </ScrollView>
+
+         <ModalSelect
+            category={"group"}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm("group", value.val, value.label);
+            }}
+            title={"Lembaga Desa"}
+            open={isSelect}
+            valChoose={chooseGroup.val}
+         />
+      </SafeAreaView>
+   );
+}

app/(application)/edit-profile.tsx

@@ -0,0 +1,353 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { apiEditProfile, apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/entitiesSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
+import * as ImagePicker from "expo-image-picker";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   Image,
+   Pressable,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   name: string;
+   nik: string;
+   email: string;
+   phone: string;
+   gender: string;
+   img: string;
+   isActive: boolean;
+   idGroup: string;
+   idPosition: string;
+};
+
+export default function EditProfile() {
+   const dispatch = useDispatch()
+   const entities = useSelector((state: any) => state.entities)
+   const { token, decryptToken } = useAuthSession()
+   const [errorImg, setErrorImg] = useState(false)
+   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' });
+   const [valSelect, setValSelect] = useState<"position" | "gender">("position");
+   const [isSelect, setSelect] = useState(false);
+   const [disableBtn, setDisableBtn] = useState(false)
+   const [valChoose, setValChoose] = useState("")
+   const [imgForm, setImgForm] = useState<any>();
+   const [data, setData] = useState<Props>({
+      id: entities.id,
+      name: entities.name,
+      nik: entities.nik,
+      email: entities.email,
+      phone: entities.phone,
+      gender: entities.gender,
+      img: entities.img,
+      isActive: entities.isActive,
+      idGroup: entities.idGroup,
+      idPosition: entities.idPosition
+   });
+   const [error, setError] = useState({
+      position: false,
+      nik: false,
+      name: false,
+      phone: false,
+      email: false,
+      gender: false,
+   });
+
+
+   async function handleLoad() {
+      try {
+         const response = await apiGetProfile({ id: entities.id });
+         dispatch(setEntities(response.data))
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      if (entities.id == undefined) {
+         handleLoad();
+      }
+   }, [entities]);
+
+   function validationForm(cat: string, val: any, label?: string) {
+      if (cat == "position") {
+         setChoosePosition({ val, label: String(label) });
+         setData({ ...data, idPosition: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, position: true });
+         } else {
+            setError({ ...error, position: false });
+         }
+      } else if (cat == "nik") {
+         setData({ ...data, nik: val });
+         if (val == "" || val.length !== 16) {
+            setError({ ...error, nik: true });
+         } else {
+            setError({ ...error, nik: false });
+         }
+      } else if (cat == "name") {
+         setData({ ...data, name: val });
+         if (val == "") {
+            setError({ ...error, name: true });
+         } else {
+            setError({ ...error, name: false });
+         }
+      } else if (cat == "email") {
+         setData({ ...data, email: val });
+         if (
+            val == "" ||
+            !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)
+         ) {
+            setError({ ...error, email: true });
+         } else {
+            setError({ ...error, email: false });
+         }
+      } else if (cat == "phone") {
+         setData({ ...data, phone: val });
+         if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+            setError({ ...error, phone: true });
+         } else {
+            setError({ ...error, phone: false });
+         }
+      } else if (cat == "gender") {
+         setChooseGender({ val, label: String(label) });
+         setData({ ...data, gender: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, gender: true });
+         } else {
+            setError({ ...error, gender: false });
+         }
+      }
+
+   }
+
+   function checkForm() {
+      if (Object.values(error).some((v) => v == true) || Object.values(data).some((v) => v == "")) {
+         setDisableBtn(true)
+      } else {
+         setDisableBtn(false)
+      }
+   }
+
+   useEffect(() => {
+      checkForm()
+   }, [error, data])
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const fd = new FormData()
+
+         if (imgForm != undefined) {
+            fd.append("file", {
+               uri: imgForm.uri,
+               type: imgForm.mimeType,
+               name: imgForm.fileName,
+            } as any);
+         } else {
+            fd.append("file", "undefined",);
+         }
+
+         fd.append("data", JSON.stringify(
+            { user: hasil, ...data }
+         ))
+
+         const response = await apiEditProfile(fd)
+
+         if (response.success) {
+            ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+            await handleLoad()
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal mengupdate data', ToastAndroid.SHORT)
+      }
+   }
+
+
+
+   const pickImageAsync = async () => {
+      let result = await ImagePicker.launchImageLibraryAsync({
+         mediaTypes: ["images"],
+         allowsEditing: true,
+         quality: 1,
+         aspect: [1, 1],
+      });
+
+      if (!result.canceled) {
+         setErrorImg(false)
+         setSelectedImage(result.assets[0].uri);
+         setImgForm(result.assets[0]);
+      } else {
+         alert("Tidak ada gambar yang dipilih");
+         setErrorImg(false)
+      }
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Profile",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="update"
+                     onPress={() => {
+                        handleEdit()
+                     }}
+                  />
+               ),
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  {
+                     selectedImage != undefined ? (
+                        <Pressable onPress={pickImageAsync}>
+                           <Image
+                              src={
+                                 typeof selectedImage === "string"
+                                    ? selectedImage
+                                    : selectedImage.uri
+                              }
+                              style={[Styles.userProfileBig]}
+                              onError={() => { setErrorImg(true) }}
+                           />
+                        </Pressable>
+                     ) : (
+                        <Pressable onPress={pickImageAsync}>
+                           {
+                              <Image
+                                 source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
+                                 style={[Styles.userProfileBig]}
+                                 onError={() => { setErrorImg(true) }}
+                              />
+                           }
+                        </Pressable>
+                     )
+                  }
+               </View>
+               <SelectForm
+                  label="Jabatan"
+                  placeholder="Pilih Jabatan"
+                  value={choosePosition.label}
+                  required
+                  onPress={() => {
+                     setValChoose(choosePosition.val);
+                     setValSelect("position");
+                     setSelect(true);
+                  }}
+                  error={error.position}
+                  errorText="Jabatan tidak boleh kosong"
+               />
+               <InputForm
+                  label="NIK"
+                  type="numeric"
+                  placeholder="NIK"
+                  required
+                  value={data?.nik}
+                  error={error.nik}
+                  errorText="NIK Harus 16 Karakter"
+                  onChange={val => {
+                     validationForm("nik", val)
+                  }}
+               />
+               <InputForm
+                  label="Nama"
+                  type="default"
+                  placeholder="Nama"
+                  required
+                  value={data?.name}
+                  error={error.name}
+                  errorText="Nama tidak boleh kosong"
+                  onChange={val => {
+                     validationForm("name", val)
+                  }}
+               />
+               <InputForm
+                  label="Email"
+                  type="default"
+                  placeholder="Email"
+                  required
+                  value={data?.email}
+                  error={error.email}
+                  errorText="Email tidak valid"
+                  onChange={val => {
+                     validationForm("email", val)
+                  }}
+               />
+               <InputForm
+                  label="Nomor Telepon"
+                  type="numeric"
+                  placeholder="8XX-XXX-XXX"
+                  required
+                  itemLeft={<Text>+62</Text>}
+                  value={data?.phone}
+                  error={error.phone}
+                  errorText="Nomor Telepon tidak valid"
+                  onChange={val => {
+                     validationForm("phone", val)
+                  }}
+               />
+               <SelectForm
+                  label="Jenis Kelamin"
+                  placeholder="Pilih Jenis Kelamin"
+                  value={chooseGender.label}
+                  required
+                  onPress={() => {
+                     setValChoose(chooseGender.val);
+                     setValSelect("gender");
+                     setSelect(true);
+                  }}
+                  error={error.gender}
+                  errorText="Jenis Kelamin tidak boleh kosong"
+               />
+            </View>
+         </ScrollView>
+
+         <ModalSelect
+            category={valSelect}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm(valSelect, value.val, value.label);
+            }}
+            title={
+               valSelect == "position"
+                  ? "Jabatan"
+                  : "Jenis Kelamin"
+            }
+            open={isSelect}
+            idParent={valSelect == "position" ? data?.idGroup : ""}
+            valChoose={valChoose}
+         />
+      </SafeAreaView>
+   );
+}

app/(application)/feature.tsx

@@ -0,0 +1,52 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonFiturMenu } from "@/components/buttonFiturMenu";
+import Styles from "@/constants/Styles";
+import { AntDesign, Entypo, 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)
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Fitur',
+               headerTitleAlign: 'center'
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
+               <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
+               <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
+               <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
+               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
+            </View>
+            <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
+               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} />
+               {
+                  entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} 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') }} />
+                  </>
+               }
+            </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

@@ -0,0 +1,216 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import BorderBottomItem from "@/components/borderBottomItem";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonTab from "@/components/buttonTab";
+import DrawerBottom from "@/components/drawerBottom";
+import { InputForm } from "@/components/inputForm";
+import InputSearch from "@/components/inputSearch";
+import MenuItemRow from "@/components/menuItemRow";
+import SkeletonTwoItem from "@/components/skeletonTwoItem";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+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 { RefreshControl, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   id: string
+   name: string
+   isActive: boolean
+}
+
+export default function Index() {
+   const { token, decryptToken } = useAuthSession()
+   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 [status, setStatus] = useState<'true' | 'false'>('true')
+
+   const [idChoose, setIdChoose] = useState('')
+   const [activeChoose, setActiveChoose] = useState(true)
+   const [titleChoose, setTitleChoose] = useState('')
+   const [refreshing, setRefreshing] = useState(false)
+
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.groupUpdate)
+
+   const [data11, setData1] = useState(Array.from({ length: 20 }, (_, i) => `Item ${i}`));
+
+   const renderItem = ({ item }: { item: string }) => (
+      <View style={{ padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }}>
+         <Text>{item}</Text>
+      </View>
+   );
+
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiEditGroup({ user: hasil, name: titleChoose }, idChoose)
+         dispatch(setUpdateGroup(!update))
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setVisibleEdit(false)
+         setModal(false)
+         ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+      }
+
+   }
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiDeleteGroup({ user: hasil, isActive: activeChoose }, idChoose)
+         dispatch(setUpdateGroup(!update))
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setModal(false)
+         ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+      }
+   }
+
+   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));
+      setRefreshing(false)
+   };
+
+
+   return (
+      <SafeAreaView>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+               />
+            }
+         >
+            <View style={[Styles.p15]}>
+               <View style={[Styles.wrapBtnTab]}>
+                  <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} />}
+                     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} />}
+                     n={2} />
+               </View>
+               <InputSearch onChange={setSearch} />
+               <View>
+                  {
+
+                     loading ?
+                        arrSkeleton.map((item, index) => {
+                           return (
+                              <SkeletonTwoItem key={index} />
+                           )
+                        })
+                        :
+                        data.length > 0 ?
+                           data.map((item, index) => {
+                              return (
+                                 <BorderBottomItem
+                                    key={index}
+                                    onPress={() => {
+                                       setIdChoose(item.id)
+                                       setActiveChoose(item.isActive)
+                                       setTitleChoose(item.name)
+                                       setModal(true)
+                                    }}
+                                    borderType="all"
+                                    icon={
+                                       <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                          <MaterialCommunityIcons name="office-building-outline" size={25} color={'#384288'} />
+                                       </View>
+                                    }
+                                    title={item.name}
+                                 />
+                              )
+                           })
+                           :
+                           <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                  }
+               </View>
+            </View>
+         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={titleChoose}>
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" 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() }
+                     })
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  title="Edit"
+                  onPress={() => {
+                     setModal(false)
+                     setVisibleEdit(true)
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+
+         <DrawerBottom animation="none" height={30} isVisible={isVisibleEdit} setVisible={setVisibleEdit} title="Edit Lembaga Desa">
+            <View style={{ flex: 1 }}>
+               <View>
+                  <InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa" value={titleChoose} onChange={setTitleChoose} />
+               </View>
+               <View>
+                  <ButtonForm text="SIMPAN" onPress={() => { handleEdit() }} />
+               </View>
+            </View>
+         </DrawerBottom>
+
+
+      </SafeAreaView>
+   )
+}

app/(application)/home.tsx

@@ -1,21 +1,57 @@
 import CaraouselHome from "@/components/home/carouselHome";
+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 Styles from "@/constants/Styles";
+import { apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/entitiesSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { Stack } from "expo-router";
-import { SafeAreaView, ScrollView } from "react-native";
+import { useEffect } from "react";
+import { SafeAreaView, ScrollView, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 
 export default function Home() {
+   const entities = useSelector((state: any) => state.entities)
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
+
+   useEffect(() => {
+      handleUserLogin()
+   }, [dispatch]);
+
+   async function handleUserLogin() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetProfile({ id: hasil }).then((data) => dispatch(setEntities(data.data)));
+   }
+
    return (
       <SafeAreaView>
          <Stack.Screen
             options={{
                title: 'Home',
                headerLeft: () => <></>,
-               headerTitle: 'Darmasaba',
-               headerRight: () => <HeaderRightHome />
+               headerTitle: entities.village,
+               headerRight: () => <HeaderRightHome />,
+               headerTitleAlign: 'left',
             }}
          />
          <ScrollView>
-            <CaraouselHome/>
+            <CaraouselHome />
+            <View style={[Styles.ph15]}>
+               <FiturHome />
+               <ProjectHome />
+               <DivisionHome />
+               <ChartProgresHome />
+               <ChartDokumenHome />
+               <EventHome />
+               <DisccussionHome />
+            </View>
          </ScrollView>
       </SafeAreaView>
    )