chenging ui design where needed

This commit is contained in:
Jaanu423
2025-11-27 13:38:38 +05:30
parent e03a695734
commit b6d40f7255
4 changed files with 50 additions and 32 deletions
+38 -17
View File
@@ -7,8 +7,6 @@ import AppView from '../../components/AppView';
import { apiCall } from '../../utils/ApiHelper'; import { apiCall } from '../../utils/ApiHelper';
import { BASE_URL } from '../../utils/ApiUrls'; import { BASE_URL } from '../../utils/ApiUrls';
// --- CONSTANTS ---
const API_BASE_URL = 'http://192.168.1.5:9060/api/payments';
// --- TYPE DEFINITIONS --- // --- TYPE DEFINITIONS ---
interface ApiResponse<T> { interface ApiResponse<T> {
@@ -26,9 +24,12 @@ interface Participant {
contributionAmount: number; contributionAmount: number;
paidAmount: number; paidAmount: number;
payAmount?: number; payAmount?: number;
status: 'SUCCESS' | 'PENDING'; status: 'SUCCESS' | 'PENDING' | 'FAILED' | 'UNPAID';
lateFee: number; lateFee: number;
lateFeeWaived: boolean; lateFeeWaived: boolean;
totalPaidAmount: string;
expectedAmount: number;
waivedAmount:number
} }
interface PaymentDetails { interface PaymentDetails {
@@ -80,10 +81,11 @@ const Payments: React.FC = () => {
try { try {
const response = await apiCall(`${BASE_URL}payments/current/payment/details/${groupId}`, 'GET') as ApiResponse<PaymentDetails>; const response = await apiCall(`${BASE_URL}payments/current/payment/details/${groupId}`, 'GET') as ApiResponse<PaymentDetails>;
// console.log("fchffryjtc", response)
if (response && response.statusCode === 200) { if (response && response.statusCode === 200) {
setPaymentDetails(response.data); setPaymentDetails(response.data);
} else if (response && response.statusCode === 400) { } else if (response && response.statusCode === 400) {
setIsGroupActive(false); setIsGroupActive(false);
setPaymentDetails(null); setPaymentDetails(null);
} else { } else {
@@ -118,7 +120,8 @@ const Payments: React.FC = () => {
}; };
const handleWaiveFee = async () => { const handleWaiveFee = async () => {
if (!currentParticipant || !paymentDetails) return; console.log("first approch ")
// if (!currentParticipant || !paymentDetails) console.log("second approch ") ;
const amountToWaive = parseFloat(waiverAmount); const amountToWaive = parseFloat(waiverAmount);
@@ -133,8 +136,10 @@ const Payments: React.FC = () => {
} }
try { try {
const url = `https://api.godemo.in/FundCollect/api/payments/groups/${groupId}/cycles/${paymentDetails.currentCycle}/waive/${currentParticipant.userId}?amountToWaive=${amountToWaive}`; const url = `${BASE_URL}payments/groups/${groupId}/cycles/${paymentDetails.currentCycle}/waive/${currentParticipant.userId}?amountToWaive=${amountToWaive}`;
const response = await apiCall(url, 'PUT', {}) as any; const response = await apiCall(url, 'PUT', {}) as any;
console.log("vtitttit hbfbf sjbj j b", response)
if (response && response.statusCode === 200) { if (response && response.statusCode === 200) {
ToastAndroid.show(`₹${amountToWaive} has been waived successfully.`, ToastAndroid.SHORT); ToastAndroid.show(`₹${amountToWaive} has been waived successfully.`, ToastAndroid.SHORT);
@@ -151,8 +156,8 @@ const Payments: React.FC = () => {
// --- RENDER LOGIC --- // --- RENDER LOGIC ---
const renderParticipant = (participant: Participant) => { const renderParticipant = (participant: Participant) => {
const isPending = participant.status === 'PENDING'; const isPending = participant.status === 'UNPAID';
const canWaive = isPending && participant.lateFee > 0 && !participant.lateFeeWaived; const canWaive = participant.lateFee > 0 && isPending
return ( return (
<View key={participant.userId} style={styles.participantCard}> <View key={participant.userId} style={styles.participantCard}>
@@ -162,16 +167,32 @@ const Payments: React.FC = () => {
</View> </View>
<View style={styles.paymentStatus}> <View style={styles.paymentStatus}>
<Text style={[styles.statusText, { color: isPending ? colors.warning : colors.success }]}> <Text style={[styles.statusText, {
color: participant.status === "PENDING"
? colors.warning
: participant.status === "FAILED"
? 'red'
: participant.status === "UNPAID" ? '#f68a89' : colors.success
}]}>
{participant.status} {participant.status}
</Text> </Text>
<Text style={styles.amountText}> {participant.status === "UNPAID" && <Text style={styles.amountText}>
{isPending ? `₹${participant.payAmount || 0}` : `₹${participant.paidAmount}`} {`₹${participant?.expectedAmount} `}
</Text> </Text>}
{isPending && participant.lateFee > 0 && ( {participant.status === "SUCCESS" && <Text style={styles.amountText}>
{`₹${participant?.totalPaidAmount}`}
</Text>}
{/* <Text style={styles.amountText}>
{isPending ? `₹${participant.payAmount || 0}` : `₹${participant.totalPaidAmount}`}
</Text> */}
{participant.lateFee > 0 && (
<Text style={styles.lateFeeText}>Late Fee: ₹{participant.lateFee}</Text> <Text style={styles.lateFeeText}>Late Fee: ₹{participant.lateFee}</Text>
)} )}
{participant.lateFeeWaived && <Text style={styles.waivedText}>Fee Waived</Text>} {/* {participant.lateFeeWaived && <Text style={styles.waivedText}>Fee Waived</Text>} */}
{
participant?.lateFeeWaived && <Text>Waived Amount : {participant?.waivedAmount}</Text>
}
</View> </View>
<View style={styles.menuContainer}> <View style={styles.menuContainer}>
@@ -219,7 +240,7 @@ const Payments: React.FC = () => {
</Modal> </Modal>
{loading && !refreshing ? ( {loading && !refreshing ? (
<ActivityIndicator style={{marginTop: 50}} size="large" color={colors.primary} /> <ActivityIndicator style={{ marginTop: 50 }} size="large" color={colors.primary} />
) : !isGroupActive ? ( ) : !isGroupActive ? (
<View style={styles.fullScreenMessage}> <View style={styles.fullScreenMessage}>
<Ionicons name="warning-outline" size={40} color={colors.black} /> <Ionicons name="warning-outline" size={40} color={colors.black} />
@@ -247,7 +268,7 @@ const Payments: React.FC = () => {
</View> </View>
<View style={styles.summaryBox}> <View style={styles.summaryBox}>
<Text style={styles.summaryLabel}>Contribution</Text> <Text style={styles.summaryLabel}>Contribution</Text>
<Text style={styles.summaryValue}>₹{paymentDetails.contributionAmount}</Text> <Text style={styles.summaryValue}>₹ {paymentDetails.contributionAmount}</Text>
</View> </View>
<View style={styles.summaryBox}> <View style={styles.summaryBox}>
<Text style={styles.summaryLabel}>Total Amount</Text> <Text style={styles.summaryLabel}>Total Amount</Text>
@@ -255,7 +276,7 @@ const Payments: React.FC = () => {
</View> </View>
</View> </View>
<Text style={styles.sectionTitle}>Participants</Text> <Text style={styles.sectionTitle}>Participants</Text>
{ paymentDetails?.cycleCompleted && {paymentDetails?.cycleCompleted &&
<Text style={{ marginLeft: 20, marginBottom: 10, color: '#6c757d' }}>Next Cycle from : {paymentDetails?.nextCycleStart}</Text> <Text style={{ marginLeft: 20, marginBottom: 10, color: '#6c757d' }}>Next Cycle from : {paymentDetails?.nextCycleStart}</Text>
}{paymentDetails.participants.map(renderParticipant)} }{paymentDetails.participants.map(renderParticipant)}
</> </>
+4 -4
View File
@@ -212,10 +212,10 @@ const Notification = () => {
{/* Header with actions */} {/* Header with actions */}
<Header <Header
title={`Notifications ${unreadCount > 0 ? `(${unreadCount})` : ''}`} arrowColor='#000' titleColor='#000'/> title={`Notifications ${unreadCount > 0 ? `(${unreadCount})` : ''}`} arrowColor='#000' titleColor='#000'/>
<View style={styles.headerActions}> {/* <View style={styles.headerActions}>
{unreadCount > 0 && ( {unreadCount > 0 && (
<LinearGradient <LinearGradient
colors={[colors.primary, colors.pastelPink]} // Pastel Green gradient colors={[colors.primary, colors.primary]} // Pastel Green gradient
style={[styles.headerButton, styles.markReadButton]}> style={[styles.headerButton, styles.markReadButton]}>
<TouchableOpacity onPress={handleMarkAllAsRead}> <TouchableOpacity onPress={handleMarkAllAsRead}>
<Text style={styles.headerButtonText}>Mark All Read</Text> <Text style={styles.headerButtonText}>Mark All Read</Text>
@@ -224,14 +224,14 @@ const Notification = () => {
)} )}
{notifications.length > 0 && ( {notifications.length > 0 && (
<LinearGradient <LinearGradient
colors={[colors.pastelPink, colors.pastelBlue]} // Pastel Pink to Pastel Orange gradient colors={[colors.pastelPink, colors.primary]} // Pastel Pink to Pastel Orange gradient
style={styles.headerButton}> style={styles.headerButton}>
<TouchableOpacity onPress={handleClearAll}> <TouchableOpacity onPress={handleClearAll}>
<Text style={styles.headerButtonText}>Clear All</Text> <Text style={styles.headerButtonText}>Clear All</Text>
</TouchableOpacity> </TouchableOpacity>
</LinearGradient> </LinearGradient>
)} )}
</View> </View> */}
{/* Notification List */} {/* Notification List */}
<FlatList <FlatList
+1 -4
View File
@@ -57,7 +57,7 @@ const formatINR = (amount: number) => {
}; };
const StatusBadge: React.FC<{ status?: string }> = ({ status }) => { const StatusBadge: React.FC<{ status?: string }> = ({ status }) => {
const text = status ?? "UNKNOWN"; const text = status ?? "FAILED";
const color = const color =
text === "SUCCESS" ? styles.statusSuccess : text === "PENDING" ? styles.statusPending : styles.statusFailed; text === "SUCCESS" ? styles.statusSuccess : text === "PENDING" ? styles.statusPending : styles.statusFailed;
@@ -142,10 +142,7 @@ const TransactionsList: React.FC = () => {
return ( return (
<AppView> <AppView>
<Header title="transactions" titleColor={colors.Home} arrowColor={colors.Home} /> <Header title="transactions" titleColor={colors.Home} arrowColor={colors.Home} />
<Text style={styles.headerTitle}>{message}</Text> <Text style={styles.headerTitle}>{message}</Text>
<FlatList <FlatList
data={transactions} data={transactions}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
+1 -1
View File
@@ -1,6 +1,6 @@
// export const BASE_URL = "https://11.godemo.in/FundCollect/api/" // export const BASE_URL = "https://11.godemo.in/FundCollect/api/"
export const BASE_URL = "http://192.168.1.8:9060/api/" export const BASE_URL = "http://192.168.1.5:9060/api/"
export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=` export const LOGIN_URL = `${BASE_URL}user/generate/otp?mobiles=`
export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify` export const VARIFY_OTP_URL = `${BASE_URL}user/otp/verify`
export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply` export const ORGRAGISTRATION = `${BASE_URL}organizer/registration/apply`