feat: redesign section member dan fix warna dimmed

- SectionMember & SectionMemberTask: ganti BorderBottomItem dengan card item
  custom (avatar + nama + badge jabatan), skeleton baru, label jumlah anggota
- Colors.ts: hapus suffix alpha '#707887ff' → '#707887' pada warna dimmed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/project/sectionMember.tsx

@@ -7,15 +7,14 @@ import { useTheme } from "@/providers/ThemeProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { Pressable, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import ModalConfirmation from "../ModalConfirmation";
-import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import ImageUser from "../imageNew";
 import MenuItemRow from "../menuItemRow";
-import SkeletonTwoItem from "../skeletonTwoItem";
+import ModalConfirmation from "../ModalConfirmation";
+import Skeleton from "../skeleton";
 import Text from "../Text";
 
 type Props = {
@@ -35,26 +34,17 @@ export default function SectionMember({ status, refreshing }: { status: number |
    const [isModal, setModal] = useState(false);
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
-   const [selectLink, setSelectLink] = useState<Props | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [data, setData] = useState<Props[]>([]);
    const [loading, setLoading] = useState(true)
-   const arrSkeleton = Array.from({ length: 3 })
-   const [memberChoose, setMemberChoose] = useState({
-      id: '',
-      name: '',
-   })
-
+   const arrSkeleton = Array.from({ length: 4 })
+   const [memberChoose, setMemberChoose] = useState({ id: '', name: '' })
 
    async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiGetProjectOne({
-            user: hasil,
-            cat: "member",
-            id: id,
-         });
+         const response = await apiGetProjectOne({ user: hasil, cat: "member", id });
          setData(response.data);
       } catch (error) {
          console.error(error);
@@ -63,36 +53,21 @@ export default function SectionMember({ status, refreshing }: { status: number |
       }
    }
 
-   useEffect(() => {
-      handleLoad(false);
-   }, [update.member]);
-
-   useEffect(() => {
-      if (refreshing)
-         handleLoad(false);
-   }, [refreshing]);
-
-   useEffect(() => {
-      handleLoad(true);
-   }, []);
+   useEffect(() => { handleLoad(false) }, [update.member]);
+   useEffect(() => { if (refreshing) handleLoad(false) }, [refreshing]);
+   useEffect(() => { handleLoad(true) }, []);
 
    async function handleDeleteMember() {
       try {
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiDeleteProjectMember({
-            user: hasil,
-            idUser: memberChoose.id,
-         }, id)
+         const response = await apiDeleteProjectMember({ user: hasil, idUser: memberChoose.id }, id)
          if (response.success) {
-            Toast.show({ type: 'small', text1: 'Berhasil menghapus anggota', })
+            Toast.show({ type: 'small', text1: 'Berhasil menghapus anggota' })
             dispatch(setUpdateProject({ ...update, member: !update.member }))
             setModal(false);
          }
-      } catch (error : any ) {
-         console.error(error);
-         const message = error?.response?.data?.message || "Gagal menghapus anggota"
-
-         Toast.show({ type: 'small', text1: message })
+      } catch (error: any) {
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus anggota" })
       }
    }
 
@@ -101,84 +76,85 @@ export default function SectionMember({ status, refreshing }: { status: number |
          <View style={[Styles.mb15]}>
             <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
                <Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
-               <Text style={[Styles.textDefault]}>Total {data.length} Anggota</Text>
+               {!loading && data.length > 0 && (
+                  <Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data.length} orang</Text>
+               )}
             </View>
 
-            <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
-               {
-                  loading ?
-                     arrSkeleton.map((item, index) => {
-                        return (
-                           <SkeletonTwoItem key={index} />
-                        )
-                     })
-                     :
-                     data.length > 0
-                        ?
-                        data.map((item, index) => {
-                           return (
-                              <BorderBottomItem
-                                 key={index}
-                                 borderType="bottom"
-                                 icon={<ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} />}
-                                 title={item.name}
-                                 onPress={() => {
-                                    if (status == 3) return
-                                    setMemberChoose({
-                                       id: item.idUser,
-                                       name: item.name,
-                                    })
-                                    setModal(true);
-                                 }}
-                              />
-                           );
-                        })
-                        :
-                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada anggota</Text>
-               }
+            <View style={{ gap: 6 }}>
+               {loading ? (
+                  arrSkeleton.map((_, index) => (
+                     <View key={index} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                        <Skeleton width={40} height={40} borderRadius={20} />
+                        <View style={{ flex: 1, gap: 5 }}>
+                           <Skeleton width={60} height={12} widthType="percent" borderRadius={6} />
+                           <Skeleton width={35} height={10} widthType="percent" borderRadius={6} />
+                        </View>
+                     </View>
+                  ))
+               ) : data.length > 0 ? (
+                  data.map((item, index) => (
+                     <Pressable
+                        key={index}
+                        onPress={() => {
+                           if (status === 3) return
+                           setMemberChoose({ id: item.idUser, name: item.name })
+                           setModal(true)
+                        }}
+                        style={{
+                           flexDirection: 'row',
+                           alignItems: 'center',
+                           backgroundColor: colors.card,
+                           borderRadius: 10,
+                           borderWidth: 1,
+                           borderColor: colors.icon + '18',
+                           paddingHorizontal: 12,
+                           paddingVertical: 10,
+                           gap: 12,
+                        }}
+                     >
+                        <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
+                        <View style={{ flex: 1 }}>
+                           <Text style={[Styles.textDefault]} numberOfLines={1}>{item.name}</Text>
+                        </View>
+                        <View style={{
+                           backgroundColor: colors.dimmed + '15',
+                           borderRadius: 20,
+                           paddingHorizontal: 8,
+                           paddingVertical: 3,
+                        }}>
+                           <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]} numberOfLines={1}>
+                              {item.position}
+                           </Text>
+                        </View>
+                     </Pressable>
+                  ))
+               ) : (
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada anggota</Text>
+               )}
             </View>
          </View>
 
-         <DrawerBottom
-            animation="slide"
-            isVisible={isModal}
-            setVisible={setModal}
-            title={memberChoose.name}
-         >
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={memberChoose.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={
-                     <MaterialCommunityIcons
-                        name="account-eye"
-                        color={colors.text}
-                        size={25}
-                     />
-                  }
+                  icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
                   title="Lihat Profil"
                   onPress={() => {
-                     setModal(false);
-                     router.push(`/member/${memberChoose.id}`);
+                     setModal(false)
+                     router.push(`/member/${memberChoose.id}`)
                   }}
                />
-               {
-                  entityUser.role != "user" && entityUser.role != "coadmin" &&
+               {entityUser.role !== "user" && entityUser.role !== "coadmin" && (
                   <MenuItemRow
-                     icon={
-                        <MaterialCommunityIcons
-                           name="account-remove"
-                           color={colors.text}
-                           size={25}
-                        />
-                     }
+                     icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
                      title="Keluarkan"
                      onPress={() => {
                         setModal(false)
-                        setTimeout(() => {
-                           setShowDeleteModal(true)
-                        }, 600)
+                        setTimeout(() => setShowDeleteModal(true), 600)
                      }}
                   />
-               }
+               )}
             </View>
          </DrawerBottom>
 
@@ -186,10 +162,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
             visible={showDeleteModal}
             title="Konfirmasi"
             message="Apakah Anda yakin ingin mengeluarkan anggota?"
-            onConfirm={() => {
-               setShowDeleteModal(false)
-               handleDeleteMember()
-            }}
+            onConfirm={() => { setShowDeleteModal(false); handleDeleteMember() }}
             onCancel={() => setShowDeleteModal(false)}
             confirmText="Keluarkan"
             cancelText="Batal"