image handle in whole project

2025-09-26 15:30:27 +05:30
parent 8dbacb4ba5
commit 87872f1df1
5 changed files with 367 additions and 195 deletions
@@ -8,11 +8,15 @@ import {
  Platform,
  TouchableOpacity,
  Alert,
+  Image,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { CustomInput } from "../components/common/Custom";
 import CustomButton from "../components/CustomButton";
 import colors from "../components/colors";
+import { launchImageLibrary } from "react-native-image-picker";
+import Ionicons from "@react-native-vector-icons/ionicons";
+import { UPLOAD_GROUP_IMAGE } from "../utils/ApiUrls";

 export default function GroupCreationForm() {
  const navigation = useNavigation<any>();
@@ -31,6 +35,7 @@ export default function GroupCreationForm() {
  });

  const [errors, setErrors] = useState<any>({});
+  const [selectedImage, setSelectedImage] = useState()

  const handleChange = (key: string, value: string) => {
    setForm({ ...form, [key]: value });
@@ -60,12 +65,12 @@ export default function GroupCreationForm() {
  const handleReview = () => {
    if (validateForm()) {
      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),
+        ...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 });
@@ -74,66 +79,68 @@ export default function GroupCreationForm() {
    }
  };

+
  return (
+
    <KeyboardAvoidingView
      style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
        <View style={styles.titleContainer}><Text style={styles.title}>Create New Group</Text></View>
-        
+       
        <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} />
-        
+
        <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>
+          <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>

        <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 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>
-        
+
        <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} />)}
+          <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>

        <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} />
+          <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 Group" onPress={handleReview} style={{marginTop: 20}} />
+        <CustomButton title="Review Group" onPress={handleReview} style={{ marginTop: 20 }} />
      </ScrollView>
    </KeyboardAvoidingView>
  );
@@ -142,40 +149,40 @@ export default function GroupCreationForm() {
 // --- 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>
+  <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>
+  <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>
+  <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: 16, backgroundColor: "#f5f6fa" },
  titleContainer: { marginBottom: 20, paddingHorizontal: 4 },
  title: { fontSize: 28, fontWeight: "bold", color: "#1F2937" },
-  
+
  section: {
    backgroundColor: '#fff',
    borderRadius: 12,
@@ -196,26 +203,51 @@ const styles = StyleSheet.create({
    paddingBottom: 10,
  },

+  avatarContainer: {
+    position: "relative",
+    marginBottom: 16,
+  },
+  avatar: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    borderWidth: 4,
+    borderColor: "#e2e8f0",
+  },
+  cameraIcon: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
+    backgroundColor: colors.pastelBlue,
+    borderRadius: 20,
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 3,
+    borderColor: "#fff",
+    elevation: 2,
+  },
  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" 
+  toggleButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderRadius: 8,
+    alignItems: "center",
+    backgroundColor: "#F9FAFB"
  },
  selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" },
  toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: 'capitalize' },
  selectedButtonText: { color: "#1F2937" },
-  
+
  participantsRow: { flexDirection: "row", gap: 15 },
  participantInput: { flex: 1 },
 });