upd: project

Deskripsi: - update button save pada tambah edit project - ui edit tugas dan tanggal project - modal menu detail tugas dan tanggal - modal menu detail file - modal menu detail anggota project No Issues
2025-03-13 14:56:24 +08:00
parent c9e5260644
commit 4139c95794
12 changed files with 387 additions and 129 deletions
--- a/app/(application)/project/[id]/add-file.tsx
+++ b/app/(application)/project/[id]/add-file.tsx
@@ -1,7 +1,6 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import BorderBottomItem from "@/components/borderBottomItem"
 import ButtonBackHeader from "@/components/buttonBackHeader"
-import { ButtonForm } from "@/components/buttonForm"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import ButtonSelect from "@/components/buttonSelect"
 import Styles from "@/constants/Styles"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
@@ -18,6 +17,10 @@ export default function ProjectAddFile() {
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Tambah File',
               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
+                  router.push('/project/4324')
+               }} />
            }}
         />
         <ScrollView>
@@ -40,7 +43,7 @@ export default function ProjectAddFile() {
                     />
                  </View>
               </View>
-               <ButtonForm
+               {/* <ButtonForm
                  text="SIMPAN"
                  onPress={() => {
                     AlertKonfirmasi({
@@ -51,7 +54,7 @@ export default function ProjectAddFile() {
                           router.push('/project/4324')
                        }
                     })
-                  }} />
+                  }} /> */}
            </View>
         </ScrollView>
      </SafeAreaView>
--- a/app/(application)/project/[id]/add-task.tsx
+++ b/app/(application)/project/[id]/add-task.tsx
@@ -1,13 +1,12 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import ButtonBackHeader from "@/components/buttonBackHeader"
-import { ButtonForm } from "@/components/buttonForm"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import { InputForm } from "@/components/inputForm"
 import Styles from "@/constants/Styles"
 import dayjs from "dayjs"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useState } from "react"
 import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
-import DateTimePicker, { DateType, getDefaultStyles } from 'react-native-ui-datepicker';
+import DateTimePicker, { DateType, getDefaultStyles } from 'react-native-ui-datepicker'

 export default function ProjectAddTask() {
   const { id } = useLocalSearchParams()
@@ -27,6 +26,10 @@ export default function ProjectAddTask() {
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Tambah Tugas',
               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
+                  router.push('/project/4324')
+               }} />
            }}
         />
         <ScrollView>
