upd: loading overlay

Deskripsi: - update loading saat aksi tambah dan edit pada fitur pengumuman, diskusi umum dan diskusi divisi No Issues
upd: revisi diskusi divisi
2026-01-19 16:36:37 +08:00 · 2026-01-19 15:07:14 +08:00 · 2026-01-19 10:24:06 +08:00 · 2026-01-17 11:19:24 +08:00 · 2026-01-15 17:36:18 +08:00 · 2026-01-15 17:33:05 +08:00
14 changed files with 973 additions and 44 deletions
--- a/app.config.js
+++ b/app.config.js
@@ -77,7 +77,8 @@ export default {
         URL_OTP: process.env.URL_OTP,
         URL_STORAGE: process.env.URL_STORAGE,
         URL_FIREBASE_DB: process.env.URL_FIREBASE_DB,
-         PASS_ENC: process.env.PASS_ENC
+         PASS_ENC: process.env.PASS_ENC,
+         WA_SERVER_TOKEN: process.env.WA_SERVER_TOKEN,
      }
   }
 };
--- a/app/(application)/announcement/[id].tsx
+++ b/app/(application)/announcement/[id].tsx
@@ -1,14 +1,20 @@
 import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
+import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import Skeleton from "@/components/skeleton";
 import Text from '@/components/Text';
+import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
 import { apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo, MaterialIcons } from "@expo/vector-icons";
+import { Entypo, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { startActivityAsync } from 'expo-intent-launcher';
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from 'expo-sharing';
 import React, { useEffect, useState } from "react";
-import { Dimensions, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { Alert, Dimensions, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import * as mime from 'react-native-mime-types';
 import RenderHTML from 'react-native-render-html';
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
@@ -24,12 +30,15 @@ export default function DetailAnnouncement() {
   const { token, decryptToken } = useAuthSession()
   const [data, setData] = useState<Props>({ id: '', title: '', desc: '' })
   const [dataMember, setDataMember] = useState<any>({})
+   const [dataFile, setDataFile] = useState<{ id:string; idStorage: string; name: string; extension: string }[]>([])
   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)
   const [refreshing, setRefreshing] = useState(false)
+   const [loadingOpen, setLoadingOpen] = useState(false)
+

   async function handleLoad(loading: boolean) {
      try {
@@ -39,6 +48,7 @@ export default function DetailAnnouncement() {
         if (response.success) {
            setData(response.data)
            setDataMember(response.member)
+            setDataFile(response.file)
         } else {
            Toast.show({ type: 'small', text1: response.message })
         }
@@ -70,6 +80,37 @@ export default function DetailAnnouncement() {
      setRefreshing(false)
   };

+   const openFile = (item: { idStorage: string; name: string; extension: string }) => {
+      if (Platform.OS == 'android') setLoadingOpen(true)
+      let remoteUrl = ConstEnv.url_storage + '/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);
+         setLoadingOpen(false)
+         try {
+            if (Platform.OS == 'android') {
+               await startActivityAsync(
+                  'android.intent.action.VIEW',
+                  {
+                     data: contentURL,
+                     flags: 1,
+                     type: mimeType as string,
+                  }
+               );
+            } 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 {
+            if (Platform.OS == 'android') setLoadingOpen(false)
+         }
+      });
+   };
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -127,7 +168,26 @@ export default function DetailAnnouncement() {
                  }

               </View>
-               <View style={[Styles.wrapPaper, Styles.mv15]}>
+               {
+                  dataFile.length > 0 && (
+                     <View style={[Styles.wrapPaper, Styles.mt10]}>
+                        <View style={[Styles.mb05]}>
+                           <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                        </View>
+                        {dataFile.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="bottom"
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { openFile({ idStorage: item.idStorage, name: item.name, extension: item.extension }) }}
+                           />
+                        ))}
+                     </View>
+                  )
+               }
+               <View style={[Styles.wrapPaper, Styles.mt10]}>
                  {
                     loading ?
                        arrSkeleton.map((item, index) => {
--- a/app/(application)/announcement/create.tsx
+++ b/app/(application)/announcement/create.tsx
@@ -1,14 +1,19 @@
+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 { InputForm } from "@/components/inputForm";
+import LoadingOverlay from "@/components/loadingOverlay";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiCreateAnnouncement } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo } from "@expo/vector-icons";
+import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
@@ -23,6 +28,9 @@ export default function CreateAnnouncement() {
   const [modalDivisi, setModalDivisi] = useState(false);
   const [divisionMember, setDivisionMember] = useState<any>([])
   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [dataForm, setDataForm] = useState({
      title: "",
      desc: "",
@@ -69,9 +77,26 @@ export default function CreateAnnouncement() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateAnnouncement({
-            data: { ...dataForm, user: hasil, groups: divisionMember },
-         });
+         const fd = new FormData()
+
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            { user: hasil, groups: divisionMember, ...dataForm }
+         ))
+
+         const response = await apiCreateAnnouncement(fd)
+
+         // const response = await apiCreateAnnouncement({
+         //    data: { ...dataForm, user: hasil, groups: divisionMember },
+         // });
+
         if (response.success) {
            dispatch(setUpdateAnnouncement(!update))
            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
@@ -84,6 +109,25 @@ export default function CreateAnnouncement() {
      }
   }

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModalFile(false)
+   }
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -110,6 +154,7 @@ export default function CreateAnnouncement() {
               ),
            }}
         />
+         <LoadingOverlay visible={loading} />
         <ScrollView
            showsVerticalScrollIndicator={false}
            style={[Styles.h100]}
@@ -134,6 +179,27 @@ export default function CreateAnnouncement() {
                  onChange={(val) => validationForm("desc", val)}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  fileForm.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
+
               <ButtonSelect
                  value="Pilih divisi penerima pengumuman"
                  onPress={() => {
@@ -178,6 +244,16 @@ export default function CreateAnnouncement() {
               setModalDivisi(false)
            }}
         />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   );
 }
--- a/app/(application)/announcement/edit/[id].tsx
+++ b/app/(application)/announcement/edit/[id].tsx
@@ -1,14 +1,19 @@
+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 { InputForm } from "@/components/inputForm";
+import LoadingOverlay from "@/components/loadingOverlay";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelectMultiple from "@/components/modalSelectMultiple";
 import Text from '@/components/Text';
 import Styles from "@/constants/Styles";
 import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
 import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Entypo } from "@expo/vector-icons";
