wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tambah fitur approval task pada project dan divisi

Browse Source 
- tambah komponen ModalRiwayatApproval dan ModalTolakApproval
- update itemSectionTanggalTugas untuk mendukung status menunggu persetujuan
- update sectionTanggalTugas (project) dan sectionTanggalTugasTask (divisi) dengan alur approval lengkap
- tambah API approval project task dan division task di lib/api.ts
- tambah toggle approver di headerMemberDetail dan tampilkan badge approver di detail member
- update carouselHome untuk dispatch isApprover ke Redux
- update drawerBottom untuk mendukung scroll pada modal
- ganti label 'Belum dimulai' menjadi 'Belum ada tugas yang diselesaikan'
This commit is contained in:
amaliadwiy
2026-05-07 16:04:02 +08:00
parent d2e1663f9f
commit e48456ea7f
13 changed files with 811 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
components/ModalRiwayatApproval.tsx Normal file
View File

@@ -0,0 +1,140 @@
import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import { useRef, useState } from "react"
import { ScrollView, View } from "react-native"
import DrawerBottom from "./drawerBottom"
import Skeleton from "./skeleton"
import Text from "./Text"
type ApprovalRecord = {
id: string
status: number // 0=pending, 1=approved, 2=rejected
note?: string
submitter: { name: string }
approver?: { name: string }
createdAt: string
}
type Props = {
isVisible: boolean
setVisible: (value: boolean) => void
data: ApprovalRecord[]
loading: boolean
}
function ApprovalStatusBadge({ status }: { status: number }) {
const { colors } = useTheme()
const config =
status === 1
? { label: 'Disetujui', color: colors.success }
: status === 2
? { label: 'Ditolak', color: colors.error }
: { label: 'Menunggu', color: '#FFA94D' }
return (
<View style={{
backgroundColor: config.color + '20',
borderRadius: 20,
paddingHorizontal: 10,
paddingVertical: 3,
alignSelf: 'flex-start',
}}>
<Text style={[Styles.textSmallSemiBold, { color: config.color }]}>
{config.label}
</Text>
</View>
)
}
export default function ModalRiwayatApproval({ isVisible, setVisible, data, loading }: Props) {
const { colors } = useTheme()
const arrSkeleton = Array.from({ length: 3 })
const scrollRef = useRef<ScrollView>(null)
const [scrollOffset, setScrollOffset] = useState(0)
return (
<DrawerBottom
isVisible={isVisible}
setVisible={setVisible}
title="Riwayat Persetujuan"
animation="slide"
height={60}
scrollOffset={scrollOffset}
scrollTo={(p) => scrollRef.current?.scrollTo(p)}
>
<ScrollView
ref={scrollRef}
showsVerticalScrollIndicator={false}
onScroll={({ nativeEvent }) => setScrollOffset(nativeEvent.contentOffset.y)}
scrollEventThrottle={16}
>
{loading ? (
arrSkeleton.map((_, i) => (
<View key={i} style={[Styles.mb10]}>
<Skeleton width={100} widthType="percent" height={80} borderRadius={10} />
</View>
))
) : data.length > 0 ? (
data.map((item, index) => (
<View
key={item.id}
style={{
borderWidth: 1,
borderColor: colors.icon + '30',
borderRadius: 10,
padding: 12,
marginBottom: 10,
}}
>
{/* Status + tanggal */}
<View style={[Styles.rowItemsCenter, { justifyContent: 'space-between', marginBottom: 8 }]}>
<ApprovalStatusBadge status={item.status} />
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>
{item.createdAt}
</Text>
</View>
{/* Pengaju */}
<View style={[Styles.rowItemsCenter, Styles.mb05]}>
<MaterialCommunityIcons name="account-arrow-up-outline" size={15} color={colors.dimmed} style={{ marginRight: 6 }} />
<Text style={[Styles.textMediumSemiBold, { color: colors.dimmed }]}>Diajukan Oleh: </Text>
<Text style={[Styles.textMediumNormal]}>{item.submitter.name}</Text>
</View>
{/* Approver */}
<View style={[Styles.rowItemsCenter, item.note ? Styles.mb05 : {}]}>
<MaterialCommunityIcons name="account-check-outline" size={15} color={colors.dimmed} style={{ marginRight: 6 }} />
<Text style={[Styles.textMediumSemiBold, { color: colors.dimmed }]}>Disetujui Oleh: </Text>
<Text style={[Styles.textMediumNormal]}>
{item.approver?.name ?? '-'}
</Text>
</View>
{/* Catatan penolakan */}
{item.note && (
<View style={{
backgroundColor: colors.error + '12',
borderRadius: 8,
padding: 8,
marginTop: 4,
}}>
<Text style={[Styles.textSmallSemiBold, { color: colors.error, marginBottom: 2 }]}>
Alasan Penolakan
</Text>
<Text style={[Styles.textMediumNormal, { color: colors.text }]}>
{item.note}
</Text>
</View>
)}
</View>
))
) : (
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>
Belum ada riwayat persetujuan
</Text>
)}
</ScrollView>
</DrawerBottom>
)
}

