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

@@ -0,0 +1,382 @@
+import AppHeader from "@/components/AppHeader";
+import BorderBottomItem from "@/components/borderBottomItem";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
+import ModalConfirmation from "@/components/ModalConfirmation";
+import ModalLoading from "@/components/modalLoading";
+import MenuItemRow from "@/components/menuItemRow";
+import Skeleton from "@/components/skeleton";
+import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
+import Styles from "@/constants/Styles";
+import {
+   apiAddTugasTaskFile,
+   apiDeleteTugasTaskFile,
+   apiGetTaskOne,
+   apiGetTugasTaskFile,
+   apiLinkTugasTaskFile,
+} from "@/lib/api";
+import { setUpdateTask } from "@/lib/taskUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
+import * as FileSystem from "expo-file-system";
+import { startActivityAsync } from "expo-intent-launcher";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from "expo-sharing";
+import { useEffect, useState } from "react";
+import {
+   ActivityIndicator,
+   Alert,
+   Platform,
+   SafeAreaView,
+   ScrollView,
+   View,
+} from "react-native";
+import * as mime from "react-native-mime-types";
+import Toast from "react-native-toast-message";
+import { useDispatch, useSelector } from "react-redux";
+
+type FileItem = {
+   id: string;      // DivisionProjectTaskFile.id
+   idFile: string;  // DivisionProjectFile.id
+   name: string;
+   extension: string;
+   idStorage: string;
+};
+
+type ProjectFile = {
+   id: string;
+   name: string;
+   extension: string;
+   idStorage: string;
+};
+
+export default function TugasFileScreen() {
+   const { colors } = useTheme();
+   const { id, detail, taskId, member: memberParam } = useLocalSearchParams<{
+      id: string;
+      detail: string;
+      taskId: string;
+      member: string;
+   }>();
+   const { token, decryptToken } = useAuthSession();
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.taskUpdate);
+   const entityUser = useSelector((state: any) => state.user);
+   const isMember = memberParam === "true";
+   const canEdit = isMember || (entityUser.role !== "user" && entityUser.role !== "coadmin");
+
+   const [data, setData] = useState<FileItem[]>([]);
+   const [loading, setLoading] = useState(true);
+   const [loadingOpen, setLoadingOpen] = useState(false);
+   const [loadingUpload, setLoadingUpload] = useState(false);
+   const [loadingLink, setLoadingLink] = useState(false);
+
+   const [selectFile, setSelectFile] = useState<FileItem | null>(null);
+   const [isMenuModal, setMenuModal] = useState(false);
+   const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+   const [projectFiles, setProjectFiles] = useState<ProjectFile[]>([]);
+   const [isPickerModal, setPickerModal] = useState(false);
+   const [loadingProjectFiles, setLoadingProjectFiles] = useState(false);
+   const [selectedProjectFiles, setSelectedProjectFiles] = useState<string[]>([]);
+
+   const arrSkeleton = Array.from({ length: 4 });
+
+   async function loadFiles() {
+      try {
+         setLoading(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTugasTaskFile({ user: hasil, id: taskId });
+         setData(response.data ?? []);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   async function loadProjectFiles() {
+      try {
+         setLoadingProjectFiles(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetTaskOne({ id: detail, user: hasil, cat: "file" });
+         setProjectFiles(response.data ?? []);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingProjectFiles(false);
+      }
+   }
+
+   useEffect(() => {
+      loadFiles();
+   }, []);
+
+   const openFile = () => {
+      setMenuModal(false);
+      setLoadingOpen(true);
+      const remoteUrl = ConstEnv.url_storage + "/files/" + selectFile?.idStorage;
+      const fileName = selectFile?.name + "." + selectFile?.extension;
+      const localPath = `${FileSystem.documentDirectory}/${fileName}`;
+      const mimeType = mime.lookup(fileName);
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         try {
+            if (Platform.OS === "android") {
+               await startActivityAsync("android.intent.action.VIEW", {
+                  data: contentURL,
+                  flags: 1,
+                  type: mimeType as string,
+               });
+            } else {
+               Sharing.shareAsync(localPath);
+            }
+         } catch {
+            Alert.alert("INFO", "Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini");
+         } finally {
+            setLoadingOpen(false);
+         }
+      });
+   };
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteTugasTaskFile({ user: hasil }, String(selectFile?.id));
+         if (response.success) {
+            Toast.show({ type: "small", text1: "Berhasil menghapus file" });
+            dispatch(setUpdateTask({ ...update, task: !update.task }));
+            loadFiles();
+         } else {
+            Toast.show({ type: "small", text1: response.message });
+         }
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menghapus file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setMenuModal(false);
+      }
+   }
+
+   async function handleUpload() {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (result.canceled) return;
+
+      try {
+         setLoadingUpload(true);
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
+
+         for (let i = 0; i < result.assets.length; i++) {
+            fd.append(`file${i}`, {
+               uri: result.assets[i].uri,
+               type: "application/octet-stream",
+               name: result.assets[i].name,
+            } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil }));
+
+         const response = await apiAddTugasTaskFile({ data: fd, id: taskId });
+         if (response.success) {
+            Toast.show({ type: "small", text1: "Berhasil menambahkan file" });
+            dispatch(setUpdateTask({ ...update, task: !update.task }));
+            loadFiles();
+         } else {
+            Toast.show({ type: "small", text1: response.message });
+         }
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menambahkan file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setLoadingUpload(false);
+      }
+   }
+
+   function toggleProjectFileSelect(id: string) {
+      setSelectedProjectFiles((prev) =>
+         prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
+      );
+   }
+
+   async function handleLinkFiles() {
+      if (selectedProjectFiles.length === 0) return;
+      try {
+         setLoadingLink(true);
+         const hasil = await decryptToken(String(token?.current));
+         for (const idFile of selectedProjectFiles) {
+            await apiLinkTugasTaskFile({ user: hasil, idFile, id: taskId });
+         }
+         Toast.show({ type: "small", text1: "Berhasil menambahkan file" });
+         dispatch(setUpdateTask({ ...update, task: !update.task }));
+         setPickerModal(false);
+         setSelectedProjectFiles([]);
+         loadFiles();
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menambahkan file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setLoadingLink(false);
+      }
+   }
+
+   const attachedFileIds = new Set(data.map((f) => f.idFile));
+
+   return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <Stack.Screen
+            options={{
+               header: () => (
+                  <AppHeader
+                     title="File Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               ),
+            }}
+         />
+         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
+
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {canEdit && (
+                  <>
+                     <ButtonSelect
+                        value="Upload dari Perangkat"
+                        onPress={handleUpload}
+                        disabled={loadingUpload}
+                     />
+                     <ButtonSelect
+                        value="Pilih dari File Proyek"
+                        onPress={() => {
+                           setSelectedProjectFiles([]);
+                           setPickerModal(true);
+                           loadProjectFiles();
+                        }}
+                     />
+                  </>
+               )}
+
+               {loadingUpload && <ActivityIndicator size="small" style={Styles.mv05} />}
+
+               <View style={[Styles.mb15, Styles.mt10]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File Terlampir</Text>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                     {loading ? (
+                        arrSkeleton.map((_, index) => (
+                           <Skeleton key={index} width={100} height={40} widthType="percent" borderRadius={10} />
+                        ))
+                     ) : data.length > 0 ? (
+                        data.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="all"
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                              title={item.name + "." + item.extension}
+                              titleWeight="normal"
+                              onPress={() => {
+                                 setSelectFile(item);
+                                 setMenuModal(true);
+                              }}
+                           />
+                        ))
+                     ) : (
+                        <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]}>
+                           Tidak ada file
+                        </Text>
+                     )}
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+
+         {/* Menu per file */}
+         <DrawerBottom animation="slide" isVisible={isMenuModal} setVisible={setMenuModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
+                  title="Lihat / Share"
+                  onPress={openFile}
+               />
+               {canEdit && (
+                  <MenuItemRow
+                     icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                     title="Hapus"
+                     onPress={() => {
+                        setMenuModal(false);
+                        setTimeout(() => setShowDeleteModal(true), 600);
+                     }}
+                  />
+               )}
+            </View>
+         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus file ini?"
+            onConfirm={() => {
+               setShowDeleteModal(false);
+               handleDelete();
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
+
+         {/* Picker file dari proyek */}
+         <DrawerBottom
+            animation="slide"
+            isVisible={isPickerModal}
+            setVisible={setPickerModal}
+            title="Pilih File Proyek"
+            height={60}
+         >
+            <ScrollView>
+               {loadingProjectFiles ? (
+                  <ActivityIndicator size="small" />
+               ) : projectFiles.length > 0 ? (
+                  projectFiles.map((item, index) => {
+                     const isAttached = attachedFileIds.has(item.id);
+                     const isSelected = selectedProjectFiles.includes(item.id);
+                     return (
+                        <View key={index} style={isAttached ? { opacity: 0.4 } : undefined}>
+                           <BorderBottomItem
+                              borderType="bottom"
+                              icon={
+                                 isAttached || isSelected ? (
+                                    <Ionicons name="checkmark-circle" size={25} color={colors.primary} />
+                                 ) : (
+                                    <MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />
+                                 )
+                              }
+                              title={item.name + "." + item.extension}
+                              titleWeight="normal"
+                              onPress={() => !isAttached && toggleProjectFileSelect(item.id)}
+                              bgColor="transparent"
+                           />
+                        </View>
+                     );
+                  })
+               ) : (
+                  <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]}>
+                     Tidak ada file tersedia
+                  </Text>
+               )}
+            </ScrollView>
+            {projectFiles.length > 0 && (
+               <View>
+                  <ButtonForm
+                     text={loadingLink ? "Menyimpan..." : `Tambahkan (${selectedProjectFiles.length})`}
+                     disabled={selectedProjectFiles.length === 0 || loadingLink}
+                     onPress={handleLinkFiles} />
+               </View>
+            )}
+         </DrawerBottom>
+      </SafeAreaView>
+   );
+}

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

