upd: refresh control

deskripsi: - warna refresh control pada semua fitur - warna bottom pada modal select No Issues
2026-02-18 16:35:04 +08:00
parent 64aaafa2be
commit 31b7cf6a30
28 changed files with 124 additions and 26 deletions
--- a/app/(application)/announcement/[id].tsx
+++ b/app/(application)/announcement/[id].tsx
@@ -200,7 +200,7 @@ export default function DetailAnnouncement() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={() => handleRefresh()}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
               />
            }
         >
--- a/app/(application)/announcement/index.tsx
+++ b/app/(application)/announcement/index.tsx
@@ -130,7 +130,7 @@ export default function Announcement() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/banner/index.tsx
+++ b/app/(application)/banner/index.tsx
@@ -133,7 +133,7 @@ export default function BannerList() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
               />
            }
            style={[Styles.h100, { backgroundColor: colors.background }]}
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -247,7 +247,7 @@ export default function DetailDiscussionGeneral() {
                  <RefreshControl
                     refreshing={refreshing}
                     onRefresh={() => handleRefresh()}
-                     tintColor={colors.primary}
+                     tintColor={colors.icon}
                  />
               }
            >
--- a/app/(application)/discussion/index.tsx
+++ b/app/(application)/discussion/index.tsx
@@ -166,7 +166,7 @@ export default function Discussion() {
                                 leftBottomInfo={
                                    <View style={[Styles.rowItemsCenter]}>
                                       <Ionicons name="chatbox-ellipses-outline" size={18} color={colors.dimmed} style={Styles.mr05} />
-                                       <Text style={[Styles.textInformation, {color: colors.dimmed}, Styles.mb05]}>Diskusikan</Text>
+                                       <Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mb05]}>Diskusikan</Text>
                                    </View>
                                 }
                                 rightBottomInfo={`${item.total_komentar} Komentar`}
@@ -182,7 +182,7 @@ export default function Discussion() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
@@ -180,6 +180,7 @@ export default function DetailEventCalendar() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
               />
            }
         >
--- a/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
@@ -155,6 +155,7 @@ export default function CalendarDivision() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
               />
            }
            style={[Styles.h100]}
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -315,6 +315,7 @@ export default function DiscussionDetail() {
                  <RefreshControl
                     refreshing={refreshing}
                     onRefresh={handleRefresh}
+                     tintColor={colors.icon}
                  />
               }
            >
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
@@ -204,6 +204,7 @@ export default function DiscussionDivision() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
@@ -415,6 +415,7 @@ export default function DocumentDivision() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
               />
            }>
            <View style={[Styles.p15, Styles.mb100]}>
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
@@ -127,6 +127,7 @@ export default function DetailTaskDivision() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
               />
            }
         >
--- a/app/(application)/division/[id]/(fitur-division)/task/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
@@ -235,6 +235,7 @@ export default function ListTask() {
                                 <RefreshControl
                                    refreshing={refreshing}
                                    onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                 />
                              }
                           />
@@ -301,6 +302,7 @@ export default function ListTask() {
                                 <RefreshControl
                                    refreshing={refreshing}
                                    onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                 />
                              }
                           />
--- a/app/(application)/division/[id]/index.tsx
+++ b/app/(application)/division/[id]/index.tsx
@@ -78,6 +78,7 @@ export default function DetailDivisionFitur() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
               />
            }
            showsVerticalScrollIndicator={false}
--- a/app/(application)/division/[id]/info.tsx
+++ b/app/(application)/division/[id]/info.tsx
@@ -186,6 +186,7 @@ export default function InformationDivision() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
               />
            }
            style={[Styles.h100, { backgroundColor: colors.background }]}
--- a/app/(application)/division/index.tsx
+++ b/app/(application)/division/index.tsx
@@ -253,6 +253,7 @@ export default function ListDivision() {
                                 <RefreshControl
                                    refreshing={refreshing}
                                    onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                 />
                              }
                           />
@@ -288,6 +289,7 @@ export default function ListDivision() {
                                 <RefreshControl
                                    refreshing={refreshing}
                                    onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                 />
                              }
                           />
