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

upd: calendar divisi

Browse Source 
Deskripsi:
- ui list acara
- ui tambah acara
- ui history acara
- ui detail acara
- ui edit acara

No Issues
This commit is contained in:
amel
2025-03-12 12:33:38 +08:00
parent 514b1bce7d
commit 75901bceb3
11 changed files with 473 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx Normal file
View File

@@ -0,0 +1,61 @@
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 Styles from "@/constants/Styles"
import { Stack, router } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, View, ToastAndroid, Text } from "react-native"
export default function EditEventCalendar() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Acara',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<InputForm label="Nama Acara" type="default" placeholder="Nama Acara" required bg="white" />
<InputForm label="Tanggal Acara" type="default" placeholder="Input Tanggal Acara" required bg="white" />
<View style={[Styles.rowSpaceBetween, Styles.mv10]}>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Waktu Awal<Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>--.--</Text>
</View>
</View>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Waktu Akhir <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>--.--</Text>
</View>
</View>
</View>
<InputForm label="Link Meet" type="default" placeholder="Link Meet" bg="white" />
<SelectForm bg="white" label="Ulangi Acara" placeholder="Ulangi Acara" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="Jumlah Pengulangan" type="numeric" placeholder="Jumlah Pengulangan" required bg="white" />
<InputForm label="Deskripsi" type="default" placeholder="Deskripsi" bg="white" />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.back()
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

88
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx Normal file
View File

@@ -0,0 +1,88 @@
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader"
import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
import Styles from "@/constants/Styles"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { Image, SafeAreaView, ScrollView, Text, View } from "react-native"
export default function DetailEventCalendar() {
const { id, detail } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Detail Acara',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightCalendarDetail id={detail} />
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.wrapPaper, Styles.mb15]}>
<View style={Styles.rowItemsCenter}>
<MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>Rapat Libur Lebaran</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>10 Maret 2025</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>07:30 | 09:45</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>Acara 1 Kali</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>meet.com</Text>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
<Text style={[Styles.textDefault]}>Rapat persiapan libur panjang lebaran</Text>
</View>
</View>
<View style={[Styles.mb15]}>
<View style={[Styles.rowSpaceBetween, Styles.mv05]}>
<Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
<Text style={[Styles.textDefault]}>Total 4 Anggota</Text>
</View>
<View style={[Styles.wrapPaper]}>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../../../../../../../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../../../../../../../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../../../../../../../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../../../../../../../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
/>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

61
app/(application)/division/[id]/(fitur-division)/calendar/create.tsx Normal file
View File

@@ -0,0 +1,61 @@
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 Styles from "@/constants/Styles";
import { Stack, router } from "expo-router";
import { useState } from "react";
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
export default function CalendarDivisionCreate() {
const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Acara',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<InputForm label="Nama Acara" type="default" placeholder="Nama Acara" required bg="white" />
<InputForm label="Tanggal Acara" type="default" placeholder="Input Tanggal Acara" required bg="white" />
<View style={[Styles.rowSpaceBetween, Styles.mv10]}>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Waktu Awal<Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>--.--</Text>
</View>
</View>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Waktu Akhir <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>--.--</Text>
</View>
</View>
</View>
<InputForm label="Link Meet" type="default" placeholder="Link Meet" bg="white" />
<SelectForm bg="white" label="Ulangi Acara" placeholder="Ulangi Acara" value={chooseGroup.label} required onPress={() => { }} />
<InputForm label="Jumlah Pengulangan" type="numeric" placeholder="Jumlah Pengulangan" required bg="white" />
<InputForm label="Deskripsi" type="default" placeholder="Deskripsi" bg="white" />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('./')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

26
app/(application)/division/[id]/(fitur-division)/calendar/history.tsx Normal file
View File

@@ -0,0 +1,26 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import ItemHistoryEvent from "@/components/calendar/itemHistoryEvent";
import InputSearch from "@/components/inputSearch";
import Styles from "@/constants/Styles";
import { router, Stack } from "expo-router";
import { SafeAreaView, ScrollView, Text, View } from "react-native";
export default function CalendarHistory(){
return(
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Riwayat Acara',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<InputSearch />
<ItemHistoryEvent/>
</View>
</ScrollView>
</SafeAreaView>
)
}

51
app/(application)/division/[id]/(fitur-division)/calendar/index.tsx Normal file
View File

@@ -0,0 +1,51 @@
import ButtonBackHeader from "@/components/buttonBackHeader"
import HeaderRightCalendarList from "@/components/calendar/headerCalendarList"
import EventItem from "@/components/eventItem"
import Styles from "@/constants/Styles"
import { router, Stack } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, Text, View } from "react-native"
import DateTimePicker, { CalendarComponents, CalendarDay, DateType, getDefaultStyles } from "react-native-ui-datepicker"
export default function CalendarDivision() {
const defaultStyles = getDefaultStyles()
const [selected, setSelected] = useState<DateType>()
const components: CalendarComponents = {
Day: (day: CalendarDay) => <Text>amalia</Text>,
// Month: (month: CalendarMonth) => <YourCustomMonth month={month} />
// etc
};
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Kalender',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightCalendarList />
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.wrapPaper, Styles.p10]}>
<DateTimePicker
// components={components}
mode="single"
date={selected}
onChange={({ date }) => setSelected(date)}
styles={defaultStyles}
/>
</View>
<View style={[Styles.mb15, Styles.mt15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
<View style={[Styles.wrapPaper]}>
<EventItem category="purple" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={()=>{router.push('./calendar/321')}}/>
<EventItem category="orange" title="Meeting Pertama" user="Amalia" jamAwal="10.00" jamAkhir="11.00" onPress={()=>{router.push('./calendar/321')}}/>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}

58
components/calendar/headerCalendarDetail.tsx Normal file
View File

@@ -0,0 +1,58 @@
import Styles from "@/constants/Styles"
import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
import { ToastAndroid, View } from "react-native"
import AlertKonfirmasi from "../alertKonfirmasi"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
type Props = {
id: string | string[]
}
export default function HeaderRightCalendarDetail({ 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={<MaterialIcons name="groups" color="black" size={25} />}
title="Tambah Anggota"
onPress={() => {
setVisible(false)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
router.push(`./${id}/edit`)
}}
/>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
title="Hapus"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menghapus data?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
router.back()
}
})
}}
/>
</View>
</DrawerBottom>
</>
)
}