@@ -0,0 +1,377 @@
+import AppHeader from "@/components/AppHeader";
+import BorderBottomItem from "@/components/borderBottomItem";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
+import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
+import ModalLoading from "@/components/modalLoading";
+import Skeleton from "@/components/skeleton";
+import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
+import Styles from "@/constants/Styles";
+import {
+   apiAddProjectTaskFile,
+   apiDeleteProjectTaskFile,
+   apiGetProjectOne,
+   apiGetProjectTaskFile,
+   apiLinkProjectTaskFile,
+} from "@/lib/api";
+import { setUpdateProject } from "@/lib/projectUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
+import * as FileSystem from "expo-file-system";
+import { startActivityAsync } from "expo-intent-launcher";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import * as Sharing from "expo-sharing";
+import { useEffect, useState } from "react";
+import {
+   ActivityIndicator,
+   Alert,
+   Platform,
+   SafeAreaView,
+   ScrollView,
+   View,
+} from "react-native";
+import * as mime from "react-native-mime-types";
+import Toast from "react-native-toast-message";
+import { useDispatch, useSelector } from "react-redux";
+
+type FileItem = {
+   id: string;      // ProjectTaskFile.id
+   idFile: string;  // ProjectFile.id
+   name: string;
+   extension: string;
+   idStorage: string;
+};
+
+type ProjectFile = {
+   id: string;
+   name: string;
+   extension: string;
+   idStorage: string;
+};
+
+export default function ProjectTugasFileScreen() {
+   const { colors } = useTheme();
+   const { id, taskId, member: memberParam } = useLocalSearchParams<{ id: string; taskId: string; member: string }>();
+   const { token, decryptToken } = useAuthSession();
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.projectUpdate);
+   const entityUser = useSelector((state: any) => state.user);
+   const isMember = memberParam === "true";
+   const canEdit = isMember || (entityUser.role !== "user" && entityUser.role !== "coadmin");
+
+   const [data, setData] = useState<FileItem[]>([]);
+   const [loading, setLoading] = useState(true);
+   const [loadingOpen, setLoadingOpen] = useState(false);
+   const [loadingUpload, setLoadingUpload] = useState(false);
+   const [loadingLink, setLoadingLink] = useState(false);
+
+   const [selectFile, setSelectFile] = useState<FileItem | null>(null);
+   const [isMenuModal, setMenuModal] = useState(false);
+   const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+   const [projectFiles, setProjectFiles] = useState<ProjectFile[]>([]);
+   const [isPickerModal, setPickerModal] = useState(false);
+   const [loadingProjectFiles, setLoadingProjectFiles] = useState(false);
+   const [selectedProjectFiles, setSelectedProjectFiles] = useState<string[]>([]);
+
+   const arrSkeleton = Array.from({ length: 4 });
+
+   async function loadFiles() {
+      try {
+         setLoading(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetProjectTaskFile({ user: hasil, id: taskId });
+         setData(response.data ?? []);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false);
+      }
+   }
+
+   async function loadProjectFiles() {
+      try {
+         setLoadingProjectFiles(true);
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetProjectOne({ user: hasil, cat: "file", id });
+         setProjectFiles(response.data ?? []);
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoadingProjectFiles(false);
+      }
+   }
+
+   useEffect(() => {
+      loadFiles();
+   }, []);
+
+   const openFile = () => {
+      setMenuModal(false);
+      setLoadingOpen(true);
+      const remoteUrl = ConstEnv.url_storage + "/files/" + selectFile?.idStorage;
+      const fileName = selectFile?.name + "." + selectFile?.extension;
+      const localPath = `${FileSystem.documentDirectory}/${fileName}`;
+      const mimeType = mime.lookup(fileName);
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         try {
+            if (Platform.OS === "android") {
+               await startActivityAsync("android.intent.action.VIEW", {
+                  data: contentURL,
+                  flags: 1,
+                  type: mimeType as string,
+               });
+            } else {
+               Sharing.shareAsync(localPath);
+            }
+         } catch {
+            Alert.alert("INFO", "Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini");
+         } finally {
+            setLoadingOpen(false);
+         }
+      });
+   };
+
+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteProjectTaskFile({ user: hasil }, String(selectFile?.id));
+         if (response.success) {
+            Toast.show({ type: "small", text1: "Berhasil menghapus file" });
+            dispatch(setUpdateProject({ ...update, task: !update.task }));
+            loadFiles();
+         } else {
+            Toast.show({ type: "small", text1: response.message });
+         }
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menghapus file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setMenuModal(false);
+      }
+   }
+
+   async function handleUpload() {
+      const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
+      if (result.canceled) return;
+
+      try {
+         setLoadingUpload(true);
+         const hasil = await decryptToken(String(token?.current));
+         const fd = new FormData();
+
+         for (let i = 0; i < result.assets.length; i++) {
+            fd.append(`file${i}`, {
+               uri: result.assets[i].uri,
+               type: "application/octet-stream",
+               name: result.assets[i].name,
+            } as any);
+         }
+         fd.append("data", JSON.stringify({ user: hasil }));
+
+         const response = await apiAddProjectTaskFile({ data: fd, id: taskId });
+         if (response.success) {
+            Toast.show({ type: "small", text1: "Berhasil menambahkan file" });
+            dispatch(setUpdateProject({ ...update, task: !update.task }));
+            loadFiles();
+         } else {
+            Toast.show({ type: "small", text1: response.message });
+         }
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menambahkan file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setLoadingUpload(false);
+      }
+   }
+
+   function toggleProjectFileSelect(fileId: string) {
+      setSelectedProjectFiles((prev) =>
+         prev.includes(fileId) ? prev.filter((v) => v !== fileId) : [...prev, fileId]
+      );
+   }
+
+   async function handleLinkFiles() {
+      if (selectedProjectFiles.length === 0) return;
+      try {
+         setLoadingLink(true);
+         const hasil = await decryptToken(String(token?.current));
+         for (const idFile of selectedProjectFiles) {
+            await apiLinkProjectTaskFile({ user: hasil, idFile, id: taskId });
+         }
+         Toast.show({ type: "small", text1: "Berhasil menambahkan file" });
+         dispatch(setUpdateProject({ ...update, task: !update.task }));
+         setPickerModal(false);
+         setSelectedProjectFiles([]);
+         loadFiles();
+      } catch (error: any) {
+         const message = error?.response?.data?.message || "Gagal menambahkan file";
+         Toast.show({ type: "small", text1: message });
+      } finally {
+         setLoadingLink(false);
+      }
+   }
+
+   const attachedFileIds = new Set(data.map((f) => f.idFile));
+
+   return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <Stack.Screen
+            options={{
+               header: () => (
+                  <AppHeader
+                     title="File Tugas"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               ),
+            }}
+         />
+         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
+
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               {canEdit && (
+                  <>
+                     <ButtonSelect
+                        value="Upload dari Perangkat"
+                        onPress={handleUpload}
+                        disabled={loadingUpload}
+                     />
+                     <ButtonSelect
+                        value="Pilih dari File Proyek"
+                        onPress={() => {
+                           setSelectedProjectFiles([]);
+                           setPickerModal(true);
+                           loadProjectFiles();
+                        }}
+                     />
+                  </>
+               )}
+
+               {loadingUpload && <ActivityIndicator size="small" style={Styles.mv05} />}
+
+               <View style={[Styles.mb15, Styles.mt10]}>
+                  <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File Terlampir</Text>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                     {loading ? (
+                        arrSkeleton.map((_, index) => (
+                           <Skeleton key={index} width={100} height={40} widthType="percent" borderRadius={10} />
+                        ))
+                     ) : data.length > 0 ? (
+                        data.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="all"
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
+                              title={item.name + "." + item.extension}
+                              titleWeight="normal"
+                              onPress={() => {
+                                 setSelectFile(item);
+                                 setMenuModal(true);
+                              }}
+                           />
+                        ))
+                     ) : (
+                        <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]}>
+                           Tidak ada file
+                        </Text>
+                     )}
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+
+         {/* Menu per file */}
+         <DrawerBottom animation="slide" isVisible={isMenuModal} setVisible={setMenuModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
+                  title="Lihat / Share"
+                  onPress={openFile}
+               />
+               {canEdit && (
+                  <MenuItemRow
+                     icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                     title="Hapus"
+                     onPress={() => {
+                        setMenuModal(false);
+                        setTimeout(() => setShowDeleteModal(true), 600);
+                     }}
+                  />
+               )}
+            </View>
+         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus file ini?"
+            onConfirm={() => {
+               setShowDeleteModal(false);
+               handleDelete();
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
+
+         {/* Picker file dari proyek */}
+         <DrawerBottom
+            animation="slide"
+            isVisible={isPickerModal}
+            setVisible={setPickerModal}
+            title="Pilih File Proyek"
+            height={60}
+         >
+            <ScrollView>
+               {loadingProjectFiles ? (
+                  <ActivityIndicator size="small" />
+               ) : projectFiles.length > 0 ? (
+                  projectFiles.map((item, index) => {
+                     const isAttached = attachedFileIds.has(item.id);
+                     const isSelected = selectedProjectFiles.includes(item.id);
+                     return (
+                        <View key={index} style={isAttached ? { opacity: 0.4 } : undefined}>
+                           <BorderBottomItem
+                              borderType="bottom"
+                              icon={
+                                 isAttached || isSelected ? (
+                                    <Ionicons name="checkmark-circle" size={25} color={colors.primary} />
+                                 ) : (
+                                    <MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />
+                                 )
+                              }
+                              title={item.name + "." + item.extension}
+                              titleWeight="normal"
+                              onPress={() => !isAttached && toggleProjectFileSelect(item.id)}
+                              bgColor="transparent"
+                           />
+                        </View>
+                     );
+                  })
+               ) : (
+                  <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]}>
+                     Tidak ada file tersedia
+                  </Text>
+               )}
+            </ScrollView>
+            {projectFiles.length > 0 && (
+               <View>
+                  <ButtonForm
+                     text={loadingLink ? "Menyimpan..." : `Tambahkan (${selectedProjectFiles.length})`}
+                     disabled={selectedProjectFiles.length === 0 || loadingLink}
+                     onPress={handleLinkFiles} />
+               </View>
+            )}
+         </DrawerBottom>
+      </SafeAreaView>
+   );
+}