78
components/ModalTolakApproval.tsx Normal file
View File

@@ -0,0 +1,78 @@
import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { useState } from "react"
import { TouchableOpacity, View } from "react-native"
import DrawerBottom from "./drawerBottom"
import { InputForm } from "./inputForm"
import Text from "./Text"
type Props = {
isVisible: boolean
setVisible: (value: boolean) => void
onTolak: (note: string) => void
loading?: boolean
}
export default function ModalTolakApproval({ isVisible, setVisible, onTolak, loading }: Props) {
const { colors } = useTheme()
const [note, setNote] = useState('')
const [error, setError] = useState(false)
function handleClose(value: boolean) {
setNote('')
setError(false)
setVisible(value)
}
function handleSubmit() {
if (!note.trim()) {
setError(true)
return
}
onTolak(note.trim())
setNote('')
setError(false)
}
return (
<DrawerBottom
isVisible={isVisible}
setVisible={handleClose}
title="Tolak Tugas"
animation="slide"
height={45}
keyboard
>
<View style={{ flex: 1 }}>
<InputForm
label="Alasan Penolakan"
placeholder="Tuliskan alasan penolakan..."
type="default"
multiline
bg="transparent"
value={note}
onChange={setNote}
error={error}
errorText="Alasan penolakan wajib diisi"
required
/>
</View>
<TouchableOpacity
onPress={handleSubmit}
disabled={loading}
style={{
backgroundColor: loading ? colors.error + '60' : colors.error,
borderRadius: 30,
paddingVertical: 10,
alignItems: 'center',
marginTop: 8,
}}
>
<Text style={[Styles.textDefaultSemiBold, Styles.cWhite]}>
{loading ? 'Memproses...' : 'Tolak Tugas'}
</Text>
</TouchableOpacity>
</DrawerBottom>
)
}

7
components/drawerBottom.tsx
View File

