feat: redesign section progress, report, link, file, dan cancel pada project & division/task

- SectionProgress: progress bar animated, badge persentase, label status, task count
- SectionReport: header ikon, left accent border, TextExpandable dengan label Indonesia
- SectionLink: tap langsung buka URL, ikon per domain, long press untuk hapus
- SectionFile: icon container konsisten 30×30 di semua section
- SectionCancel: card subtle dengan warna error, konsisten dengan visual language baru
- TextExpandable: fix bug show/hide tidak muncul setelah content diupdate
- Tambah 14 style class baru di Styles.ts untuk menggantikan inline style
- Terapkan semua perubahan ke fitur division/task
- Fix menu "Edit Tugas" di sectionTanggalTugasTask yang terpotong karena overflow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-06 16:22:52 +08:00
parent eccfe29387
commit b61cd51628
16 changed files with 736 additions and 510 deletions

View File

@@ -9,10 +9,10 @@ import { useEffect, useState } from "react";
import { View } from "react-native";
import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux";
import ModalConfirmation from "../ModalConfirmation";
import DrawerBottom from "../drawerBottom";
import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
import MenuItemRow from "../menuItemRow";
import ModalConfirmation from "../ModalConfirmation";
import ModalSelect from "../modalSelect";
import SkeletonTask from "../skeletonTask";
import Text from "../Text";
@@ -74,7 +74,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
} else {
Toast.show({ type: 'small', text1: response.message, })
}
} catch (error : any ) {
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal mengubah data"
@@ -112,7 +112,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
} else {
Toast.show({ type: 'small', text1: response.message, })
}
} catch (error : any ) {
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal menghapus data"
@@ -127,7 +127,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
<>
<View style={[Styles.mb15, Styles.mt10]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -165,22 +165,16 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={
<MaterialCommunityIcons
name="clock-time-three-outline"
color={colors.text}
size={25}
/>
}
title="Detail Waktu"
onPress={() => {
setModal(false);
setTimeout(() => {
setModalDetail(true)
}, 600)
}}
/>
{((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision) && (
<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="file-multiple-outline" color={colors.text} size={25} />}
title="File Tugas"
@@ -189,52 +183,35 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
router.push(`/division/${id}/task/${detail}/tugas-file/${tugas.id}?member=${isMemberDivision}`)
}}
/>
{
(entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
?
<>
<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(`./update/${tugas.id}`)
}}
/>
</>
:
<></>
}
<MenuItemRow
icon={<MaterialCommunityIcons name="clock-time-three-outline" color={colors.text} size={25} />}
title="Detail Waktu"
onPress={() => {
setModal(false);
setTimeout(() => setModalDetail(true), 600)
}}
/>
</View>
{
(entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
?
<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>
:
<></>
}
{((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision) && (
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit Tugas"
onPress={() => {
setModal(false)
router.push(`./update/${tugas.id}`)
}}
/>
<MenuItemRow
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
title="Hapus Tugas"
onPress={() => {
setModal(false)
setTimeout(() => setShowDeleteModal(true), 600)
}}
/>
</View>
)}
</DrawerBottom>
<ModalConfirmation