Merge branch 'feature_profile' of https://git.zeptic.in/abintoppo_lincpay/CircleCollect into feature_pending
This commit is contained in:
Jaanu423
@@ -28,10 +28,6 @@
|
||||
<category android:name="android.intent.category.DEFAULT" />
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
<data android:scheme="myapp" android:host="invite"/>
|
||||
|
||||
<data android:scheme="http"
|
||||
android:host="192.168.1.19"
|
||||
android:pathPrefix="/invite" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
|
||||
Generated
+24
@@ -8,6 +8,7 @@
|
||||
"name": "CircleCollect",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@react-native-clipboard/clipboard": "^1.16.3",
|
||||
"@react-native-community/slider": "^5.0.1",
|
||||
"@react-native-picker/picker": "^2.11.2",
|
||||
"@react-native-vector-icons/ionicons": "^12.3.0",
|
||||
@@ -2740,6 +2741,29 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-clipboard/clipboard": {
|
||||
"version": "1.16.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.16.3.tgz",
|
||||
"integrity": "sha512-cMIcvoZKIrShzJHEaHbTAp458R9WOv0fB6UyC7Ek4Qk561Ow/DrzmmJmH/rAZg21Z6ixJ4YSdFDC14crqIBmCQ==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"example"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.9.0",
|
||||
"react-native": ">= 0.61.5",
|
||||
"react-native-macos": ">= 0.61.0",
|
||||
"react-native-windows": ">= 0.61.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-native-macos": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native-windows": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-community/cli": {
|
||||
"version": "20.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-20.0.0.tgz",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-clipboard/clipboard": "^1.16.3",
|
||||
"@react-native-community/slider": "^5.0.1",
|
||||
"@react-native-picker/picker": "^2.11.2",
|
||||
"@react-native-vector-icons/ionicons": "^12.3.0",
|
||||
|
||||
+105810
File diff suppressed because it is too large
Load Diff
@@ -25,6 +25,7 @@ interface JoinedGroup {
|
||||
|
||||
interface JoinedGroupCardProps {
|
||||
item: JoinedGroup | any;
|
||||
onViewPress: () => void; // Function prop for the View button
|
||||
}
|
||||
|
||||
// Helper function to format dates
|
||||
@@ -60,7 +61,7 @@ const getStatusStyle = (status: JoinedGroup['status']) => {
|
||||
}
|
||||
};
|
||||
|
||||
export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
|
||||
export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item, onViewPress }) => {
|
||||
const progress = (item.currentParticipants / item.maxParticipants) * 100;
|
||||
const statusStyle = getStatusStyle(item.status);
|
||||
const navigation = useNavigation<any>()
|
||||
@@ -99,11 +100,14 @@ export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Dates */}
|
||||
{/* Footer with Dates and View Button */}
|
||||
<View style={styles.footer}>
|
||||
<Text style={styles.dateText}>
|
||||
{formatDate(item.startDate)} - {formatDate(item.endDate)}
|
||||
</Text>
|
||||
<TouchableOpacity style={styles.viewButton} onPress={onViewPress}>
|
||||
<Text style={styles.viewButtonText}>View</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@@ -200,12 +204,29 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 4,
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: 8,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#F3F4F6',
|
||||
paddingTop: 16,
|
||||
},
|
||||
dateText: {
|
||||
fontSize: 14,
|
||||
color: '#4B5563',
|
||||
fontWeight: '500',
|
||||
},
|
||||
// --- NEW STYLES for the View Button ---
|
||||
viewButton: {
|
||||
backgroundColor: colors.pastelOrange,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
},
|
||||
viewButtonText: {
|
||||
color: '#000000ff',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -50,7 +50,7 @@ export const MyGroupCard: React.FC<Props> = ({ item, onManage }) => {
|
||||
{item.groupName}
|
||||
</Text>
|
||||
<View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
|
||||
<Text style={styles.statusBadgeText}>{item.status === "ACTIVE" ? "Active" : "Not Active"}</Text>
|
||||
<Text style={styles.statusBadgeText}>{item.status}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
@@ -15,6 +15,9 @@ import Transaction from "../screens/profile/Transaction";
|
||||
import GroupDetails from "../screens/home/user-home/GroupDetails";
|
||||
import EditGroupScreen from "../screens/management/EditGroupScreen";
|
||||
import EditBankDetails from "../screens/profile/EditBankDetails";
|
||||
import ManageJoinedGroup from "../screens/management/ManageJoinedGroup";
|
||||
import InviteScreen from "../screens/InviteScreen";
|
||||
import ManagementTabNavigation from "../screens/management/ManagementTabNavigation";
|
||||
import TransactionsList from "../screens/transaction/TransactionList";
|
||||
|
||||
export type RootStackParamList = {
|
||||
@@ -33,23 +36,39 @@ export type RootStackParamList = {
|
||||
YourContacts: undefined;
|
||||
Transaction: undefined;
|
||||
EditBankDetails: { currentBankName: string | null; currentAccountNumber: string | null; currentBranchCode: string | null };
|
||||
TransactionList:undefined
|
||||
ManageJoinedGroup: { groupId: string | number };
|
||||
Invite: { groupId: string | number; code: string | number };
|
||||
ManagementTabs:{ groupId: string | number;}
|
||||
};
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>();
|
||||
|
||||
export default function AppNavigator() {
|
||||
const linking = {
|
||||
prefixes: [
|
||||
"myapp://", // A custom scheme for internal or test links.
|
||||
"https://192.168.1.19" // Your production domain for verified App Links.
|
||||
const linking = {
|
||||
prefixes: [
|
||||
"myapp://", // Your custom scheme
|
||||
"https://your-production-domain.com" // Your website for Universal Links/App Links
|
||||
],
|
||||
config: {
|
||||
screens: {
|
||||
Profile: "invite",
|
||||
config: {
|
||||
screens: {
|
||||
// Define the route for the InviteScreen
|
||||
Invite: {
|
||||
// This path matches the part after the "://" and before the "?"
|
||||
path: "invite",
|
||||
|
||||
// This block tells React Navigation how to handle the query parameters
|
||||
parse: {
|
||||
groupId: (groupId: string | number) => `${groupId}`,
|
||||
code: (code: string | number) => `${code}`,
|
||||
},
|
||||
},
|
||||
|
||||
// Other screens in your navigator can be defined here
|
||||
// e.g., GroupDetails: "group/:id"
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<NavigationContainer linking={linking}>
|
||||
@@ -68,6 +87,9 @@ export default function AppNavigator() {
|
||||
<Stack.Screen name="GroupDetails" component={GroupDetails} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="EditGroup" component={EditGroupScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="EditBankDetails" component={EditBankDetails} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="ManageJoinedGroup" component={ManageJoinedGroup} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Invite" component={InviteScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="ManagementTabs" component={ManagementTabNavigation} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="TransactionList" component={TransactionsList} options={{ headerShown: false }} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { BottomTabNavigationProp, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { View, Text, StyleSheet, Platform } from "react-native";
|
||||
import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
|
||||
import GroupScreen from "../screens/GroupScreen";
|
||||
@@ -9,7 +9,6 @@ import colors from "../components/colors";
|
||||
import Setting from "../screens/setting/Setting";
|
||||
import ManagementScreen from "../screens/management/ManagementScreen";
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
const TAB_CONFIG = {
|
||||
activeColor: "#000",
|
||||
@@ -29,26 +28,24 @@ const activeTabColors: { [key: string]: string } = {
|
||||
|
||||
// Icon/Text colors on active tabs
|
||||
const activeIconColors: { [key: string]: string } = {
|
||||
Home: "#333",
|
||||
Profile: "#333",
|
||||
Group: "#333",
|
||||
Management: "#333",
|
||||
Home: "#333",
|
||||
Profile: "#333",
|
||||
Group: "#333",
|
||||
Management: "#333",
|
||||
}
|
||||
|
||||
|
||||
function HomeScreen() {
|
||||
return (
|
||||
<View style={styles.screen}><Text style={styles.text}>🏠 Home</Text></View>
|
||||
);
|
||||
}
|
||||
export type RootTabParamList = {
|
||||
Home: undefined;
|
||||
Profile: undefined;
|
||||
Group: undefined;
|
||||
Management: { actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests" };
|
||||
};
|
||||
// Define the navigation prop type for screens within the tab navigator
|
||||
export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
|
||||
const Tab = createBottomTabNavigator<RootTabParamList>();
|
||||
|
||||
function SettingsScreen() {
|
||||
return (
|
||||
<View style={styles.screen}><Text style={styles.text}>⚙️ Settings</Text></View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BottomTabs() {
|
||||
const BottomTabs: React.FC = () => {
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
@@ -62,7 +59,7 @@ export default function BottomTabs() {
|
||||
|
||||
tabBarIcon: ({ focused }) => {
|
||||
let iconName: IoniconsIconName = "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";
|
||||
@@ -151,3 +148,4 @@ const styles = StyleSheet.create({
|
||||
shadowRadius: 5,
|
||||
},
|
||||
});
|
||||
export default BottomTabs
|
||||
@@ -0,0 +1,42 @@
|
||||
// navigation/types.ts
|
||||
|
||||
import { NavigatorScreenParams } from '@react-navigation/native';
|
||||
import { StackScreenProps } from '@react-navigation/stack';
|
||||
|
||||
// Type for the parameters passed to each screen in the Bottom Tab Navigator
|
||||
export type RootTabParamList = {
|
||||
Home: undefined;
|
||||
Profile: undefined;
|
||||
Group: undefined;
|
||||
Management: { actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests" };
|
||||
};
|
||||
|
||||
// Type for the parameters passed to each screen in the main Stack Navigator
|
||||
|
||||
export type RootStackParamList = {
|
||||
Splash: undefined;
|
||||
Login: undefined;
|
||||
OtpVarify: { mobile: string };
|
||||
Home: undefined;
|
||||
HomeTabs: undefined;
|
||||
OrganizerRegister: undefined;
|
||||
Profile: undefined;
|
||||
GroupCreation: undefined;
|
||||
GroupReview: undefined;
|
||||
EditGroup: { groupId: string | number };
|
||||
GroupDetails: { item:object };
|
||||
BecomeOrg: undefined;
|
||||
YourContacts: undefined;
|
||||
Transaction: undefined;
|
||||
EditBankDetails: { currentBankName: string | null; currentAccountNumber: string | null; currentBranchCode: string | null };
|
||||
ManageJoinedGroup: { groupId: string | number };
|
||||
Invite: { groupId: string | number; code: string | number };
|
||||
ManagementTabs:any
|
||||
};
|
||||
|
||||
|
||||
// Helper type for screens within the main stack navigator
|
||||
export type AppStackScreenProps<T extends keyof RootStackParamList> = StackScreenProps<
|
||||
RootStackParamList,
|
||||
T
|
||||
>;
|
||||
@@ -39,9 +39,9 @@ export default function GroupCreationForm() {
|
||||
}
|
||||
};
|
||||
|
||||
const cycleTypes = ["CUSTOM", "MONTHLY", "QUARTERLY", "YEARLY"];
|
||||
const cycleTypes = ["CUSTOM", "MONTHLY", "QUARTERLY", "YEARLY", "HALF_YEARLY"];
|
||||
const distributionTypes = ["SEQUENTIAL", "RANDOM"];
|
||||
const lateFeeModes = ["DAILY", "FIXED"];
|
||||
const lateFeeModes = ["DAILY", "MONTHLY"];
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: any = {};
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
||||
import React, { useState, useEffect, useCallback, FC } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator'; // Adjust path
|
||||
import { apiCall } from '../utils/ApiHelper'; // Adjust path
|
||||
import AppView from '../components/AppView'; // Adjust path
|
||||
import colors from '../components/colors'; // Adjust path
|
||||
|
||||
// --- Type Definitions ---
|
||||
interface Participant {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string | null;
|
||||
mobile: string;
|
||||
role: 'ORGANIZER' | 'USER';
|
||||
}
|
||||
|
||||
interface GroupDetails {
|
||||
id: string;
|
||||
groupName: string;
|
||||
description: string;
|
||||
contributionAmount: number;
|
||||
maxParticipants: number;
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
status: 'PENDING' | 'ACTIVE' | 'COMPLETED' | 'APPROVED';
|
||||
organizerFirstName: string;
|
||||
organizerLastName: string | null;
|
||||
totalParticipants: number;
|
||||
participants: Participant[];
|
||||
}
|
||||
|
||||
type InviteScreenProps = NativeStackScreenProps<RootStackParamList, 'Invite'>; // Assuming 'Invite' is in your stack
|
||||
|
||||
// --- Main Screen Component ---
|
||||
const InviteScreen: FC<InviteScreenProps> = ({ route }) => {
|
||||
const { groupId,code} = route.params;
|
||||
|
||||
const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [joining, setJoining] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchGroupDetails = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string };
|
||||
if (response.status === 'success' && response.data) {
|
||||
setGroupDetails(response.data);
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to fetch group invitation details.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [groupId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroupDetails();
|
||||
}, [fetchGroupDetails]);
|
||||
|
||||
const handleJoinGroup = async () => {
|
||||
if (!groupDetails) return;
|
||||
|
||||
setJoining(true);
|
||||
try {
|
||||
// Replace with your actual API call to join the group
|
||||
// For now, it just shows an alert.
|
||||
await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/groups/join/invite/${code}`, 'POST');
|
||||
Alert.alert('Success!', `You have requested to join "${groupDetails.groupName}".`);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Join Error', e.message || 'An unexpected error occurred.');
|
||||
} finally {
|
||||
setJoining(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <View style={styles.centered}><ActivityIndicator size="large" color={colors.primary} /></View>;
|
||||
if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
|
||||
if (!groupDetails) return null;
|
||||
|
||||
const organizerName = `${groupDetails.organizerFirstName} ${groupDetails.organizerLastName || ''}`.trim();
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
<ScrollView contentContainerStyle={styles.contentContainer}>
|
||||
<Text style={styles.headerTitle}>You're Invited!</Text>
|
||||
<Text style={styles.headerSubtitle}>Join the group <Text style={{ fontWeight: 'bold' }}>{groupDetails.groupName}</Text></Text>
|
||||
|
||||
{/* Group Info Card */}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Group Details </Text>
|
||||
<InfoRow label="Organizer" value={organizerName} />
|
||||
<InfoRow label="Contribution" value={`₹${groupDetails.contributionAmount.toLocaleString('en-IN')}`} />
|
||||
<InfoRow label="Payment Cycle" value={groupDetails.cycleType} />
|
||||
<InfoRow label="Status" value={groupDetails.status} />
|
||||
<InfoRow label="Code" value={code} />
|
||||
</View>
|
||||
|
||||
{/* Participants Card */}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants} / {groupDetails.maxParticipants})</Text>
|
||||
{groupDetails.participants.length > 0 ? (
|
||||
groupDetails.participants.map(p => (
|
||||
<View key={p.id} style={styles.participantRow}>
|
||||
<Text style={styles.participantName}>{`${p.firstName} ${p.lastName || ''}`.trim()}</Text>
|
||||
{p.role === 'ORGANIZER' && <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>}
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.noParticipantsText}>Be the first to join!</Text>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Floating Join Button */}
|
||||
<View style={styles.floatingButtonContainer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.joinButton, groupDetails.status !== 'PENDING' && groupDetails.status !== 'APPROVED' ? styles.disabledButton : {}]}
|
||||
onPress={handleJoinGroup}
|
||||
disabled={joining || (groupDetails.status !== 'PENDING' && groupDetails.status !== 'APPROVED')}
|
||||
>
|
||||
{joining ? (
|
||||
<ActivityIndicator color="#FFFFFF" />
|
||||
) : (
|
||||
<Text style={styles.joinButtonText}>
|
||||
{groupDetails.status === 'PENDING' || groupDetails.status === 'APPROVED' ? 'Join Group' : `Group is ${groupDetails.status}`}
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
// Helper component for displaying rows
|
||||
const InfoRow = ({ label, value }: { label: string; value: string | number }) => (
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
<Text style={styles.infoValue}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
centered: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F3F4F6' },
|
||||
errorText: { color: '#EF4444', fontSize: 16, textAlign: 'center', padding: 20 },
|
||||
contentContainer: { padding: 16, paddingBottom: 100 }, // Add padding to avoid overlap with button
|
||||
|
||||
headerTitle: { fontSize: 32, fontWeight: 'bold', color: '#111827', textAlign: 'center' },
|
||||
headerSubtitle: { fontSize: 18, color: '#4B5563', textAlign: 'center', marginBottom: 24, marginTop: 4 },
|
||||
|
||||
card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10 },
|
||||
cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937', marginBottom: 12, borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10 },
|
||||
|
||||
infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
|
||||
infoLabel: { fontSize: 16, color: '#6B7280' },
|
||||
infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
|
||||
|
||||
participantRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 10 },
|
||||
participantName: { fontSize: 16, color: '#1F2937' },
|
||||
organizerBadge: { backgroundColor: '#FEF3C7', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 12 },
|
||||
organizerBadgeText: { color: '#92400E', fontSize: 12, fontWeight: '500' },
|
||||
noParticipantsText: { fontSize: 15, color: '#6B7280', textAlign: 'center', paddingVertical: 10 },
|
||||
|
||||
floatingButtonContainer: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
right: 20,
|
||||
alignItems: 'center',
|
||||
},
|
||||
joinButton: {
|
||||
backgroundColor: colors.primary,
|
||||
borderRadius: 14,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 32,
|
||||
elevation: 5,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4,
|
||||
width: '80%',
|
||||
alignItems: 'center',
|
||||
},
|
||||
joinButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
disabledButton: {
|
||||
backgroundColor: '#9CA3AF', // Gray color when disabled
|
||||
},
|
||||
});
|
||||
|
||||
export default InviteScreen;
|
||||
|
||||
+119
-83
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
@@ -8,88 +8,70 @@ import {
|
||||
Platform,
|
||||
Image,
|
||||
Alert,
|
||||
FlatList,
|
||||
ListRenderItem, // Import ListRenderItem for better typing
|
||||
} from "react-native";
|
||||
import AppView from "../../components/AppView";
|
||||
import UserProfileStatus from "./UserProfileStatus";
|
||||
import colors from "../../components/colors";
|
||||
import GroupsTabs from "./GroupsTabs";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RouteProp, useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
|
||||
import UserHome from "./user-home/UserHome";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { PROFILE_URL } from "../../utils/ApiUrls";
|
||||
import *as Keychain from "react-native-keychain"
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { setUserData } from "../../redux/userSlice";
|
||||
// Enable animation for Android
|
||||
import { TabNavigationProp } from "../../navigation/BottomTabs";
|
||||
|
||||
// Enable layout animation for Android
|
||||
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
}
|
||||
|
||||
type RootStackParamList = {
|
||||
Home: { refreshProfile: boolean; role: string };
|
||||
};
|
||||
|
||||
type UserProfile = {
|
||||
// --- TYPE DEFINITIONS ---
|
||||
interface ActionItem {
|
||||
id: string;
|
||||
userId: number;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
imageBlob: string | null;
|
||||
role?: string;
|
||||
title: string;
|
||||
action: string;
|
||||
tab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
|
||||
imageUri: string;
|
||||
}
|
||||
const Home = () => {
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation();
|
||||
const dispatch = useDispatch()
|
||||
|
||||
const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)
|
||||
// Data for the grid items
|
||||
const organizerActions: ActionItem[] = [
|
||||
{ id: "1", title: "My Groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "2", title: "Joined Groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "3", title: "Requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", imageUri: "https://via.placeholder.com/60" },
|
||||
|
||||
];
|
||||
|
||||
const userActions: ActionItem[] = [
|
||||
{ id: "1", title: "Joined Groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "2", title: "Your Requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "3", title: "Action 3", action: "ACTION_3", imageUri: "https://via.placeholder.com/60" },
|
||||
{ id: "4", title: "Action 4", action: "ACTION_4", imageUri: "https://via.placeholder.com/60" },
|
||||
];
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation<TabNavigationProp>();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// --- FIXED: Conditional logic moved inside the component ---
|
||||
const actions = user.role === 'ORGANIZER' ? organizerActions : userActions;
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
return;
|
||||
}
|
||||
if (!credentials) return;
|
||||
const token = credentials.password;
|
||||
|
||||
console.log("token : ", token)
|
||||
const response = await fetch(
|
||||
PROFILE_URL,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
const response = await fetch(PROFILE_URL, {
|
||||
method: "GET",
|
||||
headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
console.log("👤 Profile Response:", result);
|
||||
if (result.status === "success") {
|
||||
setApiUser(result.data);
|
||||
dispatch(
|
||||
setUserData({
|
||||
id: result.data.id,
|
||||
userId: result.data.userId,
|
||||
username: result.data.username,
|
||||
firstName: result.data.firstName,
|
||||
lastName: result.data.lastName,
|
||||
gender: result.data.gender,
|
||||
mobile: result.data.mobile,
|
||||
email: result.data.email,
|
||||
address: result.data.address,
|
||||
bankAccountNumber: result.data.bankAccountNumber,
|
||||
bankName: result.data.bankName,
|
||||
branchCode: result.data.branchCode,
|
||||
profilePicture: result.data.filePath,
|
||||
filePath: result.data.filePath,
|
||||
imageBlob: result.data.imageBlob,
|
||||
role: result.data.role,
|
||||
organizerId: result.data.organizerId,
|
||||
organizerStatus: result.data.organizerStatus,
|
||||
profileStatus: true,
|
||||
})
|
||||
);
|
||||
// No need for apiUser state, just dispatch to Redux
|
||||
dispatch(setUserData({ ...result.data, profileStatus: true }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
@@ -100,26 +82,45 @@ const Home = () => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
// --- REFACTORED: Simplified action handler ---
|
||||
const handleActionPress = (item: ActionItem) => {
|
||||
if (item.action === "NAVIGATE_MANAGEMENT" && item.tab) {
|
||||
navigation.navigate('Management', { actionTab: item.tab });
|
||||
} else if (item.action === "ACTION_3") {
|
||||
Alert.alert("Action 3 pressed");
|
||||
} else if (item.action === "ACTION_4") {
|
||||
Alert.alert("Action 4 pressed");
|
||||
} else {
|
||||
Alert.alert("Unknown action", item.title);
|
||||
}
|
||||
};
|
||||
|
||||
// Render function for each grid item
|
||||
const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.gridButton}
|
||||
onPress={() => handleActionPress(item)}
|
||||
>
|
||||
{/* FIXED: 'imageUri' was missing from your data objects */}
|
||||
<Image source={{ uri: item.imageUri }} style={styles.gridIcon} />
|
||||
<Text style={styles.gridLabel}>{item.title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<AppView barStyle="dark-content" style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}👋</Text>
|
||||
<TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
|
||||
<Image
|
||||
source={
|
||||
user.imageBlob
|
||||
&& { uri: user.imageBlob || apiUser?.imageBlob ? `data:image/jpeg;base64,${user.imageBlob || apiUser?.imageBlob}` : user.profilePicture || apiUser?.imageBlob }
|
||||
}
|
||||
style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Home</Text>
|
||||
</View>
|
||||
{/* Status */}
|
||||
<UserProfileStatus />
|
||||
{/* <UserHome /> */}
|
||||
{user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
|
||||
<GroupsTabs />}
|
||||
|
||||
<FlatList
|
||||
data={actions}
|
||||
renderItem={renderGridItem}
|
||||
keyExtractor={(item) => item.id}
|
||||
numColumns={2}
|
||||
columnWrapperStyle={styles.row}
|
||||
contentContainerStyle={{ paddingHorizontal: 8 }}
|
||||
/>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
@@ -128,13 +129,48 @@ export default Home;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingBottom: '25%',
|
||||
flex: 1,
|
||||
backgroundColor: '#F4F6F8'
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 12,
|
||||
paddingVertical: 12,
|
||||
marginBottom: 16,
|
||||
},
|
||||
greeting: { fontSize: 22, fontWeight: "600", color: colors.Home },
|
||||
});
|
||||
headerTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "600",
|
||||
color: colors.Home,
|
||||
},
|
||||
row: {
|
||||
flex: 1,
|
||||
justifyContent: "space-around",
|
||||
},
|
||||
gridButton: {
|
||||
flex: 1,
|
||||
margin: 8,
|
||||
backgroundColor: "#FFFFFF",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
elevation: 4,
|
||||
},
|
||||
gridIcon: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
marginBottom: 12,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#E0E0E0',
|
||||
},
|
||||
gridLabel: {
|
||||
fontSize: 16,
|
||||
fontWeight: "500",
|
||||
color: colors.Home,
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -9,11 +9,17 @@ import {
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
Share,
|
||||
} from 'react-native';
|
||||
import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
|
||||
import { apiCall } from '../../utils/ApiHelper'; // Adjust path
|
||||
import AppView from '../../components/AppView';
|
||||
import { Picker } from '@react-native-picker/picker';
|
||||
import colors from '../../components/colors';
|
||||
import Clipboard from '@react-native-clipboard/clipboard';
|
||||
import { CompositeScreenProps } from '@react-navigation/native';
|
||||
import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
|
||||
import { ManagementTabParamList } from './ManagementTabNavigation'; // Adjust path
|
||||
|
||||
// --- Type Definitions ---
|
||||
interface Participant {
|
||||
@@ -35,6 +41,8 @@ export interface GroupDetails {
|
||||
maxParticipants: number;
|
||||
portalCharge: number | null;
|
||||
latePaymentCharge: number | null;
|
||||
lateFeeMode: 'DAILY' | 'FIXED' | null;
|
||||
lateFeeValue: number | null;
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
customCycleDays: number;
|
||||
withdrawalMethod: 'RANDOM' | 'SEQUENTIAL';
|
||||
@@ -54,16 +62,23 @@ export interface EditGroupPayload {
|
||||
cycleType: 'QUARTERLY' | 'MONTHLY' | 'WEEKLY' | 'CUSTOM';
|
||||
latePaymentCharge: number;
|
||||
visibility: 'PUBLIC' | 'PRIVATE';
|
||||
lateFeeMode: 'DAILY' | 'FIXED' | null;
|
||||
lateFeeValue: number | null;
|
||||
}
|
||||
|
||||
type EditGroupScreenProps = NativeStackScreenProps<RootStackParamList, 'EditGroup'>;
|
||||
type EditingField = keyof EditGroupPayload | null;
|
||||
// Correct props for a screen inside a nested Tab Navigator
|
||||
type EditGroupScreenProps = CompositeScreenProps<
|
||||
BottomTabScreenProps<ManagementTabParamList, 'EditGroup'>,
|
||||
NativeStackScreenProps<RootStackParamList>
|
||||
>;
|
||||
|
||||
type EditingCard = 'groupInfo' | 'financialRules' | 'configuration' | null;
|
||||
|
||||
// --- Main Screen Component ---
|
||||
const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
const { groupId } = route.params;
|
||||
|
||||
const [editingField, setEditingField] = useState<EditingField>(null);
|
||||
const [editingCard, setEditingCard] = useState<EditingCard>(null);
|
||||
const [groupDetails, setGroupDetails] = useState<GroupDetails | null>(null);
|
||||
const [editableData, setEditableData] = useState<EditGroupPayload>({
|
||||
groupName: '',
|
||||
@@ -74,30 +89,41 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
cycleType: 'MONTHLY',
|
||||
latePaymentCharge: 0,
|
||||
visibility: 'PRIVATE',
|
||||
lateFeeMode: null,
|
||||
lateFeeValue: null,
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [starting, setStarting] = useState(false);
|
||||
const [inviting, setInviting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// ... (All your handler functions: initializeEditableData, fetchGroupDetails, handleCancel, handleSave, etc. remain the same)
|
||||
const initializeEditableData = (data: GroupDetails) => {
|
||||
setEditableData({
|
||||
groupName: data.groupName,
|
||||
description: data.description,
|
||||
maxParticipants: data.maxParticipants,
|
||||
contributionAmount: data.contributionAmount,
|
||||
customCycleDays: data.customCycleDays,
|
||||
cycleType: data.cycleType,
|
||||
latePaymentCharge: data.latePaymentCharge ?? 0,
|
||||
visibility: data.visibility,
|
||||
lateFeeMode: data.lateFeeMode ?? null,
|
||||
lateFeeValue: data.lateFeeValue ?? null,
|
||||
});
|
||||
};
|
||||
|
||||
const fetchGroupDetails = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/group/details?groupId=${groupId}`, 'GET') as { status: string; data?: GroupDetails; message?: string };
|
||||
console.log("groupDetails",response)
|
||||
if (response.status === 'success' && response.data) {
|
||||
setGroupDetails(response.data);
|
||||
setEditableData({
|
||||
groupName: response.data.groupName,
|
||||
description: response.data.description,
|
||||
maxParticipants: response.data.maxParticipants,
|
||||
contributionAmount: response.data.contributionAmount,
|
||||
customCycleDays: response.data.customCycleDays,
|
||||
cycleType: response.data.cycleType,
|
||||
latePaymentCharge: response.data.latePaymentCharge ?? 0,
|
||||
visibility: response.data.visibility,
|
||||
});
|
||||
initializeEditableData(response.data);
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to fetch group data.');
|
||||
}
|
||||
@@ -114,36 +140,24 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
|
||||
const handleCancel = () => {
|
||||
if (groupDetails) {
|
||||
setEditableData({
|
||||
groupName: groupDetails.groupName,
|
||||
description: groupDetails.description,
|
||||
maxParticipants: groupDetails.maxParticipants,
|
||||
contributionAmount: groupDetails.contributionAmount,
|
||||
customCycleDays: groupDetails.customCycleDays,
|
||||
cycleType: groupDetails.cycleType,
|
||||
latePaymentCharge: groupDetails.latePaymentCharge ?? 0,
|
||||
visibility: groupDetails.visibility,
|
||||
});
|
||||
initializeEditableData(groupDetails);
|
||||
}
|
||||
setEditingField(null);
|
||||
setEditingCard(null);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!groupDetails || !editingField) return;
|
||||
if (!groupDetails) return;
|
||||
|
||||
if (editingField === 'maxParticipants') {
|
||||
const newMaxParticipants = Number(editableData.maxParticipants);
|
||||
if (newMaxParticipants < groupDetails.totalParticipants) {
|
||||
Alert.alert('Invalid Input', `Max participants cannot be less than the current count (${groupDetails.totalParticipants}).`);
|
||||
return;
|
||||
}
|
||||
if (editableData.maxParticipants < groupDetails.totalParticipants) {
|
||||
Alert.alert('Invalid Input', `Max participants cannot be less than the current count (${groupDetails.totalParticipants}).`);
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/apifund/groups/${groupDetails.id}/edit`, 'PUT', editableData);
|
||||
await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/groups/${groupDetails.id}/edit`, 'PUT', editableData);
|
||||
Alert.alert('Success', 'Group has been updated.');
|
||||
setEditingField(null);
|
||||
setEditingCard(null);
|
||||
await fetchGroupDetails();
|
||||
} catch (e: any) {
|
||||
Alert.alert('Save Error', e.message || 'An unexpected error occurred.');
|
||||
@@ -179,124 +193,174 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleInvite = async () => {
|
||||
if (!groupDetails) return;
|
||||
setInviting(true);
|
||||
try {
|
||||
const response = await apiCall(`https://exotic-humpback-mistakenly.ngrok-free.app/api/invite/generate?groupId=${groupDetails.id}`, 'GET') as { data?: string };
|
||||
|
||||
const inviteLink = response.data;
|
||||
|
||||
if (inviteLink) {
|
||||
Clipboard.setString(inviteLink);
|
||||
Alert.alert('Copied!', 'Invitation link copied to clipboard.');
|
||||
await Share.share({
|
||||
message: `Join my group on CircleCollect! ${inviteLink}`,
|
||||
url: inviteLink,
|
||||
title: 'CircleCollect Group Invitation'
|
||||
});
|
||||
} else {
|
||||
throw new Error('Could not generate invitation link.');
|
||||
}
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to generate invitation.');
|
||||
} finally {
|
||||
setInviting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateField = (field: keyof EditGroupPayload, value: any) => {
|
||||
setEditableData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
// ... (renderField and renderCard functions also remain the same)
|
||||
const renderField = (field: keyof EditGroupPayload, label: string, displayValue: string | number, isEditing: boolean) => {
|
||||
const commonInputProps = { style: styles.input, placeholderTextColor: "#9CA3AF" };
|
||||
|
||||
const getInputForField = () => {
|
||||
switch(field) {
|
||||
case 'groupName':
|
||||
return <TextInput {...commonInputProps} value={editableData.groupName} onChangeText={(text) => handleUpdateField('groupName', text)} />;
|
||||
case 'description':
|
||||
return <TextInput {...commonInputProps} style={[styles.input, styles.textArea]} value={editableData.description} onChangeText={(text) => handleUpdateField('description', text)} multiline />;
|
||||
case 'contributionAmount':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.contributionAmount ?? '')} onChangeText={(text) => handleUpdateField('contributionAmount', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'maxParticipants':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.maxParticipants ?? '')} onChangeText={(text) => handleUpdateField('maxParticipants', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'latePaymentCharge':
|
||||
return <TextInput {...commonInputProps} value={String(editableData.latePaymentCharge ?? '')} onChangeText={(text) => handleUpdateField('latePaymentCharge', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'cycleType':
|
||||
return (
|
||||
<Picker selectedValue={editableData.cycleType} onValueChange={(itemValue) => handleUpdateField('cycleType', itemValue)} style={styles.picker}>
|
||||
{['MONTHLY', 'WEEKLY', 'QUARTERLY', 'CUSTOM'].map(c => <Picker.Item key={c} label={c} value={c} />)}
|
||||
</Picker>
|
||||
);
|
||||
case 'customCycleDays':
|
||||
if (editableData.cycleType !== 'CUSTOM') return null;
|
||||
return <TextInput {...commonInputProps} value={String(editableData.customCycleDays ?? '')} onChangeText={(text) => handleUpdateField('customCycleDays', text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'visibility':
|
||||
return (
|
||||
<Picker selectedValue={editableData.visibility} onValueChange={(itemValue) => handleUpdateField('visibility', itemValue)} style={styles.picker}>
|
||||
<Picker.Item label="PUBLIC" value="PUBLIC" />
|
||||
<Picker.Item label="PRIVATE" value="PRIVATE" />
|
||||
</Picker>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.fieldContainer}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
{isEditing && isEditable ? (
|
||||
<View style={{marginTop: 8}}>{getInputForField()}</View>
|
||||
) : (
|
||||
<Text style={styles.infoValue}>{displayValue}</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const renderCard = (title: string, fields: Array<{ field: keyof EditGroupPayload, label: string, displayValue: () => string | number }>, cardKey: EditingCard) => {
|
||||
const isEditingThisCard = editingCard === cardKey;
|
||||
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.cardTitle}>{title}</Text>
|
||||
{isEditable && !editingCard && (
|
||||
<TouchableOpacity onPress={() => setEditingCard(cardKey)} style={styles.editButton}>
|
||||
<Text style={styles.editButtonText}>✎</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{fields.map(({ field, label, displayValue }) =>
|
||||
renderField(field, label, displayValue(), isEditingThisCard)
|
||||
)}
|
||||
|
||||
{isEditingThisCard && (
|
||||
<View style={styles.cardActions}>
|
||||
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel} disabled={saving}>
|
||||
<Text style={[styles.buttonText, { color: '#374151' }]}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.button, styles.saveButton]} onPress={handleSave} disabled={saving}>
|
||||
{saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) return <View style={styles.centered}><ActivityIndicator size="large" color="#4F46E5" /></View>;
|
||||
if (error) return <View style={styles.centered}><Text style={styles.errorText}>{error}</Text></View>;
|
||||
if (!groupDetails) return null;
|
||||
|
||||
const isEditable = groupDetails.status === 'PENDING' || groupDetails.status === 'APPROVED';
|
||||
const isInvitable = groupDetails.status === 'APPROVED';
|
||||
const canStartGroup = groupDetails.status === 'APPROVED' && groupDetails.totalParticipants >= groupDetails.minParticipants;
|
||||
|
||||
const renderInputField = (field: EditingField) => {
|
||||
if (!field || !editableData) return null;
|
||||
|
||||
const commonProps = { style: styles.input, placeholderTextColor: "#9CA3AF" };
|
||||
|
||||
switch(field) {
|
||||
case 'groupName':
|
||||
return <TextInput {...commonProps} value={editableData.groupName} onChangeText={(text) => handleUpdateField('groupName', text)} />;
|
||||
case 'description':
|
||||
return <TextInput {...commonProps} style={[styles.input, styles.textArea]} value={editableData.description} onChangeText={(text) => handleUpdateField('description', text)} multiline />;
|
||||
case 'contributionAmount':
|
||||
case 'maxParticipants':
|
||||
case 'latePaymentCharge':
|
||||
case 'customCycleDays':
|
||||
return <TextInput {...commonProps} value={String(editableData[field] ?? '')} onChangeText={(text) => handleUpdateField(field, text ? Number(text.replace(/[^0-9]/g, '')) : 0)} keyboardType="numeric" />;
|
||||
case 'cycleType':
|
||||
return <Picker selectedValue={editableData.cycleType} onValueChange={(itemValue) => handleUpdateField('cycleType', itemValue)} style={styles.picker}>
|
||||
{['MONTHLY', 'WEEKLY', 'QUARTERLY', 'CUSTOM'].map(c => <Picker.Item key={c} label={c} value={c} />)}
|
||||
</Picker>;
|
||||
case 'visibility':
|
||||
return <Picker selectedValue={editableData.visibility} onValueChange={(itemValue) => handleUpdateField('visibility', itemValue)} style={styles.picker}>
|
||||
<Picker.Item label="PUBLIC" value="PUBLIC" />
|
||||
<Picker.Item label="PRIVATE" value="PRIVATE" />
|
||||
</Picker>;
|
||||
default: return null;
|
||||
}
|
||||
}
|
||||
|
||||
const renderRow = (field: EditingField, label: string, displayValue: string | number) => {
|
||||
return (
|
||||
<View style={styles.fieldContainer}>
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
{editingField !== field && (
|
||||
<View style={styles.valueContainer}>
|
||||
<Text style={styles.infoValue}>{displayValue}</Text>
|
||||
{isEditable && <TouchableOpacity onPress={() => setEditingField(field)} style={styles.editButton}>
|
||||
<Text style={styles.editButtonText}>✎</Text>
|
||||
</TouchableOpacity>}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{editingField === field && isEditable && (
|
||||
<View style={styles.editingContainer}>
|
||||
{renderInputField(field)}
|
||||
<View style={styles.cardActions}>
|
||||
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel} disabled={saving}>
|
||||
<Text style={[styles.buttonText, { color: '#374151' }]}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.button, styles.saveButton]} onPress={handleSave} disabled={saving}>
|
||||
{saving ? <ActivityIndicator color="#FFFFFF" size="small" /> : <Text style={styles.buttonText}>Save</Text>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AppView paddingHorizontal={0}>
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
|
||||
<Text style={styles.headerTitle}>Edit Group</Text>
|
||||
|
||||
{canStartGroup && (
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Ready to Start?</Text>
|
||||
<Text style={styles.startGroupText}>This group has met the minimum participant requirement.</Text>
|
||||
<TouchableOpacity style={[styles.button, styles.startButton]} onPress={handleStartGroup} disabled={starting}>
|
||||
{starting ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.buttonText}>Start Group</Text>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
// Use AppView as the root container with flex: 1
|
||||
<AppView style={{ flex: 1, paddingHorizontal: 0 }}>
|
||||
<View style={styles.headerContainer}>
|
||||
<Text style={styles.headerTitle}>Manage Group</Text>
|
||||
{isInvitable && (
|
||||
<TouchableOpacity style={[styles.button, styles.inviteButton]} onPress={handleInvite} disabled={inviting}>
|
||||
{inviting ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.buttonText}>Invite</Text>}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Group Info</Text>
|
||||
{renderRow('groupName', 'Group Name', groupDetails.groupName)}
|
||||
{renderRow('description', 'Description', groupDetails.description)}
|
||||
</View>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
contentContainerStyle={styles.contentContainer}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{renderCard('Group Info', [
|
||||
{ field: 'groupName', label: 'Group Name', displayValue: () => groupDetails.groupName },
|
||||
{ field: 'description', label: 'Description', displayValue: () => groupDetails.description },
|
||||
], 'groupInfo')}
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Financial Rules</Text>
|
||||
{renderRow('contributionAmount', 'Contribution', `₹${groupDetails.contributionAmount.toLocaleString('en-IN')}`)}
|
||||
{renderRow('maxParticipants', 'Max Participants', `${groupDetails.totalParticipants} / ${groupDetails.maxParticipants}`)}
|
||||
{renderRow('latePaymentCharge', 'Late Fee', `₹${(groupDetails.latePaymentCharge ?? 0).toLocaleString('en-IN')}`)}
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Configuration</Text>
|
||||
{renderRow('cycleType', 'Payment Cycle', groupDetails.cycleType)}
|
||||
{(editableData.cycleType === 'CUSTOM' || groupDetails.cycleType === 'CUSTOM') && renderRow('customCycleDays', 'Custom Days', `${editableData.customCycleDays ?? groupDetails.customCycleDays} days`)}
|
||||
{renderRow('visibility', 'Visibility', groupDetails.visibility)}
|
||||
</View>
|
||||
{renderCard('Financial Rules', [
|
||||
{ field: 'contributionAmount', label: 'Contribution', displayValue: () => `₹${groupDetails.contributionAmount.toLocaleString('en-IN')}` },
|
||||
{ field: 'maxParticipants', label: 'Max Participants', displayValue: () => `${groupDetails.totalParticipants} / ${groupDetails.maxParticipants}` },
|
||||
{ field: 'minParticipants', label: 'Min Participants', displayValue: () => `${groupDetails.minParticipants}` },
|
||||
{ field: 'latePaymentCharge', label: 'Late Fee', displayValue: () => `₹${(groupDetails.latePaymentCharge ?? 0).toLocaleString('en-IN')}` },
|
||||
], 'financialRules')}
|
||||
|
||||
{renderCard('Configuration', [
|
||||
{ field: 'cycleType', label: 'Payment Cycle', displayValue: () => groupDetails.cycleType },
|
||||
{ field: 'customCycleDays', label: 'Custom Days', displayValue: () => `${groupDetails.customCycleDays ?? ''} days` },
|
||||
{ field: 'visibility', label: 'Visibility', displayValue: () => groupDetails.visibility },
|
||||
], 'configuration')}
|
||||
|
||||
{/* Participants Card ... */}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.cardTitle}>Participants ({groupDetails.totalParticipants})</Text>
|
||||
{groupDetails.participants.length > 0 ? (
|
||||
groupDetails.participants.map(p => (
|
||||
<View key={p.id} style={styles.participantRow}>
|
||||
<View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={styles.participantName}>{`${p.firstName} ${p.lastName || ''}`.trim()}</Text>
|
||||
{p.role === 'ORGANIZER' && <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>}
|
||||
<View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={styles.participantName}>{`${p.firstName} ${p.lastName || ''}`.trim()}</Text>
|
||||
{p.role === 'ORGANIZER' && <View style={styles.organizerBadge}><Text style={styles.organizerBadgeText}>Organizer</Text></View>}
|
||||
</View>
|
||||
<Text style={styles.participantMobile}>{p.mobile}</Text>
|
||||
</View>
|
||||
<Text style={styles.participantMobile}>{p.mobile}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
@@ -304,48 +368,103 @@ const EditGroupScreen: React.FC<EditGroupScreenProps> = ({ route }) => {
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* --- FLOATING BUTTON AREA --- */}
|
||||
{/* This View is a sibling of ScrollView, allowing it to float on top */}
|
||||
{canStartGroup && (
|
||||
<View style={styles.floatingButtonContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.activateButton}
|
||||
onPress={handleStartGroup}
|
||||
disabled={starting}
|
||||
>
|
||||
{starting ? (
|
||||
<ActivityIndicator color="#FFFFFF" size="small" />
|
||||
) : (
|
||||
<Text style={styles.activateButtonText}>Activate Group</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F3F4F6' },
|
||||
contentContainer: { padding: 16, paddingBottom: 40 },
|
||||
centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
errorText: { color: '#EF4444', fontSize: 16, textAlign: 'center' },
|
||||
headerTitle: { fontSize: 28, fontWeight: 'bold', color: '#111827', marginBottom: 20 },
|
||||
|
||||
card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10 },
|
||||
cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937', marginBottom: 12, borderBottomWidth: 1, borderBottomColor: '#E5E7EB', paddingBottom: 10 },
|
||||
|
||||
editButton: { padding: 8, marginLeft: 8 },
|
||||
editButtonText: { color: '#4F46E5', fontSize: 20, fontWeight: 'bold' },
|
||||
|
||||
fieldContainer: { borderBottomWidth: 1, borderBottomColor: '#F3F4F6', paddingVertical: 12 },
|
||||
infoRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||
infoLabel: { fontSize: 16, color: '#6B7280' },
|
||||
infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
|
||||
valueContainer: { flexDirection: 'row', alignItems: 'center' },
|
||||
container: { flex: 1, backgroundColor: '#F3F4F6' },
|
||||
// Added more paddingBottom to ensure content doesn't hide behind the button AND the tab bar
|
||||
contentContainer: { padding: 16, paddingTop: 0, paddingBottom: 150 },
|
||||
centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
errorText: { color: '#EF4444', fontSize: 16, textAlign: 'center' },
|
||||
headerContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
},
|
||||
headerTitle: { fontSize: 28, fontWeight: 'bold', color: '#111827' },
|
||||
card: { backgroundColor: '#FFFFFF', borderRadius: 16, padding: 20, marginBottom: 16, shadowColor: '#374151', shadowOpacity: 0.05, shadowRadius: 10 },
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingBottom: 10,
|
||||
marginBottom: 12,
|
||||
},
|
||||
cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#1F2937' },
|
||||
editButton: { padding: 8 },
|
||||
editButtonText: { color: colors.pastelPink, fontSize: 20, fontWeight: 'bold' },
|
||||
fieldContainer: { borderBottomWidth: 1, borderBottomColor: '#F3F4F6', paddingBottom: 12, marginBottom: 12 },
|
||||
infoLabel: { fontSize: 16, color: '#6B7280', marginBottom: 4 },
|
||||
infoValue: { fontSize: 16, fontWeight: '600', color: '#111827', textTransform: 'capitalize' },
|
||||
input: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, padding: 14, fontSize: 16, color: '#111827' },
|
||||
textArea: { height: 100, textAlignVertical: 'top' },
|
||||
picker: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10 },
|
||||
participantRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
|
||||
participantName: { fontSize: 16, fontWeight: '600', color: '#111827' },
|
||||
participantMobile: { fontSize: 14, color: '#6B7280', marginTop: 4 },
|
||||
organizerBadge: { backgroundColor: '#FEF3C7', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 12, marginLeft: 10 },
|
||||
organizerBadgeText: { color: '#92400E', fontSize: 12, fontWeight: '500' },
|
||||
noParticipantsText: { fontSize: 15, color: '#6B7280', textAlign: 'center', paddingVertical: 20 },
|
||||
cardActions: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#E5E7EB' },
|
||||
button: { borderRadius: 10, paddingVertical: 12, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center', justifyContent: 'center' },
|
||||
saveButton: { backgroundColor: colors.pastelOrange },
|
||||
cancelButton: { backgroundColor: '#E5E7EB' },
|
||||
inviteButton: { backgroundColor: colors.primary },
|
||||
buttonText: { color: '#ffffffff', fontSize: 15, fontWeight: '600' },
|
||||
|
||||
editingContainer: { marginTop: 12 },
|
||||
input: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, padding: 14, fontSize: 16, color: '#111827' },
|
||||
textArea: { height: 100, textAlignVertical: 'top' },
|
||||
picker: { backgroundColor: '#F9FAFB', borderWidth: 1, borderColor: '#D1D5DB', borderRadius: 10, padding: 0, margin:0 },
|
||||
|
||||
participantRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F3F4F6' },
|
||||
participantName: { fontSize: 16, fontWeight: '600', color: '#111827' },
|
||||
participantMobile: { fontSize: 14, color: '#6B7280', marginTop: 4 },
|
||||
organizerBadge: { backgroundColor: '#FEF3C7', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 12, marginLeft: 10 },
|
||||
organizerBadgeText: { color: '#92400E', fontSize: 12, fontWeight: '500' },
|
||||
noParticipantsText: { fontSize: 15, color: '#6B7280', textAlign: 'center', paddingVertical: 20 },
|
||||
|
||||
cardActions: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTopWidth: 1, borderTopColor: '#E5E7EB' },
|
||||
button: { borderRadius: 10, paddingVertical: 12, paddingHorizontal: 20, marginLeft: 10, minWidth: 80, alignItems: 'center', justifyContent: 'center' },
|
||||
saveButton: { backgroundColor: '#4F46E5' },
|
||||
cancelButton: { backgroundColor: '#E5E7EB' },
|
||||
startButton: { backgroundColor: '#22c55e', marginTop: 10 },
|
||||
startGroupText: { fontSize: 15, color: '#6B7280', lineHeight: 22, marginBottom: 10},
|
||||
buttonText: { color: '#FFFFFF', fontSize: 15, fontWeight: '600' },
|
||||
// --- FLOATING BUTTON STYLES ---
|
||||
floatingButtonContainer: {
|
||||
position: 'absolute',
|
||||
bottom: 85, // Positioned above the tab bar
|
||||
left: 20,
|
||||
right: 20,
|
||||
alignItems: 'center', // Center the button horizontally
|
||||
zIndex: 1, // Ensure it's on top
|
||||
},
|
||||
activateButton: {
|
||||
backgroundColor: colors.pastelOrange,
|
||||
borderRadius: 14,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 32,
|
||||
elevation: 8,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4,
|
||||
width: '90%', // Adjust width as needed
|
||||
alignItems: 'center',
|
||||
},
|
||||
activateButtonText: {
|
||||
color: '#000000ff',
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
|
||||
export default EditGroupScreen;
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import React from 'react'
|
||||
import { useRoute } from '@react-navigation/native';
|
||||
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
||||
import { RootStackParamList } from '../../navigation/AppNavigator';
|
||||
type ManageJoinedGroupProps = NativeStackScreenProps<RootStackParamList, 'ManageJoinedGroup'>;
|
||||
export default function ManageJoinedGroup({ route }: ManageJoinedGroupProps) {
|
||||
|
||||
const { groupId } = route.params as { groupId: string | number };
|
||||
console.log("first", groupId)
|
||||
return (
|
||||
<View>
|
||||
<Text>Manage Group: {groupId}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({})
|
||||
@@ -1,6 +1,6 @@
|
||||
// src/screens/ManagementScreen.tsx
|
||||
|
||||
import React, { useState, useCallback, FC } from "react";
|
||||
import React, { useState, useCallback, FC, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -9,69 +9,75 @@ import {
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
ListRenderItemInfo,
|
||||
} from "react-native";
|
||||
import { useNavigation, useFocusEffect } from "@react-navigation/native";
|
||||
import { useNavigation, useFocusEffect, useRoute, RouteProp } from "@react-navigation/native";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { RootStackParamList } from "../../navigation/AppNavigator";
|
||||
import { APPROVE_REQUEST_URL, BASE_URL, DECLINE_REQUEST_URL, GET_JOINED_GROUP_URL, JOIN_GROUP_URL, MY_GROUPS_URL, REQUESTS_URL, USER_REQUEST } from "../../utils/ApiUrls";
|
||||
import { APPROVE_REQUEST_URL, DECLINE_REQUEST_URL, GET_JOINED_GROUP_URL, MY_GROUPS_URL, REQUESTS_URL, USER_REQUEST } from "../../utils/ApiUrls";
|
||||
import colors from "../../components/colors";
|
||||
import AppView from "../../components/AppView";
|
||||
import { apiCall } from "../../utils/ApiHelper";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { MyGroup, JoinedGroup, JoinRequest, ApiResponse, UserJoinRequest } from '../../types';
|
||||
import { MyGroup, JoinedGroup, JoinRequest, ApiResponse, UserJoinRequest } from '../../types'; // Adjust import path
|
||||
import { MyGroupCard } from "../../components/MyGroupCard";
|
||||
import { JoinedGroupCard } from "../../components/JoinedGroupCard";
|
||||
import { RequestCard } from "../../components/RequestCard";
|
||||
import { useSelector } from "react-redux";
|
||||
import Ionicons from "@react-native-vector-icons/ionicons";
|
||||
import { UserRequested } from "../../components/UserRequested";
|
||||
import { RootTabParamList } from "../../navigation/BottomTabs"; // Adjust import path
|
||||
import { RootStackParamList } from "../../navigation/AppNavigator";
|
||||
|
||||
type GroupManagementNavProp = StackNavigationProp<RootStackParamList>;
|
||||
// --- TYPE DEFINITIONS ---
|
||||
type GroupManagementNavProp = StackNavigationProp<RootStackParamList, 'ManagementTabs'>;
|
||||
type ManagementRouteProp = RouteProp<RootTabParamList, 'Management'>;
|
||||
type ActiveTab = "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
|
||||
|
||||
const ManagementScreen: FC = () => {
|
||||
const userRole = useSelector((state: any) => state.user)
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>(userRole.role === "USER" ? "Joined Groups" : "My Groups");
|
||||
const user = useSelector((state: any) => state.user);
|
||||
const navigation = useNavigation<GroupManagementNavProp>();
|
||||
const route = useRoute<ManagementRouteProp>();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>(user.role === "USER" ? "Joined Groups" : "My Groups");
|
||||
const [myGroups, setMyGroups] = useState<MyGroup[]>([]);
|
||||
const [joinedGroups, setJoinedGroups] = useState<JoinedGroup[]>([]);
|
||||
const [requests, setRequests] = useState<JoinRequest[]>([]);
|
||||
const [userRequest, setUserRequest] = useState<UserJoinRequest[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [userRequest, setUserRequest] = useState<UserJoinRequest[]>([])
|
||||
|
||||
// --- HOOKS ---
|
||||
|
||||
// Effect to set the initial tab from route params
|
||||
useEffect(() => {
|
||||
const passedTab = route.params?.actionTab;
|
||||
if (passedTab) {
|
||||
const availableTabs = user.role === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups", "Your Requests"];
|
||||
if (availableTabs.includes(passedTab)) {
|
||||
setActiveTab(passedTab);
|
||||
}
|
||||
}
|
||||
}, [route.params?.actionTab, user.role]);
|
||||
|
||||
// --- FIXED: fetchData dependency array is corrected ---
|
||||
const fetchData = useCallback(async () => {
|
||||
// Check for loading state at the start to prevent multiple simultaneous fetches
|
||||
if (loading) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
if (userRole.role === "ORGANIZER") {
|
||||
// Fetch all data concurrently for organizers
|
||||
if (user.role === "ORGANIZER") {
|
||||
const [myGroupsRes, joinedGroupsRes, requestsRes] = await Promise.all([
|
||||
apiCall(MY_GROUPS_URL, "GET") as Promise<ApiResponse<MyGroup[]>>,
|
||||
apiCall(GET_JOINED_GROUP_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>,
|
||||
apiCall(REQUESTS_URL, "GET") as Promise<ApiResponse<JoinRequest[]>>,
|
||||
]);
|
||||
|
||||
console.log("My Groups:", myGroupsRes.data);
|
||||
console.log("Joined Groups:", joinedGroupsRes.data);
|
||||
console.log("Requests:", requestsRes.data);
|
||||
|
||||
setMyGroups(myGroupsRes.data || []);
|
||||
setJoinedGroups(joinedGroupsRes.data || []);
|
||||
setRequests(requestsRes.data || []);
|
||||
} else {
|
||||
// Fetch only joined groups and user requests for non-organizers
|
||||
const [joinedGroupsRes, userRequestRes] = await Promise.all([
|
||||
apiCall(GET_JOINED_GROUP_URL, "GET") as Promise<ApiResponse<JoinedGroup[]>>,
|
||||
apiCall(USER_REQUEST, "GET") as Promise<ApiResponse<UserJoinRequest[]>>,
|
||||
]);
|
||||
|
||||
console.log("Joined Groups:", joinedGroupsRes.data);
|
||||
console.log("User Requests:", userRequestRes.data);
|
||||
|
||||
setJoinedGroups(joinedGroupsRes.data || []);
|
||||
setUserRequest(userRequestRes.data || []);
|
||||
}
|
||||
@@ -81,109 +87,64 @@ const ManagementScreen: FC = () => {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [userRole, loading]);
|
||||
// The only external dependency that should trigger a re-fetch is the user's role.
|
||||
}, [user.role]); // **FIXED**: Removed `loading` from the dependency array
|
||||
|
||||
useFocusEffect(useCallback(() => { fetchData(); }, []));
|
||||
// --- FIXED: useFocusEffect now has a stable dependency ---
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
fetchData();
|
||||
}, [fetchData]) // This will now only re-run if fetchData (and thus user.role) changes.
|
||||
);
|
||||
|
||||
const handleAction = async (url: string, body: object, successMessage: string, failureMessage: string, action: string) => {
|
||||
// ... (logic remains the same)
|
||||
console.log(url)
|
||||
// --- HANDLERS (No changes needed here) ---
|
||||
const handleViewGroup = (item: JoinedGroup) => {
|
||||
// Assuming you have an 'Invite' screen in your RootTabParamList or another navigator
|
||||
// navigation.navigate('Invite' as any, { groupId: item.id });
|
||||
};
|
||||
|
||||
const handleAction = async (url: string, successMessage: string, failureMessage: string) => {
|
||||
try {
|
||||
setLoading(true); // Optionally show a loading state during the action
|
||||
// Make the POST request with an empty body
|
||||
// No need to set loading here if the whole screen is already loading
|
||||
const res = await apiCall(url, "PUT", {}) as ApiResponse<null> | null;
|
||||
|
||||
if (res && res.statusCode === 200) {
|
||||
// Use the success message from the API response
|
||||
Alert.alert("Success", res.message || `Request ${action}d successfully.`);
|
||||
fetchData(); // Refresh the list of requests
|
||||
Alert.alert("Success", res.message || successMessage);
|
||||
fetchData(); // Refresh data after action
|
||||
} else {
|
||||
throw new Error(res?.message || failureMessage);
|
||||
}
|
||||
} catch (err: any) {
|
||||
Alert.alert("Error", err.message || "An unexpected error occurred.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApprove = (req: JoinRequest) => handleAction(APPROVE_REQUEST_URL + req.requestId + "/approve", { requestId: req.requestId }, `${req.userName} has been added.`, "Failed to approve request.", "Approve");
|
||||
const handleDecline = (req: JoinRequest) => handleAction(DECLINE_REQUEST_URL + req.requestId + "/reject?reason=/" + " ", { requestId: req.requestId }, `Request from ${req.userName} has been declined.`, "Failed to decline request.", "Decline");
|
||||
const handleManageGroup = (group: MyGroup) => navigation.navigate('EditGroup', { groupId: group.id });
|
||||
const handleApprove = (req: JoinRequest) => handleAction(APPROVE_REQUEST_URL + req.requestId + "/approve", `${req.userName} has been added.`, "Failed to approve request.");
|
||||
const handleDecline = (req: JoinRequest) => handleAction(DECLINE_REQUEST_URL + req.requestId + "/reject?reason=/", `Request from ${req.userName} has been declined.`, "Failed to decline request.");
|
||||
const handleManageGroup = (group: MyGroup) => navigation.navigate('ManagementTabs', { groupId: group.id });
|
||||
|
||||
// --- RENDER LOGIC ---
|
||||
const renderContent = () => {
|
||||
if (error) {
|
||||
return <Text style={styles.emptyText}>{error}</Text>;
|
||||
if (error) return <Text style={styles.emptyText}>{error}</Text>;
|
||||
// Improved loading logic to avoid hiding existing data during a refresh
|
||||
if (loading && myGroups.length === 0 && joinedGroups.length === 0 && requests.length === 0) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
|
||||
switch (activeTab) {
|
||||
case "My Groups":
|
||||
if (loading) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={myGroups}
|
||||
renderItem={({ item }: ListRenderItemInfo<MyGroup>) => <MyGroupCard item={item} onManage={handleManageGroup} />}
|
||||
keyExtractor={(item) => item.id}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>You haven't created any groups yet.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
return <FlatList data={myGroups} renderItem={({ item }) => <MyGroupCard item={item} onManage={handleManageGroup} />} keyExtractor={(item) => item.id} ListEmptyComponent={<Text style={styles.emptyText}>You haven't created any groups yet.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
|
||||
case "Joined Groups":
|
||||
if (loading && joinedGroups.length === 0) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={joinedGroups}
|
||||
renderItem={({ item }: ListRenderItemInfo<JoinedGroup>) => <JoinedGroupCard item={item} />}
|
||||
keyExtractor={(item) => item.id}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>You haven't joined any groups yet.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
return <FlatList data={joinedGroups} renderItem={({ item }) => <JoinedGroupCard item={item} onViewPress={() => handleViewGroup(item)} />} keyExtractor={(item) => item.id} ListEmptyComponent={<Text style={styles.emptyText}>You haven't joined any groups yet.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
|
||||
case "Requests":
|
||||
if (loading && requests.length === 0) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={requests}
|
||||
renderItem={({ item }: ListRenderItemInfo<JoinRequest>) => <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />}
|
||||
keyExtractor={(item) => item.requestId}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
return <FlatList data={requests} renderItem={({ item }) => <RequestCard item={item} onApprove={handleApprove} onDecline={handleDecline} />} keyExtractor={(item) => item.requestId} ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
|
||||
case "Your Requests":
|
||||
if (loading && requests.length === 0) {
|
||||
return <ActivityIndicator size="large" color={colors.primary} style={styles.loader} />;
|
||||
}
|
||||
return (
|
||||
<FlatList
|
||||
data={userRequest}
|
||||
renderItem={({ item }: ListRenderItemInfo<UserJoinRequest>) => <UserRequested item={item} />}
|
||||
keyExtractor={(item) => item.requestId}
|
||||
ListEmptyComponent={<Text style={styles.emptyText}>No pending join requests.</Text>}
|
||||
onRefresh={fetchData}
|
||||
refreshing={loading} // This handles the "continuing loading" on pull-to-refresh
|
||||
contentContainerStyle={{ paddingBottom: 100 }}
|
||||
/>
|
||||
);
|
||||
return <FlatList data={userRequest} renderItem={({ item }) => <UserRequested item={item} />} keyExtractor={(item) => item.requestId} ListEmptyComponent={<Text style={styles.emptyText}>You haven't sent any join requests.</Text>} onRefresh={fetchData} refreshing={loading} contentContainerStyle={{ paddingBottom: 100 }} />;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
const tabs: ActiveTab[] = userRole.role === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups", "Your Requests"];
|
||||
const tabs: ActiveTab[] = user.role === 'ORGANIZER' ? ["My Groups", "Joined Groups", "Requests"] : ["Joined Groups", "Your Requests"];
|
||||
|
||||
console.log("user request : ", userRequest)
|
||||
return (
|
||||
<AppView style={styles.container} paddingHorizontal={0}>
|
||||
<View style={styles.header}>
|
||||
@@ -197,32 +158,6 @@ const ManagementScreen: FC = () => {
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.contentArea}>
|
||||
{
|
||||
activeTab === "Requests" && userRole === "ORGANIZER" ? (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 85,
|
||||
right: 20,
|
||||
backgroundColor: colors.pastelOrange,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 5,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
elevation: 5, // for Android shadow
|
||||
}}
|
||||
onPress={() => navigation.navigate("YourContacts" as never)}
|
||||
>
|
||||
<Ionicons name="person-add" size={28} color={colors.textDark} />
|
||||
</TouchableOpacity>
|
||||
) : null
|
||||
}
|
||||
|
||||
{renderContent()}
|
||||
</View>
|
||||
</AppView>
|
||||
@@ -230,59 +165,17 @@ const ManagementScreen: FC = () => {
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f6fa'
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 15,
|
||||
},
|
||||
title: {
|
||||
fontSize: 22, fontWeight: "600", color: colors.Settings
|
||||
},
|
||||
segmentedControl: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#e9ecef',
|
||||
borderRadius: 10,
|
||||
marginHorizontal: 20,
|
||||
marginBottom: 20,
|
||||
padding: 3,
|
||||
},
|
||||
segmentButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
alignItems: 'center',
|
||||
borderRadius: 8,
|
||||
},
|
||||
segmentActive: {
|
||||
backgroundColor: colors.pastelOrange, // Example color
|
||||
elevation: 3,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 5,
|
||||
},
|
||||
segmentText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#6c757d',
|
||||
},
|
||||
segmentTextActive: {
|
||||
color: colors.textDark, // Example color
|
||||
},
|
||||
contentArea: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
loader: {
|
||||
marginTop: 50,
|
||||
},
|
||||
emptyText: {
|
||||
textAlign: 'center',
|
||||
marginTop: 60,
|
||||
fontSize: 16,
|
||||
color: '#6c757d',
|
||||
},
|
||||
container: { flex: 1, backgroundColor: '#f5f6fa' },
|
||||
header: { paddingHorizontal: 20, paddingBottom: 15, paddingTop: 10 },
|
||||
title: { fontSize: 22, fontWeight: "600", color: colors.Settings },
|
||||
segmentedControl: { flexDirection: 'row', backgroundColor: '#e9ecef', borderRadius: 10, marginHorizontal: 20, marginBottom: 20, padding: 3 },
|
||||
segmentButton: { flex: 1, paddingVertical: 12, alignItems: 'center', borderRadius: 8 },
|
||||
segmentActive: { backgroundColor: colors.pastelOrange, elevation: 3, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 5 },
|
||||
segmentText: { fontSize: 14, fontWeight: '600', color: '#6c757d' },
|
||||
segmentTextActive: { color: colors.textDark },
|
||||
contentArea: { flex: 1, paddingHorizontal: 20 },
|
||||
loader: { marginTop: 50 },
|
||||
emptyText: { textAlign: 'center', marginTop: 60, fontSize: 16, color: '#6c757d' },
|
||||
});
|
||||
|
||||
export default ManagementScreen;
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
import React from 'react';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import Ionicons from 'react-native-vector-icons/Ionicons'; // Correct import for react-native-vector-icons
|
||||
|
||||
import { NativeStackScreenProps } from '@react-navigation/native-stack';
|
||||
import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
|
||||
import EditGroupScreen from './EditGroupScreen'; // Your screen component
|
||||
import Payments from './Payments';
|
||||
import Member from './Member';
|
||||
|
||||
type Props = NativeStackScreenProps<RootStackParamList, 'ManagementTabs'>;
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
// --- Custom Floating Tab Bar Component ---
|
||||
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
|
||||
|
||||
const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
return (
|
||||
<View style={[styles.tabBarContainer, { bottom: insets.bottom > 0 ? insets.bottom : 16 }]}>
|
||||
{state.routes.map((route, index) => {
|
||||
const { options } = descriptors[route.key];
|
||||
const label = options.tabBarLabel ?? options.title ?? route.name;
|
||||
// A custom option to pass the icon name
|
||||
const iconName = options.tabBarIconName ?? 'help-circle';
|
||||
|
||||
const isFocused = state.index === index;
|
||||
|
||||
const onPress = () => {
|
||||
const event = navigation.emit({
|
||||
type: 'tabPress',
|
||||
target: route.key,
|
||||
canPreventDefault: true,
|
||||
});
|
||||
|
||||
if (!isFocused && !event.defaultPrevented) {
|
||||
navigation.navigate(route.name, route.params);
|
||||
}
|
||||
};
|
||||
|
||||
const onLongPress = () => {
|
||||
navigation.emit({
|
||||
type: 'tabLongPress',
|
||||
target: route.key,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={route.key}
|
||||
accessibilityRole="button"
|
||||
accessibilityState={isFocused ? { selected: true } : {}}
|
||||
accessibilityLabel={options.tabBarAccessibilityLabel}
|
||||
testID={options.tabBarButtonTestID}
|
||||
onPress={onPress}
|
||||
onLongPress={onLongPress}
|
||||
style={styles.tabItem}
|
||||
>
|
||||
<Ionicons
|
||||
name={iconName}
|
||||
size={24}
|
||||
color={isFocused ? '#4F46E5' : '#6B7280'}
|
||||
/>
|
||||
<Text style={[styles.tabLabel, { color: isFocused ? '#4F46E5' : '#6B7280' }]}>
|
||||
{label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Main Tab Navigator Component ---
|
||||
const ManagementTabNavigation: React.FC<Props> = ({ route }) => {
|
||||
const { groupId } = route.params
|
||||
|
||||
return (
|
||||
<Tab.Navigator
|
||||
// Assign the custom floating tab bar
|
||||
tabBar={props => <FloatingTabBar {...props} />}
|
||||
screenOptions={{
|
||||
headerShown: false, // Hides the default header for all screens in the tab
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="EditGroup"
|
||||
component={EditGroupScreen}
|
||||
// Pass the groupId to the EditGroupScreen as an initial parameter
|
||||
initialParams={{ groupId }}
|
||||
options={{
|
||||
tabBarLabel: 'Settings',
|
||||
// Custom prop to define the icon for our FloatingTabBar
|
||||
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Payments"
|
||||
component={Payments}
|
||||
// Pass the groupId to the EditGroupScreen as an initial parameter
|
||||
initialParams={{ groupId }}
|
||||
options={{
|
||||
tabBarLabel: 'Payments',
|
||||
|
||||
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Member"
|
||||
component={Member}
|
||||
// Pass the groupId to the EditGroupScreen as an initial parameter
|
||||
initialParams={{ groupId }}
|
||||
options={{
|
||||
tabBarLabel: 'Members',
|
||||
|
||||
}}
|
||||
/>
|
||||
{/* You can easily add more tabs here in the future */}
|
||||
</Tab.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
const styles = StyleSheet.create({
|
||||
tabBarContainer: {
|
||||
flexDirection: 'row',
|
||||
position: 'absolute',
|
||||
left: 30,
|
||||
right: 30,
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 60,
|
||||
paddingVertical: 4,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 4,
|
||||
},
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 10,
|
||||
elevation: 8,
|
||||
},
|
||||
tabItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 8,
|
||||
},
|
||||
tabLabel: {
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
export default ManagementTabNavigation;
|
||||
@@ -0,0 +1,297 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
FlatList,
|
||||
ActivityIndicator,
|
||||
SafeAreaView,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons"; // Assuming you use Expo or have vector icons installed
|
||||
import { apiCall } from '../../utils/ApiHelper'; // Adjust path to your apiCall utility
|
||||
import AppView from '../../components/AppView';
|
||||
import colors from '../../components/colors';
|
||||
import { useRoute } from '@react-navigation/native';
|
||||
|
||||
// --- Type Definitions ---
|
||||
interface Member {
|
||||
id: string;
|
||||
userId: number;
|
||||
firstName: string;
|
||||
lastName: string | null;
|
||||
mobile: string;
|
||||
gender: string;
|
||||
email: string;
|
||||
username: string;
|
||||
address: string;
|
||||
role: 'USER' | 'ORGANIZER';
|
||||
}
|
||||
|
||||
interface ApiResponse {
|
||||
message: string;
|
||||
status: string;
|
||||
statusCode: number;
|
||||
data: Member[];
|
||||
}
|
||||
|
||||
// --- Main Screen Component ---
|
||||
// This assumes the component receives `groupId` from a navigator (e.g., Tab Navigator)
|
||||
const MemberScreen = ({ route }) => {
|
||||
|
||||
const { groupId } = route.params;
|
||||
const [members, setMembers] = useState<Member[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchMembers = useCallback(async () => {
|
||||
if (!groupId) {
|
||||
setError('Group ID is missing.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await apiCall<ApiResponse>(
|
||||
`https://exotic-humpback-mistakenly.ngrok-free.app/api/fund/group/all/member?groupId=${groupId}`,
|
||||
'GET'
|
||||
);
|
||||
|
||||
if (response && response.status === 'success') {
|
||||
setMembers(response.data);
|
||||
setError(null);
|
||||
} else {
|
||||
throw new Error(response?.message || 'Failed to fetch members.');
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message || 'An unexpected network error occurred.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [groupId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMembers();
|
||||
}, [fetchMembers]);
|
||||
|
||||
// --- Render Functions ---
|
||||
const renderItem = ({ item }: { item: Member }) => {
|
||||
const fullName = `${item.firstName} ${item.lastName || ''}`.trim();
|
||||
const initial = item.firstName ? item.firstName.charAt(0).toUpperCase() : '?';
|
||||
const isOrganizer = item.role === 'ORGANIZER';
|
||||
|
||||
return (
|
||||
|
||||
<TouchableOpacity style={styles.card}>
|
||||
<View style={styles.avatarPlaceholder}>
|
||||
<Text style={styles.avatarText}>{initial}</Text>
|
||||
</View>
|
||||
<View style={styles.infoContainer}>
|
||||
<View style={{flexDirection:"row",justifyContent:"space-between"}}>
|
||||
<Text style={styles.name}>{fullName}</Text>
|
||||
{isOrganizer && (
|
||||
<View style={styles.organizerIcon}>
|
||||
<Text>Orginzer</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.username}>@{item.username}</Text>
|
||||
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<ActivityIndicator size="large" color="#4F46E5" />
|
||||
<Text style={styles.loadingText}>Loading Members...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<Ionicons name="cloud-offline-outline" size={60} color="#EF4444" />
|
||||
<Text style={styles.errorTitle}>Oops!</Text>
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={fetchMembers}>
|
||||
<Text style={styles.retryButtonText}>Try Again</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (members.length === 0) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<Ionicons name="people-outline" size={60} color="#9CA3AF" />
|
||||
<Text style={styles.emptyTitle}>No Members Yet</Text>
|
||||
<Text style={styles.emptyText}>Invite people to join your group.</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={members}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={item => item.id}
|
||||
contentContainerStyle={styles.listContainer}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Group Members</Text>
|
||||
<Text style={styles.headerSubtitle}>{members.length} member(s)</Text>
|
||||
</View>
|
||||
{renderContent()}
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Styles ---
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F3F4F6',
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 20,
|
||||
paddingBottom: 12,
|
||||
backgroundColor: 'white',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: '#111827',
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: 16,
|
||||
color: '#6B7280',
|
||||
marginTop: 4,
|
||||
},
|
||||
listContainer: {
|
||||
padding: 16,
|
||||
},
|
||||
card: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#FFFFFF',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 16,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#374151',
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 10,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
elevation: 3,
|
||||
},
|
||||
avatarPlaceholder: {
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 26,
|
||||
backgroundColor: '#D1D5DB',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
avatarText: {
|
||||
color: '#4B5563',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
organizerIcon: {
|
||||
borderRadius: 10,
|
||||
padding: 2,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.pastelOrange
|
||||
},
|
||||
infoContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
name: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
},
|
||||
username: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
marginBottom: 8,
|
||||
},
|
||||
contactRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 4,
|
||||
},
|
||||
contactText: {
|
||||
marginLeft: 8,
|
||||
fontSize: 14,
|
||||
color: '#374151',
|
||||
},
|
||||
menuButton: {
|
||||
padding: 8,
|
||||
marginLeft: 8,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
loadingText: {
|
||||
marginTop: 10,
|
||||
fontSize: 16,
|
||||
color: '#6B7280',
|
||||
},
|
||||
errorTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
color: '#EF4444',
|
||||
marginBottom: 8,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 16,
|
||||
color: '#374151',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
retryButton: {
|
||||
backgroundColor: '#4F46E5',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 30,
|
||||
borderRadius: 8,
|
||||
},
|
||||
retryButtonText: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
emptyTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
color: '#374151',
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
}
|
||||
});
|
||||
|
||||
export default MemberScreen;
|
||||
@@ -0,0 +1,295 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { View, Text, StyleSheet, ActivityIndicator, ScrollView, RefreshControl, Alert, TouchableOpacity } from 'react-native';
|
||||
import { useRoute, useNavigation, RouteProp } from '@react-navigation/native';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import colors from '../../components/colors';
|
||||
import AppView from '../../components/AppView';
|
||||
import { apiCall } from '../../utils/ApiHelper';
|
||||
|
||||
// --- TYPE DEFINITIONS ---
|
||||
|
||||
// Generic API Response Wrapper
|
||||
interface ApiResponse<T> {
|
||||
status: 'success' | 'error';
|
||||
data: T;
|
||||
message?: string;
|
||||
statusCode: number;
|
||||
}
|
||||
|
||||
// Type for an individual participant in the payment details
|
||||
interface Participant {
|
||||
userId: string;
|
||||
userName: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
mobile: string;
|
||||
contributionAmount: number;
|
||||
paidAmount: number;
|
||||
status: 'SUCCESS' | 'PENDING';
|
||||
lateFee: number;
|
||||
daysLate: number;
|
||||
lateFeeWaived: boolean;
|
||||
}
|
||||
|
||||
// Fully typed payment details based on your JSON response
|
||||
interface PaymentDetails {
|
||||
groupId: string;
|
||||
groupName: string;
|
||||
currentCycle: number;
|
||||
cycleType: string;
|
||||
contributionAmount: number;
|
||||
totalContributedAmount: number;
|
||||
lateFeeMode: string;
|
||||
lateFeeValue: number;
|
||||
notReceivedAmount: number;
|
||||
totalLateFee: number;
|
||||
totalDueWithLateFee: number;
|
||||
participants: Participant[];
|
||||
}
|
||||
|
||||
// Assuming your navigation stack params look something like this
|
||||
type PaymentStackParamList = {
|
||||
Payments: { groupId: string };
|
||||
};
|
||||
|
||||
type PaymentsRouteProp = RouteProp<PaymentStackParamList, 'Payments'>;
|
||||
type PaymentsNavigationProp = StackNavigationProp<PaymentStackParamList>;
|
||||
|
||||
const Payments: React.FC = () => {
|
||||
const route = useRoute<PaymentsRouteProp>();
|
||||
const navigation = useNavigation<PaymentsNavigationProp>();
|
||||
const { groupId } = route.params;
|
||||
|
||||
const [paymentDetails, setPaymentDetails] = useState<PaymentDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const fetchPaymentDetails = useCallback(async () => {
|
||||
if (!refreshing) setLoading(true);
|
||||
try {
|
||||
const response = await apiCall(
|
||||
`https://exotic-humpback-mistakenly.ngrok-free.app/api/payments/current/payment/details/${groupId}`,
|
||||
'GET'
|
||||
) as ApiResponse<PaymentDetails>;
|
||||
|
||||
if (response && response.statusCode === 200) {
|
||||
setPaymentDetails(response.data);
|
||||
} else {
|
||||
Alert.alert("Error", response?.message || "Failed to fetch payment details.");
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Fetch payment details error:", error);
|
||||
Alert.alert("Error", error.message || "An unexpected error occurred.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [groupId, refreshing]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPaymentDetails();
|
||||
}, [fetchPaymentDetails]);
|
||||
|
||||
const onRefresh = () => {
|
||||
setRefreshing(true);
|
||||
};
|
||||
|
||||
// --- ENHANCED: renderParticipant now shows late fee details ---
|
||||
const renderParticipant = (participant: Participant) => {
|
||||
const isPending = participant.status === 'PENDING';
|
||||
return (
|
||||
<View key={participant.userId} style={styles.participantCard}>
|
||||
<View style={styles.participantInfo}>
|
||||
<Text style={styles.participantName}>{participant.firstName} {participant.lastName}</Text>
|
||||
<Text style={styles.participantMobile}>{participant.mobile}</Text>
|
||||
</View>
|
||||
<View style={styles.paymentStatus}>
|
||||
<Text style={[
|
||||
styles.statusText,
|
||||
{ color: isPending ? '#e0d626ff' : '#18b107ff' }
|
||||
]}>
|
||||
{participant.status}
|
||||
</Text>
|
||||
<Text style={styles.amountText}>
|
||||
{isPending ?`₹${participant.payAmount}`:`₹${participant.paidAmount}`}
|
||||
</Text>
|
||||
|
||||
{/* --- NEW: Conditionally render late payment stats --- */}
|
||||
{isPending && participant.daysLate > 0 && (
|
||||
<View style={styles.lateFeeContainer}>
|
||||
<Text style={styles.lateFeeText}>Late Fee: ₹{participant.lateFee}</Text>
|
||||
<Text style={styles.lateFeeText}>Days Late: {participant.daysLate}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading && !refreshing) {
|
||||
return <ActivityIndicator style={styles.centered} size="large" color={colors.primary} />;
|
||||
}
|
||||
|
||||
if (!paymentDetails) {
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<Text>No payment details found.</Text>
|
||||
<TouchableOpacity onPress={fetchPaymentDetails} style={styles.retryButton}>
|
||||
<Text style={styles.retryButtonText}>Tap to retry</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppView paddingHorizontal={0}>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={[colors.primary]} tintColor={colors.primary} />}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>{paymentDetails.groupName}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.summaryContainer}>
|
||||
<View style={styles.summaryBox}>
|
||||
<Text style={styles.summaryLabel}>Current Cycle</Text>
|
||||
<Text style={styles.summaryValue}>{paymentDetails.currentCycle}</Text>
|
||||
</View>
|
||||
<View style={styles.summaryBox}>
|
||||
<Text style={styles.summaryLabel}>Contribution</Text>
|
||||
<Text style={styles.summaryValue}>₹{paymentDetails.contributionAmount}</Text>
|
||||
</View>
|
||||
<View style={styles.summaryBox}>
|
||||
<Text style={styles.summaryLabel}>Total Due</Text>
|
||||
<Text style={[styles.summaryValue, { color: colors.danger }]}>₹{paymentDetails.totalDueWithLateFee}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.sectionTitle}>Participants</Text>
|
||||
{paymentDetails.participants.map(renderParticipant)}
|
||||
</ScrollView>
|
||||
</AppView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f4f6f8',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f4f6f8',
|
||||
},
|
||||
header: {
|
||||
padding: 20,
|
||||
paddingBottom: 15,
|
||||
},
|
||||
headerTitle: {
|
||||
color: '#000000',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
summaryContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
padding: 20,
|
||||
backgroundColor: '#fff',
|
||||
marginHorizontal: 15,
|
||||
borderRadius: 12,
|
||||
elevation: 2,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
},
|
||||
summaryBox: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
summaryLabel: {
|
||||
fontSize: 14,
|
||||
color: '#6c757d',
|
||||
marginBottom: 4,
|
||||
},
|
||||
summaryValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: colors.primary,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
marginLeft: 20,
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
color: '#343a40',
|
||||
},
|
||||
participantCard: {
|
||||
backgroundColor: '#fff',
|
||||
marginHorizontal: 15,
|
||||
marginBottom: 10,
|
||||
borderRadius: 10,
|
||||
padding: 15,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
elevation: 1,
|
||||
},
|
||||
participantInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
participantName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#212529',
|
||||
},
|
||||
participantMobile: {
|
||||
fontSize: 14,
|
||||
color: '#6c757d',
|
||||
marginTop: 2,
|
||||
},
|
||||
paymentStatus: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
amountText: {
|
||||
fontSize: 14,
|
||||
color: '#495057',
|
||||
marginTop: 2,
|
||||
},
|
||||
// --- NEW STYLES ---
|
||||
lateFeeContainer: {
|
||||
marginTop: 8,
|
||||
paddingTop: 5,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e9ecef',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
lateFeeText: {
|
||||
fontSize: 13,
|
||||
color: colors.danger,
|
||||
fontWeight: '600',
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: 20,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 8,
|
||||
backgroundColor: colors.primary,
|
||||
},
|
||||
retryButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
|
||||
export default Payments;
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
ScrollView,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
SafeAreaView,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
@@ -16,17 +15,17 @@ import { CustomInput, CustomButton } from "../../components/common/Custom";
|
||||
import colors from "../../components/colors";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import AppView from "../../components/AppView";
|
||||
import Ionicons from "@react-native-vector-icons/ionicons";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
|
||||
const BecomeOrg = () => {
|
||||
const navigation = useNavigation<any>();
|
||||
const [bankAccountNumber, setBankAccountNumber] = useState("");
|
||||
const [bankName, setBankName] = useState("");
|
||||
const [branchCode, setBranchCode] = useState("");
|
||||
const [idName, setIdName] = useState("");
|
||||
const [idNumber, setIdNumber] = useState("");
|
||||
const [issueDate, setIssueDate] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!bankAccountNumber || !bankName || !branchCode) {
|
||||
if (!idName || !idNumber || !issueDate) {
|
||||
Alert.alert("Error", "Please fill all fields");
|
||||
return;
|
||||
}
|
||||
@@ -35,7 +34,10 @@ const BecomeOrg = () => {
|
||||
setLoading(true);
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
Alert.alert("Error", "You are not logged in. Please log in to continue.");
|
||||
setLoading(false);
|
||||
// Optionally navigate to login screen
|
||||
// navigation.navigate("Login");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
@@ -45,31 +47,31 @@ const BecomeOrg = () => {
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
bankAccountNumber,
|
||||
bankName,
|
||||
branchCode,
|
||||
idName,
|
||||
idNumber,
|
||||
issueDate,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Organizer registration applied successfully");
|
||||
setBankAccountNumber("");
|
||||
setBankName("");
|
||||
setBranchCode("");
|
||||
|
||||
if (response.ok && result.status === "success") {
|
||||
Alert.alert("Success", "Organizer registration application submitted successfully!");
|
||||
setIdName("");
|
||||
setIdNumber("");
|
||||
setIssueDate("");
|
||||
navigation.navigate("Home" as never);
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to apply");
|
||||
Alert.alert("Error", result.message || "Failed to submit application");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Registration error:", error);
|
||||
Alert.alert("Error", "Something went wrong");
|
||||
Alert.alert("Error", "An unexpected error occurred. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -78,11 +80,11 @@ const BecomeOrg = () => {
|
||||
return (
|
||||
<AppView barStyle="dark-content">
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity onPress={() => navigation.replace("Home" as never)} >
|
||||
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
|
||||
<Ionicons name="arrow-back" size={24} color={'#000'} />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>Become Organizer</Text>
|
||||
|
||||
<Text style={styles.headerTitle}>Become an Organizer</Text>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
@@ -93,37 +95,42 @@ const BecomeOrg = () => {
|
||||
contentContainerStyle={styles.container}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<Text style={styles.title}>Organizer Registration</Text>
|
||||
<Text style={styles.title}>Submit Your ID for Verification</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Please provide your official identification details to become a verified organizer.
|
||||
</Text>
|
||||
|
||||
<CustomInput
|
||||
placeholder="Bank Account Number"
|
||||
keyboardType="numeric"
|
||||
value={bankAccountNumber}
|
||||
onChangeText={setBankAccountNumber}
|
||||
icon="card-outline" error={""} />
|
||||
placeholder="ID Name (e.g., Aadhaar, PAN Card)"
|
||||
value={idName}
|
||||
onChangeText={setIdName}
|
||||
icon="person-outline"
|
||||
error={""}
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
placeholder="Bank Name"
|
||||
value={bankName}
|
||||
onChangeText={setBankName}
|
||||
icon="business-outline"
|
||||
placeholder="ID Number"
|
||||
value={idNumber}
|
||||
onChangeText={setIdNumber}
|
||||
icon="card-outline"
|
||||
error=""
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
placeholder="Branch Code"
|
||||
value={branchCode}
|
||||
onChangeText={setBranchCode}
|
||||
icon="key-outline"
|
||||
placeholder="Issue Date (YYYY-MM-DD)"
|
||||
value={issueDate}
|
||||
onChangeText={setIssueDate}
|
||||
icon="calendar-outline"
|
||||
error=""
|
||||
/>
|
||||
|
||||
<CustomButton
|
||||
title={loading ? "Submitting..." : "Request Organizer Role"}
|
||||
onPress={handleSubmit}
|
||||
|
||||
icon="send-outline"
|
||||
buttonBackground={colors.pastelBlue}
|
||||
style={{ opacity: loading ? 0.6 : 1 }}
|
||||
style={{ opacity: loading ? 0.6 : 1, marginTop: 20 }}
|
||||
/>
|
||||
|
||||
{loading && (
|
||||
@@ -148,23 +155,38 @@ const styles = StyleSheet.create({
|
||||
justifyContent: "center",
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontSize: 24,
|
||||
fontWeight: "700",
|
||||
marginBottom: 20,
|
||||
marginBottom: 10,
|
||||
textAlign: "center",
|
||||
color: colors.textDark,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
color: colors.textDark,
|
||||
marginBottom: 30,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 16,
|
||||
borderBottomLeftRadius: 20,
|
||||
borderBottomRightRadius: 20,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: '#FFF',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E0E0E0',
|
||||
},
|
||||
backButton: {
|
||||
padding: 5,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 22,
|
||||
fontWeight: "700",
|
||||
color: "#000"
|
||||
flex: 1,
|
||||
fontSize: 20,
|
||||
fontWeight: "600",
|
||||
color: "#000",
|
||||
textAlign: "center",
|
||||
},
|
||||
placeholder: {
|
||||
width: 24, // to balance the back button
|
||||
},
|
||||
});
|
||||
|
||||
+12
-2
@@ -19,7 +19,8 @@ export async function apiCall<T>(
|
||||
try {
|
||||
// Get saved credentials from Keychain
|
||||
const creds = await Keychain.getGenericPassword();
|
||||
// console.log("hihihi", creds);
|
||||
console.log("Keychain Credentials Found:", creds); // Log if creds were found
|
||||
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
...(creds ? { Authorization: `Bearer ${creds.password}` } : {}),
|
||||
@@ -34,6 +35,12 @@ export async function apiCall<T>(
|
||||
headers,
|
||||
});
|
||||
|
||||
// --- Response Logging ---
|
||||
console.log(`--- API Response: [${response.status}] ${url} ---`);
|
||||
// Uncomment the line below to see the full response data in logs
|
||||
// console.log("Response Data:", JSON.stringify(response.data, null, 2));
|
||||
console.log("---------------------------------------");
|
||||
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
if (error.response) {
|
||||
@@ -53,6 +60,9 @@ export async function apiCall<T>(
|
||||
// Something else went wrong while setting up the request
|
||||
console.error("API Error:", error);
|
||||
}
|
||||
return null; // return null so the caller can handle it
|
||||
console.error("-----------------");
|
||||
|
||||
// Re-throw the error so that the calling function can handle it if needed
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
+105735
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user