components/itemSectionTanggalTugas.tsx

@@ -1,48 +1,123 @@
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { Pressable, View } from "react-native";
+import { useState } from "react";
+import { LayoutChangeEvent, Pressable, View } from "react-native";
 import Text from "./Text";
 
+type FileItem = {
+   name: string
+   extension: string
+}
+
 type Props = {
    done?: boolean
    title: string
    dateStart: string
    dateEnd: string
+   files?: FileItem[]
    onPress?: () => void
 }
 
-export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
-   const { colors } = useTheme();
+// estimasi lebar chip berdasarkan panjang teks
+const CHAR_W = 6.5   // lebar rata-rata per karakter (font size 10)
+const ICON_W = 17    // icon 13px + margin 4px
+const PAD_H = 16     // paddingHorizontal 8 * 2
+const GAP = 6
+const PLUS_W = 72    // lebar chip "+X lainnya"
+
+function estimateChipWidth(label: string) {
+   return PAD_H + ICON_W + label.length * CHAR_W
+}
+
+function getVisibleChips(files: FileItem[], containerWidth: number) {
+   if (containerWidth === 0) return { visible: [], extra: files.length }
+
+   let used = 0
+   const visible: FileItem[] = []
+
+   for (let i = 0; i < files.length; i++) {
+      const label = `${files[i].name}.${files[i].extension}`
+      const chipW = estimateChipWidth(label)
+      const isLast = i === files.length - 1
+      const plusChipW = isLast ? 0 : PLUS_W + GAP
+      const gapW = visible.length > 0 ? GAP : 0
+
+      if (used + gapW + chipW + plusChipW <= containerWidth) {
+         visible.push(files[i])
+         used += gapW + chipW
+      } else {
+         break
+      }
+   }
+
+   return { visible, extra: files.length - visible.length }
+}
+
+function getFileIcon(extension: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   const ext = extension.toLowerCase()
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+const chipStyle = (colors: any) => ({
+   flexDirection: 'row' as const,
+   alignItems: 'center' as const,
+   backgroundColor: colors.dimmed + '5',
+   borderRadius: 6,
+   borderWidth: 0.5,
+   borderColor: colors.icon + '20',
+   paddingHorizontal: 8,
+   paddingVertical: 4,
+})
+
+export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, files = [], onPress }: Props) {
+   const { colors } = useTheme()
+   const [containerWidth, setContainerWidth] = useState(0)
+
+   const { visible, extra } = getVisibleChips(files, containerWidth)
+
+   function onRowLayout(e: LayoutChangeEvent) {
+      const w = e.nativeEvent.layout.width
+      if (w !== containerWidth) setContainerWidth(w)
+   }
 
    return (
       <Pressable style={[Styles.mb15, { borderBottomColor: colors.icon + '20', borderBottomWidth: 1 }]} onPress={onPress}>
-         <View style={[Styles.rowItemsCenter]}>
-            {
-               done != undefined ?
-                  done ?
-                     <>
-                        <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
-                        <Text>Selesai</Text>
-                     </>
-                     :
-                     <>
-                        <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
-                        <Text>Belum Selesai</Text>
-                     </>
-                  :
-                  <></>
-            }
 
+         {/* Status */}
+         <View style={[Styles.rowItemsCenter]}>
+            {done != undefined && (
+               done ? (
+                  <>
+                     <MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
+                     <Text>Selesai</Text>
+                  </>
+               ) : (
+                  <>
+                     <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
+                     <Text>Belum Selesai</Text>
+                  </>
+               )
+            )}
          </View>
+
+         {/* Judul tugas */}
          <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
             <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
-               <MaterialCommunityIcons name="file-table-outline" size={25} color={colors.text} style={[Styles.mr10]} />
+               <MaterialCommunityIcons name="file-table-outline" size={22} color={colors.text} style={[Styles.mr10]} />
                <View style={[Styles.w90]}>
                   <Text style={[Styles.textDefault]}>{title}</Text>
                </View>
             </View>
          </View>
+
+         {/* Tanggal */}
          <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
             <View style={[{ width: '48%' }]}>
                <Text style={[Styles.mb05]}>Tanggal Mulai</Text>
@@ -57,6 +132,52 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
                </View>
             </View>
          </View>
+
+         {/* Lampiran file */}
+         {files.length > 0 && (
+            <View style={[Styles.mb15]}>
+               <View style={[Styles.rowItemsCenter, Styles.mb05]}>
+                  <MaterialCommunityIcons name="paperclip" size={13} color={colors.dimmed} style={[Styles.mr10]} />
+                  <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
+                     {files.length} Lampiran
+                  </Text>
+               </View>
+               <View
+                  style={{ flexDirection: 'row', gap: GAP, overflow: 'hidden' }}
+                  onLayout={onRowLayout}
+               >
+                  {visible.map((file, index) => {
+                     const label = `${file.name}.${file.extension}`
+                     const chipW = Math.min(estimateChipWidth(label), containerWidth * 0.55)
+                     return (
+                        <View key={index} style={[chipStyle(colors), { width: chipW }]}>
+                           <MaterialCommunityIcons
+                              name={getFileIcon(file.extension)}
+                              size={13}
+                              color={colors.dimmed}
+                              style={{ marginRight: 4 }}
+                           />
+                           <Text
+                              style={[Styles.textSmallSemiBold, { color: colors.dimmed, flex: 1 }]}
+                              numberOfLines={1}
+                              ellipsizeMode="tail"
+                           >
+                              {label}
+                           </Text>
+                        </View>
+                     )
+                  })}
+                  {extra > 0 && (
+                     <View style={[chipStyle(colors)]}>
+                        <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
+                           +{extra} lainnya
+                        </Text>
+                     </View>
+                  )}
+               </View>
+            </View>
+         )}
+
       </Pressable>
    )
-}
+}

