606 lines
20 KiB
TypeScript
606 lines
20 KiB
TypeScript
import { StyleSheet, Text, View, ScrollView, StatusBar, TouchableOpacity, RefreshControl, ActivityIndicator, Platform } from 'react-native'
|
|
import React, { useCallback, useEffect } from 'react'
|
|
import { InsideHeader } from '../../Component/Index'
|
|
import colors from '../../Constant/Color'
|
|
import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native'
|
|
import { useFetchTenderById, useProceedToBid } from '../../Services/BBPS/Hooks'
|
|
|
|
const ProceedToBidDetail = () => {
|
|
// Sample data based on your JSON
|
|
const route = useRoute<any>();
|
|
const tenderDataId = route.params?.tender;
|
|
const { data, refetch, isRefetching } = useProceedToBid(tenderDataId?.tenderId);
|
|
const { data: tenderResponse, refetch: tenderRefetch }: any = useFetchTenderById(tenderDataId?.tenderId);
|
|
const tenderData = tenderResponse?.data;
|
|
console.log("dataopop",tenderData)
|
|
const [refreshing, setRefreshing] = React.useState(false);
|
|
const [loading, setLoading] = React.useState(false);
|
|
|
|
// console.log("proceed to bid tender detail : ", tenderDataId)
|
|
// console.log("proceed to data detail : ", data)
|
|
// console.log("tender data for updated : ", tenderData)
|
|
const navigation = useNavigation<any>()
|
|
// Format date from array
|
|
|
|
const handleStartBidding = () => {
|
|
setLoading(true);
|
|
try {
|
|
setLoading(true);
|
|
|
|
navigation.navigate('TenderBidding', { tenderId: tenderDataId.tenderId });
|
|
|
|
} catch (error) {
|
|
console.log("Error in starting bidding: ", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
|
|
}
|
|
const formatDate = (dateArray: any[]) => {
|
|
if (!dateArray || dateArray.length < 3) return "N/A";
|
|
const [year, month, day, hour = 0, minute = 0] = dateArray;
|
|
return `${day.toString().padStart(2, '0')}/${month.toString().padStart(2, '0')}/${year} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
// Status indicator component
|
|
const StatusIndicator = ({ status, label }: { status: boolean; label: string }) => (
|
|
<View style={styles.statusContainer}>
|
|
<View style={[styles.statusDot, { backgroundColor: status ? colors.success : colors.error }]} />
|
|
<Text style={[styles.statusText, { color: status ? colors.success : colors.error }]}>
|
|
{label}: {status ? "Submitted" : "Not Submitted"}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
// Envelope log card component
|
|
const EnvelopeLogCard = ({ log, title }: { log: any; title: string }) => (
|
|
<View style={styles.envelopeCard}>
|
|
<View style={styles.cardHeader}>
|
|
<Text style={styles.cardTitle}>{title}</Text>
|
|
<View style={[styles.envelopeBadge, { backgroundColor: colors.primary }]}>
|
|
<Text style={styles.envelopeBadgeText}>{log?.envelope}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.logDetailRow}>
|
|
<Text style={styles.label}>Activity:</Text>
|
|
<Text style={styles.value}>{log?.activity}</Text>
|
|
</View>
|
|
|
|
<View style={styles.logDetailRow}>
|
|
<Text style={styles.label}>Date & Time:</Text>
|
|
<Text style={styles.value}>{log?.dateTime}</Text>
|
|
</View>
|
|
|
|
<View style={styles.logDetailRow}>
|
|
<Text style={styles.label}>System Info:</Text>
|
|
<Text style={styles.value}>{log?.osName} / {log?.browserName}</Text>
|
|
</View>
|
|
|
|
<View style={styles.logDetailRow}>
|
|
<Text style={styles.label}>IP Address:</Text>
|
|
<Text style={styles.value}>{log?.ipAddress}</Text>
|
|
</View>
|
|
|
|
<View style={styles.logDetailRow}>
|
|
<Text style={styles.label}>Status Message:</Text>
|
|
<Text style={[styles.value, styles.successText]}>{log?.logMessage}</Text>
|
|
</View>
|
|
|
|
{log?.headingMsg && (
|
|
<View style={styles.logDetailRow}>
|
|
<Text style={styles.label}>Heading:</Text>
|
|
<Text style={styles.value}>{log?.headingMsg}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
|
|
// Information row component
|
|
const InfoRow = ({ label, value, isHighlighted = false }: { label: string; value: string; isHighlighted?: boolean }) => (
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>{label}:</Text>
|
|
<Text style={[styles.infoValue, isHighlighted && styles.highlightedValue]}>{value}</Text>
|
|
</View>
|
|
);
|
|
|
|
// Feature chip component
|
|
const FeatureChip = ({ label, enabled }: { label: string; enabled: boolean }) => (
|
|
<View style={[styles.chip, { backgroundColor: enabled ? colors.successLight : colors.lightGray }]}>
|
|
<Text style={[styles.chipText, { color: enabled ? colors.success : colors.darkGray }]}>
|
|
{label} {enabled ? '✓' : '✗'}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
const onRefresh = async () => {
|
|
try {
|
|
setRefreshing(true);
|
|
await refetch();
|
|
} finally {
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
tenderRefetch();
|
|
}, [tenderData?.tenderId])
|
|
);
|
|
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: colors.white }}>
|
|
<InsideHeader title="Tender Detail" showArrow />
|
|
|
|
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refreshing}
|
|
onRefresh={onRefresh}
|
|
colors={[colors.primary]} // Android
|
|
tintColor={colors.primary} // iOS
|
|
/>
|
|
}>
|
|
{/* Tender Header Section */}
|
|
<View style={styles.headerCard}>
|
|
<View style={styles.tenderHeader}>
|
|
<View>
|
|
<Text style={styles.tenderNumber}>{tenderData?.tenderNumber}</Text>
|
|
<Text style={styles.tenderId}>ID: {tenderData?.tenderId}</Text>
|
|
</View>
|
|
<View style={[styles.statusBadge, { backgroundColor: tenderData?.biddingStatus ? colors.success : colors.warning }]}>
|
|
<Text style={styles.statusBadgeText}>
|
|
{tenderData?.biddingStatus ? "Active" : "Inactive"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.workDescription}>{tenderData?.nameofWork}</Text>
|
|
|
|
<View style={styles.headerInfoRow}>
|
|
<View style={styles.headerInfoItem}>
|
|
<Text style={styles.headerInfoLabel}>NIT No.</Text>
|
|
<Text style={styles.headerInfoValue}>{tenderData?.nitNo}</Text>
|
|
</View>
|
|
<View style={styles.separator} />
|
|
<View style={styles.headerInfoItem}>
|
|
<Text style={styles.headerInfoLabel}>EMD Amount</Text>
|
|
<Text style={styles.headerInfoValue}>₹{tenderData?.emdInFig}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Envelope Submission Status */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Envelope Submission Status</Text>
|
|
<View style={styles.statusGrid}>
|
|
<StatusIndicator status={tenderData?.envelopeASubmittStatus} label="Envelope A" />
|
|
{tenderData?.showEB &&<StatusIndicator status={tenderData?.envelopeBSubmittStatus} label="Envelope B" />}
|
|
{tenderData?.showEC &&<StatusIndicator status={tenderData?.envelopeCSubmittStatus} label="Envelope C" />}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Envelope Logs */}
|
|
{tenderData?.envelopeA_Logs && (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Submission Logs</Text>
|
|
{tenderData?.envelopeA_Logs && <EnvelopeLogCard log={tenderData?.envelopeA_Logs} title="Envelope A Submission" />}
|
|
{tenderData?.envelopeB_Logs && <EnvelopeLogCard log={tenderData?.envelopeB_Logs} title="Envelope B Submission" />}
|
|
{tenderData?.envelopeC_Logs && <EnvelopeLogCard log={tenderData?.envelopeC_Logs} title="Envelope C Submission" />}
|
|
</View>
|
|
)}
|
|
|
|
{/* Tender Details */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Tender Details</Text>
|
|
<View style={styles.detailsCard}>
|
|
<InfoRow label="Envelope Type" value={tenderData?.envelopeType} />
|
|
<InfoRow label="Tender Stages" value={tenderData?.tenderStages} />
|
|
<InfoRow label="Bid Withdrawal" value={tenderData?.bidWithDraw} isHighlighted={tenderData?.bidWithdrawStatus} />
|
|
<InfoRow label="Re-bid" value={tenderData?.reBid} />
|
|
<InfoRow label="DSC Status" value={tenderData?.dscStatus ? "Required" : "Not Required"} />
|
|
</View>
|
|
</View>
|
|
|
|
{/* Time Period */}
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Submission Time Period</Text>
|
|
<View style={styles.timeCard}>
|
|
<View style={styles.timeRow}>
|
|
<Text style={styles.timeLabel}>Starts On:</Text>
|
|
<Text style={styles.timeValue}>{formatDate(tenderData?.submittedStartDate)}</Text>
|
|
</View>
|
|
<View style={styles.timeRow}>
|
|
<Text style={styles.timeLabel}>Ends On:</Text>
|
|
<Text style={styles.timeValue}>{formatDate(tenderData?.submittedEndDate)}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Feature Flags
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Available Features</Text>
|
|
<View style={styles.chipsContainer}>
|
|
<FeatureChip label="View Bid" enabled={tenderData?.viewBid} />
|
|
<FeatureChip label="Proceed to Bid" enabled={tenderData?.proceedtoBid} />
|
|
<FeatureChip label="Show Envelope B" enabled={tenderData?.showEB} />
|
|
<FeatureChip label="Show Envelope C" enabled={tenderData?.showEC} />
|
|
<FeatureChip label="QCBS" enabled={tenderData?.showQCBS} />
|
|
<FeatureChip label="LCS" enabled={tenderData?.showLCS} />
|
|
</View>
|
|
</View> */}
|
|
|
|
{/* Final Status */}
|
|
<View style={styles.finalStatusCard}>
|
|
<Text style={styles.finalStatusTitle}>Overall Status</Text>
|
|
<View style={styles.finalStatusRow}>
|
|
<Text style={styles.finalStatusLabel}>All Envelopes Submitted:</Text>
|
|
<Text style={[styles.finalStatusValue,
|
|
{
|
|
color: tenderData?.envelopeASubmittStatus && tenderData?.envelopeBSubmittStatus && tenderData?.envelopeCSubmittStatus
|
|
? colors.success : colors.error
|
|
}]}>
|
|
{tenderData?.envelopeASubmittStatus && tenderData?.envelopeBSubmittStatus && tenderData?.envelopeCSubmittStatus
|
|
? "COMPLETED" : "PENDING"}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.finalStatusRow}>
|
|
<Text style={styles.finalStatusLabel}>Bidding Status:</Text>
|
|
<Text style={[styles.finalStatusValue,
|
|
{ color: tenderData?.biddingStatus ? colors.success : colors.error }]}>
|
|
{tenderData?.biddingStatus ? "ACTIVE" : "CLOSED"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.footerSpace} />
|
|
</ScrollView>
|
|
|
|
<View style={styles.footer}>
|
|
{
|
|
tenderData?.proceedtoBid && !tenderData?.viewBid && tenderData?.biddingStatus && tenderData?.bidWithdrawStatus === false ? (
|
|
|
|
<TouchableOpacity style={styles.proceedButton} onPress={handleStartBidding} disabled={isRefetching}>
|
|
<Text style={styles.proceedButtonText}>{loading ? <ActivityIndicator size={'small'} color={'#ffff'} /> : 'Start Bidding'}</Text>
|
|
</TouchableOpacity>
|
|
|
|
) :
|
|
<Text style={styles.footerText}>One time bidding is completed</Text>
|
|
}
|
|
</View>
|
|
</View>
|
|
|
|
)
|
|
}
|
|
|
|
export default ProceedToBidDetail
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16,
|
|
marginBottom: 60,
|
|
},
|
|
headerCard: {
|
|
backgroundColor: colors.primaryLight,
|
|
borderRadius: 12,
|
|
padding: 20,
|
|
marginBottom: 20,
|
|
borderLeftWidth: 4,
|
|
borderLeftColor: colors.primary,
|
|
},
|
|
tenderHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
},
|
|
tenderNumber: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: colors.primary,
|
|
},
|
|
tenderId: {
|
|
fontSize: 14,
|
|
color: colors.darkGray,
|
|
marginTop: 4,
|
|
},
|
|
statusBadge: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
},
|
|
statusBadgeText: {
|
|
color: colors.white,
|
|
fontWeight: '600',
|
|
fontSize: 12,
|
|
},
|
|
workDescription: {
|
|
fontSize: 16,
|
|
color: colors.darkText,
|
|
lineHeight: 22,
|
|
marginBottom: 16,
|
|
},
|
|
headerInfoRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.white,
|
|
borderRadius: 8,
|
|
padding: 12,
|
|
},
|
|
headerInfoItem: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
},
|
|
headerInfoLabel: {
|
|
fontSize: 12,
|
|
color: colors.darkGray,
|
|
marginBottom: 4,
|
|
},
|
|
headerInfoValue: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
},
|
|
separator: {
|
|
width: 1,
|
|
height: 30,
|
|
backgroundColor: colors.lightGray,
|
|
},
|
|
section: {
|
|
marginBottom: 20,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
marginBottom: 12,
|
|
paddingLeft: 4,
|
|
},
|
|
statusGrid: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
statusContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
},
|
|
statusDot: {
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: 6,
|
|
marginRight: 10,
|
|
},
|
|
statusText: {
|
|
fontSize: 15,
|
|
fontWeight: '500',
|
|
},
|
|
envelopeCard: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
borderWidth: 1,
|
|
borderColor: colors.lightGray,
|
|
},
|
|
cardHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
},
|
|
cardTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
},
|
|
envelopeBadge: {
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
envelopeBadgeText: {
|
|
color: colors.white,
|
|
fontWeight: 'bold',
|
|
fontSize: 12,
|
|
},
|
|
logDetailRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 8,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
color: colors.darkGray,
|
|
flex: 1,
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
color: colors.darkText,
|
|
fontWeight: '500',
|
|
flex: 2,
|
|
textAlign: 'right',
|
|
},
|
|
successText: {
|
|
color: colors.success,
|
|
fontWeight: '600',
|
|
},
|
|
detailsCard: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
infoRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.lightestGray,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 14,
|
|
color: colors.darkGray,
|
|
},
|
|
infoValue: {
|
|
fontSize: 15,
|
|
fontWeight: '500',
|
|
color: colors.darkText,
|
|
},
|
|
highlightedValue: {
|
|
color: colors.success,
|
|
fontWeight: '600',
|
|
},
|
|
timeCard: {
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
timeRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingVertical: 12,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.lightestGray,
|
|
},
|
|
timeLabel: {
|
|
fontSize: 15,
|
|
color: colors.darkGray,
|
|
fontWeight: '500',
|
|
},
|
|
timeValue: {
|
|
fontSize: 15,
|
|
color: colors.primary,
|
|
fontWeight: '600',
|
|
},
|
|
chipsContainer: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 10,
|
|
},
|
|
chip: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
marginBottom: 8,
|
|
},
|
|
chipText: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
},
|
|
finalStatusCard: {
|
|
backgroundColor: colors.primaryLight,
|
|
borderRadius: 12,
|
|
padding: 20,
|
|
marginTop: 10,
|
|
borderWidth: 2,
|
|
borderColor: colors.primary,
|
|
},
|
|
finalStatusTitle: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: colors.primary,
|
|
marginBottom: 16,
|
|
textAlign: 'center',
|
|
},
|
|
finalStatusRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
paddingVertical: 8,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: 'rgba(0, 0, 0, 0.1)',
|
|
},
|
|
finalStatusLabel: {
|
|
fontSize: 16,
|
|
color: colors.darkText,
|
|
fontWeight: '500',
|
|
},
|
|
finalStatusValue: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
footerSpace: {
|
|
height: 30,
|
|
},
|
|
success: {
|
|
color: colors.success,
|
|
},
|
|
error: {
|
|
color: colors.error,
|
|
},
|
|
primary: {
|
|
color: colors.primary,
|
|
},
|
|
warning: {
|
|
color: colors.warning,
|
|
},
|
|
successLight: {
|
|
backgroundColor: colors.successLight,
|
|
},
|
|
lightGray: {
|
|
backgroundColor: colors.lightGray,
|
|
},
|
|
footer: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
backgroundColor: colors.white,
|
|
padding: 16,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.lightGray,
|
|
elevation: 10,
|
|
},
|
|
proceedButton: {
|
|
backgroundColor: colors.primary,
|
|
paddingVertical: 14,
|
|
borderRadius: 30,
|
|
alignItems: 'center',
|
|
},
|
|
proceedButtonText: {
|
|
color: colors.white,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
footerText: {
|
|
textAlign: 'center',
|
|
color: colors.darkGray,
|
|
fontSize: 14,
|
|
},
|
|
actionButton: {
|
|
width: '100%',
|
|
height: 48,
|
|
borderRadius: 12,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
...Platform.select({
|
|
ios: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
},
|
|
}),
|
|
},
|
|
}); |