upd: diskusi umum

Deskripsi:
- detail anggota diskusi umum
- edit diskusi umum
- mengeluarkan anggota
- mengubah status diskusi umum
- mengarsipkan diskusi umum
- on proses tambah diskusi umum

No Issues

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

@@ -40,6 +40,7 @@ export default function DetailDiscussionGeneral() {
    const [dataKomentar, setDataKomentar] = useState<PropsKomentar[]>([])
    const [memberDiscussion, setMemberDiscussion] = useState(false)
    const [komentar, setKomentar] = useState('')
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
 
 
    async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota') {
@@ -61,7 +62,8 @@ export default function DetailDiscussionGeneral() {
    useEffect(() => {
       handleLoad('detail')
       handleLoad('komentar')
-   }, []);
+      handleLoad('cek-anggota')
+   }, [update]);
 
    async function handleKomentar() {
       try {

app/(application)/discussion/create.tsx

@@ -1,51 +1,156 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import ButtonBackHeader from "@/components/buttonBackHeader";
-import { ButtonForm } from "@/components/buttonForm";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
 import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
 import { router, Stack } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
 
+type Props = {
+   idUser: string;
+   name: string;
+   img: string;
+};
+
 export default function CreateDiscussionGeneral() {
-   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const [valChoose, setValChoose] = useState("")
+   const [valSelect, setValSelect] = useState<"group" | "member">("group");
+   const [member, setMember] = useState<Props[]>([]);
+   const [disableBtn, setDisableBtn] = useState(true);
+   const [isSelect, setSelect] = useState(false);
+   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) });
+         setMember([]);
+         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]);
 
    return (
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerLeft: () => (
-               headerTitle: 'Tambah Diskusi',
+                  <ButtonBackHeader
-               headerTitleAlign: 'center',
+                     onPress={() => {
-               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                        router.back();
-                  ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+                     }}
-                  router.push('/discussion?active=true')
+                  />
-               }} />
+               ),
+               headerTitle: "Tambah Diskusi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={disableBtn}
+                     onPress={() => {
+                        ToastAndroid.show(
+                           "Berhasil menambahkan data",
+                           ToastAndroid.SHORT
+                        );
+                        router.push("/discussion?active=true");
+                     }}
+                  />
+               ),
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
+               <SelectForm
-               <InputForm label="Nama" type="default" placeholder="Nama" required />
+                  label="Lembaga Desa"
-               <InputForm label="Diskusi" type="default" placeholder="Hal yang didiskusikan" required />
+                  placeholder="Pilih Lembaga Desa"
-               <ButtonSelect value="Pilih Anggota" />
+                  value={chooseGroup.label}
-               {/* <ButtonForm
+                  required
-                  text="SIMPAN"
                   onPress={() => {
-                     AlertKonfirmasi({
+                     setValChoose(chooseGroup.val);
-                        title: 'Konfirmasi',
+                     setValSelect("group");
-                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                     setSelect(true);
-                        onPress: () => {
+                  }}
-                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+               />
-                           router.push('/discussion?active=true')
+               <InputForm label="Nama" type="default" placeholder="Nama" required />
-                        }
+               <InputForm
-                     })
+                  label="Diskusi"
-                  }} /> */}
+                  type="default"
+                  placeholder="Hal yang didiskusikan"
+                  required
+               />
+               <ButtonSelect
+                  value="Pilih Anggota"
+                  onPress={() => {
+                     if (chooseGroup.val != "") {
+                        setSelect(true);
+                        setValSelect("member");
+                     } else {
+                        ToastAndroid.show(
+                           "Pilih Lembaga Desa terlebih dahulu",
+                           ToastAndroid.SHORT
+                        );
+                     }
+                  }}
+               />
             </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

