feat: redesign halaman detail acara kalender divisi dengan pola sectionCard

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

@@ -1,12 +1,9 @@
-import ModalConfirmation from "@/components/ModalConfirmation"
 import AppHeader from "@/components/AppHeader"
-import BorderBottomItem from "@/components/borderBottomItem"
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
 import DrawerBottom from "@/components/drawerBottom"
+import HeaderRightCalendarDetail from "@/components/calendar/headerCalendarDetail"
 import ImageUser from "@/components/imageNew"
 import MenuItemRow from "@/components/menuItemRow"
-import Skeleton from "@/components/skeleton"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import Text from "@/components/Text"
 import { ConstEnv } from "@/constants/ConstEnv"
 import Styles from "@/constants/Styles"
@@ -14,7 +11,7 @@ import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature }
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
 import { useTheme } from "@/providers/ThemeProvider"
-import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import Clipboard from "@react-native-clipboard/clipboard"
 import { router, Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -156,135 +153,142 @@ export default function DetailEventCalendar() {
       setRefreshing(false)
    };
 
+   const canManage = !((entityUser.role === "user" || entityUser.role === "coadmin") && !isMemberDivision)
+
+   const repeatLabel: Record<string, string> = {
+      once: 'Acara 1 Kali',
+      daily: 'Setiap Hari',
+      weekly: 'Mingguan',
+      monthly: 'Bulanan',
+      yearly: 'Tahunan',
+   }
+
+   function InfoRow({ icon, label, value, onCopy }: { icon: string, label: string, value?: string, onCopy?: () => void }) {
+      return (
+         <View style={[Styles.sectionActionRow, { paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
+            <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+               <MaterialCommunityIcons name={icon as any} size={18} color={colors.dimmed} />
+            </View>
+            <View style={Styles.flex1}>
+               <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginBottom: 2 }]}>{label}</Text>
+               {loading
+                  ? <View style={{ height: 13, borderRadius: 6, backgroundColor: colors.icon + '20', width: '70%' }} />
+                  : <Text style={[Styles.textDefault, { color: colors.text }]}>{value || '-'}</Text>
+               }
+            </View>
+            {onCopy && !loading && value && (
+               <Pressable onPress={onCopy} style={{ padding: 4 }}>
+                  <MaterialCommunityIcons name="content-copy" size={16} color={colors.dimmed} />
+               </Pressable>
+            )}
+         </View>
+      )
+   }
+
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Detail Acara',
-               headerTitleAlign: 'center',
-               // headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
                header: () => (
                   <AppHeader
                      title="Detail Acara"
                      showBack={true}
                      onPressLeft={() => router.back()}
                      right={
-                        (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
+                        (entityUser.role === "user" || entityUser.role === "coadmin") && !isMemberDivision
+                           ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
                      }
                   />
                )
             }}
          />
          <ScrollView
-            style={[Styles.h100]}
+            showsVerticalScrollIndicator={false}
-            refreshControl={
+            style={Styles.h100}
-               <RefreshControl
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
-                  refreshing={refreshing}
-                  onRefresh={handleRefresh}
-                  tintColor={colors.icon}
-               />
-            }
          >
