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

Merge pull request #4 from bipproduction/amalia/03-mar-25

Browse Source 
Amalia/03 mar 25
This commit is contained in:
Amalia
2025-03-04 10:20:52 +08:00
committed by GitHub
parent a580b0fd5b d923d10290
commit 6f43c52bbf
23 changed files with 527 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/(application)/_layout.tsx
View File

@@ -1,4 +1,5 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
import HeaderMemberList from "@/components/member/headerMemberList";
import { Headers } from "@/constants/Headers";
import { router, Stack } from "expo-router";
@@ -21,7 +22,12 @@ export default function RootLayout() {
headerTitleAlign: 'center',
headerRight: () => <HeaderMemberList />
}} />
<Stack.Screen name="member/create" options={{ title: 'Tambah Anggota' }} />
<Stack.Screen name="discussion/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Diskusi Umum',
headerTitleAlign: 'center',
headerRight: () => <HeaderDiscussionGeneral />
}} />
</Stack>
<StatusBar style="light" />
</>

7
app/(application)/discussion/[id].tsx Normal file
View File

@@ -0,0 +1,7 @@
import { Text } from "react-native";
export default function DetailDiscussionGeneral() {
return (
<Text>Detail diskusi general</Text>
)
}

7
app/(application)/discussion/create.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { Text } from "react-native";
export default function CreateDiscussionGeneral(){
return(
<Text>Tambah diskusi general</Text>
)
}

66
app/(application)/discussion/index.tsx Normal file
View File

@@ -0,0 +1,66 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { SafeAreaView, ScrollView, Text, View } from "react-native";
export default function Discussion() {
const { active } = useLocalSearchParams<{ active?: string }>()
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.push('/discussion?active=true') }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.push('/discussion?active=false') }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch />
<View style={[Styles.mv05]}>
<Text>Filter : Dinas</Text>
</View>
<View>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo='15 Komentar'
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}

2
app/(application)/feature.tsx
View File

@@ -20,7 +20,7 @@ export default function Feature() {
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" />
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" />
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }}/>
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member?active=true') }}/>

47
app/(application)/member/[id].tsx Normal file
View File

@@ -0,0 +1,47 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemDetailMember from "@/components/itemDetailMember";
import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
import Styles from "@/constants/Styles";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function MemberDetail() {
const { id } = useLocalSearchParams();
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Anggota',
headerTitleAlign:'center',
headerRight: () => <HeaderRightMemberDetail id={id} />,
headerShadowVisible: false
}}
/>
<ScrollView>
<View style={{ flexDirection: 'column' }}>
<View style={[Styles.wrapHeadViewMember]}>
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileBig]}
/>
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>Putri Ayu Dewi</Text>
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</Text>
</View>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
</View>
<ItemDetailMember category="nik" value="123456789" />
<ItemDetailMember category="group" value="Dinas" />
<ItemDetailMember category="position" value="Sekretaris" />
<ItemDetailMember category="phone" value="08980873782" />
<ItemDetailMember category="email" value="putri@gmail.com" />
<ItemDetailMember category="gender" value="Perempuan" />
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

77
app/(application)/member/create.tsx
View File

@@ -1,7 +1,80 @@
import { Text } from "react-native";
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import { InputForm } from "@/components/inputForm";
import SelectForm from "@/components/selectForm";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from 'expo-image-picker';
import { router, Stack } from "expo-router";
import { useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
export default function CreateMember() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: true,
quality: 1,
});
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
} else {
alert('Tidak ada gambar yang dipilih');
}
};
return (
<Text>Tambah Member</Text>
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Anggota',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={[Styles.userProfileBig]} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]}>
<MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
</Pressable>
)
}
</View>
<SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
<SelectForm label="Jabatan" placeholder="Pilih Jabatan" value={chooseGroup.label} required onPress={() => { }} />
<SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="NIK" type="numeric" placeholder="NIK" required />
<InputForm label="Nama" type="default" placeholder="Nama" required />
<InputForm label="Email" type="default" placeholder="Email" required />
<InputForm label="Nomor Telepon" type="numeric" placeholder="8XX-XXX-XXX" required itemLeft={<Text>+62</Text>} />
<SelectForm label="Jenis Kelamin" placeholder="Pilih Jenis Kelamin" value={chooseGroup.label} required onPress={() => { }} />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/member?active=true')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

