second commit

2026-01-07 10:19:34 +05:30
parent 59fb7e0df4
commit 743d571519
29 changed files with 16782 additions and 619 deletions
@@ -1,17 +1,7 @@
 import React, { useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Animated,
-  Dimensions,
-} from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native';
 import { InsideHeader } from '../../Component/Index';
-import {
-  useFetchLiveAuction,
-  useFetchPurchaseAuction,
-} from '../../Services/BBPS/Hooks';
+import { useFetchLiveAuction, useFetchPurchaseAuction } from '../../Services/BBPS/Hooks';
 import colors from '../../Constant/Color';
 import LiveAuction from './LiveAuction';
 import PurchaseAuction from './PurchaseAuction';
@@ -20,7 +10,6 @@ import { useNavigation } from '@react-navigation/native';
 import NavigationString from '../../Constant/NavigationString';
 import FontsFamily from '../../Constant/FontsFamily';
 import { useSelector } from 'react-redux';
-const { width } = Dimensions.get('screen')
 const TAB_WIDTH = 140;
 const TAB_HEIGHT = 44;

@@ -30,7 +19,6 @@ const Auction = () => {
  const { data: purchaseAuctionData = {} } = useFetchPurchaseAuction();
  const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);

-
  const liveCount = Array.isArray(liveAuctionData?.result)
    ? liveAuctionData?.pages[0]?.totalCount
    : 0;
@@ -101,7 +89,7 @@ const Auction = () => {
        </View>
        {/* Cart */}
        <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 }}>
+          {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>}
          <TouchableOpacity style={{ padding: 10, backgroundColor: colors.primaryLight, borderRadius: 20 }} onPress={() => { Navigation.navigate(NavigationString.PurchaseList) }}>
@@ -9,6 +9,9 @@ import { Skelton } from '../../Component/Index';
 import colors from '../../Constant/Color';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectPurchaseAuctionSlice, togglePurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