-            <View style={[Styles.p15]}>
+            <View style={[Styles.p15, Styles.mb100]}>
-               <View style={[Styles.wrapPaper, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
-                  <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
-                     <MaterialCommunityIcons name="calendar-text" size={30} color={colors.text} style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           : <Text style={[Styles.textDefault, Styles.w90]}>{data?.title}</Text>
-                     }
 
+               {/* Info acara */}
+               <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow, Styles.mb15,
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
+                  <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }}>
+                     <View style={Styles.sectionActionRow}>
+                        <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                           <MaterialCommunityIcons name="calendar-text" size={18} color={colors.dimmed} />
+                        </View>
+                        <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Detail Acara</Text>
+                     </View>
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                  <View style={{ paddingHorizontal: 16 }}>
-                     <MaterialCommunityIcons name="calendar-month-outline" size={30} color={colors.text} style={Styles.mr10} />
+                     <InfoRow icon="format-title" label="Judul" value={data?.title} />
-                     {
+                     <InfoRow icon="calendar-month-outline" label="Tanggal" value={data?.dateStart} />
-                        loading ?
+                     <InfoRow icon="clock-outline" label="Waktu" value={data ? `${data.timeStart} – ${data.timeEnd}` : undefined} />
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                     <InfoRow icon="repeat" label="Pengulangan" value={data?.repeatEventTyper ? repeatLabel[data.repeatEventTyper] : undefined} />
-                           :
+                     <InfoRow icon="link-variant" label="Link Meet" value={data?.linkMeet} onCopy={data?.linkMeet ? () => handleCopy(data.linkMeet) : undefined} />
-                           <Text style={[Styles.textDefault]}>{data?.dateStart}</Text>
+                     <View style={[Styles.sectionActionRow, { paddingVertical: 10, alignItems: 'flex-start' }]}>
-                     }
+                        <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                           <MaterialCommunityIcons name="card-text-outline" size={18} color={colors.dimmed} />
+                        </View>
+                        <View style={Styles.flex1}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginBottom: 2 }]}>Deskripsi</Text>
+                           {loading
+                              ? <View style={{ height: 13, borderRadius: 6, backgroundColor: colors.icon + '20', width: '80%' }} />
+                              : <Text style={[Styles.textDefault, { color: colors.text, lineHeight: 22 }]}>{data?.desc || '-'}</Text>
+                           }
+                        </View>
+                     </View>
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+               </View>
-                     <MaterialCommunityIcons name="clock-outline" size={30} color={colors.text} style={Styles.mr10} />
+
-                     {
+               {/* Daftar anggota */}
-                        loading ?
+               <View style={[Styles.wrapPaper, Styles.sectionCard, Styles.noShadow,
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                  { backgroundColor: colors.card, borderColor: colors.icon + '18', padding: 0, overflow: 'hidden' }]}>
-                           :
+
-                           <Text style={[Styles.textDefault]}>{data?.timeStart} | {data?.timeEnd}</Text>
+                  <View style={[Styles.sectionActionRow, { padding: 16, borderBottomWidth: 1, borderBottomColor: colors.icon + '14' }]}>
-                     }
+                     <View style={[Styles.sectionIconBox, { backgroundColor: colors.dimmed + '18' }]}>
+                        <MaterialIcons name="people" size={18} color={colors.dimmed} />
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold, Styles.flex1, { color: colors.text }]}>Anggota</Text>
+                     <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>{member.length} anggota</Text>
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+
-                     <MaterialCommunityIcons name="repeat" size={30} color={colors.text} style={Styles.mr10} />
+                  {member.length === 0
-                     {
+                     ? (
-                        loading ?
+                        <View style={[Styles.contentItemCenter, { paddingVertical: 40 }]}>
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                           <MaterialIcons name="people-outline" size={34} color={colors.icon + '50'} />
-                           :
+                           <Text style={[Styles.textMediumNormal, Styles.mt10, { color: colors.dimmed }]}>Belum ada anggota</Text>
-                           <Text style={[Styles.textDefault]}>
+                        </View>
+                     )
+                     : member.map((item, index) => (
+                        <Pressable
+                           key={index}
+                           onPress={() => {
+                              if (!canManage) return
+                              setMemberChoose({ id: item.idUser, name: item.name })
+                              setModalMember(true)
+                           }}
+                           style={({ pressed }) => [
+                              Styles.rowItemsCenter, Styles.ph15,
                               {
-                                 data?.repeatEventTyper.toString() === 'once' ? 'Acara 1 Kali' :
+                                 paddingVertical: 12, gap: 14,
-                                    data?.repeatEventTyper.toString() === 'daily' ? 'Setiap Hari' :
+                                 borderBottomWidth: index < member.length - 1 ? 1 : 0,
-                                       data?.repeatEventTyper.toString() === 'weekly' ? 'Mingguan' :
+                                 borderBottomColor: colors.icon + '14',
-                                          data?.repeatEventTyper.toString() === 'monthly' ? 'Bulanan' :
+                                 backgroundColor: pressed && canManage ? colors.icon + '0E' : 'transparent',
-                                             data?.repeatEventTyper.toString() === 'yearly' ? 'Tahunan' :
+                              },
-                                                ''
+                           ]}
-                              }
+                        >
-                           </Text>
+                           <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
-                     }
+                           <View style={Styles.flex1}>
-                  </View>
+                              <Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={1}>{item.name}</Text>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                              <Text style={[Styles.textMediumNormal, { color: colors.dimmed }]} numberOfLines={1}>{item.email}</Text>
-                     <MaterialCommunityIcons name="link-variant" size={30} color={colors.text} style={Styles.mr10} />
+                           </View>
-                     {
+                           {canManage && <MaterialCommunityIcons name="chevron-right" size={18} color={colors.icon + '60'} />}
-                        loading ?
+                        </Pressable>
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
+                     ))
-                           :
+                  }
-                           data?.linkMeet ?
-                              <Pressable onPress={() => { handleCopy(data.linkMeet) }}>
-                                 <Text style={[Styles.textDefault]}>{data.linkMeet}</Text>
-                              </Pressable>
-                              : <Text style={[Styles.textDefault]}>-</Text>
-                     }
-                  </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10, { alignItems: 'flex-start' }]}>
-                     <MaterialCommunityIcons name="card-text-outline" size={30} color={colors.text} style={Styles.mr10} />
-                     {
-                        loading ?
-                           <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           :
-                           <Text style={[Styles.textDefault, Styles.w90]}>{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 {member.length} Anggota</Text>
-                  </View>
-
-                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
-                     {
-                        member.map((item, index) => (
-                           <BorderBottomItem
-                              key={index}
-                              borderType="bottom"
-                              icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />}
-                              title={item.name}
-                              subtitle={item.email}
-                              onPress={() => {
-                                 if ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision) {
-                                    null
-                                 } else {
-                                    setMemberChoose({ id: item.idUser, name: item.name })
-                                    setModalMember(true)
-                                 }
-                              }}
-                           />
-                        ))
-                     }
-                  </View>
-               </View>
             </View>
          </ScrollView>