upd: calendar division

Deskripsi:
- load list data event
- indicator kalender
- detail data event kalender
- mengeluarkan anggota
- menambahkan anggota
- menghapus event kalender
- riwayat event kalender
- nb : tambah dan edit kalender blm selesai karena input tgl susahh

No Issues

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx

@@ -1,13 +1,110 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import BorderBottomItem from "@/components/borderBottomItem"
 import ButtonBackHeader from "@/components/buttonBackHeader"
 import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
+import DrawerBottom from "@/components/drawerBottom"
+import ImageUser from "@/components/imageNew"
+import MenuItemRow from "@/components/menuItemRow"
 import Styles from "@/constants/Styles"
+import { apiDeleteCalendarMember, apiGetCalendarOne } from "@/lib/api"
+import { setUpdateCalendar } from "@/lib/calendarUpdate"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
 import { router, Stack, useLocalSearchParams } from "expo-router"
-import { Image, SafeAreaView, ScrollView, Text, View } from "react-native"
+import { useEffect, useState } from "react"
+import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+
+type Props = {
+   id: string;
+   timeStart: string;
+   timeEnd: string;
+   dateStart: string;
+   dateEnd: string;
+   idCalendar: string;
+   status: number;
+   title: string;
+   desc: string;
+   linkMeet: string;
+   repeatEventTyper: string;
+   repeatValue: number;
+}
+
+type PropsMember = {
+   id: string;
+   idUser: string;
+   name: string;
+   img: string;
+   email: string
+}
 
 export default function DetailEventCalendar() {
-   const { id, detail } = useLocalSearchParams()
+   const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
+   const [data, setData] = useState<Props>()
+   const [member, setMember] = useState<PropsMember[]>([])
+   const { token, decryptToken } = useAuthSession();
+   const [memberChoose, setMemberChoose] = useState({ id: '', name: '' })
+   const [isModalMember, setModalMember] = useState(false)
+   const update = useSelector((state: any) => state.calendarUpdate)
+   const dispatch = useDispatch()
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'data',
+         });
+         setData(response.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   async function handleLoadMember() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetCalendarOne({
+            user: hasil,
+            id: detail,
+            cat: 'member',
+         });
+         setMember(response.data);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   useEffect(() => {
+      handleLoadMember();
+   }, [update.member]);
+
+   async function handleDeleteUser() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteCalendarMember({
+            user: hasil,
+            idUser: memberChoose.id,
+         }, String(data?.idCalendar));
+
+         if (response.success) {
+            dispatch(setUpdateCalendar({ ...update, member: !update.member }));
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT);
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT);
+      } finally {
+         setModalMember(false)
+      }
+   }
 
    return (
       <SafeAreaView>
@@ -16,7 +113,7 @@ export default function DetailEventCalendar() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Detail Acara',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightCalendarDetail id={detail} />
+               headerRight: () => <HeaderRightCalendarDetail id={String(data?.idCalendar)} />
             }}
          />
          <ScrollView>
@@ -24,65 +121,94 @@ export default function DetailEventCalendar() {
                <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>
+                     <Text style={[Styles.textDefault]}>{data?.title}</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>
+                     <Text style={[Styles.textDefault]}>{data?.dateStart}</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>
+                     <Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</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>
+                     <Text style={[Styles.textDefault]}>
+                        {
+                           data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
+                              data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
+                                 data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
+                                    data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
+                                       data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
+                                          ''
+                        }
+                     </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>
+                     <Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</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>
+                     <Text style={[Styles.textDefault]}>{data?.desc}</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>
+                     <Text style={[Styles.textDefault]}>Total {member.length} 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"
-                     />
+                     {
+                        member.map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType="bottom"
+                              icon={<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} />}
+                              title={item.name}
+                              subtitle={item.email}
+                              onPress={() => {
+                                 setMemberChoose({ id: item.idUser, name: item.name })
+                                 setModalMember(true)
+                              }}
+                           />
+                        ))
+                     }
                   </View>
                </View>
             </View>
          </ScrollView>
+
+
+         <DrawerBottom animation="slide" isVisible={isModalMember} setVisible={setModalMember} title={memberChoose.name}>
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />}
+                  title="Lihat Profil"
+                  onPress={() => {
+                     setModalMember(false)
+                     router.push(`/member/${memberChoose.id}`)
+                  }}
+               />
+
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />}
+                  title="Keluarkan"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                        onPress: () => {
+                           handleDeleteUser()
+                        }
+                     })
+
+                  }}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    )
 }