79
app/(application)/member/edit/[id].tsx Normal file
View File

@@ -0,0 +1,79 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import SelectForm from "@/components/selectForm"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import * as ImagePicker from 'expo-image-picker'
import { router, Stack } from "expo-router"
import { useState } from "react"
import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
export default function EditMember() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
const pickImageAsync = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: true,
quality: 1,
});
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
} else {
alert('Tidak ada gambar yang dipilih');
}
};
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Anggota',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
{
selectedImage != undefined ? (
<Pressable onPress={pickImageAsync}>
<Image src={selectedImage} style={[Styles.userProfileBig]} />
</Pressable>
) : (
<Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]}>
<MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
</Pressable>
)
}
</View>
<SelectForm label="Jabatan" placeholder="Pilih Jabatan" value={chooseGroup.label} required onPress={() => { }} />
<SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="NIK" type="numeric" placeholder="NIK" required />
<InputForm label="Nama" type="default" placeholder="Nama" required />
<InputForm label="Email" type="default" placeholder="Email" required />
<InputForm label="Nomor Telepon" type="numeric" placeholder="8XX-XXX-XXX" required itemLeft={<Text>+62</Text>} />
<SelectForm label="Jenis Kelamin" placeholder="Pilih Jenis Kelamin" value={chooseGroup.label} required onPress={() => { }} />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengubah data?',
onPress: () => {
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
router.back()
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

12
app/(application)/member/index.tsx
View File

@@ -35,7 +35,7 @@ export default function Index() {
</View>
<View>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -48,7 +48,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -61,7 +61,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -74,7 +74,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -87,7 +87,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image
@@ -100,7 +100,7 @@ export default function Index() {
/>
<BorderBottomItem
onPress={() => { }}
onPress={() => {router.push('/member/1')}}
borderType="all"
icon={
<Image

59
app/(application)/profile.tsx
View File

@@ -1,8 +1,9 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonHeader } from "@/components/buttonHeader";
import ItemDetailMember from "@/components/itemDetailMember";
import Styles from "@/constants/Styles";
import { AntDesign, MaterialCommunityIcons, MaterialIcons, Octicons } from "@expo/vector-icons";
import { Octicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
@@ -14,6 +15,7 @@ export default function Profile() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Profile',
headerTitleAlign: 'center',
headerShadowVisible: false,
headerRight: () => <ButtonHeader
item={<Octicons name="sign-out" size={20} color="white" />}
onPress={() => {
@@ -41,55 +43,12 @@ export default function Profile() {
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
<Text style={[Styles.textLink]}>Edit</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>NIK</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>123456789</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<AntDesign name="tags" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Lembaga Desa</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="account-tie" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Jabatan</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>Bendahara</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialIcons name="phone" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>No Telepon</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>09482903842</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialIcons name="email" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Email</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>ayu@gmail.com</Text>
</View>
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="gender-male-female" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Jenis Kelamin</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>Perempuan</Text>
</View>
<ItemDetailMember category="nik" value="123456789" />
<ItemDetailMember category="group" value="Dinas" />
<ItemDetailMember category="position" value="Sekretaris" />
<ItemDetailMember category="phone" value="08980873782" />
<ItemDetailMember category="email" value="putri@gmail.com" />
<ItemDetailMember category="gender" value="Perempuan" />
</View>
</View>
</ScrollView>

BIN
bun.lockb
View File

Binary file not shown.

39
components/borderBottomItem.tsx
View File

@@ -1,17 +1,24 @@
import Styles from "@/constants/Styles";
import React from "react";
import { Pressable, Text, View } from "react-native";
import LabelStatus from "./labelStatus";
import { Feather } from "@expo/vector-icons";
type Props = {
title: string
subtitle?: string
subtitle?: string | React.ReactNode
icon: React.ReactNode
desc?: string
rightTopInfo?: string
onPress?: () => void
borderType: 'all' | 'bottom'
leftBottomInfo?: React.ReactNode | string
rightBottomInfo?: React.ReactNode | string
}
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType }: Props) {
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo }: Props) {
console.log(typeof rightBottomInfo)
return (
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : Styles.wrapItemBorderAll]} onPressOut={onPress}>
<View style={[Styles.rowItemsCenter]}>
@@ -19,7 +26,14 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
<View style={[Styles.rowSpaceBetween, { width: '85%' }]}>
<View style={[Styles.ml10]}>
<Text style={[Styles.textDefaultSemiBold]}>{title}</Text>
{subtitle && <Text style={[Styles.textMediumNormal, {lineHeight:15}]}>{subtitle}</Text>}
{
subtitle &&
typeof subtitle == "string"
? <Text style={[Styles.textMediumNormal, { lineHeight: 15 }]}>{subtitle}</Text>
: <View style={{ alignItems: 'flex-start' }}>
{subtitle}
</View>
}
</View>
{
rightTopInfo && <Text style={[Styles.textInformation]}>{rightTopInfo}</Text>
@@ -28,6 +42,25 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
</View>
{desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify' }]}>{desc}</Text>}
{
leftBottomInfo && rightBottomInfo &&
(
<View style={[Styles.rowSpaceBetween, Styles.mt10]}>
{
typeof leftBottomInfo == 'string' ?
<Text style={[Styles.textInformation, Styles.cGray, { textAlign: 'left' }]}>{leftBottomInfo}</Text>
:
leftBottomInfo
}
{
typeof rightBottomInfo == 'string' ?
<Text style={[Styles.textInformation, Styles.cGray, { textAlign: 'right' }]}>{rightBottomInfo}</Text>
:
rightBottomInfo
}
</View>
)
}
</Pressable>
)
}

40
components/discussion_general/headerDiscussionGeneral.tsx Normal file
View File

@@ -0,0 +1,40 @@
import Styles from "@/constants/Styles"
import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
import { View } from "react-native"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
import ModalFilter from "../modalFilter"
export default function HeaderDiscussionGeneral() {
const [isVisible, setVisible] = useState(false)
const [isFilter, setFilter] = useState(false)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Diskusi"
onPress={() => {
setVisible(false)
router.push('/discussion/create')
}}
/>
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => {
setVisible(false)
setFilter(true)
}}
/>
</View>
</DrawerBottom>
<ModalFilter close={() => { setFilter(false) }} open={isFilter} page="discussion" />
</>
)
}

2
components/inputForm.tsx
View File

@@ -49,7 +49,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
<View style={[Styles.mb10]}>
{
label != undefined && (
<Text style={[Styles.mb05, { textTransform: "capitalize" }, error && Styles.cError]}>
<Text style={[Styles.mb05, error && Styles.cError]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>

49
components/itemDetailMember.tsx Normal file
View File

@@ -0,0 +1,49 @@
import Styles from "@/constants/Styles";
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { Text, View } from "react-native";
type Props = {
category: 'nik' | 'group' | 'position' | 'phone' | 'email' | 'gender'
value: string
}
const data = {
nik: {
label: 'NIK',
icon: <MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
},
group: {
label: 'Lembaga Desa',
icon: <AntDesign name="tags" size={22} color="black" style={[Styles.mr10]} />
},
position: {
label: 'Jabatan',
icon: <MaterialCommunityIcons name="account-tie" size={22} color="black" style={[Styles.mr10]} />
},
phone: {
label: 'No Telepon',
icon: <MaterialIcons name="phone" size={22} color="black" style={[Styles.mr10]} />
},
email: {
label: 'Email',
icon: <MaterialIcons name="email" size={22} color="black" style={[Styles.mr10]} />
},
gender: {
label: 'Jenis Kelamin',
icon: <MaterialCommunityIcons name="gender-male-female" size={22} color="black" style={[Styles.mr10]} />
},
}
export default function ItemDetailMember({ category, value }: Props) {
return (
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
<View style={[Styles.rowItemsCenter]}>
{data[category].icon}
<Text style={[Styles.textDefault]}>{data[category].label}</Text>
</View>
<Text style={[Styles.textDefaultSemiBold]}>{value}</Text>
</View>
)
}

17
components/labelStatus.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
type Props = {
category: 'error' | 'success' | 'warning' | 'primary'
text: string
size: 'small' | 'default'
}
export default function LabelStatus({ category, text, size }: Props) {
return (
<View style={[size == "small" ? Styles.labelStatusSmall : Styles.labelStatus, ColorsStatus[category]]}>
<Text style={[size == "small" ? Styles.textSmallSemiBold : Styles.textMediumSemiBold, Styles.cWhite, { textAlign: 'center' }]}>{text}</Text>
</View>
)
}

46
components/member/headerMemberDetail.tsx Normal file
View File

@@ -0,0 +1,46 @@
import Styles from "@/constants/Styles"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import { useState } from "react"
import { View } from "react-native"
import AlertKonfirmasi from "../alertKonfirmasi"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
import { router } from "expo-router"
type Props = {
id: string | string[]
}
export default function HeaderRightMemberDetail({ id }: Props) {
const [isVisible, setVisible] = useState(false)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
title="Non Aktifkan"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menonaktifkan data?',
onPress: () => { }
})
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
router.push(`/member/edit/${id}`)
}}
/>
</View>
</DrawerBottom>
</>
)
}