@@ -55,7 +58,7 @@ export default function ProjectAddTask() {
                  </View>
               </View>
               <InputForm label="Judul Tugas" type="default" placeholder="Judul Tugas" required bg="white" />
-               <ButtonForm
+               {/* <ButtonForm
                  text="SIMPAN"
                  onPress={() => {
                     AlertKonfirmasi({
@@ -66,7 +69,7 @@ export default function ProjectAddTask() {
                           router.push('/project/4324')
                        }
                     })
-                  }} />
+                  }} /> */}
            </View>
         </ScrollView>
      </SafeAreaView>
--- a/app/(application)/project/[id]/cancel.tsx
+++ b/app/(application)/project/[id]/cancel.tsx
@@ -1,6 +1,5 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import ButtonBackHeader from "@/components/buttonBackHeader"
-import { ButtonForm } from "@/components/buttonForm"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import { InputForm } from "@/components/inputForm"
 import Styles from "@/constants/Styles"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -15,12 +14,16 @@ export default function ProjectCancel() {
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Pembatalan Kegiatan',
               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="cancel" onPress={() => {
+                  ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                  router.push('/project/4324')
+               }} />
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
               <InputForm label="Alasan Pembatalan" type="default" placeholder="Alasan Pembatalan" required bg="white" />
-               <ButtonForm
+               {/* <ButtonForm
                  text="SIMPAN"
                  onPress={() => {
                     AlertKonfirmasi({
@@ -31,7 +34,7 @@ export default function ProjectCancel() {
                           router.push('/project/4324')
                        }
                     })
-                  }} />
+                  }} /> */}
            </View>
         </ScrollView>
      </SafeAreaView>
--- a/app/(application)/project/[id]/edit.tsx
+++ b/app/(application)/project/[id]/edit.tsx
@@ -1,6 +1,5 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import ButtonBackHeader from "@/components/buttonBackHeader"
-import { ButtonForm } from "@/components/buttonForm"
+import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import { InputForm } from "@/components/inputForm"
 import Styles from "@/constants/Styles"
 import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -10,30 +9,34 @@ export default function EditProject() {
   const { id } = useLocalSearchParams()
   return (
      <SafeAreaView>
-      <Stack.Screen
-         options={{
-            headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-            headerTitle: 'Edit Judul Kegiatan',
-            headerTitleAlign: 'center',
-         }}
-      />
-      <ScrollView>
-         <View style={[Styles.p15, Styles.mb100]}>
-            <InputForm label="Judul Kegiatan" type="default" placeholder="Judul Kegiatan" required bg="white" />
-            <ButtonForm
-               text="SIMPAN"
-               onPress={() => {
-                  AlertKonfirmasi({
-                     title: 'Konfirmasi',
-                     desc: 'Apakah anda yakin ingin mengubah data?',
-                     onPress: () => {
-                        ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
-                        router.push('/project/4324')
-                     }
-                  })
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Edit Judul Kegiatan',
+               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="update" onPress={() => {
+                  ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                  router.push('/project/4324')
               }} />
-         </View>
-      </ScrollView>
-   </SafeAreaView>
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <InputForm label="Judul Kegiatan" type="default" placeholder="Judul Kegiatan" required bg="white" />
+               {/* <ButtonForm
+                  text="SIMPAN"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin mengubah data?',
+                        onPress: () => {
+                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                           router.push('/project/4324')
+                        }
+                     })
+                  }} /> */}
+            </View>
+         </ScrollView>
+      </SafeAreaView>
   )
 }
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -1,13 +1,12 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import ButtonBackHeader from "@/components/buttonBackHeader";
-import { ButtonForm } from "@/components/buttonForm";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
 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";
+import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native";

 export default function CreateProject() {
   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
@@ -19,6 +18,10 @@ export default function CreateProject() {
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Tambah Kegiatan',
               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
+                  router.push('/project?status=0')
+               }} />
            }}
         />
         <ScrollView>
@@ -28,7 +31,7 @@ export default function CreateProject() {
               <ButtonSelect value="Tambah Tanggal & Tugas" />
               <ButtonSelect value="Upload File" />
               <ButtonSelect value="Tambah Anggota" />
-               <ButtonForm
+               {/* <ButtonForm
                  text="SIMPAN"
                  onPress={() => {
                     AlertKonfirmasi({
@@ -39,7 +42,7 @@ export default function CreateProject() {
                           router.push('/project?status=0')
                        }
                     })
-                  }} />
+                  }} /> */}
            </View>
         </ScrollView>
      </SafeAreaView>
--- a/app/(application)/project/update/[detail].tsx
+++ b/app/(application)/project/update/[detail].tsx
@@ -0,0 +1,65 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import DateTimePicker, { DateType, getDefaultStyles } from "react-native-ui-datepicker";
+
+export default function UpdateProjectTask() {
+   const { detail } = useLocalSearchParams()
+   const [range, setRange] = useState<{ startDate: DateType; endDate: DateType; }>({ startDate: undefined, endDate: undefined });
+   const defaultStyles = getDefaultStyles()
+
+   const from = range.startDate
+      ? dayjs(range.startDate).format('MMM DD, YYYY')
+      : '';
+   const to = range.endDate ? dayjs(range.endDate).format('MMM DD, YYYY') : '';
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Edit Tanggal dan Tugas',
+               headerTitleAlign: 'center',
+               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
+                  router.push('/project/4324')
+               }} />
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.wrapPaper, Styles.p10]}>
+                  <DateTimePicker
+                     mode="range"
+                     startDate={range.startDate}
+                     endDate={range.endDate}
+                     onChange={(param) => setRange(param)}
+                     styles={defaultStyles}
+                  />
+               </View>
+               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
+                  <View style={[{ width: '48%' }]}>
+                     <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
+                     <View style={[Styles.wrapPaper, Styles.p10]}>
+                        <Text style={{ textAlign: 'center' }}>{from}</Text>
+                     </View>
+                  </View>
+                  <View style={[{ width: '48%' }]}>
+                     <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text>
+                     <View style={[Styles.wrapPaper, Styles.p10]}>
+                        <Text style={{ textAlign: 'center' }}>{to}</Text>
+                     </View>
+                  </View>
+               </View>
+               <InputForm label="Judul Tugas" type="default" placeholder="Judul Tugas" required bg="white" />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}
--- a/components/buttonSaveHeader.tsx
+++ b/components/buttonSaveHeader.tsx
@@ -3,7 +3,7 @@ import { ButtonHeader } from "./buttonHeader"
 import AlertKonfirmasi from "./alertKonfirmasi"

 type Props = {
-   category: 'create' | 'update'
+   category: 'create' | 'update' | 'cancel'
   onPress?: () => void
   disable?: boolean
 }