+import { apiCall } from '../../Axios/Axios';
+import { GET_MY_AUCTION, LIVE_AUCTION } from '../../Services/BBPS/ApiUrls';
+import moment from 'moment';

 const LiveAuction = () => {
    const navigation: any = useNavigation();
@@ -16,6 +19,7 @@ const LiveAuction = () => {
    const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isRefetching, refetch }: any = useFetchLiveAuction();
    const [showRefreshBanner, setShowRefreshBanner] = useState(false);
+    const [allBoolean, setAllBoolean] = useState({ liveAuctionData: [] })

    useEffect(() => {
        if (isRefetching) {
@@ -64,6 +68,39 @@ const LiveAuction = () => {
        [SelectedPurchaseList]
    );

+    const getMyAuction = async () => {
+        try {
+
+            const res = await apiCall<any>('get', `${GET_MY_AUCTION}`,);
+
+            if (res?.statusCode === 200) {
+                const purchasedIds = new Set(
+                    res.data.map((item: any) => item.auctionId),
+                );
+
+                const filteredLive = data?.result.map((item: any) => ({
+                    ...item,
+                    active: !purchasedIds.has(item.auctionId), // false if match, true otherwise
+                }));
+
+                setAllBoolean(prev => ({
+                    ...prev,
+                    liveAuctionData: filteredLive
+                }));
+            }
+        } catch (error) {
+            console.error('getMyAuction error', error);
+        } finally {
+            setAllBoolean(prev => ({ ...prev, isLoading: false }));
+        }
+    };
+
+    useEffect(() => {
+        if (data?.result?.length > 0) {
+            getMyAuction()
+        }
+    }, [data])
+
    if (isLoading) {
        return <Skelton />;
    }
@@ -110,8 +147,8 @@ const LiveAuction = () => {
            )}

            <FlatList
-                data={data?.result ?? []}
-                keyExtractor={(item) => String(item.auctionId)}
+                data={allBoolean.liveAuctionData ?? []}
+                keyExtractor={(item: any) => String(item.auctionNumber)}
                renderItem={renderItem}
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{ paddingBottom: 50, paddingTop: 10 }}
@@ -22,89 +22,93 @@ const LiveAuctionTile: React.FC<LiveAuctionTileProps> = ({
  return (
    <View style={styles.cardWrapper}>
      {/* Status Tag */}
-      <View
-        style={[
-          styles.statusTag,
-          { backgroundColor: isPurchased ? colors.error : purchaseEnded ? '#94a3b8' : '#4ade80' },
-        ]}
-      />

-      <TouchableOpacity
-        style={styles.container}
-        activeOpacity={0.9}
-        onPress={() => setShowDetail(true)}
-      >
-        {/* Header */}
-        <View style={styles.header}>
-          <View style={styles.badge}>
-            <Tag size={14} color={colors.primary} />
-            <Text style={styles.badgeText}>#{auctionNumber}</Text>
-          </View>
-          <Text style={styles.priceText}>₹{auctionFees}</Text>
-        </View>
-
-        {/* Work Title */}
-        <Text style={styles.workTitle} numberOfLines={2}>
-          {auctionOfWork ?? 'General Auction Work'}
-        </Text>
-
-        {/* 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
-                : isPurchased
-                  ? styles.btnPurchased
-                  : styles.btnActive,
-            ]}
-            onPress={onPurchasePress}
-            disabled={purchaseEnded}
-          >
-            <Text
+      {
+        !showDetail ?
+          <>
+            <View
              style={[
-                styles.mainButtonText,
-                isPurchased && !purchaseEnded ? { color: colors.white } : { color: '#fff' },
+                styles.statusTag,
+                { backgroundColor: isPurchased ? colors.error : purchaseEnded ? '#94a3b8' : '#4ade80' },
              ]}
+            />
+            <View
+              style={styles.container}
            >
-              {purchaseEnded ? 'Expired' : isPurchased ? 'Remove' : 'Add to Cart'}
-            </Text>
-            {!purchaseEnded && (
-              <ArrowRight size={16} color={isPurchased ? colors.white : '#fff'} />
-            )}
-          </TouchableOpacity>
-        </View>
+              {/* 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>
+
+              {/* Work Title */}
+              <Text style={styles.workTitle} numberOfLines={2}>
+                {auctionOfWork ?? 'General Auction Work'}
+              </Text>
+
+              {/* 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
+                      : !data.active ? { backgroundColor: 'lightgray' } : isPurchased
+                        ? styles.btnPurchased
+                        : styles.btnActive,
+                  ]}
+                  onPress={onPurchasePress}
+                  disabled={purchaseEnded ? true : data.active ? false : true}
+                >
+                  <Text
+                    style={[
+                      styles.mainButtonText,
+                      isPurchased && !purchaseEnded ? { color: colors.white } : { color: '#fff' },
+                    ]}
+                  >
+                    {purchaseEnded ? 'Expired' : !data.active ? 'Purchased' : isPurchased ? 'Remove' : 'Add to Cart'}
+                  </Text>
+                  {!purchaseEnded && (
+                    <ArrowRight size={16} color={isPurchased ? colors.white : '#fff'} />
+                  )}
+                </TouchableOpacity>
+              </View>
+
+              {/* Auction Detail Modal */}
+            </View>
+          </>
+          : <AuctionDetail visible={showDetail} data={data} onClose={() => setShowDetail(false)} />
+      }

-        {/* Auction Detail Modal */}
-        <AuctionDetail visible={showDetail} data={data} onClose={() => setShowDetail(false)} />
-      </TouchableOpacity>
    </View>
  );
 };
@@ -1,30 +1,8 @@
 import React, { memo, useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-  SafeAreaView,
-  Platform,
-  StatusBar,
-} from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, SafeAreaView, Platform, StatusBar } from 'react-native';
 import Modal from 'react-native-modal';
 import moment from 'moment';
-import {
-  X,
-  Hash,
-  Briefcase,
-  Calendar,
-  CreditCard,
-  FileText,
-  Download,
-  Eye,
-  Layers,
-  ArrowLeft,
-  Info,
-  Clock
-} from 'lucide-react-native';
+import { Briefcase, Calendar, FileText, Download, Eye, Layers, ArrowLeft, Clock } from 'lucide-react-native';
 import colors from '../../../Constant/Color';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AuctionItemDetail from './AuctionItemDetail';
@@ -69,13 +47,15 @@ const AuctionFullDetail: React.FC<Props> = ({ visible, onClose, data }) => {
    <Modal
      isVisible={visible}
      style={styles.fullModal}
-      animationIn="slideInRight"
-      animationOut="slideOutRight"
-      useNativeDriver
-      hideModalContentWhileAnimating
+      animationIn="fadeIn"
+      animationOut="fadeOut"
+      animationInTiming={360}
+      animationOutTiming={280}
      statusBarTranslucent
+      backdropColor="transparent"
+      backdropOpacity={0}
    >
-      <SafeAreaView style={styles.safeArea}>
+      <View style={styles.safeArea}>
        <StatusBar barStyle="dark-content" />

        {/* Full Header */}
@@ -191,23 +171,25 @@ const AuctionFullDetail: React.FC<Props> = ({ visible, onClose, data }) => {
            </Text>
          </TouchableOpacity>
        </View>
-        <AuctionItemDetail data={{
-          productName: "sick sari",
-          timeDuration: "112 YEAR",
-          category: "laundry",
-          subCategory: "sari",
-          reservePriceFig: "120000",
-          reservePriceWords: "One Lakh Twenty Thousand",
-          auctionStartFig: "120000",
-          auctionStartWords: "One Lakh Twenty Thousand",
-          bidVariationFig: "200",
-          bidVariationWords: "Two Hundred",
-          emdFig: "2000",
-          emdWords: "Two Thousand",
-          description: "Auction of cars",
-          documentName: "BBPS screens.pdf"
-        }} onClose={() => { setAllBoolean((prev: any) => ({ ...prev, showItemDetail: false })) }} visible={allBoolean.showItemDetail} />
-      </SafeAreaView>
+
+        <AuctionItemDetail
+          data={{
+            productName: "sick sari",
+            timeDuration: "112 YEAR",
+            category: "laundry",
+            subCategory: "sari",
+            reservePriceFig: "120000",
+            reservePriceWords: "One Lakh Twenty Thousand",
+            auctionStartFig: "120000",
+            auctionStartWords: "One Lakh Twenty Thousand",
+            bidVariationFig: "200",
+            bidVariationWords: "Two Hundred",
+            emdFig: "2000",
+            emdWords: "Two Thousand",
+            description: "Auction of cars",
+            documentName: "BBPS screens.pdf"
+          }} onClose={() => { setAllBoolean((prev: any) => ({ ...prev, showItemDetail: false })) }} visible={allBoolean.showItemDetail} />
+      </View>
    </Modal>
  );
 };
@@ -79,13 +79,16 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data = ITEM_DUMM
        <Modal
            isVisible={visible}
            style={styles.fullModal}
-            animationIn="slideInUp"
-            animationOut="slideOutDown"
-            backdropOpacity={1}
-            useNativeDriver
+            animationIn="fadeIn"
+            animationOut="fadeOut"
+            animationInTiming={360}
+            animationOutTiming={280}
            statusBarTranslucent
+            backdropColor="transparent"
+            backdropOpacity={0}
+            useNativeDriver
        >
-            <SafeAreaView style={styles.safeArea}>
+            <View style={styles.safeArea}>

                {/* Navbar */}
                <View style={[styles.header, { paddingTop: inset.top }]}>
@@ -171,7 +174,7 @@ const AuctionItemDetail: React.FC<Props> = ({ visible, onClose, data = ITEM_DUMM
                    </Section>

                </ScrollView>
-            </SafeAreaView>
+            </View>
        </Modal>
    );
 };
@@ -11,6 +11,7 @@ import { SearchInput } from '../../Component/Serach/SeacrhInput';
 import { Skelton } from '../../Component/Index';
 import { allBooleanProps } from './types/types';
 import FilterModal from './Modal/FilterModal';
+import NavigationString from '../../Constant/NavigationString';


 const PurchaseAuction = () => {
@@ -38,7 +39,6 @@ const PurchaseAuction = () => {

        return now.isAfter(end);
    }
-    console.log(allBoolean);

    return (
        <View style={{ flex: 1 }}>
@@ -52,11 +52,10 @@ const PurchaseAuction = () => {
                    <PurchaseAuctionTile
                        item={item}
                        onPressDetails={() => {
-                            navigation.navigate('AuctionDetail', { item, onAddToPurchase: () => { }, routeFrom: 'PurchasedAuction' });
                        }}
                        onStartBidding={() => {
                            Dispatch(setAuction(item))
-                            // navigation.navigate(NavigationString, { data: item })
+                            navigation.navigate(NavigationString.Emd)
                        }}
                        buttonEnable={isAuctionActive(item)}
                        isAuctionEnd={isAuctionEnd(item)}
@@ -3,8 +3,12 @@ import { View, Text, FlatList, StyleSheet, TouchableOpacity, Alert } from 'react
 import { InsideHeader, Loader } from '../../Component/Index';
 import colors from '../../Constant/Color';
 import { CreditCard, Calendar, User, DollarSign, ArrowRight } from 'lucide-react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useOfflineAuctionPurchase } from '../../Services/BBPS/Hooks';
+import { showSuccessAlert } from '../../Constant/ShowDailog';
+import { clearPurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import NavigationString from '../../Constant/NavigationString';

 const dummyAuctionList = [
    {
@@ -46,11 +50,11 @@ const dummyAuctionList = [
 ];

 const PurchaseAuctionList = () => {
+    const Navigation = useNavigation()
+    const Dispatch = useDispatch()
    const [loading, setLoading] = useState(false);
    const [list, setList] = useState(dummyAuctionList);
    const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
-    console.log(SelectedPurchaseList,'iiiiiiiiiiiiiiiiiiiiiiii');
-    
    const { mutate, isPending } = useOfflineAuctionPurchase()
    const calculateTotalAmount = (item: any) => {
        const gstAmount =
@@ -80,10 +84,18 @@ const PurchaseAuctionList = () => {
        };

        try {
-            // console.log(body);
            mutate(body, {
                onSuccess: (res) => {
-                    console.log(res, '---------------------purchsase response');
+                    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");
@@ -167,16 +179,16 @@ const PurchaseAuctionList = () => {
                    style={[styles.button, { marginLeft: 8 }]}
                    onPress={() => handlePurchase('offline')}
                >
-                    <Text style={styles.buttonText}>Purchase Offline</Text>
-                    <ArrowRight size={18} color="#fff" style={{ marginLeft: 6 }} />
+                    {
+                        isPending ? <Loader size='small' color={colors.white} /> : <>
+                            <Text style={styles.buttonText}>Purchase Offline</Text>
+                            <ArrowRight size={18} color="#fff" style={{ marginLeft: 6 }} />
+                        </>
+                    }
+
                </TouchableOpacity>
            </View>

-            {loading && (
-                <View style={styles.loadingOverlay}>
-                    <Loader />
-                </View>
-            )}
        </View>
    );
 };
@@ -1,28 +1,13 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Platform,
-} from 'react-native';
-import Animated, {
-  FadeInUp,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { View, Text, StyleSheet, TouchableOpacity, Platform } 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';

-const PurchaseAuctionTile = ({
-  item,
-  onPressDetails,
-  onStartBidding,
-  buttonEnable,
-  isAuctionEnd,
-}: any) => {
+const PurchaseAuctionTile = ({ item, onPressDetails, onStartBidding, buttonEnable, isAuctionEnd }: any) => {
+  const [showDetail, setShowDetail] = React.useState(false);
  const scale = useSharedValue(1);
  const elevation = useSharedValue(8);

@@ -43,232 +28,237 @@ const PurchaseAuctionTile = ({
    elevation.value = withTiming(8, { duration: 160 });
  };

-  const statusColor = isAuctionEnd
-    ? '#EF4444'
-    : buttonEnable
-    ? colors.primary
-    : '#94A3B8';
+  const statusColor = isAuctionEnd ? '#EF4444' : buttonEnable ? colors.primary : '#94A3B8';

-  const lightStatusBg = isAuctionEnd
-    ? '#FEF2F2'
-    : buttonEnable
-    ? '#EFF6FF'
-    : '#F8FAFC';
+  const lightStatusBg = isAuctionEnd ? '#FEF2F2' : buttonEnable ? '#EFF6FF' : '#F8FAFC';
+  console.log(item?.keyDates?.auctionBidding?.endDateTime, 'kk');

  return (
-    <Animated.View
-      entering={FadeInUp.duration(400)}
-      style={[styles.shadowContainer, animatedStyle]}
-    >
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onPressDetails}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        style={styles.cardInternal}
+    <View style={{ flex: 1 }}>
+      {!showDetail ? <Animated.View
+        entering={FadeInUp.duration(400)}
+        style={[styles.shadowContainer, animatedStyle]}
      >
-        <View style={[styles.statusAccent, { backgroundColor: statusColor }]} />
+        <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'}
+          <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>
-              <Text style={styles.title}>{item.auctionNumber}</Text>
            </View>

-            <View style={styles.amountContainer}>
-              <Text style={styles.amount}>
-                ₹{item.auctionFees?.toLocaleString()}
+            {/* Date */}
+            <View style={styles.dateRow}>
+              <Text style={styles.dateText}>
+                <Text style={styles.dateLabel}>Bidding Start: </Text>
+                {moment(
+                  item?.keyDates?.auctionBidding?.startDateTime?.replace(' kk', ''),
+                  'DD-MM-YYYY HH:mm:ss'
+                ).format('DD MMM YYYY, hh:mm A')}
              </Text>
-              <Text style={styles.feeLabel}>Auction Fee</Text>
-            </View>
-          </View>
-
-          {/* Date */}
-          <View style={styles.dateRow}>
-            <Text style={styles.dateText}>
-              <Text style={styles.dateLabel}>Bidding Ends: </Text>
-              {moment(item?.keyDates?.auctionBidding?.endDateTime).format(
-                'DD MMM, 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.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
-                  ? 'Payment Required'
-                  : 'Proceed to Start Bidding'}
+              <Text style={styles.dateText}>
+                <Text style={styles.dateLabel}>Bidding Ends: </Text>
+                {moment(
+                  item?.keyDates?.auctionBidding?.endDateTime?.replace(' kk', ''),
+                  'DD-MM-YYYY HH:mm:ss'
+                ).format('DD MMM YYYY, hh:mm A')}
              </Text>
-            </TouchableOpacity>
+            </View>
+
+            {/* Footer */}
+            <View style={styles.footer}>
+              <View style={styles.footerTop}>
+                <Text style={styles.footerLabel}>Remaining Time</Text>
+                {buttonEnable && !isAuctionEnd ? (
+                  <CountdownTimer
+                    endDate={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>
+            </View>
          </View>
-        </View>
-      </TouchableOpacity>
-    </Animated.View>
+        </TouchableOpacity>
+      </Animated.View> :
+        <AuctionDetail visible={showDetail} data={item} onClose={() => setShowDetail(false)} />
+      }
+    </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,
-    },
+  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,
+  },
 });