Merge pull request 'amalia/05-agustus-25' (#13) from amalia/05-agustus-25 into join

Reviewed-on: bip/mobile-darmasaba#13

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

@@ -17,6 +17,7 @@ import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { KeyboardAvoidingView, Platform, Pressable, ScrollView, View } from "react-native";
 import { useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 type Props = {
    id: string
@@ -49,6 +50,7 @@ export default function DetailDiscussionGeneral() {
    const [loadingKomentar, setLoadingKomentar] = useState(true)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
    const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-general/${id}`);
+   const headerHeight = useHeaderHeight();
 
    useEffect(() => {
       const onValueChange = reference.on('value', snapshot => {
@@ -197,7 +199,7 @@ export default function DetailDiscussionGeneral() {
             </ScrollView>
             <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-               keyboardVerticalOffset={110}
+               keyboardVerticalOffset={headerHeight}
             >
                <View style={[
                   Styles.contentItemCenter,

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

@@ -17,6 +17,7 @@ import {
    View
 } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function CalendarDivisionCreate() {
    const { id } = useLocalSearchParams<{ id: string }>()
@@ -24,6 +25,7 @@ export default function CalendarDivisionCreate() {
    const [isSelect, setSelect] = useState(false)
    const update = useSelector((state: any) => state.calendarCreate)
    const dispatch = useDispatch()
+   const headerHeight = useHeaderHeight();
    const [error, setError] = useState({
       title: false,
       dateStart: false,
@@ -145,7 +147,7 @@ export default function CalendarDivisionCreate() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15]}>

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

@@ -78,7 +78,9 @@ export default function CalendarDivision() {
       } catch (error) {
          console.error(error);
       } finally {
-         setLoadingBtn(false)
+         setTimeout(() => {
+            setLoadingBtn(false)
+         }, 500)
       }
    }
 
@@ -155,6 +157,7 @@ export default function CalendarDivision() {
                      date={selected}
                      month={month}
                      onChange={({ date }) => setSelected(date)}
+                     onMonthChange={(month) => setMonth(month)}
                      styles={{
                         selected: Styles.selectedDate,
                         month_label: Styles.cBlack,

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

@@ -20,6 +20,7 @@ import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
 import { useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 type Props = {
    id: string;
@@ -59,6 +60,7 @@ export default function DiscussionDetail() {
    const arrSkeleton = Array.from({ length: 3 })
    const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-division/${detail}`);
    const [refreshing, setRefreshing] = useState(false)
+   const headerHeight = useHeaderHeight();
 
 
    useEffect(() => {
@@ -283,7 +285,7 @@ export default function DiscussionDetail() {
             </ScrollView>
             <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-               keyboardVerticalOffset={110}
+               keyboardVerticalOffset={headerHeight}
             >
                <View
                   style={[

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

@@ -8,6 +8,8 @@ import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView, Platform, SafeAreaView,
@@ -17,6 +19,7 @@ import {
 import Toast from "react-native-toast-message";
 import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function TaskDivisionAddTask() {
    const { token, decryptToken } = useAuthSession();
@@ -25,6 +28,7 @@ export default function TaskDivisionAddTask() {
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [disable, setDisable] = useState(true);
    const [loading, setLoading] = useState(false)
+   const headerHeight = useHeaderHeight();
    const [range, setRange] = useState<{
       startDate: DateType;
       endDate: DateType;
@@ -127,7 +131,7 @@ export default function TaskDivisionAddTask() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
@@ -141,6 +145,13 @@ export default function TaskDivisionAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: Styles.cBlack,
+                           month_selector_label: Styles.cBlack,
+                           year_label: Styles.cBlack,
+                           year_selector_label: Styles.cBlack,
+                           day_label: Styles.cBlack,
+                           time_label: Styles.cBlack,
+                           weekday_label: Styles.cBlack,
                         }}
                      />
                   </View>

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

@@ -6,6 +6,8 @@ import Styles from "@/constants/Styles";
 import { setTaskCreate } from "@/lib/taskCreate";
 import dayjs from "dayjs";
 import { router, Stack } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
@@ -18,8 +20,10 @@ import DateTimePicker, {
    DateType
 } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function CreateTaskAddTugas() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const [disable, setDisable] = useState(true);
    const [range, setRange] = useState<{
@@ -101,7 +105,7 @@ export default function CreateTaskAddTugas() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
@@ -115,6 +119,13 @@ export default function CreateTaskAddTugas() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: Styles.cBlack,
+                           month_selector_label: Styles.cBlack,
+                           year_label: Styles.cBlack,
+                           year_selector_label: Styles.cBlack,
+                           day_label: Styles.cBlack,
+                           time_label: Styles.cBlack,
+                           weekday_label: Styles.cBlack,
                         }}
                      />
                   </View>

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

@@ -6,8 +6,11 @@ import Styles from "@/constants/Styles";
 import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
 import { setUpdateTask } from "@/lib/taskUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useHeaderHeight } from '@react-navigation/elements';
 import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
@@ -21,6 +24,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function UpdateProjectTaskDivision() {
+   const headerHeight = useHeaderHeight();
    const { detail } = useLocalSearchParams<{ detail: string }>();
    const dispatch = useDispatch();
    const update = useSelector((state: any) => state.taskUpdate);
@@ -149,7 +153,7 @@ export default function UpdateProjectTaskDivision() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
@@ -166,6 +170,13 @@ export default function UpdateProjectTaskDivision() {
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
+                              month_label: Styles.cBlack,
+                              month_selector_label: Styles.cBlack,
+                              year_label: Styles.cBlack,
+                              year_selector_label: Styles.cBlack,
+                              day_label: Styles.cBlack,
+                              time_label: Styles.cBlack,
+                              weekday_label: Styles.cBlack,
                            }}
                         />
                      )}

app/(application)/group/index.tsx

@@ -42,14 +42,9 @@ export default function Index() {
 
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.groupUpdate)
-
+   const [error, setError] = useState({
-   const [data11, setData1] = useState(Array.from({ length: 20 }, (_, i) => `Item ${i}`));
+      title: false,
-
+   });
-   const renderItem = ({ item }: { item: string }) => (
-      <View style={{ padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }}>
-         <Text>{item}</Text>
-      </View>
-   );
 
 
    async function handleEdit() {
@@ -109,6 +104,17 @@ export default function Index() {
       setRefreshing(false)
    };
 
+   function validationForm(val: any, cat: 'title') {
+      if (cat === 'title') {
+         setTitleChoose(val)
+         if (val == "" || val.length < 3) {
+            setError((prev) => ({ ...prev, title: true }))
+         } else {
+            setError((prev) => ({ ...prev, title: false }))
+         }
+      }
+   }
+
 
    return (
       <SafeAreaView>
@@ -207,10 +213,18 @@ export default function Index() {
          <DrawerBottom animation="none" keyboard height={30} isVisible={isVisibleEdit} setVisible={() => setVisibleEdit(false)} title="Edit Lembaga Desa">
             <View style={{ flex: 1 }}>
                <View>
-                  <InputForm type="default" placeholder="Nama Lembaga Desa" required label="Lembaga Desa" value={titleChoose} onChange={setTitleChoose} />
+                  <InputForm
+                     type="default"
+                     placeholder="Nama Lembaga Desa"
+                     required
+                     label="Lembaga Desa"
+                     value={titleChoose}
+                     error={error.title}
+                     errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
+                     onChange={(val) => { validationForm(val, 'title') }} />
                </View>
                <View>
-                  <ButtonForm text="SIMPAN" onPress={() => { handleEdit() }} />
+                  <ButtonForm text="SIMPAN" disabled={Object.values(error).some((v) => v == true) || titleChoose == ""} onPress={() => { handleEdit() }} />
                </View>
             </View>
          </DrawerBottom>

app/(application)/member/create.tsx

@@ -24,8 +24,10 @@ import {
 } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function CreateMember() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -230,7 +232,7 @@ export default function CreateMember() {
          <KeyboardAvoidingView
              style={[Styles.h100]}
              behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-             keyboardVerticalOffset={110}
+             keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15]}>

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

@@ -22,6 +22,7 @@ import {
 } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 type Props = {
    id: string;
@@ -38,6 +39,7 @@ type Props = {
 };
 
 export default function EditMember() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -259,7 +261,7 @@ export default function EditMember() {
          <KeyboardAvoidingView
             style={[Styles.h100]}
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>

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

@@ -6,6 +6,8 @@ import Styles from "@/constants/Styles";
 import { apiCreateProjectTask } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -21,8 +23,10 @@ import DateTimePicker, {
    DateType
 } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function ProjectAddTask() {
+   const headerHeight = useHeaderHeight();
    const { token, decryptToken } = useAuthSession()
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
@@ -77,7 +81,7 @@ export default function ProjectAddTask() {
             dispatch(setUpdateProject({ ...update, task: !update.task, progress: !update.progress }))
             Toast.show({ type: 'small', text1: 'Berhasil menambah data', })
             router.back();
-         }else{
+         } else {
             Toast.show({ type: 'small', text1: response.message, })
          }
       } catch (error) {
@@ -112,7 +116,7 @@ export default function ProjectAddTask() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
@@ -126,6 +130,13 @@ export default function ProjectAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: Styles.cBlack,
+                           month_selector_label: Styles.cBlack,
+                           year_label: Styles.cBlack,
+                           year_selector_label: Styles.cBlack,
+                           day_label: Styles.cBlack,
+                           time_label: Styles.cBlack,
+                           weekday_label: Styles.cBlack,
                         }}
                      />
                   </View>

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

@@ -6,6 +6,8 @@ import Styles from "@/constants/Styles";
 import { setTaskCreate } from "@/lib/taskCreate";
 import dayjs from "dayjs";
 import { router, Stack } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import { useEffect, useState } from "react";
 import {
    KeyboardAvoidingView,
@@ -18,8 +20,10 @@ import DateTimePicker, {
    DateType
 } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
+import { useHeaderHeight } from '@react-navigation/elements';
 
 export default function CreateProjectAddTask() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const [disable, setDisable] = useState(true);
    const [range, setRange] = useState<{
@@ -101,7 +105,7 @@ export default function CreateProjectAddTask() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
@@ -115,6 +119,13 @@ export default function CreateProjectAddTask() {
                            selected: Styles.selectedDate,
                            selected_label: Styles.cWhite,
                            range_fill: Styles.selectRangeDate,
+                           month_label: Styles.cBlack,
+                           month_selector_label: Styles.cBlack,
+                           year_label: Styles.cBlack,
+                           year_selector_label: Styles.cBlack,
+                           day_label: Styles.cBlack,
+                           time_label: Styles.cBlack,
+                           weekday_label: Styles.cBlack,
                         }}
                      />
                   </View>

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

@@ -6,8 +6,11 @@ import Styles from "@/constants/Styles";
 import { apiEditProjectTask, apiGetProjectTask } from "@/lib/api";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useHeaderHeight } from '@react-navigation/elements';
 import dayjs from "dayjs";
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import 'intl';
+import 'intl/locale-data/jsonp/id';
 import { useEffect, useState } from "react";
 import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
@@ -15,6 +18,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function UpdateProjectTask() {
+   const headerHeight = useHeaderHeight();
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.projectUpdate)
    const { token, decryptToken } = useAuthSession();
@@ -123,7 +127,7 @@ export default function UpdateProjectTask() {
          />
          <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-            keyboardVerticalOffset={110}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15, Styles.mb100]}>
@@ -136,13 +140,19 @@ export default function UpdateProjectTask() {
                            startDate={range.startDate}
                            endDate={range.endDate}
                            onChange={(param) => setRange(param)}
-                           // styles={defaultStyles}
                            month={month}
                            year={year}
                            styles={{
                               selected: Styles.selectedDate,
                               selected_label: Styles.cWhite,
                               range_fill: Styles.selectRangeDate,
+                              month_label: Styles.cBlack,
+                              month_selector_label: Styles.cBlack,
+                              year_label: Styles.cBlack,
+                              year_selector_label: Styles.cBlack,
+                              day_label: Styles.cBlack,
+                              time_label: Styles.cBlack,
+                              weekday_label: Styles.cBlack,
                            }}
                         />
                      }

components/group/headerGroupList.tsx

@@ -48,9 +48,9 @@ export default function HeaderRightGroupList() {
       if (cat === 'title') {
          setTitle(val)
          if (val == "" || val.length < 3) {
-            setError({ ...error, title: true })
+            setError((prev) => ({ ...prev, title: true }))
          } else {
-            setError({ ...error, title: false })
+            setError((prev) => ({ ...prev, title: false }))
          }
       }
    }
@@ -91,7 +91,7 @@ export default function HeaderRightGroupList() {
                   />
                </View>
                <View>
-                  <ButtonForm text="SIMPAN" onPress={() => { onCheck() }} />
+                  <ButtonForm text="SIMPAN" disabled={Object.values(error).some((v) => v == true) || title == ""} onPress={() => { onCheck() }} />
                </View>
             </View>
          </DrawerBottom>

components/inputDate.tsx

@@ -1,11 +1,11 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
-import { stringToDate } from "@/lib/fun_stringToDate";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import Text from "./Text";
+import ModalFloat from "./modalFloat";
 
 type Props = {
    label?: string;
@@ -58,14 +58,34 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
             {info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
          </View>
          {
-            modal && (
+            Platform.OS === 'ios' ? (
-               <DateTimePicker
+               modal && (
-                  value={new Date()}
+                  <ModalFloat
-                  mode={mode}
+                     isVisible={modal}
-                  display="default"
+                     setVisible={setModal}
-                  onChange={(event, date) => { onChangeDate(event.type, date) }}
+                     onSubmit={() => { }}
-                  onTouchCancel={() => setModal(false)}
+                     buttonHide
-               />
+                     disableSubmit
+                     title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
+                     <DateTimePicker
+                        value={new Date()}
+                        mode={mode}
+                        display="spinner"
+                        onChange={(event, date) => { onChangeDate(event.type, date) }}
+                        onTouchCancel={() => setModal(false)}
+                     />
+                  </ModalFloat>
+               )
+            ) : (
+               modal && (
+                  <DateTimePicker
+                     value={new Date()}
+                     mode={mode}
+                     display="inline"
+                     onChange={(event, date) => { onChangeDate(event.type, date) }}
+                     onTouchCancel={() => setModal(false)}
+                  />
+               )
             )
          }
       </>

components/inputForm.tsx

@@ -1,5 +1,5 @@
 import Styles from "@/constants/Styles";
-import { Dimensions, TextInput, View } from "react-native";
+import { Dimensions, Platform, TextInput, View } from "react-native";
 import Text from "./Text";
 
 type Props = {
@@ -36,7 +36,14 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                   </Text>
                )
             }
-            <View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, error && { borderColor: "red" }]}>
+            <View style={[
+               Styles.inputRoundForm,
+               itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
+               round && Styles.round30,
+               { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' },
+               error && { borderColor: "red" },
+               Platform.OS == 'ios' && { paddingVertical: 10 },
+            ]}>
                {itemRight != undefined ? itemRight : itemLeft}
                <TextInput
                   editable={!disable}

components/modalFloat.tsx

@@ -1,7 +1,7 @@
 import Styles from '@/constants/Styles';
 import { Pressable, View } from 'react-native';
-import Text from './Text';
 import Modal from 'react-native-modal';
+import Text from './Text';
 
 type Props = {
    isVisible: boolean
@@ -10,9 +10,10 @@ type Props = {
    children: React.ReactNode
    onSubmit: () => void
    disableSubmit?: boolean
+   buttonHide?: boolean
 }
 
-export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit }: Props) {
+export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit, buttonHide }: Props) {
    return (
       <Modal
          animationIn={"fadeIn"}
@@ -28,14 +29,18 @@ export default function ModalFloat({ isVisible, setVisible, title, children, onS
             <View style={[Styles.mb10]}>
                {children}
             </View>
-            <View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
+            {
-               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
+               !buttonHide && (
-                  <Text style={[Styles.textDefault]}>Batal</Text>
+                  <View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
-               </Pressable>
+                     <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
-               <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
+                        <Text style={[Styles.textDefault]}>Batal</Text>
-                  <Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
+                     </Pressable>
-               </Pressable>
+                     <Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
-            </View>
+                        <Text style={[Styles.textDefault, disableSubmit && Styles.cGray]}>Simpan</Text>
+                     </Pressable>
+                  </View>
+               )
+            }
          </View>
       </Modal>
    )

components/modalSelect.tsx

@@ -9,13 +9,13 @@ import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { useEffect, useState } from "react"
 import { Pressable, ScrollView, View } from "react-native"
-import Text from "./Text";
 import { useDispatch, useSelector } from "react-redux"
 import { ButtonForm } from "./buttonForm"
 import DrawerBottom from "./drawerBottom"
 import ImageUser from "./imageNew"
 import ImageWithLabel from "./imageWithLabel"
 import InputSearch from "./inputSearch"
+import Text from "./Text"
 
 type Props = {
    open: boolean
@@ -89,8 +89,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
 
    useEffect(() => {
       if (category == 'group') {
-         if (entitiesGroup.length == 0)
+         handleLoadGroup()
-            handleLoadGroup()
          setData(entitiesGroup)
       } else if (category == 'position') {
          handleLoadPosition()
@@ -174,9 +173,9 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                               {
                                  (category == 'member')
                                     ?
-                                    selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'}/>
+                                    selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
                                     :
-                                    chooseValue.val == item.id && <AntDesign name="check" size={20} color={'black'}/>
+                                    chooseValue.val == item.id && <AntDesign name="check" size={20} color={'black'} />
                               }
                            </Pressable>
                         ))
@@ -192,7 +191,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                               }}>
                                  <Text style={[chooseValue.val == item.val ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.label}</Text>
                                  {
-                                    valChoose == item.val && <AntDesign name="check" size={20} color={'black'}/>
+                                    valChoose == item.val && <AntDesign name="check" size={20} color={'black'} />
                                  }
                               </Pressable>
                            ))

components/project/headerProjectList.tsx

@@ -30,19 +30,16 @@ export default function HeaderRightProjectList() {
                      }}
                   />
                }
-               {
+               <MenuItemRow
-                  (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
+                  icon={<AntDesign name="filter" color="black" size={25} />}
-                  <MenuItemRow
+                  title="Filter"
-                     icon={<AntDesign name="filter" color="black" size={25} />}
+                  onPress={() => {
-                     title="Filter"
+                     setVisible(false)
-                     onPress={() => {
+                     setTimeout(() => {
-                        setVisible(false)
+                        setFilter(true)
-                        setTimeout(() => {
+                     }, 600)
-                           setFilter(true)
+                  }}
-                        }, 600)
+               />
-                     }}
-                  />
-               }
             </View>
          </DrawerBottom>
          <ModalFilter