diff --git a/src/components/CostomAlart.tsx b/src/components/CostomAlart.tsx index ec27f18..61c4446 100644 --- a/src/components/CostomAlart.tsx +++ b/src/components/CostomAlart.tsx @@ -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 = ({ } }; - 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 = ({ } }; - 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 = ({ - + {/* smaller icon for vertical compression */} {title} {message} @@ -119,10 +121,17 @@ const CustomAlert: React.FC = ({ {buttons.map((button, index) => ( - + {button.text} @@ -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: { diff --git a/src/components/UserRequested.tsx b/src/components/UserRequested.tsx index 2b4999a..edc94fd 100644 --- a/src/components/UserRequested.tsx +++ b/src/components/UserRequested.tsx @@ -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 = ({ 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 ( - {/* Top row: User info + Status */} + + + {initials} + + - {item.groupName} - - {" "} + {" "} {formatDate(item.requestDate)} - - {/* Status Badge */} - + {label} - {/* Group Info */} - Group Created By :{" "} - - {item.createdBy} - + + {" "}Group Created By:{" "} + {item.createdBy} {item.reason ? ( - Reason: {item.reason} + {item.reason} ) : null} @@ -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 }, }); diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index 01ab69c..b9bdcbb 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -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(); @@ -121,3 +123,4 @@ export default function AppNavigator() { ); } +; \ No newline at end of file diff --git a/src/screens/GroupCreation.tsx b/src/screens/GroupCreation.tsx index 8461b49..7978c68 100644 --- a/src/screens/GroupCreation.tsx +++ b/src/screens/GroupCreation.tsx @@ -36,7 +36,7 @@ export default function GroupCreationForm() { }); const [errors, setErrors] = useState({}); - const [selectedImage, setSelectedImage] = useState() + const [selectedImage, setSelectedImage] = useState(); 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 ( - Create New Group - - handleChange("groupName", val)} icon="people" error={errors.groupName} /> - handleChange("description", val)} multiline icon="document-text" error={errors.description} /> - + + Create New Group + + handleChange("groupName", val)} + icon="people" + error={errors.groupName} + /> + handleChange("description", val)} + multiline + icon="document-text" + error={errors.description} + />
-
- handleChange("minParticipants", val)} keyboardType="numeric" icon="person-add" error={errors.minParticipants} /> - handleChange("maxParticipants", val)} keyboardType="numeric" icon="people-circle" error={errors.maxParticipants} /> + + handleChange("minParticipants", val)} + keyboardType="numeric" + icon="person-add" + error={errors.minParticipants} + /> + + + handleChange("maxParticipants", val)} + keyboardType="numeric" + icon="people-circle" + error={errors.maxParticipants} + /> +
-
- handleChange("contributionAmount", val)} keyboardType="numeric" icon="cash" error={errors.contributionAmount} /> + handleChange("contributionAmount", val)} + keyboardType="numeric" + icon="cash" + error={errors.contributionAmount} + /> handleChange("cycleType", val)} + selectedValue={ + form.cycleType === "CUSTOM" && form.customCycleDays === "1" + ? "DAILY" + : form.cycleType === "CUSTOM" && form.customCycleDays === "7" + ? "WEEKLY" + : form.cycleType + } + onSelect={handleCycleChange} isWrap={true} /> - {form.cycleType === "CUSTOM" && ( handleChange("customCycleDays", val)} keyboardType="numeric" icon="calendar" error={errors.customCycleDays} />)} + {form.cycleType === "CUSTOM" && + form.customCycleDays !== "1" && + form.customCycleDays !== "7" && ( + handleChange("customCycleDays", val)} + keyboardType="numeric" + icon="calendar" + error={errors.customCycleDays} + /> + )}
-
handleChange("lateFeeMode", val)} /> - handleChange("lateFeeValue", val)} keyboardType="numeric" icon="alert-circle" error={errors.lateFeeValue} /> + handleChange("lateFeeValue", val)} + keyboardType="numeric" + icon="alert-circle" + error={errors.lateFeeValue} + />
- @@ -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 }) => ( {title} {children} ); -const SettingRow: React.FC<{ label: string, children: React.ReactNode }> = ({ label, children }) => ( +const SettingRow: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => ( {label} {children} ); -const ToggleButtons: React.FC<{ options: string[], selectedValue: string, onSelect: (value: string) => void, isWrap?: boolean }> = ({ options, selectedValue, onSelect, isWrap = false }) => ( - +const ToggleButtons: React.FC<{ + options: string[]; + selectedValue: string; + onSelect: (value: string) => void; + isWrap?: boolean; +}> = ({ options, selectedValue, onSelect, isWrap = false }) => ( + {options.map((option) => ( 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 }, + ]} > {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 }, }); diff --git a/src/screens/GroupReview.tsx b/src/screens/GroupReview.tsx index 30d0bd2..b9000b1 100644 --- a/src/screens/GroupReview.tsx +++ b/src/screens/GroupReview.tsx @@ -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 ( @@ -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, + }) => ( - + + + @@ -121,17 +154,21 @@ export default function GroupReview({ route, navigation }: any) { {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`)} {renderRow("Fee Mode", form.lateFeeMode)} {renderRow("Fee Value", `₹${form.lateFeeValue}`)} - + - {isLoading ? : ( + {isLoading ? ( + + ) : ( <> Create Group @@ -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 }, }); diff --git a/src/screens/GroupScreen.tsx b/src/screens/GroupScreen.tsx index 32d48de..70bfb14 100644 --- a/src/screens/GroupScreen.tsx +++ b/src/screens/GroupScreen.tsx @@ -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(null); const [role, setRole] = useState(null); const [refreshing, setRefreshing] = useState(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" && ( } onPress={() => navigation.navigate('GroupCreation')} /> )} + + ); } diff --git a/src/screens/LoginScreen.tsx b/src/screens/LoginScreen.tsx index 57a7d00..34160a1 100644 --- a/src/screens/LoginScreen.tsx +++ b/src/screens/LoginScreen.tsx @@ -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 { diff --git a/src/screens/home/GroupList.tsx b/src/screens/home/GroupList.tsx index b38c208..a23fb7d 100644 --- a/src/screens/home/GroupList.tsx +++ b/src/screens/home/GroupList.tsx @@ -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"; diff --git a/src/screens/profile/Profile.tsx b/src/screens/profile/Profile.tsx index 1a20da1..42e08f9 100644 --- a/src/screens/profile/Profile.tsx +++ b/src/screens/profile/Profile.tsx @@ -637,14 +637,31 @@ const Profile = () => { multiline /> - setUser({ ...user, gender: text })} - icon="male-female" - /> + + Gender + + {["Male", "Female", "Other"].map((option) => ( + setUser({ ...user, gender: option })} + > + + {option} + + + ))} + + +