@@ -1,42 +1,142 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import ButtonBackHeader from "@/components/buttonBackHeader";
-import ButtonSaveHeader from "@/components/buttonSaveHeader"
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import { InputForm } from "@/components/inputForm"
+import { InputForm } from "@/components/inputForm";
-import Styles from "@/constants/Styles"
+import Styles from "@/constants/Styles";
-import { router, Stack } from "expo-router"
+import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
-import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+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() }} />,
+               headerLeft: () => (
-               headerTitle: 'Edit Diskusi',
+                  <ButtonBackHeader
-               headerTitleAlign: 'center',
+                     onPress={() => {
-               headerRight: () => <ButtonSaveHeader category="update" onPress={() => {
+                        router.back();
-                  ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                     }}
-                  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 />
+               <InputForm
-               <InputForm label="Diskusi" type="default" placeholder="Hal yang didiskusikan" required />
+                  label="Judul"
-               {/* <ButtonForm
+                  type="default"
-                  text="SIMPAN"
+                  placeholder="Judul"
-                  onPress={() => {
+                  required
-                     AlertKonfirmasi({
+                  error={error.title}
-                        title: 'Konfirmasi',
+                  value={dataForm.title}
-                        desc: 'Apakah anda yakin ingin mengubah data?',
+                  errorText="Judul tidak boleh kosong"
-                        onPress: () => {
+                  onChange={(val) => validationForm("title", val)}
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+               />
-                           router.back()
+               <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/member/[id].tsx

@@ -1,13 +1,62 @@
+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 { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
-import { Feather } from "@expo/vector-icons";
+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 { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
+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 { id } = useLocalSearchParams()
+   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: '' })
+
+   async function handleLoad() {
+      try {
+         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)
+      }
+   }
+
+
+   useEffect(() => {
+      handleLoad()
+   }, []);
+
+   async function handleDeleteUser() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         await apiDeleteMemberDiscussionGeneral({ user: hasil, idUser: chooseUser.idUser }, id)
+         ToastAndroid.show("Berhasil mengelluarkan anggota dari diskusi", ToastAndroid.SHORT)
+         handleLoad()
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setModal(false)
+      }
+   }
+
+
    return (
       <SafeAreaView>
          <Stack.Screen
@@ -19,72 +68,69 @@ export default function MemberDiscussionDetail() {
          />
          <ScrollView>
             <View style={[Styles.p15]}>
-               <Text style={[Styles.textDefault, Styles.mv05]}>5 Anggota</Text>
+               <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
-               <View style={[Styles.wrapPaper]}>
+               <View style={[Styles.wrapPaper, Styles.mb100]}>
-                  <BorderBottomItem
+                  {
-                     borderType="none"
+                     entityUser.role != "user" && entityUser.role != "coadmin" &&
-                     icon={
+                     <BorderBottomItem
-                        <View style={[Styles.iconContent, ColorsStatus.gray]}>
+                        borderType="none"
-                           <Feather name="user-plus" size={25} color={'#384288'} />
+                        icon={
-                        </View>
+                           <View style={[Styles.iconContent, ColorsStatus.gray]}>
-                     }
+                              <Feather name="user-plus" size={25} color={'#384288'} />
-                     title="Tambah Anggota"
+                           </View>
-                  />
+                        }
-
+                        title="Tambah Anggota"
-                  <BorderBottomItem
+                     />
-                     borderType="bottom"
+                  }
-                     icon={
+                  {
-                        <Image
+                     data.map((item, index) => {
-                           source={require("../../../../assets/images/user.jpeg")}
+                        return (
-                           style={[Styles.userProfileSmall]}
+                           <BorderBottomItem
-                        />
+                              key={index}
-                     }
+                              borderType="bottom"
-                     title="Amalia Dwi"
+                              icon={
-                  />
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="sm" />
-                  <BorderBottomItem
+                              }
-                     borderType="bottom"
+                              title={item.name}
-                     icon={
+                              onPress={() => {
-                        <Image
+                                 setChooseUser(item)
-                           source={require("../../../../assets/images/user.jpeg")}
+                                 setModal(true)
-                           style={[Styles.userProfileSmall]}
+                              }}
-                        />
+                           />
-                     }
+                        )
-                     title="Amalia Dwi"
+                     })
-                  />
+                  }
-                  <BorderBottomItem
-                     borderType="bottom"
-                     icon={
-                        <Image
-                           source={require("../../../../assets/images/user.jpeg")}
-                           style={[Styles.userProfileSmall]}
-                        />
-                     }
-                     title="Amalia Dwi"
-                  />
-                  <BorderBottomItem
-                     borderType="bottom"
-                     icon={
-                        <Image
-                           source={require("../../../../assets/images/user.jpeg")}
-                           style={[Styles.userProfileSmall]}
-                        />
-                     }
-                     title="Amalia Dwi"
-                  />
-                  <BorderBottomItem
-                     borderType="bottom"
-                     icon={
-                        <Image
-                           source={require("../../../../assets/images/user.jpeg")}
-                           style={[Styles.userProfileSmall]}
-                        />
-                     }
-                     title="Amalia Dwi"
-                  />
                </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={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                        onPress: () => {
+                           handleDeleteUser()
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    )
 }

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

@@ -104,21 +104,21 @@ export default function ListTask() {
 
                      <View>
                         <PaperGridContent onPress={() => { router.push('./task/321') }} content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar />
+                           <ProgressBar value={0}/>
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />
                            </View>
                         </PaperGridContent>
                         <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar />
+                           <ProgressBar value={0}/>
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />
                            </View>
                         </PaperGridContent>
                         <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar />
+                           <ProgressBar value={0}/>
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />

app/(application)/member/create.tsx

@@ -25,7 +25,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateMember() {
    const dispatch = useDispatch()
-   const update = useSelector((state: any) => state.positionUpdate)
+   const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
    const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group");
    const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -36,6 +36,7 @@ export default function CreateMember() {
    const entityUser = useSelector((state: any) => state.user);
    const [isSelect, setSelect] = useState(false);
    const [disableBtn, setDisableBtn] = useState(true)
+   const [valChoose, setValChoose] = useState("")
    const [error, setError] = useState({
       group: false,
       position: false,
@@ -224,6 +225,7 @@ export default function CreateMember() {
                         value={chooseGroup.label}
                         required
                         onPress={() => {
+                           setValChoose(chooseGroup.val);
                            setValSelect("group");
                            setSelect(true);
                         }}
@@ -237,6 +239,7 @@ export default function CreateMember() {
                   value={choosePosition.label}
                   required
                   onPress={() => {
+                     setValChoose(choosePosition.val);
                      setValSelect("position");
                      setSelect(true);
                   }}
@@ -249,6 +252,7 @@ export default function CreateMember() {
                   value={chooseRole.label}
                   required
                   onPress={() => {
+                     setValChoose(chooseRole.val);
                      setValSelect("role");
                      setSelect(true);
                   }}
@@ -306,6 +310,7 @@ export default function CreateMember() {
                   value={chooseGender.label}
                   required
                   onPress={() => {
+                     setValChoose(chooseGender.val);
                      setValSelect("gender");
                      setSelect(true);
                   }}
@@ -332,6 +337,7 @@ export default function CreateMember() {
             }
             open={isSelect}
             idParent={valSelect == "position" ? chooseGroup.val : ""}
+            valChoose={valChoose}
          />
       </SafeAreaView>
    );

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

@@ -5,6 +5,7 @@ import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Styles from "@/constants/Styles";
 import { apiEditUser, apiGetProfile } from "@/lib/api";
+import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -18,6 +19,7 @@ import {
    ToastAndroid,
    View,
 } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 
 type Props = {
    id: string;
@@ -34,6 +36,8 @@ type Props = {
 };
 
 export default function EditMember() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.memberUpdate)
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>();
    const [errorImg, setErrorImg] = useState(false)
@@ -154,7 +158,7 @@ export default function EditMember() {
    }
 
    function checkForm() {
-      if (Object.values(error).some((v) => v == true) == true || Object.values(data).some((v) => v == "") == true) {
+      if (Object.values(error).some((v) => v == true) || Object.values(data).some((v) => v == "")) {
          setDisableBtn(true)
       } else {
          setDisableBtn(false)
@@ -175,6 +179,7 @@ export default function EditMember() {
          const response = await apiEditUser(fd, id)
          if (response.success) {
             ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+            dispatch(setUpdateMember(!update))
             router.replace(`/member/${id}`);
          } else {
             ToastAndroid.show(response.message, ToastAndroid.SHORT)

app/(application)/project/index.tsx

@@ -107,21 +107,21 @@ export default function ListProject() {
 
                      <View>
                         <PaperGridContent onPress={() => { router.push('/project/234') }} content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar />
+                           <ProgressBar value={0} />
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />
                            </View>
                         </PaperGridContent>
                         <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar />
+                           <ProgressBar value={0} />
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />
                            </View>
                         </PaperGridContent>
                         <PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
-                           <ProgressBar />
+                           <ProgressBar value={0} />
                            <View style={[Styles.rowSpaceBetween]}>
                               <Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
                               <LabelStatus size="default" category="primary" text="SEGERA" />

components/discussion_general/headerDiscussionDetail.tsx

@@ -1,23 +1,56 @@
 import Styles from "@/constants/Styles"
+import { apiDeleteDiscussionGeneral, apiUpdateStatusDiscussionGeneral } from "@/lib/api"
+import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
 import { ToastAndroid, View } from "react-native"
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import AlertKonfirmasi from "../alertKonfirmasi"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 type Props = {
-   id: string | string[]
+   id: string
    active: boolean
    status: number
 }
 
 export default function HeaderRightDiscussionGeneralDetail({ id, active, status }: Props) {
+   const { token, decryptToken } = useAuthSession()
    const [isVisible, setVisible] = useState(false)
    const entityUser = useSelector((state: any) => state.user)
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
+
+   async function handleUpdateStatus() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiUpdateStatusDiscussionGeneral({ id: id, data: { status: status, user: hasil } })
+         if (response.success) {
+            ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+            dispatch(setUpdateDiscussionGeneralDetail(!update))
+         }
+         setVisible(false)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiDeleteDiscussionGeneral({ active: !active, user: hasil }, id)
+         ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+         dispatch(setUpdateDiscussionGeneralDetail(!update))
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setVisible(false)
+      }
+   }
 
    return (
       <>
@@ -55,8 +88,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                                           title: 'Konfirmasi',
                                           desc: status == 1 ? 'Apakah anda yakin ingin menutup diskusi?' : 'Apakah anda yakin ingin membuka diskusi?',
                                           onPress: () => {
-                                             setVisible(false)
+                                             handleUpdateStatus()
-                                             ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
                                           }
                                        })
                                     }}
@@ -71,10 +103,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                                  AlertKonfirmasi({
                                     title: 'Konfirmasi',
                                     desc: 'Apakah anda yakin ingin mengaktifkan diskusi ini?',
-                                    onPress: () => {
+                                    onPress: () => { handleDelete() }
-                                       setVisible(false)
-                                       ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
-                                    }
                                  })
                               }}
                            />
@@ -93,10 +122,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                         AlertKonfirmasi({
                            title: 'Konfirmasi',
                            desc: 'Apakah anda yakin ingin mengarsipkan diskusi?',
-                           onPress: () => {
+                           onPress: () => { handleDelete() }
-                              setVisible(false)
-                              ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
-                           }
                         })
                      }}
                   />

components/imageNew.tsx

@@ -5,6 +5,7 @@ import { Image } from "react-native";
 type Props = {
    src: string,
    size?: 'sm' | 'xs'
+   border?: boolean
 }
 
 export default function ImageUser({ src, size }: Props) {
@@ -12,7 +13,7 @@ export default function ImageUser({ src, size }: Props) {
    return (
       <Image
          source={error ? require('../assets/images/user.jpg') : { uri: src }}
-         style={[size == 'xs' ? Styles.userProfileExtraSmall : Styles.userProfileSmall]}
+         style={[size == 'xs' ? Styles.userProfileExtraSmall : Styles.userProfileSmall, Styles.borderAll]}
          onError={() =>
             setError(true)
          }

components/imageWithLabel.tsx

@@ -0,0 +1,18 @@
+import Styles from "@/constants/Styles";
+import { Text, TouchableOpacity } from "react-native";
+import ImageUser from "./imageNew";
+
+type Props = {
+   src: string
+   label: string
+   onClick?: () => void
+}
+
+export default function ImageWithLabel({ src, label, onClick }: Props) {
+   return (
+      <TouchableOpacity style={[Styles.contentItemCenter, Styles.mh05]} onPress={onClick}>
+         <ImageUser src={src} border />
+         <Text>{label}</Text>
+      </TouchableOpacity>
+   )
+}

components/modalSelect.tsx

@@ -1,7 +1,7 @@
 import { valueGender } from "@/constants/Gender"
 import { valueRoleUser } from "@/constants/RoleUser"
 import Styles from "@/constants/Styles"
-import { apiGetGroup, apiGetPosition } from "@/lib/api"
+import { apiGetGroup, apiGetPosition, apiGetUser } from "@/lib/api"
 import { setEntityFilterGroup } from "@/lib/filterSlice"
 import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
@@ -9,12 +9,15 @@ import { useEffect, useState } from "react"
 import { Pressable, ScrollView, Text, View } from "react-native"
 import { useDispatch, useSelector } from "react-redux"
 import DrawerBottom from "./drawerBottom"
+import ImageUser from "./imageNew"
+import ImageWithLabel from "./imageWithLabel"
+import InputSearch from "./inputSearch"
 
 type Props = {
    open: boolean
    close: (value: boolean) => void
    title: string
-   category: 'group' | 'status-task' | 'position' | 'role' | 'gender'
+   category: 'group' | 'status-task' | 'position' | 'role' | 'gender' | 'member'
    idParent?: string
    onSelect: (value: { val: string, label: string }) => void
    valChoose?: string
@@ -27,6 +30,9 @@ export default function ModalSelect({ open, close, title, category, idParent, on
    const entitiesGroup = useSelector((state: any) => state.filterGroup)
    const [chooseValue, setChooseValue] = useState({ val: valChoose, label: '' })
    const [data, setData] = useState<any>([])
+   const [search, setSearch] = useState('')
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const entitiesMember = useSelector((state: any) => state.memberChoose)
 
    async function handleLoadGroup() {
       const hasil = await decryptToken(String(token?.current))
@@ -44,6 +50,15 @@ export default function ModalSelect({ open, close, title, category, idParent, on
       }
    }
 
+   async function handleLoadMember() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetUser({ user: hasil, active: "true", search: search, group: String(idParent) })
+      setData(response.data.filter((i: any) => i.idUserRole != 'supadmin'))
+      if (entitiesMember.length > 0) {
+         setSelectMember(entitiesMember)
+      }
+   }
+
    function handleLoadUserRole() {
       const filter = valueRoleUser.filter((v) => v.login == entityUser.role)[0]?.data
       setData(filter)
@@ -65,28 +80,75 @@ export default function ModalSelect({ open, close, title, category, idParent, on
          handleLoadUserRole()
       } else if (category == "gender") {
          handleLoadGender()
+      } else if (category == "member") {
+         handleLoadMember()
       }
       setChooseValue({ ...chooseValue, val: valChoose })
    }, [dispatch, open]);
 
-   function onChoose(val: string, label: string) {
+   function onChoose(val: string, label: string, img?: string) {
-      setChooseValue({ val, label })
+      if (category == "member") {
-      onSelect({ val, label })
+         if (selectMember.some((i: any) => i.idUser == val)) {
-      close(false)
+            setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+         } else {
+            setSelectMember([...selectMember, { idUser: val, name: label, img }])
+         }
+      } else {
+         setChooseValue({ val, label })
+         onSelect({ val, label })
+         close(false)
+      }
    }
 
    return (
-      <DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={category == 'gender' ? 25 : 75}>
+      <DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={category == 'gender' ? 25 : category == 'member' ? 100 : 75}>
+         {
+            category == 'member' &&
+            <>
+               <InputSearch onChange={setSearch} />
+               {
+                  selectMember.length > 0
+                     ?
+                     <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>
+                     :
+                     <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+               }
+            </>
+         }
          <ScrollView>
             <View>
                {
                   category != 'status-task' ?
                      data.length > 0 ?
                         data.map((item: any, index: any) => (
-                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name) }}>
+                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
-                              <Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
                               {
-                                 chooseValue.val == item.id && <AntDesign name="check" size={20} />
+                                 category == 'member'
+                                    ?
+                                    <View style={[Styles.rowItemsCenter]}>
+                                       <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                       <Text style={[Styles.textDefault, Styles.ml10]}>{item.name}</Text>
+                                    </View>
+                                    :
+                                    <Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
+                              }
+                              {
+                                 (category == 'member')
+                                    ?
+                                    selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                                    :
+                                    chooseValue.val == item.id && <AntDesign name="check" size={20} />
                               }
                            </Pressable>
                         ))
@@ -109,6 +171,6 @@ export default function ModalSelect({ open, close, title, category, idParent, on
 
             </View>
          </ScrollView>
-      </DrawerBottom>
+      </DrawerBottom >
    )
 }

constants/Styles.ts

@@ -474,7 +474,8 @@ const Styles = StyleSheet.create({
       flexDirection: 'row',
       justifyContent: 'space-between',
       borderColor: '#d6d8f6',
-      borderBottomWidth: 1
+      borderBottomWidth: 1,
+      alignItems: 'center'
    },
    signDate: {
       width: 20,

lib/api.ts

@@ -161,3 +161,33 @@ export const apiSendDiscussionGeneralCommentar = async ({ id, data }: { id: stri
    const response = await api.post(`/mobile/discussion-general/${id}/comment`, data)
    return response.data;
 };
+
+
+export const apiDeleteMemberDiscussionGeneral = async (data: { user: string, idUser: string }, id: string) => {
+   await api.delete(`mobile/discussion-general/${id}/member`, { data }).then(response => {
+      return response.data;
+   })
+      .catch(error => {
+         console.error('Error:', error);
+      });
+};
+
+
+export const apiUpdateStatusDiscussionGeneral = async ({ id, data }: { id: string, data: { status: number, user: string } }) => {
+   const response = await api.post(`/mobile/discussion-general/${id}`, data)
+   return response.data;
+};
+
+export const apiDeleteDiscussionGeneral = async (data: { user: string, active: boolean }, id: string) => {
+   await api.delete(`mobile/discussion-general/${id}`, { data }).then(response => {
+      return response.data;
+   })
+      .catch(error => {
+         console.error('Error:', error);
+      });
+};
+
+export const apiEditDiscussionGeneral = async (data: { user: string, title: string, desc: string }, id: string) => {
+   const response = await api.put(`/mobile/discussion-general/${id}`, data)
+   return response.data;
+};

lib/discussionGeneralDetail.ts

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const discussionGeneralDetailUpdate = createSlice({
+   name: 'discussionGeneralDetailUpdate',
+   initialState: false,
+   reducers: {
+      setUpdateDiscussionGeneralDetail: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setUpdateDiscussionGeneralDetail } = discussionGeneralDetailUpdate.actions;
+export default discussionGeneralDetailUpdate.reducer;

lib/memberChoose.ts

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const memberChoose = createSlice({
+   name: 'memberChoose',
+   initialState: [],
+   reducers: {
+      setMemberChoose: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setMemberChoose } = memberChoose.actions;
+export default memberChoose.reducer;

lib/store.ts

@@ -1,13 +1,14 @@
 import { configureStore } from '@reduxjs/toolkit';
 import bannerReducer from './bannerSlice';
+import discussionGeneralDetailUpdate from './discussionGeneralDetail';
 import entitiesReducer from './entitiesSlice';
 import filterSlice from './filterSlice';
 import groupUpdate from './groupSlice';
+import memberChoose from './memberChoose';
 import memberUpdate from './memberSlice';
 import positionUpdate from './positionSlice';
 import userReducer from './userSlice';
 
-
 const store = configureStore({
    reducer: {
       entities: entitiesReducer,
@@ -17,6 +18,8 @@ const store = configureStore({
       positionUpdate: positionUpdate,
       memberUpdate: memberUpdate,
       filterGroup: filterSlice,
+      discussionGeneralDetailUpdate: discussionGeneralDetailUpdate,
+      memberChoose: memberChoose
    }
 });