fix: perbaiki warna ikon tombol send agar terlihat pada tema dark

feat: tambah empty state dengan ikon pada section tugas, dokumen, dan diskusi divisi
feat: redesign dokumen terkini dan samakan perilaku buka file dengan diskusi umum
2026-06-10 15:22:30 +08:00 · 2026-06-10 15:18:20 +08:00 · 2026-06-10 14:59:51 +08:00 · 2026-06-10 14:29:03 +08:00 · 2026-06-10 14:28:56 +08:00 · 2026-06-10 14:28:52 +08:00
7 changed files with 272 additions and 284 deletions
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -244,11 +244,11 @@ export default function DetailDiscussionGeneral() {
                     loading={loadingSend}
                     onSend={viewEdit ? handleEditKomentar : handleKomentar}
                     onCancelEdit={handleViewEditKomentar}
-                     files={commentFiles}
-                     onAddFile={(newFiles) => setCommentFiles(prev => [...prev, ...newFiles])}
-                     onRemoveFile={(idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
+                     files={viewEdit ? [] : commentFiles}
+                     onAddFile={viewEdit ? undefined : (newFiles) => setCommentFiles(prev => [...prev, ...newFiles])}
+                     onRemoveFile={viewEdit ? undefined : (idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
                     existingFiles={viewEdit ? selectKomentar.files.filter(f => !removedFileIds.includes(f.id)) : []}
-                     onRemoveExistingFile={(fileId) => setRemovedFileIds(prev => [...prev, fileId])}
+                     onRemoveExistingFile={viewEdit ? (fileId) => setRemovedFileIds(prev => prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId]) : undefined}
                     canSend={canComment}
                  />
               ) : (
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -2,15 +2,13 @@ import AppHeader from "@/components/AppHeader";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
 import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussionDetail";
 import DrawerBottom from "@/components/drawerBottom";
-import ImageUser from "@/components/imageNew";
-import { InputForm } from "@/components/inputForm";
+import DiscussionCommentInput from "@/components/discussion_general/discussionCommentInput";
+import DiscussionCommentList, { CommentFile, CommentItem } from "@/components/discussion_general/discussionCommentList";
 import MenuItemRow from "@/components/menuItemRow";
 import ModalConfirmation from "@/components/ModalConfirmation";
-import Skeleton from "@/components/skeleton";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from "@/components/Text";
 import { ConstEnv } from "@/constants/ConstEnv";
-import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
 import Styles from "@/constants/Styles";
 import {
   apiDeleteDiscussionCommentar,
@@ -18,6 +16,7 @@ import {
   apiGetDiscussionOne,
   apiGetDivisionOneFeature,
   apiSendDiscussionCommentar,
+   apiSendDiscussionCommentarWithFile,
 } from "@/lib/api";
 import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
@@ -30,6 +29,7 @@ import { useEffect, useState } from "react";
 import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
+import ImageUser from "@/components/imageNew";

 type Props = {
   id: string;
@@ -44,17 +44,6 @@ type Props = {
   isActive: boolean;
 };

-type PropsComment = {
-   id: string;
-   comment: string;
-   createdAt: string;
-   username: string;
-   img: string;
-   idUser: string;
-   isEdited: boolean;
-   updatedAt: string;
-};
-
 type PropsFile = {
   id: string;
   idStorage: string;
@@ -66,10 +55,11 @@ export default function DiscussionDetail() {
   const { colors } = useTheme();
   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
   const [data, setData] = useState<Props>();
-   const [dataComment, setDataComment] = useState<PropsComment[]>([]);
+   const [dataComment, setDataComment] = useState<CommentItem[]>([]);
   const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
   const { token, decryptToken } = useAuthSession();
   const [komentar, setKomentar] = useState("");
+   const [commentFiles, setCommentFiles] = useState<{ uri: string; name: string }[]>([])
   const [loadingSend, setLoadingSend] = useState(false);
   const update = useSelector((state: any) => state.discussionUpdate);
   const entityUser = useSelector((state: any) => state.user);
@@ -78,16 +68,15 @@ export default function DiscussionDetail() {
   const [isCreator, setIsCreator] = useState(false);
   const [loading, setLoading] = useState(true)
   const [loadingKomentar, setLoadingKomentar] = useState(true)
-   const arrSkeleton = Array.from({ length: 3 })
   const reference = ref(getDB(), `/discussion-division/${detail}`);
   const [refreshing, setRefreshing] = useState(false)
   const headerHeight = useHeaderHeight();
-   const [detailMore, setDetailMore] = useState<any>([])
   const entities = useSelector((state: any) => state.entities)
   const [isVisible, setVisible] = useState(false)
-   const [selectKomentar, setSelectKomentar] = useState({ id: '', comment: '' })
+   const [selectKomentar, setSelectKomentar] = useState<{ id: string; comment: string; files: CommentFile[] }>({ id: '', comment: '', files: [] })
   const [viewEdit, setViewEdit] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const [removedFileIds, setRemovedFileIds] = useState<string[]>([])

   useEffect(() => {
      const onValueChange = reference.on('value', snapshot => {
@@ -152,8 +141,22 @@ export default function DiscussionDetail() {
      try {
         setLoadingSend(true);
         const hasil = await decryptToken(String(token?.current));
-         const response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
-         if (response.success) { setKomentar(""); updateTrigger() }
+         let response
+         if (commentFiles.length > 0) {
+            const fd = new FormData()
+            fd.append('data', JSON.stringify({ comment: komentar, user: hasil }))
+            commentFiles.forEach((f, i) => {
+               fd.append(`file${i}`, { uri: f.uri, name: f.name, type: 'application/octet-stream' } as any)
+            })
+            response = await apiSendDiscussionCommentarWithFile(detail, fd)
+         } else {
+            response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
+         }
+         if (response.success) {
+            setKomentar("");
+            setCommentFiles([])
+            updateTrigger()
+         }
      } catch (error: any) {
         console.error(error);
         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan komentar" })
@@ -166,7 +169,10 @@ export default function DiscussionDetail() {
      try {
         setLoadingSend(true);
         const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditDiscussionCommentar({ id: selectKomentar.id, data: { comment: selectKomentar.comment, user: hasil } });
+         const response = await apiEditDiscussionCommentar({
+            id: selectKomentar.id,
+            data: { comment: selectKomentar.comment, user: hasil, filesToRemove: removedFileIds }
+         });
         if (response.success) { updateTrigger() } else { Toast.show({ type: 'small', text1: response.message }) }
      } catch (error: any) {
         console.error(error);
@@ -192,14 +198,20 @@ export default function DiscussionDetail() {
      }
   }

-   function handleMenuKomentar(id: string, comment: string) {
-      setSelectKomentar({ id, comment })
+   function handleMenuKomentar(id: string, comment: string, files: CommentFile[]) {
+      setSelectKomentar({ id, comment, files })
+      setRemovedFileIds([])
      setVisible(true)
   }

   function handleViewEditKomentar() {
      setVisible(false)
      setViewEdit(!viewEdit)
+      if (viewEdit) setRemovedFileIds([])
+   }
+
+   function handleRemoveExistingFile(fileId: string) {
+      setRemovedFileIds(prev => prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId])
   }

   const handleRefresh = async () => {
@@ -212,6 +224,9 @@ export default function DiscussionDetail() {

   const canWrite = data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision)
   const isOpen = data?.status === 1
+   const canSend = (entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin") || isMemberDivision
+
+   const existingFilesForEdit = selectKomentar.files.filter(f => !removedFileIds.includes(f.id))

   return (
      <>
@@ -273,123 +288,43 @@ export default function DiscussionDetail() {
                     />
                  )}

-                  <View style={Styles.mt10}>
-                     {loadingKomentar ? (
-                        arrSkeleton.map((_, i) => (
-                           <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
-                        ))
-                     ) : (
-                        dataComment.map((item, i) => (
-                           <Pressable
-                              key={i}
-                              onPress={() => {
-                                 setDetailMore((prev: any) =>
-                                    prev.includes(item.id) ? prev.filter((id: string) => id !== item.id) : [...prev, item.id]
-                                 )
-                              }}
-                              onLongPress={() => {
-                                 item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
-                              }}
-                              style={({ pressed }) => [
-                                 Styles.discussionCommentCard,
-                                 { backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
-                              ]}
-                           >
-                              <View style={Styles.flex1}>
-                                 <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
-                                    <View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
-                                       <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
-                                       <Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
-                                          {item.username}
-                                       </Text>
-                                       {item.isEdited && (
-                                          <Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>diedit</Text>
-                                       )}
-                                    </View>
-                                    <Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
-                                       {item.createdAt}
-                                    </Text>
-                                 </View>
-                                 <Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={detailMore.includes(item.id) ? 0 : 3}>
-                                    {item.comment}
-                                 </Text>
-                              </View>
-                           </Pressable>
-                        ))
-                     )}
-                  </View>
+                  <DiscussionCommentList
+                     data={dataComment}
+                     loading={loadingKomentar}
+                     myId={entities.id}
+                     canInteract={data?.status != 2 && data?.isActive == true}
+                     onLongPress={handleMenuKomentar}
+                  />
               </View>
            </ScrollView>

            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={headerHeight}>
-               <View style={[Styles.contentItemCenter, Styles.w100, { backgroundColor: colors.background }, viewEdit && Styles.borderTop]}>
-                  {viewEdit ? (
-                     <>
-                        <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
-                           <View style={Styles.rowItemsCenter}>
-                              <Feather name="edit-3" color={colors.text} size={22} style={Styles.mh05} />
-                              <Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
-                           </View>
-                           <Pressable onPress={() => handleViewEditKomentar()}>
-                              <MaterialIcons name="close" color={colors.text} size={22} />
-                           </Pressable>
-                        </View>
-                        <InputForm
-                           bg={colors.card}
-                           type="default" round multiline
-                           placeholder="Kirim Komentar"
-                           onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
-                           value={selectKomentar.comment}
-                           itemRight={
-                              <Pressable
-                                 onPress={() => {
-                                    selectKomentar.comment != "" && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && !loadingSend && data?.status != 2 && data?.isActive
-                                       && (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
-                                       && handleEditKomentar();
-                                 }}
-                                 style={[Platform.OS == 'android' && Styles.mb12]}
-                              >
-                                 <MaterialIcons name="send" size={25}
-                                    style={[
-                                       selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
-                                          ? { color: colors.dimmed } : { color: colors.tint },
-                                    ]}
-                                 />
-                              </Pressable>
-                           }
-                        />
-                     </>
-                  ) : canWrite ? (
-                     <InputForm
-                        type="default" round multiline
-                        placeholder="Kirim Komentar"
-                        onChange={setKomentar} value={komentar}
-                        itemRight={
-                           <Pressable
-                              onPress={() => {
-                                 komentar != "" && !regexOnlySpacesOrEnter.test(komentar) && !loadingSend && data?.status != 2 && data?.isActive
-                                    && (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
-                                    && handleKomentar();
-                              }}
-                              style={[Platform.OS == 'android' && Styles.mb12]}
-                           >
-                              <MaterialIcons name="send" size={25}
-                                 style={[
-                                    komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
-                                       ? { color: colors.dimmed } : { color: colors.tint },
-                                 ]}
-                              />
-                           </Pressable>
-                        }
-                     />
-                  ) : (
-                     <View style={[Styles.pv20, Styles.itemsCenter]}>
-                        <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
-                           {data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota divisi yang dapat memberikan komentar"}
-                        </Text>
-                     </View>
-                  )}
-               </View>
+               <DiscussionCommentInput
+                  mode={
+                     viewEdit ? 'edit'
+                     : canWrite ? 'new'
+                     : 'locked'
+                  }
+                  lockedReason={
+                     data?.status == 2 ? "Diskusi telah ditutup"
+                     : data?.isActive == false ? "Diskusi telah diarsipkan"
+                     : "Hanya anggota divisi yang dapat memberikan komentar"
+                  }
+                  value={viewEdit ? selectKomentar.comment : komentar}
+                  onChange={viewEdit
+                     ? (val) => setSelectKomentar(prev => ({ ...prev, comment: val }))
+                     : setKomentar
+                  }
+                  loading={loadingSend}
+                  onSend={viewEdit ? handleEditKomentar : handleKomentar}
+                  onCancelEdit={handleViewEditKomentar}
+                  files={viewEdit ? [] : commentFiles}
+                  onAddFile={viewEdit ? undefined : (f) => setCommentFiles(prev => [...prev, ...f])}
+                  onRemoveFile={viewEdit ? undefined : (idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
+                  existingFiles={viewEdit ? existingFilesForEdit : []}
+                  onRemoveExistingFile={viewEdit ? handleRemoveExistingFile : undefined}
+                  canSend={canSend}
+               />
            </KeyboardAvoidingView>
         </View>

--- a/components/discussion_general/discussionCommentInput.tsx
+++ b/components/discussion_general/discussionCommentInput.tsx
@@ -4,7 +4,7 @@ import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
 import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
-import { Platform, Pressable, ScrollView, TextInput, View } from "react-native";
+import { ActivityIndicator, Platform, Pressable, ScrollView, TextInput, View } from "react-native";
 import Toast from "react-native-toast-message";

 type Props = {
@@ -58,29 +58,39 @@ export default function DiscussionCommentInput({
   return (
      <View style={{ backgroundColor: colors.background, borderTopWidth: mode === 'edit' ? 1 : 0, borderTopColor: colors.icon + '20' }}>
         {mode === 'edit' && (
-            <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
+            <View style={[Styles.rowSpaceBetween, Styles.pv05, { paddingHorizontal: 12 }]}>
               <View style={Styles.rowItemsCenter}>
                  <Feather name="edit-3" color={colors.text} size={20} style={Styles.mh05} />
                  <Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
+                  {loading && (
+                     <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginLeft: 6 }]}>Mengirim...</Text>
+                  )}
               </View>
-               <Pressable onPress={onCancelEdit}>
-                  <MaterialIcons name="close" color={colors.text} size={20} />
+               <Pressable onPress={onCancelEdit} disabled={loading}>
+                  <MaterialIcons name="close" color={loading ? colors.dimmed : colors.text} size={20} />
               </Pressable>
            </View>
         )}

+         {loading && mode === 'new' && (files.length > 0 || existingFiles.length > 0) && (
+            <View style={{ paddingHorizontal: 15, paddingTop: 6 }}>
+               <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>Mengirim...</Text>
+            </View>
+         )}
+
         {(existingFiles.length > 0 || files.length > 0) && (
            <ScrollView horizontal style={[Styles.ph15, Styles.pv05]} showsHorizontalScrollIndicator={false}>
               {existingFiles.map((f) => (
                  <Pressable
                     key={f.id}
-                     onPress={() => onRemoveExistingFile?.(f.id)}
+                     onPress={() => !loading && onRemoveExistingFile?.(f.id)}
                     style={{
                        flexDirection: 'row', alignItems: 'center', gap: 6,
                        paddingHorizontal: 10, paddingVertical: 6,
                        borderRadius: 20, borderWidth: 1,
                        backgroundColor: colors.card, borderColor: colors.icon + '18',
-                        marginRight: 8
+                        marginRight: 8,
+                        opacity: loading ? 0.5 : 1
                     }}
                  >
                     <MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
@@ -93,13 +103,14 @@ export default function DiscussionCommentInput({
               {files.map((f, idx) => (
                  <Pressable
                     key={idx}
-                     onPress={() => onRemoveFile?.(idx)}
+                     onPress={() => !loading && onRemoveFile?.(idx)}
                     style={{
                        flexDirection: 'row', alignItems: 'center', gap: 6,
                        paddingHorizontal: 10, paddingVertical: 6,
                        borderRadius: 20, borderWidth: 1,
                        backgroundColor: colors.card, borderColor: colors.icon + '18',
-                        marginRight: 8
+                        marginRight: 8,
+                        opacity: loading ? 0.5 : 1
                     }}
                  >
                     <MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
@@ -122,12 +133,13 @@ export default function DiscussionCommentInput({
            {mode === 'new' && (
               <Pressable
                  onPress={pickFiles}
+                  disabled={loading}
                  style={{ marginBottom: 6 }}
               >
                  <MaterialIcons
                     name="add"
                     size={28}
-                     color={files.length > 0 ? colors.tabActive : colors.dimmed}
+                     color={loading ? colors.dimmed + '60' : files.length > 0 ? colors.tabActive : colors.dimmed}
                  />
               </Pressable>
            )}
@@ -138,6 +150,7 @@ export default function DiscussionCommentInput({
               borderRadius: 30, borderWidth: 1, borderColor: colors.icon + '20',
               paddingHorizontal: 14,
               paddingVertical: 10,
+               opacity: loading ? 0.6 : 1
            }}>
               <TextInput
                  style={{
@@ -151,6 +164,7 @@ export default function DiscussionCommentInput({
                  value={value}
                  onChangeText={onChange}
                  multiline
+                  editable={!loading}
               />
            </View>

@@ -160,10 +174,12 @@ export default function DiscussionCommentInput({
                  width: 40, height: 40, borderRadius: 20,
                  backgroundColor: sendDisabled ? colors.dimmed + '40' : colors.tint,
                  justifyContent: 'center', alignItems: 'center',
-                  marginBottom: 0
               }}
            >
-               <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
+               {loading
+                  ? <ActivityIndicator size={18} color={sendDisabled ? colors.dimmed : colors.background} />
+                  : <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : colors.background} />
+               }
            </Pressable>
         </View>
      </View>
--- a/components/division/discussionDivisionDetail.tsx
+++ b/components/division/discussionDivisionDetail.tsx
@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
@@ -54,33 +55,31 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
  return (
    <View style={[Styles.mb15]}>
      <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
-      <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
-        {
-          loading ?
-            <>
-              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-            </>
-            :
-            data.length > 0 ? (
-              data.map((item, index) => (
-                <DiscussionItem
-                  key={index}
-                  title={item.desc}
-                  user={item.user}
-                  date={item.date}
-                  onPress={() => {
-                    router.push(`/division/${id}/discussion/${item.id}`);
-                  }}
-                />
-              ))
-            ) : (
-              <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
-                Tidak ada diskusi
-              </Text>
-            )
-        }
-      </View>
+      {loading ? (
+        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
+          <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+          <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+        </View>
+      ) : data.length > 0 ? (
+        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
+          {data.map((item, index) => (
+            <DiscussionItem
+              key={index}
+              title={item.desc}
+              user={item.user}
+              date={item.date}
+              onPress={() => {
+                router.push(`/division/${id}/discussion/${item.id}`);
+              }}
+            />
+          ))}
+        </View>
+      ) : (
+        <View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
+          <MaterialCommunityIcons name="chat-outline" size={28} color={colors.dimmed} />
+          <Text style={[Styles.textDefault, { color: colors.dimmed }]}>Belum ada diskusi aktif</Text>
+        </View>
+      )}
    </View>
  );
 }
--- a/components/division/fileDivisionDetail.tsx
+++ b/components/division/fileDivisionDetail.tsx
@@ -1,17 +1,18 @@
 import { ConstEnv } from "@/constants/ConstEnv";
+import { isImageFile } from "@/constants/FileExtensions";
 import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Feather } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
 import { useLocalSearchParams } from "expo-router";
 import * as Sharing from 'expo-sharing';
-import React, { useEffect, useState } from "react";
-import { Alert, Dimensions, Platform, Pressable, View } from "react-native";
+import { useEffect, useState } from "react";
+import { Platform, Pressable, ScrollView, View } from "react-native";
+import ImageViewing from "react-native-image-viewing";
 import * as mime from 'react-native-mime-types';
-import { ICarouselInstance } from "react-native-reanimated-carousel";
-import ModalLoading from "../modalLoading";
+import Toast from "react-native-toast-message";
 import Skeleton from "../skeleton";
 import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
@@ -25,15 +26,36 @@ type Props = {
   idStorage: string
 }

+function getFileIconColor(ext: string): string {
+   const e = ext.toLowerCase()
+   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(e)) return '#339AF0'
+   if (e === 'pdf') return '#F03E3E'
+   if (['doc', 'docx'].includes(e)) return '#1C7ED6'
+   if (['xls', 'xlsx', 'csv'].includes(e)) return '#2F9E44'
+   if (['ppt', 'pptx'].includes(e)) return '#F97316'
+   if (['zip', 'rar', '7z'].includes(e)) return '#E8590C'
+   return '#868E96'
+}
+
+function getFileIcon(ext: string): string {
+   const e = ext.toLowerCase()
+   if (isImageFile(e)) return 'image-outline'
+   if (e === 'pdf') return 'file-pdf-box'
+   if (['doc', 'docx'].includes(e)) return 'file-word-outline'
+   if (['xls', 'xlsx', 'csv'].includes(e)) return 'file-excel-outline'
+   if (['ppt', 'pptx'].includes(e)) return 'file-powerpoint-outline'
+   if (['zip', 'rar', '7z'].includes(e)) return 'folder-zip-outline'
+   return 'file-document-outline'
+}
+
 export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
   const { colors } = useTheme();
-   const ref = React.useRef<ICarouselInstance>(null);
-   const width = Dimensions.get("window").width;
   const [data, setData] = useState<Props[]>([])
   const { token, decryptToken } = useAuthSession()
   const { id } = useLocalSearchParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
   const [loadingOpen, setLoadingOpen] = useState(false)
+   const [previewFile, setPreviewFile] = useState<Props | null>(null)

   async function handleLoad(loading: boolean) {
      try {
@@ -49,113 +71,119 @@ export default function FileDivisionDetail({ refreshing }: { refreshing: boolean
   }

   useEffect(() => {
-      if (refreshing)
-         handleLoad(false)
+      if (refreshing) handleLoad(false)
   }, [refreshing])

   useEffect(() => {
      handleLoad(true)
   }, [])

-
-   const openFile = (item: Props) => {
-      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') {
-               // open with android intent
-               await startActivityAsync(
-                  'android.intent.action.VIEW',
-                  {
-                     data: contentURL,
-                     flags: 1,
-                     type: mimeType as string,
-                  }
-               );
-               // or
-               // Sharing.shareAsync(localPath);
-
-            } else if (Platform.OS == 'ios') {
-               Sharing.shareAsync(localPath);
-            }
-         } catch (error) {
-            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
-         } finally {
-            if (Platform.OS == 'android') setLoadingOpen(false)
+   async function openExternal(item: Props) {
+      try {
+         setLoadingOpen(true)
+         const remoteUrl = `${ConstEnv.url_storage}/files/${item.idStorage}`
+         const fileName = `${item.name}.${item.extension}`
+         const localPath = `${FileSystem.documentDirectory}/${fileName}`
+         const dl = await FileSystem.downloadAsync(remoteUrl, localPath)
+         if (dl.status !== 200) throw new Error('Download failed')
+         const contentURL = await FileSystem.getContentUriAsync(dl.uri)
+         const mimeType = mime.lookup(fileName) as string
+         if (Platform.OS === 'android') {
+            await startActivityAsync('android.intent.action.VIEW', { data: contentURL, flags: 1, type: mimeType })
+         } else {
+            await Sharing.shareAsync(localPath)
         }
-      });
-   };
+      } catch {
+         Toast.show({ type: 'error', text1: 'Gagal membuka file' })
+      } finally {
+         setLoadingOpen(false)
+      }
+   }

+   function handleFilePress(item: Props) {
+      if (isImageFile(item.extension.toLowerCase())) {
+         setPreviewFile(item)
+      } else {
+         openExternal(item)
+      }
+   }

   return (
      <View style={[Styles.mb15]}>
-         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
         <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
-         {
-            loading ?
-               <View style={[Styles.rowSpaceBetween]}>
-                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-               </View>
-               :
-               data.length > 0 ?
-                  <View style={[Styles.rowItemsCenter]}>
-                     {
-                        data.map((item, index) => (
-                           <Pressable style={[Styles.mr05, { width: '24%' }]} key={index} onPress={() => openFile(item)}>
-                              <View style={{ alignItems: 'center' }}>
-                                 <View style={[Styles.wrapPaper, { alignItems: 'center', backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
-                                    <Feather name="file-text" size={50} color={colors.text} style={Styles.mr05} />
-                                 </View>
-                              </View>
-                              <View style={[Styles.contentItemCenter]}>
-                                 <Text style={[Styles.textMediumNormal, Styles.w90, { textAlign: 'center' }]} numberOfLines={1}>{item.name}.{item.extension}</Text>
-                              </View>
-                           </Pressable>
-                        ))
-                     }
-                  </View>
-                  // <Carousel
-                  //    ref={ref}
-                  //    width={width * 1.1}
-                  //    height={115}
-                  //    data={data}
-                  //    loop={true}
-                  //    autoPlay={false}
-                  //    autoPlayReverse={false}
-                  //    pagingEnabled={true}
-                  //    snapEnabled={true}
-                  //    vertical={false}
-                  //    mode="parallax"
-                  //    modeConfig={{
-                  //       parallaxScrollingScale: 1,
-                  //       parallaxScrollingOffset: 310,
-                  //       parallaxAdjacentItemScale: 1,
-                  //    }}
-                  //    style={{ width:'100%' }}
-                  //    renderItem={({ index }) => (
-                  //       <View style={{ width: '27%' }}>
-                  //          <View style={{ alignItems: 'center' }}>
-                  //             <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-                  //                <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
-                  //             </View>
-                  //          </View>
-                  //          <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
-                  //       </View>
+         {loading ? (
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+               <Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
+               <Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
+               <Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
+            </View>
+         ) : data.length > 0 ? (
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
+               {data.map((item, index) => {
+                  const iconColor = getFileIconColor(item.extension)
+                  const iconName = getFileIcon(item.extension)
+                  return (
+                     <Pressable
+                        key={index}
+                        onPress={() => handleFilePress(item)}
+                        style={({ pressed }) => ({
+                           flexDirection: 'row', alignItems: 'center', gap: 10,
+                           paddingHorizontal: 12, paddingVertical: 10,
+                           borderRadius: 8, borderWidth: 1,
+                           backgroundColor: pressed ? colors.icon + '08' : colors.card,
+                           borderColor: colors.icon + '20',
+                           width: 160,
+                        })}
+                     >
+                        <View style={{
+                           width: 40, height: 40, borderRadius: 8,
+                           backgroundColor: iconColor + '20',
+                           alignItems: 'center', justifyContent: 'center',
+                           flexShrink: 0,
+                        }}>
+                           <MaterialCommunityIcons name={iconName as any} size={22} color={iconColor} />
+                        </View>
+                        <View style={{ flexShrink: 1 }}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.text }]} numberOfLines={1}>
+                              {item.name}
+                           </Text>
+                           <Text style={[Styles.textInformation, { color: colors.dimmed, marginTop: 2 }]}>
+                              {item.extension.toUpperCase()}
+                           </Text>
+                        </View>
+                     </Pressable>
+                  )
+               })}
+            </ScrollView>
+         ) : (
+            <View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
+               <MaterialCommunityIcons name="file-document-outline" size={28} color={colors.dimmed} />
+               <Text style={[Styles.textDefault, { color: colors.dimmed }]}>Belum ada dokumen</Text>
+            </View>
+         )}

-                  //    )}
-                  // />
-                  :
-                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
-         }
+         <ImageViewing
+            images={[{ uri: `${ConstEnv.url_storage}/files/${previewFile?.idStorage}` }]}
+            imageIndex={0}
+            visible={previewFile !== null}
+            onRequestClose={() => setPreviewFile(null)}
+            doubleTapToZoomEnabled
+            HeaderComponent={() => (
+               <View style={Styles.headerModalViewImg}>
+                  <Pressable onPress={() => setPreviewFile(null)}>
+                     <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
+                  </Pressable>
+                  <Pressable onPress={() => previewFile && openExternal(previewFile)} disabled={loadingOpen}>
+                     <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
+                  </Pressable>
+               </View>
+            )}
+            FooterComponent={() => (
+               <View style={{ paddingBottom: 20, paddingHorizontal: 16, alignItems: 'center' }}>
+                  <Text style={{ color: 'white', fontSize: 16 }}>{previewFile?.name}.{previewFile?.extension}</Text>
+               </View>
+            )}
+         />
      </View>
   )
 }
--- a/components/division/taskDivisionDetail.tsx
+++ b/components/division/taskDivisionDetail.tsx
@@ -2,7 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Feather } from "@expo/vector-icons";
+import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Pressable, View } from "react-native";
@@ -90,7 +90,10 @@ export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean
                  //    )}
                  // />
                  :
-                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
+                  <View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
+                     <MaterialCommunityIcons name="clipboard-check-outline" size={28} color={colors.dimmed} />
+                     <Text style={[Styles.textDefault, { color: colors.dimmed }]}>Tidak ada tugas hari ini</Text>
+                  </View>
         }
      </View>
   )
--- a/lib/api/discussion.api.ts
+++ b/lib/api/discussion.api.ts
@@ -105,7 +105,14 @@ export const apiSendDiscussionCommentar = async ({ data, id }: { data: { user: s
   return response.data;
 };

-export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
+export const apiSendDiscussionCommentarWithFile = async (id: string, data: FormData) => {
+   const response = await api.post(`/mobile/discussion/${id}/comment`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string, filesToRemove?: string[] }, id: string }) => {
   const response = await api.put(`/mobile/discussion/${id}/comment`, data)
   return response.data;
 };
Author	SHA1	Message	Date
amaliadwiy	0ff348891d	fix: perbaiki warna ikon tombol send agar terlihat pada tema dark	2026-06-10 15:22:30 +08:00
amaliadwiy	047875ab70	feat: tambah empty state dengan ikon pada section tugas, dokumen, dan diskusi divisi	2026-06-10 15:18:20 +08:00
amaliadwiy	38eff16c3a	feat: redesign dokumen terkini dan samakan perilaku buka file dengan diskusi umum	2026-06-10 14:59:51 +08:00
amaliadwiy	21ff57366c	fix: sinkronkan props file dan loading pada input komentar diskusi umum	2026-06-10 14:29:03 +08:00
amaliadwiy	589ac54c5d	feat: tambah loading state, perbaiki posisi button close, dan label mengirim pada input komentar	2026-06-10 14:28:56 +08:00
amaliadwiy	1c495541b5	feat: redesign input komentar diskusi divisi menggunakan komponen messaging app	2026-06-10 14:28:52 +08:00