+import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -33,6 +38,10 @@ export default function EditAnnouncement() {
   const [modalDivisi, setModalDivisi] = useState(false);
   const [disableBtn, setDisableBtn] = useState(true);
   const [dataMember, setDataMember] = useState<any>([]);
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
+   const [isModalFile, setModalFile] = useState(false)
   const [loading, setLoading] = useState(false)
   const [dataForm, setDataForm] = useState({
      title: "",
@@ -66,6 +75,7 @@ export default function EditAnnouncement() {
            arrNew.push(newObject)
         })
         setDataMember(arrNew);
+         setDataFile(response.file);
      } catch (error) {
         console.error(error);
      }
@@ -112,9 +122,22 @@ export default function EditAnnouncement() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
-         const response = await apiEditAnnouncement({
-            ...dataForm, user: hasil, groups: dataMember,
-         }, id);
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            {
+               ...dataForm, user: hasil, groups: dataMember, oldFile: dataFile
+            }
+         ))
+
+         const response = await apiEditAnnouncement(fd, id);
         if (response.success) {
            dispatch(setUpdateAnnouncement(!update))
            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
@@ -127,6 +150,35 @@ export default function EditAnnouncement() {
      }
   }

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat == "newFile") {
+         setFileForm([...fileForm.filter((val, i) => i !== index)])
+      } else {
+         setDataFile(prev =>
+            prev.map(item =>
+               item.id === index
+                  ? { ...item, delete: true }
+                  : item
+            )
+         );
+      }
+      setModalFile(false)
+   }
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -153,6 +205,7 @@ export default function EditAnnouncement() {
               ),
            }}
         />
+         <LoadingOverlay visible={loading} />
         <ScrollView
            showsVerticalScrollIndicator={false}
            style={[Styles.h100]}
@@ -179,6 +232,38 @@ export default function EditAnnouncement() {
                  value={dataForm.desc}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        dataFile.filter((val) => !val.delete).map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name + '.' + item.extension}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
               <ButtonSelect
                  value="Pilih divisi penerima pengumuman"
                  onPress={() => {
@@ -223,6 +308,16 @@ export default function EditAnnouncement() {
            }}
            value={dataMember}
         />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   );
 }
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -1,5 +1,6 @@
 import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import BorderBottomItem from "@/components/borderBottomItem";
+import BorderBottomItem2 from "@/components/borderBottomItem2";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
 import DrawerBottom from "@/components/drawerBottom";
@@ -22,7 +23,7 @@ import { ref } from '@react-native-firebase/database';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Platform, Pressable, ScrollView, View } from "react-native";
+import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";

@@ -46,6 +47,13 @@ type PropsKomentar = {
   updatedAt: string
 }

