upd: announcement

Deskripsi:
- ui list announcement
- ui detail announcement
- ui create announcement
- ui edit announcement
- ui hapus announcement

No Issues

app/(application)/announcement/[id].tsx

@@ -0,0 +1,55 @@
+import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import Styles from "@/constants/Styles";
+import { AntDesign, MaterialIcons } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { SafeAreaView, ScrollView, SectionList, Text, View } from "react-native";
+
+export default function DetailAnnouncement() {
+   const { id } = useLocalSearchParams()
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pengumuman',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightAnnouncementDetail id={id} />,
+            }}
+         />
+         {/* <ScrollView> */}
+         <View style={[Styles.p15]}>
+            <View style={[Styles.wrapPaper]}>
+               <View style={Styles.rowItemsCenter}>
+                  <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
+                  <Text style={[Styles.textDefaultSemiBold]}>Libur Nyepi</Text>
+               </View>
+               <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                  <AntDesign name="profile" size={30} color="black" style={Styles.mr05} />
+                  <Text style={[Styles.textDefault]}>Pengumuman terkait libur nyepi</Text>
+               </View>
+            </View>
+            <View style={[Styles.wrapPaper, Styles.mv15, { paddingTop: 0, paddingBottom: 10 }]}>
+               <SectionList
+                  sections={[
+                     { title: 'Dinas', data: ['TU dan Umum', 'Kasi Pemerintahan', 'Pelaksana Kewilayahan'] },
+                     {
+                        title: 'Adat',
+                        data: [
+                           'PKK',
+                           'Karang Taruna',
+                        ],
+                     },
+                  ]}
+                  renderItem={({ item }) => <Text style={Styles.textDefault}>{item}</Text>}
+                  renderSectionHeader={({ section }) => (
+                     <Text style={[Styles.textDefaultSemiBold, Styles.mt10, { borderBottomWidth: 1, borderBottomColor: 'gray' }]}>{section.title}</Text>
+                  )}
+                  keyExtractor={item => `basicListEntry-${item}`}
+               />
+            </View>
+         </View>
+         {/* </ScrollView> */}
+      </SafeAreaView>
+   )
+}

app/(application)/announcement/create.tsx

@@ -0,0 +1,41 @@
+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 Styles from "@/constants/Styles";
+import { router, Stack } from "expo-router";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";
+
+export default function CreateAnnouncement() {
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Pengumuman',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm label="Judul" type="default" placeholder="Judul Pengumuman" required />
+               <InputForm label="Pengumuman" type="default" placeholder="Deskripsi Pengumuman" required />
+               <ButtonSelect value="Pilih divisi penerima pengumuman" />
+               <ButtonForm
+                  text="SIMPAN"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                        onPress: () => {
+                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+                           router.push('/announcement')
+                        }
+                     })
+                  }} />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/announcement/edit/[id].tsx

@@ -0,0 +1,41 @@
+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 Styles from "@/constants/Styles"
+import { router, Stack } from "expo-router"
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+
+export default function EditAnnouncement() {
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Edit Pengumuman',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm label="Judul" type="default" placeholder="Judul Pengumuman" required />
+               <InputForm label="Pengumuman" type="default" placeholder="Deskripsi Pengumuman" required />
+               <ButtonSelect value="Pilih divisi penerima pengumuman" />
+               <ButtonForm
+                  text="SIMPAN"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin mengubah data?',
+                        onPress: () => {
+                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                           router.push('/announcement')
+                        }
+                     })
+                  }} />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/announcement/index.tsx

@@ -0,0 +1,114 @@
+import HeaderRightAnnouncementList from "@/components/announcement/headerAnnouncementList";
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import InputSearch from "@/components/inputSearch";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { MaterialIcons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { SafeAreaView, ScrollView, View } from "react-native";
+
+export default function Announcement() {
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pengumuman',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightAnnouncementList />
+            }}
+         />
+
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputSearch />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+               <BorderBottomItem
+                  onPress={() => {router.push('/announcement/7493')}}
+                  borderType="bottom"
+                  icon={
+                     <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                        <MaterialIcons name="campaign" size={25} color={'#384288'} />
+                     </View>
+                  }
+                  title="Libur Nyepi"
+                  desc="Pengumuman terkait libur nyepi"
+                  rightTopInfo="23 Mar 2025"
+               />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/feature.tsx

@@ -19,12 +19,12 @@ export default function Feature() {
             <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={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" />
-               <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }}/>
+               <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>
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member?active=true') }}/>
-               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position?active=true') }}/>
+               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member?active=true') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position?active=true') }} />
                <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group?active=true') }} />
                <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />
             </View>

components/announcement/headerAnnouncementDetail.tsx

@@ -0,0 +1,48 @@
+import Styles from "@/constants/Styles"
+import { Ionicons, MaterialCommunityIcons } 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 HeaderRightAnnouncementDetail({ 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="pencil-outline" color="black" size={25} />}
+                  title="Edit"
+                  onPress={() => {
+                     setVisible(false)
+                     router.push(`/announcement/edit/${id}`)
+                  }}
+               />
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menghapus pengumuman ini?',
+                        onPress: () => {
+                           setVisible(false)
+                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                           router.push('/announcement')
+                        }
+                     })
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </>
+   )
+}

components/announcement/headerAnnouncementList.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react"
+import ButtonMenuHeader from "../buttonMenuHeader"
+import DrawerBottom from "../drawerBottom"
+import { View } from "react-native"
+import MenuItemRow from "../menuItemRow"
+import { AntDesign } from "@expo/vector-icons"
+import { router } from "expo-router"
+import Styles from "@/constants/Styles"
+
+export default function HeaderRightAnnouncementList() {
+   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 Pengumuman"
+                  onPress={() => {
+                     setVisible(false)
+                     router.push('/announcement/create')
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </>
+   )
+}

components/home/fiturHome.tsx

@@ -12,8 +12,8 @@ export default function FiturHome() {
          <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={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" />
-            <ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" onPress={() => { router.push('/feature') }}/>
+            <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>
       </View>
    )

components/menuItemRow.tsx

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