@@ -16,7 +16,11 @@ export default function ButtonSaveHeader({ category, onPress, disable }: Props)
            onPress={() => {
               AlertKonfirmasi({
                  title: 'Konfirmasi',
-                  desc: category == 'create' ? 'Apakah anda yakin ingin menambahkan data?' : 'Apakah anda yakin mengubah data?',
+                  desc: category == 'create'
+                     ? 'Apakah anda yakin ingin menambahkan data?'
+                     : category == 'cancel'
+                        ? 'Apakah anda yakin ingin membatalkan kegiatan? Pembatalan bersifat permanen'
+                        : 'Apakah anda yakin mengubah data?',
                  onPress: () => {
                     onPress && onPress()
                  }
--- a/components/itemSectionTanggalTugas.tsx
+++ b/components/itemSectionTanggalTugas.tsx
@@ -1,6 +1,6 @@
 import Styles from "@/constants/Styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";


 type Props = {
@@ -8,11 +8,12 @@ type Props = {
   title: string
   dateStart: string
   dateEnd: string
+   onPress?: () => void
 }

-export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd }: Props) {
+export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
   return (
-      <View style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]}>
+      <Pressable style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]} onPress={onPress}>
         <View style={[Styles.rowItemsCenter]}>
            {
               done ?
@@ -48,6 +49,6 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
               </View>
            </View>
         </View>
-      </View>
+      </Pressable>
   )
 }
--- a/components/modalSelect.tsx
+++ b/components/modalSelect.tsx
@@ -8,7 +8,7 @@ type Props = {
   open: boolean
   close: (value: boolean) => void
   title: string
-   category: 'group'
+   category: 'group' | 'status-task'
   choose: string
   onSelect: (value: { val: string, label: string }) => void
 }
@@ -19,23 +19,43 @@ export default function ModalSelect({ open, close, title, category, choose, onSe
   return (
      <DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
         <View>
-            <Pressable style={[Styles.itemSelectModal]} onPress={() => {
-               onSelect({ val: 'dinas', label: 'Dinas' })
-               setChoose('dinas')
-               close(false)
-            }}>
-               <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
-               <AntDesign name="check" size={20} />
-            </Pressable>
-            <Pressable style={[Styles.itemSelectModal]}>
-               <Text>Adat</Text>
-            </Pressable>
-            <Pressable style={[Styles.itemSelectModal]}>
-               <Text>Karang Taruna</Text>
-            </Pressable>
-            <Pressable style={[Styles.itemSelectModal]}>
-               <Text>PKK</Text>
-            </Pressable>
+            {
+               category == 'group' ?
+                  <>
+                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
+                        onSelect({ val: 'dinas', label: 'Dinas' })
+                        setChoose('dinas')
+                        close(false)
+                     }}>
+                        <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
+                        <AntDesign name="check" size={20} />
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>Adat</Text>
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>Karang Taruna</Text>
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>PKK</Text>
+                     </Pressable>
+                  </>
+                  :
+                  <>
+                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
+                        onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
+                        setChoose('blm-dikerjakan')
+                        close(false)
+                     }}>
+                        <Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
+                        <AntDesign name="check" size={20} />
+                     </Pressable>
+                     <Pressable style={[Styles.itemSelectModal]}>
+                        <Text>Selesai</Text>
+                     </Pressable>
+                  </>
+            }
+
         </View>
      </DrawerBottom>
   )
