upd: tampilan jarak antar section pada fitur detail kegiatan dan detail tugas divisi

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

app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx

@@ -74,6 +74,22 @@ export default function AddMemberTask() {
       }
    }
 
+   const availableData = data.filter((item: any) => !dataOld.some((i: any) => i.idUser == item.idUser))
+   const isAllSelected = availableData.length > 0 && availableData.every((item: any) =>
+      selectMember.some((s: any) => s.idUser == item.idUser)
+   )
+
+   function handleSelectAll() {
+      if (isAllSelected) {
+         setSelectMember([])
+      } else {
+         const newMembers = availableData
+            .filter((item: any) => !selectMember.some((s: any) => s.idUser == item.idUser))
+            .map((item: any) => ({ idUser: item.idUser, name: item.name, img: item.img }))
+         setSelectMember([...selectMember, ...newMembers])
+      }
+   }
+
    async function handleAddMember() {
       try {
          setLoading(true)
@@ -159,6 +175,15 @@ export default function AddMemberTask() {
                showsVerticalScrollIndicator={false}
             >
 
+               {availableData.length > 0 && (
+                  <Pressable
+                     style={[Styles.itemSelectModal, { borderColor: colors.icon + '20', paddingTop: 0 }]}
+                     onPress={handleSelectAll}
+                  >
+                     <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                     {isAllSelected && <AntDesign name="check" size={20} color={colors.text} />}
+                  </Pressable>
+               )}
                {
                   data.length > 0 ?
                      data.map((item: any, index: any) => {

app/(application)/division/[id]/(fitur-division)/task/create/member.tsx

@@ -54,6 +54,21 @@ export default function AddMemberCreateTask() {
       }
    }
 
+   const isAllSelected = data.length > 0 && data.every((item: any) =>
+      selectMember.some((s: any) => s.idUser == item.idUser)
+   )
+
+   function handleSelectAll() {
+      if (isAllSelected) {
+         setSelectMember([])
+      } else {
+         const newMembers = data
+            .filter((item: any) => !selectMember.some((s: any) => s.idUser == item.idUser))
+            .map((item: any) => ({ idUser: item.idUser, name: item.name, img: item.img }))
+         setSelectMember([...selectMember, ...newMembers])
+      }
+   }
+
    async function handleAddMember() {
       try {
          dispatch(setMemberChoose(selectMember))
@@ -127,6 +142,15 @@ export default function AddMemberCreateTask() {
                showsVerticalScrollIndicator={false}
             >
 
+               {data.length > 0 && (
+                  <Pressable
+                     style={[Styles.itemSelectModal, { borderColor: colors.icon + '20', paddingTop: 0 }]}
+                     onPress={handleSelectAll}
+                  >
+                     <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                     {isAllSelected && <AntDesign name="check" size={20} color={colors.text} />}
+                  </Pressable>
+               )}
                {
                   data.length > 0 ?
                      data.map((item: any, index: any) => {

app/(application)/division/[id]/add-member.tsx

@@ -77,6 +77,22 @@ export default function AddMemberDivision() {
       }
    }
 
+   const availableData = data.filter((item: any) => !dataOld.some((i: any) => i.idUser == item.id))
+   const isAllSelected = availableData.length > 0 && availableData.every((item: any) =>
+      selectMember.some((s: any) => s.idUser == item.id)
+   )
+
+   function handleSelectAll() {
+      if (isAllSelected) {
+         setSelectMember([])
+      } else {
+         const newMembers = availableData
+            .filter((item: any) => !selectMember.some((s: any) => s.idUser == item.id))
+            .map((item: any) => ({ idUser: item.id, name: item.name, img: item.img }))
+         setSelectMember([...selectMember, ...newMembers])
+      }
+   }
+
    async function handleAddMember() {
       try {
          setLoading(true)
@@ -141,7 +157,7 @@ export default function AddMemberDivision() {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
+                     <ScrollView horizontal style={[Styles.mb05, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
@@ -162,6 +178,15 @@ export default function AddMemberDivision() {
                showsVerticalScrollIndicator={false}
             >
 
+               {availableData.length > 0 && (
+                  <Pressable
+                     style={[Styles.itemSelectModal, { borderColor: colors.icon + '20', paddingTop: 0 }]}
+                     onPress={handleSelectAll}
+                  >
+                     <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                     {isAllSelected && <AntDesign name="check" size={20} color={colors.text} />}
+                  </Pressable>
+               )}
                {
                   data.length > 0 ?
                      data.map((item: any, index: any) => {

app/(application)/division/create/add-member.tsx

@@ -9,8 +9,8 @@ import Styles from "@/constants/Styles";
 import { apiGetUser } from "@/lib/api";
 import { setFormCreateDivision } from "@/lib/divisionCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { AntDesign } from "@expo/vector-icons";
 import { useTheme } from "@/providers/ThemeProvider";
+import { AntDesign } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { Pressable, ScrollView, View } from "react-native";
@@ -55,6 +55,21 @@ export default function CreateDivisionAddMember() {
       }
    }
 
+   const isAllSelected = data.length > 0 && data.every((item: any) =>
+      selectMember.some((s: any) => s.idUser == item.id)
+   )
+
+   function handleSelectAll() {
+      if (isAllSelected) {
+         setSelectMember([])
+      } else {
+         const newMembers = data
+            .filter((item: any) => !selectMember.some((s: any) => s.idUser == item.id))
+            .map((item: any) => ({ idUser: item.id, name: item.name, img: item.img }))
+         setSelectMember([...selectMember, ...newMembers])
+      }
+   }
+
    async function handleAddMember() {
       dispatch(setFormCreateDivision({ ...update, member: selectMember }))
       router.push(`./add-admin-division`)
@@ -93,7 +108,7 @@ export default function CreateDivisionAddMember() {
                selectMember.length > 0
                   ?
                   <View>
-                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]} showsHorizontalScrollIndicator={false}>
+                     <ScrollView horizontal style={[Styles.mb05, Styles.pv10]} showsHorizontalScrollIndicator={false}>
                         {
                            selectMember.map((item: any, index: any) => (
                               <ImageWithLabel
@@ -114,6 +129,15 @@ export default function CreateDivisionAddMember() {
                showsVerticalScrollIndicator={false}
             >
 
+               {data.length > 0 && (
+                  <Pressable
+                     style={[Styles.itemSelectModal, { borderColor: colors.icon + '20', paddingTop: 0 }]}
+                     onPress={handleSelectAll}
+                  >
+                     <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                     {isAllSelected && <AntDesign name="check" size={20} color={colors.text} />}
+                  </Pressable>
+               )}
                {
                   data.length > 0 ?
                      data.map((item: any, index: any) => {

app/(application)/notification.tsx

@@ -84,7 +84,7 @@ export default function Notification() {
       }
       const parseDate = (str: string) => {
          const [d, m, y] = str.split(' ')
-         return new Date(Number(y), BULAN[m] ?? 0, Number(d)).getTime()
+         return new Date(Number(y), BULAN[m?.toUpperCase()] ?? 0, Number(d)).getTime()
       }
 
       const groups: Record<string, Props[]> = {}

app/(application)/project/[id]/add-member.tsx

@@ -78,6 +78,22 @@ export default function AddMemberProject() {
       }
    }
 
+   const availableData = data.filter((item: any) => !dataOld.some((i: any) => i.idUser == item.id))
+   const isAllSelected = availableData.length > 0 && availableData.every((item: any) =>
+      selectMember.some((s: any) => s.idUser == item.id)
+   )
+
+   function handleSelectAll() {
+      if (isAllSelected) {
+         setSelectMember([])
+      } else {
+         const newMembers = availableData
+            .filter((item: any) => !selectMember.some((s: any) => s.idUser == item.id))
+            .map((item: any) => ({ idUser: item.id, name: item.name, img: item.img }))
+         setSelectMember([...selectMember, ...newMembers])
+      }
+   }
+
    async function handleAddMember() {
       try {
          setLoading(true)
@@ -160,6 +176,15 @@ export default function AddMemberProject() {
                showsVerticalScrollIndicator={false}
                style={[Styles.h100, { backgroundColor: colors.background }]}
             >
+               {availableData.length > 0 && (
+                  <Pressable
+                     style={[Styles.itemSelectModal, { borderColor: colors.icon + '20', paddingTop: 0 }]}
+                     onPress={handleSelectAll}
+                  >
+                     <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                     {isAllSelected && <AntDesign name="check" size={20} color={colors.text} />}
+                  </Pressable>
+               )}
                {
                   data.length > 0 ?
                      <View style={[Styles.mb100]}>

app/(application)/project/create/member.tsx

@@ -61,6 +61,21 @@ export default function AddMemberCreateProject() {
       }
    }
 
+   const isAllSelected = data.length > 0 && data.every((item: any) =>
+      selectMember.some((s: any) => s.idUser == item.id)
+   )
+
+   function handleSelectAll() {
+      if (isAllSelected) {
+         setSelectMember([])
+      } else {
+         const newMembers = data
+            .filter((item: any) => !selectMember.some((s: any) => s.idUser == item.id))
+            .map((item: any) => ({ idUser: item.id, name: item.name, img: item.img }))
+         setSelectMember([...selectMember, ...newMembers])
+      }
+   }
+
    async function handleAddMember() {
       try {
          dispatch(setMemberChoose(selectMember))
@@ -134,6 +149,15 @@ export default function AddMemberCreateProject() {
                style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}
             >
 
+               {data.length > 0 && (
+                  <Pressable
+                     style={[Styles.itemSelectModal, { borderColor: colors.icon + '20', paddingTop: 0 }]}
+                     onPress={handleSelectAll}
+                  >
+                     <Text style={[Styles.textMediumSemiBold]}>{isAllSelected ? 'Batalkan Semua' : 'Pilih Semua'}</Text>
+                     {isAllSelected && <AntDesign name="check" size={20} color={colors.text} />}
+                  </Pressable>
+               )}
                {
                   data.length > 0 ?
                      data.map((item: any, index: any) => {

components/home/carouselHome2.tsx

@@ -67,9 +67,8 @@ export default function CaraouselHome2({ refreshing }: { refreshing: boolean })
       <View
          style={[
             Styles.mv15,
-            Styles.p15,
             Styles.round05,
-            { backgroundColor: colors.card },
+            { backgroundColor: colors.card, paddingVertical: 15, paddingHorizontal: 10 },
             Styles.wrapHomeCarousel
          ]}
       >

components/itemSectionTanggalTugas.tsx

@@ -97,7 +97,7 @@ export default function ItemSectionTanggalTugas({ status, title, dateStart, date
             borderWidth: 1,
             borderColor: colors.icon + '18',
             backgroundColor: colors.card,
-            marginBottom: 10,
+            marginBottom: 0,
          }}
       >
          {/* Accent bar kiri */}

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' ?
                   <>
-                     {
-                        data.map((item: any, index: number) => {
-                           return (
-                              <Pressable key={index} style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={() => {
-                                 handleDivisionClick(index)
-                              }}>
-                                 <Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
-                                 {
-                                    selectedDivision.some((i: any) => i.id == item.id)
-                                       ? <AntDesign name="check" size={17} color={colors.text} />
-                                       : <></>
-                                 }
-                              </Pressable>
-                           )
-                        })
-                     }
+                     <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 (
+                           <Pressable key={index} style={[Styles.itemSelectModal, { borderColor: colors.icon + 20 }]} onPress={() => {
+                              handleDivisionClick(index)
+                           }}>
+                              <Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
+                              {
+                                 selectedDivision.some((i: any) => i.id == item.id)
+                                    ? <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>
    )
-}
+}

components/project/sectionFile.tsx

@@ -127,7 +127,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
       <>
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <View style={[Styles.mb15]}>
-            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+            <Text style={[Styles.textDefaultSemiBold, { marginBottom: 5 }]}>File</Text>
 
             {loading ? (
                <View style={Styles.fileGrid}>

components/project/sectionMember.tsx

@@ -74,7 +74,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
    return (
       <>
          <View style={[Styles.mb15]}>
-            <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+            <View style={[Styles.rowSpaceBetween, { marginBottom: 5 }]}>
                <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
                {!loading && data.length > 0 && (
                   <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data.length} orang</Text>

components/project/sectionTanggalTugas.tsx

@@ -174,9 +174,9 @@ export default function SectionTanggalTugasProject({ status, member, refreshing,
 
    return (
       <>
-         <View style={[Styles.mb15, Styles.mt10]}>
-            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
-            <View>
+         <View style={[Styles.mb15]}>
+            <Text style={[Styles.textDefaultSemiBold, { marginBottom: 5 }]}>Tanggal & Tugas</Text>
+            <View style={{ gap: 10 }}>
                {loading
                   ? arrSkeleton.map((_, index) => <SkeletonTask key={index} />)
                   : data.length > 0

components/task/sectionFileTask.tsx

@@ -153,7 +153,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
       <>
          <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <View style={[Styles.mb15]}>
-            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+            <Text style={[Styles.textDefaultSemiBold, { marginBottom: 5 }]}>File</Text>
             {loading ? (
                <View style={Styles.fileGrid}>
                   {arrSkeleton.map((_, index) => (

components/task/sectionMemberTask.tsx

@@ -100,7 +100,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
    return (
       <>
          <View style={[Styles.mb15]}>
-            <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
+            <View style={[Styles.rowSpaceBetween, { marginBottom: 5 }]}>
                <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
                {!loading && data.length > 0 && (
                   <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data.length} orang</Text>

components/task/sectionTanggalTugasTask.tsx

@@ -172,9 +172,9 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision,
 
    return (
       <>
-         <View style={[Styles.mb15, Styles.mt10]}>
-            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
-            <View>
+         <View style={[Styles.mb15]}>
+            <Text style={[Styles.textDefaultSemiBold, { marginBottom: 5 }]}>Tanggal & Tugas</Text>
+            <View style={{ gap: 10 }}>
                {loading
                   ? arrSkeleton.map((_, index) => <SkeletonTask key={index} />)
                   : data.length > 0