diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx
index 305ee80..d235307 100644
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -9,6 +9,9 @@ export default function RootLayout() {
+
+
+
diff --git a/app/(application)/feature.tsx b/app/(application)/feature.tsx
index af411a5..5805238 100644
--- a/app/(application)/feature.tsx
+++ b/app/(application)/feature.tsx
@@ -25,8 +25,8 @@ export default function Feature() {
} text="Anggota" />
} text="Jabatan" />
- } text="Lembaga Desa" />
- } text="Tema" />
+ } text="Lembaga Desa" onPress={() => { router.push('/group?active=true') }} />
+ } text="Tema" onPress={() => { }} />
} text="Banner" />
diff --git a/app/(application)/group/_layout.tsx b/app/(application)/group/_layout.tsx
new file mode 100644
index 0000000..5d52440
--- /dev/null
+++ b/app/(application)/group/_layout.tsx
@@ -0,0 +1,58 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonForm } from "@/components/buttonForm";
+import ButtonMenuHeader from "@/components/buttonMenuHeader";
+import DrawerBottom from "@/components/drawerBottom";
+import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
+import { Headers } from "@/constants/Headers";
+import Styles from "@/constants/Styles";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { router, Stack } from "expo-router";
+import React, { useState } from "react";
+import { Modal, Pressable, Text, TextInput, ToastAndroid, View } from "react-native";
+
+export default function RootLayout() {
+ const [isVisible, setVisible] = useState(false)
+ const [isVisibleTambah, setVisibleTambah] = useState(false)
+
+ function handleTambah() {
+ setVisibleTambah(false)
+ setVisible(false)
+ ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+ }
+
+ return (
+ <>
+
+ { router.back() }} />,
+ headerTitle: 'Lembaga Desa',
+ headerTitleAlign: 'center',
+ headerRight: () => { setVisible(true) }} />
+ }} />
+
+
+
+
+ }
+ title="Tambah Lembaga"
+ onPress={() => { setVisibleTambah(true) }}
+ />
+
+
+
+
+
+
+
+
+
+ { handleTambah() }} />
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/(application)/group/index.tsx b/app/(application)/group/index.tsx
new file mode 100644
index 0000000..69af22c
--- /dev/null
+++ b/app/(application)/group/index.tsx
@@ -0,0 +1,85 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonTab from "@/components/buttonTab";
+import InputSearch from "@/components/inputSearch";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { SafeAreaView, ScrollView, View } from "react-native";
+
+export default function Index() {
+ const { active } = useLocalSearchParams<{ active?: string }>();
+
+ return (
+
+
+
+
+ { router.push('/group?active=true') }}
+ label="Aktif"
+ icon={}
+ n={2} />
+ { router.push('/group?active=false') }}
+ label="Tidak Aktif"
+ icon={}
+ n={2} />
+
+
+
+
+
+
+ }
+ title="Adat"
+ />
+
+
+
+ }
+ title="Dinas"
+ />
+
+
+
+ }
+ title="PKK"
+ />
+
+
+
+ }
+ title="Karang Taruna"
+ />
+
+
+
+ }
+ title="Koperasi"
+ />
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/(application)/notification.tsx b/app/(application)/notification.tsx
new file mode 100644
index 0000000..87633ba
--- /dev/null
+++ b/app/(application)/notification.tsx
@@ -0,0 +1,128 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { Feather } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { SafeAreaView, ScrollView, View } from "react-native";
+
+export default function Notification() {
+ return (
+
+ { router.back() }} />,
+ headerTitle: 'Pencarian',
+ headerTitleAlign: 'center'
+ }}
+ />
+
+
+
+
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+ }
+ title="TU dan Umum"
+ rightTopInfo="16 Feb 2025"
+ desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+ />
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/(application)/profile.tsx b/app/(application)/profile.tsx
new file mode 100644
index 0000000..48cbbd3
--- /dev/null
+++ b/app/(application)/profile.tsx
@@ -0,0 +1,98 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonHeader } from "@/components/buttonHeader";
+import Styles from "@/constants/Styles";
+import { AntDesign, MaterialCommunityIcons, MaterialIcons, Octicons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
+
+export default function Profile() {
+ return (
+
+ { router.back() }} />,
+ headerTitle: 'Profile',
+ headerTitleAlign: 'center',
+ headerRight: () => }
+ onPress={() => {
+ AlertKonfirmasi({
+ title: 'Keluar',
+ desc: 'Apakah anda yakin ingin keluar?',
+ onPress: () => { router.push('/') }
+ })
+ }}
+ />
+ }}
+ />
+
+
+
+
+ Putri Ayu Dewi
+ Super Admin
+
+
+
+ Informasi
+ Edit
+
+
+
+
+ NIK
+
+ 123456789
+
+
+
+
+
+ Lembaga Desa
+
+ Dinas
+
+
+
+
+
+ Jabatan
+
+ Bendahara
+
+
+
+
+
+ No Telepon
+
+ 09482903842
+
+
+
+
+
+ Email
+
+ ayu@gmail.com
+
+
+
+
+
+
+ Jenis Kelamin
+
+ Perempuan
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/(application)/search.tsx b/app/(application)/search.tsx
index 97656b1..b7a9113 100644
--- a/app/(application)/search.tsx
+++ b/app/(application)/search.tsx
@@ -1,6 +1,7 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { InputForm } from "@/components/inputForm";
+import InputSearch from "@/components/inputSearch";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
@@ -20,16 +21,12 @@ export default function Search() {
/>
- }
- />
-
+
+
ANGGOTA
DIVISI
-
+
}
title="TU dan Umum"
subtitle="Dinas"
/>
-
+
}
title="TU dan Umum"
subtitle="Dinas"
/>
-
+
KEGIATAN
-
+
}
title="Kerja Bakti"
subtitle="Dinas"
/>
-
+
+
+ }
+ title="Pasar Ramadhan"
+ subtitle="Dinas"
+ />
+
+
}
title="Pasar Ramadhan"
subtitle="Dinas"
/>
-
diff --git a/components/alertKonfirmasi.ts b/components/alertKonfirmasi.ts
new file mode 100644
index 0000000..8424874
--- /dev/null
+++ b/components/alertKonfirmasi.ts
@@ -0,0 +1,21 @@
+import { Alert } from "react-native";
+
+
+type Props = {
+ title: string,
+ desc: string
+ onPress: () => void
+}
+
+export default function AlertKonfirmasi({ title, desc, onPress }: Props) {
+ Alert.alert(title, desc, [
+ {
+ text: 'Tidak',
+ style: 'cancel',
+ },
+ {
+ text: 'Ya',
+ onPress: () => { onPress() }
+ },
+ ]);
+}
\ No newline at end of file
diff --git a/components/borderBottomItem.tsx b/components/borderBottomItem.tsx
index 8f952e3..0524bc7 100644
--- a/components/borderBottomItem.tsx
+++ b/components/borderBottomItem.tsx
@@ -6,20 +6,24 @@ type Props = {
subtitle?: string
icon: React.ReactNode
desc?: string
+ rightTopInfo?: string
onPress?: () => void
+ borderType: 'all' | 'bottom'
}
-export default function BorderBottomItem({ title, subtitle, icon, desc, onPress }: Props) {
+export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType }: Props) {
return (
-
+
{icon}
-
+
{title}
- {subtitle}
+ {subtitle && {subtitle}}
- 3 Feb 2025
+ {
+ rightTopInfo && {rightTopInfo}
+ }
diff --git a/components/buttonMenuHeader.tsx b/components/buttonMenuHeader.tsx
new file mode 100644
index 0000000..1bb5ce2
--- /dev/null
+++ b/components/buttonMenuHeader.tsx
@@ -0,0 +1,17 @@
+import { Feather } from "@expo/vector-icons"
+import { ButtonHeader } from "./buttonHeader"
+
+type Props = {
+ onPress?: () => void
+}
+
+export default function ButtonMenuHeader({ onPress }: Props) {
+ return (
+ <>
+ }
+ onPress={onPress}
+ />
+
+ )
+}
\ No newline at end of file
diff --git a/components/buttonTab.tsx b/components/buttonTab.tsx
new file mode 100644
index 0000000..26dbf8e
--- /dev/null
+++ b/components/buttonTab.tsx
@@ -0,0 +1,23 @@
+import { ColorsStatus } from "@/constants/ColorsStatus"
+import Styles from "@/constants/Styles"
+import { AntDesign, Feather } from "@expo/vector-icons"
+import { Text, TouchableOpacity } from "react-native"
+
+type Props = {
+ active: string
+ value: string
+ onPress: () => void
+ label: string
+ icon: React.ReactNode
+ n: number
+}
+
+
+export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
+ return (
+ { onPress() }}>
+ {icon}
+ {label}
+
+ )
+}
\ No newline at end of file
diff --git a/components/drawerBottom.tsx b/components/drawerBottom.tsx
new file mode 100644
index 0000000..37c13eb
--- /dev/null
+++ b/components/drawerBottom.tsx
@@ -0,0 +1,31 @@
+import Styles from "@/constants/Styles"
+import { MaterialIcons } from "@expo/vector-icons"
+import { Modal, Pressable, Text, View } from "react-native"
+
+type Props = {
+ isVisible: boolean
+ setVisible: (value: boolean) => void
+ title?: string
+ children: React.ReactNode
+ animation: 'slide' | 'none' | 'fade'
+}
+
+export default function DrawerBottom({ isVisible, setVisible, title, children, animation }: Props) {
+ return (
+
+
+
+
+ {title}
+ setVisible(false)}>
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/home/headerRightHome.tsx b/components/home/headerRightHome.tsx
index 49351cf..e82d906 100644
--- a/components/home/headerRightHome.tsx
+++ b/components/home/headerRightHome.tsx
@@ -8,8 +8,8 @@ export function HeaderRightHome() {
return (
} onPress={() => { router.push('/search') }} />
- } onPress={() => { router.push('/') }} />
- } onPress={() => { router.push('/') }} />
+ } onPress={() => { router.push('/notification') }} />
+ } onPress={() => { router.push('/profile') }} />
)
}
\ No newline at end of file
diff --git a/components/inputForm.tsx b/components/inputForm.tsx
index 73a7d1b..a24f1c9 100644
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -46,10 +46,10 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
return (
-
+
{
label != undefined && (
-
+
{label}
{required && (*)}
diff --git a/components/inputSearch.tsx b/components/inputSearch.tsx
new file mode 100644
index 0000000..da7872b
--- /dev/null
+++ b/components/inputSearch.tsx
@@ -0,0 +1,14 @@
+import { Feather } from "@expo/vector-icons";
+import { InputForm } from "./inputForm";
+
+export default function InputSearch({ onChange }: { onChange?: (val: string) => void }) {
+ return (
+ }
+ onChange={onChange}
+ />
+ )
+}
\ No newline at end of file
diff --git a/components/menuItemRow.tsx b/components/menuItemRow.tsx
new file mode 100644
index 0000000..14d4880
--- /dev/null
+++ b/components/menuItemRow.tsx
@@ -0,0 +1,19 @@
+import Styles from "@/constants/Styles"
+import { Pressable, Text, View } from "react-native"
+
+type Props = {
+ onPress: () => void
+ icon: React.ReactNode
+ title: string
+}
+
+export default function MenuItemRow({ onPress, icon, title }: Props) {
+ return (
+ { onPress() }} style={[Styles.btnMenuRow]}>
+
+ {icon}
+ {title}
+
+
+ )
+}
\ No newline at end of file
diff --git a/constants/ColorsStatus.ts b/constants/ColorsStatus.ts
index 4265ca1..9eeab6f 100644
--- a/constants/ColorsStatus.ts
+++ b/constants/ColorsStatus.ts
@@ -13,5 +13,14 @@ export const ColorsStatus = {
},
error: {
backgroundColor: '#DB1514'
+ },
+ orange: {
+ backgroundColor: 'orange'
+ },
+ white: {
+ backgroundColor: 'white'
+ },
+ lightGreen: {
+ backgroundColor: '#d2f0cb'
}
}
\ No newline at end of file
diff --git a/constants/Styles.ts b/constants/Styles.ts
index 06ebbcf..246a00f 100644
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -53,6 +53,9 @@ const Styles = StyleSheet.create({
cWhite: {
color: 'white'
},
+ cBlack: {
+ color: 'black'
+ },
cDefault: {
color: '#19345E'
},
@@ -68,6 +71,9 @@ const Styles = StyleSheet.create({
mb30: {
marginBottom: 30
},
+ mb100: {
+ marginBottom: 100
+ },
mv05: {
marginVertical: 5
},
@@ -80,12 +86,18 @@ const Styles = StyleSheet.create({
mt05: {
marginTop: 5
},
+ mt10: {
+ marginTop: 10
+ },
mr05: {
marginRight: 5
},
mr10: {
marginRight: 10
},
+ ml05: {
+ marginLeft: 5
+ },
ml10: {
marginLeft: 10
},
@@ -129,9 +141,21 @@ const Styles = StyleSheet.create({
marginTop: 15,
paddingVertical: 10
},
+ btnTab: {
+ alignItems: 'center',
+ paddingVertical: 10,
+ paddingHorizontal: 15,
+ borderRadius: 20,
+ flexDirection: 'row',
+ justifyContent: 'center'
+ },
+ btnMenuRow: {
+ width: '33%',
+ alignItems: 'center'
+ },
inputRoundForm: {
borderRadius: 10,
- borderColor: '#19345E',
+ borderColor: 'gray',
borderWidth: 1,
paddingVertical: 10,
paddingHorizontal: 15,
@@ -245,15 +269,62 @@ const Styles = StyleSheet.create({
borderColor: '#d6d8f6',
borderBottomWidth: 1,
},
+ wrapItemBorderAll: {
+ padding: 10,
+ borderColor: '#d6d8f6',
+ borderWidth: 1,
+ borderRadius: 10,
+ marginBottom: 10
+ },
+
userProfileSmall: {
- width: 50,
- height: 50,
+ width: 48,
+ height: 48,
+ borderRadius: 100
+ },
+ userProfileBig: {
+ width: 100,
+ height: 100,
borderRadius: 100
},
iconContent: {
padding: 10,
borderRadius: 100,
- }
+ },
+ wrapHeadViewMember: {
+ backgroundColor: '#19345E',
+ paddingVertical: 30,
+ alignItems: 'center',
+ borderBottomLeftRadius: 25,
+ borderBottomRightRadius: 25
+ },
+ modalBgTransparant: {
+ backgroundColor: 'rgba(0, 0, 0, 0.3)',
+ flex: 1
+ },
+ modalContent: {
+ width: '100%',
+ paddingBottom: 20,
+ backgroundColor: 'white',
+ borderTopRightRadius: 18,
+ borderTopLeftRadius: 18,
+ position: 'absolute',
+ bottom: 0,
+ },
+ titleContainer: {
+ backgroundColor: 'white',
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 10,
+ paddingHorizontal: 20,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingVertical: 10
+ },
+ contentContainer: {
+ paddingHorizontal: 20,
+ height: '80%'
+ },
})
export default Styles;
\ No newline at end of file