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

feat: redesign section member dan fix warna dimmed

Browse Source 
- SectionMember & SectionMemberTask: ganti BorderBottomItem dengan card item
  custom (avatar + nama + badge jabatan), skeleton baru, label jumlah anggota
- Colors.ts: hapus suffix alpha '#707887ff' → '#707887' pada warna dimmed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
amaliadwiy
2026-05-06 16:23:35 +08:00
parent b61cd51628
commit 97726609e1
3 changed files with 135 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/task/sectionMemberTask.tsx
View File

@@ -7,15 +7,14 @@ 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";
import { Pressable, View } from "react-native";
import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux";
import ModalConfirmation from "../ModalConfirmation";
import BorderBottomItem from "../borderBottomItem";
import DrawerBottom from "../drawerBottom";
import ImageUser from "../imageNew";
import MenuItemRow from "../menuItemRow";
import SkeletonTwoItem from "../skeletonTwoItem";
import ModalConfirmation from "../ModalConfirmation";
import Skeleton from "../skeleton";
import Text from "../Text";
type Props = {
@@ -88,7 +87,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
} 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 anggota"
@@ -103,28 +102,46 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
<View style={[Styles.mb15]}>
<View style={[Styles.rowSpaceBetween, Styles.mv05]}>
<Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
<Text style={[Styles.textDefault]}>Total {data.length} Anggota</Text>
{!loading && data.length > 0 && (
<Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data.length} orang</Text>
)}
</View>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={{ gap: 6 }}>
{
loading ?
arrSkeleton.map((item, index) => {
return (
<SkeletonTwoItem key={index} />
<View key={index} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
<Skeleton width={40} height={40} borderRadius={20} />
<View style={{ flex: 1, gap: 5 }}>
<Skeleton width={60} height={12} widthType="percent" borderRadius={6} />
<Skeleton width={35} height={10} widthType="percent" borderRadius={6} />
</View>
</View>
)
})
:
data.length > 0 ? (
data.map((item, index) => {
return (
<BorderBottomItem
// <BorderBottomItem
// key={index}
// borderType="bottom"
// icon={
// <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />
// }
// title={item.name}
// onPress={() => {
// setMemberChoose({
// id: item.idUser,
// name: item.name,
// });
// setModal(true);
// }}
// />
<Pressable
key={index}
borderType="bottom"
icon={
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />
}
title={item.name}
onPress={() => {
setMemberChoose({
id: item.idUser,
@@ -132,7 +149,33 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
});
setModal(true);
}}
/>
style={{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.card,
borderRadius: 10,
borderWidth: 1,
borderColor: colors.icon + '18',
paddingHorizontal: 12,
paddingVertical: 10,
gap: 12,
}}
>
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
<View style={{ flex: 1 }}>
<Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
</View>
<View style={{
backgroundColor: colors.dimmed + '15',
borderRadius: 20,
paddingHorizontal: 8,
paddingVertical: 3,
}}>
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
{item.position}
</Text>
</View>
</Pressable>
);
})
) : (