+type PropsFile = {
+   id: string;
+   idStorage: string;
+   name: string;
+   extension: string
+}
+
 export default function DetailDiscussionGeneral() {
   const { token, decryptToken } = useAuthSession()
   const entityUser = useSelector((state: any) => state.user)
@@ -54,6 +62,7 @@ export default function DetailDiscussionGeneral() {
   const [data, setData] = useState<Props>()
   const [dataKomentar, setDataKomentar] = useState<PropsKomentar[]>([])
   const [memberDiscussion, setMemberDiscussion] = useState(false)
+   const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
   const [komentar, setKomentar] = useState('')
   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
   const [loading, setLoading] = useState(true)
@@ -64,6 +73,7 @@ export default function DetailDiscussionGeneral() {
   const [detailMore, setDetailMore] = useState<any>([])
   const [loadingSendKomentar, setLoadingSendKomentar] = useState(false)
   const [isVisible, setVisible] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
   const [selectKomentar, setSelectKomentar] = useState({
      id: '',
      comment: ''
@@ -92,7 +102,7 @@ export default function DetailDiscussionGeneral() {
   }


-   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota', loading: boolean) {
+   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota' | 'file', loading: boolean) {
      try {
         if (cat == "detail") {
            setLoading(loading)
@@ -109,6 +119,8 @@ export default function DetailDiscussionGeneral() {
            setDataKomentar(response.data)
         } else if (cat == 'cek-anggota') {
            setMemberDiscussion(response.data)
+         } else if (cat == 'file') {
+            setFileDiscussion(response.data)
         }

      } catch (error) {
@@ -123,12 +135,14 @@ export default function DetailDiscussionGeneral() {
      handleLoad('detail', false)
      handleLoad('komentar', false)
      handleLoad('cek-anggota', false)
+      handleLoad('file', false)
   }, [update]);

   useEffect(() => {
      handleLoad('detail', true)
      handleLoad('komentar', true)
      handleLoad('cek-anggota', true)
+      handleLoad('file', true)
   }, []);

   async function handleKomentar() {
@@ -197,6 +211,16 @@ export default function DetailDiscussionGeneral() {
      setViewEdit(!viewEdit)
   }

+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleLoad('detail', false)
+      handleLoad('komentar', false)
+      handleLoad('cek-anggota', false)
+      handleLoad('file', false)
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };
+
   return (
      <>
         <Stack.Screen
@@ -208,13 +232,23 @@ export default function DetailDiscussionGeneral() {
            }}
         />
         <View style={{ flex: 1 }}>
-            <ScrollView showsVerticalScrollIndicator={false}>
-               <View style={[Styles.p15, Styles.mb100]}>
+            <ScrollView
+               showsVerticalScrollIndicator={false}
+               style={[Styles.h100]}
+               refreshControl={
+                  <RefreshControl
+                     refreshing={refreshing}
+                     onRefresh={() => handleRefresh()}
+                  />
+               }
+            >
+               <View style={[Styles.p15]}>
                  {
                     loading ?
                        <SkeletonContent />
                        :
-                        <BorderBottomItem
+                        <BorderBottomItem2
+                           dataFile={fileDiscussion}
                           descEllipsize={false}
                           borderType="bottom"
                           icon={
--- a/app/(application)/discussion/create.tsx
+++ b/app/(application)/discussion/create.tsx
@@ -2,8 +2,11 @@ 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 LoadingOverlay from "@/components/loadingOverlay";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelect from "@/components/modalSelect";
 import SelectForm from "@/components/selectForm";
 import Text from '@/components/Text';
@@ -13,6 +16,8 @@ import { apiCreateDiscussionGeneral } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -33,6 +38,9 @@ export default function CreateDiscussionGeneral() {
   const entitiesMember = useSelector((state: any) => state.memberChoose)
   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [dataForm, setDataForm] = useState({
      idGroup: "",
      title: "",
@@ -95,13 +103,49 @@ export default function CreateDiscussionGeneral() {
      router.back()
   }

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModalFile(false)
+   }
+
   async function handleCreate() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateDiscussionGeneral({
-            data: { ...dataForm, user: hasil, member: entitiesMember },
-         })
+         const fd = new FormData()
+
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            { ...dataForm, user: hasil, member: entitiesMember }
+         ))
+
+         const response = await apiCreateDiscussionGeneral(fd)
+
+         // const response = await apiCreateDiscussionGeneral({
+         //    data: { ...dataForm, user: hasil, member: entitiesMember },
+         // })
+
         if (response.success) {
            dispatch(setMemberChoose([]))
            dispatch(setUpdateDiscussionGeneralDetail(!update))
@@ -142,6 +186,7 @@ export default function CreateDiscussionGeneral() {
               ),
            }}
         />
+         <LoadingOverlay visible={loading} />
         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
            <View style={[Styles.p15, Styles.mb100]}>
               {
@@ -181,6 +226,26 @@ export default function CreateDiscussionGeneral() {
                  onChange={(val) => { validationForm("desc", val) }}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  fileForm.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
               <ButtonSelect
                  value="Pilih Anggota"
                  onPress={() => {
@@ -240,6 +305,16 @@ export default function CreateDiscussionGeneral() {
            idParent={valSelect == "member" ? chooseGroup.val : ""}
            valChoose={valChoose}
         />
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   );
 }
--- a/app/(application)/discussion/edit/[id].tsx
+++ b/app/(application)/discussion/edit/[id].tsx
@@ -1,10 +1,18 @@
+import Text from "@/components/Text";
+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 { InputForm } from "@/components/inputForm";
+import LoadingOverlay from "@/components/loadingOverlay";
+import MenuItemRow from "@/components/menuItemRow";
 import Styles from "@/constants/Styles";
 import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
 import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -17,6 +25,10 @@ export default function EditDiscussionGeneral() {
   const [disableBtn, setDisableBtn] = useState(false)
   const dispatch = useDispatch()
   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
   const [dataForm, setDataForm] = useState({
      title: "",
@@ -35,9 +47,17 @@ export default function EditDiscussionGeneral() {
            user: hasil,
            cat: "detail",
         });
+         const responseFile = await apiGetDiscussionGeneralOne({
+            id: id,
+            user: hasil,
+            cat: "file",
+         });
         if (response.success) {
            setDataForm(response.data);
         }
+         if (responseFile.success) {
+            setDataFile(responseFile.data);
+         }
      } catch (error) {
         console.error(error);
      }
@@ -78,12 +98,56 @@ export default function EditDiscussionGeneral() {
      checkForm()
   }, [error, dataForm])

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat == "newFile") {
+         setFileForm([...fileForm.filter((val, i) => i !== index)])
+      } else {
+         setDataFile(prev =>
+            prev.map(item =>
+               item.id === index
+                  ? { ...item, delete: true }
+                  : item
+            )
+         );
+      }
+      setModalFile(false)
+   }
+

   async function handleEdit() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditDiscussionGeneral({ user: hasil, title: dataForm.title, desc: dataForm.desc }, id);
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            {
+               user: hasil, title: dataForm.title, desc: dataForm.desc, oldFile: dataFile
+            }
+         ))
+
+         const response = await apiEditDiscussionGeneral(fd, id);
         if (response.success) {
            dispatch(setUpdateDiscussionGeneralDetail(!update))
            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
@@ -119,6 +183,7 @@ export default function EditDiscussionGeneral() {
               ),
            }}
         />
+         <LoadingOverlay visible={loading} />
         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
            <View style={[Styles.p15]}>
               <InputForm
@@ -142,8 +207,50 @@ export default function EditDiscussionGeneral() {
                  onChange={(val) => validationForm("desc", val)}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        dataFile.filter((val) => !val.delete).map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name + '.' + item.extension}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
            </View>
         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   );
 }
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx
@@ -1,10 +1,18 @@
+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 { InputForm } from "@/components/inputForm";
+import LoadingOverlay from "@/components/loadingOverlay";
+import MenuItemRow from "@/components/menuItemRow";
+import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiEditDiscussion, apiGetDiscussionOne } from "@/lib/api";
 import { setUpdateDiscussion } from "@/lib/discussionUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, View } from "react-native";
@@ -18,6 +26,11 @@ export default function DiscussionDivisionEdit() {
   const update = useSelector((state: any) => state.discussionUpdate);
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
+

   async function handleLoad() {
      try {
@@ -27,6 +40,12 @@ export default function DiscussionDivisionEdit() {
            user: hasil,
            cat: "data",
         });
+         const response2 = await apiGetDiscussionOne({
+            id: detail,
+            user: hasil,
+            cat: "file",
+         });
+         setDataFile(response2.data);
         setData(response.data.desc);
      } catch (error) {
         console.error(error);
@@ -41,15 +60,31 @@ export default function DiscussionDivisionEdit() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditDiscussion({
-            data: { user: hasil, desc: data },
-            id: detail,
-         });
+         const fd = new FormData()
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            {
+               user: hasil, desc: data, oldFile: dataFile
+            }
+         ))
+         const response = await apiEditDiscussion(fd, detail);
+
+         // const response = await apiEditDiscussion({
+         //    data: { user: hasil, desc: data },
+         //    id: detail,
+         // });
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
            dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
            router.back();
-         }else{
+         } else {
            Toast.show({ type: 'small', text1: response.message, })
         }
      } catch (error) {
@@ -60,6 +95,37 @@ export default function DiscussionDivisionEdit() {
      }
   }

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+
+
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat == "newFile") {
+         setFileForm([...fileForm.filter((val, i) => i !== index)])
+      } else {
+         setDataFile(prev =>
+            prev.map(item =>
+               item.id === index
+                  ? { ...item, delete: true }
+                  : item
+            )
+         );
+      }
+      setModalFile(false)
+   }
+
   return (
      <SafeAreaView>
         <Stack.Screen
@@ -84,7 +150,8 @@ export default function DiscussionDivisionEdit() {
               ),
            }}
         />
