updated code with dsc and device binding
This commit is contained in:
Abin Toppo
+286
-236
@@ -1,22 +1,29 @@
|
||||
import React, { useState, useRef, useMemo } from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native';
|
||||
import {
|
||||
View,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Animated,
|
||||
Dimensions,
|
||||
} from 'react-native';
|
||||
import { InsideHeader } from '../../Component/Index';
|
||||
import { useFetchLiveAuction, useFetchPurchaseAuction } from '../../Services/ApiCall/Hooks';
|
||||
import colors from '../../Constant/Color';
|
||||
import LiveAuction from './LiveAuction';
|
||||
import PurchaseAuction from './PurchaseAuction';
|
||||
import { ShoppingCart, Lock } from 'lucide-react-native';
|
||||
import { ShoppingCart, Lock, Radio, Package } from 'lucide-react-native';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import NavigationString from '../../Constant/NavigationString';
|
||||
import FontsFamily from '../../Constant/FontsFamily';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useTheme } from '../../Hooks/useTheme';
|
||||
import AppText from '../../components/AppText';
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||||
const HORIZONTAL_PADDING = 32;
|
||||
const SWITCH_INSETS = 2;
|
||||
const TAB_HEIGHT = 44;
|
||||
const SWITCH_INSETS = 3;
|
||||
const TAB_HEIGHT = 48;
|
||||
|
||||
const Auction = () => {
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
const Navigation = useNavigation() as any;
|
||||
const { data: liveAuctionData = {} }: any = useFetchLiveAuction();
|
||||
const { data: purchaseAuctionData = {} } = useFetchPurchaseAuction();
|
||||
@@ -31,14 +38,14 @@ const Auction = () => {
|
||||
? purchaseAuctionData.data.length
|
||||
: 0;
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState<'live' | 'purchase'>('live');
|
||||
const translateX = useRef(new Animated.Value(0)).current;
|
||||
|
||||
const TAB_WIDTH = useMemo(() => {
|
||||
const availableWidth = SCREEN_WIDTH - HORIZONTAL_PADDING - SWITCH_INSETS * 2;
|
||||
return availableWidth / 2.4;
|
||||
return availableWidth / 2;
|
||||
}, []);
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState<'live' | 'purchase'>('purchase');
|
||||
const translateX = useRef(new Animated.Value(TAB_WIDTH)).current;
|
||||
|
||||
const onTabPress = (tab: 'live' | 'purchase', index: number) => {
|
||||
setSelectedTab(tab);
|
||||
Animated.spring(translateX, {
|
||||
@@ -48,252 +55,295 @@ const Auction = () => {
|
||||
}).start();
|
||||
};
|
||||
|
||||
// Check if user is tender type
|
||||
const isTenderUser = reduxToken?.userType?.toLowerCase() === 'tender';
|
||||
const cartCount = SelectedPurchaseList.length;
|
||||
|
||||
// Render restricted access message
|
||||
const renderRestrictedAccess = () => (
|
||||
<View style={styles.restrictedContainer}>
|
||||
<View style={styles.restrictedCard}>
|
||||
<View style={styles.iconContainer}>
|
||||
<Lock size={64} color={colors.primary} />
|
||||
const styles = makeStyles(colors, spacing, shadows, TAB_WIDTH, TAB_HEIGHT);
|
||||
|
||||
if (isTenderUser) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<InsideHeader title="Auction" showArrow />
|
||||
<View style={styles.restrictedContainer}>
|
||||
<View style={styles.restrictedCard}>
|
||||
{/* Icon ring */}
|
||||
<View style={styles.lockRing}>
|
||||
<View style={styles.lockInner}>
|
||||
<Lock size={40} color={colors.primary} strokeWidth={1.8} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<AppText variant="h2" centered color={colors.text} style={styles.restrictedTitle as any}>
|
||||
Access Restricted
|
||||
</AppText>
|
||||
|
||||
<AppText variant="body" centered color={colors.textSecondary} style={styles.restrictedMessage as any}>
|
||||
You're logged in as a{' '}
|
||||
<AppText variant="body" color={colors.primary} style={{ fontWeight: '700' } as any}>
|
||||
Tender user
|
||||
</AppText>
|
||||
{'. '}Auction features are not available for your account type.
|
||||
</AppText>
|
||||
|
||||
<View style={styles.hintBox}>
|
||||
<AppText variant="bodySmall" centered color={colors.textSecondary}>
|
||||
Switch to an Auction account to access live & purchase auction features.
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.loginButton}
|
||||
activeOpacity={0.85}
|
||||
onPress={() => Navigation.navigate(NavigationString.Login)}
|
||||
>
|
||||
<AppText variant="button" color={colors.buttonText} style={styles.loginBtnText as any}>
|
||||
Switch to Auction Login
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.restrictedTitle}>Auction Access Restricted</Text>
|
||||
|
||||
<Text style={styles.restrictedMessage}>
|
||||
You are currently logged in as a Tender user. Auction features are not available for your account type.
|
||||
</Text>
|
||||
|
||||
<Text style={styles.restrictedSubMessage}>
|
||||
To access auction features, please login with an Auction user account.
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.loginButton}
|
||||
onPress={() => Navigation.navigate(NavigationString.Login)}
|
||||
>
|
||||
<Text style={styles.loginButtonText}>Switch to Auction Login</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<InsideHeader title="Auction" showArrow />
|
||||
|
||||
{isTenderUser ? (
|
||||
// Show restricted access message for tender users
|
||||
renderRestrictedAccess()
|
||||
) : (
|
||||
// Show normal auction UI for auction users
|
||||
<>
|
||||
<View style={styles.topRow}>
|
||||
<View
|
||||
{/* Tab Row */}
|
||||
<View style={styles.topRow}>
|
||||
{/* Segmented Control */}
|
||||
<View
|
||||
style={[
|
||||
styles.switchWrapper,
|
||||
{ width: TAB_WIDTH * 2 + SWITCH_INSETS * 2 },
|
||||
]}
|
||||
>
|
||||
{/* Sliding pill */}
|
||||
<Animated.View
|
||||
pointerEvents="none"
|
||||
style={[
|
||||
styles.activeTab,
|
||||
{ width: TAB_WIDTH, transform: [{ translateX }] },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Live Tab */}
|
||||
<TouchableOpacity
|
||||
style={[styles.tab, { width: TAB_WIDTH }]}
|
||||
activeOpacity={0.8}
|
||||
onPress={() => onTabPress('live', 0)}
|
||||
>
|
||||
<Radio
|
||||
size={13}
|
||||
color={selectedTab === 'live' ? colors.primary : colors.textSecondary}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<AppText
|
||||
variant="caption"
|
||||
color={selectedTab === 'live' ? colors.primary : colors.textSecondary}
|
||||
style={[
|
||||
styles.switchWrapper,
|
||||
{
|
||||
width: TAB_WIDTH * 2 + SWITCH_INSETS * 2,
|
||||
},
|
||||
styles.tabText,
|
||||
selectedTab === 'live' && (styles.activeTabText as any),
|
||||
]}
|
||||
>
|
||||
<Animated.View
|
||||
pointerEvents="none"
|
||||
style={[
|
||||
styles.activeTab,
|
||||
{
|
||||
width: TAB_WIDTH,
|
||||
transform: [{ translateX }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
Live {liveCount ? `(${liveCount})` : ''}
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.tab, { width: TAB_WIDTH }]}
|
||||
activeOpacity={0.8}
|
||||
onPress={() => onTabPress('live', 0)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.tabText,
|
||||
selectedTab === 'live' && styles.activeText,
|
||||
]}
|
||||
>
|
||||
Live ({liveCount})
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
{/* Purchase Tab */}
|
||||
<TouchableOpacity
|
||||
style={[styles.tab, { width: TAB_WIDTH }]}
|
||||
activeOpacity={0.8}
|
||||
onPress={() => onTabPress('purchase', 1)}
|
||||
>
|
||||
<Package
|
||||
size={13}
|
||||
color={selectedTab === 'purchase' ? colors.primary : colors.textSecondary}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<AppText
|
||||
variant="caption"
|
||||
color={selectedTab === 'purchase' ? colors.primary : colors.textSecondary}
|
||||
style={[
|
||||
styles.tabText,
|
||||
selectedTab === 'purchase' && (styles.activeTabText as any),
|
||||
]}
|
||||
>
|
||||
Purchased {purchaseCount ? `(${purchaseCount})` : ''}
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.tab, { width: TAB_WIDTH }]}
|
||||
activeOpacity={0.8}
|
||||
onPress={() => onTabPress('purchase', 1)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.tabText,
|
||||
selectedTab === 'purchase' && styles.activeText,
|
||||
]}
|
||||
>
|
||||
Purchased ({purchaseCount})
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* Content */}
|
||||
{selectedTab === 'live' ? <LiveAuction /> : <PurchaseAuction />}
|
||||
|
||||
<View>
|
||||
{SelectedPurchaseList.length ? (
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 2,
|
||||
borderColor: colors.white,
|
||||
backgroundColor: colors.primaryLight,
|
||||
position: 'absolute',
|
||||
borderRadius: 50,
|
||||
zIndex: 20,
|
||||
right: 0,
|
||||
top: -10,
|
||||
paddingHorizontal: 2,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 12, color: colors.black }}>
|
||||
{SelectedPurchaseList.length}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
padding: 10,
|
||||
backgroundColor: colors.primaryLight,
|
||||
borderRadius: 20,
|
||||
}}
|
||||
onPress={() => {
|
||||
Navigation.navigate(NavigationString.PurchaseList);
|
||||
}}
|
||||
>
|
||||
<ShoppingCart size={22} color={colors.black} strokeWidth={2} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* Cart Floating Button */}
|
||||
<TouchableOpacity
|
||||
style={styles.cartFloatingButton}
|
||||
activeOpacity={0.9}
|
||||
onPress={() => Navigation.navigate(NavigationString.PurchaseList)}
|
||||
>
|
||||
<ShoppingCart size={24} color={colors.buttonText} strokeWidth={2} />
|
||||
{cartCount > 0 && (
|
||||
<View style={styles.cartBadge}>
|
||||
<AppText variant="caption" color={colors.primary} style={styles.cartBadgeText as any}>
|
||||
{cartCount}
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
{selectedTab === 'live' ? <LiveAuction /> : <PurchaseAuction />}
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Auction;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.white,
|
||||
},
|
||||
topRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
switchWrapper: {
|
||||
flexDirection: 'row',
|
||||
marginVertical: 14,
|
||||
backgroundColor: '#f1f5f9',
|
||||
borderRadius: 18,
|
||||
padding: 2,
|
||||
height: TAB_HEIGHT,
|
||||
},
|
||||
tab: {
|
||||
height: TAB_HEIGHT - 4,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 2,
|
||||
},
|
||||
tabText: {
|
||||
fontSize: 13,
|
||||
color: '#64748b',
|
||||
lineHeight: 18,
|
||||
fontFamily: FontsFamily.poppinsSemiBold,
|
||||
},
|
||||
activeText: {
|
||||
color: colors.primary,
|
||||
},
|
||||
activeTab: {
|
||||
position: 'absolute',
|
||||
top: 2,
|
||||
left: 2,
|
||||
height: TAB_HEIGHT - 4,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
restrictedContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 24,
|
||||
backgroundColor: colors.lightGray,
|
||||
},
|
||||
restrictedCard: {
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 24,
|
||||
padding: 32,
|
||||
alignItems: 'center',
|
||||
maxWidth: 400,
|
||||
width: '100%',
|
||||
/* ─── Styles factory ─── */
|
||||
const makeStyles = (colors: any, spacing: any, shadows: any, TAB_WIDTH: number, TAB_HEIGHT: number) =>
|
||||
StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
|
||||
},
|
||||
iconContainer: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: 60,
|
||||
backgroundColor: colors.primaryHighlight,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 24,
|
||||
},
|
||||
restrictedTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
color: colors.darkText,
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
fontFamily: FontsFamily.poppinsBold,
|
||||
},
|
||||
restrictedMessage: {
|
||||
fontSize: 16,
|
||||
color: colors.grayText,
|
||||
textAlign: 'center',
|
||||
lineHeight: 24,
|
||||
marginBottom: 12,
|
||||
fontFamily: FontsFamily.poppinsRegular,
|
||||
},
|
||||
restrictedSubMessage: {
|
||||
fontSize: 14,
|
||||
color: colors.grayText,
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
marginBottom: 32,
|
||||
fontFamily: FontsFamily.poppinsRegular,
|
||||
},
|
||||
loginButton: {
|
||||
backgroundColor: colors.primary,
|
||||
paddingHorizontal: 32,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
loginButtonText: {
|
||||
color: colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
fontFamily: FontsFamily.poppinsSemiBold,
|
||||
},
|
||||
});
|
||||
/* ── Tab Row ── */
|
||||
topRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingVertical: spacing.s + 2,
|
||||
},
|
||||
switchWrapper: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 16,
|
||||
padding: SWITCH_INSETS,
|
||||
height: TAB_HEIGHT,
|
||||
...shadows.light,
|
||||
},
|
||||
tab: {
|
||||
height: TAB_HEIGHT - SWITCH_INSETS * 2,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 5,
|
||||
zIndex: 2,
|
||||
},
|
||||
tabText: {
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.3,
|
||||
} as any,
|
||||
activeTabText: {
|
||||
fontWeight: '700',
|
||||
} as any,
|
||||
activeTab: {
|
||||
position: 'absolute',
|
||||
top: SWITCH_INSETS,
|
||||
left: SWITCH_INSETS,
|
||||
height: TAB_HEIGHT - SWITCH_INSETS * 2,
|
||||
backgroundColor: colors.background,
|
||||
borderRadius: 13,
|
||||
...shadows.medium,
|
||||
},
|
||||
|
||||
/* ── Cart Floating Button ── */
|
||||
cartFloatingButton: {
|
||||
position: 'absolute',
|
||||
bottom: spacing.xl + 80,
|
||||
right: spacing.l,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: colors.primary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
...shadows.strong,
|
||||
zIndex: 999,
|
||||
},
|
||||
cartBadge: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
minWidth: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.background,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 4,
|
||||
borderWidth: 1.5,
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
cartBadgeText: {
|
||||
fontSize: 10,
|
||||
fontWeight: '800',
|
||||
lineHeight: 13,
|
||||
} as any,
|
||||
|
||||
/* ── Restricted Access ── */
|
||||
restrictedContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: spacing.l,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
restrictedCard: {
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 28,
|
||||
padding: spacing.l,
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
...shadows.strong,
|
||||
},
|
||||
lockRing: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 50,
|
||||
backgroundColor: `${colors.primary}12`,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: spacing.l,
|
||||
borderWidth: 1.5,
|
||||
borderColor: `${colors.primary}25`,
|
||||
},
|
||||
lockInner: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 36,
|
||||
backgroundColor: `${colors.primary}18`,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
restrictedTitle: {
|
||||
marginBottom: spacing.s + 4,
|
||||
} as any,
|
||||
restrictedMessage: {
|
||||
marginBottom: spacing.s,
|
||||
lineHeight: 24,
|
||||
} as any,
|
||||
hintBox: {
|
||||
backgroundColor: colors.overlay,
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingVertical: spacing.s + 2,
|
||||
marginBottom: spacing.l,
|
||||
width: '100%',
|
||||
},
|
||||
loginButton: {
|
||||
backgroundColor: colors.buttonPrimary,
|
||||
paddingHorizontal: spacing.l,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 16,
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
...shadows.medium,
|
||||
},
|
||||
loginBtnText: {
|
||||
letterSpacing: 1.2,
|
||||
} as any,
|
||||
});
|
||||
|
||||
+189
-144
@@ -1,162 +1,207 @@
|
||||
import React, { useCallback, useState, useEffect, useRef } from 'react';
|
||||
import { View, FlatList, ActivityIndicator, RefreshControl, Text } from 'react-native';
|
||||
import {
|
||||
View,
|
||||
FlatList,
|
||||
ActivityIndicator,
|
||||
RefreshControl,
|
||||
StyleSheet,
|
||||
} from 'react-native';
|
||||
import Animated, { FadeInDown, FadeOutUp } from 'react-native-reanimated';
|
||||
import { RefreshCw } from 'lucide-react-native';
|
||||
import LiveAuctionTile from './LiveAuctionTile';
|
||||
import { useFetchLiveAuction } from '../../Services/ApiCall/Hooks';
|
||||
import { SearchInput } from '../../Component/Serach/SeacrhInput';
|
||||
import { Skelton } from '../../Component/Index';
|
||||
import colors from '../../Constant/Color';
|
||||
import SkeltonList from '../../Component/Skelton/SkeltonList';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { togglePurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
|
||||
import { apiCall } from '../../Axios/Axios';
|
||||
import { GET_MY_AUCTION } from '../../Services/ApiCall/ApiUrls';
|
||||
import SkeltonList from '../../Component/Skelton/SkeltonList';
|
||||
import Skeleton from '../../Component/Skelton/Skelton';
|
||||
import { useTheme } from '../../Hooks/useTheme';
|
||||
import AppText from '../../components/AppText';
|
||||
|
||||
const LiveAuction = () => {
|
||||
const Dispatch = useDispatch()
|
||||
const user = useSelector((state: any) => state.token?.token);
|
||||
const onEndReachedCalledDuringMomentum = useRef(true);
|
||||
const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
|
||||
const [showRefreshBanner, setShowRefreshBanner] = useState(false);
|
||||
const [allBoolean, setAllBoolean] = useState({ liveAuctionData: [], isLoading: false })
|
||||
const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isRefetching, refetch, isPending }: any = useFetchLiveAuction();
|
||||
// My Methods
|
||||
const Dispatch = useDispatch();
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
const user = useSelector((state: any) => state.token?.token);
|
||||
const onEndReachedCalledDuringMomentum = useRef(true);
|
||||
const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
|
||||
const [showRefreshBanner, setShowRefreshBanner] = useState(false);
|
||||
|
||||
const {
|
||||
data,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
isLoading,
|
||||
isRefetching,
|
||||
refetch,
|
||||
isPending,
|
||||
}: any = useFetchLiveAuction();
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: any) => {
|
||||
const isPurchase = SelectedPurchaseList.findIndex((prev: any) => prev.auctionNumber === item.auctionNumber)
|
||||
return <LiveAuctionTile
|
||||
data={item}
|
||||
index={index}
|
||||
isPurchasedByContractor={item.contractorId?.includes(String(user.contractorId))}
|
||||
auctionId={item.auctionId}
|
||||
auctionDispatchDate={item.auctionDispatchDate}
|
||||
isPurchased={isPurchase !== -1 ? true : false}
|
||||
purchaseEnd={item.purchaseEnd}
|
||||
auctionOfWork={item.auctionOfWork}
|
||||
auctionFees={item.auctionFees}
|
||||
auctionNumber={item.auctionNumber}
|
||||
onPurchasePress={() => { Dispatch(togglePurchaseAuction(item)) }}
|
||||
onDetailsPress={() => { }}
|
||||
/>
|
||||
},
|
||||
[SelectedPurchaseList]
|
||||
);
|
||||
const renderItem = useCallback(
|
||||
({ item, index }: any) => {
|
||||
const isPurchase = SelectedPurchaseList.findIndex(
|
||||
(prev: any) => prev.auctionNumber === item.auctionNumber,
|
||||
);
|
||||
return (
|
||||
<LiveAuctionTile
|
||||
data={item}
|
||||
index={index}
|
||||
isPurchasedByContractor={item.contractorId?.includes(
|
||||
String(user.contractorId),
|
||||
)}
|
||||
auctionId={item.auctionId}
|
||||
auctionDispatchDate={item.auctionDispatchDate}
|
||||
isPurchased={isPurchase !== -1}
|
||||
purchaseEnd={item.purchaseEnd}
|
||||
auctionOfWork={item.auctionOfWork}
|
||||
auctionFees={item.auctionFees}
|
||||
auctionNumber={item.auctionNumber}
|
||||
onPurchasePress={() => {
|
||||
console.log('[LiveAuction] purchase toggled:', item?.auctionNumber);
|
||||
Dispatch(togglePurchaseAuction(item));
|
||||
}}
|
||||
onDetailsPress={() => {}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[SelectedPurchaseList],
|
||||
);
|
||||
|
||||
const loadMore = useCallback(() => {
|
||||
if (onEndReachedCalledDuringMomentum.current) return;
|
||||
|
||||
if (!hasNextPage || isFetchingNextPage) return;
|
||||
|
||||
fetchNextPage();
|
||||
onEndReachedCalledDuringMomentum.current = true;
|
||||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
||||
|
||||
const renderFooter = useCallback(() => {
|
||||
if (!isFetchingNextPage) return null;
|
||||
return (
|
||||
<View style={{ paddingVertical: 12 }}>
|
||||
<ActivityIndicator size="small" color={colors.primary} />
|
||||
</View>
|
||||
);
|
||||
}, [isFetchingNextPage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isRefetching) {
|
||||
setShowRefreshBanner(true);
|
||||
} else {
|
||||
const timer = setTimeout(() => {
|
||||
setShowRefreshBanner(false);
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isRefetching]);
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
return <Skelton />;
|
||||
}
|
||||
const loadMore = useCallback(() => {
|
||||
if (onEndReachedCalledDuringMomentum.current) return;
|
||||
if (!hasNextPage || isFetchingNextPage) return;
|
||||
console.log('[LiveAuction] loadMore: fetching next page');
|
||||
fetchNextPage();
|
||||
onEndReachedCalledDuringMomentum.current = true;
|
||||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
||||
|
||||
const renderFooter = useCallback(() => {
|
||||
if (!isFetchingNextPage) return null;
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<SearchInput onChange={() => { }} placeholder="Search...." filter={false} />
|
||||
|
||||
{showRefreshBanner && (
|
||||
<Animated.View
|
||||
entering={FadeInDown.duration(200)}
|
||||
exiting={FadeOutUp.duration(500)}
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 14,
|
||||
marginTop: 6,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#FFFFFF',
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.06,
|
||||
shadowRadius: 8,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
elevation: 4,
|
||||
zIndex: 10, // Ensure it stays on top
|
||||
position: 'absolute',
|
||||
top: 60, // Adjust based on your SearchInput height
|
||||
}}
|
||||
>
|
||||
<ActivityIndicator size="small" color={colors.primary} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: '#374151',
|
||||
fontWeight: '500',
|
||||
}}
|
||||
>
|
||||
Refreshing auctions
|
||||
</Text>
|
||||
</Animated.View>
|
||||
)}
|
||||
{
|
||||
isPending ? <Skeleton /> :
|
||||
<FlatList
|
||||
data={data?.result ?? []}
|
||||
renderItem={renderItem}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={{ paddingBottom: 50, paddingTop: 10 }}
|
||||
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.1}
|
||||
|
||||
onMomentumScrollBegin={() => {
|
||||
onEndReachedCalledDuringMomentum.current = false;
|
||||
}}
|
||||
|
||||
ListFooterComponent={renderFooter}
|
||||
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={isRefetching}
|
||||
onRefresh={refetch}
|
||||
tintColor="transparent"
|
||||
colors={[colors.primary]}
|
||||
/>
|
||||
}
|
||||
|
||||
initialNumToRender={6}
|
||||
maxToRenderPerBatch={6}
|
||||
windowSize={7}
|
||||
removeClippedSubviews
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
|
||||
</View>
|
||||
<View style={styles.footerLoader}>
|
||||
<ActivityIndicator size="small" color={colors.primary} />
|
||||
<AppText variant="caption" color={colors.textSecondary}>
|
||||
Loading more…
|
||||
</AppText>
|
||||
</View>
|
||||
);
|
||||
}, [isFetchingNextPage, colors]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isRefetching) {
|
||||
console.log('[LiveAuction] refetch started');
|
||||
setShowRefreshBanner(true);
|
||||
} else {
|
||||
console.log('[LiveAuction] refetch completed');
|
||||
const timer = setTimeout(() => setShowRefreshBanner(false), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isRefetching]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('[LiveAuction] data updated:', {
|
||||
count: data?.result?.length ?? 0,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
isPending,
|
||||
});
|
||||
}, [data, hasNextPage, isFetchingNextPage, isPending]);
|
||||
|
||||
if (isLoading) {
|
||||
return <Skelton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.root}>
|
||||
{/* Search */}
|
||||
<SearchInput onChange={() => {}} placeholder="Search auctions…" filter={false} />
|
||||
|
||||
{/* Refresh Banner */}
|
||||
{showRefreshBanner && (
|
||||
<Animated.View
|
||||
entering={FadeInDown.duration(200)}
|
||||
exiting={FadeOutUp.duration(400)}
|
||||
style={[
|
||||
styles.refreshBanner,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
...shadows.medium,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ActivityIndicator size="small" color={colors.primary} />
|
||||
<AppText variant="caption" color={colors.text} style={styles.refreshText as any}>
|
||||
Refreshing auctions…
|
||||
</AppText>
|
||||
</Animated.View>
|
||||
)}
|
||||
|
||||
{/* List */}
|
||||
{isPending ? (
|
||||
<SkeltonList />
|
||||
) : (
|
||||
<FlatList
|
||||
data={data?.result ?? []}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item: any) => item?.auctionId?.toString()}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.listContent}
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.1}
|
||||
onMomentumScrollBegin={() => {
|
||||
onEndReachedCalledDuringMomentum.current = false;
|
||||
}}
|
||||
ListFooterComponent={renderFooter}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={isRefetching}
|
||||
onRefresh={refetch}
|
||||
tintColor="transparent"
|
||||
colors={[colors.primary]}
|
||||
/>
|
||||
}
|
||||
initialNumToRender={6}
|
||||
maxToRenderPerBatch={6}
|
||||
windowSize={7}
|
||||
removeClippedSubviews
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default LiveAuction;
|
||||
export default LiveAuction;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
},
|
||||
listContent: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 60,
|
||||
paddingTop: 10,
|
||||
},
|
||||
refreshBanner: {
|
||||
alignSelf: 'center',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
marginTop: 6,
|
||||
borderRadius: 20,
|
||||
zIndex: 10,
|
||||
position: 'absolute',
|
||||
top: 60,
|
||||
},
|
||||
refreshText: {
|
||||
fontWeight: '500',
|
||||
} as any,
|
||||
footerLoader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 16,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,13 +1,26 @@
|
||||
import React, { memo } from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
||||
import { View, StyleSheet, TouchableOpacity } from 'react-native';
|
||||
import Animated, { FadeInDown } from 'react-native-reanimated';
|
||||
import moment from 'moment';
|
||||
import colors from '../../Constant/Color';
|
||||
import { LiveAuctionTileProps } from './types/types';
|
||||
import AuctionDetail from './Modal/AuctionDetail';
|
||||
import { Calendar, Tag, Info, ArrowRight } from 'lucide-react-native';
|
||||
import {
|
||||
Tag,
|
||||
Calendar,
|
||||
Clock,
|
||||
ShoppingCart,
|
||||
Trash2,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
} from 'lucide-react-native';
|
||||
import { useTheme } from '../../Hooks/useTheme';
|
||||
import AppText from '../../components/AppText';
|
||||
import NavigationString from '../../Constant/NavigationString';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
const LiveAuctionTile: React.FC<LiveAuctionTileProps> = ({
|
||||
const LiveAuctionTile: React.FC<LiveAuctionTileProps & { index?: number }> = ({
|
||||
data,
|
||||
index = 0,
|
||||
isPurchased = false,
|
||||
onPurchasePress,
|
||||
auctionDispatchDate,
|
||||
@@ -15,231 +28,252 @@ const LiveAuctionTile: React.FC<LiveAuctionTileProps> = ({
|
||||
purchaseEnd,
|
||||
auctionFees,
|
||||
auctionNumber,
|
||||
isPurchasedByContractor
|
||||
isPurchasedByContractor,
|
||||
}) => {
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
const [showDetail, setShowDetail] = React.useState(false);
|
||||
|
||||
const purchaseEnded = moment().isAfter(moment(purchaseEnd, 'DD-MM-YYYY HH:mm:ss'));
|
||||
const deadlineFormatted = moment(purchaseEnd, 'DD-MM-YYYY HH:mm:ss').format('DD MMM, YY');
|
||||
const Navigation = useNavigation() as any;
|
||||
const getStatus = () => {
|
||||
if (isPurchasedByContractor) return 'purchased';
|
||||
if (purchaseEnded) return 'expired';
|
||||
if (isPurchased) return 'in_cart';
|
||||
return 'active';
|
||||
};
|
||||
const status = getStatus();
|
||||
|
||||
const styles = makeStyles(colors, spacing, shadows);
|
||||
|
||||
if (showDetail) {
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
<AuctionDetail visible={showDetail} data={data} onClose={() => setShowDetail(false)} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.cardWrapper}>
|
||||
{
|
||||
!showDetail ?
|
||||
<>
|
||||
<View
|
||||
style={[
|
||||
styles.statusTag,
|
||||
{ backgroundColor: isPurchased ? colors.error : purchaseEnded ? '#94a3b8' : '#4ade80' },
|
||||
]}
|
||||
<Animated.View
|
||||
entering={FadeInDown.delay(index * 60).springify()}
|
||||
style={styles.card}
|
||||
>
|
||||
{/* ── Row 1: Number + Fee ── */}
|
||||
<View style={styles.topRow}>
|
||||
<View style={styles.numberRow}>
|
||||
<Tag size={14} color={colors.primary} strokeWidth={2} />
|
||||
<AppText variant="bodySmall" color={colors.primary} style={styles.auctionNo as any}>
|
||||
#{auctionNumber}
|
||||
</AppText>
|
||||
</View>
|
||||
<AppText variant="h4" color={colors.primary} style={styles.fee as any}>
|
||||
₹{auctionFees}
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
{/* ── Row 2: Title ── */}
|
||||
<AppText variant="h4" color={colors.text} numberOfLines={2} style={styles.title as any}>
|
||||
{auctionOfWork ?? 'General Auction Work'}
|
||||
</AppText>
|
||||
|
||||
{/* ── Row 3: Date strip ── */}
|
||||
<View style={[styles.dateStrip, { backgroundColor: colors.overlay }]}>
|
||||
{/* Start */}
|
||||
<View style={styles.dateCol}>
|
||||
<View style={styles.dateHeader}>
|
||||
<Calendar size={13} color={colors.textSecondary} strokeWidth={2} />
|
||||
<AppText variant="caption" color={colors.textSecondary} style={styles.dateLabel as any}>
|
||||
Start Date
|
||||
</AppText>
|
||||
</View>
|
||||
<AppText variant="caption" color={colors.text} style={styles.dateValue as any}>
|
||||
{auctionDispatchDate ?? '—'}
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
{/* Separator */}
|
||||
<View style={[styles.separator, { backgroundColor: colors.border }]} />
|
||||
|
||||
{/* Deadline */}
|
||||
<View style={styles.dateCol}>
|
||||
<View style={styles.dateHeader}>
|
||||
<Clock
|
||||
size={13}
|
||||
color={purchaseEnded ? colors.error : colors.success}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<View
|
||||
style={styles.container}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.badge} onPress={() => setShowDetail(true)}>
|
||||
<Tag size={14} color={colors.primary} />
|
||||
<Text style={styles.badgeText}>#{auctionNumber}</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.priceText}>₹{auctionFees}</Text>
|
||||
</View>
|
||||
<AppText variant="caption" color={colors.textSecondary} style={styles.dateLabel as any}>
|
||||
Deadline
|
||||
</AppText>
|
||||
</View>
|
||||
<AppText
|
||||
variant="caption"
|
||||
color={purchaseEnded ? colors.error : colors.text}
|
||||
style={styles.dateValue as any}
|
||||
>
|
||||
{deadlineFormatted}
|
||||
</AppText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Work Title */}
|
||||
<Text style={styles.workTitle} numberOfLines={2}>
|
||||
{auctionOfWork ?? 'General Auction Work'}
|
||||
</Text>
|
||||
{/* ── Row 4: Actions ── */}
|
||||
<View style={styles.actionRow}>
|
||||
{/* Ghost Details button */}
|
||||
<TouchableOpacity
|
||||
style={[styles.detailsBtn, { borderColor: colors.border }]}
|
||||
onPress={() => setShowDetail(true)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<AppText variant="bodySmall" color={colors.textSecondary} style={styles.detailsText as any}>
|
||||
View Details
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Info Grid */}
|
||||
<View style={styles.infoGrid}>
|
||||
<View style={styles.infoItem}>
|
||||
<Calendar size={16} color="#64748b" />
|
||||
<View style={styles.infoTextGroup}>
|
||||
<Text style={styles.infoLabel}>Start</Text>
|
||||
<Text style={styles.infoValue}>{auctionDispatchDate ?? '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoItem}>
|
||||
<Calendar size={16} color={purchaseEnded ? "#ef4444" : "#22c55e"} />
|
||||
<View style={styles.infoTextGroup}>
|
||||
<Text style={styles.infoLabel}>Deadline</Text>
|
||||
<Text style={[styles.infoValue, purchaseEnded && { color: '#ef4444' }]}>
|
||||
{moment(purchaseEnd, 'DD-MM-YYYY HH:mm:ss').format('DD MMM, YY')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Action Bar */}
|
||||
<View style={styles.actionBar}>
|
||||
<TouchableOpacity style={styles.iconBtn} onPress={() => setShowDetail(true)}>
|
||||
<Info size={18} color={colors.primary} />
|
||||
<Text style={styles.iconBtnText}>Details</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.mainButton,
|
||||
purchaseEnded
|
||||
? styles.btnDisabled
|
||||
: isPurchasedByContractor ? { backgroundColor: 'lightgray' } : isPurchased
|
||||
? styles.btnPurchased
|
||||
: styles.btnActive,
|
||||
]}
|
||||
onPress={onPurchasePress}
|
||||
disabled={purchaseEnded ? true : !isPurchasedByContractor ? false : true}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.mainButtonText,
|
||||
isPurchased && !purchaseEnded ? { color: colors.white } : { color: '#fff' },
|
||||
]}
|
||||
>
|
||||
{purchaseEnded ? (isPurchasedByContractor ? 'Purchased' : 'Expired') : isPurchasedByContractor ? 'Purchased' : isPurchased ? 'Remove' : 'Add to Cart'}
|
||||
</Text>
|
||||
{!purchaseEnded && !isPurchasedByContractor && (
|
||||
<ArrowRight size={16} color={isPurchased ? colors.white : '#fff'} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Auction Detail Modal */}
|
||||
</View>
|
||||
</>
|
||||
: <AuctionDetail visible={showDetail} data={data} onClose={() => setShowDetail(false)} />
|
||||
}
|
||||
|
||||
</View>
|
||||
{/* CTA */}
|
||||
{status === 'active' && (
|
||||
<TouchableOpacity
|
||||
style={[styles.ctaBtn, { backgroundColor: colors.primary }]}
|
||||
onPress={onPurchasePress}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
<ShoppingCart size={14} color="#fff" strokeWidth={2.5} />
|
||||
<AppText variant="caption" color="#fff" style={styles.ctaText as any}>
|
||||
ADD TO CART
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{status === 'in_cart' && (
|
||||
<TouchableOpacity
|
||||
style={[styles.ctaBtn, { backgroundColor: colors.success }]}
|
||||
onPress={() => { Navigation.navigate(NavigationString.PurchaseList) }}
|
||||
activeOpacity={0.85}
|
||||
>
|
||||
<ShoppingCart size={14} color="#fff" strokeWidth={2.5} />
|
||||
<AppText variant="caption" color="#fff" style={styles.ctaText as any}>
|
||||
GO TO CART
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{status === 'purchased' && (
|
||||
<View style={[styles.ctaBtn, { backgroundColor: colors.secondary }]}>
|
||||
<CheckCircle2 size={14} color="#fff" strokeWidth={2.5} />
|
||||
<AppText variant="caption" color="#fff" style={styles.ctaText as any}>
|
||||
PURCHASED
|
||||
</AppText>
|
||||
</View>
|
||||
)}
|
||||
{status === 'expired' && (
|
||||
<View style={[styles.ctaBtn, { backgroundColor: colors.secondary }]}>
|
||||
<XCircle size={14} color="#fff" strokeWidth={2.5} />
|
||||
<AppText variant="caption" color="#fff" style={styles.ctaText as any}>
|
||||
EXPIRED
|
||||
</AppText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(LiveAuctionTile);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
cardWrapper: {
|
||||
marginVertical: 10,
|
||||
marginHorizontal: 16,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 24,
|
||||
flexDirection: 'row',
|
||||
overflow: 'hidden',
|
||||
const makeStyles = (colors: any, spacing: any, shadows: any) =>
|
||||
StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
marginVertical: 7,
|
||||
padding: spacing.m,
|
||||
...shadows.medium,
|
||||
},
|
||||
|
||||
// Modern shadow
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 20,
|
||||
elevation: 8,
|
||||
},
|
||||
statusTag: {
|
||||
width: 6,
|
||||
height: '100%',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
badge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.primary + '25',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 5,
|
||||
borderRadius: 12,
|
||||
gap: 6,
|
||||
},
|
||||
badgeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
color: colors.primary,
|
||||
},
|
||||
priceText: {
|
||||
fontSize: 20,
|
||||
fontWeight: '800',
|
||||
color: '#0f172a',
|
||||
},
|
||||
workTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#334155',
|
||||
lineHeight: 24,
|
||||
marginBottom: 16,
|
||||
},
|
||||
infoGrid: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#f0f4f8',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 16,
|
||||
marginBottom: 18,
|
||||
},
|
||||
infoItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
infoTextGroup: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
infoLabel: {
|
||||
fontSize: 10,
|
||||
color: '#94a3b8',
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: '700',
|
||||
},
|
||||
infoValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
color: '#1e293b',
|
||||
},
|
||||
actionBar: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
iconBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#e2e8f0',
|
||||
},
|
||||
iconBtnText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: colors.primary,
|
||||
},
|
||||
mainButton: {
|
||||
flex: 1,
|
||||
height: 46,
|
||||
borderRadius: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
btnActive: {
|
||||
backgroundColor: '#4ade80', // light green
|
||||
},
|
||||
btnPurchased: {
|
||||
backgroundColor: colors.error,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.error,
|
||||
},
|
||||
btnDisabled: {
|
||||
backgroundColor: '#e2e8f0',
|
||||
},
|
||||
mainButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
},
|
||||
});
|
||||
/* Top row */
|
||||
topRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
numberRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
},
|
||||
auctionNo: {
|
||||
fontWeight: '700',
|
||||
} as any,
|
||||
fee: {
|
||||
fontWeight: '800',
|
||||
} as any,
|
||||
|
||||
/* Title */
|
||||
title: {
|
||||
fontWeight: '700',
|
||||
lineHeight: 24,
|
||||
marginBottom: spacing.m,
|
||||
} as any,
|
||||
|
||||
/* Date strip */
|
||||
dateStrip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderRadius: 12,
|
||||
paddingVertical: spacing.s + 2,
|
||||
paddingHorizontal: spacing.m,
|
||||
marginBottom: spacing.m,
|
||||
},
|
||||
dateCol: {
|
||||
flex: 1,
|
||||
},
|
||||
dateHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
marginBottom: 3,
|
||||
},
|
||||
dateLabel: {
|
||||
fontWeight: '500',
|
||||
} as any,
|
||||
dateValue: {
|
||||
fontWeight: '700',
|
||||
} as any,
|
||||
separator: {
|
||||
width: StyleSheet.hairlineWidth,
|
||||
height: 36,
|
||||
marginHorizontal: spacing.m,
|
||||
},
|
||||
|
||||
/* Actions */
|
||||
actionRow: {
|
||||
flexDirection: 'row',
|
||||
gap: spacing.s,
|
||||
alignItems: 'center',
|
||||
},
|
||||
detailsBtn: {
|
||||
flex: 1,
|
||||
paddingVertical: 10,
|
||||
borderWidth: 1,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
detailsText: {
|
||||
fontWeight: '600',
|
||||
} as any,
|
||||
ctaBtn: {
|
||||
flex: 2,
|
||||
height: 44,
|
||||
borderRadius: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 6,
|
||||
},
|
||||
ctaText: {
|
||||
fontWeight: '800',
|
||||
letterSpacing: 0.8,
|
||||
} as any,
|
||||
});
|
||||
|
||||
@@ -1,64 +1,66 @@
|
||||
import React, { memo, useEffect, useState } from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, StatusBar, Modal } from 'react-native';
|
||||
import { Briefcase, Calendar, FileText, Download, Eye, Layers, ArrowLeft, Clock } from 'lucide-react-native';
|
||||
import {
|
||||
View,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Modal,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import {
|
||||
Briefcase,
|
||||
Calendar,
|
||||
FileText,
|
||||
Download,
|
||||
Eye,
|
||||
Layers,
|
||||
ArrowLeft,
|
||||
Clock,
|
||||
IndianRupee,
|
||||
Wrench,
|
||||
Mail,
|
||||
} from 'lucide-react-native';
|
||||
import { useAuctionItem, useGetAuciton, useGetAucitonDocument } from '../../../Services/ApiCall/Hooks';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { AUCTION_DOCUMENT_DOWNLOAD } from '../../../Services/ApiCall/ApiUrls';
|
||||
import ReactNativeBlobUtil from 'react-native-blob-util';
|
||||
import AuctionItemDetail from './AuctionItemDetail';
|
||||
import { Loader } from '../../../Component/Index';
|
||||
import colors from '../../../Constant/Color';
|
||||
import { useTheme } from '../../../Hooks/useTheme';
|
||||
import AppText from '../../../components/AppText';
|
||||
import moment from 'moment';
|
||||
|
||||
interface Props { visible: boolean; onClose: () => void; data?: any }
|
||||
|
||||
const AuctionFullDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
const inset = useSafeAreaInsets();
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
|
||||
const inset = useSafeAreaInsets()
|
||||
const { data: auctionData, isLoading } = useGetAuciton({ auctionId: data?.auctionId })
|
||||
const [aucitonDetail, setAuciotnDetail] = useState<any>(auctionData)
|
||||
const [allBoolean, setAllBoolean] = useState({ showItemDetail: false, selectedItem: {}, fileLoading: false });
|
||||
const { data: auctionDocuments } = useGetAucitonDocument({ auctionId: data?.auctionId })
|
||||
const { mutate } = useAuctionItem()
|
||||
const { data: auctionData } = useGetAuciton({ auctionId: data?.auctionId });
|
||||
const [aucitonDetail, setAuciotnDetail] = useState<any>(auctionData);
|
||||
const [allBoolean, setAllBoolean] = useState({
|
||||
showItemDetail: false,
|
||||
selectedItem: {},
|
||||
fileLoading: false,
|
||||
});
|
||||
const { data: auctionDocuments } = useGetAucitonDocument({ auctionId: data?.auctionId });
|
||||
const { mutate } = useAuctionItem();
|
||||
|
||||
const formatDate = (date?: string) => {
|
||||
if (!date) return '-';
|
||||
if (!date) return '—';
|
||||
return moment(date, 'DD-MM-YYYY HH:mm:ss').format('DD MMM YYYY, hh:mm A');
|
||||
};
|
||||
|
||||
const isLive = data?.purchaseEnd ? moment().isBefore(moment(data.purchaseEnd, 'DD-MM-YYYY HH:mm:ss')) : false;
|
||||
|
||||
const Section = ({ title, icon: Icon, children }: any) => (
|
||||
<View style={styles.sectionContainer}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Icon size={20} color={colors.primary} />
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
</View>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
|
||||
const InfoBox = ({ label, value, full = false }: any) => (
|
||||
<View style={[styles.infoBox, full ? { width: '100%' } : { width: '48%' }]}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.value}>{value || '-'}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
const isLive = data?.purchaseEnd
|
||||
? moment().isBefore(moment(data.purchaseEnd, 'DD-MM-YYYY HH:mm:ss'))
|
||||
: false;
|
||||
|
||||
const handleDownload = async (id: number, fileName: string) => {
|
||||
try {
|
||||
setAllBoolean((prev: any) => ({ ...prev, fileLoading: true }));
|
||||
setAllBoolean(prev => ({ ...prev, fileLoading: true }));
|
||||
const { dirs } = ReactNativeBlobUtil.fs;
|
||||
|
||||
const path = `${dirs.DownloadDir}/${fileName}.pdf`;
|
||||
|
||||
|
||||
|
||||
const downloadUrl = `${AUCTION_DOCUMENT_DOWNLOAD}?documentId=${id}&isAmendment=false`;
|
||||
|
||||
|
||||
const response = await ReactNativeBlobUtil.config({
|
||||
await ReactNativeBlobUtil.config({
|
||||
fileCache: false,
|
||||
addAndroidDownloads: {
|
||||
useDownloadManager: true,
|
||||
@@ -69,315 +71,340 @@ const AuctionFullDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
description: 'Downloading document',
|
||||
mediaScannable: true,
|
||||
},
|
||||
}).fetch('GET', downloadUrl, {
|
||||
Accept: 'application/pdf',
|
||||
});
|
||||
|
||||
const stat = await ReactNativeBlobUtil.fs.stat(path);
|
||||
|
||||
}).fetch('GET', downloadUrl, { Accept: 'application/pdf' });
|
||||
} catch (error: any) {
|
||||
console.log('Error:', error?.message || error);
|
||||
} finally {
|
||||
setAllBoolean((prev: any) => ({ ...prev, fileLoading: false }));
|
||||
setAllBoolean(prev => ({ ...prev, fileLoading: false }));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
mutate({ auctionNumber: data?.auctionNumber, status: data?.auctionPattern }, {
|
||||
onSuccess: (res) => {
|
||||
setAuciotnDetail((prev: any) => ({ ...prev, auctionItems: res.data, auctionDocuments }))
|
||||
}, onError: (err) => {
|
||||
console.log(err, '-----auction item error');
|
||||
}
|
||||
});
|
||||
mutate(
|
||||
{ auctionNumber: data?.auctionNumber, status: data?.auctionPattern },
|
||||
{
|
||||
onSuccess: (res: any) => {
|
||||
setAuciotnDetail((prev: any) => ({ ...prev, auctionItems: res.data, auctionDocuments }));
|
||||
},
|
||||
onError: (err: any) => {
|
||||
console.log(err, '-----auction item error');
|
||||
},
|
||||
},
|
||||
);
|
||||
}, [data.auctionNumber, auctionDocuments]);
|
||||
|
||||
const isAmended = auctionData?.auctionStatus === 'Amended';
|
||||
const kd = (key: any, amended: any) => isAmended ? amended : key;
|
||||
|
||||
const styles = makeStyles(colors, spacing, shadows);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent={false}
|
||||
animationType="none"
|
||||
animationType="slide"
|
||||
statusBarTranslucent
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.safeArea}>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
|
||||
{/* Full Header */}
|
||||
<View style={[styles.header, { paddingTop: inset.top }]}>
|
||||
<TouchableOpacity onPress={onClose} style={styles.backBtn}>
|
||||
<ArrowLeft size={24} color="#1e293b" />
|
||||
<View style={styles.root}>
|
||||
{/* ── Header ── */}
|
||||
<View style={[styles.header, { paddingTop: inset.top + 6 }]}>
|
||||
<TouchableOpacity onPress={onClose} style={styles.backBtn} activeOpacity={0.7}>
|
||||
<ArrowLeft size={22} color={colors.text} strokeWidth={2.5} />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.headerTitleContainer}>
|
||||
<Text style={styles.headerTitleText}>Auction Overview</Text>
|
||||
<Text style={styles.headerIdText}>Ref: {data?.auctionNumber || 'N/A'}</Text>
|
||||
|
||||
<View style={styles.headerCenter}>
|
||||
<AppText variant="h4" color={colors.text} style={styles.headerTitle as any}>
|
||||
Auction Overview
|
||||
</AppText>
|
||||
<AppText variant="caption" color={colors.textSecondary}>
|
||||
Ref: {data?.auctionNumber ?? 'N/A'}
|
||||
</AppText>
|
||||
</View>
|
||||
<View style={styles.liveIndicator}>
|
||||
<View style={[styles.dot, { backgroundColor: isLive ? '#22c55e' : '#94a3b8' }]} />
|
||||
<Text style={styles.liveText}>{isLive ? 'LIVE' : 'CLOSED'}</Text>
|
||||
|
||||
<View style={[styles.statusChip, { borderColor: isLive ? `${colors.success}50` : colors.border }]}>
|
||||
<View style={[styles.statusDot, { backgroundColor: isLive ? colors.success : colors.textSecondary }]} />
|
||||
<AppText variant="caption" color={isLive ? colors.success : colors.textSecondary} style={styles.statusText as any}>
|
||||
{isLive ? 'LIVE' : 'CLOSED'}
|
||||
</AppText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Scrollable Body */}
|
||||
{/* ── Body ── */}
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={true}
|
||||
style={{ backgroundColor: colors.background }}
|
||||
>
|
||||
{/* 1. Basic Info Grid */}
|
||||
<Section title="Details" icon={Layers}>
|
||||
<View style={styles.grid}>
|
||||
<InfoBox label="Auction No." value={data?.auctionNumber} />
|
||||
<InfoBox label="Pattern" value={data?.auctionPattern || 'Forward'} />
|
||||
<InfoBox label="Mode" value={data?.auctionMode || 'Open'} />
|
||||
<InfoBox label="Category" value={data?.categoryOfAuction || 'General'} />
|
||||
<InfoBox label="EMD Type" value={data?.emd || 'Online'} />
|
||||
<InfoBox label="EMD Figure" value={data?.emdFigure || 'Item Wise'} />
|
||||
</View>
|
||||
</Section>
|
||||
|
||||
{/* 2. Work Description */}
|
||||
<Section title="Auction Details" icon={Briefcase}>
|
||||
<View style={styles.grid}>
|
||||
<InfoBox label="Auction Name" value={auctionData?.auctionOfWork} />
|
||||
<InfoBox label="Category Of Auction " value={auctionData?.auctionCategories} />
|
||||
<InfoBox label="Auction Fees (In Figure) " value={auctionData?.auctionFees} />
|
||||
<InfoBox label="Auction Fees (In Words)" value={auctionData?.auctionFeesInWord} />
|
||||
<InfoBox label="Auction Keyword" value={auctionData?.auctionKeywordName} />
|
||||
</View>
|
||||
</Section>
|
||||
{/* BASIC DETAILS */}
|
||||
<SectionCard title="Basic Details" icon={Layers} colors={colors} spacing={spacing} shadows={shadows}>
|
||||
<InfoRow label="Auction No." value={data?.auctionNumber} colors={colors} />
|
||||
<InfoRow label="Pattern" value={data?.auctionPattern || 'Forward'} colors={colors} />
|
||||
<InfoRow label="Mode" value={data?.auctionMode || 'Open'} colors={colors} />
|
||||
<InfoRow label="Category" value={data?.categoryOfAuction || 'General'} colors={colors} />
|
||||
<InfoRow label="EMD Type" value={data?.emd || 'Online'} colors={colors} last />
|
||||
</SectionCard>
|
||||
|
||||
{/* 3. Timeline Section */}
|
||||
<Section title="Key Dates" icon={Calendar}>
|
||||
<View style={styles.timelineContainer}>
|
||||
<View style={styles.timelineRow}>
|
||||
<View style={styles.iconCircle}><Clock size={16} color="#64748b" /></View>
|
||||
<View>
|
||||
<Text style={styles.label}>Auction Purchase (Start)</Text>
|
||||
<Text style={styles.value}>{formatDate(
|
||||
auctionData?.auctionStatus === "Amended" ? auctionData?.amendedkeyDates.auctionPurchase.startDateTime : auctionData?.keyDates.auctionPurchase.startDateTime)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.timelineConnector} />
|
||||
<View style={styles.timelineRow}>
|
||||
<View style={[styles.iconCircle, { backgroundColor: '#fee2e2' }]}><Clock size={16} color="#ef4444" /></View>
|
||||
<View>
|
||||
<Text style={styles.label}>Purchase Purchase (End)</Text>
|
||||
<Text style={styles.value}>{formatDate(
|
||||
auctionData?.auctionStatus === "Amended" ? auctionData?.amendedkeyDates.auctionPurchase.endDateTime : auctionData?.keyDates.auctionPurchase.endDateTime)}</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
<View style={styles.timelineConnector} />
|
||||
<View style={styles.timelineRow}>
|
||||
<View style={styles.iconCircle}><Clock size={16} color="#64748b" /></View>
|
||||
<View>
|
||||
<Text style={styles.label}>Bidding Start (Start)</Text>
|
||||
<Text style={styles.value}>{formatDate(
|
||||
auctionData?.auctionStatus === "Amended" ? auctionData?.amendedkeyDates.auctionBidding.startDateTime : auctionData?.keyDates.auctionBidding.startDateTime)}</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
<View style={styles.timelineConnector} />
|
||||
<View style={styles.timelineRow}>
|
||||
<View style={[styles.iconCircle, { backgroundColor: '#fee2e2' }]}><Clock size={16} color="#ef4444" /></View>
|
||||
<View>
|
||||
<Text style={styles.label}>Bidding Deadline (End)</Text>
|
||||
<Text style={styles.value}>{formatDate(
|
||||
auctionData?.auctionStatus === "Amended" ? auctionData?.amendedkeyDates.auctionBidding.endDateTime : auctionData?.keyDates.auctionBidding.endDateTime)}</Text>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</Section>
|
||||
{/* AUCTION DETAILS */}
|
||||
<SectionCard title="Auction Details" icon={Briefcase} colors={colors} spacing={spacing} shadows={shadows}>
|
||||
<InfoRow label="Name" value={auctionData?.auctionOfWork} colors={colors} multiline />
|
||||
<InfoRow label="Category" value={auctionData?.auctionCategories} colors={colors} />
|
||||
<InfoRow label="Fees" value={auctionData?.auctionFees ? `₹ ${auctionData.auctionFees}` : '—'} colors={colors} valueColor={colors.primary} />
|
||||
<InfoRow label="Fees (Words)" value={auctionData?.auctionFeesInWord} colors={colors} multiline />
|
||||
<InfoRow label="Keyword" value={auctionData?.auctionKeywordName} colors={colors} last />
|
||||
</SectionCard>
|
||||
|
||||
{/* 4. Item Table Section */}
|
||||
<Section title="Auction Items" icon={FileText}>
|
||||
<View style={styles.tableWrapper}>
|
||||
<View style={styles.tableHead}>
|
||||
<Text style={[styles.tableLabel, { flex: 2 }]}>Item</Text>
|
||||
<Text style={styles.tableLabel}>Time</Text>
|
||||
<Text style={[styles.tableLabel, { textAlign: 'right' }]}>View</Text>
|
||||
</View>
|
||||
{/* Dummy Item Row */}
|
||||
{aucitonDetail?.auctionItems?.map((item: any, index: number) => (
|
||||
<View style={styles.tableRow}>
|
||||
<View style={{ flex: 2 }}>
|
||||
<Text style={styles.itemMain}>{item.productName}</Text>
|
||||
<Text style={styles.itemSub}>Category: {item?.categoryName}</Text>
|
||||
{/* KEY DATES */}
|
||||
<SectionCard title="Key Dates" icon={Calendar} colors={colors} spacing={spacing} shadows={shadows}>
|
||||
<InfoRow label="Purchase Start" value={formatDate(kd(auctionData?.keyDates?.auctionPurchase?.startDateTime, auctionData?.amendedkeyDates?.auctionPurchase?.startDateTime))} colors={colors} />
|
||||
<InfoRow label="Purchase End" value={formatDate(kd(auctionData?.keyDates?.auctionPurchase?.endDateTime, auctionData?.amendedkeyDates?.auctionPurchase?.endDateTime))} colors={colors} valueColor={colors.error} />
|
||||
<InfoRow label="Bidding Start" value={formatDate(kd(auctionData?.keyDates?.auctionBidding?.startDateTime, auctionData?.amendedkeyDates?.auctionBidding?.startDateTime))} colors={colors} />
|
||||
<InfoRow label="Bidding End" value={formatDate(kd(auctionData?.keyDates?.auctionBidding?.endDateTime, auctionData?.amendedkeyDates?.auctionBidding?.endDateTime))} colors={colors} valueColor={colors.error} last />
|
||||
</SectionCard>
|
||||
|
||||
{/* AUCTION ITEMS */}
|
||||
{aucitonDetail?.auctionItems?.length > 0 && (
|
||||
<SectionCard title="Auction Items" icon={FileText} colors={colors} spacing={spacing} shadows={shadows}>
|
||||
{aucitonDetail.auctionItems.map((item: any, index: number) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.itemRow,
|
||||
{ borderBottomColor: colors.border },
|
||||
index === aucitonDetail.auctionItems.length - 1 && { borderBottomWidth: 0 },
|
||||
]}
|
||||
>
|
||||
<View style={styles.itemLeft}>
|
||||
<AppText variant="bodySmall" color={colors.text} style={styles.itemName as any}>
|
||||
{item.productName}
|
||||
</AppText>
|
||||
<AppText variant="caption" color={colors.textSecondary}>
|
||||
{item?.categoryName} · {item.timeDurationType}
|
||||
</AppText>
|
||||
</View>
|
||||
<Text style={styles.itemQty}>{item.timeDurationType}</Text>
|
||||
<TouchableOpacity style={styles.actionIcon} onPress={() => { setAllBoolean((prev: any) => ({ ...prev, showItemDetail: true, selectedItem: item })) }}>
|
||||
<Eye size={18} color={colors.primary} />
|
||||
<TouchableOpacity
|
||||
style={[styles.eyeBtn, { backgroundColor: `${colors.primary}15` }]}
|
||||
onPress={() => setAllBoolean(prev => ({ ...prev, showItemDetail: true, selectedItem: item }))}
|
||||
>
|
||||
<Eye size={16} color={colors.primary} strokeWidth={2} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</Section>
|
||||
</SectionCard>
|
||||
)}
|
||||
|
||||
{/* 5. Downloads */}
|
||||
<Section title="Downloads" icon={Download}>
|
||||
{aucitonDetail?.auctionDocuments?.map((doc: any, index: number) => (
|
||||
<TouchableOpacity style={styles.fileCard} onPress={() => {
|
||||
handleDownload(
|
||||
doc.auctionDocumentId,
|
||||
doc.fileName.replace('.pdf', '')
|
||||
)
|
||||
}}>
|
||||
<View style={styles.fileIcon}><FileText size={20} color="#ef4444" /></View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.fileName}>{doc.fileName}</Text>
|
||||
</View>
|
||||
{allBoolean.fileLoading ? (
|
||||
<View >
|
||||
<Loader size='small' color='#94a3b8' />
|
||||
{/* DOCUMENTS */}
|
||||
{aucitonDetail?.auctionDocuments?.length > 0 && (
|
||||
<SectionCard title="Documents" icon={Download} colors={colors} spacing={spacing} shadows={shadows}>
|
||||
{aucitonDetail.auctionDocuments.map((doc: any, index: number) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
style={[
|
||||
styles.docRow,
|
||||
{ borderBottomColor: colors.border },
|
||||
index === aucitonDetail.auctionDocuments.length - 1 && { borderBottomWidth: 0 },
|
||||
]}
|
||||
activeOpacity={0.7}
|
||||
onPress={() => handleDownload(doc.auctionDocumentId, doc.fileName.replace('.pdf', ''))}
|
||||
>
|
||||
<View style={[styles.docIcon, { backgroundColor: `${colors.error}15` }]}>
|
||||
<FileText size={16} color={colors.error} strokeWidth={2} />
|
||||
</View>
|
||||
) : (
|
||||
<Download size={20} color="#94a3b8" />
|
||||
)}
|
||||
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</Section>
|
||||
<AppText variant="bodySmall" color={colors.text} style={styles.docName as any} numberOfLines={1}>
|
||||
{doc.fileName}
|
||||
</AppText>
|
||||
{allBoolean.fileLoading
|
||||
? <ActivityIndicator size="small" color={colors.primary} />
|
||||
: <Download size={18} color={colors.textSecondary} strokeWidth={2} />
|
||||
}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</SectionCard>
|
||||
)}
|
||||
|
||||
</ScrollView>
|
||||
|
||||
{allBoolean.showItemDetail && <AuctionItemDetail data={allBoolean.selectedItem} onClose={() => { setAllBoolean((prev: any) => ({ ...prev, showItemDetail: false })) }} visible={allBoolean.showItemDetail} />}
|
||||
{allBoolean.showItemDetail && (
|
||||
<AuctionItemDetail
|
||||
data={allBoolean.selectedItem}
|
||||
onClose={() => setAllBoolean(prev => ({ ...prev, showItemDetail: false }))}
|
||||
visible={allBoolean.showItemDetail}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</Modal >
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
fullModal: {
|
||||
margin: 0,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f1f5f9',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
backBtn: {
|
||||
padding: 8,
|
||||
marginRight: 8,
|
||||
},
|
||||
headerTitleContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
headerTitleText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
color: '#0f172a',
|
||||
},
|
||||
headerIdText: {
|
||||
fontSize: 13,
|
||||
color: '#64748b',
|
||||
},
|
||||
liveIndicator: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f8fafc',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
borderRadius: 20,
|
||||
gap: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e2e8f0',
|
||||
},
|
||||
dot: { width: 8, height: 8, borderRadius: 4 },
|
||||
liveText: { fontSize: 11, fontWeight: '800', color: '#475569' },
|
||||
export default memo(AuctionFullDetail);
|
||||
|
||||
scrollView: { flex: 1, backgroundColor: '#f8fafc' },
|
||||
scrollContent: { padding: 16, paddingBottom: 30 },
|
||||
/* ─── Sub-components ─── */
|
||||
|
||||
sectionContainer: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#eef2f6',
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
marginBottom: 20,
|
||||
paddingBottom: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f8fafc',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
color: '#1e293b',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
grid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
infoBox: { marginBottom: 16 },
|
||||
label: { fontSize: 12, color: '#94a3b8', fontWeight: '600', marginBottom: 4 },
|
||||
value: { fontSize: 15, fontWeight: '700', color: '#334155' },
|
||||
spacer: { height: 12 },
|
||||
const SectionCard = ({ title, icon: Icon, children, colors, spacing, shadows }: any) => {
|
||||
const styles = makeStyles(colors, spacing, shadows);
|
||||
return (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Icon size={18} color={colors.primary} strokeWidth={2} />
|
||||
<AppText variant="caption" color={colors.text} style={styles.cardTitle as any}>
|
||||
{title.toUpperCase()}
|
||||
</AppText>
|
||||
</View>
|
||||
<View style={[styles.cardDivider, { backgroundColor: colors.border }]} />
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
timelineContainer: { paddingLeft: 8 },
|
||||
timelineRow: { flexDirection: 'row', alignItems: 'center', gap: 15 },
|
||||
iconCircle: { width: 34, height: 34, borderRadius: 10, backgroundColor: '#f1f5f9', alignItems: 'center', justifyContent: 'center' },
|
||||
timelineConnector: { width: 2, height: 20, backgroundColor: '#f1f5f9', marginLeft: 16 },
|
||||
const InfoRow = ({ label, value, colors, last = false, multiline = false, valueColor }: any) => (
|
||||
<View style={[
|
||||
{
|
||||
flexDirection: 'row',
|
||||
alignItems: multiline ? 'flex-start' : 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 13,
|
||||
borderBottomWidth: last ? 0 : StyleSheet.hairlineWidth,
|
||||
borderBottomColor: 'rgba(0,0,0,0.06)',
|
||||
gap: 12,
|
||||
},
|
||||
]}>
|
||||
<AppText variant="bodySmall" color={colors.textSecondary} style={{ flex: 1 } as any}>
|
||||
{label}
|
||||
</AppText>
|
||||
<AppText
|
||||
variant="bodySmall"
|
||||
color={valueColor || colors.text}
|
||||
style={{ flex: 1, textAlign: 'right', fontWeight: '600' } as any}
|
||||
numberOfLines={multiline ? 4 : 1}
|
||||
>
|
||||
{value || '—'}
|
||||
</AppText>
|
||||
</View>
|
||||
);
|
||||
|
||||
tableWrapper: { backgroundColor: '#f8fafc', borderRadius: 12, padding: 12 },
|
||||
tableHead: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#e2e8f0', paddingBottom: 8, marginBottom: 12 },
|
||||
tableLabel: { fontSize: 11, fontWeight: '800', color: '#94a3b8', flex: 1 },
|
||||
tableRow: { flexDirection: 'row', alignItems: 'center' },
|
||||
itemMain: { fontSize: 14, fontWeight: '700', color: '#1e293b' },
|
||||
itemSub: { fontSize: 12, color: '#64748b' },
|
||||
itemQty: { flex: 1, fontSize: 14, fontWeight: '700', color: '#334155' },
|
||||
actionIcon: { padding: 6 },
|
||||
/* ─── Styles factory ─── */
|
||||
const makeStyles = (colors: any, spacing: any, shadows: any) =>
|
||||
StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
|
||||
fileCard: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: '#f8fafc', padding: 12, borderRadius: 12 },
|
||||
fileIcon: { width: 40, height: 40, borderRadius: 8, backgroundColor: '#fee2e2', alignItems: 'center', justifyContent: 'center' },
|
||||
fileName: { fontSize: 14, fontWeight: '700', color: '#334155' },
|
||||
fileSize: { fontSize: 12, color: '#94a3b8' },
|
||||
/* Header */
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingBottom: spacing.m,
|
||||
backgroundColor: colors.surface,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: colors.border,
|
||||
gap: spacing.s,
|
||||
},
|
||||
backBtn: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
headerCenter: {
|
||||
flex: 1,
|
||||
},
|
||||
headerTitle: {
|
||||
fontWeight: '800',
|
||||
} as any,
|
||||
statusChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: spacing.s + 4,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 20,
|
||||
borderWidth: 1.2,
|
||||
gap: 5,
|
||||
},
|
||||
statusDot: {
|
||||
width: 7,
|
||||
height: 7,
|
||||
borderRadius: 4,
|
||||
},
|
||||
statusText: {
|
||||
fontWeight: '800',
|
||||
letterSpacing: 0.5,
|
||||
} as any,
|
||||
|
||||
footer: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: '#fff',
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === 'ios' ? 34 : 20,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f1f5f9',
|
||||
},
|
||||
mainBtn: {
|
||||
backgroundColor: colors.primary,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 4,
|
||||
},
|
||||
btnDisabled: { backgroundColor: '#cbd5e1' },
|
||||
mainBtnText: { color: '#fff', fontSize: 16, fontWeight: '800' },
|
||||
});
|
||||
scrollContent: {
|
||||
padding: spacing.m,
|
||||
paddingBottom: 50,
|
||||
gap: spacing.m,
|
||||
},
|
||||
|
||||
export default memo(AuctionFullDetail);
|
||||
/* Card */
|
||||
card: {
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingTop: spacing.m,
|
||||
paddingBottom: spacing.s,
|
||||
marginBottom: spacing.m,
|
||||
...shadows.light,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.s,
|
||||
marginBottom: spacing.s + 2,
|
||||
},
|
||||
cardTitle: {
|
||||
fontWeight: '800',
|
||||
letterSpacing: 1.2,
|
||||
} as any,
|
||||
cardDivider: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
|
||||
/* Items */
|
||||
itemRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.s + 2,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
gap: spacing.s,
|
||||
},
|
||||
itemLeft: {
|
||||
flex: 1,
|
||||
},
|
||||
itemName: {
|
||||
fontWeight: '700',
|
||||
marginBottom: 2,
|
||||
} as any,
|
||||
eyeBtn: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 9,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
/* Docs */
|
||||
docRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: spacing.s + 2,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
gap: spacing.s,
|
||||
},
|
||||
docIcon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 9,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
docName: {
|
||||
flex: 1,
|
||||
fontWeight: '600',
|
||||
} as any,
|
||||
});
|
||||
|
||||
@@ -1,38 +1,43 @@
|
||||
import React, { memo, useState } from 'react';
|
||||
import React, { memo, useState, useMemo } from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Modal } from 'react-native';
|
||||
import { Package, IndianRupee, FileText, Download, ArrowLeft, Info, } from 'lucide-react-native';
|
||||
import colors from '../../../Constant/Color';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useAucitonItemDetail } from '../../../Services/ApiCall/Hooks';
|
||||
import ReactNativeBlobUtil from 'react-native-blob-util';
|
||||
import { AUCTION_ITEM_DOCUMENT_DOWNLOAD } from '../../../Services/ApiCall/ApiUrls';
|
||||
import { Loader } from '../../../Component/Index';
|
||||
import { useTheme } from '../../../Hooks/useTheme';
|
||||
import AppText from '../../../components/AppText';
|
||||
|
||||
interface Props { visible: boolean; onClose: () => void; data?: any; }
|
||||
|
||||
const Section = ({ title, icon: Icon, children }: any) => (
|
||||
const Section = ({ title, icon: Icon, children, styles, colors }: any) => (
|
||||
<View style={styles.sectionCard}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<View style={styles.iconCircle}>
|
||||
<Icon size={18} color={colors.primary} strokeWidth={2.5} />
|
||||
</View>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
<AppText variant="caption" bold style={styles.sectionTitle}>{title}</AppText>
|
||||
</View>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
|
||||
const PriceTile = ({ label, fig, words, full = false }: any) => (
|
||||
const PriceTile = ({ label, fig, words, full = false, styles }: any) => (
|
||||
<View style={[styles.priceTile, full ? { width: '100%' } : { width: '48%' }]}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.priceFig}>₹{Number(fig).toLocaleString('en-IN')}</Text>
|
||||
<Text style={styles.priceWords}>{words}</Text>
|
||||
<AppText variant="caption" color={styles.label.color} bold style={styles.label}>{label}</AppText>
|
||||
<AppText variant="h3" bold style={styles.priceFig}>₹{Number(fig).toLocaleString('en-IN')}</AppText>
|
||||
<AppText variant="caption" style={styles.priceWords}>{words}</AppText>
|
||||
</View>
|
||||
);
|
||||
|
||||
const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
const inset = useSafeAreaInsets()
|
||||
const { colors, typography } = useTheme();
|
||||
const styles = useMemo(() => createStyles(colors, typography), [colors, typography]);
|
||||
|
||||
const [allBoolean, setAllBoolean] = useState({ fileLoading: false });
|
||||
const { data: itemData } = useAucitonItemDetail({ auctionItemId: data.id });
|
||||
const { data: itemData } = useAucitonItemDetail({ auctionItemId: data?.id });
|
||||
|
||||
const handleDownload = async (id: number, fileName: string) => {
|
||||
try {
|
||||
@@ -41,10 +46,7 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
|
||||
const path = `${dirs.DownloadDir}/${fileName}.pdf`;
|
||||
|
||||
|
||||
|
||||
const downloadUrl = `${AUCTION_ITEM_DOCUMENT_DOWNLOAD}?auctionItemId=${id}`;
|
||||
|
||||
|
||||
const response = await ReactNativeBlobUtil.config({
|
||||
fileCache: false,
|
||||
@@ -83,11 +85,11 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
{/* Navbar */}
|
||||
<View style={[styles.header, { paddingTop: inset.top }]}>
|
||||
<TouchableOpacity onPress={onClose} style={styles.backBtn}>
|
||||
<ArrowLeft size={24} color="#1e293b" />
|
||||
<ArrowLeft size={24} color={colors.text} />
|
||||
</TouchableOpacity>
|
||||
<View>
|
||||
<Text style={styles.headerTitle}>Item Information</Text>
|
||||
<Text style={styles.headerSub}>Detail View</Text>
|
||||
<AppText variant="body" bold style={styles.headerTitle}>Item Information</AppText>
|
||||
<AppText variant="caption" style={styles.headerSub}>Detail View</AppText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -96,69 +98,66 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Section title="Product Specification" icon={Package}>
|
||||
<Section title="Product Specification" icon={Package} styles={styles} colors={colors}>
|
||||
<View style={styles.identityHeader}>
|
||||
<Text style={styles.productNameText}>{data.productName.toUpperCase()}</Text>
|
||||
<AppText variant="h4" bold style={styles.productNameText}>{data?.productName?.toUpperCase()}</AppText>
|
||||
<View style={styles.categoryBadge}>
|
||||
<Text style={styles.categoryText}>{data.categoryName}</Text>
|
||||
<AppText variant="caption" bold style={styles.categoryText}>{data?.categoryName}</AppText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.specGrid}>
|
||||
<View style={styles.specItem}>
|
||||
<Text style={styles.label}>Sub Category</Text>
|
||||
<Text style={styles.specValue}>{data.subCategoryName}</Text>
|
||||
<AppText variant="caption" bold style={styles.label}>Sub Category</AppText>
|
||||
<AppText variant="bodySmall" bold style={styles.specValue}>{data?.subCategoryName}</AppText>
|
||||
</View>
|
||||
<View style={styles.specItem}>
|
||||
<Text style={styles.label}>Duration</Text>
|
||||
<Text style={styles.specValue}>{data.timeDurationType}</Text>
|
||||
<AppText variant="caption" bold style={styles.label}>Duration</AppText>
|
||||
<AppText variant="bodySmall" bold style={styles.specValue}>{data?.timeDurationType}</AppText>
|
||||
</View>
|
||||
</View>
|
||||
</Section>
|
||||
|
||||
<Section title="Reserve & Bid Values" icon={IndianRupee}>
|
||||
<Section title="Reserve & Bid Values" icon={IndianRupee} styles={styles} colors={colors}>
|
||||
<PriceTile
|
||||
label="Bidding Price"
|
||||
fig={data.reservePrice || data.emdAmount}
|
||||
words={data.reservePriceInWords || data.emdAmountInWords}
|
||||
fig={data?.reservePrice || data?.emdAmount}
|
||||
words={data?.reservePriceInWords || data?.emdAmountInWords}
|
||||
full
|
||||
styles={styles}
|
||||
/>
|
||||
<View style={styles.hDivider} />
|
||||
<PriceTile
|
||||
label="Auction Start Value"
|
||||
fig={data.reservePrice || data.auctionStartValueFigure}
|
||||
words={data.reservePriceInWords || data.auctionStartValueWords}
|
||||
fig={data?.reservePrice || data?.auctionStartValueFigure}
|
||||
words={data?.reservePriceInWords || data?.auctionStartValueWords}
|
||||
full
|
||||
styles={styles}
|
||||
/>
|
||||
<View style={styles.hDivider} />
|
||||
{/* <View style={styles.row}>
|
||||
<PriceTile label="Bid Variation" fig={data.bidVariationFig} words={data.bidVariationWords} />
|
||||
<PriceTile label="Auction Start Value" fig={data.auctionStartValue} words={data.auctionStartValueInWords
|
||||
} />
|
||||
</View> */}
|
||||
</Section>
|
||||
|
||||
<Section title="Brief Description" icon={Info}>
|
||||
<Text style={styles.descContent}>{data.briefDescription}</Text>
|
||||
<Section title="Brief Description" icon={Info} styles={styles} colors={colors}>
|
||||
<AppText variant="bodySmall" style={styles.descContent}>{data?.briefDescription}</AppText>
|
||||
</Section>
|
||||
|
||||
{itemData?.length && <Section title="View Documents" icon={FileText}>
|
||||
{itemData?.length && <Section title="View Documents" icon={FileText} styles={styles} colors={colors}>
|
||||
<View style={styles.docTableHead}>
|
||||
<Text style={styles.tableLabel}>Sr No.</Text>
|
||||
<Text style={[styles.tableLabel, { flex: 2 }]}>Document Name</Text>
|
||||
<Text style={styles.tableLabel}>Action</Text>
|
||||
<AppText variant="caption" bold style={styles.tableLabel}>Sr No.</AppText>
|
||||
<AppText variant="caption" bold style={[styles.tableLabel, { flex: 2 }]}>Document Name</AppText>
|
||||
<AppText variant="caption" bold style={styles.tableLabel}>Action</AppText>
|
||||
</View>
|
||||
|
||||
{itemData?.map((doc: any, index: any) => (
|
||||
<TouchableOpacity style={styles.docRow} activeOpacity={0.7} onPress={() => { handleDownload(doc.assetId, doc.fileName) }} key={doc.assetId}>
|
||||
<Text style={styles.docIndex}>{index + 1}</Text>
|
||||
<AppText variant="bodySmall" bold style={styles.docIndex}>{index + 1}</AppText>
|
||||
<View style={{ flex: 2 }}>
|
||||
<Text style={styles.docTitle} numberOfLines={1}>{doc.fileName}</Text>
|
||||
<AppText variant="bodySmall" bold style={styles.docTitle} numberOfLines={1}>{doc.fileName}</AppText>
|
||||
</View>
|
||||
<View style={styles.downloadIconBox}>
|
||||
{allBoolean.fileLoading ? (
|
||||
<View >
|
||||
<Loader size='small' color='#94a3b8' />
|
||||
<Loader size='small' color={colors.textSecondary} />
|
||||
</View>
|
||||
) : (
|
||||
<Download size={20} color={colors.primary} />
|
||||
@@ -173,26 +172,26 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
fullModal: { margin: 0, backgroundColor: '#f8fafc' },
|
||||
safeArea: { flex: 1 },
|
||||
const createStyles = (colors: any, typography: any) => StyleSheet.create({
|
||||
fullModal: { margin: 0, backgroundColor: colors.background },
|
||||
safeArea: { flex: 1, backgroundColor: colors.background },
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 16,
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: colors.surface,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f1f5f9',
|
||||
borderBottomColor: colors.border,
|
||||
},
|
||||
backBtn: { padding: 8, marginRight: 8 },
|
||||
headerTitle: { fontSize: 18, fontWeight: '800', color: '#0f172a' },
|
||||
headerSub: { fontSize: 12, color: '#94a3b8', fontWeight: '600', textTransform: 'uppercase' },
|
||||
headerTitle: { fontSize: 18, color: colors.text },
|
||||
headerSub: { fontSize: 12, color: colors.textSecondary, textTransform: 'uppercase' },
|
||||
|
||||
scrollView: { flex: 1 },
|
||||
scrollContent: { padding: 16, paddingBottom: 50 },
|
||||
|
||||
sectionCard: {
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 24,
|
||||
padding: 20,
|
||||
marginBottom: 16,
|
||||
@@ -217,55 +216,54 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
color: '#334155',
|
||||
color: colors.text,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
|
||||
// Product Identity
|
||||
identityHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 },
|
||||
productNameText: { fontSize: 20, fontWeight: '900', color: '#1e293b', flex: 1 },
|
||||
categoryBadge: { backgroundColor: '#f1f5f9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 },
|
||||
categoryText: { fontSize: 11, fontWeight: '800', color: '#64748b', textTransform: 'uppercase' },
|
||||
productNameText: { fontSize: 20, color: colors.text, flex: 1 },
|
||||
categoryBadge: { backgroundColor: colors.border, paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 },
|
||||
categoryText: { fontSize: 11, color: colors.textSecondary, textTransform: 'uppercase' },
|
||||
specGrid: { flexDirection: 'row', gap: 24, marginTop: 5 },
|
||||
specItem: { flex: 1 },
|
||||
specValue: { fontSize: 15, fontWeight: '700', color: '#334155', marginTop: 2 },
|
||||
specValue: { fontSize: 15, color: colors.text, marginTop: 2 },
|
||||
|
||||
// Pricing
|
||||
priceTile: { marginBottom: 16 },
|
||||
label: { fontSize: 11, color: '#94a3b8', fontWeight: '700', textTransform: 'uppercase', marginBottom: 4 },
|
||||
priceFig: { fontSize: 22, fontWeight: '900', color: colors.black },
|
||||
priceWords: { fontSize: 13, color: '#64748b', fontStyle: 'italic', marginTop: 2 },
|
||||
hDivider: { height: 1, backgroundColor: '#f1f5f9', marginBottom: 16 },
|
||||
label: { fontSize: 11, color: colors.textSecondary, textTransform: 'uppercase', marginBottom: 4 },
|
||||
priceFig: { fontSize: 22, color: colors.text },
|
||||
priceWords: { fontSize: 13, color: colors.textSecondary, fontStyle: 'italic', marginTop: 2 },
|
||||
hDivider: { height: 1, backgroundColor: colors.border, marginBottom: 16 },
|
||||
row: { flexDirection: 'row', justifyContent: 'space-between' },
|
||||
|
||||
// Description
|
||||
descContent: { fontSize: 15, color: '#475569', lineHeight: 22, fontWeight: '500' },
|
||||
descContent: { fontSize: 15, color: colors.textSecondary, lineHeight: 22, fontFamily: typography.fonts.medium },
|
||||
|
||||
// Table
|
||||
docTableHead: { flexDirection: 'row', paddingBottom: 10, borderBottomWidth: 1, borderBottomColor: '#f1f5f9', marginBottom: 10 },
|
||||
tableLabel: { fontSize: 11, fontWeight: '800', color: '#94a3b8', flex: 1 },
|
||||
docRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#f8fafc', padding: 12, borderRadius: 12 },
|
||||
docIndex: { flex: 1, fontSize: 14, fontWeight: '700', color: '#64748b' },
|
||||
docTitle: { fontSize: 14, fontWeight: '700', color: '#1e293b' },
|
||||
downloadIconBox: { backgroundColor: '#fff', padding: 8, borderRadius: 10, borderWidth: 1, borderColor: '#e2e8f0' },
|
||||
docTableHead: { flexDirection: 'row', paddingBottom: 10, borderBottomWidth: 1, borderBottomColor: colors.border, marginBottom: 10 },
|
||||
tableLabel: { fontSize: 11, color: colors.textSecondary, flex: 1 },
|
||||
docRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: colors.background, padding: 12, borderRadius: 12 },
|
||||
docIndex: { flex: 1, fontSize: 14, color: colors.textSecondary },
|
||||
docTitle: { fontSize: 14, color: colors.text },
|
||||
downloadIconBox: { backgroundColor: colors.surface, padding: 8, borderRadius: 10, borderWidth: 1, borderColor: colors.border },
|
||||
|
||||
// Footer
|
||||
footer: {
|
||||
position: 'absolute',
|
||||
bottom: 0, width: '100%',
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: colors.surface,
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === 'ios' ? 34 : 20,
|
||||
borderTopWidth: 1, borderTopColor: '#f1f5f9'
|
||||
borderTopWidth: 1, borderTopColor: colors.border
|
||||
},
|
||||
primaryBtn: {
|
||||
backgroundColor: colors.primary,
|
||||
height: 56, borderRadius: 18,
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10
|
||||
},
|
||||
primaryBtnText: { color: '#fff', fontSize: 16, fontWeight: '800' }
|
||||
primaryBtnText: { color: colors.buttonText, fontSize: 16, fontFamily: typography.fonts.bold }
|
||||
});
|
||||
|
||||
export default memo(AuctionItemDetail);
|
||||
@@ -64,7 +64,7 @@ const PurchaseAuction = () => {
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<SearchInput onChange={(val) => { setFilter(prev => ({ ...prev, auctionNumber: val })) }} placeholder='Search....' filterPress={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: !prev.isShowFilter })) }} />
|
||||
<SearchInput onChange={(val) => { setFilter(prev => ({ ...prev, auctionNumber: val })) }} placeholder='Search....' filterPress={() => { setAllBoolean((prev: any) => ({ ...prev, isShowFilter: !prev.isShowFilter })) }} filter={false} />
|
||||
{isPending ? <Skelton />
|
||||
:
|
||||
<FlatList
|
||||
|
||||
@@ -1,8 +1,24 @@
|
||||
import React, { use, useEffect, useState } from 'react';
|
||||
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
||||
import { InsideHeader, Loader } from '../../Component/Index';
|
||||
import colors from '../../Constant/Color';
|
||||
import { CreditCard, Calendar, User, DollarSign, ArrowRight } from 'lucide-react-native';
|
||||
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,
|
||||
Building2,
|
||||
BadgeIndianRupee,
|
||||
} from 'lucide-react-native';
|
||||
import { InsideHeader } from '../../Component/Index';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useOfflineAuctionPurchase, usePurchaseAuctionList } from '../../Services/ApiCall/Hooks';
|
||||
import { showSuccessAlert } from '../../Constant/ShowDailog';
|
||||
@@ -10,284 +26,466 @@ import { clearPurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
|
||||
import { CommonActions, useFocusEffect, useNavigation } from '@react-navigation/native';
|
||||
import NavigationString from '../../Constant/NavigationString';
|
||||
import Skeleton from '../../Component/Skelton/Skelton';
|
||||
|
||||
const dummyAuctionList = [
|
||||
{
|
||||
auctionId: 1,
|
||||
auctionNumber: 'AUC-2025-001',
|
||||
auctionPattern: 'Single Stage',
|
||||
auctionDispatchDate: '25 Feb 2025',
|
||||
auctionDispatcherNumber: 'DISP-001',
|
||||
auctionFees: 2500,
|
||||
gst: 18,
|
||||
gstAmount: 450,
|
||||
portalCharge: 100,
|
||||
payableAmount: 3050,
|
||||
},
|
||||
];
|
||||
import { useTheme } from '../../Hooks/useTheme';
|
||||
import AppText from '../../components/AppText';
|
||||
|
||||
const PurchaseAuctionList = () => {
|
||||
const Navigation = useNavigation()
|
||||
const Dispatch = useDispatch()
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [list, setList] = useState([]);
|
||||
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 Navigation: any = useNavigation();
|
||||
const Dispatch = useDispatch();
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [list, setList] = useState<any[]>([]);
|
||||
|
||||
const calculateTotalAmount = (item: any) => {
|
||||
const gstAmount =
|
||||
(Number(item.auctionFees) + Number(item.portalCharge)) *
|
||||
(Number(item.gst) / 100);
|
||||
const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
|
||||
const LoginUser = useSelector((state: any) => state.token.token);
|
||||
|
||||
const payableAmount =
|
||||
Number(item.auctionFees) + Number(item.portalCharge) + gstAmount;
|
||||
return payableAmount
|
||||
}
|
||||
const { mutate, isPending } = useOfflineAuctionPurchase();
|
||||
const { mutate: purchaseListMutation, isPending: purchaseListPending } = usePurchaseAuctionList();
|
||||
|
||||
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: ''
|
||||
};
|
||||
const calculateTotalAmount = (item: any) => {
|
||||
const gstAmount =
|
||||
(Number(item.auctionFees) + Number(item.portalCharge)) *
|
||||
(Number(item.gst) / 100);
|
||||
return Number(item.auctionFees) + Number(item.portalCharge) + gstAmount;
|
||||
};
|
||||
|
||||
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, "purchse Error");
|
||||
}
|
||||
})
|
||||
const grandTotal = list.reduce(
|
||||
(sum: number, item: any) => sum + calculateTotalAmount(item),
|
||||
0,
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.log("purchase offline error", error);
|
||||
}
|
||||
}
|
||||
|
||||
const handlePurchase = (type: 'online' | 'offline') => {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
type === 'online' ? Alert.alert('Online Purchase Successful!') : handleOfflinePurchase();
|
||||
|
||||
}, 1200);
|
||||
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: '',
|
||||
};
|
||||
|
||||
const renderItem = ({ item }: { item: typeof dummyAuctionList[0] }) => (
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.title}>{item.auctionNumber}</Text>
|
||||
<Text style={styles.pattern}>{item.auctionPattern}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardRow}>
|
||||
<Calendar size={18} color={colors.primary} />
|
||||
<Text style={styles.text}>Dispatch Date: {item.auctionDispatchDate}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardRow}>
|
||||
<User size={18} color={colors.primary} />
|
||||
<Text style={styles.text}>Dispatcher No: {item.auctionDispatcherNumber}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardRow}>
|
||||
<DollarSign size={18} color={colors.primary} />
|
||||
<Text style={styles.text}>Auction Fees: ₹{item.auctionFees}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardRow}>
|
||||
<DollarSign size={18} color={colors.primary} />
|
||||
<Text style={styles.text}>GST ({item.gst}%): ₹{item.gstAmount}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.cardRow}>
|
||||
<DollarSign size={18} color={colors.primary} />
|
||||
<Text style={styles.text}>Portal Charge: ₹{item.portalCharge}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.totalRow}>
|
||||
<CreditCard size={20} color={colors.white} />
|
||||
<Text style={styles.total}>Total: ₹{item.payableAmount}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const getPurchaseList = () => {
|
||||
const auctionNumbers: string[] = SelectedPurchaseList.map(
|
||||
(item: { auctionNumber: string }) => item.auctionNumber
|
||||
);
|
||||
purchaseListMutation({ auctionNumbers, contractorId: LoginUser.contractorId }, {
|
||||
onSuccess: (res) => {
|
||||
console.log("purchaseListMutation",res)
|
||||
if (res.statusCode == 200) {
|
||||
|
||||
setList(res.data)
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error, "purchase list error");
|
||||
}
|
||||
})
|
||||
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);
|
||||
}
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
getPurchaseList()
|
||||
}, [SelectedPurchaseList])
|
||||
};
|
||||
|
||||
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();
|
||||
}, [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 (
|
||||
<View style={{ flex: 1, backgroundColor: colors.white }}>
|
||||
<InsideHeader title="Purchase List" showArrow />
|
||||
<View style={styles.screen}>
|
||||
{purchaseListPending ? <Skeleton /> : <FlatList
|
||||
data={list}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={(item) => item.auctionId.toString()}
|
||||
contentContainerStyle={styles.container}
|
||||
/>}
|
||||
<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={styles.bottomButtonContainer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, { marginRight: 8 }]}
|
||||
onPress={() => handlePurchase('online')}
|
||||
>
|
||||
<Text style={styles.buttonText}>Purchase Online</Text>
|
||||
<ArrowRight size={18} color="#fff" style={{ marginLeft: 6 }} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, { marginLeft: 8 }]}
|
||||
onPress={() => handlePurchase('offline')}
|
||||
>
|
||||
{
|
||||
isPending ? <Loader size='small' color={colors.white} /> : <>
|
||||
<Text style={styles.buttonText}>Purchase Offline</Text>
|
||||
<ArrowRight size={18} color="#fff" style={{ marginLeft: 6 }} />
|
||||
</>
|
||||
}
|
||||
|
||||
</TouchableOpacity>
|
||||
<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;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
/* ─── 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,
|
||||
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: {
|
||||
padding: 16,
|
||||
paddingBottom: 120,
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingTop: spacing.s,
|
||||
paddingBottom: 120,
|
||||
},
|
||||
|
||||
/* Card */
|
||||
card: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
elevation: 5,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.12,
|
||||
shadowOffset: { width: 0, height: 3 },
|
||||
shadowRadius: 8,
|
||||
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',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#0F172A',
|
||||
indexBadge: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: 2,
|
||||
},
|
||||
pattern: {
|
||||
fontSize: 14,
|
||||
color: colors.primary,
|
||||
fontWeight: '600',
|
||||
patternBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
alignSelf: 'flex-start',
|
||||
paddingHorizontal: spacing.s,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 8,
|
||||
marginTop: 4,
|
||||
},
|
||||
cardRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
marginBottom: 4,
|
||||
divider: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
backgroundColor: colors.border,
|
||||
marginVertical: spacing.s,
|
||||
},
|
||||
text: {
|
||||
fontSize: 14,
|
||||
color: '#555',
|
||||
feeSection: {
|
||||
borderRadius: 12,
|
||||
padding: spacing.s + 2,
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
totalRow: {
|
||||
marginTop: 10,
|
||||
backgroundColor: colors.primary,
|
||||
borderRadius: 12,
|
||||
paddingVertical: 10,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
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',
|
||||
},
|
||||
total: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#fff',
|
||||
totalLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.s,
|
||||
},
|
||||
bottomButtonContainer: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: colors.white,
|
||||
width: '100%',
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 10,
|
||||
elevation: 5
|
||||
|
||||
/* 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,
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 14,
|
||||
borderRadius: 16,
|
||||
gap: spacing.s,
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
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.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 10,
|
||||
...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,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,262 +1,298 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Platform } from 'react-native';
|
||||
import React, { useMemo } from 'react';
|
||||
import { View, StyleSheet, TouchableOpacity } from 'react-native';
|
||||
import Animated, { FadeInUp, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
||||
import moment from 'moment';
|
||||
import CountdownTimer from '../../Component/Counter/CountdownTimer';
|
||||
import colors from '../../Constant/Color';
|
||||
import AuctionDetail from './Modal/AuctionDetail';
|
||||
import AppText from '../../components/AppText';
|
||||
import { useTheme } from '../../Hooks/useTheme';
|
||||
import {
|
||||
Tag,
|
||||
Calendar,
|
||||
IndianRupee,
|
||||
ArrowRight,
|
||||
CircleDot,
|
||||
Clock,
|
||||
TimerOff,
|
||||
} from 'lucide-react-native';
|
||||
|
||||
const PurchaseAuctionTile = ({ item, onPressDetails, onStartBidding, buttonEnable, isAuctionEnd }: any) => {
|
||||
const PurchaseAuctionTile = ({
|
||||
item,
|
||||
onPressDetails,
|
||||
onStartBidding,
|
||||
buttonEnable,
|
||||
isAuctionEnd,
|
||||
}: any) => {
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
const [showDetail, setShowDetail] = React.useState(false);
|
||||
const scale = useSharedValue(1);
|
||||
const elevation = useSharedValue(8);
|
||||
const animatedStyle = useAnimatedStyle(() => {
|
||||
return {
|
||||
transform: [{ scale: scale.value }],
|
||||
elevation: elevation.value, // Android-safe
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handlePressIn = () => {
|
||||
scale.value = withTiming(0.97, { duration: 120 });
|
||||
elevation.value = withTiming(3, { duration: 120 });
|
||||
};
|
||||
const animatedStyle = useAnimatedStyle(() => ({
|
||||
transform: [{ scale: scale.value }],
|
||||
}));
|
||||
|
||||
const handlePressOut = () => {
|
||||
scale.value = withTiming(1, { duration: 160 });
|
||||
elevation.value = withTiming(8, { duration: 160 });
|
||||
};
|
||||
const handlePressIn = () => scale.value = withTiming(0.98, { duration: 140 });
|
||||
const handlePressOut = () => scale.value = withTiming(1, { duration: 160 });
|
||||
|
||||
const statusColor = isAuctionEnd ? '#EF4444' : buttonEnable ? colors.primary : '#94A3B8';
|
||||
const isAmended = item?.auctionStatus === 'Amended';
|
||||
const biddingEnd = isAmended
|
||||
? item?.amendedkeyDates?.auctionBidding?.endDateTime?.replace(' kk', '')
|
||||
: item?.keyDates?.auctionBidding?.endDateTime?.replace(' kk', '');
|
||||
const biddingStart = isAmended
|
||||
? item?.amendedkeyDates?.auctionBidding?.startDateTime?.replace(' kk', '')
|
||||
: item?.keyDates?.auctionBidding?.startDateTime?.replace(' kk', '');
|
||||
|
||||
const lightStatusBg = isAuctionEnd ? '#FEF2F2' : buttonEnable ? '#EFF6FF' : '#F8FAFC';
|
||||
const statusConfig = useMemo(() => {
|
||||
if (isAuctionEnd) return { label: 'ENDED', color: colors.error, bg: `${colors.error}15`, Icon: TimerOff };
|
||||
if (buttonEnable) return { label: 'LIVE', color: colors.success, bg: `${colors.success}15`, Icon: CircleDot };
|
||||
return { label: 'PENDING', color: colors.textSecondary, bg: `${colors.textSecondary}12`, Icon: Clock };
|
||||
}, [isAuctionEnd, buttonEnable, colors]);
|
||||
|
||||
const styles = makeStyles(colors, spacing);
|
||||
|
||||
if (showDetail) {
|
||||
return <AuctionDetail visible={showDetail} data={item} onClose={() => setShowDetail(false)} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
{!showDetail ? <Animated.View
|
||||
entering={FadeInUp.duration(400)}
|
||||
style={[styles.shadowContainer, animatedStyle]}
|
||||
<Animated.View
|
||||
entering={FadeInUp.duration(450).springify()}
|
||||
style={[styles.container, shadows.medium, animatedStyle]}
|
||||
>
|
||||
<TouchableOpacity
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowDetail(true)}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
style={styles.card}
|
||||
>
|
||||
<TouchableOpacity
|
||||
activeOpacity={1}
|
||||
onPress={() => setShowDetail(true)}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
style={styles.cardInternal}
|
||||
>
|
||||
<View style={[styles.statusAccent, { backgroundColor: statusColor }]} />
|
||||
|
||||
<View style={styles.mainInfo}>
|
||||
{/* Header */}
|
||||
<View style={styles.headerRow}>
|
||||
<View>
|
||||
<View style={[styles.statusBadge, { backgroundColor: lightStatusBg }]}>
|
||||
<View style={[styles.statusDot, { backgroundColor: statusColor }]} />
|
||||
<Text style={[styles.statusText, { color: statusColor }]}>
|
||||
{isAuctionEnd ? 'ENDED' : buttonEnable ? 'LIVE' : 'PENDING'}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.title}>{item.auctionNumber}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.amountContainer}>
|
||||
<Text style={styles.amount}>
|
||||
₹{item.auctionFees?.toLocaleString()}
|
||||
</Text>
|
||||
<Text style={styles.feeLabel}>Auction Fee</Text>
|
||||
</View>
|
||||
{/* ── Header ── */}
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerTop}>
|
||||
{/* Status pill */}
|
||||
<View style={[styles.statusBadge, { backgroundColor: statusConfig.bg }]}>
|
||||
<statusConfig.Icon size={11} color={statusConfig.color} strokeWidth={3} />
|
||||
<AppText variant="caption" color={statusConfig.color} style={styles.statusText as any}>
|
||||
{statusConfig.label}
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
{/* Date */}
|
||||
<View style={styles.dateRow}>
|
||||
<Text style={styles.dateText}>
|
||||
<Text style={styles.dateLabel}>Bidding Start: </Text>
|
||||
{moment(
|
||||
item?.auctionStatus === "Amended" ? item?.amendedkeyDates?.auctionBidding?.startDateTime?.replace(' kk', '') : item?.keyDates?.auctionBidding?.startDateTime?.replace(' kk', ''),
|
||||
'DD-MM-YYYY HH:mm:ss'
|
||||
).format('DD MMM YYYY, hh:mm A')}
|
||||
</Text>
|
||||
<Text style={styles.dateText}>
|
||||
<Text style={styles.dateLabel}>Bidding Ends: </Text>
|
||||
{moment(
|
||||
item?.auctionStatus === "Amended" ? item?.amendedkeyDates?.auctionBidding?.endDateTime?.replace(' kk', '') : item?.keyDates?.auctionBidding?.endDateTime?.replace(' kk', ''),
|
||||
'DD-MM-YYYY HH:mm:ss'
|
||||
).format('DD MMM YYYY, hh:mm A')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Footer */}
|
||||
<View style={styles.footer}>
|
||||
<View style={styles.footerTop}>
|
||||
<Text style={styles.footerLabel}>Remaining Time</Text>
|
||||
{buttonEnable && !isAuctionEnd ? (
|
||||
<CountdownTimer
|
||||
endDate={item?.auctionStatus === "Amended" ? item?.amendedkeyDates?.auctionBidding?.endDateTime : item?.keyDates?.auctionBidding?.endDateTime}
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.endedText}>--:--:--</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
disabled={!buttonEnable}
|
||||
onPress={onStartBidding}
|
||||
activeOpacity={0.85}
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: statusColor },
|
||||
!buttonEnable && styles.disabledButton,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.addText}>
|
||||
{isAuctionEnd
|
||||
? 'Bidding Closed'
|
||||
: !buttonEnable
|
||||
? 'Pending Bid'
|
||||
: 'Proceed to Start Bidding'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
{/* Auction number */}
|
||||
<View style={styles.numberRow}>
|
||||
<Tag size={12} color={colors.primary} strokeWidth={2} />
|
||||
<AppText variant="caption" color={colors.textSecondary} style={styles.numberText as any}>
|
||||
{item?.auctionNumber}
|
||||
</AppText>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View> :
|
||||
<AuctionDetail visible={showDetail} data={item} onClose={() => setShowDetail(false)} />
|
||||
}
|
||||
</View>
|
||||
|
||||
{/* Work title */}
|
||||
<AppText variant="bodySmall" color={colors.text} numberOfLines={2} style={styles.workTitle as any}>
|
||||
{item?.auctionOfWork ?? item?.auctionNumber ?? 'Auction Details'}
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
{/* ── Info Grid ── */}
|
||||
<View style={styles.infoGrid}>
|
||||
{/* Fee */}
|
||||
<View style={styles.infoRow}>
|
||||
<View style={[styles.iconBox, { backgroundColor: `${colors.primary}15` }]}>
|
||||
<IndianRupee size={17} color={colors.primary} strokeWidth={2} />
|
||||
</View>
|
||||
<View>
|
||||
<AppText variant="caption" color={colors.textSecondary}>Auction Fee</AppText>
|
||||
<AppText variant="caption" color={colors.text} style={styles.infoValue as any}>
|
||||
₹{Number(item?.auctionFees ?? 0).toLocaleString('en-IN')}
|
||||
</AppText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Bidding End */}
|
||||
<View style={styles.infoRow}>
|
||||
<View style={[styles.iconBox, { backgroundColor: `${colors.primary}15` }]}>
|
||||
<Calendar size={17} color={colors.primary} strokeWidth={2} />
|
||||
</View>
|
||||
<View>
|
||||
<AppText variant="caption" color={colors.textSecondary}>Bidding Ends</AppText>
|
||||
<AppText variant="caption" color={colors.text} style={styles.infoValue as any}>
|
||||
{biddingEnd
|
||||
? moment(biddingEnd, 'DD-MM-YYYY HH:mm:ss').format('DD MMM, hh:mm A')
|
||||
: '—'}
|
||||
</AppText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ── Footer ── */}
|
||||
<View style={styles.footer}>
|
||||
<AppText variant="caption" color={colors.textSecondary} style={{ marginBottom: 4, alignSelf: 'flex-start' } as any}>
|
||||
Time Remaining
|
||||
</AppText>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
||||
{/* Timer */}
|
||||
<View style={styles.timerSection}>
|
||||
|
||||
{buttonEnable && !isAuctionEnd ? (
|
||||
<CountdownTimer endDate={biddingEnd} />
|
||||
) : (
|
||||
<AppText variant="bodySmall" color={colors.textSecondary} style={{ fontWeight: '700' } as any}>
|
||||
-- : -- : --
|
||||
</AppText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* CTA Button */}
|
||||
<TouchableOpacity
|
||||
disabled={!buttonEnable || isAuctionEnd}
|
||||
onPress={onStartBidding}
|
||||
activeOpacity={0.85}
|
||||
style={[
|
||||
styles.ctaBtn,
|
||||
{
|
||||
backgroundColor:
|
||||
isAuctionEnd
|
||||
? colors.error
|
||||
: buttonEnable
|
||||
? colors.primary
|
||||
: colors.border,
|
||||
opacity: (!buttonEnable || isAuctionEnd) ? 0.8 : 1,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<AppText
|
||||
variant="button"
|
||||
color={colors.buttonText}
|
||||
style={styles.ctaText as any}
|
||||
>
|
||||
{isAuctionEnd ? 'Ended' : !buttonEnable ? 'Pending' : 'Bid Now'}
|
||||
</AppText>
|
||||
{buttonEnable && !isAuctionEnd && (
|
||||
<ArrowRight size={15} color={colors.buttonText} strokeWidth={2.5} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseAuctionTile;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
shadowContainer: {
|
||||
marginHorizontal: 5,
|
||||
marginTop: 14,
|
||||
marginBottom: 6,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#fff',
|
||||
elevation: 8,
|
||||
},
|
||||
cardInternal: {
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
statusAccent: {
|
||||
width: 5,
|
||||
height: '100%',
|
||||
},
|
||||
mainInfo: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
},
|
||||
headerRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 12,
|
||||
},
|
||||
statusBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 6,
|
||||
marginBottom: 6,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
statusDot: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
marginRight: 5,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 10,
|
||||
fontWeight: '800',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
title: {
|
||||
fontWeight: '800',
|
||||
fontSize: 16,
|
||||
color: '#1E293B',
|
||||
},
|
||||
amountContainer: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
amount: {
|
||||
fontWeight: '900',
|
||||
fontSize: 18,
|
||||
color: '#0F172A',
|
||||
},
|
||||
feeLabel: {
|
||||
fontSize: 10,
|
||||
color: '#64748B',
|
||||
fontWeight: '500',
|
||||
},
|
||||
dateRow: {
|
||||
backgroundColor: '#F8FAFC',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 10,
|
||||
marginBottom: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#F1F5F9',
|
||||
},
|
||||
dateText: {
|
||||
fontSize: 12,
|
||||
color: '#334155',
|
||||
fontWeight: '600',
|
||||
},
|
||||
dateLabel: {
|
||||
fontWeight: '400',
|
||||
color: '#64748B',
|
||||
},
|
||||
footer: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#F1F5F9',
|
||||
paddingTop: 12,
|
||||
},
|
||||
footerTop: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
footerLabel: {
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
color: '#94A3B8',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
endedText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
color: '#CBD5E1',
|
||||
},
|
||||
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,
|
||||
},
|
||||
}),
|
||||
},
|
||||
disabledButton: {
|
||||
backgroundColor: '#E2E8F0',
|
||||
},
|
||||
addText: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
});
|
||||
const makeStyles = (colors: any, spacing: any) =>
|
||||
StyleSheet.create({
|
||||
container: {
|
||||
marginHorizontal: spacing.s,
|
||||
marginBottom: spacing.m,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.surface,
|
||||
},
|
||||
card: {
|
||||
borderRadius: 16,
|
||||
backgroundColor: colors.surface,
|
||||
padding: spacing.m,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0,0,0,0.03)',
|
||||
},
|
||||
|
||||
/* Header */
|
||||
header: {
|
||||
marginBottom: spacing.m,
|
||||
},
|
||||
headerTop: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
statusBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 5,
|
||||
borderRadius: 20,
|
||||
gap: 5,
|
||||
},
|
||||
statusText: {
|
||||
fontWeight: '800',
|
||||
fontSize: 10,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
} as any,
|
||||
numberRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
numberText: {
|
||||
letterSpacing: 0.4,
|
||||
fontWeight: '600',
|
||||
} as any,
|
||||
workTitle: {
|
||||
fontWeight: '600',
|
||||
lineHeight: 20,
|
||||
} as any,
|
||||
|
||||
divider: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
backgroundColor: colors.border,
|
||||
marginBottom: spacing.m,
|
||||
opacity: 0.6,
|
||||
},
|
||||
|
||||
/* Info grid */
|
||||
infoGrid: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: spacing.l,
|
||||
gap: spacing.s,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
flex: 1,
|
||||
},
|
||||
iconBox: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
infoValue: {
|
||||
fontWeight: '700',
|
||||
} as any,
|
||||
|
||||
/* Footer */
|
||||
footer: {
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.background,
|
||||
marginHorizontal: -spacing.m,
|
||||
marginBottom: -spacing.m,
|
||||
padding: spacing.m,
|
||||
borderBottomLeftRadius: 16,
|
||||
borderBottomRightRadius: 16,
|
||||
borderTopWidth: StyleSheet.hairlineWidth,
|
||||
borderTopColor: colors.border,
|
||||
},
|
||||
timerSection: {
|
||||
flex: 1,
|
||||
},
|
||||
ctaBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 18,
|
||||
borderRadius: 12,
|
||||
gap: 5,
|
||||
},
|
||||
ctaText: {
|
||||
letterSpacing: 0.8,
|
||||
} as any,
|
||||
});
|
||||
|
||||
@@ -1,227 +1,387 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
|
||||
import Animated, { FadeIn, FadeOut, Layout, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
||||
import { ChevronDown, Trash2, Info } from 'lucide-react-native';
|
||||
import {
|
||||
View,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
} from 'react-native';
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
FadeInDown,
|
||||
Layout,
|
||||
useAnimatedStyle,
|
||||
useSharedValue,
|
||||
withTiming,
|
||||
} from 'react-native-reanimated';
|
||||
import { ChevronDown, ChevronRight, Trash2, ShoppingBag, Gavel, Tag } from 'lucide-react-native';
|
||||
import { InsideHeader } from '../../Component/Index';
|
||||
import colors from '../../Constant/Color';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import NavigationString from '../../Constant/NavigationString';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { togglePurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
|
||||
import { useTheme } from '../../Hooks/useTheme';
|
||||
import AppText from '../../components/AppText';
|
||||
|
||||
const PurchaseList = () => {
|
||||
const Navigation: any = useNavigation()
|
||||
const Dispatch = useDispatch()
|
||||
const Navigation: any = useNavigation();
|
||||
const Dispatch = useDispatch();
|
||||
const { colors, spacing, shadows } = useTheme();
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
|
||||
const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
|
||||
|
||||
const toggleExpand = (index: number) => {
|
||||
setExpandedIndex(prev => (prev === index ? null : index));
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!SelectedPurchaseList || SelectedPurchaseList.length < 1) {
|
||||
Navigation.goBack();
|
||||
}
|
||||
}, [SelectedPurchaseList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!SelectedPurchaseList || SelectedPurchaseList.length < 1) {
|
||||
Navigation.goBack();
|
||||
}
|
||||
}, [SelectedPurchaseList]);
|
||||
|
||||
const styles = makeStyles(colors, spacing, shadows);
|
||||
|
||||
return (
|
||||
<View style={styles.screen}>
|
||||
<InsideHeader title="Purchase" showArrow />
|
||||
<InsideHeader title="Purchase Auctions" showArrow />
|
||||
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.heading}>Purchase List</Text>
|
||||
{/* <Info size={20} color="#0F172A" /> */}
|
||||
{/* Summary Strip */}
|
||||
<View style={styles.summaryStrip}>
|
||||
<View style={styles.summaryIcon}>
|
||||
<ShoppingBag size={16} color={colors.primary} />
|
||||
</View>
|
||||
<AppText variant="caption" color={colors.textSecondary}>
|
||||
<AppText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700' } as any}>
|
||||
{SelectedPurchaseList.length}
|
||||
</AppText>
|
||||
{' '}auction{SelectedPurchaseList.length !== 1 ? 's' : ''} selected for purchase
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
{/* Cards */}
|
||||
{SelectedPurchaseList.map((item: any, index: any) => {
|
||||
const expanded = expandedIndex === index;
|
||||
return (
|
||||
<Animated.View
|
||||
key={item.auctionId}
|
||||
layout={Layout.springify()}
|
||||
style={styles.card}
|
||||
>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
onPress={() => toggleExpand(index)}
|
||||
>
|
||||
<CardHeader
|
||||
title={item.auctionOfWork}
|
||||
expanded={expanded}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.container}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{SelectedPurchaseList.map((item: any, index: number) => (
|
||||
<PurchaseListItem
|
||||
key={item.auctionId}
|
||||
item={item}
|
||||
index={index}
|
||||
expandedIndex={expandedIndex}
|
||||
toggleExpand={toggleExpand}
|
||||
colors={colors}
|
||||
styles={styles}
|
||||
Dispatch={Dispatch}
|
||||
/>
|
||||
))}
|
||||
|
||||
<Text style={styles.subTitle}>
|
||||
Auction No: {item.auctionNumber}
|
||||
</Text>
|
||||
|
||||
<Text style={styles.subTitle}>
|
||||
Status:{' '}
|
||||
<Text
|
||||
style={{
|
||||
color: item.status ? '#16A34A' : '#DC2626',
|
||||
fontWeight: '700',
|
||||
}}
|
||||
>
|
||||
{item.status ? 'Open' : 'Closed'}
|
||||
</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Expanded Content */}
|
||||
{expanded && (
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(220)}
|
||||
exiting={FadeOut.duration(180)}
|
||||
layout={Layout.springify()}
|
||||
style={styles.details}
|
||||
>
|
||||
{renderRow('Auction Mode', item.auctionMode)}
|
||||
{renderRow('Pattern', item.auctionPattern)}
|
||||
{renderRow('Fees', `₹ ${item.auctionFees}`)}
|
||||
{renderRow('Department', item.deptName)}
|
||||
{renderRow('Purchase End', item.purchaseEnd)}
|
||||
|
||||
<TouchableOpacity style={styles.removeButton} onPress={() => { Dispatch(togglePurchaseAuction(item)) }}>
|
||||
<Trash2 size={18} color="#fff" />
|
||||
<Text style={styles.removeText}>Remove</Text>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
)}
|
||||
</Animated.View>
|
||||
);
|
||||
})}
|
||||
<View style={{ height: 90 }} />
|
||||
</ScrollView>
|
||||
|
||||
{/* Footer */}
|
||||
<TouchableOpacity disabled={Boolean(!SelectedPurchaseList.length)} style={[styles.proceedButton, { backgroundColor: Boolean(!SelectedPurchaseList.length) ? colors.lightText : colors.primary }]} onPress={() => { Navigation.navigate(NavigationString.PurchaseAuctionList) }}>
|
||||
<Text style={styles.proceedText}>Proceed to Purchase</Text>
|
||||
</TouchableOpacity>
|
||||
{/* Floating Proceed Button */}
|
||||
<View style={styles.footerContainer}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
disabled={!SelectedPurchaseList.length}
|
||||
style={[
|
||||
styles.proceedButton,
|
||||
{
|
||||
backgroundColor: SelectedPurchaseList.length
|
||||
? colors.buttonPrimary
|
||||
: colors.secondary,
|
||||
},
|
||||
]}
|
||||
onPress={() => Navigation.navigate(NavigationString.PurchaseAuctionList)}
|
||||
>
|
||||
<AppText variant="button" color={colors.buttonText} style={styles.proceedText as any}>
|
||||
Proceed to Purchase
|
||||
</AppText>
|
||||
<View style={styles.countBadge}>
|
||||
<AppText variant="caption" color={colors.buttonPrimary} style={{ fontWeight: '800' } as any}>
|
||||
{SelectedPurchaseList.length}
|
||||
</AppText>
|
||||
</View>
|
||||
<ChevronRight size={20} color={colors.buttonText} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseList;
|
||||
|
||||
const CardHeader = ({ title, expanded }: {
|
||||
title: string;
|
||||
expanded: boolean;
|
||||
}) => {
|
||||
const rotation = useSharedValue(expanded ? 1 : 0);
|
||||
rotation.value = withTiming(expanded ? 1 : 0, { duration: 220 });
|
||||
const arrowStyle = useAnimatedStyle(() => ({
|
||||
transform: [{ rotate: `${rotation.value * 180}deg` }],
|
||||
}));
|
||||
/* ─── Sub-components ─── */
|
||||
|
||||
const PurchaseListItem = ({ item, index, expandedIndex, toggleExpand, colors, styles, Dispatch }: any) => {
|
||||
const expanded = expandedIndex === index;
|
||||
const isActive = item.status;
|
||||
const chevronStyle = useChevronStyle(expanded);
|
||||
|
||||
return (
|
||||
<View style={styles.cardHeader}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
<Animated.View style={arrowStyle}>
|
||||
<ChevronDown size={22} color={colors.black} />
|
||||
</Animated.View>
|
||||
</View>
|
||||
<Animated.View
|
||||
entering={FadeInDown.delay(index * 80).springify()}
|
||||
layout={Layout.springify()}
|
||||
style={[styles.card, expanded && styles.cardExpanded]}
|
||||
>
|
||||
{/* Left Accent Bar */}
|
||||
<View style={[styles.accentBar, { backgroundColor: isActive ? colors.success : colors.primary }]} />
|
||||
|
||||
<View style={styles.cardInner}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
onPress={() => toggleExpand(index)}
|
||||
>
|
||||
{/* Badge Row */}
|
||||
<View style={styles.badgeRow}>
|
||||
<View style={styles.auctionBadge}>
|
||||
<Gavel size={11} color={colors.primary} strokeWidth={2} />
|
||||
<AppText variant="caption" color={colors.primary} style={styles.badgeText as any}>
|
||||
{item.auctionNumber}
|
||||
</AppText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Title + Chevron */}
|
||||
<View style={styles.titleRow}>
|
||||
<AppText variant="h4" style={styles.title as any} numberOfLines={2}>
|
||||
{item.auctionOfWork ?? item.auctionNumber}
|
||||
</AppText>
|
||||
<Animated.View style={chevronStyle}>
|
||||
<ChevronDown size={20} color={colors.textSecondary} />
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Dept Tag */}
|
||||
<View style={styles.deptRow}>
|
||||
<Tag size={12} color={colors.textSecondary} />
|
||||
<AppText variant="caption" color={colors.textSecondary} style={styles.deptText as any}>
|
||||
{item.deptName || 'Department'}
|
||||
</AppText>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Expanded Section */}
|
||||
{expanded && (
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(220)}
|
||||
exiting={FadeOut.duration(160)}
|
||||
layout={Layout.springify()}
|
||||
style={styles.detailsContainer}
|
||||
>
|
||||
<View style={styles.divider} />
|
||||
|
||||
<DetailRow label="Auction Mode" value={item.auctionMode} colors={colors} />
|
||||
<DetailRow label="Pattern" value={item.auctionPattern} colors={colors} />
|
||||
<DetailRow label="Auction Fees" value={`₹ ${item.auctionFees}`} colors={colors} valueColor={colors.primary} />
|
||||
<DetailRow label="Department" value={item.deptName} colors={colors} />
|
||||
<DetailRow label="Purchase End" value={item.purchaseEnd} colors={colors} />
|
||||
|
||||
{/* Remove Button */}
|
||||
<TouchableOpacity
|
||||
style={styles.removeButton}
|
||||
activeOpacity={0.85}
|
||||
onPress={() => Dispatch(togglePurchaseAuction(item))}
|
||||
>
|
||||
<Trash2 size={16} color="#fff" />
|
||||
<AppText variant="button" color="#fff" style={styles.removeText as any}>
|
||||
Remove
|
||||
</AppText>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
)}
|
||||
</View>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
const renderRow = (label: string, value: string) => (
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.value}>{value}</Text>
|
||||
const DetailRow = ({
|
||||
label,
|
||||
value,
|
||||
colors,
|
||||
valueColor,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
colors: any;
|
||||
valueColor?: string;
|
||||
}) => (
|
||||
<View style={detailRowStyles.row}>
|
||||
<AppText variant="caption" color={colors.textSecondary} style={detailRowStyles.label as any}>
|
||||
{label}
|
||||
</AppText>
|
||||
<AppText variant="caption" color={valueColor || colors.text} style={detailRowStyles.value as any}>
|
||||
{value ?? '—'}
|
||||
</AppText>
|
||||
</View>
|
||||
);
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
container: {
|
||||
padding: 16,
|
||||
paddingBottom: 110,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 14,
|
||||
},
|
||||
heading: {
|
||||
fontSize: 22,
|
||||
fontWeight: '800',
|
||||
color: colors.black,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 18,
|
||||
padding: 16,
|
||||
marginBottom: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
cardHeader: {
|
||||
const detailRowStyles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#0F172A',
|
||||
flex: 1,
|
||||
marginRight: 12,
|
||||
},
|
||||
subTitle: {
|
||||
fontSize: 14,
|
||||
color: '#64748B',
|
||||
marginTop: 6,
|
||||
},
|
||||
details: {
|
||||
marginTop: 16,
|
||||
paddingTop: 14,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E5E7EB',
|
||||
},
|
||||
row: {
|
||||
marginVertical: 6,
|
||||
paddingVertical: 8,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: 'rgba(0,0,0,0.06)',
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
color: '#64748B',
|
||||
},
|
||||
flex: 1,
|
||||
fontWeight: '500',
|
||||
} as any,
|
||||
value: {
|
||||
fontSize: 15,
|
||||
flex: 1,
|
||||
textAlign: 'right',
|
||||
fontWeight: '600',
|
||||
color: '#0F172A',
|
||||
},
|
||||
removeButton: {
|
||||
marginTop: 18,
|
||||
backgroundColor: colors.primary,
|
||||
borderRadius: 14,
|
||||
paddingVertical: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
removeText: {
|
||||
color: '#fff',
|
||||
fontWeight: '700',
|
||||
},
|
||||
proceedButton: {
|
||||
position: 'absolute',
|
||||
bottom: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 18,
|
||||
alignItems: 'center',
|
||||
},
|
||||
proceedText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
},
|
||||
} as any,
|
||||
});
|
||||
|
||||
/* ─── Chevron animated style hook ─── */
|
||||
function useChevronStyle(expanded: boolean) {
|
||||
const rotation = useSharedValue(expanded ? 1 : 0);
|
||||
rotation.value = withTiming(expanded ? 1 : 0, { duration: 220 });
|
||||
return useAnimatedStyle(() => ({
|
||||
transform: [{ rotate: `${rotation.value * 180}deg` }],
|
||||
}));
|
||||
}
|
||||
|
||||
/* ─── Styles factory ─── */
|
||||
const makeStyles = (colors: any, spacing: any, shadows: any) =>
|
||||
StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
summaryStrip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.surface,
|
||||
marginHorizontal: spacing.m,
|
||||
marginTop: spacing.m,
|
||||
marginBottom: spacing.s,
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingVertical: spacing.s + 2,
|
||||
borderRadius: 14,
|
||||
gap: spacing.s,
|
||||
...shadows.light,
|
||||
},
|
||||
summaryIcon: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 8,
|
||||
backgroundColor: `${colors.primary}15`,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
container: {
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingTop: spacing.s,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 20,
|
||||
marginBottom: spacing.m,
|
||||
flexDirection: 'row',
|
||||
overflow: 'hidden',
|
||||
...shadows.medium,
|
||||
},
|
||||
cardExpanded: {
|
||||
...shadows.strong,
|
||||
},
|
||||
accentBar: {
|
||||
width: 5,
|
||||
borderTopLeftRadius: 20,
|
||||
borderBottomLeftRadius: 20,
|
||||
},
|
||||
cardInner: {
|
||||
flex: 1,
|
||||
paddingHorizontal: spacing.m,
|
||||
paddingVertical: spacing.m,
|
||||
},
|
||||
badgeRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
auctionBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: `${colors.primary}15`,
|
||||
paddingHorizontal: spacing.s,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 8,
|
||||
gap: 4,
|
||||
},
|
||||
badgeText: {
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.2,
|
||||
} as any,
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
gap: spacing.s,
|
||||
},
|
||||
title: {
|
||||
flex: 1,
|
||||
fontWeight: '700',
|
||||
} as any,
|
||||
deptRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
marginTop: spacing.xs + 2,
|
||||
},
|
||||
deptText: {
|
||||
letterSpacing: 0.3,
|
||||
} as any,
|
||||
detailsContainer: {
|
||||
marginTop: spacing.s,
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: colors.border,
|
||||
marginBottom: spacing.s,
|
||||
},
|
||||
removeButton: {
|
||||
marginTop: spacing.m,
|
||||
backgroundColor: colors.error,
|
||||
borderRadius: 14,
|
||||
paddingVertical: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: spacing.s,
|
||||
},
|
||||
removeText: {
|
||||
letterSpacing: 1,
|
||||
} as any,
|
||||
footerContainer: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: spacing.m,
|
||||
right: spacing.m,
|
||||
},
|
||||
proceedButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 16,
|
||||
borderRadius: 20,
|
||||
gap: spacing.s,
|
||||
...shadows.strong,
|
||||
},
|
||||
proceedText: {
|
||||
letterSpacing: 1.5,
|
||||
} as any,
|
||||
countBadge: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
minWidth: 24,
|
||||
height: 24,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user