handle user profile session

src/components/JoinedGroupCard.tsx

@@ -2,42 +2,207 @@
 
 import React, { FC } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { JoinedGroup } from '../types';
 
-interface JoinedGroupCardProps {
+// Update the type to match the full data structure
-  item: JoinedGroup;
+interface JoinedGroup {
+  id: string;
+  groupName: string;
+  description: string;
+  visibility: 'PUBLIC' | 'PRIVATE';
+  createdByUserId: number;
+  createdByName: string; // Renamed from createdBy for clarity
+  startDate: [number, number, number] | null;
+  endDate: [number, number, number] | null;
+  minParticipants: number;
+  maxParticipants: number;
+  currentParticipants: number;
+  contributionAmount: number;
+  cycleType: 'MONTHLY' | 'WEEKLY' | 'QUARTERLY' | 'CUSTOM';
+  status: 'ACTIVE' | 'PENDING' | 'COMPLETED';
 }
 
-export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => (
+interface JoinedGroupCardProps {
-  <View style={styles.card}>
+  item: JoinedGroup | any;
-    <View>
+}
-      <Text style={styles.cardTitle}>{item.groupName}</Text>
+
-      <Text style={styles.cardSubtitle}>Created by {item.createdBy}</Text>
+// Helper function to format dates
+const formatDate = (dateArray: [number, number, number] | null): string => {
+  if (!dateArray) return 'N/A';
+  const date = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+};
+
+// Helper to determine status color
+const getStatusStyle = (status: JoinedGroup['status']) => {
+    switch (status) {
+        case 'ACTIVE':
+            return {
+                backgroundColor: '#D1FAE5', // Green tint
+                textColor: '#065F46',       // Dark Green
+            };
+        case 'PENDING':
+            return {
+                backgroundColor: '#FEF3C7', // Yellow tint
+                textColor: '#92400E',       // Dark Yellow/Brown
+            };
+        case 'COMPLETED':
+            return {
+                backgroundColor: '#E5E7EB', // Gray tint
+                textColor: '#4B5563',       // Dark Gray
+            };
+        default:
+            return {
+                backgroundColor: '#E5E7EB',
+                textColor: '#4B5563',
+            };
+    }
+};
+
+export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
+  const progress = (item.currentParticipants / item.maxParticipants) * 100;
+  const statusStyle = getStatusStyle(item.status);
+
+  return (
+    <View style={styles.card}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.groupName}>{item.groupName}</Text>
+        <View style={[styles.statusBadge, { backgroundColor: statusStyle.backgroundColor }]}>
+          <Text style={[styles.statusText, { color: statusStyle.textColor }]}>{item.status}</Text>
+        </View>
+      </View>
+      <Text style={styles.createdBy}>Created by {item.createdByName}</Text>
+      
+      {/* Financial Info */}
+      <View style={styles.infoRow}>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Contribution</Text>
+          <Text style={styles.infoValue}>₹{item.contributionAmount.toLocaleString('en-IN')}</Text>
+        </View>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Cycle</Text>
+          <Text style={styles.infoValue}>{item.cycleType}</Text>
+        </View>
+      </View>
+
+      {/* Participants Progress */}
+      <View style={styles.progressContainer}>
+        <View style={styles.progressLabels}>
+          <Text style={styles.participantText}>Participants</Text>
+          <Text style={styles.participantCount}>{item.currentParticipants} / {item.maxParticipants}</Text>
+        </View>
+        <View style={styles.progressBarBackground}>
+          <View style={[styles.progressBarFill, { width: `${progress}%` }]} />
+        </View>
+      </View>
+
+      {/* Dates */}
+      <View style={styles.footer}>
+        <Text style={styles.dateText}>
+            {formatDate(item.startDate)} - {formatDate(item.endDate)}
+        </Text>
+      </View>
     </View>
-  </View>
+  );
-);
+};
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: '#fff',
+    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
+    borderRadius: 16,
-    padding: 16,
+    padding: 20,
-    marginBottom: 12,
+    marginBottom: 16,
+    shadowColor: '#374151',
+    shadowOpacity: 0.08,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 3,
+  },
+  header: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
-    elevation: 2,
+    alignItems: 'flex-start',
-    shadowColor: '#000',
+    marginBottom: 4,
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
   },
-  cardTitle: {
+  groupName: {
-    fontSize: 17,
+    fontSize: 20,
     fontWeight: 'bold',
-    color: '#343a40',
+    color: '#1F2937',
+    flexShrink: 1,
   },
-  cardSubtitle: {
+  createdBy: {
     fontSize: 14,
-    color: '#6c757d',
+    color: '#6B7280',
+    marginBottom: 16,
+  },
+  statusBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: '#F3F4F6',
+    marginBottom: 16,
+  },
+  infoItem: {
+    alignItems: 'flex-start',
+  },
+  infoLabel: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  infoValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111827',
+    textTransform: 'capitalize',
+  },
+  progressContainer: {
+    marginBottom: 16,
+  },
+  progressLabels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  participantText: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  participantCount: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#111827',
+  },
+  progressBarBackground: {
+    height: 8,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progressBarFill: {
+    height: '100%',
+    backgroundColor: '#4F46E5',
+    borderRadius: 4,
+  },
+  footer: {
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  dateText: {
+    fontSize: 14,
+    color: '#4B5563',
+    fontWeight: '500',
   },
 });

src/components/common/Custom.tsx

@@ -14,12 +14,14 @@ import colors from "../colors";
 type CustomInputProps = TextInputProps & {
   label?: string;
   icon?: IoniconsIconName;
+  error?:string
 };
 
 const CustomInput: React.FC<CustomInputProps> = ({
   label,
   icon,
   style,
+  error,
   ...rest
 }) => {
   return (

src/components/common/Header.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { Ionicons } from  "@react-native-vector-icons/ionicons"
+
+type HeaderProps = {
+  title: string;
+  showBack?: boolean; // optional, default true
+  onBackPress?: () => void; // optional custom back action
+};
+
+const Header: React.FC<HeaderProps> = ({
+  title,
+  showBack = true,
+  onBackPress,
+}) => {
+  const navigation = useNavigation();
+
+  const handleBack = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <View style={styles.header}>
+      {showBack && (
+        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
+          <Ionicons name="arrow-back" size={24} color="#000" />
+        </TouchableOpacity>
+      )}
+      <Text style={styles.headerTitle}>{title}</Text>
+    </View>
+  );
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: "#fff",
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  backButton: {
+    marginRight: 12,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#000",
+  },
+});

src/navigation/AppNavigator.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { View, Text, Button } from "react-native";
 import LoginScreen from "../screens/LoginScreen";
 import OtpVerificationScreen from "../screens/OtpVarificationScreen";
 import SplashScreen from "../screens/SplashScreen";
@@ -11,49 +10,42 @@ import GroupCreation from "../screens/GroupCreation";
 import GroupReview from "../screens/GroupReview";
 import BottomTabs from "./BottomTabs";
 import BecomeOrg from "../screens/profile/BecomeOrg";
-import EditGroupScreen from "../screens/management/EditGroupScreen";
 import YourContacts from "../screens/management/YourContacts";
 import Transaction from "../screens/profile/Transaction";
+import GroupDetails from "../screens/home/user-home/GroupDetails";
+import EditGroupScreen from "../screens/management/EditGroupScreen";
 
-const Stack = createNativeStackNavigator();
 export type RootStackParamList = {
+  Splash: undefined;
   Login: undefined;
   OtpVarify: { mobile: string };
-  Home: undefined
+  Home: undefined;
-  HomeTabs: undefined
+  HomeTabs: undefined;
-  splash: undefined
+  OrganizerRegister: undefined;
-  OrganizerRegister: undefined
   Profile: undefined;
   GroupCreation: undefined;
   GroupReview: undefined;
-  EditGroup: { groupId: string}
+  EditGroup: { groupId: string | number };
-
+  GroupDetails: { groupId: string | number };
+  BecomeOrg: undefined;
+  YourContacts: undefined;
+  Transaction: undefined;
 };
 