--- a/components/sectionFile.tsx
+++ b/components/sectionFile.tsx
@@ -1,26 +1,72 @@
 import Styles from "@/constants/Styles";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { Text, View } from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Text, ToastAndroid, View } from "react-native";
 import BorderBottomItem from "./borderBottomItem";
+import { useState } from "react";
+import { router } from "expo-router";
+import AlertKonfirmasi from "./alertKonfirmasi";
+import DrawerBottom from "./drawerBottom";
+import MenuItemRow from "./menuItemRow";

 export default function SectionFile() {
+   const [isModal, setModal] = useState(false)
+
   return (
-      <View style={[Styles.mb15]}>
-         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-         <View style={[Styles.wrapPaper]}>
-            <BorderBottomItem
-               borderType="all"
-               icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-               title="image_pertama.jpg"
-               titleWeight="normal"
-            />
-            <BorderBottomItem
-               borderType="all"
-               icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-               title="file_kedua.pdf"
-               titleWeight="normal"
-            />
+      <>
+         <View style={[Styles.mb15]}>
+            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+            <View style={[Styles.wrapPaper]}>
+               <BorderBottomItem
+                  borderType="all"
+                  icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                  title="image_pertama.jpg"
+                  titleWeight="normal"
+                  onPress={() => { setModal(true) }}
+               />
+               <BorderBottomItem
+                  borderType="all"
+                  icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                  title="file_kedua.pdf"
+                  titleWeight="normal"
+                  onPress={() => { setModal(true) }}
+               />
+            </View>
         </View>
-      </View>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  title="Lihat File"
+                  onPress={() => {
+                     setModal(false)
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="download" color="black" size={25} />}
+                  title="Download"
+                  onPress={() => {
+                     setModal(false)
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
+                        onPress: () => {
+                           setModal(false)
+                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </>
   )
 }
--- a/components/sectionMember.tsx
+++ b/components/sectionMember.tsx
@@ -1,45 +1,88 @@
 import Styles from "@/constants/Styles";
-import { Image, Text, View } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useState } from "react";
+import { Image, Text, ToastAndroid, View } from "react-native";
+import AlertKonfirmasi from "./alertKonfirmasi";
 import BorderBottomItem from "./borderBottomItem";
+import DrawerBottom from "./drawerBottom";
+import MenuItemRow from "./menuItemRow";
+import { router } from "expo-router";

 export default function SectionMember() {
+   const [isModal, setModal] = useState(false)
+
   return (
-      <View style={[Styles.mb15]}>
-         <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
-            <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
-            <Text style={[Styles.textDefault]}>Total 5 Anggota</Text>
+      <>
+         <View style={[Styles.mb15]}>
+            <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+               <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
+               <Text style={[Styles.textDefault]}>Total 5 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"
+                  rightTopInfo="Anggota"
+                  onPress={() => { setModal(true) }}
+               />
+               <BorderBottomItem
+                  borderType="bottom"
+                  icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
+                  title="Amalia Dwi"
+                  subtitle="Dinas - Bendahara"
+                  rightTopInfo="Anggota"
+                  onPress={() => { setModal(true) }}
+               />
+               <BorderBottomItem
+                  borderType="bottom"
+                  icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
+                  title="Amalia Dwi"
+                  subtitle="Dinas - Bendahara"
+                  rightTopInfo="Anggota"
+                  onPress={() => { setModal(true) }}
+               />
+               <BorderBottomItem
+                  borderType="bottom"
+                  icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
+                  title="Amalia Dwi"
+                  subtitle="Dinas - Bendahara"
+                  rightTopInfo="Anggota"
+                  onPress={() => { setModal(true) }}
+               />
+            </View>
         </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"
-               rightTopInfo="Anggota"
-            />
-            <BorderBottomItem
-               borderType="bottom"
-               icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
-               title="Amalia Dwi"
-               subtitle="Dinas - Bendahara"
-               rightTopInfo="Anggota"
-            />
-            <BorderBottomItem
-               borderType="bottom"
-               icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
-               title="Amalia Dwi"
-               subtitle="Dinas - Bendahara"
-               rightTopInfo="Anggota"
-            />
-            <BorderBottomItem
-               borderType="bottom"
-               icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
-               title="Amalia Dwi"
-               subtitle="Dinas - Bendahara"
-               rightTopInfo="Anggota"
-            />
-         </View>
-      </View>
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  title="Lihat Profil"
+                  onPress={() => {
+                     setModal(false)
+                     router.push('/member/123')
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                  title="Keluarkan"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                        onPress: () => {
+                           setModal(false)
+                           ToastAndroid.show('Berhasil mengeluarkan anggota', ToastAndroid.SHORT)
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </>
   )
 }
--- a/components/sectionTanggalTugas.tsx
+++ b/components/sectionTanggalTugas.tsx
@@ -1,15 +1,79 @@
 import Styles from "@/constants/Styles";
-import { Text, View } from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useState } from "react";
+import { Text, ToastAndroid, View } from "react-native";
+import DrawerBottom from "./drawerBottom";
 import ItemSectionTanggalTugas from "./itemSectionTanggalTugas";
+import MenuItemRow from "./menuItemRow";
+import AlertKonfirmasi from "./alertKonfirmasi";
+import ModalSelect from "./modalSelect";

 export default function SectionTanggalTugas() {
+   const [isModal, setModal] = useState(false)
+   const [isSelect, setSelect] = useState(false)
+   const [choose, setChoose] = useState({ val: '', label: '' })
+
   return (
-      <View style={[Styles.mb15, Styles.mt10]}>
-         <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
-         <View style={[Styles.wrapPaper]}>
-            <ItemSectionTanggalTugas done={false} title="Pertama" dateStart="12-03-2023" dateEnd="15-03-2023" />
-            <ItemSectionTanggalTugas done={true} title="Kedua" dateStart="15-03-2023" dateEnd="20-03-2023" />
+      <>
+         <View style={[Styles.mb15, Styles.mt10]}>
+            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
+            <View style={[Styles.wrapPaper]}>
+               <ItemSectionTanggalTugas done={false} title="Pertama" dateStart="12-03-2023" dateEnd="15-03-2023" onPress={() => { setModal(true) }} />
+               <ItemSectionTanggalTugas done={true} title="Kedua" dateStart="15-03-2023" dateEnd="20-03-2023" onPress={() => { setModal(true) }} />
+            </View>
         </View>
-      </View>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="list-status" color="black" size={25} />}
+                  title="Update Status"
+                  onPress={() => {
+                     setModal(false)
+                     setSelect(true)
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  title="Edit Tugas"
+                  onPress={() => {
+                     setModal(false)
+                     router.push(`/project/update/124`)
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus Tugas"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menghapus data ini?',
+                        onPress: () => {
+                           setModal(false)
+                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                           router.push('/project/243')
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+
+         <ModalSelect
+            category="status-task"
+            close={setSelect}
+            onSelect={(value) => {
+               setChoose(value)
+               setSelect(false)
+               ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+            }}
+            title="Status"
+            choose={choose.val}
+            open={isSelect}
+         />
+      </>
   )
 }