-         <ScrollView>
+         <LoadingOverlay visible={loading} />
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
            <View style={[Styles.p15]}>
               <InputForm
                  label="Diskusi"
@@ -95,8 +162,53 @@ export default function DiscussionDivisionEdit() {
                  onChange={setData}
                  multiline
               />
+
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        dataFile.filter((val) => !val.delete).map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name + '.' + item.extension}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
            </View>
         </ScrollView>
+
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
+               />
+            </View>
+         </DrawerBottom>
+
      </SafeAreaView>
   );
 }
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -1,5 +1,6 @@
 import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import BorderBottomItem from "@/components/borderBottomItem";
+import BorderBottomItem2 from "@/components/borderBottomItem2";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussionDetail";
 import DrawerBottom from "@/components/drawerBottom";
@@ -55,10 +56,18 @@ type PropsComment = {
   updatedAt: string;
 };

+type PropsFile = {
+   id: string;
+   idStorage: string;
+   name: string;
+   extension: string
+}
+
 export default function DiscussionDetail() {
   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
   const [data, setData] = useState<Props>();
   const [dataComment, setDataComment] = useState<PropsComment[]>([]);
+   const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
   const { token, decryptToken } = useAuthSession();
   const [komentar, setKomentar] = useState("");
   const [loadingSend, setLoadingSend] = useState(false);
@@ -113,7 +122,15 @@ export default function DiscussionDetail() {
            user: hasil,
            cat: "data",
         });
