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

upd: projeect

Browse Source 
Deskripsi:
- ui list project
- ui grid project
- ui create project

No Issues
This commit is contained in:
amel
2025-03-05 15:35:21 +08:00
parent 6afe99c314
commit 8806f33a8d
17 changed files with 400 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
import HeaderMemberList from "@/components/member/headerMemberList";
import HeaderRightProjectList from "@/components/project/headerProjectList";
import { Headers } from "@/constants/Headers";
import { router, Stack } from "expo-router";
import { StatusBar } from 'expo-status-bar';
@@ -28,6 +29,12 @@ export default function RootLayout() {
headerTitleAlign: 'center',
headerRight: () => <HeaderDiscussionGeneral />
}} />
<Stack.Screen name="project/index" options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
title: 'Kegiatan',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightProjectList />
}} />
</Stack>
<StatusBar style="light" />
</>

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

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

29
app/(application)/project/[id]/index.tsx Normal file
View File

@@ -0,0 +1,29 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightProjectDetail from "@/components/project/headerProjectDetail";
import SectionProgress from "@/components/sectionProgress";
import SectionTanggalTugas from "@/components/sectionTanggalTugas";
import Styles from "@/constants/Styles";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { SafeAreaView, ScrollView, Text, View } from "react-native";
export default function DetailProject() {
const { id } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Judul Kegiatan',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightProjectDetail id={id} />,
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<SectionProgress text="Kemajuan Kegiatan 50%" />
<SectionTanggalTugas />
</View>
</ScrollView>
</SafeAreaView>
)
}

47
app/(application)/project/create.tsx Normal file
View File

@@ -0,0 +1,47 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi";
import ButtonBackHeader from "@/components/buttonBackHeader";
import { ButtonForm } from "@/components/buttonForm";
import ButtonSelect from "@/components/buttonSelect";
import { InputForm } from "@/components/inputForm";
import SelectForm from "@/components/selectForm";
import Styles from "@/constants/Styles";
import { router, Stack } from "expo-router";
import { useState } from "react";
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
export default function CreateProject() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Kegiatan',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="Kegiatan" type="default" placeholder="Nama Kegiatan" required />
<ButtonSelect value="Tambah Tanggal & Tugas" />
<ButtonSelect value="Upload File" />
<ButtonSelect value="Tambah Anggota" />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/project?status=0')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

138
app/(application)/project/index.tsx Normal file
View File

@@ -0,0 +1,138 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import PaperGridContent from "@/components/paperGridContent";
import ProgressBar from "@/components/progressBar";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
export default function ListProject() {
const { status } = useLocalSearchParams<{ status: string }>()
const [isList, setList] = useState(false)
return (
<SafeAreaView>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<ScrollView horizontal style={[Styles.mb10]}>
<ButtonTab
active={status}
value="0"
onPress={() => { router.push('/project?status=0') }}
label="Segera"
icon={<MaterialCommunityIcons name="clock-alert-outline" color={status == "0" ? 'white' : 'black'} size={20} />}
n={4} />
<ButtonTab
active={status}
value="1"
onPress={() => { router.push('/project?status=1') }}
label="Dikerjakan"
icon={<MaterialCommunityIcons name="progress-check" color={status == "1" ? 'white' : 'black'} size={20} />}
n={4} />
<ButtonTab
active={status}
value="2"
onPress={() => { router.push('/project?status=2') }}
label="Selesai"
icon={<Ionicons name="checkmark-done-circle-outline" color={status == "2" ? 'white' : 'black'} size={20} />}
n={4} />
<ButtonTab
active={status}
value="3"
onPress={() => { router.push('/project?status=3') }}
label="Batal"
icon={<AntDesign name="closecircleo" color={status == "3" ? 'white' : 'black'} size={20} />}
n={4} />
</ScrollView>
<View style={[Styles.rowSpaceBetween]}>
<InputSearch width={68} />
<Pressable onPress={() => { setList(!isList) }}>
<MaterialCommunityIcons name={isList ? 'format-list-bulleted' : 'view-grid'} color={"black"} size={30} />
</Pressable>
</View>
<View style={[Styles.mv05]}>
<Text>Filter : Dinas</Text>
</View>
{
isList
?
<View>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={'#384288'} />
</View>
}
title="Pembangunan Jembatan"
/>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={'#384288'} />
</View>
}
title="Pembangunan Jembatan"
/>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={'#384288'} />
</View>
}
title="Pembangunan Jembatan"
/>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="areachart" size={25} color={'#384288'} />
</View>
}
title="Pembangunan Jembatan"
/>
</View>
:
<View>
<PaperGridContent onPress={() => { router.push('/project/234') }} content="page" title="Pembangunan Jembatan" headerColor="primary">
<ProgressBar />
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
<LabelStatus size="default" category="primary" text="SEGERA" />
</View>
</PaperGridContent>
<PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
<ProgressBar />
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
<LabelStatus size="default" category="primary" text="SEGERA" />
</View>
</PaperGridContent>
<PaperGridContent content="page" title="Pembangunan Jembatan" headerColor="primary">
<ProgressBar />
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>13 Februari 2025</Text>
<LabelStatus size="default" category="primary" text="SEGERA" />
</View>
</PaperGridContent>
</View>
}
</View>
</ScrollView>
</SafeAreaView>
)
}