39
components/calendar/headerCalendarList.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Styles from "@/constants/Styles"
import { AntDesign, MaterialCommunityIcons } 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"
export default function HeaderRightCalendarList() {
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 Acara"
onPress={() => {
setVisible(false)
router.push('./calendar/create')
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="history" color="black" size={25} />}
title="Riwayat"
onPress={() => {
setVisible(false)
router.push('./calendar/history')
}}
/>
</View>
</DrawerBottom>
</>
)
}

74
components/calendar/itemHistoryEvent.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
export default function ItemHistoryEvent() {
return (
<>
<View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>22 Jan</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Kamis</Text>
</View>
<View>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
<Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
</View>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>Acara 2</Text>
<Text style={[Styles.textDefault]}>10:30 | 12:00</Text>
</View>
</View>
</View>
<View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>15 Feb</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
</View>
<View>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
<Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
</View>
</View>
</View>
<View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>15 Feb</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
</View>
<View>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
<Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
</View>
</View>
</View>
<View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>15 Feb</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
</View>
<View>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
<Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
</View>
</View>
</View>
<View style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>15 Feb</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>Senin</Text>
</View>
<View>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>Acara 1</Text>
<Text style={[Styles.textDefault]}>07:00 | 08:00</Text>
</View>
</View>
</View>
</>
)
}

1
components/division/fiturDivisionDetail.tsx
View File

@@ -65,6 +65,7 @@ export default function FiturDivisionDetail() {
title="Kalender"
subtitle='23 Acara'
width={28}
onPress={() => {router.push('/division/123/calendar')}}
/>
</View>
</View>

9
components/eventItem.tsx
View File

@@ -1,5 +1,5 @@
import Styles from "@/constants/Styles"
import { Text, View } from "react-native"
import { Pressable, Text, View } from "react-native"
type Props = {
category: 'purple' | 'orange'
@@ -7,17 +7,18 @@ type Props = {
user: string
jamAwal: string
jamAkhir: string
onPress?: () => void
}
export default function EventItem({ category, title, user, jamAwal, jamAkhir }: Props) {
export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
return (
<View style={[Styles.itemEvent, { backgroundColor: category == 'orange' ? '#FED6C5' : '#D8D8F1' }]}>
<Pressable style={[Styles.itemEvent, { backgroundColor: category == 'orange' ? '#FED6C5' : '#D8D8F1' }]} onPress={onPress}>
<View style={[Styles.dividerEvent, { backgroundColor: category == 'orange' ? '#FB804C' : '#535FCA' }]} />
<View>
<Text>{jamAwal} - {jamAkhir}</Text>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>
<Text>Dibuat oleh : {user}</Text>
</View>
</View>
</Pressable>
)
}

9
constants/Styles.ts
View File

@@ -107,6 +107,12 @@ const Styles = StyleSheet.create({
ml10: {
marginLeft: 10
},
ph05: {
paddingHorizontal: 5,
},
ph10: {
paddingHorizontal: 10,
},
ph15: {
paddingHorizontal: 15,
},
@@ -122,6 +128,9 @@ const Styles = StyleSheet.create({
p10: {
padding: 10
},
round10: {
borderRadius: 10
},
round30: {
borderRadius: 30
},