errors are there

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/screens/GroupCreation.tsx

@@ -7,97 +7,68 @@ 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: "",
-    minParticipants: "",
-    startDate: "",
+    description: "",
     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 [isCalendarVisible, setCalendarVisible] = useState(false);
+  const [errors, setErrors] = useState<any>({});
 
   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 handlePresetAmount = (amount: number) => {
-    setForm({ ...form, contributionAmount: amount.toString() });
-  };
+  const lateFeeModes = ["DAILY", "FIXED"];
 
   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;
   };
 
   const handleReview = () => {
     if (validateForm()) {
-      console.log("------",form)
-      navigation.navigate("GroupReview", { form });
+      const payload = {
+          ...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="Description" placeholder="Enter a short description" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
+        <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="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>
-        <View style={styles.toggleContainer}>
-            <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>
-            <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>
-        </View>
+        <Section title="Group Settings">
+            <SettingRow label="Visibility">
+                <ToggleButtons
+                    options={["PRIVATE", "PUBLIC"]}
+                    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>
-        <View style={styles.toggleContainer}>
-            {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>
-
-        <View style={styles.participantsRow}>
-            <View style={styles.participantInput}><CustomInput label="Min" placeholder="Min" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" /></View>
-            <View style={styles.participantInput}><CustomInput label="Max" placeholder="Max" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" /></View>
-        </View>
+        <Section title="Participant Rules">
+          <View style={styles.participantsRow}>
+              <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 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>
         
-        <Text style={styles.label}>Contribution Amount (INR)</Text>
-        <View style={styles.presetContainer}>
-            {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>))}
-        </View>
-        <View style={styles.amountContainer}>
-            <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" />
-            <View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" /></View>
-        </View>
-        
-        <Text style={styles.label}>Cycle Type</Text>
-        <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" />)}
+        <Section title="Financial Details">
+            <CustomInput label="Contribution Amount (INR)" placeholder="e.g., 5000" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} />
+            <SettingRow label="Payment Cycle">
+              <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}>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>}
+        <Section title="Late Fee Policy">
+            <SettingRow label="Fee Mode">
+              <ToggleButtons
+                  options={lateFeeModes}
+                  selectedValue={form.lateFeeMode}
+                  onSelect={(val) => handleChange("lateFeeMode", val)}
+              />
+            </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>
 
-        <CustomButton title="Review" onPress={handleReview} />
+        <CustomButton title="Review Group" onPress={handleReview} style={{marginTop: 20}} />
       </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" },
-  titleContainer: {  paddingVertical: 2, borderRadius: 15, alignSelf: "flex-start", marginBottom: 30 },
-  title: { fontSize: 22, fontWeight: "bold", color: "#333" },
-  label: { fontSize: 14, fontWeight: "600", marginBottom: 10, color: "#444" },
-  toggleContainer: { flexDirection: "row", gap: 10, marginBottom: 15 },
-  toggleButton: { flex: 1, paddingVertical: 12, borderWidth: 1, borderColor: "#ddd", borderRadius: 12, alignItems: "center", backgroundColor: "#fff" },
+  container: { flexGrow: 1, padding: 16, backgroundColor: "#f5f6fa" },
+  titleContainer: { marginBottom: 20, paddingHorizontal: 4 },
+  title: { fontSize: 28, fontWeight: "bold", color: "#1F2937" },
+  
+  section: {
+    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" },
-  selectedButtonText: { color: "#333" },
-  participantsRow: { flexDirection: "row", justifyContent: "space-between", alignItems: 'flex-start', marginBottom: 10 },
-  participantInput: { flex: 0.48 },
-  presetContainer: { flexDirection: 'row', justifyContent: 'flex-start', gap: 10, marginBottom: 10 },
-  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,
-  },
+  toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: 'capitalize' },
+  selectedButtonText: { color: "#1F2937" },
+  
+  participantsRow: { flexDirection: "row", gap: 15 },
+  participantInput: { flex: 1 },
 });

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 ---
-const ThemedDialog = ({ visible, isSuccess, onClose }: { visible: boolean; isSuccess: boolean; onClose: () => void; }) => {
+// --- Themed Dialog Component ---
+const ThemedDialog = ({ visible, isSuccess, message, onClose, onNavigate }: { visible: boolean; isSuccess: boolean; message: string; onClose: () => void; onNavigate: () => void; }) => {
   if (!visible) return null;
 
-  const dialogConfig = {
-    success: {
-      icon: "checkmark-circle" as const,
-      color: "#2ecc71",
-      title: "Success!",
-      message: "Your group has been created.",
-      buttonText: "Awesome!",
-    },
-    failure: {
-      icon: "close-circle" as const,
-      color: "#e74c3c",
-      title: "Oops!",
-      message: "Something went wrong. Please try again.",
-      buttonText: "Try Again",
-    },
+  const config = isSuccess ? {
+    icon: "checkmark-circle" as const,
+    color: "#2ecc71",
+    title: "Success!",
+    buttonText: "Go Home",
+    action: onNavigate,
+  } : {
+    icon: "close-circle" as const,
+    color: "#e74c3c",
+    title: "Oops!",
+    buttonText: "Try Again",
+    action: onClose,
   };
 
-  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>
-          {/* Only show button for failure case */}
-          {!isSuccess && (
-            <TouchableOpacity style={styles.dialogButton} onPress={onClose}>
-              <Text style={styles.dialogButtonText}>{config.buttonText}</Text>
-            </TouchableOpacity>
-          )}
+          <Text style={styles.dialogMessage}>{message}</Text>
+          <TouchableOpacity style={styles.dialogButton} onPress={config.action}>
+            <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 ---
-  useEffect(() => {
-    // If the modal is visible and the operation was a success...
-    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 handleNavigateHome = () => {
+    setModalVisible(false);
+    navigation.reset({ index: 0, routes: [{ name: 'Home' }] });
+  };
 
   const handleSubmit = async () => {
     setIsLoading(true);
     try {
-            const payload = {
-        ...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 };
-      
+      const res = await apiCall(GROUP_CREATION_URL, "POST", form) as { statusCode?: number, message?: string };
       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 = ({ 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> );
-  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> ); };
+  const TimelineSection: React.FC<{ icon: any; title: string; children: React.ReactNode }> = ({ icon, title, children }) => (
+    <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>
+  );
+
+  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">{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>
-        <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} INR`)}{renderRow("Cycle", form.cycleType)}{form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)}{renderRow("Start Date", form.startDate)}</TimelineSection>
+        <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>
+
+        <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/utils/HelperFunction.tsx

@@ -28,6 +28,7 @@ export const fetchUserProfile = async () => {
         );
   
         const result = await response.json();
+        console.log("user api data",result)
         if (result.status === "success") {
           dispatch(setUserData({
             id: result?.data.id,