handle user profile session
This commit is contained in:
Jaanu423
@@ -2,42 +2,207 @@
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
import { JoinedGroup } from '../types';
|
||||
|
||||
interface JoinedGroupCardProps {
|
||||
item: JoinedGroup;
|
||||
// Update the type to match the full data structure
|
||||
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 }) => (
|
||||
<View style={styles.card}>
|
||||
<View>
|
||||
<Text style={styles.cardTitle}>{item.groupName}</Text>
|
||||
<Text style={styles.cardSubtitle}>Created by {item.createdBy}</Text>
|
||||
interface JoinedGroupCardProps {
|
||||
item: JoinedGroup | any;
|
||||
}
|
||||
|
||||
// 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',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
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,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 4,
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: 17,
|
||||
groupName: {
|
||||
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',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
});
|
||||
@@ -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
|
||||
HomeTabs: undefined
|
||||
splash: undefined
|
||||
OrganizerRegister: undefined
|
||||
Home: undefined;
|
||||
HomeTabs: 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() {
|
||||
return (
|
||||
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
|
||||
<Text>Home Screen</Text>
|
||||
<Button
|
||||
title="Go to Profile"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>();
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
+150
-135
@@ -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 },
|
||||
});
|
||||
|
||||
+95
-75
@@ -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 },
|
||||
});
|
||||
|
||||
+94
-76
@@ -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)
|
||||
console.log("current user ----",user)
|
||||
const user = useSelector((state: any) => state.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 () => {
|
||||
if (mobile.length === 10) {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(LOGIN_URL + mobile);
|
||||
console.log("OTP sent response:", res)
|
||||
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate("OtpVarify", { mobile });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
Alert.alert("Error", "Failed to send OTP. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
const handleContinue = async () => {
|
||||
if (mobile.length === 10) {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log("LOGIN_URL console:", LOGIN_URL, "mobile:", mobile);
|
||||
|
||||
const res = await axios.get(LOGIN_URL, {
|
||||
params: { mobile },
|
||||
});
|
||||
|
||||
console.log("OTP sent response:", res.data);
|
||||
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate("OtpVarify", { mobile });
|
||||
} else {
|
||||
Alert.alert("Error", res.data.message || "Failed to send OTP");
|
||||
}
|
||||
} else {
|
||||
Alert.alert("Please enter a valid 10-digit mobile number");
|
||||
} catch (error: any) {
|
||||
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 = () =>
|
||||
Animated.spring(ctaScale, {
|
||||
toValue: 1,
|
||||
useNativeDriver: true,
|
||||
speed: 20,
|
||||
bounciness: 6,
|
||||
}).start();
|
||||
const onPressIn = () =>
|
||||
Animated.spring(ctaScale, {
|
||||
toValue: 0.97,
|
||||
useNativeDriver: true,
|
||||
speed: 20,
|
||||
bounciness: 0,
|
||||
}).start();
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<StatusBar barStyle="dark-content" backgroundColor={theme.background} />
|
||||
const onPressOut = () =>
|
||||
Animated.spring(ctaScale, {
|
||||
toValue: 1,
|
||||
useNativeDriver: true,
|
||||
speed: 20,
|
||||
bounciness: 6,
|
||||
}).start();
|
||||
|
||||
{/* Top content */}
|
||||
<View style={styles.topSection}>
|
||||
<Text style={styles.brand}>CircleCollect</Text>
|
||||
<Text style={styles.title}>Welcome Back 👋</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Enter your mobile number to sign in and continue.
|
||||
</Text>
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<StatusBar barStyle="dark-content" backgroundColor={theme.background} />
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.inputWrapper,
|
||||
{ opacity: fade, transform: [{ translateY: slide }] },
|
||||
]}
|
||||
>
|
||||
<CustomInput
|
||||
label="Mobile Number"
|
||||
placeholder="Enter Mobile Number"
|
||||
value={mobile}
|
||||
onChangeText={setMobile}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
icon="call-outline"
|
||||
/>
|
||||
</Animated.View>
|
||||
</View>
|
||||
{/* Top content */}
|
||||
<View style={styles.topSection}>
|
||||
<Text style={styles.brand}>CircleCollect</Text>
|
||||
<Text style={styles.title}>Welcome Back 👋</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Enter your mobile number to sign in and continue.
|
||||
</Text>
|
||||
|
||||
{/* 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" />
|
||||
|
||||
<Text style={styles.footerText}>
|
||||
By continuing, you agree to our{" "}
|
||||
<Text style={{ color: theme.accent, fontWeight: "600" }}>
|
||||
Terms & Privacy
|
||||
</Text>
|
||||
</Text>
|
||||
<CustomInput
|
||||
label="Mobile Number"
|
||||
placeholder="Enter Mobile Number"
|
||||
value={mobile}
|
||||
onChangeText={setMobile}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
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({
|
||||
|
||||
@@ -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 { BASE_URL, PUT_USER_STATUS } from "../utils/ApiUrls";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setUserData } from "../redux/userSlice";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import { PROFILE_URL } from "../utils/ApiUrls";
|
||||
import { useDispatch } from "react-redux";
|
||||
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) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const token = credentials.password;
|
||||
const response = await fetch(PROFILE_URL, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
|
||||
const userStatus = async () => {
|
||||
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.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
console.log("redux user", user);
|
||||
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 () => {
|
||||
try {
|
||||
const creds = await Keychain.getGenericPassword();
|
||||
if (creds) {
|
||||
console.log("🔑 Found token:", creds.password);
|
||||
navigation.replace("Home"); // go to bottom tabs if logged in
|
||||
const startSplash = async () => {
|
||||
const role = await fetchUserProfile(dispatch, navigation);
|
||||
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 0,
|
||||
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
|
||||
Animated.timing(fadeAnim, {
|
||||
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();
|
||||
}, [])
|
||||
startSplash();
|
||||
}, [navigation, fadeAnim, dispatch]);
|
||||
|
||||
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,
|
||||
|
||||
@@ -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 || []);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
});
|
||||
@@ -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;
|
||||
description?: string;
|
||||
maxParticipants?: number;
|
||||
groupName: string;
|
||||
description: string;
|
||||
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;
|
||||
|
||||
// --- 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>
|
||||
);
|
||||
type EditingField = keyof EditGroupPayload | null;
|
||||
|
||||
// --- Main Screen Component ---
|
||||
const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
const { groupId } = route.params;
|
||||
const { groupId } = route.params;
|
||||
|
||||
const [editingSection, setEditingSection] = useState<EditingSection>(null);
|
||||
const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [editingField, setEditingField] = useState<EditingField>(null);
|
||||
const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
|
||||
const [editableData, setEditableData] = useState<EditGroupPayload>({
|
||||
groupName: '',
|
||||
description: '',
|
||||
maxParticipants: 0,
|
||||
contributionAmount: 0,
|
||||
customCycleDays: null,
|
||||
cycleType: 'MONTHLY',
|
||||
latePaymentCharge: 0,
|
||||
visibility: 'PRIVATE',
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [starting, setStarting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [groupName, setGroupName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [maxParticipants, setMaxParticipants] = useState('');
|
||||
const fetchGroupDetails = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
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) {
|
||||
setGroupDetails(response.data);
|
||||
setEditableData({
|
||||
groupName: response.data.groupName,
|
||||
description: response.data.description,
|
||||
maxParticipants: response.data.maxParticipants,
|
||||
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]);
|
||||
|
||||
const fetchGroupDetails = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
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) {
|
||||
setGroupDetails(response.data);
|
||||
setGroupName(response.data.groupName);
|
||||
setDescription(response.data.description);
|
||||
setMaxParticipants(response.data.maxParticipants.toString());
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to fetch group data.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
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;
|
||||
}
|
||||
}, [groupId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroupDetails();
|
||||
}, [fetchGroupDetails]);
|
||||
|
||||
const handleCancel = () => {
|
||||
if (groupDetails) {
|
||||
setGroupName(groupDetails.groupName);
|
||||
setDescription(groupDetails.description);
|
||||
setMaxParticipants(groupDetails.maxParticipants.toString());
|
||||
}
|
||||
setEditingSection(null);
|
||||
};
|
||||
|
||||
const handleSave = async (section: EditingSection) => {
|
||||
if (!groupDetails || !section) return;
|
||||
|
||||
let payload: EditGroupPayload = {};
|
||||
if (section === 'details') {
|
||||
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);
|
||||
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 }) => (
|
||||
<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(section)} disabled={saving}>
|
||||
{saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
|
||||
</TouchableOpacity>
|
||||
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);
|
||||
}
|
||||
},
|
||||
style: 'destructive'
|
||||
}
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleUpdateField = (field: keyof EditGroupPayload, value: any) => {
|
||||
setEditableData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
if (loading) return <View style={styles.centered}><ActivityIndicator size="large" color="#4F46E5" /></View>;
|
||||
if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
|
||||
if (!groupDetails) return null;
|
||||
|
||||
const isEditable = groupDetails.status === 'PENDING' || groupDetails.status === 'APPROVED';
|
||||
const canStartGroup = groupDetails.status === 'APPROVED' && groupDetails.totalParticipants >= groupDetails.minParticipants;
|
||||
|
||||
const renderInputField = (field: EditingField) => {
|
||||
if (!field || !editableData) return null;
|
||||
|
||||
const commonProps = { style: styles.input, placeholderTextColor: "#9CA3AF" };
|
||||
|
||||
switch(field) {
|
||||
case 'groupName':
|
||||
return <TextInput {...commonProps} value={editableData.groupName} onChangeText={(text) => handleUpdateField('groupName', text)} />;
|
||||
case 'description':
|
||||
return <TextInput {...commonProps} style={[styles.input, styles.textArea]} value={editableData.description} onChangeText={(text) => handleUpdateField('description', text)} multiline />;
|
||||
case 'contributionAmount':
|
||||
case 'maxParticipants':
|
||||
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>;
|
||||
if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
|
||||
if (!groupDetails) return null;
|
||||
return (
|
||||
<AppView paddingHorizontal={0}>
|
||||
<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 (
|
||||
<AppView paddingHorizontal={0}>
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
|
||||
<Text style={styles.headerTitle}>Group Overview</Text>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Group Info</Text>
|
||||
{renderRow('groupName', 'Group Name', groupDetails.groupName)}
|
||||
{renderRow('description', 'Description', groupDetails.description)}
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>Group Details</Text>
|
||||
{isEditable && editingSection !== 'details' && (
|
||||
<TouchableOpacity onPress={() => setEditingSection('details')}><Text style={styles.editButtonText}>Edit</Text></TouchableOpacity>
|
||||
)}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Financial Rules</Text>
|
||||
{renderRow('contributionAmount', 'Contribution', `₹${groupDetails.contributionAmount.toLocaleString('en-IN')}`)}
|
||||
{renderRow('maxParticipants', 'Max Participants', `${groupDetails.totalParticipants} / ${groupDetails.maxParticipants}`)}
|
||||
{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} />
|
||||
<FormInput label="Description" value={description} onChangeText={setDescription} multiline />
|
||||
<CardActionButtons section="details" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
);
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noParticipantsText}>No participants 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' },
|
||||
editButtonText: { color: '#4F46E5', fontSize: 15, fontWeight: '600' },
|
||||
cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937', marginBottom: 12, borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10 },
|
||||
|
||||
groupNameView: { fontSize: 22, fontWeight: '700', color: '#1F2937', marginBottom: 8 },
|
||||
descriptionView: { fontSize: 16, color: '#6B7280', lineHeight: 24 },
|
||||
editButton: { padding: 8, marginLeft: 8 },
|
||||
editButtonText: { color: '#4F46E5', fontSize: 20, fontWeight: 'bold' },
|
||||
|
||||
inputContainer: { marginBottom: 16 },
|
||||
inputLabel: { fontSize: 14, color: '#6B7280', marginBottom: 8, fontWeight: '500' },
|
||||
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' },
|
||||
fieldContainer: { borderBottomWidth: 1, borderBottomColor: '#F3F4F6', paddingVertical: 12 },
|
||||
infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||
infoLabel: { fontSize: 16, color: '#6B7280' },
|
||||
infoValue: { fontSize: 16, fontWeight: '600', textTransform: 'capitalize' },
|
||||
|
||||
participantRow: { paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
|
||||
infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
|
||||
valueContainer: { flexDirection: 'row', alignItems: 'center' },
|
||||
|
||||
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 },
|
||||
button: { borderRadius: 10, paddingVertical: 10, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center' },
|
||||
cardActions: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#E5E7EB' },
|
||||
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' },
|
||||
});
|
||||
|
||||
|
||||
@@ -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([
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
+12
-11
@@ -1,15 +1,16 @@
|
||||
export const BASE_URL = "https://api.godemo.in/FundCollect/api/"
|
||||
export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobile=`
|
||||
export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
|
||||
export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
|
||||
export const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
|
||||
export const PROFILE_URL =`${BASE_URL}user/profile/view`
|
||||
export const PUBLIC_GROUPS_URL =`${BASE_URL}fund/user/public`
|
||||
export const BASE_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/"
|
||||
// export const BASE_URL = "https://api.godemo.in/FundCollect/api/"
|
||||
export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=`
|
||||
export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
|
||||
export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`
|
||||
export const GROUP_CREATION_URL = `${BASE_URL}fund/groups/{organizerId}`
|
||||
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 REQUESTS_URL =`${BASE_URL}fund/group/pending/request`
|
||||
export const APPROVE_REQUEST_URL =`${BASE_URL}fund/requests/`
|
||||
export const DECLINE_REQUEST_URL =`${BASE_URL}fund/user/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 APPROVE_REQUEST_URL = `${BASE_URL}fund/requests/`
|
||||
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`
|
||||
|
||||
@@ -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();
|
||||
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(
|
||||
`${BASE_URL}user/profile/view`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
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 dispatch = useDispatch();
|
||||
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(
|
||||
`${BASE_URL}user/profile/view`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
};
|
||||
);
|
||||
|
||||
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");
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user