feat: tambah fitur pilih semua pada modal pilih divisi

Menambahkan baris "Pilih Semua" / "Batalkan Semua" di atas list pada
ModalSelectMultiple untuk kedua kategori choose-division dan share-division.

components/modalSelectMultiple.tsx

@@ -128,6 +128,35 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
    };
 
 
+   const groupsWithDivisions = data.filter((group: any) => group.Division?.length > 0)
+   const isAllSelected = category === 'choose-division'
+      ? groupsWithDivisions.length > 0 && groupsWithDivisions.every((group: any) =>
+         checked[group.id]?.length === group.Division?.length
+      )
+      : data.length > 0 && selectedDivision.length === data.length
+
+   const handleSelectAll = () => {
+      if (category === 'choose-division') {
+         if (isAllSelected) {
+            setChecked({})
+         } else {
+            const newChecked: CheckedState = {}
+            data.forEach((group: any) => {
+               if (group.Division?.length > 0) {
+                  newChecked[group.id] = group.Division.map((d: any) => d.id)
+               }
+            })
+            setChecked(newChecked)
+         }
+      } else {
+         if (isAllSelected) {
+            setSelectedDivision([])
+         } else {
+            setSelectedDivision(data.map((d: any) => ({ id: d.id, name: d.name })))
+         }
+      }
+   }
+
    const handleSubmit = () => {
       if (category == "choose-division") {
          const selectedGroups: GroupData[] = [];
@@ -154,25 +183,32 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
             {
                category == 'share-division' ?
                   <>
-                     {
+                     <Pressable style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={handleSelectAll}>
-                        data.map((item: any, index: number) => {
+                        <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
-                           return (
+                        {isAllSelected && <AntDesign name="check" size={17} color={colors.text} />}
-                              <Pressable key={index} style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={() => {
+                     </Pressable>
-                                 handleDivisionClick(index)
+                     {data.map((item: any, index: number) => {
-                              }}>
+                        return (
-                                 <Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
+                           <Pressable key={index} style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={() => {
-                                 {
+                              handleDivisionClick(index)
-                                    selectedDivision.some((i: any) => i.id == item.id)
+                           }}>
-                                       ? <AntDesign name="check" size={17} color={colors.text} />
+                              <Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
-                                       : <></>
+                              {
-                                 }
+                                 selectedDivision.some((i: any) => i.id == item.id)
-                              </Pressable>
+                                    ? <AntDesign name="check" size={17} color={colors.text} />
-                           )
+                                    : <></>
-                        })
+                              }
-                     }
+                           </Pressable>
+                        )
+                     })}
                   </>
                   :
-                  data.map((item: any, index: number) => {
+                  <>
+                     <Pressable style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={handleSelectAll}>
+                        <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                        {isAllSelected && <AntDesign name="check" size={17} color={colors.text} />}
+                     </Pressable>
+                     {data.map((item: any, index: number) => {
                      return (
                         <View key={index}>
                            <Pressable style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={() => { handleGroupCheck(item.id) }}>
@@ -199,7 +235,8 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
                            }
                         </View>
                      )
-                  })
+                  })}
+                  </>
             }
          </ScrollView>
          <View style={[Styles.absolute0, { width: '100%' }]}>
@@ -207,4 +244,4 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
          </View>
       </DrawerBottom>
    )
-}
+}