fix logical and api integration issues

src/components/colors.ts

@@ -22,6 +22,8 @@ const colors = {
   // Special background colors with transparency
   alertBackground: "rgba(255, 255, 255, 0.8)",
   androidBackdrop: "rgba(0, 0, 0, 0.4)",
+  warning:'#b9b61cff',
+  danger:'#f04814ff'
 };
 
 export default colors;

src/screens/management/EditGroupScreen.tsx

@@ -71,6 +71,7 @@ export interface EditGroupPayload {
   groupName: string;
   description: string;
   maxParticipants: number;
+  minParticipants?:number;
   contributionAmount: number;
   customCycleDays: number | null;
   cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
@@ -288,7 +289,7 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
   };
 
 
-  const renderField = (field: keyof EditGroupPayload, label: string, displayValue: string | number, isEditing: boolean, isEditable: boolean) => {
+  const renderField = (field: keyof EditGroupPayload, label: string, displayValue: string | number, isEditing: boolean, isEditable?: boolean) => {
     const commonInputProps = { style: styles.input, placeholderTextColor: "#9CA3AF" };
 
     const getInputForField = () => {
@@ -426,12 +427,12 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
         return;
       }
 
-      console.log("✅ Image selected:", {
-        uri: selectedImage.uri,
-        size: (selectedImage?.fileSize / 1024).toFixed(2) + "KB",
-        width: selectedImage.width,
-        height: selectedImage.height
-      });
+      // console.log("✅ Image selected:", {
+      //   uri: selectedImage.uri,
+      //   size: (selectedImage?.fileSize / 1024).toFixed(2) + "KB",
+      //   width: selectedImage.width,
+      //   height: selectedImage.height
+      // });
 
       setSelectedImage(selectedImage.uri);
     });

src/screens/management/Member.tsx

@@ -14,7 +14,7 @@ import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming you
 import { apiCall } from '../../utils/ApiHelper'; // Adjust path to your apiCall utility
 import AppView from '../../components/AppView';
 import colors from '../../components/colors';
-import { useRoute } from '@react-navigation/native';
+import { RouteProp, useRoute } from '@react-navigation/native';
 import { BASE_URL } from '../../utils/ApiUrls';
 
 // --- Type Definitions ---
@@ -37,10 +37,19 @@ interface ApiResponse {
   statusCode: number;
   data: Member[];
 }
+type RootStackParamList = {
+  Member: { groupId: string }; // or number, depending on your data type
+};
+
+type MemberScreenRouteProp = RouteProp<RootStackParamList, 'Member'>;
+
+interface Props {
+  route: MemberScreenRouteProp;
+}
 
 // --- Main Screen Component ---
 // This assumes the component receives `groupId` from a navigator (e.g., Tab Navigator)
-const MemberScreen = ({ route }) => {
+const MemberScreen = ({ route }: Props) => {
 
   const { groupId } = route.params;
   const [members, setMembers] = useState<Member[]>([]);
@@ -52,7 +61,7 @@ const MemberScreen = ({ route }) => {
       setError('Group ID is missing.');
       setLoading(false);
       return;
-    } 
+    }
 
     setLoading(true);
     try {
@@ -91,13 +100,13 @@ const MemberScreen = ({ route }) => {
           <Text style={styles.avatarText}>{initial}</Text>
         </View>
         <View style={styles.infoContainer}>
-            <View style={{flexDirection:"row",justifyContent:"space-between"}}>
-          <Text style={styles.name}>{fullName}</Text>
+          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+            <Text style={styles.name}>{fullName}</Text>
             {isOrganizer && (
-            <View style={styles.organizerIcon}>
-              <Text>Orginzer</Text>
-            </View>
-          )}
+              <View style={styles.organizerIcon}>
+                <Text>Orginzer</Text>
+              </View>
+            )}
           </View>
           <Text style={styles.username}>@{item.username}</Text>
 
@@ -132,9 +141,9 @@ const MemberScreen = ({ route }) => {
     if (members.length === 0) {
       return (
         <View style={styles.centered}>
-            <Ionicons name="people-outline" size={60} color="#9CA3AF" />
-            <Text style={styles.emptyTitle}>No Members Yet</Text>
-            <Text style={styles.emptyText}>Invite people to join your group.</Text>
+          <Ionicons name="people-outline" size={60} color="#9CA3AF" />
+          <Text style={styles.emptyTitle}>No Members Yet</Text>
+          <Text style={styles.emptyText}>Invite people to join your group.</Text>
         </View>
       )
     }
@@ -151,7 +160,7 @@ const MemberScreen = ({ route }) => {
   };
 
   return (
-   <AppView>
+    <AppView>
       <View style={styles.header}>
         <Text style={styles.headerTitle}>Group Members</Text>
         <Text style={styles.headerSubtitle}>{members.length} member(s)</Text>

src/screens/management/RandomSelectUserScreen.tsx

@@ -5,17 +5,22 @@ import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { useNavigation } from '@react-navigation/native';
 import ContributionDetails from '../ContributionScreen';
 import { BASE_URL } from '../../utils/ApiUrls';
+import colors from '../../components/colors';
 
 const { width } = Dimensions.get('window');
 const NUM_COLUMNS = 3;
 const ITEM_SIZE = width / NUM_COLUMNS - 20;
 
+interface User {
+  id: string;
+  name: string;
+  selected: boolean; 
+}
+
 const RandomSelectUserScreen: React.FC<{ route: any }> = ({ route }) => {
-  const navigation = useNavigation()
+  const navigation = useNavigation<any>()
   const { groupId, cycleNumber } = route.params;
-
-
-  const [users, setUsers] = useState<{ id: string; name: string }[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
   const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
   const [winner, setWinner] = useState<{ id: string; name: string } | null>(null);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -134,7 +139,7 @@ const RandomSelectUserScreen: React.FC<{ route: any }> = ({ route }) => {
       } else {
         Alert.alert('Error', 'Failed to determine a winner from the API.');
       }
-      navigation.replace('EditGroup', { groupId }) 
+      navigation.replace('EditGroup', { groupId })
     } catch (error) {
       // Alert.alert('Error', 'Could not connect to the server to fetch the winner.');
     } finally {
@@ -158,7 +163,7 @@ const RandomSelectUserScreen: React.FC<{ route: any }> = ({ route }) => {
           isHighlighted && styles.highlightedItem,
           isWinner && styles.winnerItem,
           animatedStyle,
-          { backgroundColor: item?.selected && 'green' }
+          { backgroundColor: item?.selected ? colors.pastelGreen : '#fff' }
         ]}
       >
         <Ionicons name="person" size={40} color={isHighlighted || isWinner ? '#000000ff' : '#4b5563'} />

src/screens/management/WinnerUser.tsx

@@ -33,7 +33,7 @@ interface WinnerUserProps {
   }
   visible: boolean
   onClose: () => void
-  groupId:string
+  groupId:string | number
 }
 
 const WinnerUser: React.FC<WinnerUserProps> = ({ data, visible, onClose, groupId }) => {