payment added
This commit is contained in:
Abin Toppo
@@ -15,6 +15,8 @@ export interface AlertButton {
|
||||
text: string;
|
||||
onPress: () => void;
|
||||
style?: "cancel" | "destructive" | "default" | "primary" | "secondary" | "outline";
|
||||
buttonColor?: string;
|
||||
textColor?: string;
|
||||
}
|
||||
|
||||
export interface CustomAlertProps {
|
||||
@@ -58,7 +60,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonStyle = (styleType:string|undefined) => {
|
||||
const getButtonStyle = (styleType: string | undefined) => {
|
||||
switch (styleType) {
|
||||
case "primary":
|
||||
return [styles.button, styles.primaryButton];
|
||||
@@ -75,7 +77,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonTextStyle = (styleType:string|undefined) => {
|
||||
const getButtonTextStyle = (styleType: string | undefined) => {
|
||||
switch (styleType) {
|
||||
case "primary":
|
||||
return [styles.buttonText, styles.primaryButtonText];
|
||||
@@ -110,7 +112,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
<View style={styles.faintOverlay} />
|
||||
<View style={styles.contentContainer}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Ionicons name={icon.name} size={48} color={icon.color} />
|
||||
<Ionicons name={icon.name} size={36} color={icon.color} /> {/* smaller icon for vertical compression */}
|
||||
</View>
|
||||
<Text style={styles.alertTitle}>{title}</Text>
|
||||
<Text style={styles.alertMessage}>{message}</Text>
|
||||
@@ -119,10 +121,17 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
|
||||
{buttons.map((button, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={getButtonStyle(button.style)}
|
||||
style={[
|
||||
...getButtonStyle(button.style),
|
||||
button.style !== "cancel" && button.buttonColor ? { backgroundColor: button.buttonColor } : null,
|
||||
button.style === "outline" && button.buttonColor ? { borderColor: button.buttonColor } : null,
|
||||
]}
|
||||
onPress={button.onPress}
|
||||
>
|
||||
<Text style={getButtonTextStyle(button.style)}>
|
||||
<Text style={[
|
||||
...getButtonTextStyle(button.style),
|
||||
button.style !== "cancel" && button.textColor ? { color: button.textColor } : null,
|
||||
]}>
|
||||
{button.text}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -150,13 +159,13 @@ const styles = StyleSheet.create({
|
||||
right: 0,
|
||||
},
|
||||
box: {
|
||||
paddingHorizontal: 4,
|
||||
padding: BORDER_WIDTH + 4,
|
||||
paddingHorizontal: 2, // reduce horizontal padding
|
||||
padding: BORDER_WIDTH + 2, // reduce overall padding
|
||||
borderRadius: RADIUS + BORDER_WIDTH,
|
||||
width: '90%',
|
||||
maxWidth: 400,
|
||||
alignSelf: 'center',
|
||||
margin: 20,
|
||||
margin: 10, // reduce margin for vertical compression
|
||||
backgroundColor: colors.pastelPink,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
@@ -169,40 +178,40 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
contentContainer: {
|
||||
zIndex: 2,
|
||||
padding: 24,
|
||||
padding: 12, // reduce container padding
|
||||
alignItems: "center",
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 16,
|
||||
marginBottom: 8, // reduce vertical space below icon
|
||||
},
|
||||
alertTitle: {
|
||||
fontSize: 22,
|
||||
fontSize: 18, // smaller font size
|
||||
fontWeight: "bold",
|
||||
color: colors.textDark,
|
||||
marginBottom: 8,
|
||||
marginBottom: 4, // less space below title
|
||||
textAlign: "center",
|
||||
},
|
||||
alertMessage: {
|
||||
fontSize: 16,
|
||||
fontSize: 14, // smaller font size
|
||||
color: colors.textLight,
|
||||
textAlign: "center",
|
||||
marginBottom: 24,
|
||||
lineHeight: 22,
|
||||
marginBottom: 12, // tighter spacing
|
||||
lineHeight: 18, // reduced line height
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: 'flex-end',
|
||||
width: "100%",
|
||||
gap: 12,
|
||||
gap: 8, // reduce gap between buttons
|
||||
},
|
||||
button: {
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 8, // less vertical padding
|
||||
paddingHorizontal: 16, // less horizontal padding
|
||||
borderRadius: 16,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minWidth: 80,
|
||||
borderWidth: 0, // default border, override for outline/cancel
|
||||
minWidth: 72, // slightly smaller minimum width
|
||||
borderWidth: 0,
|
||||
},
|
||||
// === BUTTON STYLE VARIANTS ===
|
||||
defaultButton: {
|
||||
@@ -229,7 +238,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
// === BUTTON TEXT COLOR VARIANTS ===
|
||||
buttonText: {
|
||||
fontSize: 16,
|
||||
fontSize: 14, // smaller text
|
||||
fontWeight: "700",
|
||||
},
|
||||
defaultButtonText: {
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
// src/components/UserRequested.tsx
|
||||
|
||||
import React, { FC } from "react";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from "./colors";
|
||||
import { UserJoinRequest } from "../types";
|
||||
import { formatDate } from "../utils/HelperFunction";
|
||||
@@ -15,24 +13,23 @@ const getStatusStyle = (status: UserJoinRequest["status"]) => {
|
||||
switch (status) {
|
||||
case "APPROVED":
|
||||
return {
|
||||
backgroundColor: "#D1FAE5", // light green
|
||||
textColor: "#065F46", // dark green
|
||||
backgroundColor: "#D1FAE5",
|
||||
textColor: "#065F46",
|
||||
label: "Approved",
|
||||
icon: "checkmark-circle-outline",
|
||||
|
||||
};
|
||||
case "PENDING":
|
||||
return {
|
||||
backgroundColor: "#FEF3C7", // light yellow
|
||||
textColor: "#92400E", // dark yellow/brown
|
||||
backgroundColor: "#FEF3C7",
|
||||
textColor: "#92400E",
|
||||
label: "Pending",
|
||||
icon: "time-outline",
|
||||
};
|
||||
case "REJECT":
|
||||
return {
|
||||
backgroundColor: "#E5E7EB", // light gray
|
||||
textColor: "#4B5563", // dark gray
|
||||
label: "Reject",
|
||||
backgroundColor: "#FEE2E2",
|
||||
textColor: "#B91C1C",
|
||||
label: "Rejected",
|
||||
icon: "close-circle-outline",
|
||||
};
|
||||
default:
|
||||
@@ -48,38 +45,39 @@ const getStatusStyle = (status: UserJoinRequest["status"]) => {
|
||||
export const UserRequested: FC<UserRequestedProps> = ({ item }) => {
|
||||
const { backgroundColor, textColor, label, icon } = getStatusStyle(item.status);
|
||||
|
||||
// Optionally, initials avatar (remove/comment if you want):
|
||||
const initials = item.createdBy?.trim().split(" ").map((w) => w[0])?.join("").toUpperCase();
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
{/* Top row: User info + Status */}
|
||||
<View style={styles.topRow}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<View style={styles.avatarCircle}>
|
||||
<Text style={styles.avatarText}>{initials}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.userInfoSection}>
|
||||
|
||||
<Text style={styles.groupName}>{item.groupName}</Text>
|
||||
|
||||
<Text style={styles.userMeta}>
|
||||
<Ionicons name="time-outline" size={14} color={colors.textLight} />{" "}
|
||||
<Ionicons name="time-outline" size={13} color={colors.textLight} />{" "}
|
||||
{formatDate(item.requestDate)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Status Badge */}
|
||||
<View style={[styles.statusBadge, { backgroundColor }]}>
|
||||
<Ionicons name={icon as any} size={16} color={textColor} />
|
||||
<Ionicons name={icon as any} size={17} color={textColor} />
|
||||
<Text style={[styles.statusText, { color: textColor }]}>{label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Group Info */}
|
||||
<View style={styles.groupInfoSection}>
|
||||
<Text style={styles.requestText}>
|
||||
Group Created By :{" "}
|
||||
<Text style={styles.userName} numberOfLines={1}>
|
||||
{item.createdBy}
|
||||
</Text>
|
||||
<Ionicons name="person-outline" size={13} color={colors.textLight} />
|
||||
{" "}Group Created By:{" "}
|
||||
<Text style={styles.userName} numberOfLines={1}>{item.createdBy}</Text>
|
||||
</Text>
|
||||
{item.reason ? (
|
||||
<Text style={styles.reasonText} numberOfLines={2}>
|
||||
Reason: {item.reason}
|
||||
<Ionicons name="chatbubbles-outline" size={13} color={colors.textLight} /> {item.reason}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
@@ -91,64 +89,95 @@ const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 16,
|
||||
marginVertical: 8,
|
||||
elevation: 3,
|
||||
marginVertical: 14, // More space
|
||||
marginHorizontal: 10,
|
||||
elevation: 4,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
padding: 12,
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 8,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
padding: 16,
|
||||
},
|
||||
topRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.Settings,
|
||||
paddingBottom: 8,
|
||||
borderBottomColor: "#e5e7eb",
|
||||
paddingBottom: 10,
|
||||
marginBottom: 6
|
||||
},
|
||||
avatarContainer: {
|
||||
marginRight: 10,
|
||||
marginTop: 2,
|
||||
},
|
||||
avatarCircle: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: colors.pastelBlue,
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
avatarText: {
|
||||
fontWeight: "700",
|
||||
fontSize: 15,
|
||||
color: colors.white,
|
||||
},
|
||||
userInfoSection: {
|
||||
flex: 1,
|
||||
paddingRight: 8,
|
||||
},
|
||||
userName: {
|
||||
// fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
color: colors.textDark,
|
||||
fontSize: 15,
|
||||
},
|
||||
userMeta: {
|
||||
fontSize: 13,
|
||||
fontSize: 12,
|
||||
color: colors.textLight,
|
||||
marginTop: 2,
|
||||
marginTop: 3,
|
||||
marginBottom: -3,
|
||||
},
|
||||
groupInfoSection: {
|
||||
paddingVertical: 12,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 6,
|
||||
},
|
||||
requestText: {
|
||||
// fontSize: 15,
|
||||
color: colors.textDark,
|
||||
lineHeight: 20,
|
||||
fontSize: 15,
|
||||
marginBottom: 2,
|
||||
lineHeight: 22,
|
||||
},
|
||||
groupName: {
|
||||
fontWeight: "600",
|
||||
color: colors.Settings,
|
||||
fontSize:18
|
||||
fontSize: 18,
|
||||
marginBottom: 2,
|
||||
},
|
||||
reasonText: {
|
||||
fontSize: 13,
|
||||
fontSize: 12,
|
||||
color: colors.textLight,
|
||||
marginTop: 4,
|
||||
marginTop: 6,
|
||||
paddingLeft: 1,
|
||||
lineHeight: 18,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
statusBadge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
marginLeft: 4,
|
||||
minWidth: 90,
|
||||
justifyContent: "center",
|
||||
alignSelf: "flex-start",
|
||||
marginTop: 2
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
marginLeft: 4,
|
||||
fontSize: 14,
|
||||
fontWeight: "700",
|
||||
marginLeft: 6,
|
||||
letterSpacing: 0.5
|
||||
},
|
||||
});
|
||||
|
||||
@@ -24,6 +24,7 @@ import Notification from "../screens/notification/Notification";
|
||||
import ManagementScreen from "../screens/management/ManagementScreen";
|
||||
import { navigationRef } from "../utils/navigationService";
|
||||
import NotificationRedirection from "../screens/NotificationRedirection";
|
||||
// import screen from "../components/test";
|
||||
|
||||
export type RootStackParamList = {
|
||||
Splash: undefined;
|
||||
@@ -54,6 +55,7 @@ export type RootStackParamList = {
|
||||
| { actionTab3: "Your Requests" }
|
||||
| { groupId: string | number; }
|
||||
|
||||
|
||||
};
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>();
|
||||
@@ -121,3 +123,4 @@ export default function AppNavigator() {
|
||||
</NavigationContainer>
|
||||
);
|
||||
}
|
||||
;
|
||||
+132
-65
@@ -36,7 +36,7 @@ export default function GroupCreationForm() {
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<any>({});
|
||||
const [selectedImage, setSelectedImage] = useState()
|
||||
const [selectedImage, setSelectedImage] = useState<any>();
|
||||
|
||||
const handleChange = (key: string, value: string) => {
|
||||
setForm({ ...form, [key]: value });
|
||||
@@ -45,10 +45,37 @@ export default function GroupCreationForm() {
|
||||
}
|
||||
};
|
||||
|
||||
const cycleTypes = ["CUSTOM", "MONTHLY", "QUARTERLY", "YEARLY", "HALF_YEARLY"];
|
||||
// ---- Custom logic for Payment Cycle ----
|
||||
const cycleTypes = [
|
||||
"CUSTOM",
|
||||
"DAILY",
|
||||
"WEEKLY",
|
||||
"MONTHLY",
|
||||
"QUARTERLY",
|
||||
"HALF_YEARLY",
|
||||
"YEARLY",
|
||||
];
|
||||
const distributionTypes = ["SEQUENTIAL", "RANDOM"];
|
||||
const lateFeeModes = ["DAILY", "MONTHLY"];
|
||||
|
||||
// The core: handle payment cycle options
|
||||
const handleCycleChange = (val: string) => {
|
||||
let newForm = { ...form, cycleType: val };
|
||||
if (val === "DAILY") {
|
||||
newForm = { ...newForm, cycleType: "CUSTOM", customCycleDays: "1" };
|
||||
} else if (val === "WEEKLY") {
|
||||
newForm = { ...newForm, cycleType: "CUSTOM", customCycleDays: "7" };
|
||||
} else if (
|
||||
val !== "CUSTOM"
|
||||
) {
|
||||
newForm = { ...newForm, customCycleDays: "" }; // Clear custom days
|
||||
}
|
||||
setForm(newForm);
|
||||
if (errors["customCycleDays"]) {
|
||||
setErrors({ ...errors, customCycleDays: null });
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: any = {};
|
||||
if (!form.groupName.trim()) newErrors.groupName = "Group name is required.";
|
||||
@@ -58,7 +85,6 @@ export default function GroupCreationForm() {
|
||||
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.lateFeeMode && (!form.lateFeeValue || Number(form.lateFeeValue) <= 0)) newErrors.lateFeeValue = "Late fee value is required.";
|
||||
console.log("new errors : ", newErrors)
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
@@ -73,26 +99,39 @@ export default function GroupCreationForm() {
|
||||
maxParticipants: Number(form.maxParticipants),
|
||||
minParticipants: Number(form.minParticipants),
|
||||
};
|
||||
console.log("Reviewing Payload:", payload);
|
||||
console.log('review payload',payload)
|
||||
navigation.navigate("GroupReview", { form: payload });
|
||||
} else {
|
||||
ToastAndroid.show('Please fill out all required fields correctly.', ToastAndroid.SHORT);
|
||||
setErrors('');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
|
||||
<View style={styles.titleContainer}><Text style={styles.title}>Create New Group</Text></View>
|
||||
|
||||
<CustomInput label="Group Name" placeholder="e.g., 'Family Savings'" value={form.groupName} onChangeText={(val) => handleChange("groupName", val)} icon="people" error={errors.groupName} />
|
||||
<CustomInput label="Description" placeholder="e.g., 'Monthly fund for family needs'" value={form.description} onChangeText={(val) => handleChange("description", val)} multiline icon="document-text" error={errors.description} />
|
||||
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title}>Create New Group</Text>
|
||||
</View>
|
||||
<CustomInput
|
||||
label="Group Name"
|
||||
placeholder="e.g., 'Family Savings'"
|
||||
value={form.groupName}
|
||||
onChangeText={(val) => handleChange("groupName", val)}
|
||||
icon="people"
|
||||
error={errors.groupName}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Description"
|
||||
placeholder="e.g., 'Monthly fund for family needs'"
|
||||
value={form.description}
|
||||
onChangeText={(val) => handleChange("description", val)}
|
||||
multiline
|
||||
icon="document-text"
|
||||
error={errors.description}
|
||||
/>
|
||||
<Section title="Group Settings">
|
||||
<SettingRow label="Visibility">
|
||||
<ToggleButtons
|
||||
@@ -109,27 +148,70 @@ export default function GroupCreationForm() {
|
||||
/>
|
||||
</SettingRow>
|
||||
</Section>
|
||||
|
||||
<Section title="Participant Rules">
|
||||
<View style={styles.participantsRow}>
|
||||
<View style={styles.participantInput}><CustomInput label="Min" placeholder="e.g., 5" value={form.minParticipants} onChangeText={(val) => handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /></View>
|
||||
<View style={styles.participantInput}><CustomInput label="Max" placeholder="e.g., 10" value={form.maxParticipants} onChangeText={(val) => handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /></View>
|
||||
<View style={styles.participantInput}>
|
||||
<CustomInput
|
||||
label="Min"
|
||||
placeholder="e.g., 5"
|
||||
value={form.minParticipants}
|
||||
onChangeText={(val) => handleChange("minParticipants", val)}
|
||||
keyboardType="numeric"
|
||||
icon="person-add"
|
||||
error={errors.minParticipants}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.participantInput}>
|
||||
<CustomInput
|
||||
label="Max"
|
||||
placeholder="e.g., 10"
|
||||
value={form.maxParticipants}
|
||||
onChangeText={(val) => handleChange("maxParticipants", val)}
|
||||
keyboardType="numeric"
|
||||
icon="people-circle"
|
||||
error={errors.maxParticipants}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Section>
|
||||
|
||||
<Section title="Financial Details">
|
||||
<CustomInput label="Contribution Amount (INR)" placeholder="e.g., 5000" value={form.contributionAmount} onChangeText={(val) => handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} />
|
||||
<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)}
|
||||
selectedValue={
|
||||
form.cycleType === "CUSTOM" && form.customCycleDays === "1"
|
||||
? "DAILY"
|
||||
: form.cycleType === "CUSTOM" && form.customCycleDays === "7"
|
||||
? "WEEKLY"
|
||||
: form.cycleType
|
||||
}
|
||||
onSelect={handleCycleChange}
|
||||
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} />)}
|
||||
{form.cycleType === "CUSTOM" &&
|
||||
form.customCycleDays !== "1" &&
|
||||
form.customCycleDays !== "7" && (
|
||||
<CustomInput
|
||||
label="Custom Cycle (Days)"
|
||||
placeholder="Enter number of days"
|
||||
value={form.customCycleDays}
|
||||
onChangeText={(val) => handleChange("customCycleDays", val)}
|
||||
keyboardType="numeric"
|
||||
icon="calendar"
|
||||
error={errors.customCycleDays}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<Section title="Late Fee Policy">
|
||||
<SettingRow label="Fee Mode">
|
||||
<ToggleButtons
|
||||
@@ -138,9 +220,16 @@ export default function GroupCreationForm() {
|
||||
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} />
|
||||
<CustomInput
|
||||
label="Late Fee Value (INR)"
|
||||
placeholder="e.g., 50"
|
||||
value={form.lateFeeValue}
|
||||
onChangeText={(val) => handleChange("lateFeeValue", val)}
|
||||
keyboardType="numeric"
|
||||
icon="alert-circle"
|
||||
error={errors.lateFeeValue}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<CustomButton title="Review Group" onPress={handleReview} style={{ marginTop: 20 }} />
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
@@ -148,28 +237,36 @@ export default function GroupCreationForm() {
|
||||
}
|
||||
|
||||
// --- Helper Components for a cleaner layout ---
|
||||
|
||||
const Section: React.FC<{ title: string, children: React.ReactNode }> = ({ title, children }) => (
|
||||
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 }) => (
|
||||
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' }]}>
|
||||
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 }]}
|
||||
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()}
|
||||
@@ -183,58 +280,29 @@ const styles = StyleSheet.create({
|
||||
container: { flexGrow: 1, padding: 16, backgroundColor: "#f5f6fa" },
|
||||
titleContainer: { marginBottom: 20, paddingHorizontal: 4 },
|
||||
title: { fontSize: 28, fontWeight: "bold", color: "#1F2937" },
|
||||
|
||||
section: {
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
elevation: 1,
|
||||
shadowColor: '#4A5568',
|
||||
shadowColor: "#4A5568",
|
||||
shadowOpacity: 0.06,
|
||||
shadowRadius: 10,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
fontWeight: "600",
|
||||
color: "#374151",
|
||||
marginBottom: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F3F4F6',
|
||||
borderBottomColor: "#F3F4F6",
|
||||
paddingBottom: 10,
|
||||
},
|
||||
|
||||
avatarContainer: {
|
||||
position: "relative",
|
||||
marginBottom: 16,
|
||||
},
|
||||
avatar: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
borderWidth: 4,
|
||||
borderColor: "#e2e8f0",
|
||||
},
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: colors.pastelBlue,
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderWidth: 3,
|
||||
borderColor: "#fff",
|
||||
elevation: 2,
|
||||
},
|
||||
settingRow: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
|
||||
label: { fontSize: 14, fontWeight: "600", marginBottom: 8, color: "#4B5563" },
|
||||
|
||||
toggleContainer: { flexDirection: "row", gap: 10 },
|
||||
toggleButton: {
|
||||
flex: 1,
|
||||
@@ -243,12 +311,11 @@ const styles = StyleSheet.create({
|
||||
borderColor: "#D1D5DB",
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F9FAFB"
|
||||
backgroundColor: "#F9FAFB",
|
||||
},
|
||||
selectedButton: { backgroundColor: colors.pastelGreen, borderColor: "#62b59a" },
|
||||
toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: 'capitalize' },
|
||||
toggleButtonText: { color: "#374151", fontWeight: "600", textTransform: "capitalize" },
|
||||
selectedButtonText: { color: "#1F2937" },
|
||||
|
||||
participantsRow: { flexDirection: "row", gap: 15 },
|
||||
participantInput: { flex: 1 },
|
||||
});
|
||||
|
||||
+96
-37
@@ -6,23 +6,47 @@ import { apiCall } from "../utils/ApiHelper";
|
||||
import { GROUP_CREATION_URL } from "../utils/ApiUrls";
|
||||
import colors from "../components/colors";
|
||||
|
||||
// --- Helper: Get Cycle Label ---
|
||||
const getCycleLabel = (cycleType: string, customCycleDays: string | number) => {
|
||||
if (cycleType === "CUSTOM") {
|
||||
if (String(customCycleDays) === "1") return "Daily";
|
||||
if (String(customCycleDays) === "7") return "Weekly";
|
||||
return `Custom (${customCycleDays} days)`;
|
||||
}
|
||||
return cycleType.charAt(0).toUpperCase() + cycleType.slice(1).toLowerCase().replace("_", " ");
|
||||
};
|
||||
|
||||
// --- Themed Dialog Component ---
|
||||
const ThemedDialog = ({ visible, isSuccess, message, onClose, onNavigate }: { visible: boolean; isSuccess: boolean; message: string; onClose: () => void; onNavigate: () => void; }) => {
|
||||
const ThemedDialog = ({
|
||||
visible,
|
||||
isSuccess,
|
||||
message,
|
||||
onClose,
|
||||
onNavigate,
|
||||
}: {
|
||||
visible: boolean;
|
||||
isSuccess: boolean;
|
||||
message: string;
|
||||
onClose: () => void;
|
||||
onNavigate: () => void;
|
||||
}) => {
|
||||
if (!visible) return null;
|
||||
|
||||
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
|
||||
? {
|
||||
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,
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal animationType="fade" transparent={true} visible={visible}>
|
||||
@@ -49,13 +73,16 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
|
||||
const handleNavigateHome = () => {
|
||||
setModalVisible(false);
|
||||
navigation.reset({ index: 0, routes: [{ name: 'Home' }] });
|
||||
navigation.reset({ index: 0, routes: [{ name: "Home" }] });
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const res = await apiCall(GROUP_CREATION_URL, "POST", form) as { statusCode?: number, message?: string };
|
||||
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.");
|
||||
@@ -71,10 +98,16 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
}
|
||||
};
|
||||
|
||||
const TimelineSection: React.FC<{ icon: any; title: string; children: React.ReactNode }> = ({ icon, title, children }) => (
|
||||
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.timelineIcon}>
|
||||
<Ionicons name={icon} size={22} color="#fff" />
|
||||
</View>
|
||||
<View style={styles.timelineLine} />
|
||||
</View>
|
||||
<View style={styles.content}>
|
||||
@@ -121,17 +154,21 @@ export default function GroupReview({ route, navigation }: any) {
|
||||
|
||||
<TimelineSection icon="wallet-outline" title="Financial Details">
|
||||
{renderRow("Contribution", `₹${form.contributionAmount}`)}
|
||||
{renderRow("Cycle", form.cycleType)}
|
||||
{form.cycleType === "CUSTOM" && renderRow("Cycle Days", `${form.customCycleDays} days`)}
|
||||
{renderRow("Cycle", getCycleLabel(form.cycleType, form.customCycleDays))}
|
||||
{/* Show days only if neither Daily nor Weekly */}
|
||||
{form.cycleType === "CUSTOM" && !["1", "7"].includes(String(form.customCycleDays))
|
||||
&& 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" /> : (
|
||||
{isLoading ? (
|
||||
<ActivityIndicator color="#333" />
|
||||
) : (
|
||||
<>
|
||||
<Ionicons name="rocket-outline" size={22} color="#333" />
|
||||
<Text style={styles.btnText}>Create Group</Text>
|
||||
@@ -156,24 +193,46 @@ const styles = StyleSheet.create({
|
||||
header: { marginBottom: 30 },
|
||||
title: { fontSize: 28, fontWeight: "bold", color: "#333" },
|
||||
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 },
|
||||
timelineLine: { flex: 1, width: 2, backgroundColor: '#e0e0e0' },
|
||||
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,
|
||||
},
|
||||
timelineLine: { flex: 1, width: 2, backgroundColor: "#e0e0e0" },
|
||||
content: { flex: 1, paddingLeft: 10, paddingBottom: 20 },
|
||||
sectionTitle: { fontSize: 18, fontWeight: 'bold', color: '#444', marginBottom: 10 },
|
||||
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: 12, 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", 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, marginTop: 20 },
|
||||
descriptionText: { fontSize: 15, color: "#333", marginTop: 4, lineHeight: 22 },
|
||||
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: 10 },
|
||||
dialogMessage: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 25 },
|
||||
dialogButton: { backgroundColor: '#f0f0f0', paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
|
||||
dialogButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 },
|
||||
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: 10 },
|
||||
dialogMessage: { fontSize: 16, color: "#666", textAlign: "center", marginBottom: 25 },
|
||||
dialogButton: { backgroundColor: "#f0f0f0", paddingVertical: 12, paddingHorizontal: 40, borderRadius: 10 },
|
||||
dialogButtonText: { color: "#333", fontWeight: "bold", fontSize: 16 },
|
||||
});
|
||||
|
||||
@@ -26,6 +26,7 @@ import { BASE_URL, GET_JOINED_GROUP_URL, JOIN_GROUP_URL, PUBLIC_GROUPS_URL, PUT_
|
||||
import colors from "../components/colors";
|
||||
import { ApiResponse } from "./home/UserProfileStatus";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import CustomAlert from "../components/CostomAlart";
|
||||
const { width } = Dimensions.get('window');
|
||||
|
||||
// --- Types ---
|
||||
@@ -113,6 +114,13 @@ export default function GroupScreen() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [role, setRole] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||||
const [alertInfo, setAlertInfo] = useState({
|
||||
visible: false,
|
||||
title: '',
|
||||
message: '',
|
||||
buttons: [] as { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
|
||||
alertType: 'info' as 'info' | 'success' | 'error',
|
||||
});
|
||||
|
||||
const fetchGroups = async () => {
|
||||
if (loading) return;
|
||||
@@ -177,7 +185,15 @@ export default function GroupScreen() {
|
||||
console.log("JOIN_GROUP_URL response:", res);
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
ToastAndroid.show('You requested to join the group.', ToastAndroid.SHORT);
|
||||
setAlertInfo({
|
||||
visible: true,
|
||||
title: 'Success',
|
||||
message: 'Your request to join the group has been sent.',
|
||||
buttons: [
|
||||
{ text: 'OK', onPress: () => setAlertInfo({ ...alertInfo, visible: false }), buttonColor: "#28a745", textColor: "#fff" }
|
||||
],
|
||||
alertType: 'success',
|
||||
});
|
||||
} else {
|
||||
ToastAndroid.show(res.message || "Failed to join group.", ToastAndroid.SHORT);
|
||||
}
|
||||
@@ -327,6 +343,15 @@ export default function GroupScreen() {
|
||||
{role === "ORGANIZER" && (
|
||||
<FAB style={styles.fab} icon={() => <MaterialIcons name="group-add" size={24} color="#333" />} onPress={() => navigation.navigate('GroupCreation')} />
|
||||
)}
|
||||
<CustomAlert
|
||||
visible={alertInfo.visible}
|
||||
title={alertInfo.title}
|
||||
message={alertInfo.message}
|
||||
buttons={alertInfo.buttons}
|
||||
alertType={alertInfo.alertType}
|
||||
|
||||
/>
|
||||
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -70,6 +70,7 @@ export default function LoginScreen() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(LOGIN_URL, { params: { mobile } });
|
||||
console.log("login res -",res)
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate('OtpVarify', { mobile });
|
||||
} else {
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
UIManager,
|
||||
Platform,
|
||||
Alert,
|
||||
ToastAndroid,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from "../../components/colors";
|
||||
|
||||
@@ -637,14 +637,31 @@ const Profile = () => {
|
||||
multiline
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
error=""
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user?.gender ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, gender: text })}
|
||||
icon="male-female"
|
||||
/>
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={styles.inputLabel}>Gender</Text>
|
||||
<View style={styles.genderRow}>
|
||||
{["Male", "Female", "Other"].map((option) => (
|
||||
<TouchableOpacity
|
||||
key={option}
|
||||
style={[
|
||||
styles.genderButton,
|
||||
user?.gender === option && styles.genderButtonActive,
|
||||
]}
|
||||
onPress={() => setUser({ ...user, gender: option })}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.genderButtonText,
|
||||
user?.gender === option && styles.genderButtonTextActive,
|
||||
]}
|
||||
>
|
||||
{option}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
<View style={styles.editButtons}>
|
||||
<CustomButton
|
||||
@@ -869,6 +886,35 @@ const styles = StyleSheet.create({
|
||||
buttonTextOutline: {
|
||||
color: "#6366f1",
|
||||
},
|
||||
genderRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 8,
|
||||
marginBottom: 16,
|
||||
gap: 12,
|
||||
},
|
||||
genderButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: "#f1f5f9",
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderColor: "#e2e8f0",
|
||||
},
|
||||
genderButtonActive: {
|
||||
backgroundColor: colors.pastelBlue,
|
||||
},
|
||||
genderButtonText: {
|
||||
color: "#64748b",
|
||||
fontWeight: "500",
|
||||
fontSize: 16,
|
||||
},
|
||||
genderButtonTextActive: {
|
||||
color: colors.black,
|
||||
fontWeight: "700"
|
||||
},
|
||||
|
||||
buttonIcon: {
|
||||
marginRight: 8,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user