group creation themed
This commit is contained in:
Abin Toppo
@@ -1,6 +1,6 @@
|
||||
// colors.js
|
||||
export default {
|
||||
ligtblue:'#98e2f4',
|
||||
const colours = {
|
||||
lightblue: '#98e2f4',
|
||||
colorOne: '#83f5cc',
|
||||
primary: '#F4721E',
|
||||
secondary: '#FF9A62',
|
||||
textPrimary: '#333333',
|
||||
@@ -11,3 +11,5 @@ export default {
|
||||
warning: '#FF9500',
|
||||
info: '#007AFF',
|
||||
};
|
||||
|
||||
export default colours;
|
||||
|
||||
@@ -13,7 +13,7 @@ type CustomButtonProps = {
|
||||
export default function CustomButton({
|
||||
title,
|
||||
onPress,
|
||||
backgroundColor = "#6C63FF",
|
||||
backgroundColor = "#000000ff",
|
||||
textColor = "#fff",
|
||||
loading = false,
|
||||
style,
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import { TextInputProps } from "react-native";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
|
||||
type CustomInputProps = TextInputProps & {
|
||||
label: string;
|
||||
value: string;
|
||||
placeholder: string;
|
||||
onChangeText: (text: string) => void;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
const CustomInput: React.FC<CustomInputProps> = ({
|
||||
label,
|
||||
value,
|
||||
placeholder,
|
||||
onChangeText,
|
||||
icon,
|
||||
...rest
|
||||
}) => (
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={styles.inputLabel}>{label}</Text>
|
||||
<View style={styles.inputWrapper}>
|
||||
{icon && <Ionicons name={icon} size={20} color="#555" style={styles.inputIcon} />}
|
||||
<TextInput
|
||||
style={[styles.input, icon && { paddingLeft: 36 }]}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
placeholderTextColor="#999"
|
||||
onChangeText={onChangeText}
|
||||
{...rest}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
type CustomButtonProps = {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
type?: "primary" | "secondary" | "danger" | "outline";
|
||||
icon?: string | null;
|
||||
style?: object;
|
||||
};
|
||||
|
||||
const CustomButton: React.FC<CustomButtonProps> = ({
|
||||
title,
|
||||
onPress,
|
||||
type = "primary",
|
||||
icon,
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.button,
|
||||
type === "secondary" && styles.buttonSecondary,
|
||||
type === "danger" && styles.buttonDanger,
|
||||
]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<View style={styles.buttonContent}>
|
||||
{icon && <Ionicons name={icon || 'user'} size={20} color={type === "secondary" ? "#333" : "#fff"} style={{ marginRight: 8 }} />}
|
||||
<Text
|
||||
style={[
|
||||
styles.buttonText,
|
||||
type === "secondary" && styles.buttonTextSecondary,
|
||||
type === "danger" && styles.buttonTextDanger,
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: "#f5f7fb" },
|
||||
loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#eee",
|
||||
},
|
||||
headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
|
||||
profileCard: {
|
||||
borderRadius: 16,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
profileHeader: { alignItems: "center", marginBottom: 16 },
|
||||
avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 110,
|
||||
bottom: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 15,
|
||||
width: 32,
|
||||
height: 32,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
color: "#444",
|
||||
paddingLeft: 4,
|
||||
},
|
||||
inputContainer: { marginBottom: 12 ,browRadius: 12},
|
||||
inputLabel: { fontSize: 14, fontWeight: "500", color: "#555"},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
},
|
||||
inputIcon: {
|
||||
position: "absolute",
|
||||
left: 10,
|
||||
zIndex: 1,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 20,
|
||||
padding: 12,
|
||||
paddingLeft: 12,
|
||||
backgroundColor: "#fdfdfd",
|
||||
color: "#000",
|
||||
fontSize: 15,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#007AFF",
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginVertical: 6,
|
||||
shadowColor: "#007AFF",
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#e5e5ea",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ff3b30",
|
||||
},
|
||||
buttonContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
|
||||
buttonTextSecondary: { color: "#333" },
|
||||
buttonTextDanger: { color: "#fff" },
|
||||
});
|
||||
|
||||
export { CustomInput, styles, CustomButton };
|
||||
@@ -4,18 +4,19 @@ 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 BottomTabs from "./BottomTabs";
|
||||
import SplashScreen from "../screens/SplashScreen";
|
||||
import Profile from "../screens/profile/Profile";
|
||||
import OrganizerRegisterScreen from "../screens/OrgnizerRagister";
|
||||
import GroupCreation from "../screens/GroupCreation";
|
||||
import GroupReview from "../screens/GroupReview";
|
||||
import BottomTabs from "./BottomTabs";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
export type RootStackParamList = {
|
||||
export type RootStackParamList = {
|
||||
Login: undefined;
|
||||
OtpVarify:{ mobile: string };
|
||||
Home:undefined
|
||||
HomeTabs:undefined
|
||||
OtpVarify: { mobile: string };
|
||||
Home: undefined
|
||||
HomeTabs: undefined
|
||||
splash: undefined
|
||||
OrganizerRegister:undefined
|
||||
Profile: undefined;
|
||||
@@ -35,13 +36,7 @@ function HomeScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
|
||||
<Text>Profile Screen</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default function AppNavigator() {
|
||||
const linking = {
|
||||
@@ -55,12 +50,12 @@ export default function AppNavigator() {
|
||||
return (
|
||||
<NavigationContainer linking={linking} >
|
||||
<Stack.Navigator initialRouteName="Splash">
|
||||
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="HomeTabs" component={BottomTabs} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="OrganizerRegister" component={OrganizerRegisterScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }}/>
|
||||
<Stack.Screen name="Profile" component={Profile} options={{ headerShown: false }}/>
|
||||
<Stack.Screen name="GroupCreation" component={GroupCreation}options={{ headerShown: false }} />
|
||||
<Stack.Screen name="GroupReview" component={GroupReview}options={{ headerShown: false }} />
|
||||
</Stack.Navigator>
|
||||
|
||||
@@ -1,33 +1,46 @@
|
||||
import React from "react";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { View, Text, StyleSheet, Platform } from "react-native";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons"; // ✅ corrected import
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import GroupScreen from "../screens/GroupScreen";
|
||||
import ProfileScreen from "../screens/ProfileScreen";
|
||||
import Profile from "../screens/profile/Profile";
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
const TAB_CONFIG = {
|
||||
activeColor: "#000",
|
||||
inactiveColor: "#8e8e93",
|
||||
activeColor: "#000",
|
||||
inactiveColor: "#8e8e93",
|
||||
backgroundColor: "#fff",
|
||||
height: 70,
|
||||
iconSize: 26,
|
||||
};
|
||||
|
||||
// 1. Define a color map for active tabs
|
||||
const activeTabColors: { [key: string]: string } = {
|
||||
Home: "#ff7675", // A soft red
|
||||
Profile: "#74b9ff", // A nice blue
|
||||
Group: "#55efc4", // Your theme's green
|
||||
Settings: "#ffeaa7", // A gentle yellow
|
||||
};
|
||||
|
||||
// 2. Define a text color map for contrasting icon colors
|
||||
const activeIconColors: { [key: string]: string } = {
|
||||
Home: "#333",
|
||||
Profile: "#333",
|
||||
Group: "#333",
|
||||
Settings: "#e17055",
|
||||
}
|
||||
|
||||
|
||||
function HomeScreen() {
|
||||
return (
|
||||
<View style={styles.screen}>
|
||||
<Text style={styles.text}>🏠 Home</Text>
|
||||
</View>
|
||||
<View style={styles.screen}><Text style={styles.text}>🏠 Home</Text></View>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsScreen() {
|
||||
return (
|
||||
<View style={styles.screen}>
|
||||
<Text style={styles.text}>⚙️ Settings</Text>
|
||||
</View>
|
||||
<View style={styles.screen}><Text style={styles.text}>⚙️ Settings</Text></View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -36,32 +49,41 @@ export default function BottomTabs() {
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
headerShown: false,
|
||||
tabBarShowLabel: true, // ✅ no labels, only icons
|
||||
tabBarStyle: styles.tabBar,
|
||||
|
||||
tabBarIcon: ({ color, focused }) => {
|
||||
let iconName: string = "home-outline";
|
||||
|
||||
if (route.name === "Home")
|
||||
iconName = focused ? "home" : "home-outline";
|
||||
else if (route.name === "Profile")
|
||||
iconName = focused ? "person" : "person-outline";
|
||||
else if (route.name === "Settings")
|
||||
iconName = focused ? "settings" : "settings-outline";
|
||||
else if (route.name === "Group")
|
||||
iconName = focused ? "people" : "people-outline";
|
||||
tabBarLabel: ({ focused, color }) =>
|
||||
!focused ? (
|
||||
<Text style={[styles.label, { color }]}>{route.name}</Text>
|
||||
) : null,
|
||||
|
||||
tabBarIcon: ({ focused }) => {
|
||||
let iconName: string = "home-outline";
|
||||
|
||||
// Determine icon based on route
|
||||
if (route.name === "Home") iconName = focused ? "home" : "home-outline";
|
||||
else if (route.name === "Profile") iconName = focused ? "person" : "person-outline";
|
||||
else if (route.name === "Settings") iconName = focused ? "settings" : "settings-outline";
|
||||
else if (route.name === "Group") iconName = focused ? "people" : "people-outline";
|
||||
|
||||
// 3. Get the active background color and icon color from the maps
|
||||
const activeBackgroundColor = activeTabColors[route.name];
|
||||
const activeIconColor = activeIconColors[route.name];
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.iconContainer,
|
||||
focused && styles.activeIconContainer,
|
||||
// 4. Apply the dynamic background color when focused
|
||||
focused && [
|
||||
styles.activeIconContainer,
|
||||
{ backgroundColor: activeBackgroundColor },
|
||||
],
|
||||
]}
|
||||
>
|
||||
<Ionicons
|
||||
name={iconName}
|
||||
size={TAB_CONFIG.iconSize}
|
||||
color={focused ? "#fff" : TAB_CONFIG.inactiveColor}
|
||||
color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -69,7 +91,7 @@ export default function BottomTabs() {
|
||||
})}
|
||||
>
|
||||
<Tab.Screen name="Home" component={HomeScreen} />
|
||||
<Tab.Screen name="Profile" component={ProfileScreen} />
|
||||
<Tab.Screen name="Profile" component={Profile} />
|
||||
<Tab.Screen name="Group" component={GroupScreen} />
|
||||
<Tab.Screen name="Settings" component={SettingsScreen} />
|
||||
</Tab.Navigator>
|
||||
@@ -95,7 +117,7 @@ const styles = StyleSheet.create({
|
||||
right: 20,
|
||||
height: TAB_CONFIG.height,
|
||||
backgroundColor: TAB_CONFIG.backgroundColor,
|
||||
borderRadius: 20 ,
|
||||
borderRadius: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowOffset: { width: 0, height: 5 },
|
||||
@@ -103,17 +125,25 @@ const styles = StyleSheet.create({
|
||||
elevation: 10,
|
||||
paddingBottom: Platform.OS === "ios" ? 25 : 10,
|
||||
paddingTop: 10,
|
||||
marginHorizontal:10
|
||||
marginHorizontal: 10,
|
||||
},
|
||||
label: {
|
||||
fontSize: 12,
|
||||
marginBottom: 5,
|
||||
},
|
||||
iconContainer: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 60,
|
||||
height: 60,
|
||||
marginTop:10,
|
||||
width: 50, // Reduced size for a sleeker look
|
||||
height: 50, // Reduced size
|
||||
marginTop: 10,
|
||||
borderRadius: 15,
|
||||
},
|
||||
activeIconContainer: {
|
||||
backgroundColor: "#000", // active circle background
|
||||
// The default active style, background color is now applied dynamically
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
},
|
||||
});
|
||||
|
||||
+155
-155
@@ -1,36 +1,104 @@
|
||||
import { Picker } from "@react-native-picker/picker";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
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";
|
||||
|
||||
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: "",
|
||||
contributionAmount: "4000",
|
||||
customCycleDays: "",
|
||||
cycleType: "CUSTOM",
|
||||
cycleType: "MONTHLY",
|
||||
description: "",
|
||||
endDate: "",
|
||||
groupName: "",
|
||||
maxParticipants: "",
|
||||
minParticipants: "",
|
||||
startDate: "",
|
||||
visibility: "PRIVATE",
|
||||
fundDistribution: "SEQUENTIAL",
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<any>({}); // State for validation errors
|
||||
const [isCalendarVisible, setCalendarVisible] = useState(false);
|
||||
|
||||
const handleChange = (key: string, value: string) => {
|
||||
setForm({ ...form, [key]: value });
|
||||
// Clear error for the field when user starts typing
|
||||
if (errors[key]) {
|
||||
setErrors({ ...errors, [key]: null });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAmountChange = (value: number) => {
|
||||
setForm({ ...form, contributionAmount: Math.round(value).toString() });
|
||||
};
|
||||
|
||||
const handleDayPress = (day: any) => {
|
||||
setForm({ ...form, startDate: day.dateString });
|
||||
setCalendarVisible(false);
|
||||
setErrors({ ...errors, startDate: null });
|
||||
};
|
||||
|
||||
const presetAmounts = [2000, 4000, 8000];
|
||||
const cycleTypes = ["CUSTOM", "MONTHLY", "QUARTERLY", "YEARLY"];
|
||||
const distributionTypes = ["SEQUENTIAL", "RANDOM"];
|
||||
|
||||
const handlePresetAmount = (amount: number) => {
|
||||
setForm({ ...form, contributionAmount: amount.toString() });
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: any = {};
|
||||
if (!form.groupName.trim()) newErrors.groupName = "Group name is required.";
|
||||
if (!form.description.trim()) newErrors.description = "Description is required.";
|
||||
if (!form.minParticipants || Number(form.minParticipants) <= 0) newErrors.minParticipants = "Min participants must be greater than 0.";
|
||||
if (!form.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.";
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleReview = () => {
|
||||
if (validateForm()) {
|
||||
navigation.navigate("GroupReview", { form });
|
||||
} else {
|
||||
Alert.alert("Incomplete Form", "Please fill out all required fields correctly.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -39,166 +107,98 @@ export default function GroupCreationForm() {
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.title}>Group Creation</Text>
|
||||
|
||||
{/* Group Info */}
|
||||
<Text style={styles.label}>Group Name</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter your group name"
|
||||
value={form.groupName}
|
||||
onChangeText={(val) => handleChange("groupName", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Description</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { height: 80 }]}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter a short description for the group"
|
||||
value={form.description}
|
||||
multiline
|
||||
onChangeText={(val) => handleChange("description", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Visibility</Text>
|
||||
<View style={styles.pickerWrapper}>
|
||||
<Picker
|
||||
selectedValue={form.visibility}
|
||||
onValueChange={(val) => handleChange("visibility", val)}
|
||||
style={styles.picker}
|
||||
>
|
||||
<Picker.Item label="Private (Only invited can join)" value="PRIVATE" />
|
||||
<Picker.Item label="Public (Anyone can find)" value="PUBLIC" />
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
{/* Participants */}
|
||||
<Text style={styles.label}>Minimum Participants</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter minimum number of participants"
|
||||
keyboardType="numeric"
|
||||
value={form.minParticipants}
|
||||
onChangeText={(val) => handleChange("minParticipants", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Maximum Participants</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter maximum number of participants"
|
||||
keyboardType="numeric"
|
||||
value={form.maxParticipants}
|
||||
onChangeText={(val) => handleChange("maxParticipants", val)}
|
||||
/>
|
||||
|
||||
{/* Contribution */}
|
||||
<Text style={styles.label}>Contribution Amount (₹)</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter contribution amount (₹)"
|
||||
keyboardType="numeric"
|
||||
value={form.contributionAmount}
|
||||
onChangeText={(val) => handleChange("contributionAmount", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Cycle Type</Text>
|
||||
<View style={styles.pickerWrapper}>
|
||||
<Picker
|
||||
selectedValue={form.cycleType}
|
||||
onValueChange={(val) => handleChange("cycleType", val)}
|
||||
style={styles.picker}
|
||||
>
|
||||
<Picker.Item label="Custom (Set custom cycle days)" value="CUSTOM" />
|
||||
<Picker.Item label="Monthly" value="MONTHLY" />
|
||||
<Picker.Item label="Quarterly" value="QUARTERLY" />
|
||||
<Picker.Item label="Half Yearly" value="HALF_YEARLY" />
|
||||
<Picker.Item label="Yearly" value="YEARLY" />
|
||||
<View style={styles.titleContainer}><Text style={styles.title}>Group Creation</Text></View>
|
||||
|
||||
</Picker>
|
||||
<CustomInput label="Group Name" placeholder="Enter your group name" value={form.groupName} onChangeText={(val) => handleChange("groupName", val)} icon="people" error={errors.groupName} />
|
||||
<CustomInput label="Description" placeholder="Enter a short description" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
|
||||
|
||||
<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>
|
||||
|
||||
{form.cycleType === "CUSTOM" && (
|
||||
<>
|
||||
<Text style={styles.label}>Custom Cycle Days</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter number of days for custom cycle"
|
||||
keyboardType="numeric"
|
||||
value={form.customCycleDays}
|
||||
onChangeText={(val) => handleChange("customCycleDays", val)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Text style={styles.label}>Fund Distribution</Text>
|
||||
<View style={styles.toggleContainer}>
|
||||
{distributionTypes.map((type) => (<TouchableOpacity key={type} onPress={() => handleChange("fundDistribution", type)} style={[styles.toggleButton, form.fundDistribution === type && styles.selectedButton]}><Text style={[styles.toggleButtonText, form.fundDistribution === 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" error={errors.minParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Max" placeholder="Max" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /></View>
|
||||
</View>
|
||||
|
||||
<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="#83f5cc" maximumTrackTintColor="#ddd" thumbTintColor="#62b59a" />
|
||||
<View style={styles.amountInput}><CustomInput label="" placeholder="Amount" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} /></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" error={errors.customCycleDays} />)}
|
||||
|
||||
{/* Timeline */}
|
||||
<Text style={styles.label}>Start Date</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="YYYY-MM-DD (e.g. 2025-09-12)"
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
value={form.startDate}
|
||||
onChangeText={(val) => handleChange("startDate", val)}
|
||||
/>
|
||||
<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>}
|
||||
|
||||
<Text style={styles.label}>End Date</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="YYYY-MM-DD (e.g. 2025-12-31)"
|
||||
value={form.endDate}
|
||||
onChangeText={(val) => handleChange("endDate", val)}
|
||||
/>
|
||||
|
||||
{/* Next Button
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate("GroupReview", { form })}
|
||||
style={styles.nextBtn}
|
||||
>
|
||||
<Text style={styles.btnText}>➡ Review</Text>
|
||||
</TouchableOpacity> */}
|
||||
<CustomButton
|
||||
title="➡ Review"
|
||||
onPress={() => navigation.navigate("GroupReview", { form })}
|
||||
/>
|
||||
<CustomButton title="Review" onPress={handleReview} />
|
||||
</ScrollView>
|
||||
|
||||
<Modal animationType="fade" transparent={true} visible={isCalendarVisible} onRequestClose={() => setCalendarVisible(false)}>
|
||||
<TouchableOpacity style={styles.modalBackdrop} activeOpacity={1} onPressOut={() => setCalendarVisible(false)}>
|
||||
<View style={styles.calendarWrapper}><Calendar onDayPress={handleDayPress} markedDates={{[form.startDate]: { selected: true, selectedColor: '#83f5cc' }}} theme={calendarTheme} /></View>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flexGrow: 1, padding: 20 },
|
||||
title: { fontSize: 22, fontWeight: "bold", marginBottom: 15, color: "#333" },
|
||||
label: { fontSize: 14, fontWeight: "600", marginBottom: 5, color: "#444" },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
marginBottom: 15,
|
||||
fontSize: 16,
|
||||
backgroundColor: "#fff",
|
||||
elevation: 1,
|
||||
container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f6fa" },
|
||||
titleContainer: { backgroundColor: "#83f5cc", paddingHorizontal: 18, 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" },
|
||||
selectedButton: { backgroundColor: "#83f5cc", 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: '#83f5cc' },
|
||||
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: '#83f5cc', 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
|
||||
},
|
||||
pickerWrapper: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 12,
|
||||
marginBottom: 15,
|
||||
backgroundColor: "#fff",
|
||||
elevation: 1,
|
||||
errorText: {
|
||||
color: '#ff4d4d',
|
||||
fontSize: 12,
|
||||
marginBottom: 10,
|
||||
marginLeft: 5,
|
||||
},
|
||||
picker: { height: 60, width: "100%" },
|
||||
nextBtn: {
|
||||
backgroundColor: "#eb87a3ff",
|
||||
paddingVertical: 16,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
btnText: { color: "#fff", fontWeight: "bold", fontSize: 16 },
|
||||
});
|
||||
|
||||
+153
-56
@@ -1,10 +1,10 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView } from "react-native";
|
||||
import axios from "axios";
|
||||
import { GROUP_CREATION_URL } from "../utils/ApiUrls";
|
||||
import App from "../../App";
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
import AppView from "../components/AppView";
|
||||
import { apiCall } from "../utils/ApiHelper";
|
||||
import { GROUP_CREATION_URL } from "../utils/ApiUrls";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
|
||||
export default function GroupReview({ route, navigation }: any) {
|
||||
const { form } = route.params;
|
||||
@@ -12,83 +12,180 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
const handleSubmit = async () => {
|
||||
const payload = {
|
||||
...form,
|
||||
contributionAmount: Number(form.contributionAmount),
|
||||
customCycleDays: Number(form.customCycleDays),
|
||||
maxParticipants: Number(form.maxParticipants),
|
||||
minParticipants: Number(form.minParticipants),
|
||||
contributionAmount: Number(form.contributionAmount) || 0,
|
||||
customCycleDays: Number(form.customCycleDays) || 0,
|
||||
maxParticipants: Number(form.maxParticipants) || 0,
|
||||
minParticipants: Number(form.minParticipants) || 0,
|
||||
};
|
||||
await apiCall(GROUP_CREATION_URL, "POST", payload);
|
||||
};
|
||||
|
||||
const renderRow = (label: string, value: string | number) => (
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.value}>{value}</Text>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
<Text style={styles.title}>Review Your Group</Text>
|
||||
<View style={styles.reviewBox}>
|
||||
{renderRow("Group Name", form.groupName)}
|
||||
{renderRow("Description", form.description)}
|
||||
{renderRow("Min Participants", form.minParticipants)}
|
||||
{renderRow("Max Participants", form.maxParticipants)}
|
||||
{renderRow("Contribution", `₹${form.contributionAmount}`)}
|
||||
{renderRow("Cycle Type", form.cycleType)}
|
||||
{form.cycleType === "CUSTOM" && renderRow("Custom Cycle", `${form.customCycleDays} days`)}
|
||||
{renderRow("Start Date", form.startDate)}
|
||||
{renderRow("End Date", form.endDate)}
|
||||
{renderRow("Visibility", form.visibility)}
|
||||
</View>
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>{form.groupName || "Group Review"}</Text>
|
||||
<Text style={styles.subtitle}>Confirm the details to launch your group.</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
|
||||
<Text style={styles.btnText}> Submit</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
<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.fundDistribution)}
|
||||
{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>
|
||||
<CustomButton title="Create Group" onPress={handleSubmit} />
|
||||
</ScrollView>
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f5f5" },
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 20,
|
||||
color: "#222",
|
||||
textAlign: "center",
|
||||
container: {
|
||||
padding: 20,
|
||||
backgroundColor: "#f5f6fa",
|
||||
},
|
||||
reviewBox: {
|
||||
padding: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#fff",
|
||||
marginBottom: 25,
|
||||
header: {
|
||||
marginBottom: 30,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: "#666",
|
||||
marginTop: 2,
|
||||
},
|
||||
section: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 10,
|
||||
},
|
||||
timeline: {
|
||||
alignItems: 'center',
|
||||
width: 40,
|
||||
},
|
||||
timelineIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#83f5cc',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
elevation: 3,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 5,
|
||||
},
|
||||
timelineLine: {
|
||||
flex: 1,
|
||||
width: 2,
|
||||
backgroundColor: '#e0e0e0',
|
||||
},
|
||||
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: "#eee",
|
||||
borderBottomColor: '#f5f5f5',
|
||||
},
|
||||
label: {
|
||||
fontSize: 15,
|
||||
color: "#666",
|
||||
fontWeight: "500",
|
||||
},
|
||||
value: {
|
||||
fontSize: 15,
|
||||
color: "#333",
|
||||
fontWeight: "600",
|
||||
textAlign: 'right',
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
descriptionContainer: {
|
||||
paddingVertical: 10,
|
||||
},
|
||||
descriptionText: {
|
||||
fontSize: 15,
|
||||
color: '#333',
|
||||
marginTop: 4,
|
||||
lineHeight: 22,
|
||||
},
|
||||
label: { fontSize: 16, fontWeight: "600", color: "#444" },
|
||||
value: { fontSize: 16, fontWeight: "500", color: "#111" },
|
||||
submitBtn: {
|
||||
backgroundColor: "#008e02",
|
||||
paddingVertical: 18,
|
||||
borderRadius: 14,
|
||||
backgroundColor: "#83f5cc",
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: "center",
|
||||
elevation: 2,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 12,
|
||||
elevation: 3,
|
||||
marginTop: 20,
|
||||
borderWidth: 1.5,
|
||||
borderColor: '#62b59a',
|
||||
},
|
||||
btnText: {
|
||||
color: "#333",
|
||||
fontWeight: "bold",
|
||||
fontSize: 18,
|
||||
marginLeft: 10,
|
||||
},
|
||||
btnText: { color: "#fff", fontWeight: "bold", fontSize: 18 },
|
||||
});
|
||||
|
||||
+145
-26
@@ -1,46 +1,145 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import { FAB, Portal, Provider } from "react-native-paper";
|
||||
import Tooltip from "react-native-walkthrough-tooltip";
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
|
||||
import { FAB } from "react-native-paper";
|
||||
import { MaterialIcons } from '@react-native-vector-icons/material-icons';
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import AppView from "../components/AppView";
|
||||
|
||||
// --- Placeholder Data ---
|
||||
const myGroupsData = [
|
||||
{ id: '1', name: 'Family Savings', members: 5 },
|
||||
{ id: '2', name: 'Office Lunch Club', members: 12 },
|
||||
];
|
||||
const joinedGroupsData = [
|
||||
{ id: '3', name: 'Apartment Committee', members: 8 },
|
||||
];
|
||||
const publicGroupsData = [
|
||||
{ id: '4', name: 'City Runners', members: 50 },
|
||||
{ id: '5', name: 'Book Readers', members: 25 },
|
||||
];
|
||||
|
||||
// --- Placeholder Group List Component ---
|
||||
const GroupList = ({ data }: { data: any[] }) => {
|
||||
if (data.length === 0) {
|
||||
return <Text style={styles.emptyText}>No groups found.</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={data}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.groupCard}>
|
||||
<Text style={styles.groupName}>{item.name}</Text>
|
||||
<Text style={styles.groupMembers}>{item.members} members</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default function GroupScreen() {
|
||||
const [tooltipVisible, setTooltipVisible] = useState(false);
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const [activeTab, setActiveTab] = useState("My Groups");
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case "My Groups":
|
||||
return <GroupList data={myGroupsData} />;
|
||||
case "Joined":
|
||||
return <GroupList data={joinedGroupsData} />;
|
||||
case "Public":
|
||||
return <GroupList data={publicGroupsData} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Provider>
|
||||
<AppView>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Groups</Text>
|
||||
|
||||
|
||||
<FAB
|
||||
style={styles.fab}
|
||||
icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
|
||||
onPress={() => {
|
||||
navigation.navigate('GroupCreation')
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
{/* --- Header and Segmented Control --- */}
|
||||
<Text style={styles.title}>Your Groups</Text>
|
||||
<View style={styles.segmentedControl}>
|
||||
{["My Groups", "Joined", "Public"].map((tab) => (
|
||||
<TouchableOpacity
|
||||
key={tab}
|
||||
style={[
|
||||
styles.segmentButton,
|
||||
activeTab === tab && styles.segmentButtonActive,
|
||||
]}
|
||||
onPress={() => setActiveTab(tab)}
|
||||
>
|
||||
<Text style={[
|
||||
styles.segmentText,
|
||||
activeTab === tab && styles.segmentTextActive,
|
||||
]}>
|
||||
{tab}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* --- Dynamic Content Area --- */}
|
||||
<View style={styles.contentArea}>
|
||||
{renderContent()}
|
||||
</View>
|
||||
|
||||
<FAB
|
||||
style={styles.fab}
|
||||
icon={() => <MaterialIcons name="group-add" size={24} color="#333" />}
|
||||
onPress={() => navigation.navigate('GroupCreation')}
|
||||
/>
|
||||
</View>
|
||||
</Provider>
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#dae4ed",
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
backgroundColor: '#f5f6fa',
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontSize: 26,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 20,
|
||||
},
|
||||
segmentedControl: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#e0e0e0',
|
||||
borderRadius: 10,
|
||||
padding: 4,
|
||||
marginBottom: 20,
|
||||
},
|
||||
segmentButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
segmentButtonActive: {
|
||||
backgroundColor: '#fff',
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
},
|
||||
segmentText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#555',
|
||||
},
|
||||
segmentTextActive: {
|
||||
color: '#333',
|
||||
},
|
||||
contentArea: {
|
||||
flex: 1,
|
||||
},
|
||||
fab: {
|
||||
position: "absolute",
|
||||
@@ -50,12 +149,32 @@ const styles = StyleSheet.create({
|
||||
height: 70,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#dae4ed",
|
||||
borderRadius: 60,
|
||||
backgroundColor: "#83f5cc",
|
||||
borderRadius: 35,
|
||||
elevation: 4,
|
||||
},
|
||||
tooltipText: {
|
||||
color: "#fff",
|
||||
// --- Group List Styles ---
|
||||
groupCard: {
|
||||
backgroundColor: '#fff',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 12,
|
||||
elevation: 1,
|
||||
},
|
||||
groupName: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
groupMembers: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
color: '#777',
|
||||
marginTop: 4,
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: 'center',
|
||||
marginTop: 50,
|
||||
fontSize: 16,
|
||||
color: '#888',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -27,9 +27,10 @@ const theme = {
|
||||
};
|
||||
|
||||
export default function LoginScreen() {
|
||||
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const [mobile, setMobile] = useState("");
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// animations
|
||||
const fade = useRef(new Animated.Value(0)).current;
|
||||
@@ -43,17 +44,21 @@ export default function LoginScreen() {
|
||||
]).start();
|
||||
}, []);
|
||||
|
||||
const handleContinue = async () => {
|
||||
const handleContinue = async () => {
|
||||
if (mobile.length === 10) {
|
||||
console.log("Mobile submitted:", mobile);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(LOGIN_URL+mobile)
|
||||
console.log('loginres',res.data)
|
||||
if(res.data.statusCode === 200){
|
||||
navigation.navigate('OtpVarify', { mobile: mobile })
|
||||
console.log("Mobile submitted:", mobile);
|
||||
const res = await axios.get(LOGIN_URL + mobile)
|
||||
console.log('loginres', res.data)
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate('OtpVarify', { mobile: mobile })
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
console.error("Login 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");
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
KeyboardAvoidingView,
|
||||
StatusBar,
|
||||
Alert,
|
||||
ToastAndroid,
|
||||
} from "react-native";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
@@ -84,13 +85,11 @@ export default function OtpVerificationScreen() {
|
||||
console.log("✅ OTP Verified:", res.data);
|
||||
if (res.data.statusCode === 200) {
|
||||
saveToken(res.data.data);
|
||||
|
||||
navigation.navigate('HomeTabs')
|
||||
|
||||
}
|
||||
navigation.navigate('Home')
|
||||
ToastAndroid.show("OTP Verified Successfully!", ToastAndroid.SHORT);}
|
||||
} catch (err: any) {
|
||||
console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
|
||||
Alert.alert("Error", "Failed to verify OTP. Please try again.");
|
||||
ToastAndroid.show(err.message || "Invalid OTP. Please try again.", ToastAndroid.SHORT);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -100,16 +99,17 @@ export default function OtpVerificationScreen() {
|
||||
setTimer(30); // reset timer
|
||||
|
||||
const res = await axios.get(
|
||||
LOGIN_URL+mobile,
|
||||
LOGIN_URL + mobile,
|
||||
{ headers: { "Content-Type": "application/json", Accept: "*/*" } }
|
||||
);
|
||||
|
||||
console.log("📩 OTP Resent:", res.data);
|
||||
|
||||
Alert.alert("OTP Sent", "A new OTP has been sent to your mobile.");
|
||||
setCode(Array(CELL_COUNT).fill(""));
|
||||
inputs.current[0]?.focus();
|
||||
ToastAndroid.show("OTP Sent", ToastAndroid.SHORT);
|
||||
} catch (err: any) {
|
||||
console.error("❌ Resend OTP Error:", err?.response?.data || err.message);
|
||||
Alert.alert("Error", "Failed to resend OTP. Try again later.");
|
||||
ToastAndroid.show("Failed to resend OTP. Try again later.", ToastAndroid.SHORT);
|
||||
} finally {
|
||||
setIsResending(false);
|
||||
}
|
||||
|
||||
@@ -1,770 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
StatusBar,
|
||||
TextInput,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import Ionicons from "react-native-vector-icons/Ionicons";
|
||||
import { launchImageLibrary, ImageLibraryOptions, Asset } from "react-native-image-picker";
|
||||
import { PROFILE_URL } from "../utils/ApiUrls";
|
||||
|
||||
type ButtonType = "primary" | "secondary" | "danger" | "outline";
|
||||
|
||||
type CustomButtonProps = {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
type?: ButtonType;
|
||||
icon?: string;
|
||||
style?: any;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const CustomButton = ({
|
||||
title,
|
||||
onPress,
|
||||
type = "primary",
|
||||
icon,
|
||||
style,
|
||||
disabled = false,
|
||||
}: CustomButtonProps) => {
|
||||
const getButtonStyle = () => {
|
||||
switch (type) {
|
||||
case "secondary":
|
||||
return [styles.button, styles.buttonSecondary];
|
||||
case "danger":
|
||||
return [styles.button, styles.buttonDanger];
|
||||
case "outline":
|
||||
return [styles.button, styles.buttonOutline];
|
||||
default:
|
||||
return styles.button;
|
||||
}
|
||||
};
|
||||
|
||||
const getTextStyle = () => {
|
||||
switch (type) {
|
||||
case "secondary":
|
||||
return [styles.buttonText, styles.buttonTextSecondary];
|
||||
case "danger":
|
||||
return [styles.buttonText, styles.buttonTextDanger];
|
||||
case "outline":
|
||||
return [styles.buttonText, styles.buttonTextOutline];
|
||||
default:
|
||||
return styles.buttonText;
|
||||
}
|
||||
};
|
||||
|
||||
const textColor =
|
||||
Array.isArray(getTextStyle())
|
||||
? getTextStyle().find((s: any) => s && typeof s === "object" && "color" in s)?.color || "#fff"
|
||||
: (getTextStyle() as any).color || "#fff";
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[getButtonStyle(), style, disabled && { opacity: 0.6 }]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
disabled={disabled}
|
||||
>
|
||||
{icon ? <Ionicons name={icon} size={18} color={textColor} style={styles.buttonIcon} /> : null}
|
||||
<Text style={getTextStyle()}>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
type CustomInputProps = {
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
icon?: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const CustomInput = ({
|
||||
label,
|
||||
placeholder,
|
||||
value,
|
||||
onChangeText,
|
||||
icon,
|
||||
...props
|
||||
}: CustomInputProps) => {
|
||||
return (
|
||||
<View style={styles.inputContainer}>
|
||||
{label ? <Text style={styles.inputLabel}>{label}</Text> : null}
|
||||
<View style={styles.inputWrapper}>
|
||||
{icon ? <Ionicons name={icon} size={20} color="#666" style={styles.inputIcon} /> : null}
|
||||
<TextInput
|
||||
style={[styles.input, icon && styles.inputWithIcon]}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor="#999"
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
{...props}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
type UserProfile = {
|
||||
id: string;
|
||||
userId: number;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
mobile: string | null;
|
||||
gender: string | null;
|
||||
email: string | null;
|
||||
username: string | null;
|
||||
address: string | null;
|
||||
bankName: string | null;
|
||||
branchCode: string | null;
|
||||
filePath: string | null; // local selection
|
||||
bankAccountNumber: string | null;
|
||||
imageBlob: string | null; // base64 from API
|
||||
organizerStatus?: string;
|
||||
role?: string;
|
||||
};
|
||||
|
||||
const ProfileScreen = () => {
|
||||
const [user, setUser] = useState<UserProfile | null>(null);
|
||||
const [fetching, setFetching] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [imageUpdating, setImageUpdating] = useState(false);
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
setFetching(true);
|
||||
const response = await fetch(
|
||||
PROFILE_URL,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
Alert.alert("Error", `Failed to fetch user profile (${response.status})`);
|
||||
setFetching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
setUser(result.data as UserProfile);
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to fetch user profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
Alert.alert("Error", "Could not connect to server");
|
||||
} finally {
|
||||
setFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateProfile = async () => {
|
||||
try {
|
||||
if (!user) return;
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
const response = await fetch(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/update",
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
address: user.address || null,
|
||||
email: user.email || null,
|
||||
firstName: user.firstName || null,
|
||||
gender: user.gender || null,
|
||||
lastName: user.lastName || null,
|
||||
username: user.username || null,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
Alert.alert("Error", `Failed to update profile (${response.status})`);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile updated successfully");
|
||||
setEditing(false);
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to update profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile:", error);
|
||||
Alert.alert("Error", "Could not update profile");
|
||||
}
|
||||
};
|
||||
|
||||
const pickImage = () => {
|
||||
const options: ImageLibraryOptions = {
|
||||
mediaType: "photo",
|
||||
quality: 0.7,
|
||||
selectionLimit: 1,
|
||||
includeBase64: false,
|
||||
};
|
||||
launchImageLibrary(options, (response) => {
|
||||
if (response.didCancel) return;
|
||||
if (response.errorCode) {
|
||||
Alert.alert("Error", response.errorMessage || "Image picker error");
|
||||
return;
|
||||
}
|
||||
const asset: Asset | undefined = response.assets?.[0];
|
||||
if (!asset) return;
|
||||
setUser((prev) => (prev ? { ...prev, filePath: asset.uri ?? null } : prev));
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateImage = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
if (!user?.filePath) {
|
||||
Alert.alert("Error", "Please select an image first");
|
||||
return;
|
||||
}
|
||||
|
||||
setImageUpdating(true);
|
||||
|
||||
// Normalize uri for iOS if needed
|
||||
const normalizedUri =
|
||||
Platform.OS === "ios" ? user.filePath.replace("file://", "") : user.filePath;
|
||||
|
||||
const formData = new FormData();
|
||||
// Best effort mime/name; servers often ignore name but it's helpful
|
||||
const name = "profile.jpg";
|
||||
const type = "image/jpeg";
|
||||
|
||||
formData.append("file", {
|
||||
uri: normalizedUri,
|
||||
name,
|
||||
type,
|
||||
} as any);
|
||||
|
||||
const response = await fetch(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/update/userImg",
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
// Do NOT set Content-Type manually; let fetch add proper multipart boundary
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
// Try to parse JSON; if fails, provide status
|
||||
let message = `Failed to update profile image (${response.status})`;
|
||||
try {
|
||||
const err = await response.json();
|
||||
if (err?.message) message = err.message;
|
||||
} catch {}
|
||||
Alert.alert("Error", message);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
|
||||
if (result.data?.imageBlob) {
|
||||
setUser((prev) =>
|
||||
prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev
|
||||
);
|
||||
} else {
|
||||
setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
|
||||
}
|
||||
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to update profile image");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile image:", error);
|
||||
Alert.alert("Error", "Could not update profile image");
|
||||
} finally {
|
||||
setImageUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
const getProfileImage = () => {
|
||||
if (user?.imageBlob) {
|
||||
return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
}
|
||||
if (user?.filePath) {
|
||||
return user.filePath;
|
||||
}
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
if (fetching || !user) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#6366f1" />
|
||||
<Text style={styles.loadingText}>Loading profile...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar backgroundColor="#6366f1" barStyle="light-content" />
|
||||
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>User Profile</Text>
|
||||
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
|
||||
<Ionicons name="refresh" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scrollContainer}>
|
||||
<View style={styles.profileCard}>
|
||||
<View style={styles.profileImageSection}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Image
|
||||
source={{ uri: getProfileImage() }}
|
||||
style={styles.avatar}
|
||||
onError={() => console.log("Error loading image")}
|
||||
/>
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
disabled={imageUpdating}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
<View style={styles.detailsSection}>
|
||||
<Text style={styles.sectionTitle}>Personal Information</Text>
|
||||
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Name</Text>
|
||||
<Text style={styles.detailText}>
|
||||
{(user.firstName || "") + " " + (user.lastName || "")}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Email</Text>
|
||||
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Mobile</Text>
|
||||
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Username</Text>
|
||||
<Text style={styles.detailText}>{user.username || "-"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Address</Text>
|
||||
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons
|
||||
name="male-female"
|
||||
size={20}
|
||||
color="#6366f1"
|
||||
style={styles.detailIcon}
|
||||
/>
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Gender</Text>
|
||||
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Role</Text>
|
||||
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title="Edit Profile"
|
||||
onPress={() => setEditing(true)}
|
||||
icon="create"
|
||||
style={styles.editButton}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.editSection}>
|
||||
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
||||
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
value={user.firstName ?? ""}
|
||||
onChangeText={(text: string) =>
|
||||
setUser((prev) => (prev ? { ...prev, firstName: text } : prev))
|
||||
}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
value={user.lastName ?? ""}
|
||||
onChangeText={(text: string) =>
|
||||
setUser((prev) => (prev ? { ...prev, lastName: text } : prev))
|
||||
}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
value={user.email ?? ""}
|
||||
onChangeText={(text: string) =>
|
||||
setUser((prev) => (prev ? { ...prev, email: text } : prev))
|
||||
}
|
||||
icon="mail"
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
value={user.username ?? ""}
|
||||
onChangeText={(text: string) =>
|
||||
setUser((prev) => (prev ? { ...prev, username: text } : prev))
|
||||
}
|
||||
icon="at-circle"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Address"
|
||||
placeholder="Enter address"
|
||||
value={user.address ?? ""}
|
||||
onChangeText={(text: string) =>
|
||||
setUser((prev) => (prev ? { ...prev, address: text } : prev))
|
||||
}
|
||||
icon="location"
|
||||
multiline
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user.gender ?? ""}
|
||||
onChangeText={(text: string) =>
|
||||
setUser((prev) => (prev ? { ...prev, gender: text } : prev))
|
||||
}
|
||||
icon="male-female"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.editButtons}>
|
||||
<CustomButton
|
||||
title="Save Changes"
|
||||
onPress={updateProfile}
|
||||
icon="save"
|
||||
style={styles.saveButton}
|
||||
/>
|
||||
<CustomButton
|
||||
title="Cancel"
|
||||
type="outline"
|
||||
onPress={() => setEditing(false)}
|
||||
icon="close"
|
||||
style={styles.cancelButton}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f8fafc",
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8fafc",
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
fontSize: 16,
|
||||
color: "#64748b",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 16,
|
||||
paddingTop: 50,
|
||||
backgroundColor: "#6366f1",
|
||||
borderBottomLeftRadius: 20,
|
||||
borderBottomRightRadius: 20,
|
||||
elevation: 4,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "700",
|
||||
color: "#fff",
|
||||
},
|
||||
refreshButton: {
|
||||
padding: 4,
|
||||
},
|
||||
scrollContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
profileCard: {
|
||||
borderRadius: 20,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 10,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
elevation: 5,
|
||||
},
|
||||
profileImageSection: {
|
||||
alignItems: "center",
|
||||
marginBottom: 24,
|
||||
paddingBottom: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f1f5f9",
|
||||
},
|
||||
avatarContainer: {
|
||||
position: "relative",
|
||||
marginBottom: 16,
|
||||
},
|
||||
avatar: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#e2e8f0",
|
||||
},
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "#6366f1",
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderWidth: 3,
|
||||
borderColor: "#fff",
|
||||
elevation: 2,
|
||||
},
|
||||
updateImageButton: {
|
||||
width: "80%",
|
||||
},
|
||||
detailsSection: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
color: "#1e293b",
|
||||
marginBottom: 16,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f1f5f9",
|
||||
},
|
||||
detailRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
detailIcon: {
|
||||
marginRight: 12,
|
||||
},
|
||||
detailLabel: {
|
||||
fontSize: 12,
|
||||
color: "#64748b",
|
||||
marginBottom: 2,
|
||||
},
|
||||
detailText: {
|
||||
fontSize: 16,
|
||||
color: "#334155",
|
||||
fontWeight: "500",
|
||||
},
|
||||
editButton: {
|
||||
marginTop: 8,
|
||||
},
|
||||
editSection: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
editButtons: {
|
||||
gap: 12,
|
||||
},
|
||||
saveButton: {
|
||||
marginTop: 8,
|
||||
},
|
||||
cancelButton: {
|
||||
marginTop: 4,
|
||||
},
|
||||
inputContainer: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 6,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
},
|
||||
inputIcon: {
|
||||
position: "absolute",
|
||||
left: 12,
|
||||
zIndex: 1,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#d1d5db",
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
backgroundColor: "#fff",
|
||||
color: "#1f2937",
|
||||
fontSize: 16,
|
||||
flex: 1,
|
||||
},
|
||||
inputWithIcon: {
|
||||
paddingLeft: 40,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#6366f1",
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
shadowColor: "#6366f1",
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
elevation: 4,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#f1f5f9",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ef4444",
|
||||
},
|
||||
buttonOutline: {
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1,
|
||||
borderColor: "#6366f1",
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
buttonTextSecondary: {
|
||||
color: "#334155",
|
||||
},
|
||||
buttonTextDanger: {
|
||||
color: "#fff",
|
||||
},
|
||||
buttonTextOutline: {
|
||||
color: "#6366f1",
|
||||
},
|
||||
buttonIcon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default ProfileScreen;
|
||||
@@ -15,7 +15,7 @@ const SplashScreen = () => {
|
||||
const creds = await Keychain.getGenericPassword();
|
||||
if (creds) {
|
||||
console.log("🔑 Found token:", creds.password);
|
||||
navigation.replace("HomeTabs");
|
||||
navigation.replace("Home"); // go to bottom tabs if logged in
|
||||
} else {
|
||||
navigation.replace("Login");
|
||||
}
|
||||
|
||||
@@ -0,0 +1,632 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
StatusBar,
|
||||
TextInput,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import { launchImageLibrary } from "react-native-image-picker";
|
||||
import { base_URL } from "../../utils/ApiUrls";
|
||||
import { CustomButton, CustomInput } from "../../components/common/Custom";
|
||||
|
||||
|
||||
|
||||
type UserProfile = {
|
||||
id: string;
|
||||
userId: number;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
mobile: string | null;
|
||||
gender: string | null;
|
||||
email: string | null;
|
||||
username: string | null;
|
||||
address: string | null;
|
||||
bankName: string | null;
|
||||
branchCode: string | null;
|
||||
filePath: string | null;
|
||||
bankAccountNumber: string | null;
|
||||
imageBlob: string | null;
|
||||
organizerStatus?: string;
|
||||
role?: string;
|
||||
};
|
||||
|
||||
const Profile = () => {
|
||||
const [user, setUser] = useState<UserProfile | null>(null);
|
||||
const [fetching, setFetching] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [imageUpdating, setImageUpdating] = useState(false);
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
setFetching(true);
|
||||
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") {
|
||||
setUser(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");
|
||||
} finally {
|
||||
setFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateProfile = 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(
|
||||
`${base_URL}user/profile/update`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
address: user?.address || null,
|
||||
email: user?.email || null,
|
||||
firstName: user?.firstName || null,
|
||||
gender: user?.gender || null,
|
||||
lastName: user?.lastName || null,
|
||||
username: user?.username || null,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile updated successfully");
|
||||
setEditing(false);
|
||||
fetchUserProfile(); // reload updated data
|
||||
} else {
|
||||
Alert.alert("Error", "Failed to update profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile:", error);
|
||||
Alert.alert("Error", "Could not update profile");
|
||||
}
|
||||
};
|
||||
|
||||
const pickImage = () => {
|
||||
launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
|
||||
if (response.didCancel) return;
|
||||
if (response.errorCode) {
|
||||
Alert.alert("Error", response.errorMessage || "Something went wrong");
|
||||
} else if (response.assets && response.assets.length > 0) {
|
||||
const selectedImage = response.assets[0];
|
||||
setUser((prev) =>
|
||||
prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateImage = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
if (!user?.filePath) {
|
||||
Alert.alert("Error", "Please select an image first");
|
||||
return;
|
||||
}
|
||||
|
||||
setImageUpdating(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", {
|
||||
uri: user.filePath,
|
||||
type: "image/jpeg",
|
||||
name: "profile.jpg",
|
||||
} as any);
|
||||
|
||||
const response = await fetch(
|
||||
`${base_URL}user/update/userImg`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
|
||||
// If API returns updated image, set it
|
||||
if (result.data?.imageBlob) {
|
||||
setUser((prev) => 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);
|
||||
}
|
||||
|
||||
// Refresh profile from API as well
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to update profile image");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile image:", error);
|
||||
Alert.alert("Error", "Could not update profile image");
|
||||
} finally {
|
||||
setImageUpdating(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
console.log("user image :", user?.filePath);
|
||||
const getProfileImage = () => {
|
||||
if (user?.imageBlob) {
|
||||
return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
}
|
||||
if (user?.filePath) {
|
||||
return user.filePath;
|
||||
}
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
|
||||
if (fetching || !user) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#6366f1" />
|
||||
<Text style={styles.loadingText}>Loading profile...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar backgroundColor="#6366f1" barStyle="light-content" />
|
||||
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>User Profile</Text>
|
||||
<TouchableOpacity onPress={fetchUserProfile} style={styles.refreshButton}>
|
||||
<Ionicons name="refresh" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Profile Card */}
|
||||
<View style={styles.profileCard}>
|
||||
{/* Profile Image Section */}
|
||||
<View style={styles.profileImageSection}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Image
|
||||
source={{ uri: getProfileImage() }}
|
||||
style={styles.avatar}
|
||||
onError={() => console.log("Error loading image")}
|
||||
/>
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
// disabled={imageUpdating}
|
||||
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
{/* Profile Details */}
|
||||
<View style={styles.detailsSection}>
|
||||
<Text style={styles.sectionTitle}>Personal Information</Text>
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
|
||||
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Name</Text>
|
||||
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Email</Text>
|
||||
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Mobile</Text>
|
||||
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Username</Text>
|
||||
<Text style={styles.detailText}>{user.username}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Address</Text>
|
||||
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Gender</Text>
|
||||
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Role</Text>
|
||||
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title="Edit Profile"
|
||||
onPress={() => setEditing(true)}
|
||||
icon="create"
|
||||
style={styles.editButton}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Edit Form */}
|
||||
<View style={styles.editSection}>
|
||||
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
||||
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
value={user.firstName ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, firstName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
value={user.lastName ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, lastName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
value={user.email ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, email: text })}
|
||||
icon="mail"
|
||||
keyboardType="email-address"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
value={user.username ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, username: text })}
|
||||
icon="at"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Address"
|
||||
placeholder="Enter address"
|
||||
value={user.address ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, address: text })}
|
||||
icon="location"
|
||||
multiline
|
||||
/>
|
||||
<CustomInput
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user.gender ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, gender: text })}
|
||||
icon="male-female"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.editButtons}>
|
||||
<CustomButton
|
||||
title="Save Changes"
|
||||
onPress={updateProfile}
|
||||
icon="save"
|
||||
style={styles.saveButton}
|
||||
/>
|
||||
<CustomButton
|
||||
title="Cancel"
|
||||
type="outline"
|
||||
onPress={() => setEditing(false)}
|
||||
icon="close"
|
||||
style={styles.cancelButton}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f8fafc",
|
||||
marginBottom: '30%',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8fafc"
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
fontSize: 16,
|
||||
color: "#64748b"
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 16,
|
||||
paddingTop: 50,
|
||||
backgroundColor: "#6366f1",
|
||||
borderBottomLeftRadius: 20,
|
||||
borderBottomRightRadius: 20,
|
||||
elevation: 4,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "700",
|
||||
color: "#fff"
|
||||
},
|
||||
refreshButton: {
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
profileCard: {
|
||||
borderRadius: 20,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 10,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
elevation: 5,
|
||||
},
|
||||
profileImageSection: {
|
||||
alignItems: "center",
|
||||
marginBottom: 24,
|
||||
paddingBottom: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f1f5f9",
|
||||
},
|
||||
avatarContainer: {
|
||||
position: "relative",
|
||||
marginBottom: 16,
|
||||
},
|
||||
avatar: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#e2e8f0",
|
||||
},
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "#6366f1",
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderWidth: 3,
|
||||
borderColor: "#fff",
|
||||
elevation: 2,
|
||||
},
|
||||
updateImageButton: {
|
||||
width: "80%",
|
||||
},
|
||||
detailsSection: {
|
||||
marginBottom: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
color: "#1e293b",
|
||||
marginBottom: 16,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f1f5f9",
|
||||
},
|
||||
detailRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
detailIcon: {
|
||||
marginRight: 12,
|
||||
},
|
||||
detailLabel: {
|
||||
fontSize: 12,
|
||||
color: "#64748b",
|
||||
marginBottom: 2,
|
||||
},
|
||||
detailText: {
|
||||
fontSize: 16,
|
||||
color: "#334155",
|
||||
fontWeight: "500",
|
||||
},
|
||||
editButton: {
|
||||
marginTop: 8,
|
||||
},
|
||||
editSection: {
|
||||
marginBottom: 20,
|
||||
flex: 1,
|
||||
},
|
||||
editButtons: {
|
||||
gap: 12,
|
||||
},
|
||||
saveButton: {
|
||||
marginTop: 8,
|
||||
},
|
||||
cancelButton: {
|
||||
marginTop: 4,
|
||||
},
|
||||
inputContainer: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 6,
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
},
|
||||
inputIcon: {
|
||||
position: "absolute",
|
||||
left: 12,
|
||||
zIndex: 1,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#d1d5db",
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
backgroundColor: "#fff",
|
||||
color: "#1f2937",
|
||||
fontSize: 16,
|
||||
flex: 1,
|
||||
},
|
||||
inputWithIcon: {
|
||||
paddingLeft: 40,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#6366f1",
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
shadowColor: "#6366f1",
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
elevation: 4,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#f1f5f9",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ef4444",
|
||||
},
|
||||
buttonOutline: {
|
||||
backgroundColor: "transparent",
|
||||
borderWidth: 1,
|
||||
borderColor: "#6366f1",
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
buttonTextSecondary: {
|
||||
color: "#334155",
|
||||
},
|
||||
buttonTextDanger: {
|
||||
color: "#fff",
|
||||
},
|
||||
buttonTextOutline: {
|
||||
color: "#6366f1",
|
||||
},
|
||||
buttonIcon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default Profile;
|
||||
Reference in New Issue
Block a user