-function HomeScreen() {
+const Stack = createNativeStackNavigator<RootStackParamList>();
-  return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-      />
-    </View>
-  );
-}
-
-
 
 export default function AppNavigator() {
   const linking = {
-    prefixes: ["myapp://", "https://api.godemo.in"], // supports both
+    prefixes: ["myapp://", "https://api.godemo.in"],
     config: {
       screens: {
-        Profile: "EProcurementSB", // dynamic route
+        Profile: "EProcurementSB",
       },
     },
   };
+
   return (
-    <NavigationContainer linking={linking}  >
+    <NavigationContainer linking={linking}>
       <Stack.Navigator initialRouteName="Splash">
         <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
         <Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
@@ -66,7 +58,8 @@ export default function AppNavigator() {
         <Stack.Screen name="BecomeOrg" component={BecomeOrg} options={{ headerShown: false }} />
         <Stack.Screen name="YourContacts" component={YourContacts} options={{ headerShown: false }} />
         <Stack.Screen name="Transaction" component={Transaction} options={{ headerShown: false }} />
-        {/* <Stack.Screen name="EditGroup" component={EditGroupScreen} options={{ headerShown: false }} /> */}
+        <Stack.Screen name="GroupDetails" component={GroupDetails} options={{ headerShown: false }} />
+        <Stack.Screen name="EditGroup" component={EditGroupScreen} options={{ headerShown: false }} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/screens/GroupCreation.tsx

@@ -7,88 +7,51 @@ import {
   KeyboardAvoidingView,
   Platform,
   TouchableOpacity,
-  Modal,
   Alert,
 } from "react-native";
-import Slider from "@react-native-community/slider";
 import { useNavigation } from "@react-navigation/native";
 import { CustomInput } from "../components/common/Custom";
 import CustomButton from "../components/CustomButton";
-import { Calendar } from "react-native-calendars";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "../components/colors";
 
-const calendarTheme = {
-  backgroundColor: '#ffffff',
-  calendarBackground: '#ffffff',
-  textSectionTitleColor: '#62b59a',
-  selectedDayTextColor: '#333',
-  todayTextColor: '#62b59a',
-  dayTextColor: '#333',
-  textDisabledColor: '#d9e1e8',
-  arrowColor: '#62b59a',
-  monthTextColor: '#333',
-  textDayFontWeight: '500',
-  textMonthFontWeight: 'bold',
-  textDayHeaderFontWeight: '600',
-  textDayFontSize: 16,
-  textMonthFontSize: 18,
-  textDayHeaderFontSize: 14,
-};
-
 export default function GroupCreationForm() {
   const navigation = useNavigation<any>();
   const [form, setForm] = useState({
-    contributionAmount: "4000",
-    customCycleDays: "",
-    cycleType: "MONTHLY",
-    description: "",
     groupName: "",
-    maxParticipants: "",
+    description: "",
-    minParticipants: "",
-    startDate: "",
     visibility: "PRIVATE",
-    withdrawalMethod: "SEQUENTIAL",
+    withdrawalMethod: "RANDOM",
+    minParticipants: "",
+    maxParticipants: "",
+    contributionAmount: "",
+    cycleType: "MONTHLY",
+    customCycleDays: "",
+    lateFeeMode: "DAILY",
+    lateFeeValue: "",
   });
 
-  const [errors, setErrors] = useState<any>({}); // State for validation errors
+  const [errors, setErrors] = useState<any>({});
-  const [isCalendarVisible, setCalendarVisible] = useState(false);
 
   const handleChange = (key: string, value: string) => {
     setForm({ ...form, [key]: value });
-    // Clear error for the field when user starts typing
     if (errors[key]) {
       setErrors({ ...errors, [key]: null });
     }
   };
 
-  const handleAmountChange = (value: number) => {
-    setForm({ ...form, contributionAmount: Math.round(value).toString() });
-  };
-
-  const handleDayPress = (day: any) => {
-    setForm({ ...form, startDate: day.dateString });
-    setCalendarVisible(false);
-    setErrors({ ...errors, startDate: null });
-  };
-
-  const presetAmounts = [2000, 4000, 8000];
   const cycleTypes = ["CUSTOM", "MONTHLY", "QUARTERLY", "YEARLY"];
   const distributionTypes = ["SEQUENTIAL", "RANDOM"];
-
+  const lateFeeModes = ["DAILY", "FIXED"];
-  const handlePresetAmount = (amount: number) => {
-    setForm({ ...form, contributionAmount: amount.toString() });
-  };
 
   const validateForm = () => {
     const newErrors: any = {};
     if (!form.groupName.trim()) newErrors.groupName = "Group name is required.";
     if (!form.description.trim()) newErrors.description = "Description is required.";
-    if (!form.minParticipants || Number(form.minParticipants) <= 0) newErrors.minParticipants = "Min participants must be greater than 0.";
+    if (!form.minParticipants || Number(form.minParticipants) <= 1) newErrors.minParticipants = "Min participants must be at least 2.";
     if (!form.maxParticipants || Number(form.maxParticipants) < Number(form.minParticipants)) newErrors.maxParticipants = "Max must be greater than or equal to min.";
     if (!form.contributionAmount || Number(form.contributionAmount) <= 0) newErrors.contributionAmount = "Amount must be greater than 0.";
     if (form.cycleType === "CUSTOM" && (!form.customCycleDays || Number(form.customCycleDays) <= 0)) newErrors.customCycleDays = "Custom days must be greater than 0.";
-    if (!form.startDate) newErrors.startDate = "Start date is required.";
+    if (form.lateFeeMode && (!form.lateFeeValue || Number(form.lateFeeValue) <= 0)) newErrors.lateFeeValue = "Late fee value is required.";
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
@@ -96,8 +59,16 @@ export default function GroupCreationForm() {
 
   const handleReview = () => {
     if (validateForm()) {
-      console.log("------",form)
+      const payload = {
-      navigation.navigate("GroupReview", { form });
+          ...form,
+          contributionAmount: Number(form.contributionAmount),
+          customCycleDays: Number(form.customCycleDays) || 0,
+          lateFeeValue: Number(form.lateFeeValue) || 0,
+          maxParticipants: Number(form.maxParticipants),
+          minParticipants: Number(form.minParticipants),
+      };
+      console.log("Reviewing Payload:", payload);
+      navigation.navigate("GroupReview", { form: payload });
     } else {
       Alert.alert("Incomplete Form", "Please fill out all required fields correctly.");
     }
@@ -106,101 +77,145 @@ export default function GroupCreationForm() {
   return (
     <KeyboardAvoidingView
       style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
-      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
     >
       <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
-        <View style={styles.titleContainer}><Text style={styles.title}>Group Creation</Text></View>
+        <View style={styles.titleContainer}><Text style={styles.title}>Create New Group</Text></View>
         
-        <CustomInput label="Group Name" placeholder="Enter your group name" value={form.groupName} onChangeText={(val) => handleChange("groupName", val)} icon="people"  />
+        <CustomInput label="Group Name" placeholder="e.g., 'Family Savings'" value={form.groupName} onChangeText={(val) => handleChange("groupName", val)} icon="people" error={errors.groupName} />
-        <CustomInput label="Description" placeholder="Enter a short description" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
+        <CustomInput label="Description" placeholder="e.g., 'Monthly fund for family needs'" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
         
-        <Text style={styles.label}>Visibility</Text>
+        <Section title="Group Settings">
-        <View style={styles.toggleContainer}>
+            <SettingRow label="Visibility">
-            <TouchableOpacity style={[styles.toggleButton, form.visibility === "PRIVATE" && styles.selectedButton]} onPress={() => handleChange("visibility", "PRIVATE")}><Text style={[styles.toggleButtonText, form.visibility === "PRIVATE" && styles.selectedButtonText]}>Private</Text></TouchableOpacity>
+                <ToggleButtons
-            <TouchableOpacity style={[styles.toggleButton, form.visibility === "PUBLIC" && styles.selectedButton]} onPress={() => handleChange("visibility", "PUBLIC")}><Text style={[styles.toggleButtonText, form.visibility === "PUBLIC" && styles.selectedButtonText]}>Public</Text></TouchableOpacity>
+                    options={["PRIVATE", "PUBLIC"]}
-        </View>
+                    selectedValue={form.visibility}
+                    onSelect={(val) => handleChange("visibility", val)}
+                />
+            </SettingRow>
+            <SettingRow label="Fund Distribution">
+                <ToggleButtons
+                    options={distributionTypes}
+                    selectedValue={form.withdrawalMethod}
+                    onSelect={(val) => handleChange("withdrawalMethod", val)}
+                />
+            </SettingRow>
+        </Section>
 
-        <Text style={styles.label}>Fund Distribution</Text>
+        <Section title="Participant Rules">
-        <View style={styles.toggleContainer}>
+          <View style={styles.participantsRow}>
-            {distributionTypes.map((type) => (<TouchableOpacity key={type} onPress={() => handleChange("withdrawalMethod", type)} style={[styles.toggleButton, form.withdrawalMethod === type && styles.selectedButton]}><Text style={[styles.toggleButtonText, form.withdrawalMethod === type && styles.selectedButtonText]}>{type.charAt(0) + type.slice(1).toLowerCase()}</Text></TouchableOpacity>))}
+              <View style={styles.participantInput}><CustomInput label="Min" placeholder="e.g., 5" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /></View>
-        </View>
+              <View style={styles.participantInput}><CustomInput label="Max" placeholder="e.g., 10" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /></View>
+          </View>
+        </Section>
         
-        <View style={styles.participantsRow}>
+        <Section title="Financial Details">
-            <View style={styles.participantInput}><CustomInput label="Min" placeholder="Min" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" /></View>
+            <CustomInput label="Contribution Amount (INR)" placeholder="e.g., 5000" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} />
-            <View style={styles.participantInput}><CustomInput label="Max" placeholder="Max" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" /></View>
+            <SettingRow label="Payment Cycle">
-        </View>
+              <ToggleButtons
+                  options={cycleTypes}
+                  selectedValue={form.cycleType}
+                  onSelect={(val) => handleChange("cycleType", val)}
+                  isWrap={true}
+              />
+            </SettingRow>
+            {form.cycleType === "CUSTOM" && (<CustomInput label="Custom Cycle (Days)" placeholder="Enter number of days" value={form.customCycleDays} onChangeText={(val) => handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" error={errors.customCycleDays} />)}
+        </Section>
 
-        <Text style={styles.label}>Contribution Amount (INR)</Text>
+        <Section title="Late Fee Policy">
-        <View style={styles.presetContainer}>
+            <SettingRow label="Fee Mode">
-            {presetAmounts.map((amount) => (<TouchableOpacity key={amount} onPress={() => handlePresetAmount(amount)} style={[styles.presetButton, form.contributionAmount === amount.toString() && styles.presetSelected]}><Text style={[styles.presetButtonText, form.contributionAmount === amount.toString() && styles.presetSelectedText]}>{amount}</Text></TouchableOpacity>))}
+              <ToggleButtons
-        </View>
+                  options={lateFeeModes}
-        <View style={styles.amountContainer}>
+                  selectedValue={form.lateFeeMode}
-            <Slider style={styles.slider} minimumValue={0} maximumValue={50000} step={100} value={parseInt(form.contributionAmount, 10) || 0} onValueChange={handleAmountChange} minimumTrackTintColor={colors.pastelGreen} maximumTrackTintColor="#ddd" thumbTintColor="#62b59a" />
+                  onSelect={(val) => handleChange("lateFeeMode", val)}
-            <View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" /></View>
+              />
-        </View>
+            </SettingRow>
+            <CustomInput label="Late Fee Value (INR)" placeholder="e.g., 50" value={form.lateFeeValue} onChangeText={(val) => handleChange("lateFeeValue", val)} keyboardType="numeric" icon="alert-circle" error={errors.lateFeeValue} />
+        </Section>
 
-        <Text style={styles.label}>Cycle Type</Text>
+        <CustomButton title="Review Group" onPress={handleReview} style={{marginTop: 20}} />
-        <View style={styles.cycleTypeContainer}>
-            {cycleTypes.map((type) => (<TouchableOpacity key={type} onPress={() => handleChange("cycleType", type)} style={[styles.cycleTypeButton, form.cycleType === type && styles.cycleTypeSelected]}><Text style={[styles.cycleTypeButtonText, form.cycleType === type && styles.cycleTypeSelectedText]}>{type.charAt(0) + type.slice(1).toLowerCase()}</Text></TouchableOpacity>))}
-        </View>
-        {form.cycleType === "CUSTOM" && (<CustomInput label="Custom Cycle Days" placeholder="Enter number of days" value={form.customCycleDays} onChangeText={(val) => handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" />)}
-
-        <Text style={styles.label}>Start Date</Text>
-        <TouchableOpacity style={[styles.datePickerButton, errors.startDate && styles.errorBorder]} onPress={() => setCalendarVisible(true)}>
-            <Ionicons name="calendar-outline" size={20} color="#555" />
-            <Text style={styles.datePickerText}>{form.startDate || "Select a start date"}</Text>
-        </TouchableOpacity>
-        {errors.startDate && <Text style={styles.errorText}>{errors.startDate}</Text>}
-
-        <CustomButton title="Review" onPress={handleReview} />
       </ScrollView>
-
-      <Modal animationType="fade" transparent={true} visible={isCalendarVisible} onRequestClose={() => setCalendarVisible(false)}>
-        <TouchableOpacity style={styles.modalBackdrop} activeOpacity={1} onPressOut={() => setCalendarVisible(false)}>
-          <View style={styles.calendarWrapper}><Calendar onDayPress={handleDayPress} markedDates={{[form.startDate]: { selected: true, selectedColor: '#83f5cc' }}} theme={calendarTheme} /></View>
-        </TouchableOpacity>
-      </Modal>
     </KeyboardAvoidingView>
   );
 }
 
+// --- Helper Components for a cleaner layout ---
+
+const Section: React.FC<{ title: string, children: React.ReactNode }> = ({ title, children }) => (
+    <View style={styles.section}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        {children}
+    </View>
+);
+
+const SettingRow: React.FC<{ label: string, children: React.ReactNode }> = ({ label, children }) => (
+    <View style={styles.settingRow}>
+        <Text style={styles.label}>{label}</Text>
+        {children}
+    </View>
+);
+
+const ToggleButtons: React.FC<{ options: string[], selectedValue: string, onSelect: (value: string) => void, isWrap?: boolean }> = ({ options, selectedValue, onSelect, isWrap = false }) => (
+    <View style={[styles.toggleContainer, isWrap && { flexWrap: 'wrap' }]}>
+        {options.map((option) => (
+            <TouchableOpacity 
+                key={option} 
+                onPress={() => onSelect(option)} 
+                style={[styles.toggleButton, selectedValue === option && styles.selectedButton, isWrap && {flex: 0, paddingHorizontal: 15}]}
+            >
+                <Text style={[styles.toggleButtonText, selectedValue === option && styles.selectedButtonText]}>
+                    {option.charAt(0) + option.slice(1).toLowerCase()}
+                </Text>
+            </TouchableOpacity>
+        ))}
+    </View>
+);
+
 const styles = StyleSheet.create({
-  container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f6fa" },
+  container: { flexGrow: 1, padding: 16, backgroundColor: "#f5f6fa" },
-  titleContainer: {  paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 },
+  titleContainer: { marginBottom: 20, paddingHorizontal: 4 },
-  title: { fontSize: 22, fontWeight: "bold", color: "#333" },
+  title: { fontSize: 28, fontWeight: "bold", color: "#1F2937" },
-  label: { fontSize: 14, fontWeight: "600", marginBottom: 10, color: "#444" },
+  
-  toggleContainer: { flexDirection: "row", gap: 10, marginBottom: 15 },
+  section: {
-  toggleButton: { flex: 1, paddingVertical: 12, borderWidth: 1, borderColor: "#ddd", borderRadius: 12, alignItems: "center", backgroundColor: "#fff" },
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    elevation: 1,
+    shadowColor: '#4A5568',
+    shadowOpacity: 0.06,
+    shadowRadius: 10,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#374151',
+    marginBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F3F4F6',
+    paddingBottom: 10,
+  },
+
+  settingRow: {
+    marginBottom: 16,
+  },
+  
+  label: { fontSize: 14, fontWeight: "600", marginBottom: 8, color: "#4B5563" },
+  
+  toggleContainer: { flexDirection: "row", gap: 10 },
+  toggleButton: { 
+      flex: 1, 
+      paddingVertical: 12, 
+      borderWidth: 1, 
+      borderColor: "#D1D5DB", 
+      borderRadius: 8, 
+      alignItems: "center", 
+      backgroundColor: "#F9FAFB" 
+  },
   selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" },
-  toggleButtonText: { color: "#444", fontWeight: "600" },
+  toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: 'capitalize' },
-  selectedButtonText: { color: "#333" },
+  selectedButtonText: { color: "#1F2937" },
-  participantsRow: { flexDirection: "row", justifyContent: "space-between", alignItems: 'flex-start', marginBottom: 10 },
+  
-  participantInput: { flex: 0.48 },
+  participantsRow: { flexDirection: "row", gap: 15 },
-  presetContainer: { flexDirection: 'row', justifyContent: 'flex-start', gap: 10, marginBottom: 10 },
+  participantInput: { flex: 1 },
-  presetButton: { paddingVertical: 8, paddingHorizontal: 15, backgroundColor: '#ddd', borderRadius: 20 },
-  presetSelected: { backgroundColor: colors.pastelGreen, },
-  presetButtonText: { color: '#555', fontWeight: '600' },
-  presetSelectedText: { color: '#333' },
-  amountContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 15, },
-  slider: { flex: 1 },
-  amountInput: { width: 120, marginLeft: 10 },
-  cycleTypeContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginBottom: 20 },
-  cycleTypeButton: { paddingVertical: 10, paddingHorizontal: 15, backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 20, elevation: 1 },
-  cycleTypeSelected: { backgroundColor: colors.pastelGreen, borderColor: '#62b59a' },
-  cycleTypeButtonText: { color: '#444', fontWeight: '600', textTransform: 'capitalize' },
-  cycleTypeSelectedText: { color: '#333' },
-  datePickerButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#ddd', borderRadius: 12, paddingVertical: 15, paddingHorizontal: 15, marginBottom: 5, },
-  datePickerText: { marginLeft: 10, fontSize: 16, color: '#333' },
-  modalBackdrop: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)' },
-  calendarWrapper: { width: '90%', backgroundColor: 'white', borderRadius: 16, paddingVertical: 10, elevation: 5, shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 10, },
-  // --- ERROR STYLES ---
-  errorBorder: {
-    borderColor: '#ff4d4d', // Red border for fields with errors
-  },
-  errorText: {
-    color: '#ff4d4d',
-    fontSize: 12,
-    marginBottom: 10,
-    marginLeft: 5,
-  },
 });

src/screens/GroupReview.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal, ActivityIndicator } from "react-native";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import AppView from "../components/AppView";
@@ -6,42 +6,34 @@ import { apiCall } from "../utils/ApiHelper";
 import { GROUP_CREATION_URL } from "../utils/ApiUrls";
 import colors from "../components/colors";
 
-// --- Simplified Dialog Component ---
+// --- Themed Dialog Component ---
-const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuccess: boolean; onClose: () => void; }) => {
+const ThemedDialog = ({ visible, isSuccess, message, onClose, onNavigate }: { visible: boolean; isSuccess: boolean; message: string; onClose: () => void; onNavigate: () => void; }) => {
   if (!visible) return null;
 
-  const dialogConfig = {
+  const config = isSuccess ? {
-    success: {
+    icon: "checkmark-circle" as const,
-      icon: "checkmark-circle" as const,
+    color: "#2ecc71",
-      color: "#2ecc71",
+    title: "Success!",
-      title: "Success!",
+    buttonText: "Go Home",
-      message: "Your group has been created.",
+    action: onNavigate,
-      buttonText: "Awesome!",
+  } : {
-    },
+    icon: "close-circle" as const,
-    failure: {
+    color: "#e74c3c",
-      icon: "close-circle" as const,
+    title: "Oops!",
-      color: "#e74c3c",
+    buttonText: "Try Again",
-      title: "Oops!",
+    action: onClose,
-      message: "Something went wrong. Please try again.",
-      buttonText: "Try Again",
-    },
   };
 
-  const config = isSuccess ? dialogConfig.success : dialogConfig.failure;
-
   return (
-    <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={onClose}>
+    <Modal animationType="fade" transparent={true} visible={visible}>
       <View style={styles.modalBackdrop}>
         <View style={styles.dialogBox}>
           <Ionicons name={config.icon} size={60} color={config.color} />
           <Text style={styles.dialogTitle}>{config.title}</Text>
-          <Text style={styles.dialogMessage}>{config.message}</Text>
+          <Text style={styles.dialogMessage}>{message}</Text>
-          {/* Only show button for failure case */}
+          <TouchableOpacity style={styles.dialogButton} onPress={config.action}>
-          {!isSuccess && (
+            <Text style={styles.dialogButtonText}>{config.buttonText}</Text>
-            <TouchableOpacity style={styles.dialogButton} onPress={onClose}>
+          </TouchableOpacity>
-              <Text style={styles.dialogButtonText}>{config.buttonText}</Text>
-            </TouchableOpacity>
-          )}
         </View>
       </View>
     </Modal>
@@ -51,56 +43,56 @@ const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuc
 export default function GroupReview({ route, navigation }: any) {
   const { form } = route.params;
   const [isLoading, setIsLoading] = useState(false);
-  // --- Simplified State ---
   const [isSuccess, setIsSuccess] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
+  const [feedbackMessage, setFeedbackMessage] = useState("");
 
-  // --- Automatic Navigation Effect ---
+  const handleNavigateHome = () => {
-  useEffect(() => {
+    setModalVisible(false);
-    // If the modal is visible and the operation was a success...
+    navigation.reset({ index: 0, routes: [{ name: 'Home' }] });
-    if (modalVisible && isSuccess) {
+  };
-      // ...wait for 2 seconds, then navigate.
-      const timer = setTimeout(() => {
-        setModalVisible(false); // Close the dialog
-        navigation.reset({ // Reset the navigation stack
-          index: 0,
-          routes: [{ name: 'Home',}],
-        });
-      }, 2000);
-
-      return () => clearTimeout(timer); // Cleanup timer on unmount
-    }
-  }, [modalVisible, isSuccess, navigation]);
 
   const handleSubmit = async () => {
     setIsLoading(true);
     try {
-            const payload = {
+      const res = await apiCall(GROUP_CREATION_URL, "POST", form) as { statusCode?: number, message?: string };
-        ...form,
-        contributionAmount: Number(form.contributionAmount) || 0,
-        customCycleDays: Number(form.customCycleDays) || 0,
-        maxParticipants: Number(form.maxParticipants) || 0,
-        minParticipants: Number(form.minParticipants) || 0,
-      };
-      console.log("payload:", payload);
-      const res = await apiCall(GROUP_CREATION_URL, "POST", payload) as { statusCode?: number };
-      
       if (res?.statusCode === 201) {
         setIsSuccess(true);
+        setFeedbackMessage(res.message || "Your group has been created successfully.");
       } else {
-        throw new Error("Failed to create group.");
+        throw new Error(res?.message || "Failed to create the group.");
       }
-    } catch (error) {
+    } catch (error: any) {
       setIsSuccess(false);
+      setFeedbackMessage(error.message || "An unexpected error occurred.");
     } finally {
       setIsLoading(false);
-      setModalVisible(true); // Show the dialog for both success and failure
+      setModalVisible(true);
     }
   };
 
-  // --- UI COMPONENTS ---
+  const TimelineSection: React.FC<{ icon: any; title: string; children: React.ReactNode }> = ({ icon, title, children }) => (
-  const TimelineSection = ({ icon, title, children }: { icon: any; title: string; children: React.ReactNode }) => ( <View style={styles.section}> <View style={styles.timeline}> <View style={styles.timelineIcon}> <Ionicons name={icon} size={22} color="#fff" /> </View> <View style={styles.timelineLine} /> </View> <View style={styles.content}> <Text style={styles.sectionTitle}>{title}</Text> <View style={styles.card}> {children} </View> </View> </View> );
+    <View style={styles.section}>
-  const renderRow = (label: string, value: string | number) => { if (!value && typeof value !== 'number') return null; return ( <View style={styles.row}> <Text style={styles.label}>{label}</Text> <Text style={styles.value}>{value}</Text> </View> ); };
+      <View style={styles.timeline}>
+        <View style={styles.timelineIcon}><Ionicons name={icon} size={22} color="#fff" /></View>
+        <View style={styles.timelineLine} />
+      </View>
+      <View style={styles.content}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <View style={styles.card}>{children}</View>
+      </View>
+    </View>
+  );
+
+  const renderRow = (label: string, value: string | number | null) => {
+    if (value === null || value === undefined || value === "") return null;
+    return (
+      <View style={styles.row}>
+        <Text style={styles.label}>{label}</Text>
+        <Text style={styles.value}>{value}</Text>
+      </View>
+    );
+  };
 
   return (
     <AppView>
@@ -110,32 +102,60 @@ export default function GroupReview({ route, navigation }: any) {
           <Text style={styles.subtitle}>Confirm the details to launch your group.</Text>
         </View>
 
-        {/* --- Timeline Sections --- */}
+        <TimelineSection icon="information-circle-outline" title="Basic Information">
-        <TimelineSection icon="information-circle-outline" title="Basic Information">{renderRow("Name", form.groupName)}{form.description ? ( <View style={styles.descriptionContainer}> <Text style={styles.label}>Description</Text> <Text style={styles.descriptionText}>{form.description}</Text> </View> ) : null}</TimelineSection>
+          {renderRow("Name", form.groupName)}
-        <TimelineSection icon="shield-checkmark-outline" title="Rules & Privacy">{renderRow("Visibility", form.visibility)}{renderRow("Distribution", form.withdrawalMethod)}{renderRow("Min Members", form.minParticipants)}{renderRow("Max Members", form.maxParticipants)}</TimelineSection>
+          {form.description ? (
-        <TimelineSection icon="wallet-outline" title="Financial Details">{renderRow("Contribution", `${form.contributionAmount} INR`)}{renderRow("Cycle", form.cycleType)}{form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)}{renderRow("Start Date", form.startDate)}</TimelineSection>
+            <View style={styles.descriptionContainer}>
+              <Text style={styles.label}>Description</Text>
+              <Text style={styles.descriptionText}>{form.description}</Text>
+            </View>
+          ) : null}
+        </TimelineSection>
+
+        <TimelineSection icon="shield-checkmark-outline" title="Rules & Privacy">
+          {renderRow("Visibility", form.visibility)}
+          {renderRow("Distribution", form.withdrawalMethod)}
+          {renderRow("Min Members", form.minParticipants)}
+          {renderRow("Max Members", form.maxParticipants)}
+        </TimelineSection>
+
+        <TimelineSection icon="wallet-outline" title="Financial Details">
+          {renderRow("Contribution", `₹${form.contributionAmount}`)}
+          {renderRow("Cycle", form.cycleType)}
+          {form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)}
+        </TimelineSection>
+
+        <TimelineSection icon="alert-circle-outline" title="Late Fee Policy">
+          {renderRow("Fee Mode", form.lateFeeMode)}
+          {renderRow("Fee Value", `₹${form.lateFeeValue}`)}
+        </TimelineSection>
         
         <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn} disabled={isLoading}>
-            {isLoading ? <ActivityIndicator color="#333" /> : ( <> <Ionicons name="rocket-outline" size={22} color="#333" /> <Text style={styles.btnText}>Create Group</Text> </> )}
+          {isLoading ? <ActivityIndicator color="#333" /> : (
+            <>
+              <Ionicons name="rocket-outline" size={22} color="#333" />
+              <Text style={styles.btnText}>Create Group</Text>
+            </>
+          )}
         </TouchableOpacity>
       </ScrollView>
 
-      {/* --- Simplified Dialog Call --- */}
       <ThemedDialog
         visible={modalVisible}
         isSuccess={isSuccess}
+        message={feedbackMessage}
         onClose={() => setModalVisible(false)}
+        onNavigate={handleNavigateHome}
       />
     </AppView>
   );
 }
 
 const styles = StyleSheet.create({
-  // ... (All previous styles remain the same)
   container: { padding: 20, backgroundColor: "#f5f6fa" },
-  header: { marginBottom: 30, alignItems: 'flex-start' },
+  header: { marginBottom: 30 },
   title: { fontSize: 28, fontWeight: "bold", color: "#333" },
-  subtitle: { fontSize: 16, color: "#666", marginTop: 2 },
+  subtitle: { fontSize: 16, color: "#666", marginTop: 4 },
   section: { flexDirection: 'row', marginBottom: 10 },
   timeline: { alignItems: 'center', width: 40 },
   timelineIcon: { width: 40, height: 40, borderRadius: 20, backgroundColor: colors.pastelGreen, justifyContent: 'center', alignItems: 'center', elevation: 3 },
@@ -143,17 +163,17 @@ const styles = StyleSheet.create({
   content: { flex: 1, paddingLeft: 10, paddingBottom: 20 },
   sectionTitle: { fontSize: 18, fontWeight: 'bold', color: '#444', marginBottom: 10 },
   card: { backgroundColor: "#fff", borderRadius: 12, padding: 15, elevation: 2 },
-  row: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' },
+  row: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' },
   label: { fontSize: 15, color: "#666", fontWeight: "500" },
-  value: { fontSize: 15, color: "#333", fontWeight: "600", textAlign: 'right', textTransform: 'capitalize' },
+  value: { fontSize: 15, color: "#333", fontWeight: "600", textTransform: 'capitalize' },
   descriptionContainer: { paddingVertical: 10 },
   descriptionText: { fontSize: 15, color: '#333', marginTop: 4, lineHeight: 22 },
-  submitBtn: { backgroundColor: colors.pastelGreen, flexDirection: 'row', justifyContent: 'center', alignItems: "center", paddingVertical: 16, borderRadius: 12, elevation: 3, marginTop: 20, borderWidth: 1.5, borderColor: '#62b59a' },
+  submitBtn: { backgroundColor: colors.pastelGreen, flexDirection: 'row', justifyContent: 'center', alignItems: "center", paddingVertical: 16, borderRadius: 12, marginTop: 20 },
   btnText: { color: "#333", fontWeight: "bold", fontSize: 18, marginLeft: 10 },
   modalBackdrop: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center' },
   dialogBox: { width: '85%', backgroundColor: 'white', borderRadius: 16, padding: 25, alignItems: 'center', elevation: 10 },
-  dialogTitle: { fontSize: 22, fontWeight: 'bold', color: '#333', marginTop: 15, marginBottom: 5 },
+  dialogTitle: { fontSize: 22, fontWeight: 'bold', color: '#333', marginTop: 15, marginBottom: 10 },
   dialogMessage: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 25 },
-  dialogButton: { backgroundColor: colors.pastelGreen, paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
+  dialogButton: { backgroundColor: '#f0f0f0', paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
   dialogButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 },
 });

src/screens/LoginScreen.tsx

@@ -42,8 +42,8 @@ export default function LoginScreen() {
   const fade = useRef(new Animated.Value(0)).current;
   const slide = useRef(new Animated.Value(24)).current;
   const ctaScale = useRef(new Animated.Value(1)).current;
-  const user = useSelector((state:any) => state.user)
+  const user = useSelector((state: any) => state.user)
-  console.log("current user ----",user)
+  console.log("current user ----", user)
   useEffect(() => {
     Animated.parallel([
       Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
@@ -51,91 +51,109 @@ export default function LoginScreen() {
     ]).start();
   }, []);
 
-  const handleContinue = async () => {
+ const handleContinue = async () => {
-    if (mobile.length === 10) {
+  if (mobile.length === 10) {
-      setLoading(true);
+    setLoading(true);
-      try {
+    try {
-        const res = await axios.get(LOGIN_URL + mobile);
+      console.log("LOGIN_URL console:", LOGIN_URL, "mobile:", mobile);
-        console.log("OTP sent response:", res)
 
-        if (res.data.statusCode === 200) {
+      const res = await axios.get(LOGIN_URL, {
-          navigation.navigate("OtpVarify", { mobile });
+        params: { mobile },
-        }
+      });
-      } catch (error) {
+
-        console.error("Login error:", error);
+      console.log("OTP sent response:", res.data);
-        Alert.alert("Error", "Failed to send OTP. Please try again.");
+
-      } finally {
+      if (res.data.statusCode === 200) {
-        setLoading(false);
+        navigation.navigate("OtpVarify", { mobile });
+      } else {
+        Alert.alert("Error", res.data.message || "Failed to send OTP");
       }
-    } else {
+    } catch (error: any) {
-      Alert.alert("Please enter a valid 10-digit mobile number");
+      console.error("Login error:", error);
+
+      if (axios.isAxiosError(error)) {
+        console.log("Error message:", error.message);
+        console.log("Error response:", error.response?.data);
+        console.log("Error status:", error.response?.status);
+        console.log("Error headers:", error.response?.headers);
+      } else {
+        console.log("Unexpected error:", error);
+      }
+
+      Alert.alert("Error", "Failed to send OTP. Please try again.");
+    } finally {
+      setLoading(false);
     }
-  };
+  } else {
+    Alert.alert("Please enter a valid 10-digit mobile number");
+  }
+};
 
-  const onPressIn = () =>
-    Animated.spring(ctaScale, {
-      toValue: 0.97,
-      useNativeDriver: true,
-      speed: 20,
-      bounciness: 0,
-    }).start();
 
-  const onPressOut = () =>
+const onPressIn = () =>
-    Animated.spring(ctaScale, {
+  Animated.spring(ctaScale, {
-      toValue: 1,
+    toValue: 0.97,
-      useNativeDriver: true,
+    useNativeDriver: true,
-      speed: 20,
+    speed: 20,
-      bounciness: 6,
+    bounciness: 0,
-    }).start();
+  }).start();
 
-  return (
+const onPressOut = () =>
-    <KeyboardAvoidingView
+  Animated.spring(ctaScale, {
-      style={styles.container}
+    toValue: 1,
-      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    useNativeDriver: true,
-    >
+    speed: 20,
-      <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
+    bounciness: 6,
+  }).start();
 
-      {/* Top content */}
+return (
-      <View style={styles.topSection}>
+  <KeyboardAvoidingView
-        <Text style={styles.brand}>CircleCollect</Text>
+    style={styles.container}
-        <Text style={styles.title}>Welcome Back 👋</Text>
+    behavior={Platform.OS === "ios" ? "padding" : undefined}
-        <Text style={styles.subtitle}>
+  >
-          Enter your mobile number to sign in and continue.
+    <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
-        </Text>
 
-        <Animated.View
+    {/* Top content */}
-          style={[
+    <View style={styles.topSection}>
-            styles.inputWrapper,
+      <Text style={styles.brand}>CircleCollect</Text>
-            { opacity: fade, transform: [{ translateY: slide }] },
+      <Text style={styles.title}>Welcome Back 👋</Text>
-          ]}
+      <Text style={styles.subtitle}>
-        >
+        Enter your mobile number to sign in and continue.
-          <CustomInput
+      </Text>
-            label="Mobile Number"
-            placeholder="Enter Mobile Number"
-            value={mobile}
-            onChangeText={setMobile}
-            keyboardType="phone-pad"
-            maxLength={10}
-            icon="call-outline"
-          />
-        </Animated.View>
-      </View>
 
-      {/* Bottom Button */}
       <Animated.View
-        style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
+        style={[
+          styles.inputWrapper,
+          { opacity: fade, transform: [{ translateY: slide }] },
+        ]}
       >
-        <CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
+        <CustomInput
-
+          label="Mobile Number"
-        <Text style={styles.footerText}>
+          placeholder="Enter Mobile Number"
-          By continuing, you agree to our{" "}
+          value={mobile}
-          <Text style={{ color: theme.accent, fontWeight: "600" }}>
+          onChangeText={setMobile}
-            Terms & Privacy
+          keyboardType="phone-pad"
-          </Text>
+          maxLength={10}
-        </Text>
+          icon="call-outline"
+        />
       </Animated.View>
-    </KeyboardAvoidingView>
+    </View>
-  );
+
+    {/* Bottom Button */}
+    <Animated.View
+      style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
+    >
+      <CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
+
+      <Text style={styles.footerText}>
+        By continuing, you agree to our{" "}
+        <Text style={{ color: theme.accent, fontWeight: "600" }}>
+          Terms & Privacy
+        </Text>
+      </Text>
+    </Animated.View>
+  </KeyboardAvoidingView>
+);
 }
 
 const styles = StyleSheet.create({

src/screens/SplashScreen.tsx

@@ -1,92 +1,106 @@
 import React, { useEffect, useRef } from "react";
-import { View, Text, StyleSheet, ActivityIndicator, Animated, Alert } from "react-native";
+import { View, Text, StyleSheet, ActivityIndicator, Animated, Alert, ToastAndroid } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
-import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
+import { RootStackParamList } from "../navigation/AppNavigator";
-import { BASE_URL, PUT_USER_STATUS } from "../utils/ApiUrls";
+import { PROFILE_URL } from "../utils/ApiUrls";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
-import { setUserData } from "../redux/userSlice";
+import { clearUser, setUserData } from "../redux/userSlice";
 import colors from "../components/colors";
-import { ApiResponse } from "./home/UserProfileStatus";
-import { fetchUserProfile } from "../utils/HelperFunction";
 
 const SplashScreen = () => {
-
-  const user = useSelector((state: any) => state.user);
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const fadeAnim = useRef(new Animated.Value(1)).current;
+  const dispatch = useDispatch();
 
-
+  const fetchUserProfile = async (dispatch: any, navigation: any) => {
-
+    try {
-
+      const credentials = await Keychain.getGenericPassword();
-
+      if (!credentials) {
-  const userStatus = async () => {
+        return null;
-      try {
-        const credentials = await Keychain.getGenericPassword();
-        if (!credentials) {
-          Alert.alert("Error", "You are not logged in");
-          return;
-        }
-        const token = credentials.password;
-  
-        const response = await fetch(PUT_USER_STATUS, {
-          method: "GET",
-          headers: {
-            Accept: "*/*",
-            Authorization: `Bearer ${token}`,
-          },
-        });
-  
-        const json: ApiResponse = await response.json();
-  
-        console.log("👤 Profile Status Response:", json);
-        if (json.status === "success") {
-  
-        } else {
-          // setError(json.message || "Failed to fetch status");
-        }
-      } catch (err) {
-        // setError("Something went wrong. Please try again.");
       }
-    };
 
+      const token = credentials.password;
+      const response = await fetch(PROFILE_URL, {
+        method: "GET",
+        headers: {
+          Accept: "*/*",
+          Authorization: `Bearer ${token}`,
+        },
+      });
 
-  console.log("redux user", user);
+      const result = await response.json();
+
+      if (response.status === 200 && result.status === "success") {
+        // Save user data in Redux
+        dispatch(
+          setUserData({
+            id: result.data.id,
+            userId: result.data.userId,
+            username: result.data.username,
+            firstName: result.data.firstName,
+            lastName: result.data.lastName,
+            gender: result.data.gender,
+            mobile: result.data.mobile,
+            email: result.data.email,
+            address: result.data.address,
+            bankAccountNumber: result.data.bankAccountNumber,
+            bankName: result.data.bankName,
+            branchCode: result.data.branchCode,
+            profilePicture: result.data.filePath,
+            filePath: result.data.filePath,
+            imageBlob: result.data.imageBlob,
+            role: result.data.role,
+            organizerId: result.data.organizerId,
+            organizerStatus: result.data.organizerStatus,
+            profileStatus: true,
+          })
+        );
+        return result.data.role;
+      } else if (response.status === 401 || result.status === 401) {
+        // Unauthorized: reset credentials and navigate to login
+        await Keychain.resetGenericPassword();
+        dispatch(clearUser());
+        ToastAndroid.show(result.message || "Session expired. Please login again.", ToastAndroid.SHORT);
+        navigation.replace("Login");
+        return null;
+      } else {
+        console.warn("Unexpected response:", result);
+        return null;
+      }
+    } catch (error) {
+      console.error("❌ Error fetching profile:", error);
+      ToastAndroid.show("Failed to fetch profile. Please try again.", ToastAndroid.SHORT);
+      return null;
+    }
+  };
 
   useEffect(() => {
-    const checkLogin = async () => {
+    const startSplash = async () => {
-      try {
+      const role = await fetchUserProfile(dispatch, navigation);
-        const creds = await Keychain.getGenericPassword();
+
-        if (creds) {
+      Animated.timing(fadeAnim, {
-          console.log("🔑 Found token:", creds.password);
+        toValue: 0,
-          navigation.replace("Home"); // go to bottom tabs if logged in
+        duration: 1500,
+        useNativeDriver: true,
+        delay: 1500,
+      }).start(() => {
+        // Navigate based on role
+        if (!role) {
+          navigation.replace("Login");
+        } else if (role === "USER") {
+          navigation.replace("Home");
+        } else if (role === "ORGANIZER") {
+          navigation.replace("Home"); // Replace with Organizer screen if you have one
         } else {
           navigation.replace("Login");
         }
-      } catch (error) {
+      });
-        console.error("Error checking login:", error);
-        navigation.replace("Login");
-      }
     };
 
-    // Start fade out animation
+    startSplash();
-    Animated.timing(fadeAnim, {
+  }, [navigation, fadeAnim, dispatch]);
-      toValue: 0,
-      duration: 1500, // fade out in 1.5s
-      useNativeDriver: true,
-      delay: 1500, // wait before fading
-    }).start(() => {
-      checkLogin(); // only navigate after animation
-    });
-  }, [navigation, fadeAnim]);
-
-  useEffect(() => {
-    const fetchProfile = async () => {
-      await fetchUserProfile();
-    };
-    fetchProfile();
-  }, [])
 
   return (
     <View style={styles.container}>
@@ -105,7 +119,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#FFFFFF", // white background
+    backgroundColor: "#FFFFFF",
   },
   title: {
     fontSize: 28,

src/screens/home/GroupList.tsx

@@ -85,7 +85,7 @@ const GroupList = () => {
         const res = await fetch(`${BASE_URL}fund/getAll/my/groups`, {
           headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
         });
-        console.log("my groups response", res);
+        console.log("my groups response : ", res);
         const data = await res.json();
         setGroups(data.data || []);
         setFilteredGroups(data.data || []);

src/screens/home/Home.tsx

@@ -11,10 +11,10 @@ import {
 import AppView from "../../components/AppView";
 import UserProfileStatus from "./UserProfileStatus";
 import colors from "../../components/colors";
-import { Ionicons } from "@react-native-vector-icons/ionicons";
 import GroupsTabs from "./GroupsTabs";
 import { useSelector } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
+import UserHome from "./user-home/UserHome";
 // Enable animation for Android
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -29,11 +29,7 @@ const Home = () => {
       <View style={styles.header}>
         <Text style={styles.greeting}>Hello, {user.firstName} {user.lastName}👋</Text>
         <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
-          {/* <Ionicons
+         
-            name="person-circle-outline"
-            size={40}
-            color={colors.primary}
-          /> */}
           <Image
             source={
               user.imageBlob
@@ -45,7 +41,8 @@ const Home = () => {
       </View>
       {/* Status */}
       <UserProfileStatus />
-      <GroupsTabs />
+      {user?.role === "USER" ? <UserHome /> :
+      <GroupsTabs />}
     </AppView>
   );
 };

src/screens/home/user-home/GroupDetails.tsx

@@ -0,0 +1,248 @@
+import React, { useRef, useEffect } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    FlatList,
+    Animated,
+} from "react-native";
+import { useRoute } from "@react-navigation/native";
+import AppView from "../../../components/AppView";
+import colors from "../../../components/colors";
+import Ionicons from "@react-native-vector-icons/ionicons";
+
+const GroupDetails = () => {
+    const route = useRoute();
+    const { groupId } = route.params as { groupId: string };
+
+    const group = {
+        id: groupId,
+        name: "Wedding Fund",
+        collected: 12000,
+        goal: 20000,
+        description:
+            "This group is created to collect contributions for the wedding celebration. Everyone can contribute as per their convenience.",
+        members: [
+            { id: "1", name: "Alice", contribution: 3000, role: "Organizer" },
+            { id: "2", name: "Bob", contribution: 2500, role: "Member" },
+            { id: "3", name: "Charlie", contribution: 4000, role: "Member" },
+            { id: "4", name: "David", contribution: 2500, role: "Member" },
+        ],
+    };
+
+    const progress = Math.min(group.collected / group.goal, 1);
+
+    // Animation refs
+    const animatedValues = useRef(group.members.map(() => new Animated.Value(0))).current;
+
+    useEffect(() => {
+        const animations = group.members.map((_, i) =>
+            Animated.timing(animatedValues[i], {
+                toValue: 1,
+                duration: 400,
+                delay: i * 100,
+                useNativeDriver: true,
+            })
+        );
+        Animated.stagger(100, animations).start();
+    }, []);
+
+    const renderMember = ({ item, index }: { item: typeof group.members[0]; index: number }) => {
+        return (
+            <Animated.View
+                style={[
+                    styles.memberCard,
+                    {
+                        opacity: animatedValues[index],
+                        transform: [
+                            {
+                                translateY: animatedValues[index].interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0], // slide up effect
+                                }),
+                            },
+                        ],
+                    },
+                ]}
+            >
+                <View style={{ flexDirection: 'row', gap: 10 }}>
+                    <Ionicons
+                        name="person-circle-outline"
+                        size={40}
+                        color={colors.primary}
+                    />
+                    <View>
+                        <Text style={styles.memberName}>
+                            {item.name} {item.role === "Organizer" ? "(Organizer)" : "(Member)"}
+                        </Text>
+                        <Text style={styles.memberDetail}>Contribution: ₹{item.contribution}</Text>
+                    </View>
+
+                </View>
+
+            </Animated.View>
+        );
+    };
+
+    return (
+        <AppView>
+            {/* Group Title */}
+            <Text style={styles.groupName}>{group.name}</Text>
+            <Text style={styles.description}>{group.description}</Text>
+
+            {/* Progress Bar */}
+            <View style={styles.progressContainer}>
+                <View style={styles.progressBar}>
+                    <View style={[styles.progressFill, { flex: progress }]} />
+                    <View style={{ flex: 1 - progress }} />
+                </View>
+                <Text style={styles.amount}>
+                    ₹{group.collected} / ₹{group.goal}
+                </Text>
+            </View>
+
+            {/* Stats */}
+            <View style={styles.statsRow}>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>{group.members.length}</Text>
+                    <Text style={styles.statLabel}>Members</Text>
+                </View>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>₹{group.collected}</Text>
+                    <Text style={styles.statLabel}>Collected</Text>
+                </View>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>₹{group.goal}</Text>
+                    <Text style={styles.statLabel}>Goal</Text>
+                </View>
+            </View>
+
+            {/* Members List */}
+            <Text style={styles.sectionTitle}>Members</Text>
+            <FlatList
+                data={group.members}
+                keyExtractor={(item) => item.id}
+                renderItem={({ item, index }) => renderMember({ item, index })}
+                contentContainerStyle={styles.membersListContainer}
+            />
+
+            {/* Actions */}
+            <View style={styles.actions}>
+                <TouchableOpacity style={styles.button}>
+                    <Text style={styles.buttonText}>Contribute</Text>
+                </TouchableOpacity>
+            </View>
+        </AppView>
+    );
+};
+
+export default GroupDetails;
+
+const styles = StyleSheet.create({
+    groupName: {
+        fontSize: 22,
+        fontWeight: "700",
+        color: "#0f172a",
+        marginBottom: 6,
+    },
+    description: {
+        fontSize: 14,
+        color: "#475569",
+        marginBottom: 20,
+        lineHeight: 20,
+    },
+    progressContainer: {
+        marginBottom: 24,
+    },
+    progressBar: {
+        flexDirection: "row",
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: "#e2e8f0",
+        overflow: "hidden",
+        marginBottom: 6,
+    },
+    progressFill: {
+        backgroundColor: colors.Home,
+    },
+    amount: {
+        fontSize: 13,
+        color: "#64748b",
+    },
+    statsRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: 20,
+    },
+    statBox: {
+        flex: 1,
+        backgroundColor: "#fff",
+        marginHorizontal: 4,
+        padding: 16,
+        borderRadius: 12,
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOpacity: 0.05,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    statValue: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: "#1e293b",
+    },
+    statLabel: {
+        fontSize: 12,
+        color: "#64748b",
+        marginTop: 4,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: "#0f172a",
+        marginBottom: 12,
+    },
+    membersListContainer: {
+        paddingBottom: 20,
+    },
+    memberCard: {
+        backgroundColor: "#fff",
+        padding: 16,
+        borderRadius: 12,
+        marginBottom: 10,
+        // shadowColor: "#000",
+        // shadowOpacity: 0.05,
+        // shadowOffset: { width: 0, height: 2 },
+        // shadowRadius: 4,
+        // elevation: 2,
+        borderLeftWidth:5,
+        borderColor:colors.primary
+    },
+    memberName: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#1e293b",
+        marginBottom: 4,
+    },
+    memberDetail: {
+        fontSize: 13,
+        color: "#475569",
+    },
+    actions: {
+        marginTop: 16,
+    },
+    button: {
+        backgroundColor: colors.Home,
+        paddingVertical: 14,
+        borderRadius: 10,
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    buttonText: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#fff",
+    },
+});

src/screens/home/user-home/UserHome.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    FlatList,
+    TouchableOpacity,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import type { RootStackParamList } from "../../../navigation/AppNavigator"; // adjust path
+import colors from "../../../components/colors";
+import Ionicons from "@react-native-vector-icons/ionicons";
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList, "GroupDetails">;
+
+type Group = {
+    id: string;
+    name: string;
+    members: number;
+    collected: number;
+    goal: number;
+};
+
+const groups: Group[] = [
+    { id: "1", name: "Wedding Fund", members: 25, collected: 12000, goal: 20000 },
+    { id: "2", name: "Birthday Gift", members: 10, collected: 4500, goal: 6000 },
+    { id: "3", name: "Community Event", members: 50, collected: 22000, goal: 30000 },
+];
+
+const UserHome = () => {
+    const navigation = useNavigation<NavigationProp>();
+
+    const totalGroups = groups.length;
+    const totalCollected = groups.reduce((sum, g) => sum + g.collected, 0);
+
+    const renderItem = ({ item }: { item: Group }) => {
+        const progress = Math.min(item.collected / item.goal, 1) * 100;
+
+        return (
+            <TouchableOpacity
+                style={styles.card}
+                onPress={() => navigation.navigate("GroupDetails", { groupId: item.id })}
+            >
+                <Text style={styles.groupName}>{item.name}</Text>
+                <View style={styles.statsRow}>
+                    <Ionicons
+                        name="person-circle-outline"
+                        size={20}
+                        color={colors.primary}
+                    />
+                    <Text style={styles.detail}> {item.members} members</Text>
+                </View>
+
+                {/* Progress Bar */}
+                <View style={styles.progressBar}>
+                    <View style={[styles.progressFill, { width: `${progress}%` }]} />
+                </View>
+
+                <Text style={styles.amount}>
+                    ₹{item.collected} / ₹{item.goal}
+                </Text>
+            </TouchableOpacity>
+        );
+    };
+
+    return (
+        <View>
+            {/* Stats */}
+            <View style={[styles.statsRow, { marginVertical: 24, }]}>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>{totalGroups}</Text>
+                    <Text style={styles.statLabel}>Groups Joined</Text>
+                </View>
+                <View style={styles.statBox}>
+                    <Text style={styles.statValue}>₹{totalCollected}</Text>
+                    <Text style={styles.statLabel}>Total Contributed</Text>
+                </View>
+            </View>
+
+            {/* Groups List */}
+            <Text style={styles.sectionTitle}>Your Groups</Text>
+            <FlatList
+                data={groups}
+                keyExtractor={(item) => item.id}
+                renderItem={renderItem}
+                contentContainerStyle={{ paddingBottom: 20 }}
+            />
+        </View>
+    );
+};
+
+export default UserHome;
+
+const styles = StyleSheet.create({
+
+
+    statsRow: {
+        flexDirection: "row",
+        gap: 10
+    },
+    statBox: {
+        flex: 1,
+        backgroundColor: "#fff",
+        // marginHorizontal: 6,
+        padding: 16,
+        borderRadius: 12,
+        alignItems: "center",
+        shadowColor: "#000",
+        shadowOpacity: 0.05,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    statValue: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: colors.Home,
+    },
+    statLabel: {
+        fontSize: 12,
+        color: "#64748b",
+        marginTop: 4,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: "600",
+        color: colors.Home,
+        marginBottom: 12,
+    },
+    card: {
+        backgroundColor: "#ffffff",
+        padding: 16,
+        marginBottom: 12,
+        borderRadius: 12,
+        shadowColor: "#000",
+        shadowOpacity: 0.05,
+        shadowOffset: { width: 0, height: 2 },
+        shadowRadius: 6,
+        elevation: 2,
+    },
+    groupName: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: colors.Home,
+        marginBottom: 6,
+    },
+    detail: {
+        fontSize: 13,
+        color: "#475569",
+        marginBottom: 8,
+    },
+    progressBar: {
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: "#e2e8f0",
+        marginBottom: 6,
+        overflow: "hidden",
+    },
+    progressFill: {
+        backgroundColor: colors.primary,
+        height: "100%",
+    },
+    amount: {
+        fontSize: 13,
+        color: "#64748b",
+    },
+});

src/screens/management/EditGroupScreen.tsx

@@ -13,6 +13,7 @@ import {
 import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
 import { apiCall } from '../../utils/ApiHelper'; // Adjust path
 import AppView from '../../components/AppView';
+import { Picker } from '@react-native-picker/picker';
 
 // --- Type Definitions ---
 interface Participant {
@@ -27,216 +28,284 @@ export interface GroupDetails {
   id: string;
   groupName: string;
   description: string;
-  startDate: [number, number, number];
+  startDate: [number, number, number] | null;
   endDate: [number, number, number] | null;
   contributionAmount: number;
   minParticipants: number;
   maxParticipants: number;
+  portalCharge: number | null;
   latePaymentCharge: number | null;
   cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
-  status: 'PENDING' | 'ACTIVE' | 'COMPLETED';
+  customCycleDays: number;
+  withdrawalMethod: 'RANDOM' | 'SEQUENTIAL';
+  status: 'PENDING' | 'ACTIVE' | 'COMPLETED' | 'APPROVED';
   visibility: 'PUBLIC' | 'PRIVATE';
+  organizerId: string;
   totalParticipants: number;
   participants: Participant[];
 }
 
 export interface EditGroupPayload {
-  groupName?: string;
+  groupName: string;
-  description?: string;
+  description: string;
-  maxParticipants?: number;
+  maxParticipants: number;
+  contributionAmount: number;
+  customCycleDays: number | null;
+  cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
+  latePaymentCharge: number;
+  visibility: 'PUBLIC' | 'PRIVATE';
 }
 
 type EditGroupScreenProps = NativeStackScreenProps<RootStackParamList, 'EditGroup'>;
-type EditingSection = 'details' | 'financials' | null;
+type EditingField = keyof EditGroupPayload | null;
-
-// --- Helper Components ---
-const InfoRow: React.FC<{ label: string; value: string | number | null; isStatus?: boolean }> = ({ label, value, isStatus = false }) => (
-    <View style={styles.infoRow}>
-        <Text style={styles.infoLabel}>{label}</Text>
-        <Text style={[styles.infoValue, isStatus && { color: value === 'ACTIVE' ? '#22c55e' : '#f97316' }]}>
-            {value ?? 'N/A'}
-        </Text>
-    </View>
-);
-
-const ParticipantRow: React.FC<{ participant: Participant }> = ({ participant }) => (
-    <View style={styles.participantRow}>
-        <View>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <Text style={styles.participantName}>{`${participant.firstName} ${participant.lastName || ''}`.trim()}</Text>
-                {participant.role === 'ORGANIZER' && (
-                    <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>
-                )}
-            </View>
-            <Text style={styles.participantMobile}>{participant.mobile}</Text>
-        </View>
-    </View>
-);
-
-const FormInput: React.FC<{ label: string; value: string; onChangeText: (text: string) => void; multiline?: boolean; keyboardType?: 'default' | 'numeric' }> = 
-({ label, value, onChangeText, multiline = false, keyboardType = 'default' }) => (
-    <View style={styles.inputContainer}>
-        <Text style={styles.inputLabel}>{label}</Text>
-        <TextInput
-            style={[styles.input, multiline && styles.textArea]}
-            value={value}
-            onChangeText={onChangeText}
-            multiline={multiline}
-            keyboardType={keyboardType}
-            placeholderTextColor="#9CA3AF"
-        />
-    </View>
-);
 
 // --- Main Screen Component ---
 const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
-    const { groupId } = route.params;
+  const { groupId } = route.params;
 
-    const [editingSection, setEditingSection] = useState<EditingSection>(null);
+  const [editingField, setEditingField] = useState<EditingField>(null);
-    const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
+  const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
-    const [loading, setLoading] = useState(true);
+  const [editableData, setEditableData] = useState<EditGroupPayload>({
-    const [saving, setSaving] = useState(false);
+    groupName: '',
-    const [error, setError] = useState<string | null>(null);
+    description: '',
+    maxParticipants: 0,
+    contributionAmount: 0,
+    customCycleDays: null,
+    cycleType: 'MONTHLY',
+    latePaymentCharge: 0,
+    visibility: 'PRIVATE',
+  });
   
-    const [groupName, setGroupName] = useState('');
+  const [loading, setLoading] = useState(true);
-    const [description, setDescription] = useState('');
+  const [saving, setSaving] = useState(false);
-    const [maxParticipants, setMaxParticipants] = useState('');
+  const [starting, setStarting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-    const fetchGroupDetails = useCallback(async () => {
+  const fetchGroupDetails = useCallback(async () => {
-        setLoading(true);
+    setLoading(true);
-        setError(null);
+    setError(null);
-        try {
+    try {
-            const response = await apiCall(`https://api.godemo.in/FundCollect/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string };
+      const response = await apiCall(`https://api.godemo.in/FundCollect/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string };
-            if (response.status === 'success' && response.data) {
+      if (response.status === 'success' && response.data) {
-                setGroupDetails(response.data);
+        setGroupDetails(response.data);
-                setGroupName(response.data.groupName);
+        setEditableData({
-                setDescription(response.data.description);
+            groupName: response.data.groupName,
-                setMaxParticipants(response.data.maxParticipants.toString());
+            description: response.data.description,
-            } else {
+            maxParticipants: response.data.maxParticipants,
-                throw new Error(response.message || 'Failed to fetch group data.');
+            contributionAmount: response.data.contributionAmount,
+            customCycleDays: response.data.customCycleDays,
+            cycleType: response.data.cycleType,
+            latePaymentCharge: response.data.latePaymentCharge ?? 0,
+            visibility: response.data.visibility,
+        });
+      } else {
+        throw new Error(response.message || 'Failed to fetch group data.');
+      }
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [groupId]);
+
+  useEffect(() => {
+    fetchGroupDetails();
+  }, [fetchGroupDetails]);
+
+  const handleCancel = () => {
+    if (groupDetails) {
+        setEditableData({
+            groupName: groupDetails.groupName,
+            description: groupDetails.description,
+            maxParticipants: groupDetails.maxParticipants,
+            contributionAmount: groupDetails.contributionAmount,
+            customCycleDays: groupDetails.customCycleDays,
+            cycleType: groupDetails.cycleType,
+            latePaymentCharge: groupDetails.latePaymentCharge ?? 0,
+            visibility: groupDetails.visibility,
+        });
+    }
+    setEditingField(null);
+  };
+
+  const handleSave = async () => {
+    if (!groupDetails || !editingField) return;
+
+    if (editingField === 'maxParticipants') {
+        const newMaxParticipants = Number(editableData.maxParticipants);
+        if (newMaxParticipants < groupDetails.totalParticipants) {
+            Alert.alert('Invalid Input', `Max participants cannot be less than the current count (${groupDetails.totalParticipants}).`);
+            return;
+        }
+    }
+    
+    setSaving(true);
+    try {
+      await apiCall(`https://api.godemo.in/FundCollect/api/fund/groups/${groupDetails.id}/edit`, 'PUT', editableData);
+      Alert.alert('Success', 'Group has been updated.');
+      setEditingField(null);
+      await fetchGroupDetails();
+    } catch (e: any) {
+      Alert.alert('Save Error', e.message || 'An unexpected error occurred.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleStartGroup = async () => {
+    if (!groupDetails) return;
+
+    Alert.alert(
+      "Confirm Start",
+      "Are you sure you want to start this group? This action cannot be undone.",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Start",
+          onPress: async () => {
+            setStarting(true);
+            try {
+              await apiCall(`https://api.godemo.in/FundCollect/api/fund/group/start?groupId=${groupDetails.id}`, 'GET');
+              Alert.alert('Success', 'Group has been started successfully.');
+              await fetchGroupDetails();
+            } catch (e: any) {
+              Alert.alert('Start Error', e.message || 'An unexpected error occurred.');
+            } finally {
+              setStarting(false);
             }
-        } catch (e: any) {
+          },
-            setError(e.message);
+          style: 'destructive'
-        } finally {
-            setLoading(false);
         }
-    }, [groupId]);
+      ]
+    );
+  };
 
-    useEffect(() => {
+  const handleUpdateField = (field: keyof EditGroupPayload, value: any) => {
-        fetchGroupDetails();
+    setEditableData(prev => ({ ...prev, [field]: value }));
-    }, [fetchGroupDetails]);
+  };
     
-    const handleCancel = () => {
+  if (loading) return <View style={styles.centered}><ActivityIndicator size="large" color="#4F46E5" /></View>;
-        if (groupDetails) {
+  if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
-            setGroupName(groupDetails.groupName);
+  if (!groupDetails) return null;
-            setDescription(groupDetails.description);
-            setMaxParticipants(groupDetails.maxParticipants.toString());
-        }
-        setEditingSection(null);
-    };
 
-    const handleSave = async (section: EditingSection) => {
+  const isEditable = groupDetails.status === 'PENDING' || groupDetails.status === 'APPROVED';
-        if (!groupDetails || !section) return;
+  const canStartGroup = groupDetails.status === 'APPROVED' && groupDetails.totalParticipants >= groupDetails.minParticipants;
 
-        let payload: EditGroupPayload = {};
+  const renderInputField = (field: EditingField) => {
-        if (section === 'details') {
+      if (!field || !editableData) return null;
-            payload = { groupName, description };
-        } else if (section === 'financials') {
-            const newMaxParticipants = parseInt(maxParticipants, 10);
-            if (newMaxParticipants < groupDetails.totalParticipants) {
-                Alert.alert('Invalid Input', `Max participants cannot be less than the current count (${groupDetails.totalParticipants}).`);
-                return;
-            }
-            payload = { maxParticipants: newMaxParticipants };
-        }
       
-        setSaving(true);
+      const commonProps = { style: styles.input, placeholderTextColor: "#9CA3AF" };
-        try {
-            await apiCall(`https://api.godemo.in/FundCollect/api/fund/groups/${groupDetails.id}/edit`, 'PUT', payload);
-            Alert.alert('Success', 'Group has been updated.');
-            setEditingSection(null);
-            await fetchGroupDetails();
-        } catch (e: any) {
-            Alert.alert('Save Error', e.message || 'An unexpected error occurred.');
-        } finally {
-            setSaving(false);
-        }
-    };
 
-    const CardActionButtons: React.FC<{ section: EditingSection }> = ({ section }) => (
+      switch(field) {
-        <View style={styles.cardActions}>
+        case 'groupName':
-            <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel} disabled={saving}>
+            return <TextInput {...commonProps} value={editableData.groupName} onChangeText={(text) => handleUpdateField('groupName', text)} />;
-                <Text style={[styles.buttonText, { color: '#374151' }]}>Cancel</Text>
+        case 'description':
-            </TouchableOpacity>
+            return <TextInput {...commonProps} style={[styles.input, styles.textArea]} value={editableData.description} onChangeText={(text) => handleUpdateField('description', text)} multiline />;
-            <TouchableOpacity style={[styles.button, styles.saveButton]} onPress={() => handleSave(section)} disabled={saving}>
+        case 'contributionAmount':
-                {saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
+        case 'maxParticipants':
-            </TouchableOpacity>
+        case 'latePaymentCharge':
+        case 'customCycleDays':
+            return <TextInput {...commonProps} value={String(editableData[field] ?? '')} onChangeText={(text) => handleUpdateField(field, text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
+        case 'cycleType':
+            return <Picker selectedValue={editableData.cycleType} onValueChange={(itemValue) => handleUpdateField('cycleType', itemValue)} style={styles.picker}>
+                {['MONTHLY', 'WEEKLY', 'QUARTERLY', 'CUSTOM'].map(c => <Picker.Item key={c} label={c} value={c} />)}
+            </Picker>;
+        case 'visibility':
+            return <Picker selectedValue={editableData.visibility} onValueChange={(itemValue) => handleUpdateField('visibility', itemValue)} style={styles.picker}>
+                <Picker.Item label="PUBLIC" value="PUBLIC" />
+                <Picker.Item label="PRIVATE" value="PRIVATE" />
+            </Picker>;
+        default: return null;
+      }
+  }
+
+  const renderRow = (field: EditingField, label: string, displayValue: string | number) => {
+      return (
+        <View style={styles.fieldContainer}>
+             <View style={styles.infoRow}>
+                <Text style={styles.infoLabel}>{label}</Text>
+                {editingField !== field && (
+                    <View style={styles.valueContainer}>
+                        <Text style={styles.infoValue}>{displayValue}</Text>
+                        {isEditable && <TouchableOpacity onPress={() => setEditingField(field)} style={styles.editButton}>
+                            <Text style={styles.editButtonText}>✎</Text>
+                        </TouchableOpacity>}
+                    </View>
+                )}
+            </View>
+            {editingField === field && isEditable && (
+                <View style={styles.editingContainer}>
+                    {renderInputField(field)}
+                    <View style={styles.cardActions}>
+                        <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel} disabled={saving}>
+                            <Text style={[styles.buttonText, { color: '#374151' }]}>Cancel</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={[styles.button, styles.saveButton]} onPress={handleSave} disabled={saving}>
+                            {saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            )}
         </View>
-    );
+      )
+  }
 
-    if (loading) return <View style={styles.centered}><ActivityIndicator size="large" color="#4F46E5" /></View>;
+  return (
-    if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
+    <AppView paddingHorizontal={0}>
-    if (!groupDetails) return null;
+      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+        <Text style={styles.headerTitle}>Edit Group</Text>
 
-    const isEditable = groupDetails.status === 'PENDING';
+        {canStartGroup && (
+            <View style={styles.card}>
+                <Text style={styles.cardTitle}>Ready to Start?</Text>
+                <Text style={styles.startGroupText}>This group has met the minimum participant requirement.</Text>
+                <TouchableOpacity style={[styles.button, styles.startButton]} onPress={handleStartGroup} disabled={starting}>
+                    {starting ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.buttonText}>Start Group</Text>}
+                </TouchableOpacity>
+            </View>
+        )}
 
-    return (
+        <View style={styles.card}>
-        <AppView paddingHorizontal={0}>
+            <Text style={styles.cardTitle}>Group Info</Text>
-            <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+            {renderRow('groupName', 'Group Name', groupDetails.groupName)}
-                <Text style={styles.headerTitle}>Group Overview</Text>
+            {renderRow('description', 'Description', groupDetails.description)}
+        </View>
 
-                <View style={styles.card}>
+        <View style={styles.card}>
-                    <View style={styles.cardHeader}>
+            <Text style={styles.cardTitle}>Financial Rules</Text>
-                        <Text style={styles.cardTitle}>Group Details</Text>
+            {renderRow('contributionAmount', 'Contribution', `₹${groupDetails.contributionAmount.toLocaleString('en-IN')}`)}
-                        {isEditable && editingSection !== 'details' && (
+            {renderRow('maxParticipants', 'Max Participants', `${groupDetails.totalParticipants} / ${groupDetails.maxParticipants}`)}
-                            <TouchableOpacity onPress={() => setEditingSection('details')}><Text style={styles.editButtonText}>Edit</Text></TouchableOpacity>
+            {renderRow('latePaymentCharge', 'Late Fee', `₹${(groupDetails.latePaymentCharge ?? 0).toLocaleString('en-IN')}`)}
-                        )}
+        </View>
+
+        <View style={styles.card}>
+            <Text style={styles.cardTitle}>Configuration</Text>
+            {renderRow('cycleType', 'Payment Cycle', groupDetails.cycleType)}
+            {(editableData.cycleType === 'CUSTOM' || groupDetails.cycleType === 'CUSTOM') && renderRow('customCycleDays', 'Custom Days', `${editableData.customCycleDays ?? groupDetails.customCycleDays} days`)}
+            {renderRow('visibility', 'Visibility', groupDetails.visibility)}
+        </View>
+
+        <View style={styles.card}>
+            <Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants})</Text>
+            {groupDetails.participants.length > 0 ? (
+                groupDetails.participants.map(p => (
+                    <View key={p.id} style={styles.participantRow}>
+                      <View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                            <Text style={styles.participantName}>{`${p.firstName} ${p.lastName || ''}`.trim()}</Text>
+                            {p.role === 'ORGANIZER' && <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>}
+                        </View>
+                        <Text style={styles.participantMobile}>{p.mobile}</Text>
+                      </View>
                     </View>
-                    {editingSection === 'details' ? (
+                ))
-                        <>
+            ) : (
-                            <FormInput label="Group Name" value={groupName} onChangeText={setGroupName} />
+                <Text style={styles.noParticipantsText}>No participants yet.</Text>
-                            <FormInput label="Description" value={description} onChangeText={setDescription} multiline />
+            )}
-                            <CardActionButtons section="details" />
+        </View>
-                        </>
+      </ScrollView>
-                    ) : (
+    </AppView>
-                        <>
+  );
-                            <Text style={styles.groupNameView}>{groupDetails.groupName}</Text>
-                            <Text style={styles.descriptionView}>{groupDetails.description}</Text>
-                        </>
-                    )}
-                </View>
-
-                <View style={styles.card}>
-                    <View style={styles.cardHeader}>
-                        <Text style={styles.cardTitle}>Financial Rules</Text>
-                        {isEditable && editingSection !== 'financials' && (
-                            <TouchableOpacity onPress={() => setEditingSection('financials')}><Text style={styles.editButtonText}>Edit</Text></TouchableOpacity>
-                        )}
-                    </View>
-                    <InfoRow label="Contribution" value={`₹${groupDetails.contributionAmount.toLocaleString('en-IN')}`} />
-                    {editingSection === 'financials' ? (
-                      <>
-                        <FormInput label="Max Participants" value={maxParticipants} onChangeText={setMaxParticipants} keyboardType="numeric" />
-                        <CardActionButtons section="financials" />
-                      </>
-                    ) : (
-                        <InfoRow label="Participants" value={`${groupDetails.totalParticipants} / ${groupDetails.maxParticipants}`} />
-                    )}
-                     <InfoRow label="Payment Cycle" value={groupDetails.cycleType} />
-                     <InfoRow label="Group Status" value={groupDetails.status} isStatus />
-                </View>
-
-                <View style={styles.card}>
-                    <Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants})</Text>
-                    {groupDetails.participants.length > 0 ? (
-                        groupDetails.participants.map(p => <ParticipantRow key={p.id} participant={p} />)
-                    ) : (
-                        <Text style={styles.noParticipantsText}>No participants have joined yet.</Text>
-                    )}
-                </View>
-            </ScrollView>
-        </AppView>
-    );
 };
 
 const styles = StyleSheet.create({
@@ -247,33 +316,35 @@ const styles = StyleSheet.create({
     headerTitle: { fontSize: 28, fontWeight: 'bold', color: '#111827', marginBottom: 20 },
     
     card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10 },
-    cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10, marginBottom: 16 },
+    cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937', marginBottom: 12, borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10 },
-    cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937' },
-    editButtonText: { color: '#4F46E5', fontSize: 15, fontWeight: '600' },
     
-    groupNameView: { fontSize: 22, fontWeight: '700', color: '#1F2937', marginBottom: 8 },
+    editButton: { padding: 8, marginLeft: 8 },
-    descriptionView: { fontSize: 16, color: '#6B7280', lineHeight: 24 },
+    editButtonText: { color: '#4F46E5', fontSize: 20, fontWeight: 'bold' },
     
-    inputContainer: { marginBottom: 16 },
+    fieldContainer: { borderBottomWidth: 1, borderBottomColor: '#F3F4F6', paddingVertical: 12 },
-    inputLabel: { fontSize: 14, color: '#6B7280', marginBottom: 8, fontWeight: '500' },
+    infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-    input: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, padding: 14, fontSize: 16 },
-    textArea: { height: 100, textAlignVertical: 'top' },
-    
-    infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
     infoLabel: { fontSize: 16, color: '#6B7280' },
-    infoValue: { fontSize: 16, fontWeight: '600', textTransform: 'capitalize' },
+    infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
+    valueContainer: { flexDirection: 'row', alignItems: 'center' },
 
-    participantRow: { paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
+    editingContainer: { marginTop: 12 },
+    input: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, padding: 14, fontSize: 16, color: '#111827' },
+    textArea: { height: 100, textAlignVertical: 'top' },
+    picker: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, padding: 0, margin:0 },
+
+    participantRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
     participantName: { fontSize: 16, fontWeight: '600', color: '#111827' },
     participantMobile: { fontSize: 14, color: '#6B7280', marginTop: 4 },
     organizerBadge: { backgroundColor: '#FEF3C7', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 12, marginLeft: 10 },
     organizerBadgeText: { color: '#92400E', fontSize: 12, fontWeight: '500' },
     noParticipantsText: { fontSize: 15, color: '#6B7280', textAlign: 'center', paddingVertical: 20 },
     
-    cardActions: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20, borderTopWidth: 1, borderTopColor: '#E5E7EB', paddingTop: 16 },
+    cardActions: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#E5E7EB' },
-    button: { borderRadius: 10, paddingVertical: 10, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center' },
+    button: { borderRadius: 10, paddingVertical: 12, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center', justifyContent: 'center' },
     saveButton: { backgroundColor: '#4F46E5' },
     cancelButton: { backgroundColor: '#E5E7EB' },
+    startButton: { backgroundColor: '#22c55e', marginTop: 10 },
+    startGroupText: { fontSize: 15, color: '#6B7280', lineHeight: 22, marginBottom: 10},
     buttonText: { color: '#FFFFFF', fontSize: 15, fontWeight: '600' },
 });
 

src/screens/management/ManagementScreen.tsx

@@ -18,7 +18,7 @@ import { APPROVE_REQUEST_URL, BASE_URL, DECLINE_REQUEST_URL, GET_JOINED_GROUP_UR
 import colors from "../../components/colors";
 import AppView from "../../components/AppView";
 import { apiCall } from "../../utils/ApiHelper";
-
+import * as Keychain from "react-native-keychain";
 import { MyGroup, JoinedGroup, JoinRequest, ApiResponse } from '../../types';
 import { MyGroupCard } from "../../components/MyGroupCard";
 import { JoinedGroupCard } from "../../components/JoinedGroupCard";
@@ -38,14 +38,57 @@ const ManagementScreen: FC = () => {
   const [requests, setRequests] = useState<JoinRequest[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
-  const userRole = user.role;
+  const [userRole,setUserRole] = useState<string | null>(null)
+     const userStatus = async () => {
+         try {
+             const credentials = await Keychain.getGenericPassword();
+             if (!credentials) {
+                 Alert.alert("Error", "You are not logged in");
+                 return;
+             }
+             const token = credentials.password;
+ 
+             setLoading(true);
+             setError(null);
+             const response = await fetch(`${BASE_URL}user/profile/status`, {
+                 method: "GET",
+                 headers: {
+                     Accept: "*/*",
+                     Authorization: `Bearer ${token}`,
+                 },
+             });
+ 
+             const json  = await response.json();
+ 
+             console.log("👤 Profile Status Response:", json.data.role);
+             if (json.status === "success") {
+                setUserRole(json.data.role);
+ 
+                 if (json.data.profileStatus === false) {
+                 
+                 }
+             } else {
+                 setError(json.message || "Failed to fetch status");
+             }
+         } catch (err) {
+             setError("Something went wrong. Please try again.");
+         } finally {
+             setLoading(false);
+         }
+     };
+ 
+       useFocusEffect(
+           useCallback(() => {
+               userStatus();
+           }, [])
+       );
 
-  console.log(" abin user : ", user)
   const fetchData = useCallback(async () => {
     if (loading) return;
     setLoading(true);
     setError(null);
     try {
+        console.log(" abin user : ", userRole)
       if (userRole === "ORGANIZER") {
         // Fetch all data concurrently
         const [myGroupsRes, joinedGroupsRes, requestsRes] = await Promise.all([

src/screens/profile/BecomeOrg.tsx

@@ -100,14 +100,14 @@ const BecomeOrg = () => {
             keyboardType="numeric"
             value={bankAccountNumber}
             onChangeText={setBankAccountNumber}
-            icon="card-outline"
+            icon="card-outline" error={""}          />
-          />
 
           <CustomInput
             placeholder="Bank Name"
             value={bankName}
             onChangeText={setBankName}
             icon="business-outline"
+            error=""
           />
 
           <CustomInput
@@ -115,6 +115,7 @@ const BecomeOrg = () => {
             value={branchCode}
             onChangeText={setBranchCode}
             icon="key-outline"
+            error=""
           />
 
           <CustomButton

src/screens/profile/Profile.tsx

@@ -25,7 +25,7 @@ import { ApiResponse } from "../home/UserProfileStatus";
 import { BASE_URL, PUT_USER_PROFILE, PUT_USER_PROFILE_IMG, PUT_USER_STATUS } from "../../utils/ApiUrls";
 import AppView from "../../components/AppView";
 import { useDispatch } from "react-redux";
-import { setUserData } from "../../redux/userSlice";
+import { clearUser, setUserData } from "../../redux/userSlice";
 
 type UserProfile = {
   id: string;
@@ -49,7 +49,7 @@ type UserProfile = {
 const Profile = () => {
   const navigation = useNavigation<any>();
   const dispatch = useDispatch()
-  const [user, setUser] = useState<UserProfile | null>(null);
+  const [user, setUser] = useState<UserProfile | null | any>(null);
   const [fetching, setFetching] = useState(true);
   const [editing, setEditing] = useState(false);
   const [imageUpdating, setImageUpdating] = useState(false);
@@ -165,7 +165,7 @@ const Profile = () => {
         Alert.alert("Error", response.errorMessage || "Something went wrong");
       } else if (response.assets && response.assets.length > 0) {
         const selectedImage = response.assets[0];
-        setUser((prev) =>
+        setUser((prev:any) =>
           prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
         );
       }
@@ -190,7 +190,7 @@ const Profile = () => {
 
       const formData = new FormData();
       formData.append("file", {
-        uri: user.filePath,
+        uri: user?.filePath,
         type: "image/jpeg",
         name: "profile.jpg",
       } as any);
@@ -213,10 +213,10 @@ const Profile = () => {
 
         // If API returns updated image, set it
         if (result.data?.imageBlob) {
-          setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
+          setUser((prev:any) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
         } else {
           // Otherwise, keep the local filePath until next fetch
-          setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
+          setUser((prev:any) => prev ? { ...prev, filePath: user?.filePath } : prev);
         }
 
         // Refresh profile from API as well
@@ -279,6 +279,7 @@ const Profile = () => {
 
       // Clear stored credentials
       await Keychain.resetGenericPassword();
+      dispatch(clearUser())
       Alert.alert("Success", "You have been logged out");
       navigation.replace("Login");
     } catch (error) {
@@ -324,23 +325,16 @@ const Profile = () => {
   console.log("user image :", user?.filePath);
   const getProfileImage = () => {
     if (user?.imageBlob) {
-      return `data:image/jpeg;base64,${user.imageBlob}`;
+      return `data:image/jpeg;base64,${user?.imageBlob}`;
     }
     if (user?.filePath) {
-      return user.filePath;
+      return user?.filePath;
     }
-    return "https://randomuser.me/api/portraits/men/1.jpg";
+    return "https://randomuser?.me/api/portraits/men/1.jpg";
   };
 
 
-  if (fetching || !user) {
+
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={colors.pastelBlue} />
-        <Text style={styles.loadingText}>Loading profile...</Text>
-      </View>
-    );
-  }
 
   return (
     <AppView>
@@ -351,6 +345,15 @@ const Profile = () => {
           <Ionicons name="log-out-outline" size={24} color={colors.Profile} />
         </TouchableOpacity>
       </View>
+      {/* if (fetching || !user) {
+    return ( */}
+      {fetching || !user &&
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={colors.pastelBlue} />
+          <Text style={styles.loadingText}>Loading profile...</Text>
+        </View>
+
+      }
       <KeyboardAvoidingView
         // style={{ flex: 1 }}
         behavior={Platform.OS === "ios" ? "padding" : undefined}
@@ -424,7 +427,7 @@ const Profile = () => {
                       </View> */}
                     </View>
                     <View>
-                      <TouchableOpacity onPress={()=>navigation.navigate('Transaction')}>
+                      <TouchableOpacity onPress={() => navigation.navigate('Transaction')}>
                         <Text>View Transaction</Text>
                       </TouchableOpacity>
                       <CustomButton
@@ -440,7 +443,7 @@ const Profile = () => {
                     <Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Name</Text>
-                      <Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
+                      <Text style={styles.detailText}>{user?.firstName} {user?.lastName}</Text>
                     </View>
                   </View>
 
@@ -448,7 +451,7 @@ const Profile = () => {
                     <Ionicons name="mail" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Email</Text>
-                      <Text style={styles.detailText}>{user.email || "Not provided"}</Text>
+                      <Text style={styles.detailText}>{user?.email || "Not provided"}</Text>
                     </View>
                   </View>
 
@@ -456,7 +459,7 @@ const Profile = () => {
                     <Ionicons name="call" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Mobile</Text>
-                      <Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
+                      <Text style={styles.detailText}>{user?.mobile || "Not provided"}</Text>
                     </View>
                   </View>
 
@@ -464,7 +467,7 @@ const Profile = () => {
                     <Ionicons name="at-circle" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Username</Text>
-                      <Text style={styles.detailText}>{user.username}</Text>
+                      <Text style={styles.detailText}>{user?.username}</Text>
                     </View>
                   </View>
 
@@ -472,7 +475,7 @@ const Profile = () => {
                     <Ionicons name="location" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Address</Text>
-                      <Text style={styles.detailText}>{user.address || "Not provided"}</Text>
+                      <Text style={styles.detailText}>{user?.address || "Not provided"}</Text>
                     </View>
                   </View>
 
@@ -480,7 +483,7 @@ const Profile = () => {
                     <Ionicons name="male-female" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Gender</Text>
-                      <Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
+                      <Text style={styles.detailText}>{user?.gender || "Not specified"}</Text>
                     </View>
                   </View>
 
@@ -488,7 +491,7 @@ const Profile = () => {
                     <Ionicons name="key" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
                       <Text style={styles.detailLabel}>Role</Text>
-                      <Text style={styles.detailText}>{user.role || "User"}</Text>
+                      <Text style={styles.detailText}>{user?.role || "User"}</Text>
                     </View>
                   </View>
 
@@ -504,49 +507,55 @@ const Profile = () => {
                   <Text style={styles.sectionTitle}>Edit Profile</Text>
 
                   <CustomInput
+                  error=""
                     label="First Name"
                     placeholder="Enter first name"
-                    value={user.firstName ?? ""}
+                    value={user?.firstName ?? ""}
                     onChangeText={(text) => setUser({ ...user, firstName: text })}
                     icon="person"
                   />
 
                   <CustomInput
+                  error=""
                     label="Last Name"
                     placeholder="Enter last name"
-                    value={user.lastName ?? ""}
+                    value={user?.lastName ?? ""}
                     onChangeText={(text) => setUser({ ...user, lastName: text })}
                     icon="person"
                   />
 
                   <CustomInput
+                  error=""
                     label="Email"
                     placeholder="Enter email"
-                    value={user.email ?? ""}
+                    value={user?.email ?? ""}
                     onChangeText={(text) => setUser({ ...user, email: text })}
                     icon="mail"
                     keyboardType="email-address"
                   />
 
                   <CustomInput
+                  error=""
                     label="Username"
                     placeholder="Enter username"
-                    value={user.username ?? ""}
+                    value={user?.username ?? ""}
                     onChangeText={(text) => setUser({ ...user, username: text })}
                     icon="at"
                   />
                   <CustomInput
+                  error=""
                     label="Address"
                     placeholder="Enter address"
-                    value={user.address ?? ""}
+                    value={user?.address ?? ""}
                     onChangeText={(text) => setUser({ ...user, address: text })}
                     icon="location"
                     multiline
                   />
                   <CustomInput
+                  error=""
                     label="Gender"
                     placeholder="Enter gender"
-                    value={user.gender ?? ""}
+                    value={user?.gender ?? ""}
                     onChangeText={(text) => setUser({ ...user, gender: text })}
                     icon="male-female"
                   />

src/utils/ApiUrls.tsx

@@ -1,15 +1,16 @@
-export const BASE_URL = "https://api.godemo.in/FundCollect/api/"
+export const BASE_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/"
-export  const LOGIN_URL = `${BASE_URL}user/generate/otp?mobile=`
+// export const BASE_URL = "https://api.godemo.in/FundCollect/api/"
-export  const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
+export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=`
-export  const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
+export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
-export  const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
+export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
-export const  PROFILE_URL =`${BASE_URL}user/profile/view`
+export const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
-export const PUBLIC_GROUPS_URL =`${BASE_URL}fund/user/public`
+export const PROFILE_URL = `${BASE_URL}user/profile/view`
+export const PUBLIC_GROUPS_URL = `${BASE_URL}fund/user/public`
 export const JOIN_GROUP_URL = `${BASE_URL}fund/`;
-export const MY_GROUPS_URL =`${BASE_URL}fund/getAll/my/groups`
+export const MY_GROUPS_URL = `${BASE_URL}fund/getAll/my/groups`
-export const REQUESTS_URL =`${BASE_URL}fund/group/pending/request`
+export const REQUESTS_URL = `${BASE_URL}fund/group/pending/request`
-export const APPROVE_REQUEST_URL =`${BASE_URL}fund/requests/`
+export const APPROVE_REQUEST_URL = `${BASE_URL}fund/requests/`
-export const DECLINE_REQUEST_URL =`${BASE_URL}fund/user/my/groups`
+export const DECLINE_REQUEST_URL = `${BASE_URL}fund/user/my/groups`
 export const GET_JOINED_GROUP_URL = `${BASE_URL}fund/my/join/groups`
 export const PUT_USER_PROFILE_IMG = `${BASE_URL}user/update/userImg`
 export const PUT_USER_PROFILE = `${BASE_URL}user/profile/update`

src/utils/HelperFunction.tsx

@@ -4,59 +4,58 @@ import * as Keychain from "react-native-keychain";
 import { setUserData } from "../redux/userSlice";
 import { Alert } from "react-native";
 
-
-
 export const fetchUserProfile = async () => {
-      const dispatch = useDispatch();
+  const dispatch = useDispatch();
-      try {
+  try {
-        const credentials = await Keychain.getGenericPassword();
+    const credentials = await Keychain.getGenericPassword();
-        if (!credentials) {
+    if (!credentials) {
-          // Alert.alert("Error", "You are not logged in");
+      // Alert.alert("Error", "You are not logged in");
-          return;
+      return;
-        }
+    }
-        const token = credentials.password;
+    const token = credentials.password;
 
-        const response = await fetch(
+    const response = await fetch(
-          `${BASE_URL}user/profile/view`,
+      `${BASE_URL}user/profile/view`,
-          {
+      {
-            method: "GET",
+        method: "GET",
-            headers: {
+        headers: {
-              Accept: "*/*",
+          Accept: "*/*",
-              Authorization: `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
-            },
+        },
-          }
-        );
-  
-        const result = await response.json();
-        if (result.status === "success") {
-          dispatch(setUserData({
-            id: result?.data.id,
-            userId: result?.data.userId,
-            username: result?.data.username,
-            firstName: result?.data.firstName,
-            lastName: result?.data.lastName,
-            gender: result?.data.gender,
-            mobile: result?.data.mobile,
-            email: result?.data.email,
-            address: result?.data.address,
-            bankAccountNumber: result?.data.bankAccountNumber,
-            bankName: result?.data.bankName,
-            branchCode: result?.data.branchCode,
-            profilePicture: result?.data.filePath,   // or keep as `filePath`
-            filePath: result?.data.filePath,
-            imageBlob: result?.data.imageBlob,
-            role: result?.data.role,
-            organizerId: result?.data.organizerId,
-            organizerStatus: result?.data.organizerStatus,
-            profileStatus: true, // set true once profile is fetched
-          }));
-  
-          console.log("splash user data:", result.data);
-        } else {
-          Alert.alert("Error", "Failed to fetch user profile");
-        }
-      } catch (error) {
-        console.error("❌ Error fetching profile:", error);
-        Alert.alert("Error", "Could not connect to server");
       }
-    };
+    );
+
+    const result = await response.json();
+    console.log("user api data", result)
+    if (result.status === "success") {
+      dispatch(setUserData({
+        id: result?.data.id,
+        userId: result?.data.userId,
+        username: result?.data.username,
+        firstName: result?.data.firstName,
+        lastName: result?.data.lastName,
+        gender: result?.data.gender,
+        mobile: result?.data.mobile,
+        email: result?.data.email,
+        address: result?.data.address,
+        bankAccountNumber: result?.data.bankAccountNumber,
+        bankName: result?.data.bankName,
+        branchCode: result?.data.branchCode,
+        profilePicture: result?.data.filePath,   // or keep as `filePath`
+        filePath: result?.data.filePath,
+        imageBlob: result?.data.imageBlob,
+        role: result?.data.role,
+        organizerId: result?.data.organizerId,
+        organizerStatus: result?.data.organizerStatus,
+        profileStatus: true, // set true once profile is fetched
+      }));
+
+      console.log("splash user data:", result.data);
+    } else {
+      Alert.alert("Error", "Failed to fetch user profile");
+    }
+  } catch (error) {
+    console.error("❌ Error fetching profile:", error);
+    Alert.alert("Error", "Could not connect to server");
+  }
+};