updated code with dsc and device binding

src/Screens/Auction/Modal/AuctionItemDetail.tsx

@@ -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);