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

179
components/project/sectionMember.tsx
View File

@@ -7,15 +7,14 @@ import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { View } from "react-native"; import { Pressable, View } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import ModalConfirmation from "../ModalConfirmation";
import BorderBottomItem from "../borderBottomItem";
import DrawerBottom from "../drawerBottom"; import DrawerBottom from "../drawerBottom";
import ImageUser from "../imageNew"; import ImageUser from "../imageNew";
import MenuItemRow from "../menuItemRow"; import MenuItemRow from "../menuItemRow";
import SkeletonTwoItem from "../skeletonTwoItem"; import ModalConfirmation from "../ModalConfirmation";
import Skeleton from "../skeleton";
import Text from "../Text"; import Text from "../Text";
type Props = { type Props = {
@@ -35,26 +34,17 @@ export default function SectionMember({ status, refreshing }: { status: number |
const [isModal, setModal] = useState(false); const [isModal, setModal] = useState(false);
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const [selectLink, setSelectLink] = useState<Props | null>(null);
const [showDeleteModal, setShowDeleteModal] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false);
const [data, setData] = useState<Props[]>([]); const [data, setData] = useState<Props[]>([]);
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const arrSkeleton = Array.from({ length: 3 }) const arrSkeleton = Array.from({ length: 4 })
const [memberChoose, setMemberChoose] = useState({ const [memberChoose, setMemberChoose] = useState({ id: '', name: '' })
id: '',
name: '',
})
async function handleLoad(loading: boolean) { async function handleLoad(loading: boolean) {
try { try {
setLoading(loading) setLoading(loading)
const hasil = await decryptToken(String(token?.current)); const hasil = await decryptToken(String(token?.current));
const response = await apiGetProjectOne({ const response = await apiGetProjectOne({ user: hasil, cat: "member", id });
user: hasil,
cat: "member",
id: id,
});
setData(response.data); setData(response.data);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@@ -63,36 +53,21 @@ export default function SectionMember({ status, refreshing }: { status: number |
} }
} }
useEffect(() => { useEffect(() => { handleLoad(false) }, [update.member]);
handleLoad(false); useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing]);
}, [update.member]); useEffect(() => { handleLoad(true) }, []);
useEffect(() => {
if (refreshing)
handleLoad(false);
}, [refreshing]);
useEffect(() => {
handleLoad(true);
}, []);
async function handleDeleteMember() { async function handleDeleteMember() {
try { try {
const hasil = await decryptToken(String(token?.current)); const hasil = await decryptToken(String(token?.current));
const response = await apiDeleteProjectMember({ const response = await apiDeleteProjectMember({ user: hasil, idUser: memberChoose.id }, id)
user: hasil,
idUser: memberChoose.id,
}, id)
if (response.success) { if (response.success) {
Toast.show({ type: 'small', text1: 'Berhasil menghapus anggota', }) Toast.show({ type: 'small', text1: 'Berhasil menghapus anggota' })
dispatch(setUpdateProject({ ...update, member: !update.member })) dispatch(setUpdateProject({ ...update, member: !update.member }))
setModal(false); setModal(false);
} }
} catch (error : any ) { } catch (error: any) {
console.error(error); Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus anggota" })
const message = error?.response?.data?.message || "Gagal menghapus anggota"
Toast.show({ type: 'small', text1: message })
} }
} }
@@ -101,84 +76,85 @@ export default function SectionMember({ status, refreshing }: { status: number |
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<View style={[Styles.rowSpaceBetween, Styles.mv05]}> <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
<Text style={[Styles.textDefaultSemiBold]}>Anggota</Text> <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>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}> <View style={{ gap: 6 }}>
{ {loading ? (
loading ? arrSkeleton.map((_, index) => (
arrSkeleton.map((item, index) => { <View key={index} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
return ( <Skeleton width={40} height={40} borderRadius={20} />
<SkeletonTwoItem key={index} /> <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>
data.length > 0 </View>
? ))
data.map((item, index) => { ) : data.length > 0 ? (
return ( data.map((item, index) => (
<BorderBottomItem <Pressable
key={index} key={index}
borderType="bottom" onPress={() => {
icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />} if (status === 3) return
title={item.name} setMemberChoose({ id: item.idUser, name: item.name })
onPress={() => { setModal(true)
if (status == 3) return }}
setMemberChoose({ style={{
id: item.idUser, flexDirection: 'row',
name: item.name, alignItems: 'center',
}) backgroundColor: colors.card,
setModal(true); borderRadius: 10,
}} borderWidth: 1,
/> borderColor: colors.icon + '18',
); paddingHorizontal: 12,
}) paddingVertical: 10,
: gap: 12,
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada anggota</Text> }}
} >
<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>
))
) : (
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada anggota</Text>
)}
</View> </View>
</View> </View>
<DrawerBottom <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={memberChoose.name}>
animation="slide"
isVisible={isModal}
setVisible={setModal}
title={memberChoose.name}
>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={ icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
<MaterialCommunityIcons
name="account-eye"
color={colors.text}
size={25}
/>
}
title="Lihat Profil" title="Lihat Profil"
onPress={() => { onPress={() => {
setModal(false); setModal(false)
router.push(`/member/${memberChoose.id}`); router.push(`/member/${memberChoose.id}`)
}} }}
/> />
{ {entityUser.role !== "user" && entityUser.role !== "coadmin" && (
entityUser.role != "user" && entityUser.role != "coadmin" &&
<MenuItemRow <MenuItemRow
icon={ icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
<MaterialCommunityIcons
name="account-remove"
color={colors.text}
size={25}
/>
}
title="Keluarkan" title="Keluarkan"
onPress={() => { onPress={() => {
setModal(false) setModal(false)
setTimeout(() => { setTimeout(() => setShowDeleteModal(true), 600)
setShowDeleteModal(true)
}, 600)
}} }}
/> />
} )}
</View> </View>
</DrawerBottom> </DrawerBottom>
@@ -186,10 +162,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
visible={showDeleteModal} visible={showDeleteModal}
title="Konfirmasi" title="Konfirmasi"
message="Apakah Anda yakin ingin mengeluarkan anggota?" message="Apakah Anda yakin ingin mengeluarkan anggota?"
onConfirm={() => { onConfirm={() => { setShowDeleteModal(false); handleDeleteMember() }}
setShowDeleteModal(false)
handleDeleteMember()
}}
onCancel={() => setShowDeleteModal(false)} onCancel={() => setShowDeleteModal(false)}
confirmText="Keluarkan" confirmText="Keluarkan"
cancelText="Batal" cancelText="Batal"

73
components/task/sectionMemberTask.tsx
View File

@@ -7,15 +7,14 @@ import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { View } from "react-native"; import { Pressable, View } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import ModalConfirmation from "../ModalConfirmation";
import BorderBottomItem from "../borderBottomItem";
import DrawerBottom from "../drawerBottom"; import DrawerBottom from "../drawerBottom";
import ImageUser from "../imageNew"; import ImageUser from "../imageNew";
import MenuItemRow from "../menuItemRow"; import MenuItemRow from "../menuItemRow";
import SkeletonTwoItem from "../skeletonTwoItem"; import ModalConfirmation from "../ModalConfirmation";
import Skeleton from "../skeleton";
import Text from "../Text"; import Text from "../Text";
type Props = { type Props = {
@@ -88,7 +87,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
} else { } else {
Toast.show({ type: 'small', text1: response.message, }) Toast.show({ type: 'small', text1: response.message, })
} }
} catch (error : any ) { } catch (error: any) {
console.error(error); console.error(error);
const message = error?.response?.data?.message || "Gagal menghapus anggota" 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.mb15]}>
<View style={[Styles.rowSpaceBetween, Styles.mv05]}> <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
<Text style={[Styles.textDefaultSemiBold]}>Anggota</Text> <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>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}> <View style={{ gap: 6 }}>
{ {
loading ? loading ?
arrSkeleton.map((item, index) => { arrSkeleton.map((item, index) => {
return ( 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.length > 0 ? (
data.map((item, index) => { data.map((item, index) => {
return ( 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} key={index}
borderType="bottom"
icon={
<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />
}
title={item.name}
onPress={() => { onPress={() => {
setMemberChoose({ setMemberChoose({
id: item.idUser, id: item.idUser,
@@ -132,7 +149,33 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
}); });
setModal(true); 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>
); );
}) })
) : ( ) : (

2
constants/Colors.ts
View File

@@ -13,7 +13,7 @@ export const Colors = {
tabActive: '#2563EB', tabActive: '#2563EB',
header: '#234881', header: '#234881',
homeGradient: '#346CC4', homeGradient: '#346CC4',
dimmed: '#707887ff', dimmed: '#707887',
success: '#40C057', success: '#40C057',
warning: '#FBBF24', warning: '#FBBF24',
error: '#F87171', error: '#F87171',