+
+         const responseFile = await apiGetDiscussionOne({
+            id: detail,
+            user: hasil,
+            cat: "file",
+         });
+
         setData(response.data);
+         setFileDiscussion(responseFile.data)
         setIsCreator(response.data.createdBy == hasil);
      } catch (error) {
         console.error(error);
@@ -288,7 +305,8 @@ export default function DiscussionDetail() {
                     loading ?
                        <SkeletonContent />
                        :
-                        <BorderBottomItem
+                        <BorderBottomItem2
+                           dataFile={fileDiscussion}
                           descEllipsize={false}
                           borderType="bottom"
                           icon={
--- a/app/(application)/division/[id]/(fitur-division)/discussion/create.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/create.tsx
@@ -1,16 +1,25 @@
+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 { InputForm } from "@/components/inputForm"
+import LoadingOverlay from "@/components/loadingOverlay"
+import MenuItemRow from "@/components/menuItemRow"
+import Text from "@/components/Text"
 import Styles from "@/constants/Styles"
 import { apiCreateDiscussion } from "@/lib/api"
 import { setUpdateDiscussion } from "@/lib/discussionUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
+import * as DocumentPicker from "expo-document-picker"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useState } from "react"
 import { SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"

+
 export default function CreateDiscussionDivision() {
   const { id } = useLocalSearchParams<{ id: string }>()
   const [desc, setDesc] = useState('')
@@ -18,12 +27,51 @@ export default function CreateDiscussionDivision() {
   const update = useSelector((state: any) => state.discussionUpdate)
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [isModalFile, setModalFile] = useState(false)
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+
+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: true
+      });
+      if (!result.canceled) {
+         for (let i = 0; i < result.assets?.length; i++) {
+            if (result.assets[i].uri) {
+               setFileForm((prev) => [...prev, result.assets[i]])
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModalFile(false)
+   }
+

   async function handleCreate() {
      try {
         setLoading(true)
         const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateDiscussion({ data: { user: hasil, desc, idDivision: id } })
+         const fd = new FormData()
+
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            { user: hasil, desc, idDivision: id }
+         ))
+
+         const response = await apiCreateDiscussion(fd)
+
+         // const response = await apiCreateDiscussion({ data: { user: hasil, desc, idDivision: id } })
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
            dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
@@ -54,7 +102,8 @@ export default function CreateDiscussionDivision() {
                  }} />
            }}
         />
-         <ScrollView>
+         <LoadingOverlay visible={loading} />
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
            <View style={[Styles.p15, Styles.mb100]}>
               <InputForm
                  label="Diskusi"
@@ -64,8 +113,38 @@ export default function CreateDiscussionDivision() {
                  onChange={setDesc}
                  multiline
               />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
+               {
+                  fileForm.length > 0
+                  &&
+                  <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        fileForm.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                           />
+                        ))
+                     }
+                  </View>
+               }
            </View>
         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
      </SafeAreaView>
   )
 }
