Abin ToppoandClaude Fable 5
1d7646d938
CI / quality (push) Waiting to run
- Add src/core/ (config, errors, events, http, observability, storage, query) - Add src/Spreadsheet/ engine with native POI backend and Excel bridge - Add Envelope C spreadsheet flow and tender bidding envelope modules - Consolidate components into src/components/, remove legacy Component/ and Hooks/ - Add registration state/validation, auth session guard, profile edit modules - Add unit tests across axios, redux, bidding, registration, encryption, core - Add CI workflow, docs (architecture, audit, DSC API spec), keystore example - Remove tracked keystore binary; ignore scripts.zip Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
492 lines
15 KiB
TypeScript
492 lines
15 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
FlatList,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import Animated, { FadeInDown, FadeIn } from 'react-native-reanimated';
|
|
import {
|
|
Calendar,
|
|
Hash,
|
|
Wifi,
|
|
WifiOff,
|
|
Receipt,
|
|
CheckCircle2,
|
|
Gavel,
|
|
} from 'lucide-react-native';
|
|
import { InsideHeader } from '../../components';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { useOfflineAuctionPurchase, usePurchaseAuctionList } from '../../Services/ApiCall/Hooks';
|
|
import { showSuccessAlert } from '../../Constant/ShowDailog';
|
|
import { clearPurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
|
|
import { CommonActions, useFocusEffect, useNavigation } from '@react-navigation/native';
|
|
import NavigationString from '../../Constant/NavigationString';
|
|
import Skeleton from '../../components/Skeleton';
|
|
import { useTheme } from '../../Hooks/useTheme';
|
|
import AppText from '../../components/AppText';
|
|
|
|
const PurchaseAuctionList = () => {
|
|
const Navigation: any = useNavigation();
|
|
const Dispatch = useDispatch();
|
|
const { colors, spacing, shadows } = useTheme();
|
|
const [loading, setLoading] = useState(false);
|
|
const [list, setList] = useState<any[]>([]);
|
|
|
|
const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
|
|
const LoginUser = useSelector((state: any) => state.token.token);
|
|
|
|
const { mutate, isPending } = useOfflineAuctionPurchase();
|
|
const { mutate: purchaseListMutation, isPending: purchaseListPending } = usePurchaseAuctionList();
|
|
|
|
const calculateTotalAmount = (item: any) => {
|
|
const gstAmount =
|
|
(Number(item.auctionFees) + Number(item.portalCharge)) *
|
|
(Number(item.gst) / 100);
|
|
return Number(item.auctionFees) + Number(item.portalCharge) + gstAmount;
|
|
};
|
|
|
|
const grandTotal = list.reduce(
|
|
(sum: number, item: any) => sum + calculateTotalAmount(item),
|
|
0,
|
|
);
|
|
|
|
const handleOfflinePurchase = async () => {
|
|
const body = {
|
|
auctionDetails: list.map((b: any) => ({
|
|
auctionDispatchDate: b?.auctionDispatchDate,
|
|
auctionDispatcherNumber: b?.auctionDispatcherNumber,
|
|
auctionFees: b?.auctionFees,
|
|
auctionId: b?.auctionId,
|
|
auctionNumber: b?.auctionNumber,
|
|
auctionPattern: b?.auctionPattern,
|
|
gst: b?.gst,
|
|
gstAmount: b?.gstAmount,
|
|
payableAmount: calculateTotalAmount(b),
|
|
portalCharge: b?.portalCharge,
|
|
})),
|
|
orderNo: '',
|
|
};
|
|
|
|
try {
|
|
mutate(body, {
|
|
onSuccess: res => {
|
|
if (res.statusCode === 200) {
|
|
showSuccessAlert(res.message);
|
|
Dispatch(clearPurchaseAuction());
|
|
Navigation.dispatch(
|
|
CommonActions.reset({ index: 0, routes: [{ name: NavigationString.Home }] }),
|
|
);
|
|
}
|
|
},
|
|
onError: error => console.log(error, 'purchase Error'),
|
|
});
|
|
} catch (error) {
|
|
console.log('purchase offline error', error);
|
|
}
|
|
};
|
|
|
|
const handlePurchase = (type: 'online' | 'offline') => {
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
type === 'online' ? undefined : handleOfflinePurchase();
|
|
}, 1200);
|
|
};
|
|
|
|
const getPurchaseList = () => {
|
|
const auctionNumbers: string[] = SelectedPurchaseList.map(
|
|
(item: { auctionNumber: string }) => item.auctionNumber,
|
|
);
|
|
purchaseListMutation(
|
|
{ auctionNumbers, contractorId: LoginUser.contractorId },
|
|
{
|
|
onSuccess: res => {
|
|
if (res.statusCode === 200) setList(res.data);
|
|
},
|
|
onError: error => console.log(error, 'purchase list error'),
|
|
},
|
|
);
|
|
};
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
getPurchaseList();
|
|
// Intentionally runs only on SelectedPurchaseList changes; other deps are stable or recreated each render.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [SelectedPurchaseList]),
|
|
);
|
|
|
|
const styles = makeStyles(colors, spacing, shadows);
|
|
|
|
/* ── Render Item ── */
|
|
const renderItem = ({ item, index }: { item: any; index: number }) => {
|
|
const total = calculateTotalAmount(item);
|
|
const gstAmount =
|
|
(Number(item.auctionFees) + Number(item.portalCharge)) *
|
|
(Number(item.gst) / 100);
|
|
|
|
return (
|
|
<Animated.View
|
|
entering={FadeInDown.delay(index * 90).springify()}
|
|
style={styles.card}
|
|
>
|
|
{/* Top accent stripe */}
|
|
<View style={styles.cardAccent} />
|
|
|
|
<View style={styles.cardBody}>
|
|
{/* Header */}
|
|
<View style={styles.cardHeader}>
|
|
<View style={[styles.indexBadge, { backgroundColor: colors.primary }]}>
|
|
<AppText variant="caption" color={colors.buttonText} style={{ fontWeight: '800' } as any}>
|
|
{String(index + 1).padStart(2, '0')}
|
|
</AppText>
|
|
</View>
|
|
<View style={{ flex: 1, marginLeft: spacing.s }}>
|
|
<AppText variant="h4" color={colors.text} numberOfLines={2}>
|
|
{item.auctionNumber}
|
|
</AppText>
|
|
{item.auctionPattern ? (
|
|
<View style={[styles.patternBadge, { backgroundColor: `${colors.primary}15` }]}>
|
|
<Gavel size={11} color={colors.primary} strokeWidth={2} />
|
|
<AppText variant="caption" color={colors.primary} style={{ fontWeight: '600' } as any}>
|
|
{item.auctionPattern}
|
|
</AppText>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.divider} />
|
|
|
|
{/* Info Rows */}
|
|
<InfoRow
|
|
icon={<Hash size={15} color={colors.primary} />}
|
|
label="Dispatcher No"
|
|
value={item.auctionDispatcherNumber ?? '—'}
|
|
colors={colors}
|
|
/>
|
|
<InfoRow
|
|
icon={<Calendar size={15} color={colors.primary} />}
|
|
label="Dispatch Date"
|
|
value={item.auctionDispatchDate ?? '—'}
|
|
colors={colors}
|
|
/>
|
|
|
|
<View style={[styles.divider, { marginVertical: spacing.s }]} />
|
|
|
|
{/* Fee Breakdown */}
|
|
<View style={[styles.feeSection, { backgroundColor: colors.overlay }]}>
|
|
<AppText variant="caption" color={colors.textSecondary} style={styles.feeHeader as any}>
|
|
FEE BREAKDOWN
|
|
</AppText>
|
|
<FeeRow label="Auction Fees" value={`₹ ${Number(item.auctionFees).toFixed(2)}`} colors={colors} />
|
|
<FeeRow label={`GST (${item.gst}%)`} value={`₹ ${gstAmount.toFixed(2)}`} colors={colors} />
|
|
<FeeRow label="Portal Charge" value={`₹ ${Number(item.portalCharge).toFixed(2)}`} colors={colors} />
|
|
</View>
|
|
|
|
{/* Total Banner */}
|
|
<View style={[styles.totalBanner, { backgroundColor: colors.primary }]}>
|
|
<View style={styles.totalLeft}>
|
|
<Receipt size={18} color={colors.buttonText} />
|
|
<AppText variant="bodySmall" color={colors.buttonText} style={{ fontWeight: '600' } as any}>
|
|
Total Payable
|
|
</AppText>
|
|
</View>
|
|
<AppText variant="h4" color={colors.buttonText}>
|
|
₹ {total.toFixed(2)}
|
|
</AppText>
|
|
</View>
|
|
</View>
|
|
</Animated.View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.screen}>
|
|
<InsideHeader title="Auction Purchase" showArrow />
|
|
|
|
{/* Grand Total Strip */}
|
|
<Animated.View entering={FadeInDown.springify()} style={styles.grandTotalStrip}>
|
|
<View>
|
|
<AppText variant="caption" color={colors.textSecondary}>
|
|
{list.length} auction{list.length !== 1 ? 's' : ''}
|
|
</AppText>
|
|
<AppText variant="h3" color={colors.text}>
|
|
₹ {grandTotal.toFixed(2)}
|
|
</AppText>
|
|
</View>
|
|
<View style={[styles.grandTotalRight, { backgroundColor: `${colors.success}15` }]}>
|
|
<CheckCircle2 size={18} color={colors.success} />
|
|
<AppText variant="caption" color={colors.success} style={{ fontWeight: '600' } as any}>
|
|
Ready to pay
|
|
</AppText>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
{/* List */}
|
|
{purchaseListPending ? (
|
|
<Skeleton />
|
|
) : (
|
|
<FlatList
|
|
data={list}
|
|
renderItem={renderItem}
|
|
keyExtractor={item => item.auctionId?.toString()}
|
|
contentContainerStyle={styles.container}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
)}
|
|
|
|
{/* Bottom Buttons */}
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity
|
|
style={[styles.button, styles.onlineButton, { borderColor: colors.primary }]}
|
|
activeOpacity={0.85}
|
|
onPress={() => handlePurchase('online')}
|
|
>
|
|
<Wifi size={18} color={colors.primary} />
|
|
<AppText variant="button" color={colors.primary} style={styles.btnText as any}>
|
|
Online
|
|
</AppText>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, styles.offlineButton, { backgroundColor: colors.buttonPrimary }]}
|
|
activeOpacity={0.85}
|
|
onPress={() => handlePurchase('offline')}
|
|
>
|
|
{isPending ? (
|
|
<ActivityIndicator size="small" color="#fff" />
|
|
) : (
|
|
<>
|
|
<WifiOff size={18} color={colors.buttonText} />
|
|
<AppText variant="button" color={colors.buttonText} style={styles.btnText as any}>
|
|
Offline
|
|
</AppText>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Loading Overlay */}
|
|
{(loading || isPending) && (
|
|
<Animated.View entering={FadeIn.duration(200)} style={styles.loadingOverlay}>
|
|
<View style={[styles.loadingCard, { backgroundColor: colors.surface }]}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
<AppText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: spacing.s } as any}>
|
|
Processing purchase…
|
|
</AppText>
|
|
</View>
|
|
</Animated.View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default PurchaseAuctionList;
|
|
|
|
/* ─── Sub-components ─── */
|
|
|
|
const InfoRow = ({
|
|
icon,
|
|
label,
|
|
value,
|
|
colors,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
value: string;
|
|
colors: any;
|
|
}) => (
|
|
<View style={infoRowStyles.row}>
|
|
<View style={infoRowStyles.iconWrap}>{icon}</View>
|
|
<AppText variant="caption" color={colors.textSecondary} style={infoRowStyles.label as any}>
|
|
{label}
|
|
</AppText>
|
|
<AppText variant="bodySmall" color={colors.text} style={infoRowStyles.value as any}>
|
|
{value}
|
|
</AppText>
|
|
</View>
|
|
);
|
|
|
|
const infoRowStyles = StyleSheet.create({
|
|
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 5, gap: 6 },
|
|
iconWrap: { width: 22, alignItems: 'center' },
|
|
label: { flex: 1, fontWeight: '500' } as any,
|
|
value: { fontWeight: '600' } as any,
|
|
});
|
|
|
|
const FeeRow = ({
|
|
label,
|
|
value,
|
|
colors,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
colors: any;
|
|
}) => (
|
|
<View style={feeRowStyles.row}>
|
|
<AppText variant="caption" color={colors.textSecondary}>{label}</AppText>
|
|
<AppText variant="caption" color={colors.text} style={{ fontWeight: '600' } as any}>{value}</AppText>
|
|
</View>
|
|
);
|
|
|
|
const feeRowStyles = StyleSheet.create({
|
|
row: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 3 },
|
|
});
|
|
|
|
/* ─── Styles factory ─── */
|
|
const makeStyles = (colors: any, spacing: any, shadows: any) =>
|
|
StyleSheet.create({
|
|
screen: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
|
|
/* Grand total strip */
|
|
grandTotalStrip: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: colors.surface,
|
|
marginHorizontal: spacing.m,
|
|
marginTop: spacing.m,
|
|
marginBottom: spacing.s,
|
|
paddingHorizontal: spacing.m,
|
|
paddingVertical: spacing.m,
|
|
borderRadius: 18,
|
|
...shadows.medium,
|
|
},
|
|
grandTotalRight: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 5,
|
|
paddingHorizontal: spacing.s + 2,
|
|
paddingVertical: spacing.xs + 2,
|
|
borderRadius: 20,
|
|
},
|
|
|
|
container: {
|
|
paddingHorizontal: spacing.m,
|
|
paddingTop: spacing.s,
|
|
paddingBottom: 120,
|
|
},
|
|
|
|
/* Card */
|
|
card: {
|
|
backgroundColor: colors.surface,
|
|
borderRadius: 20,
|
|
marginBottom: spacing.m,
|
|
overflow: 'hidden',
|
|
...shadows.medium,
|
|
},
|
|
cardAccent: {
|
|
height: 4,
|
|
backgroundColor: colors.primary,
|
|
},
|
|
cardBody: {
|
|
padding: spacing.m,
|
|
},
|
|
cardHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
marginBottom: spacing.s,
|
|
},
|
|
indexBadge: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 2,
|
|
},
|
|
patternBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
alignSelf: 'flex-start',
|
|
paddingHorizontal: spacing.s,
|
|
paddingVertical: 2,
|
|
borderRadius: 8,
|
|
marginTop: 4,
|
|
},
|
|
divider: {
|
|
height: StyleSheet.hairlineWidth,
|
|
backgroundColor: colors.border,
|
|
marginVertical: spacing.s,
|
|
},
|
|
feeSection: {
|
|
borderRadius: 12,
|
|
padding: spacing.s + 2,
|
|
marginBottom: spacing.s,
|
|
},
|
|
feeHeader: {
|
|
letterSpacing: 1.2,
|
|
marginBottom: spacing.xs + 2,
|
|
fontWeight: '700',
|
|
} as any,
|
|
totalBanner: {
|
|
borderRadius: 14,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: spacing.m,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
totalLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.s,
|
|
},
|
|
|
|
/* Footer */
|
|
footer: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
flexDirection: 'row',
|
|
paddingHorizontal: spacing.m,
|
|
paddingTop: spacing.s + 4,
|
|
paddingBottom: spacing.m + 4,
|
|
backgroundColor: colors.surface,
|
|
gap: spacing.s,
|
|
...shadows.strong,
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 14,
|
|
borderRadius: 16,
|
|
gap: spacing.s,
|
|
},
|
|
onlineButton: {
|
|
backgroundColor: colors.surface,
|
|
borderWidth: 1.5,
|
|
},
|
|
offlineButton: {
|
|
...shadows.medium,
|
|
},
|
|
btnText: {
|
|
letterSpacing: 1.2,
|
|
} as any,
|
|
|
|
/* Loading overlay */
|
|
loadingOverlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0,0,0,0.3)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: 10,
|
|
},
|
|
loadingCard: {
|
|
borderRadius: 20,
|
|
padding: spacing.l,
|
|
alignItems: 'center',
|
|
...shadows.strong,
|
|
},
|
|
});
|