diff --git a/src/Navigation/Bottom.tsx b/src/Navigation/Bottom.tsx index 95b8fad..d0f5a30 100644 --- a/src/Navigation/Bottom.tsx +++ b/src/Navigation/Bottom.tsx @@ -25,7 +25,7 @@ const TabButton = ({ route, isFocused, onPress }: any) => { Home: { outline: "Home", filled: "Home" }, Auction: { outline: "Gavel", filled: "Gavel" }, Tender: { outline: "FileText", filled: "FileText" }, - EditableExcel: { outline: "FileText", filled: "FileText" }, + // EditableExcel: { outline: "FileText", filled: "FileText" }, }; const IconName = LucideIcons[isFocused ? icons[route.name].filled : icons[route.name].outline]; const scaleAnim = useRef(new Animated.Value(1)).current; @@ -148,7 +148,7 @@ export default function BottomTab() { - + ); diff --git a/src/Screens/Auction/Auction.tsx b/src/Screens/Auction/Auction.tsx index 1fac4c8..7891596 100644 --- a/src/Screens/Auction/Auction.tsx +++ b/src/Screens/Auction/Auction.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useRef, useMemo } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native'; import { InsideHeader } from '../../Component/Index'; import { useFetchLiveAuction, useFetchPurchaseAuction } from '../../Services/BBPS/Hooks'; @@ -10,23 +10,35 @@ import { useNavigation } from '@react-navigation/native'; import NavigationString from '../../Constant/NavigationString'; import FontsFamily from '../../Constant/FontsFamily'; import { useSelector } from 'react-redux'; -const TAB_WIDTH = 140; + +const { width: SCREEN_WIDTH } = Dimensions.get('window'); +const HORIZONTAL_PADDING = 32; +const SWITCH_INSETS = 2; const TAB_HEIGHT = 44; const Auction = () => { - const Navigation = useNavigation() as any + const Navigation = useNavigation() as any; const { data: liveAuctionData = {} }: any = useFetchLiveAuction(); const { data: purchaseAuctionData = {} } = useFetchPurchaseAuction(); const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction); - const liveCount = Array.isArray(liveAuctionData?.result) ? liveAuctionData?.pages[0]?.totalCount : 0; + const liveCount = Array.isArray(liveAuctionData?.result) + ? liveAuctionData?.pages?.[0]?.totalCount + : 0; - const purchaseCount = Array.isArray(purchaseAuctionData?.data) ? purchaseAuctionData.data.length : 0; + const purchaseCount = Array.isArray(purchaseAuctionData?.data) + ? 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; + }, []); + const onTabPress = (tab: 'live' | 'purchase', index: number) => { setSelectedTab(tab); Animated.spring(translateX, { @@ -40,21 +52,28 @@ const Auction = () => { - {/* Tabs */} - - + + onTabPress('live', 0)} > @@ -69,7 +88,7 @@ const Auction = () => { onTabPress('purchase', 1)} > @@ -83,17 +102,42 @@ const Auction = () => { - {/* Cart */} + - {SelectedPurchaseList.length && - {SelectedPurchaseList.length} - } - { Navigation.navigate(NavigationString.PurchaseList) }}> + {SelectedPurchaseList.length ? ( + + + {SelectedPurchaseList.length} + + + ) : null} + { + Navigation.navigate(NavigationString.PurchaseList); + }} + > - {/* Content */} + {selectedTab === 'live' ? : } ); @@ -106,9 +150,12 @@ const styles = StyleSheet.create({ flex: 1, backgroundColor: colors.white, }, - - /* ---------- Switch UI ---------- */ - + topRow: { + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + paddingHorizontal: 16, + }, switchWrapper: { flexDirection: 'row', marginVertical: 14, @@ -117,31 +164,25 @@ const styles = StyleSheet.create({ padding: 2, height: TAB_HEIGHT, }, - tab: { - width: TAB_WIDTH, height: TAB_HEIGHT - 4, alignItems: 'center', justifyContent: 'center', zIndex: 2, }, - tabText: { - fontSize: 14, + fontSize: 13, color: '#64748b', lineHeight: 18, - fontFamily: FontsFamily.poppinsSemiBold + fontFamily: FontsFamily.poppinsSemiBold, }, - activeText: { color: colors.primary, }, - activeTab: { position: 'absolute', top: 2, left: 2, - width: TAB_WIDTH, height: TAB_HEIGHT - 4, backgroundColor: '#fff', borderRadius: 16, diff --git a/src/Screens/Tender/LiveTenderTile.tsx b/src/Screens/Tender/LiveTenderTile.tsx index b106d50..3c3a502 100644 --- a/src/Screens/Tender/LiveTenderTile.tsx +++ b/src/Screens/Tender/LiveTenderTile.tsx @@ -7,6 +7,7 @@ import { Calendar, Tag, Info, ArrowRight } from 'lucide-react-native'; import TenderDetail from './Modal/TenderFullDetail'; import TenderFullDetail from './Modal/TenderFullDetail'; import { useNavigation } from '@react-navigation/native'; +import { format } from '../../Helper/DateFormat'; const LiveTenderTile: React.FC = ({ contractorId, @@ -66,7 +67,9 @@ const purchased = contractorIds.includes(String(contractorId)); Start - {tenderDispatchDate ?? '-'} + {/* {tenderDispatchDate ?? '-'} */} + {format.date6(`${tenderDispatchDate}`)} + diff --git a/src/Screens/Tender/Tender.tsx b/src/Screens/Tender/Tender.tsx index 1d14259..e2741a4 100644 --- a/src/Screens/Tender/Tender.tsx +++ b/src/Screens/Tender/Tender.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useRef, useMemo } from 'react'; import { View, Text, @@ -20,25 +20,31 @@ import FontsFamily from '../../Constant/FontsFamily'; import { useSelector } from 'react-redux'; import LiveTender from './LiveTender'; import PurchaseTenderAllList from './PurchaseTenderAllList'; -const { width } = Dimensions.get('screen') -const TAB_WIDTH = 140; + +const { width: SCREEN_WIDTH } = Dimensions.get('window'); const TAB_HEIGHT = 44; +const HORIZONTAL_PADDING = 32; +const SWITCH_INSETS = 2; const Tender = () => { - const Navigation = useNavigation() as any + const Navigation = useNavigation() as any; const { data: liveTenderData }: any = useFetchLiveTender(); - const { data: purchaseTenderData} : any = useFetchPurchaseTender(); - const SelectedPurchaseList = useSelector((state: any) => state?.selectPurchaseTender); + const { data: purchaseTenderData }: any = useFetchPurchaseTender(); + const SelectedPurchaseList = useSelector( + (state: any) => state?.selectPurchaseTender, + ); - console.log("live tender : ", liveTenderData) - console.log("purchase tender : ", purchaseTenderData) const liveCount = liveTenderData?.totalCount || 0; - const purchaseCount = purchaseTenderData?.pages?.[0]?.totalCount || 0; - const [selectedTab, setSelectedTab] = useState<'live' | 'purchase'>('live'); + 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; + }, []); + const onTabPress = (tab: 'live' | 'purchase', index: number) => { setSelectedTab(tab); Animated.spring(translateX, { @@ -52,21 +58,28 @@ const Tender = () => { - {/* Switch Tabs */} - - + + onTabPress('live', 0)} > @@ -81,7 +94,7 @@ const Tender = () => { onTabPress('purchase', 1)} > @@ -95,16 +108,42 @@ const Tender = () => { - {/* Cart */} + - {SelectedPurchaseList.length && - {SelectedPurchaseList.length} - } - { Navigation.navigate(NavigationString.PurchaseTenderList) }}> + {SelectedPurchaseList.length ? ( + + + {SelectedPurchaseList.length} + + + ) : null} + { + Navigation.navigate(NavigationString.PurchaseTenderList); + }} + > + {selectedTab === 'live' ? : } ); @@ -117,9 +156,12 @@ const styles = StyleSheet.create({ flex: 1, backgroundColor: colors.white, }, - - /* ---------- Switch UI ---------- */ - + topRow: { + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + paddingHorizontal: 16, + }, switchWrapper: { flexDirection: 'row', marginVertical: 14, @@ -128,31 +170,25 @@ const styles = StyleSheet.create({ padding: 2, height: TAB_HEIGHT, }, - tab: { - width: TAB_WIDTH, height: TAB_HEIGHT - 4, alignItems: 'center', justifyContent: 'center', zIndex: 2, }, - tabText: { fontSize: 14, color: '#64748b', lineHeight: 18, - fontFamily: FontsFamily.poppinsSemiBold + fontFamily: FontsFamily.poppinsSemiBold, }, - activeText: { color: colors.primary, }, - activeTab: { position: 'absolute', top: 2, left: 2, - width: TAB_WIDTH, height: TAB_HEIGHT - 4, backgroundColor: '#fff', borderRadius: 16,