--- a/app/(application)/group/index.tsx
+++ b/app/(application)/group/index.tsx
@@ -190,7 +190,7 @@ export default function Index() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/home.tsx
+++ b/app/(application)/home.tsx
@@ -67,7 +67,7 @@ export default function Home() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
               />
            }
            showsVerticalScrollIndicator={false}
--- a/app/(application)/member/[id].tsx
+++ b/app/(application)/member/[id].tsx
@@ -99,7 +99,7 @@ export default function MemberDetail() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
-                  tintColor={colors.text}
+                  tintColor={colors.icon}
               />
            }
         >
--- a/app/(application)/member/index.tsx
+++ b/app/(application)/member/index.tsx
@@ -171,7 +171,7 @@ export default function Index() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/notification.tsx
+++ b/app/(application)/notification.tsx
@@ -1,4 +1,5 @@
 import BorderBottomItem from "@/components/borderBottomItem";
+import BorderBottomItemVertical from "@/components/borderBottomItemVertical";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
 import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -116,11 +117,11 @@ export default function Notification() {
                        getItem={getItem}
                        renderItem={({ item, index }: { item: Props, index: number }) => {
                           return (
-                              <BorderBottomItem
+                              <BorderBottomItemVertical
                                 borderType="bottom"
                                 icon={
-                                    <View style={[Styles.iconContent, item.isRead ? ColorsStatus.secondary : ColorsStatus.primary]}>
-                                       <Feather name="bell" size={25} color="white" />
+                                    <View style={[Styles.iconContent, item.isRead && ColorsStatus.secondary]}>
+                                       <Feather name="bell" size={25} color="black" />
                                    </View>
                                 }
                                 title={item.title}
@@ -129,8 +130,8 @@ export default function Notification() {
                                 textColor={item.isRead ? 'gray' : colors.text}
                                 onPress={() => {
                                    handleReadNotification(item.id, item.category, item.idContent)
-
                                 }}
+                                 bgColor={'transparent'}
                              />
                           )
                        }}
@@ -142,7 +143,7 @@ export default function Notification() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/position/index.tsx
+++ b/app/(application)/position/index.tsx
@@ -216,7 +216,7 @@ export default function Index() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     />
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -5,20 +5,42 @@ import Text from "@/components/Text";
 import { assetUserImage } from "@/constants/AssetsError";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
+import { apiGetProfile } from "@/lib/api";
+import { setEntities } from "@/lib/entitiesSlice";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Feather, Ionicons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import { router, Stack } from "expo-router";
 import { useState } from "react";
-import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
+import { Image, Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';

 export default function Profile() {
   const { colors } = useTheme();
   const entities = useSelector((state: any) => state.entities)
   const [error, setError] = useState(false)
   const [preview, setPreview] = useState(false)
+   const [refreshing, setRefreshing] = useState(false)
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
+
+   async function handleUserLogin() {
+      const hasil = await decryptToken(String(token?.current))
+      apiGetProfile({ id: hasil })
+         .then((data) => dispatch(setEntities(data.data)))
+         .catch((error) => {
+            console.error(error)
+         });
+   }
+
+   const handleRefresh = async () => {
+      setRefreshing(true)
+      handleUserLogin()
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setRefreshing(false)
+   };

   return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
@@ -43,7 +65,16 @@ export default function Profile() {
               )
            }}
         />
-         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
+         <ScrollView
+            refreshControl={
+               <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={handleRefresh}
+                  tintColor={colors.icon}
+               />
+            }
+            style={[Styles.h100, { backgroundColor: colors.background }]}
+         >
            <View style={{ flexDirection: 'column' }}>
               <LinearGradient
                  colors={[colors.header, colors.homeGradient]}
--- a/app/(application)/project/[id]/index.tsx
+++ b/app/(application)/project/[id]/index.tsx
@@ -118,7 +118,7 @@ export default function DetailProject() {
               <RefreshControl
                  refreshing={refreshing}
                  onRefresh={handleRefresh}
-                  tintColor={colors.primary}
+                  tintColor={colors.icon}
               />
            }
         >
--- a/app/(application)/project/index.tsx
+++ b/app/(application)/project/index.tsx
@@ -275,6 +275,7 @@ export default function ListProject() {
                                 <RefreshControl
                                    refreshing={refreshing}
                                    onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                 />
                              }
                           />
@@ -353,6 +354,7 @@ export default function ListProject() {
                                 <RefreshControl
                                    refreshing={refreshing}
                                    onRefresh={handleRefresh}
+                                    tintColor={colors.icon}
                                 />
                              }
                           />
--- a/app/(application)/search.tsx
+++ b/app/(application)/search.tsx
@@ -103,7 +103,7 @@ export default function Search() {
                           <RefreshControl
                              refreshing={refreshing}
                              onRefresh={handleRefresh}
-                              tintColor={colors.primary}
+                              tintColor={colors.icon}
                           />
                        }
                     >
--- a/components/borderBottomItemVertical.tsx
+++ b/components/borderBottomItemVertical.tsx
@@ -0,0 +1,53 @@
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import React, { useState } from "react";
+import { Dimensions, Pressable, View } from "react-native";
+import Text from "./Text";
+
+type Props = {
+   title?: string
+   icon: React.ReactNode
+   desc?: string
+   rightTopInfo?: string
+   onPress?: () => void
+   onLongPress?: () => void
+   borderType: 'all' | 'bottom' | 'none'
+   titleWeight?: 'normal' | 'bold'
+   bgColor?: string
+   descEllipsize?: boolean
+   textColor?: string,
+   titleShowAll?: boolean
+}
+
+export default function BorderBottomItemVertical({ title, icon, desc, onPress, onLongPress, rightTopInfo, borderType, titleWeight, bgColor, descEllipsize, textColor, titleShowAll }: Props) {
+   const { colors } = useTheme();
+   const textColorFix = textColor ? textColor : colors.text;
+
+   return (
+      <Pressable onLongPress={onLongPress} onPress={onPress}
+         style={({ pressed }) => [
+            borderType == 'bottom'
+               ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon + '20' }]
+               : borderType == 'all'
+                  ? [Styles.wrapItemBorderAll, { borderColor: colors.icon + '20' }]
+                  : Styles.wrapItemBorderNone,
+            bgColor == "transparent" ? { backgroundColor: 'transparent' } : { backgroundColor: colors.card },
+         ]}
+      >
+         <View style={Styles.rowItemsCenter}>
+            {icon}
+            <View style={[Styles.ml10, { flex: 1 }]}>
+               <View style={Styles.rowSpaceBetween}>
+                  <View style={{ flex: 1, marginRight: 10 }}>
+                     <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
+                  </View>
+                  {
+                     rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColorFix }]}>{rightTopInfo}</Text>
+                  }
+               </View>
+               {desc && <Text style={[Styles.textDefault, { textAlign: 'left', color: textColorFix }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
+            </View>
+         </View>
+      </Pressable>
+   )
+}
--- a/components/modalSelect.tsx
+++ b/components/modalSelect.tsx
@@ -162,7 +162,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                  category != 'status-task' ?
                     data.length > 0 ?
                        data.map((item: any, index: any) => (
-                           <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
+                           <Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => { onChoose(item.id, item.name, item.img) }}>
                              {
                                 category == 'member'
                                    ?
@@ -188,7 +188,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
                     <>
                        {
                           dataStatus.map((item: any, index: any) => (
-                              <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => {
+                              <Pressable key={index} style={[Styles.itemSelectModal, {borderColor:colors.icon+'20'}]} onPress={() => {
                                 onSelect(item)
                                 close(false)
                              }}>
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -479,7 +479,7 @@ const Styles = StyleSheet.create({
      borderColor: '#d6d8f6',
      borderWidth: 1,
      borderRadius: 5,
-      marginBottom: 10
+      marginBottom: 5
   },
   wrapItemBorderNone: {
      padding: 10,
@@ -584,7 +584,6 @@ const Styles = StyleSheet.create({
      padding: 10,
      flexDirection: 'row',
      justifyContent: 'space-between',
-      borderColor: '#d6d8f6',
      borderBottomWidth: 1,
      alignItems: 'center'
   },