--- a/components/borderBottomItem2.tsx
+++ b/components/borderBottomItem2.tsx
@@ -0,0 +1,149 @@
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import { ConstEnv } from "@/constants/ConstEnv";
+import Styles from "@/constants/Styles";
+import { Ionicons } from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { startActivityAsync } from 'expo-intent-launcher';
+import * as Sharing from 'expo-sharing';
+import React, { useState } from "react";
+import { Alert, Dimensions, Platform, Pressable, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import * as mime from 'react-native-mime-types';
+import Text from "./Text";
+
+
+type Props = {
+   title?: string
+   subtitle?: string | React.ReactNode
+   icon: React.ReactNode
+   desc?: string
+   rightTopInfo?: string
+   onPress?: () => void
+   onLongPress?: () => void
+   borderType: 'all' | 'bottom' | 'none'
+   leftBottomInfo?: React.ReactNode | string
+   rightBottomInfo?: React.ReactNode | string
+   titleWeight?: 'normal' | 'bold'
+   bgColor?: 'white' | 'transparent'
+   width?: number
+   descEllipsize?: boolean
+   textColor?: string,
+   colorPress?: boolean
+   titleShowAll?: boolean
+   dataFile: { id: string; idStorage: string; name: string; extension: string }[]
+}
+
+export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll, dataFile }: Props) {
+   const lebarDim = Dimensions.get("window").width;
+   const lebar = width ? lebarDim * width / 100 : 'auto';
+   const textColorFix = textColor ? textColor : 'black';
+   const [isTap, setIsTap] = useState(false);
+   const [loadingOpen, setLoadingOpen] = useState(false)
+
+
+   const openFile = (item: { idStorage: string; name: string; extension: string }) => {
+      if (Platform.OS == 'android') setLoadingOpen(true)
+      let remoteUrl = ConstEnv.url_storage + '/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);
+         setLoadingOpen(false)
+         try {
+            if (Platform.OS == 'android') {
+               await startActivityAsync(
+                  'android.intent.action.VIEW',
+                  {
+                     data: contentURL,
+                     flags: 1,
+                     type: mimeType as string,
+                  }
+               );
+            } 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 {
+            if (Platform.OS == 'android') setLoadingOpen(false)
+         }
+      });
+   };
+
+
+   return (
+      <Pressable onLongPress={onLongPress} onPress={onPress}
+         onPressIn={() => setIsTap(true)}
+         onPressOut={() => setIsTap(false)}
+         style={({ pressed }) => [
+            borderType == 'bottom'
+               ? Styles.wrapItemBorderBottom
+               : borderType == 'all'
+                  ? Styles.wrapItemBorderAll
+                  : Styles.wrapItemBorderNone,
+            bgColor && bgColor == 'white' && ColorsStatus.white,
+            // efek warna saat ditekan (sementara)
+            isTap && colorPress && ColorsStatus.pressedGray,
+         ]}
+      >
+         <View style={[Styles.rowItemsCenter]}>
+            {icon}
+            <View style={[Styles.rowSpaceBetween, width ? { width: lebar } : { width: '88%' }]}>
+               <View style={[Styles.ml10, rightTopInfo ? { width: '70%' } : { width: '90%' }]}>
+                  <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
+                  {
+                     subtitle &&
+                        typeof subtitle == "string"
+                        ? <Text style={[Styles.textMediumNormal, { lineHeight: 15, color: textColorFix }]}>{subtitle}</Text>
+                        : <View style={{ alignItems: 'flex-start' }}>
+                           {subtitle}
+                        </View>
+                  }
+               </View>
+               {
+                  rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColorFix }]}>{rightTopInfo}</Text>
+               }
+            </View>
+
+         </View>
+         {desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'left', color: textColorFix }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
+         {
+            dataFile.length > 0 && (
+               <ScrollView horizontal style={[Styles.mv05]} showsHorizontalScrollIndicator={false}>
+                  {dataFile.map((item, index) => (
+                     <Pressable
+                        key={index}
+                        style={[Styles.rowItemsCenter, Styles.borderAll, Styles.round10, Styles.ph05, Styles.pv03, Styles.mr05]}
+                        onPress={() => { openFile({ idStorage: item.idStorage, name: item.name, extension: item.extension }) }}
+                     >
+                        <Ionicons name="document-text" size={18} color="grey" style={Styles.mr05} />
+                        <Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{item.name}.{item.extension}</Text>
+                     </Pressable>
+                  ))}
+               </ScrollView>
+            )
+         }
+         {
+            (leftBottomInfo || rightBottomInfo) &&
+            (
+               <View style={[rightBottomInfo && !leftBottomInfo ? Styles.rowSpaceBetweenReverse : Styles.rowSpaceBetween, Styles.mt05]}>
+                  {
+                     typeof leftBottomInfo == 'string' ?
+                        <Text style={[Styles.textInformation, Styles.cGray]}>{leftBottomInfo}</Text>
+                        :
+                        leftBottomInfo
+                  }
+                  {
+                     typeof rightBottomInfo == 'string' ?
+                        <Text style={[Styles.textInformation, Styles.cGray]}>{rightBottomInfo}</Text>
+                        :
+                        rightBottomInfo
+                  }
+               </View>
+            )
+         }
+      </Pressable>
+   )
+}
--- a/components/loadingOverlay.tsx
+++ b/components/loadingOverlay.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { View, ActivityIndicator, StyleSheet, Text } from "react-native";
+
+type Props = {
+  visible: boolean;
+  text?: string;
+};
+
+export default function LoadingOverlay({
+  visible,
+  text = "Loading...",
+}: Props) {
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <View style={styles.box}>
+        <ActivityIndicator size="small" color="#2c3e50" />
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.35)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 9999,
+  },
+  box: {
+    paddingVertical: 5,
+    paddingHorizontal: 15,
+    backgroundColor: "#fff",
+    borderRadius: 8,
+    alignItems: "center",
+    elevation: 6, // Android
+    shadowColor: "#000", // iOS
+    shadowOpacity: 0.25,
+    shadowRadius: 5,
+    shadowOffset: { width: 0, height: 4 },
+  },
+  text: {
+    marginTop: 5,
+    fontSize: 14,
+    color: "#2c3e50",
+  },
+});
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -178,6 +178,9 @@ const Styles = StyleSheet.create({
   ph20: {
      paddingHorizontal: 20,
   },
+   pv03: {
+      paddingVertical: 3
+   },
   pv05: {
      paddingVertical: 5
   },
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -11,7 +11,20 @@ export const apiCheckPhoneLogin = async (body: { phone: string }) => {
 }

 export const apiSendOtp = async (body: { phone: string, otp: number }) => {
-   const res = await axios.get(`${Constants.expoConfig?.extra?.URL_OTP}/code?nom=${body.phone}&text=*Desa%2B*%0AMasukkan%20kode%20ini%20*${encodeURIComponent(body.otp)}*%20pada%20aplikasi%20Desa%2B%20anda.%20Jangan%20berikan%20pada%20siapapun.`)
+   const message = "Desa+\nMasukkan kode ini " + body.otp + " pada aplikasi Desa+ anda. Jangan berikan pada siapapun."
+   const textFix = encodeURIComponent(message)
+   // const res = await axios.get(`${Constants.expoConfig?.extra?.URL_OTP}/code?nom=${body.phone}&text=*Desa%2B*%0AMasukkan%20kode%20ini%20*${encodeURIComponent(body.otp)}*%20pada%20aplikasi%20Desa%2B%20anda.%20Jangan%20berikan%20pada%20siapapun.`)
+   const res = await fetch(
+      `${Constants.expoConfig?.extra?.URL_OTP}/code?nom=${body.phone}&text=${textFix}`,
+      {
+         cache: "no-cache",
+         headers: {
+            Authorization: `Bearer ${Constants.expoConfig?.extra?.WA_SERVER_TOKEN}`,
+         },
+      }
+   );
+
+
   return res.status
 }

@@ -217,13 +230,32 @@ export const apiDeleteDiscussionGeneral = async (data: { user: string, active: b
      });
 };

-export const apiEditDiscussionGeneral = async (data: { user: string, title: string, desc: string }, id: string) => {
-   const response = await api.put(`/mobile/discussion-general/${id}`, data)
+// 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;
+// };
+
+export const apiEditDiscussionGeneral = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/discussion-general/${id}`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
   return response.data;
 };

-export const apiCreateDiscussionGeneral = async ({ data }: { data: { idGroup: string, title: string, desc: string, user: string, member: [] } }) => {
-   const response = await api.post(`/mobile/discussion-general`, data)
+// export const apiCreateDiscussionGeneral = async ({ data }: { data: { idGroup: string, title: string, desc: string, user: string, member: [] } }) => {
+//    const response = await api.post(`/mobile/discussion-general`, data)
+//    return response.data;
+// };
+
+export const apiCreateDiscussionGeneral = async (data: FormData) => {
+   // const response = await api.post(`/mobile/discussion-general`, data)
+   const response = await api.post(`/mobile/discussion-general`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
   return response.data;
 };

@@ -243,21 +275,41 @@ export const apiGetDivisionGroup = async ({ user }: { user: string }) => {
   return response.data;
 };

-export const apiCreateAnnouncement = async ({ data }: { data: { title: string, desc: string, user: string, groups: any[] } }) => {
-   const response = await api.post(`/mobile/announcement`, data)
+// export const apiCreateAnnouncement = async ({ data }: { data: { title: string, desc: string, user: string, groups: any[] } }) => {
+//    const response = await api.post(`/mobile/announcement`, data)
+//    return response.data;
+// };
+
+export const apiCreateAnnouncement = async (data: FormData) => {
+   const response = await api.post(`/mobile/announcement`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
   return response.data;
 };

+
 export const apiGetAnnouncementOne = async ({ user, id }: { user: string, id: string }) => {
   const response = await api.get(`mobile/announcement/${id}?user=${user}`);
   return response.data;
 };

-export const apiEditAnnouncement = async (data: { title: string, desc: string, user: string, groups: any[] }, id: string) => {
-   const response = await api.put(`/mobile/announcement/${id}`, data)
+// export const apiEditAnnouncement = async (data: { title: string, desc: string, user: string, groups: any[], oldFile: any[] }, id: string) => {
+//    const response = await api.put(`/mobile/announcement/${id}`, data)
+//    return response.data;
+// };
+
+export const apiEditAnnouncement = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/announcement/${id}`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
   return response.data;
 };

+
 export const apiDeleteAnnouncement = async (data: { user: string }, id: string) => {
   const response = await api.delete(`mobile/announcement/${id}`, { data })
   return response.data
@@ -445,7 +497,7 @@ export const apiGetDiscussion = async ({ user, search, division, active, page }:
   return response.data;
 };

-export const apiGetDiscussionOne = async ({ id, user, cat }: { id: string, user: string, cat: 'data' | 'comment' }) => {
+export const apiGetDiscussionOne = async ({ id, user, cat }: { id: string, user: string, cat: 'data' | 'comment' | 'file' }) => {
   const response = await api.get(`mobile/discussion/${id}?user=${user}&cat=${cat}`);
   return response.data;
 };
@@ -465,8 +517,17 @@ export const apiDeleteDiscussionCommentar = async ({ data, id }: { data: { user:
   return response.data;
 };

-export const apiEditDiscussion = async ({ data, id }: { data: { user: string, desc: string }, id: string }) => {
-   const response = await api.post(`/mobile/discussion/${id}`, data)
+// export const apiEditDiscussion = async ({ data, id }: { data: { user: string, desc: string }, id: string }) => {
+//    const response = await api.post(`/mobile/discussion/${id}`, data)
+//    return response.data;
+// };
+
+export const apiEditDiscussion = async (data: FormData, id: string) => {
+   const response = await api.post(`/mobile/discussion/${id}`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
   return response.data;
 };

@@ -480,8 +541,17 @@ export const apiOpenCloseDiscussion = async (data: { user: string, status: numbe
   return response.data
 };

-export const apiCreateDiscussion = async ({ data }: { data: { user: string, desc: string, idDivision: string } }) => {
-   const response = await api.post(`/mobile/discussion`, data)
+// export const apiCreateDiscussion = async ({ data }: { data: { user: string, desc: string, idDivision: string } }) => {
+//    const response = await api.post(`/mobile/discussion`, data)
+//    return response.data;
+// };
+
+export const apiCreateDiscussion = async (data: FormData) => {
+   const response = await api.post(`/mobile/discussion`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
   return response.data;
 };
Author	SHA1	Message	Date
amaliadwiy	588df062f1	upd: loading overlay Deskripsi: - update loading saat aksi tambah dan edit pada fitur pengumuman, diskusi umum dan diskusi divisi No Issues	2026-01-19 16:36:37 +08:00
amaliadwiy	e61fb83bfd	upd: revisi diskusi divisi Deskripsi: - attachment file pada tambah diskusi divisi - attachment file pada edit diskus divisi - attachment file pada detail diskusi divisi No Issues	2026-01-19 15:07:14 +08:00
amaliadwiy	e68f8957ad	Merge pull request 'upd: diskusi umum' (#8 ) from amalia/17-jan-26 into join Reviewed-on: http://wibugit.wibudev.com/wibu/mobile-darmasaba/pulls/8	2026-01-19 10:24:06 +08:00
amaliadwiy	eee3691aca	upd: diskusi umum Deskripsi: - detail open file pada halaman detaul diskusi umum - upload dan hapus file pada halaman edit diskusi umum - refresh halaman detail diskusi ummum No Issues	2026-01-17 11:19:24 +08:00
amaliadwiy	d9508ba978	Merge pull request 'upd: diskusi umum' (#7 ) from amalia/15-jan-26 into join Reviewed-on: http://wibugit.wibudev.com/wibu/mobile-darmasaba/pulls/7	2026-01-15 17:36:18 +08:00
amaliadwiy	6f3514c80c	upd: diskusi umum deskripsi : - integrasi api tambah data diskusi umum - integrasi api detail data diskusi umum file No Issues	2026-01-15 17:33:05 +08:00
amaliadwiy	bd31a2f993	Merge pull request 'req: pengumuman' (#6 ) from amalia/14-jan-26 into join Reviewed-on: http://wibugit.wibudev.com/wibu/mobile-darmasaba/pulls/6	2026-01-14 17:45:05 +08:00
amaliadwiy	3fbb230302	req: pengumuman Deskripsi: - pengaplikasian api tambah, detail dan edit pengumuman No Issues	2026-01-14 15:01:32 +08:00
amaliadwiy	57a24b699a	Merge pull request 'tambahan:' (#5 ) from amalia/13-jan-26 into join Reviewed-on: http://wibugit.wibudev.com/wibu/mobile-darmasaba/pulls/5	2026-01-13 17:14:05 +08:00
amaliadwiy	1a4ccc4f66	tambahan: - Deskripsi: - tampilan attach file pada halaman tambah diskusi umum - tampilan attach file pada halaman update diskusi umum - tampilan attach file pada halaman detail diskusi umum - tampilan attach file pada halaman tambah diskusi divisi - tampilan attach file pada halaman update diskusi divisi - tampilan attach file pada halaman detail diskusi divisi No Issues	2026-01-13 14:03:05 +08:00
amaliadwiy	2ba3675b3a	Merge pull request 'amalia/12-jan-26' (#4 ) from amalia/12-jan-26 into join Reviewed-on: http://wibugit.wibudev.com/wibu/mobile-darmasaba/pulls/4	2026-01-12 17:49:27 +08:00
amaliadwiy	ca3d0d9d19	upd: req client Deskripsi: - tampilan tambah file saat tambah data pengumuman - tampilan list file pada halaman detail pengumuman - tampilan tambah file saat edit data pengumuman No Issues	2026-01-12 15:52:48 +08:00
amaliadwiy	42f245f37c	fix: kode otp Deskripsi: - fix ganti wa jenna untuk mengirim kode otp No Issues	2026-01-12 14:12:24 +08:00
amaliadwiy	6acfcf9a54	Merge pull request 'amalia/12-nov-25' (#3 ) from amalia/12-nov-25 into join Reviewed-on: http://wibugit.wibudev.com/wibu/mobile-darmasaba/pulls/3	2025-11-12 17:51:57 +08:00