profile not done

2025-09-15 10:50:58 +05:30
parent 0ff184c400
commit 29ac0307db
14 changed files with 1462 additions and 40 deletions
@@ -0,0 +1,204 @@
+import { Picker } from "@react-native-picker/picker";
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import CustomButton from "../components/CustomButton";
+
+export default function GroupCreationForm() {
+  const navigation = useNavigation<any>();
+
+  const [form, setForm] = useState({
+    contributionAmount: "",
+    customCycleDays: "",
+    cycleType: "CUSTOM",
+    description: "",
+    endDate: "",
+    groupName: "",
+    maxParticipants: "",
+    minParticipants: "",
+    startDate: "",
+    visibility: "PRIVATE",
+  });
+
+  const handleChange = (key: string, value: string) => {
+    setForm({ ...form, [key]: value });
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
+        <Text style={styles.title}>Group Creation</Text>
+
+        {/* Group Info */}
+        <Text style={styles.label}>Group Name</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter your group name"
+          value={form.groupName}
+          onChangeText={(val) => handleChange("groupName", val)}
+        />
+
+        <Text style={styles.label}>Description</Text>
+        <TextInput
+          style={[styles.input, { height: 80 }]}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter a short description for the group"
+          value={form.description}
+          multiline
+          onChangeText={(val) => handleChange("description", val)}
+        />
+
+        <Text style={styles.label}>Visibility</Text>
+        <View style={styles.pickerWrapper}>
+          <Picker
+            selectedValue={form.visibility}
+            onValueChange={(val) => handleChange("visibility", val)}
+            style={styles.picker}
+          >
+            <Picker.Item label="Private (Only invited can join)" value="PRIVATE" />
+            <Picker.Item label="Public (Anyone can find)" value="PUBLIC" />
+          </Picker>
+        </View>
+
+        {/* Participants */}
+        <Text style={styles.label}>Minimum Participants</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter minimum number of participants"
+          keyboardType="numeric"
+          value={form.minParticipants}
+          onChangeText={(val) => handleChange("minParticipants", val)}
+        />
+
+        <Text style={styles.label}>Maximum Participants</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter maximum number of participants"
+          keyboardType="numeric"
+          value={form.maxParticipants}
+          onChangeText={(val) => handleChange("maxParticipants", val)}
+        />
+
+        {/* Contribution */}
+        <Text style={styles.label}>Contribution Amount (₹)</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="Enter contribution amount (₹)"
+          keyboardType="numeric"
+          value={form.contributionAmount}
+          onChangeText={(val) => handleChange("contributionAmount", val)}
+        />
+
+        <Text style={styles.label}>Cycle Type</Text>
+        <View style={styles.pickerWrapper}>
+          <Picker
+            selectedValue={form.cycleType}
+            onValueChange={(val) => handleChange("cycleType", val)}
+            style={styles.picker}
+          >
+            <Picker.Item label="Custom (Set custom cycle days)" value="CUSTOM" />
+                  <Picker.Item label="Monthly" value="MONTHLY" />
+        <Picker.Item label="Quarterly" value="QUARTERLY" />
+        <Picker.Item label="Half Yearly" value="HALF_YEARLY" />
+        <Picker.Item label="Yearly" value="YEARLY" />
+        
+          </Picker>
+        </View>
+
+        {form.cycleType === "CUSTOM" && (
+          <>
+            <Text style={styles.label}>Custom Cycle Days</Text>
+            <TextInput
+              style={styles.input}
+              placeholderTextColor={"#a3a3a3ff"}
+              placeholder="Enter number of days for custom cycle"
+              keyboardType="numeric"
+              value={form.customCycleDays}
+              onChangeText={(val) => handleChange("customCycleDays", val)}
+            />
+          </>
+        )}
+
+        {/* Timeline */}
+        <Text style={styles.label}>Start Date</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="YYYY-MM-DD (e.g. 2025-09-12)"
+          placeholderTextColor={"#a3a3a3ff"}
+          value={form.startDate}
+          onChangeText={(val) => handleChange("startDate", val)}
+        />
+
+        <Text style={styles.label}>End Date</Text>
+        <TextInput
+          style={styles.input}
+          placeholderTextColor={"#a3a3a3ff"}
+          placeholder="YYYY-MM-DD (e.g. 2025-12-31)"
+          value={form.endDate}
+          onChangeText={(val) => handleChange("endDate", val)}
+        />
+
+        {/* Next Button
+        <TouchableOpacity
+          onPress={() => navigation.navigate("GroupReview", { form })}
+          style={styles.nextBtn}
+        >
+          <Text style={styles.btnText}>➡ Review</Text>
+        </TouchableOpacity> */}
+        <CustomButton
+          title="➡ Review"
+          onPress={() => navigation.navigate("GroupReview", { form })}
+        />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flexGrow: 1, padding: 20 },
+  title: { fontSize: 22, fontWeight: "bold", marginBottom: 15, color: "#333" },
+  label: { fontSize: 14, fontWeight: "600", marginBottom: 5, color: "#444" },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 15,
+    fontSize: 16,
+    backgroundColor: "#fff",
+    elevation: 1,
+  },
+  pickerWrapper: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 12,
+    marginBottom: 15,
+    backgroundColor: "#fff",
+    elevation: 1,
+  },
+  picker: { height: 60, width: "100%" },
+  nextBtn: {
+    backgroundColor: "#eb87a3ff",
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: "center",
+    marginTop: 10,
+  },
+  btnText: { color: "#fff", fontWeight: "bold", fontSize: 16 },
+});