26
components/member/headerMemberList.tsx
View File

@@ -1,15 +1,16 @@
import { router, Stack } from "expo-router"
import ButtonBackHeader from "../buttonBackHeader"
import ButtonMenuHeader from "../buttonMenuHeader"
import { useState } from "react"
import DrawerBottom from "../drawerBottom"
import { View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
import { View } from "react-native"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
import ModalFilter from "../modalFilter"
export default function HeaderMemberList() {
const [isVisible, setVisible] = useState(false)
const [isFilter, setFilter] = useState(false)
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
@@ -18,15 +19,22 @@ export default function HeaderMemberList() {
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Anggota"
onPress={() => { }}
onPress={() => {
setVisible(false)
router.push('/member/create')
}}
/>
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => { }}
onPress={() => {
setVisible(false)
setFilter(true)
}}
/>
</View>
</DrawerBottom>
<ModalFilter close={() => { setFilter(false) }} open={isFilter} page="member" />
</>
)
}

2
components/menuItemRow.tsx
View File

@@ -9,7 +9,7 @@ type Props = {
export default function MenuItemRow({ onPress, icon, title }: Props) {
return (
<Pressable onPressOut={() => { console.log('press'); onPress() }} style={[Styles.btnMenuRow]}>
<Pressable onPressOut={() => { onPress() }} style={[Styles.btnMenuRow]}>
<View style={{ alignItems: 'center' }}>
{icon}
<Text style={[Styles.mt05]}>{title}</Text>

2
components/modalFilter.tsx
View File

@@ -9,7 +9,7 @@ import { router } from "expo-router"
type Props = {
open: boolean,
close: (value: boolean) => void
page: 'position'
page: 'position' | 'member' | 'discussion'
}
export default function ModalFilter({ open, close, page }: Props) {

5
constants/ColorsStatus.ts
View File

@@ -3,7 +3,7 @@ export const ColorsStatus = {
backgroundColor: '#19345E'
},
success: {
backgroundColor: 'green'
backgroundColor: '#40c057'
},
info: {
backgroundColor: 'blue'
@@ -22,5 +22,8 @@ export const ColorsStatus = {
},
lightGreen: {
backgroundColor: '#d2f0cb'
},
gray: {
backgroundColor: '#d9d9d9'
}
}

8
constants/Styles.ts
View File

@@ -25,6 +25,10 @@ const Styles = StyleSheet.create({
lineHeight: 24,
fontWeight: '600',
},
textSmallSemiBold: {
fontSize: 10,
fontWeight: '600',
},
textTitle: {
fontSize: 32,
fontWeight: 'bold',
@@ -120,6 +124,10 @@ const Styles = StyleSheet.create({
paddingHorizontal: 15,
borderRadius: 10
},
labelStatusSmall: {
paddingHorizontal: 10,
borderRadius: 10
},
rowSpaceBetween: {
justifyContent: 'space-between',
flexDirection: 'row'

3
package.json
View File

@@ -21,10 +21,13 @@
"expo": "~52.0.37",
"expo-blur": "~14.0.3",
"expo-constants": "~17.0.7",
"expo-document-picker": "^13.0.3",
"expo-font": "~13.0.4",
"expo-haptics": "~14.0.1",
"expo-image-picker": "~16.0.6",
"expo-linear-gradient": "~14.0.2",
"expo-linking": "~7.0.5",
"expo-media-library": "~17.0.6",
"expo-router": "~4.0.17",
"expo-splash-screen": "~0.29.22",
"expo-status-bar": "~2.0.1",