components/project/sectionTanggalTugas.tsx

@@ -26,6 +26,7 @@ type Props = {
    dateStart: string;
    dateEnd: string;
    createdAt: string;
+   files?: { name: string; extension: string }[];
 };
 
 export default function SectionTanggalTugasProject({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
@@ -144,12 +145,9 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                                  title={item.title}
                                  dateStart={item.dateStart}
                                  dateEnd={item.dateEnd}
+                                 files={item.files ?? []}
                                  onPress={() => {
-                                    if (status == 3 || (!member && (entityUser.role == "user" || entityUser.role == "coadmin"))) return
-                                    setTugas({
-                                       id: item.id,
-                                       status: item.status
-                                    })
+                                    setTugas({ id: item.id, status: item.status })
                                     setModal(true)
                                  }}
                               />
@@ -169,65 +167,54 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
          >
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={
-                     <MaterialCommunityIcons
-                        name="list-status"
-                        color={colors.text}
-                        size={25}
-                     />
-                  }
-                  title="Update Status"
-                  onPress={() => {
-                     setModal(false);
-                     setTimeout(() => {
-                        setSelect(true);
-                     }, 600)
-                  }}
-               />
-               <MenuItemRow
-                  icon={
-                     <MaterialCommunityIcons
-                        name="pencil-outline"
-                        color={colors.text}
-                        size={25}
-                     />
-                  }
-                  title="Edit Tugas"
-                  onPress={() => {
-                     setModal(false);
-                     router.push(`/project/update/${tugas.id}`);
-                  }}
-               />
-
-               <MenuItemRow
-                  icon={
-                     <MaterialCommunityIcons
-                        name="clock-time-three-outline"
-                        color={colors.text}
-                        size={25}
-                     />
-                  }
+                  icon={<MaterialCommunityIcons name="clock-time-three-outline" color={colors.text} size={25} />}
                   title="Detail Waktu"
                   onPress={() => {
                      setModal(false);
-                     setTimeout(() => {
-                        setModalDetail(true)
-                     }, 600)
+                     setTimeout(() => setModalDetail(true), 600)
                   }}
                />
-            </View>
-            <View style={[Styles.rowItemsCenter, Styles.mt15]}>
                <MenuItemRow
-                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
-                  title="Hapus Tugas"
+                  icon={<MaterialCommunityIcons name="file-multiple-outline" color={colors.text} size={25} />}
+                  title="File Tugas"
                   onPress={() => {
-                     setModal(false)
-                     setTimeout(() => {
-                        setShowDeleteModal(true)
-                     }, 600)
+                     setModal(false);
+                     router.push(`/project/${id}/tugas-file/${tugas.id}?member=${member}`);
                   }}
                />
+               {(member || (entityUser.role != "user" && entityUser.role != "coadmin")) && status != 3 && (
+                  <>
+                     <MenuItemRow
+                        icon={<MaterialCommunityIcons name="list-status" color={colors.text} size={25} />}
+                        title="Update Status"
+                        onPress={() => {
+                           setModal(false);
+                           setTimeout(() => setSelect(true), 600)
+                        }}
+                     />
+                     <MenuItemRow
+                        icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
+                        title="Edit Tugas"
+                        onPress={() => {
+                           setModal(false);
+                           router.push(`/project/update/${tugas.id}`);
+                        }}
+                     />
+                  </>
+               )}
             </View>
+            {(member || (entityUser.role != "user" && entityUser.role != "coadmin")) && status != 3 && (
+               <View style={[Styles.rowItemsCenter, Styles.mt15]}>
+                  <MenuItemRow
+                     icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
+                     title="Hapus Tugas"
+                     onPress={() => {
+                        setModal(false)
+                        setTimeout(() => setShowDeleteModal(true), 600)
+                     }}
+                  />
+               </View>
+            )}
          </DrawerBottom>
 
          <ModalConfirmation

components/task/sectionTanggalTugasTask.tsx

@@ -25,6 +25,7 @@ type Props = {
    status: number;
    dateStart: string;
    dateEnd: string;
+   files?: { name: string; extension: string }[];
 }
 
 export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
@@ -145,6 +146,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                                  title={item.title}
                                  dateStart={item.dateStart}
                                  dateEnd={item.dateEnd}
+                                 files={item.files ?? []}
                                  onPress={() => {
                                     setTugas({
                                        id: item.id,
@@ -179,6 +181,14 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                      }, 600)
                   }}
                />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-multiple-outline" color={colors.text} size={25} />}
+                  title="File Tugas"
+                  onPress={() => {
+                     setModal(false);
+                     router.push(`/division/${id}/task/${detail}/tugas-file/${tugas.id}?member=${isMemberDivision}`)
+                  }}
+               />
                {
                   (entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
                      ?

lib/api.ts

@@ -357,6 +357,28 @@ export const apiDeleteProjectMember = async (data: { user: string, idUser: strin
    return response.data
 };
 
+export const apiGetProjectTaskFile = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`/mobile/project/task/file/${id}`, { params: { user } })
+   return response.data;
+};
+
+export const apiAddProjectTaskFile = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.post(`/mobile/project/task/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiLinkProjectTaskFile = async ({ user, idFile, id }: { user: string, idFile: string, id: string }) => {
+   const response = await api.patch(`/mobile/project/task/file/${id}`, { user, idFile })
+   return response.data;
+};
+
+export const apiDeleteProjectTaskFile = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/task/file/${id}`, { data })
+   return response.data;
+};
+
 
 export const apiAddMemberProject = async ({ data, id }: { data: { user: string, member: any[] }, id: string }) => {
    const response = await api.post(`/mobile/project/${id}/member`, data)
@@ -664,6 +686,28 @@ export const apiAddFileTask = async ({ data, id }: { data: FormData, id: string
    return response.data;
 };
 
+export const apiGetTugasTaskFile = async ({ user, id }: { user: string, id: string }) => {
+   const response = await api.get(`/mobile/task/tugas/file/${id}`, { params: { user } })
+   return response.data;
+};
+
+export const apiAddTugasTaskFile = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.post(`/mobile/task/tugas/file/${id}`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiLinkTugasTaskFile = async ({ user, idFile, id }: { user: string, idFile: string, id: string }) => {
+   const response = await api.patch(`/mobile/task/tugas/file/${id}`, { user, idFile })
+   return response.data;
+};
+
+export const apiDeleteTugasTaskFile = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/task/tugas/file/${id}`, { data })
+   return response.data;
+};
+
 export const apiEditTask = async (data: { title: string, user: string }, id: string) => {
    const response = await api.put(`/mobile/task/${id}`, data)
    return response.data;