@@ -14,9 +14,11 @@ type Props = {
height?: number
backdropPressable?: boolean
keyboard?: boolean
scrollOffset?: number
scrollTo?: (p: any) => void
}
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false }: Props) {
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false, scrollOffset, scrollTo }: Props) {
const tinggiScreen = Dimensions.get("window").height;
const { colors } = useTheme();
const tinggiInput = height != undefined ? height : 25
@@ -38,6 +40,9 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
backdropTransitionOutTiming={500}
useNativeDriverForBackdrop={true}
propagateSwipe={true}
scrollTo={scrollTo}
scrollOffset={scrollOffset}
scrollOffsetMax={200}
>
{
keyboard ?

2
components/home/carouselHome.tsx
View File

@@ -36,7 +36,7 @@ export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
async function handleUser() {
const hasil = await decryptToken(String(token?.current))
const response = await apiGetProfile({ id: hasil })
dispatch(setEntityUser({ role: response.data.idUserRole, admin: false }))
dispatch(setEntityUser({ role: response.data.idUserRole, admin: false, isApprover: response.data.isApprover ?? false }))
}
useEffect(() => {

2
components/home/carouselHome2.tsx
View File

@@ -59,7 +59,7 @@ export default function CaraouselHome2({ refreshing }: { refreshing: boolean })
// Sync User Role to Redux
useEffect(() => {
if (profile) {
dispatch(setEntityUser({ role: profile.idUserRole, admin: false }))
dispatch(setEntityUser({ role: profile.idUserRole, admin: false, isApprover: profile.isApprover ?? false }))
}
}, [profile, dispatch])

26
components/itemSectionTanggalTugas.tsx
View File

@@ -11,7 +11,7 @@ type FileItem = {
}
type Props = {
done?: boolean
status?: number // 0=belum selesai, 1=selesai, 2=menunggu persetujuan
title: string
dateStart: string
dateEnd: string
@@ -64,7 +64,15 @@ function getFileIcon(extension: string): keyof typeof MaterialCommunityIcons.gly
return 'file-outline'
}
export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, files = [], onPress }: Props) {
const AMBER = '#FFA94D'
function getStatusStyle(status: number | undefined, successColor: string, dimmed: string) {
if (status === 1) return { accent: successColor, badge: successColor + '25', text: successColor, label: 'Selesai' }
if (status === 2) return { accent: AMBER, badge: AMBER + '25', text: AMBER, label: 'Menunggu Persetujuan' }
return { accent: dimmed + '80', badge: dimmed + '18', text: dimmed, label: 'Belum Selesai' }
}
export default function ItemSectionTanggalTugas({ status, title, dateStart, dateEnd, files = [], onPress }: Props) {
const { colors, activeTheme } = useTheme()
const [containerWidth, setContainerWidth] = useState(0)
@@ -77,7 +85,7 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
const dimmed = colors.dimmed.slice(0, 7)
const successColor = activeTheme === 'dark' ? '#51CF66' : colors.success
const accentColor = done === true ? successColor : dimmed + '80'
const statusStyle = getStatusStyle(status, successColor, dimmed)
return (
<Pressable
@@ -93,8 +101,8 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
}}
>
{/* Accent bar kiri */}
{done !== undefined && (
<View style={{ width: 4, backgroundColor: accentColor }} />
{status !== undefined && (
<View style={{ width: 4, backgroundColor: statusStyle.accent }} />
)}
{/* Konten */}
@@ -103,16 +111,16 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
{/* Judul + badge status */}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
<Text style={[Styles.textDefault, { flex: 1, marginRight: 8 }]}>{title}</Text>
{done !== undefined && (
{status !== undefined && (
<View style={{
backgroundColor: done ? successColor + '25' : dimmed + '18',
backgroundColor: statusStyle.badge,
borderRadius: 20,
paddingHorizontal: 8,
paddingVertical: 3,
alignSelf: 'flex-start',
}}>
<Text style={[Styles.textSmallSemiBold, { color: done ? successColor : colors.dimmed }]}>
{done ? 'Selesai' : 'Belum Selesai'}
<Text style={[Styles.textSmallSemiBold, { color: statusStyle.text }]}>
{statusStyle.label}
</Text>
</View>
)}

71
components/member/headerMemberDetail.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles"
import { apiDeleteUser } from "@/lib/api"
import { apiDeleteUser, apiToggleApprover } from "@/lib/api"
import { setUpdateMember } from "@/lib/memberSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
@@ -16,14 +16,17 @@ import MenuItemRow from "../menuItemRow"
type Props = {
active: any,
id: string
id: string,
isApprover: boolean,
}
export default function HeaderRightMemberDetail({ active, id }: Props) {
export default function HeaderRightMemberDetail({ active, id, isApprover }: Props) {
const { token, decryptToken } = useAuthSession()
const [isVisible, setVisible] = useState(false)
const update = useSelector((state: any) => state.memberUpdate)
const [showModal, setShowModal] = useState(false)
const entityUser = useSelector((state: any) => state.user)
const [showModalActive, setShowModalActive] = useState(false)
const [showModalApprover, setShowModalApprover] = useState(false)
const { colors } = useTheme();
const dispatch = useDispatch()
@@ -37,17 +40,36 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
} else {
Toast.show({ type: 'small', text1: response.message, })
}
} catch (error : any ) {
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal mengupdate data"
Toast.show({ type: 'small', text1: message })
} finally {
setVisible(false)
}
}
async function handleToggleApprover() {
try {
const hasil = await decryptToken(String(token?.current))
const response = await apiToggleApprover({ user: hasil, isApprover: !isApprover }, id)
if (response.success) {
Toast.show({ type: 'small', text1: response.message })
dispatch(setUpdateMember(!update))
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal mengupdate data"
Toast.show({ type: 'small', text1: message })
} finally {
setShowModalApprover(false)
}
}
const canManageApprover = ['supadmin', 'developer'].includes(entityUser.role)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
@@ -55,12 +77,10 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
title={active ? "Non Aktifkan" : "Aktifkan"}
title={active ? "Nonaktifkan" : "Aktifkan"}
onPress={() => {
setVisible(false)
setTimeout(() => {
setShowModal(true)
}, 600)
setTimeout(() => setShowModalActive(true), 600)
}}
/>
<MenuItemRow
@@ -71,18 +91,39 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
router.push(`/member/edit/${id}`)
}}
/>
{canManageApprover && (
<MenuItemRow
icon={<MaterialCommunityIcons name="shield-check-outline" color={colors.text} size={25} />}
title={isApprover ? "Revoke Approver" : "Jadikan Approver"}
color={colors.text}
onPress={() => {
setVisible(false)
setTimeout(() => setShowModalApprover(true), 600)
}}
/>
)}
</View>
</DrawerBottom>
<ModalConfirmation
visible={showModal}
visible={showModalActive}
title="Konfirmasi"
message={active ? 'Apakah anda yakin ingin menonaktifkan user?' : 'Apakah anda yakin ingin mengaktifkan user?'}
message={active ? 'Apakah anda yakin ingin menonaktifkan anggota ini?' : 'Apakah anda yakin ingin mengaktifkan anggota ini?'}
onConfirm={() => {
setShowModal(false)
setShowModalActive(false)
handleActive()
}}
onCancel={() => setShowModal(false)}
onCancel={() => setShowModalActive(false)}
confirmText="Konfirmasi"
cancelText="Batal"
/>
<ModalConfirmation
visible={showModalApprover}
title="Konfirmasi"
message={isApprover ? 'Apakah anda yakin ingin mencabut status approver user ini?' : 'Apakah anda yakin ingin menjadikan user ini sebagai approver?'}
onConfirm={handleToggleApprover}
onCancel={() => setShowModalApprover(false)}
confirmText="Konfirmasi"
cancelText="Batal"
/>

354
components/project/sectionTanggalTugas.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles";
import { apiDeleteProjectTask, apiGetProjectOne, apiUpdateStatusProjectTask } from "@/lib/api";
import { apiApproveRejectProjectTask, apiDeleteProjectTask, apiGetProjectOne, apiGetProjectTaskApprovals, apiSubmitProjectTask } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
@@ -13,7 +13,8 @@ import DrawerBottom from "../drawerBottom";
import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
import MenuItemRow from "../menuItemRow";
import ModalConfirmation from "../ModalConfirmation";
import ModalSelect from "../modalSelect";
import ModalRiwayatApproval from "../ModalRiwayatApproval";
import ModalTolakApproval from "../ModalTolakApproval";
import SkeletonTask from "../skeletonTask";
import Text from "../Text";
import ModalListDetailTugasProject from "./modalListDetailTugasProject";
@@ -22,41 +23,52 @@ type Props = {
id: string;
title: string;
desc: string;
status: 1;
status: number;
dateStart: string;
dateEnd: string;
createdAt: string;
files?: { name: string; extension: string }[];
};
type ApprovalRecord = {
id: string
status: number
note?: string
submitter: { name: string }
approver?: { name: string }
createdAt: string
}
export default function SectionTanggalTugasProject({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user)
const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate)
const [isModal, setModal] = useState(false);
const [isSelect, setSelect] = useState(false);
const { token, decryptToken } = useAuthSession();
const [modalDetail, setModalDetail] = useState(false)
const [modalRiwayat, setModalRiwayat] = useState(false)
const [modalTolak, setModalTolak] = useState(false)
const [modalKonfirmasiSetujui, setModalKonfirmasiSetujui] = useState(false)
const [modalPersetujuan, setModalPersetujuan] = useState(false)
const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props[]>([]);
const [loading, setLoading] = useState(true)
const [loadingAction, setLoadingAction] = useState(false)
const [loadingRiwayat, setLoadingRiwayat] = useState(false)
const [riwayatData, setRiwayatData] = useState<ApprovalRecord[]>([])
const arrSkeleton = Array.from({ length: 5 });
const [tugas, setTugas] = useState({
id: '',
status: 0,
})
const [tugas, setTugas] = useState({ id: '', status: 0 })
const [showDeleteModal, setShowDeleteModal] = useState(false)
const isApprover = entityUser.isApprover || ['supadmin', 'developer'].includes(entityUser.role)
const isAdmin = entityUser.role !== 'user' && entityUser.role !== 'coadmin'
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
const hasil = await decryptToken(String(token?.current));
const response = await apiGetProjectOne({
user: hasil,
cat: "task",
id: id,
});
const response = await apiGetProjectOne({ user: hasil, cat: "task", id: id });
setData(response.data);
} catch (error) {
console.error(error);
@@ -65,178 +77,268 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
}
}
useEffect(() => {
handleLoad(false);
}, [update.task]);
useEffect(() => { handleLoad(false) }, [update.task]);
useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing]);
useEffect(() => { handleLoad(true) }, []);
useEffect(() => {
if (refreshing)
handleLoad(false);
}, [refreshing]);
useEffect(() => {
handleLoad(true);
}, []);
async function handleUpdate(status: number) {
async function handleLoadRiwayat() {
try {
const hasil = await decryptToken(String(token?.current));
const response = await apiUpdateStatusProjectTask({
user: hasil,
idProject: id,
status: status,
}, tugas.id);
setLoadingRiwayat(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetProjectTaskApprovals({ user: hasil, id: tugas.id })
setRiwayatData(response.data ?? [])
} catch (error) {
console.error(error)
} finally {
setLoadingRiwayat(false)
}
}
async function handleSubmitAjukan() {
try {
setLoadingAction(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiSubmitProjectTask({ user: hasil, id: tugas.id })
if (response.success) {
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
setSelect(false);
Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
Toast.show({ type: 'small', text1: 'Berhasil mengajukan task untuk persetujuan' })
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal mengubah data"
const message = error?.response?.data?.message || "Gagal mengajukan persetujuan"
Toast.show({ type: 'small', text1: message })
} finally {
setLoadingAction(false)
setModal(false)
}
}
async function handleSetujui() {
try {
setLoadingAction(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiApproveRejectProjectTask({ user: hasil, id: tugas.id, action: 'approve' })
if (response.success) {
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Tugas berhasil disetujui' })
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
const message = error?.response?.data?.message || "Gagal menyetujui tugas"
Toast.show({ type: 'small', text1: message })
} finally {
setLoadingAction(false)
setModalKonfirmasiSetujui(false)
}
}
async function handleTolak(note: string) {
try {
setLoadingAction(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiApproveRejectProjectTask({ user: hasil, id: tugas.id, action: 'reject', note })
if (response.success) {
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Tugas berhasil ditolak' })
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
const message = error?.response?.data?.message || "Gagal menolak tugas"
Toast.show({ type: 'small', text1: message })
} finally {
setLoadingAction(false)
setModalTolak(false)
}
}
async function handleDelete() {
try {
const hasil = await decryptToken(String(token?.current));
const response = await apiDeleteProjectTask({
user: hasil,
idProject: id,
}, tugas.id);
const response = await apiDeleteProjectTask({ user: hasil, idProject: id }, tugas.id);
if (response.success) {
dispatch(setUpdateProject({ ...update, progress: !update.progress, task: !update.task }))
setModal(false);
Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
Toast.show({ type: 'small', text1: 'Berhasil menghapus data' })
}
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal menghapus data"
Toast.show({ type: 'small', text1: message })
}
}
const canTakeAction = member || isAdmin
const showAjukan = (member || isApprover) && tugas.status === 0 && status !== 3
const showApproverActions = isApprover && tugas.status === 2
return (
<>
<View style={[Styles.mb15, Styles.mt10]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
Tanggal & Tugas
</Text>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
<View>
{
loading ?
arrSkeleton.map((item, index) => {
return (
<SkeletonTask key={index} />
)
})
:
data.length > 0
?
data.map((item, index) => {
return (
<ItemSectionTanggalTugas
key={index}
done={item.status === 1}
title={item.title}
dateStart={item.dateStart}
dateEnd={item.dateEnd}
files={item.files ?? []}
onPress={() => {
setTugas({ id: item.id, status: item.status })
setModal(true)
}}
/>
);
})
:
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
{loading
? arrSkeleton.map((_, index) => <SkeletonTask key={index} />)
: data.length > 0
? data.map((item, index) => (
<ItemSectionTanggalTugas
key={index}
status={item.status}
title={item.title}
dateStart={item.dateStart}
dateEnd={item.dateEnd}
files={item.files ?? []}
onPress={() => {
setTugas({ id: item.id, status: item.status })
setModal(true)
}}
/>
))
: <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
}
</View>
</View>
<DrawerBottom
animation="slide"
isVisible={isModal}
setVisible={setModal}
title="Menu"
>
<View style={Styles.rowItemsCenter}>
{(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)
}}
/>
)}
{/* Drawer menu */}
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu" height={40}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{/* Baris 1 — selalu tampil */}
<MenuItemRow
icon={<MaterialCommunityIcons name="file-multiple-outline" color={colors.text} size={25} />}
title="File Tugas"
onPress={() => {
setModal(false);
router.push(`/project/${id}/tugas-file/${tugas.id}?member=${member}`);
setModal(false)
router.push(`/project/${id}/tugas-file/${tugas.id}?member=${member}`)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="clock-time-three-outline" color={colors.text} size={25} />}
title="Detail Waktu"
onPress={() => {
setModal(false);
setModal(false)
setTimeout(() => setModalDetail(true), 600)
}}
/>
</View>
{(member || (entityUser.role != "user" && entityUser.role != "coadmin")) && status != 3 && (
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
title="Riwayat"
onPress={() => {
setModal(false)
handleLoadRiwayat()
setTimeout(() => setModalRiwayat(true), 600)
}}
/>
{/* Separator antar baris */}
{(showAjukan || showApproverActions || (canTakeAction && isAdmin && status !== 3)) && (
<View style={{ width: '100%', height: 15 }} />
)}
{/* Baris 2 — semua aksi kondisional dalam satu baris */}
{showAjukan && (
<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={<Ionicons name="trash-outline" color={colors.text} size={25} />}
title="Hapus Tugas"
icon={<MaterialCommunityIcons name="check-circle-outline" color={colors.text} size={25} />}
title="Ajukan Selesai"
disabled={loadingAction}
onPress={() => {
setModal(false)
setTimeout(() => setShowDeleteModal(true), 600)
setTimeout(() => handleSubmitAjukan(), 600)
}}
/>
</View>
)}
)}
{showApproverActions && (
<MenuItemRow
icon={<MaterialCommunityIcons name="shield-check-outline" color={colors.text} size={25} />}
title="Persetujuan"
disabled={loadingAction}
onPress={() => {
setModal(false)
setTimeout(() => setModalPersetujuan(true), 600)
}}
/>
)}
{canTakeAction && isAdmin && status !== 3 && (
<>
<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={<Ionicons name="trash-outline" color={colors.text} size={25} />}
title="Hapus Tugas"
onPress={() => {
setModal(false)
setTimeout(() => setShowDeleteModal(true), 600)
}}
/>
</>
)}
</View>
</DrawerBottom>
{/* Drawer persetujuan */}
<DrawerBottom animation="slide" isVisible={modalPersetujuan} setVisible={setModalPersetujuan} title="Persetujuan Tugas" height={25}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<MenuItemRow
icon={<MaterialCommunityIcons name="check-circle" color={colors.success} size={25} />}
title="Setujui"
color={colors.success}
disabled={loadingAction}
onPress={() => {
setModalPersetujuan(false)
setTimeout(() => setModalKonfirmasiSetujui(true), 600)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="close-circle-outline" color={colors.error} size={25} />}
title="Tolak"
color={colors.error}
disabled={loadingAction}
onPress={() => {
setModalPersetujuan(false)
setTimeout(() => setModalTolak(true), 600)
}}
/>
</View>
</DrawerBottom>
<ModalConfirmation
visible={showDeleteModal}
title="Konfirmasi"
message="Apakah anda yakin ingin menghapus data ini?"
onConfirm={() => {
setShowDeleteModal(false)
handleDelete()
}}
onConfirm={() => { setShowDeleteModal(false); handleDelete() }}
onCancel={() => setShowDeleteModal(false)}
confirmText="Hapus"
cancelText="Batal"
/>
<ModalSelect
category="status-task"
close={() => { setSelect(false) }}
onSelect={(value) => {
handleUpdate(Number(value.val))
}}
title="Status"
open={isSelect}
valChoose={String(tugas.status)}
<ModalConfirmation
visible={modalKonfirmasiSetujui}
title="Konfirmasi"
message="Apakah anda yakin ingin menyetujui tugas ini?"
onConfirm={handleSetujui}
onCancel={() => setModalKonfirmasiSetujui(false)}
confirmText="Setujui"
cancelText="Batal"
/>
<ModalRiwayatApproval
isVisible={modalRiwayat}
setVisible={setModalRiwayat}
data={riwayatData}
loading={loadingRiwayat}
/>
<ModalTolakApproval
isVisible={modalTolak}
setVisible={setModalTolak}
onTolak={handleTolak}
loading={loadingAction}
/>
<ModalListDetailTugasProject

2
components/sectionProgress.tsx
View File

@@ -21,7 +21,7 @@ export default function SectionProgress({ progress, doneCount, totalCount }: Pro
? 'Selesai'
: progress > 0
? 'Sedang berlangsung'
: 'Belum dimulai';
: 'Belum ada tugas yang diselesaikan';
useEffect(() => {
animatedWidth.setValue(0);

359
components/task/sectionTanggalTugasTask.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles";
import { apiDeleteTaskTugas, apiGetTaskOne, apiUpdateStatusTaskDivision } from "@/lib/api";
import { apiApproveRejectTaskTugas, apiDeleteTaskTugas, apiGetTaskOne, apiGetTaskTugasApprovals, apiSubmitTaskTugas } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
@@ -13,7 +13,8 @@ import DrawerBottom from "../drawerBottom";
import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
import MenuItemRow from "../menuItemRow";
import ModalConfirmation from "../ModalConfirmation";
import ModalSelect from "../modalSelect";
import ModalRiwayatApproval from "../ModalRiwayatApproval";
import ModalTolakApproval from "../ModalTolakApproval";
import SkeletonTask from "../skeletonTask";
import Text from "../Text";
import ModalListDetailTugasTask from "./modalListDetailTugasTask";
@@ -28,25 +29,41 @@ type Props = {
files?: { name: string; extension: string }[];
}
export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
type ApprovalRecord = {
id: string
status: number
note?: string
submitter: { name: string }
approver?: { name: string }
createdAt: string
}
export default function SectionTanggalTugasTask({ refreshing, isMemberDivision, isAdminDivision, status }: { refreshing: boolean, isMemberDivision: boolean, isAdminDivision: boolean, status?: number }) {
const { colors } = useTheme()
const dispatch = useDispatch()
const entityUser = useSelector((state: any) => state.user);
const update = useSelector((state: any) => state.taskUpdate)
const [isModal, setModal] = useState(false)
const [isSelect, setSelect] = useState(false)
const { token, decryptToken } = useAuthSession()
const [loading, setLoading] = useState(true)
const [loadingAction, setLoadingAction] = useState(false)
const [loadingRiwayat, setLoadingRiwayat] = useState(false)
const arrSkeleton = Array.from({ length: 5 })
const [modalDetail, setModalDetail] = useState(false)
const [modalRiwayat, setModalRiwayat] = useState(false)
const [modalTolak, setModalTolak] = useState(false)
const [modalKonfirmasiSetujui, setModalKonfirmasiSetujui] = useState(false)
const [modalPersetujuan, setModalPersetujuan] = useState(false)
const [riwayatData, setRiwayatData] = useState<ApprovalRecord[]>([])
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
const [data, setData] = useState<Props[]>([])
const [tugas, setTugas] = useState({
id: '',
status: 0,
})
const [tugas, setTugas] = useState({ id: '', status: 0 })
const [showDeleteModal, setShowDeleteModal] = useState(false)
const isApprover = entityUser.isApprover || ['supadmin', 'developer'].includes(entityUser.role)
const isAdmin = entityUser.role !== 'user' && entityUser.role !== 'coadmin'
const canTakeAction = isMemberDivision || isAdmin
async function handleLoad(loading: boolean) {
try {
setLoading(loading)
@@ -60,126 +77,136 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
}
}
async function handleUpdate(status: number) {
try {
const hasil = await decryptToken(String(token?.current));
const response = await apiUpdateStatusTaskDivision({
user: hasil,
idProject: detail,
status: status,
}, tugas.id);
if (response.success) {
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
} else {
Toast.show({ type: 'small', text1: response.message, })
}
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal mengubah data"
useEffect(() => { handleLoad(false) }, [update.task])
useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing])
useEffect(() => { handleLoad(true) }, [])
Toast.show({ type: 'small', text1: message })
async function handleLoadRiwayat() {
try {
setLoadingRiwayat(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiGetTaskTugasApprovals({ user: hasil, id: tugas.id })
setRiwayatData(response.data ?? [])
} catch (error) {
console.error(error)
} finally {
setSelect(false)
setLoadingRiwayat(false)
}
}
useEffect(() => {
handleLoad(false)
}, [update.task])
async function handleSubmitAjukan() {
try {
setLoadingAction(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiSubmitTaskTugas({ user: hasil, id: tugas.id })
if (response.success) {
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Berhasil mengajukan task untuk persetujuan' })
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengajukan persetujuan" })
} finally {
setLoadingAction(false)
setModal(false)
}
}
useEffect(() => {
if (refreshing)
handleLoad(false);
}, [refreshing]);
useEffect(() => {
handleLoad(true)
}, [])
async function handleSetujui() {
try {
setLoadingAction(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiApproveRejectTaskTugas({ user: hasil, id: tugas.id, action: 'approve' })
if (response.success) {
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Tugas berhasil disetujui' })
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menyetujui tugas" })
} finally {
setLoadingAction(false)
setModalKonfirmasiSetujui(false)
}
}
async function handleTolak(note: string) {
try {
setLoadingAction(true)
const hasil = await decryptToken(String(token?.current))
const response = await apiApproveRejectTaskTugas({ user: hasil, id: tugas.id, action: 'reject', note })
if (response.success) {
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Tugas berhasil ditolak' })
} else {
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menolak tugas" })
} finally {
setLoadingAction(false)
setModalTolak(false)
}
}
async function handleDelete() {
try {
const hasil = await decryptToken(String(token?.current));
const response = await apiDeleteTaskTugas({
user: hasil,
idProject: detail,
}, tugas.id);
const response = await apiDeleteTaskTugas({ user: hasil, idProject: detail }, tugas.id);
if (response.success) {
dispatch(setUpdateTask({ ...update, progress: !update.progress, task: !update.task }))
Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
Toast.show({ type: 'small', text1: 'Berhasil menghapus data' })
} else {
Toast.show({ type: 'small', text1: response.message, })
Toast.show({ type: 'small', text1: response.message })
}
} catch (error: any) {
console.error(error);
const message = error?.response?.data?.message || "Gagal menghapus data"
Toast.show({ type: 'small', text1: message })
} finally {
setModal(false);
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus data" })
}
}
const canApprove = isApprover || isAdminDivision
const showAjukan = (isMemberDivision || canApprove) && tugas.status === 0 && status !== 3
const showApproverActions = canApprove && tugas.status === 2
return (
<>
<View style={[Styles.mb15, Styles.mt10]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
<View>
{
loading ?
arrSkeleton.map((item, index) => {
return (
<SkeletonTask key={index} />
)
})
:
data.length > 0
?
data.map((item, index) => {
return (
<ItemSectionTanggalTugas
key={index}
done={item.status === 1}
title={item.title}
dateStart={item.dateStart}
dateEnd={item.dateEnd}
files={item.files ?? []}
onPress={() => {
setTugas({
id: item.id,
status: item.status
})
setModal(true)
}}
/>
);
})
:
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
{loading
? arrSkeleton.map((_, index) => <SkeletonTask key={index} />)
: data.length > 0
? data.map((item, index) => (
<ItemSectionTanggalTugas
key={index}
status={item.status}
title={item.title}
dateStart={item.dateStart}
dateEnd={item.dateEnd}
files={item.files ?? []}
onPress={() => {
setTugas({ id: item.id, status: item.status })
setModal(true)
}}
/>
))
: <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
}
</View>
</View>
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
{((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)
}}
/>
)}
{/* Drawer menu */}
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu" height={40}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{/* Baris 1 — selalu tampil */}
<MenuItemRow
icon={<MaterialCommunityIcons name="file-multiple-outline" color={colors.text} size={25} />}
title="File Tugas"
onPress={() => {
setModal(false);
setModal(false)
router.push(`/division/${id}/task/${detail}/tugas-file/${tugas.id}?member=${isMemberDivision}`)
}}
/>
@@ -187,53 +214,129 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
icon={<MaterialCommunityIcons name="clock-time-three-outline" color={colors.text} size={25} />}
title="Detail Waktu"
onPress={() => {
setModal(false);
setModal(false)
setTimeout(() => setModalDetail(true), 600)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
title="Riwayat"
onPress={() => {
setModal(false)
handleLoadRiwayat()
setTimeout(() => setModalRiwayat(true), 600)
}}
/>
{/* Separator */}
{(showAjukan || showApproverActions || (canTakeAction && isAdmin && status !== 3)) && (
<View style={{ width: '100%', height: 15 }} />
)}
{/* Baris 2 — aksi kondisional */}
{showAjukan && (
<MenuItemRow
icon={<MaterialCommunityIcons name="check-circle-outline" color={colors.text} size={25} />}
title="Ajukan Selesai"
disabled={loadingAction}
onPress={() => {
setModal(false)
setTimeout(() => handleSubmitAjukan(), 600)
}}
/>
)}
{showApproverActions && (
<MenuItemRow
icon={<MaterialCommunityIcons name="shield-check-outline" color={colors.text} size={25} />}
title="Persetujuan"
disabled={loadingAction}
onPress={() => {
setModal(false)
setTimeout(() => setModalPersetujuan(true), 600)
}}
/>
)}
{canTakeAction && isAdmin && status !== 3 && (
<>
<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>
{/* Drawer persetujuan */}
<DrawerBottom animation="slide" isVisible={modalPersetujuan} setVisible={setModalPersetujuan} title="Persetujuan Tugas" height={25}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<MenuItemRow
icon={<MaterialCommunityIcons name="check-circle" color={colors.success} size={25} />}
title="Setujui"
color={colors.success}
disabled={loadingAction}
onPress={() => {
setModalPersetujuan(false)
setTimeout(() => setModalKonfirmasiSetujui(true), 600)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="close-circle-outline" color={colors.error} size={25} />}
title="Tolak"
color={colors.error}
disabled={loadingAction}
onPress={() => {
setModalPersetujuan(false)
setTimeout(() => setModalTolak(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
visible={showDeleteModal}
title="Konfirmasi"
message="Apakah anda yakin ingin menghapus data ini?"
onConfirm={() => {
setShowDeleteModal(false)
handleDelete()
}}
onConfirm={() => { setShowDeleteModal(false); handleDelete() }}
onCancel={() => setShowDeleteModal(false)}
confirmText="Hapus"
cancelText="Batal"
/>
<ModalSelect
category="status-task"
close={() => setSelect(false)}
onSelect={(value) => { handleUpdate(Number(value.val)) }}
title="Status"
open={isSelect}
valChoose={String(tugas.status)}
<ModalConfirmation
visible={modalKonfirmasiSetujui}
title="Konfirmasi"
message="Apakah anda yakin ingin menyetujui tugas ini?"
onConfirm={handleSetujui}
onCancel={() => setModalKonfirmasiSetujui(false)}
confirmText="Setujui"
cancelText="Batal"
/>
<ModalRiwayatApproval
isVisible={modalRiwayat}
setVisible={setModalRiwayat}
data={riwayatData}
loading={loadingRiwayat}
/>
<ModalTolakApproval
isVisible={modalTolak}
setVisible={setModalTolak}
onTolak={handleTolak}
loading={loadingAction}
/>
<ModalListDetailTugasTask
@@ -243,4 +346,4 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
/>
</>
)
}
}