2
components/buttonTab.tsx
View File

@@ -15,7 +15,7 @@ type Props = {
export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
return (
<TouchableOpacity style={[Styles.btnTab, (active == value) ? ColorsStatus.orange : ColorsStatus.white, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
<TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
{icon}
<Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text>
</TouchableOpacity>

2
components/home/fiturHome.tsx
View File

@@ -11,7 +11,7 @@ export default function FiturHome() {
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
<View style={[Styles.rowSpaceBetween]}>
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" onPress={() => { router.push('/feature') }} />
</View>

7
components/inputForm.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles";
import { View, TextInput, Text } from "react-native";
import { View, TextInput, Text, Dimensions } from "react-native";
type Props = {
label?: string;
@@ -13,10 +13,12 @@ type Props = {
required?: boolean;
type: 'default' | 'visible-password' | 'numeric'
round?: boolean
width?: number
};
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round }: Props) {
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width }: Props) {
const lebar = Dimensions.get("window").width;
if (itemLeft != undefined || itemRight != undefined) {
return (
@@ -35,6 +37,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
placeholder={placeholder}
keyboardType={type}
onChangeText={onChange}
style={{ width: width && lebar * width / 100 }}
/>
</View>
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}

3
components/inputSearch.tsx
View File

@@ -1,7 +1,7 @@
import { Feather } from "@expo/vector-icons";
import { InputForm } from "./inputForm";
export default function InputSearch({ onChange }: { onChange?: (val: string) => void }) {
export default function InputSearch({ onChange, width }: { onChange?: (val: string) => void, width?: number }) {
return (
<InputForm
type="default"
@@ -9,6 +9,7 @@ export default function InputSearch({ onChange }: { onChange?: (val: string) =>
round
itemLeft={<Feather name="search" size={20} color="grey" />}
onChange={onChange}
width={width}
/>
)
}

7
components/modalFilter.tsx
View File

@@ -9,7 +9,7 @@ import { router } from "expo-router"
type Props = {
open: boolean,
close: (value: boolean) => void
page: 'position' | 'member' | 'discussion'
page: 'position' | 'member' | 'discussion' | 'project'
}
export default function ModalFilter({ open, close, page }: Props) {
@@ -34,7 +34,10 @@ export default function ModalFilter({ open, close, page }: Props) {
<View>
<ButtonForm text="Terapkan" onPress={() => {
close(false)
router.push(`/${page}?active=true`)
page == 'project' ?
router.push(`/${page}?status=0`)
:
router.push(`/${page}?active=true`)
}} />
</View>
</View>

23
components/paperGridContent.tsx
View File

@@ -1,23 +1,26 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import ProgressBar from "./progressBar";
import { Pressable, Text, View } from "react-native";
type Props = {
content: 'carousel' | 'page';
children: React.ReactNode;
title: string
headerColor: 'primary' | 'warning'
onPress?: () => void
};
export default function PaperGridContent({ content, children, title, headerColor }: Props) {
export default function PaperGridContent({ content, children, title, headerColor, onPress }: Props) {
return (
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
<Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[Styles.headerPaperGrid]}>
<Text style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite]}>{title}</Text>
</View>
<View style={[Styles.contentPaperGrid]}>
{children}
</View>
</View>
<View style={[Styles.contentPaperGrid]}>
{children}
</View>
</View>
</Pressable>
)
}

9
components/progressBar.tsx
View File

@@ -2,7 +2,12 @@ import Styles from "@/constants/Styles";
import { useEffect, useState } from "react";
import { Animated, Text, View } from "react-native";
export default function ProgressBar() {
type Props = {
margin?: number
}
export default function ProgressBar({ margin }: Props) {
const [progress, setProgress] = useState(new Animated.Value(0));
@@ -16,7 +21,7 @@ export default function ProgressBar() {
}, []);
return (
<View style={Styles.wrapBar}>
<View style={[Styles.wrapBar, { margin: margin && margin }]}>
<Animated.View style={[Styles.contentBar, { width: progress }]} />
</View>
)

66
components/project/headerProjectDetail.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { useState } from "react"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
type Props = {
id: string | string[]
}
export default function HeaderRightProjectDetail({ 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={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Tugas"
onPress={() => {
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
title="Tambah File"
onPress={() => {
}}
/>
<MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />}
title="Tambah Anggota"
onPress={() => {
setVisible(false)
// router.push(`/discussion/member/${id}`)
}}
/>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
// router.push(`/discussion/edit/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
title="Batal"
onPress={() => {
}}
/>
</View>
</DrawerBottom>
</>
)
}

40
components/project/headerProjectList.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { useState } from "react"
import ButtonMenuHeader from "../buttonMenuHeader"
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 ModalFilter from "../modalFilter"
export default function HeaderRightProjectList() {
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 Kegiatan"
onPress={() => {
setVisible(false)
router.push('/project/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="project" />
</>
)
}

23
components/sectionProgress.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign } from "@expo/vector-icons";
import { Text, View } from "react-native";
import ProgressBar from "./progressBar";
type Props = {
text: string
}
export default function SectionProgress({ text }: Props) {
return (
<View style={[ColorsStatus.lightGreen, Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center' }]}>
<View style={[Styles.iconContent, ColorsStatus.orange, { alignItems: 'center', justifyContent: 'center' }]}>
<AntDesign name="areachart" size={30} color={'#384288'} />
</View>
<View style={[Styles.ml10, { flex: 1 }]}>
<Text style={[Styles.mb05]}>{text}</Text>
<ProgressBar margin={0} />
</View>
</View>
)
}

13
components/sectionTanggalTugas.tsx Normal file
View File

@@ -0,0 +1,13 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
export default function SectionTanggalTugas() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Tanggal Dan Tugas</Text>
<View style={[Styles.wrapPaper]}>
</View>
</View>
)
}

2
constants/Styles.ts
View File

@@ -217,6 +217,7 @@ const Styles = StyleSheet.create({
shadowRadius: 3,
elevation: 10,
borderRadius: 15,
marginBottom:15
},
wrapGridCaraousel: {
width: '80%',
@@ -247,6 +248,7 @@ const Styles = StyleSheet.create({
backgroundColor: '#ccc',
borderRadius: 10,
margin: 10,
width:'90%'
},
contentBar: {
height: 20,