import React from 'react'; import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native'; import {heightPercentageToDP as hp} from 'react-native-responsive-screen'; import {FONT} from '../../Utils/Globles'; const Services = () => { const renderItem = ({item}) => ( <View style={styles.rowContainer}> <Text style={[styles.cell, {flex: 1}]}>{item.id}</Text> <TouchableOpacity style={styles.cellTouch}> <Text style={[styles.cell, {borderRightWidth: hp('0%')}]}> {item.predictedMonth} </Text> </TouchableOpacity> <Text style={styles.cell}>{item.taskName}</Text> <Text style={styles.cell}>{item.startDate}</Text> <Text style={styles.cell}>{item.endDate}</Text> <Text style={styles.cell}>{item.created}</Text> <Text style={[styles.cell, {flex: 3, color: '#A47636'}]}> {item.status} </Text> </View> ); return ( <View style={styles.container}> {/* Title Row */} <View style={styles.titleRow}> <Text style={[styles.headerCell, {flex: 1}]}>ID</Text> <Text style={styles.headerCell}>Predicted Month</Text> <Text style={styles.headerCell}>Task Name</Text> <Text style={styles.headerCell}>Start Date</Text> <Text style={styles.headerCell}>End Date</Text> <Text style={styles.headerCell}>Created</Text> <Text style={[styles.headerCell, {flex: 3}]}>Status</Text> </View> {/* Data Rows */} <View style={styles.flatListContainer}> <FlatList data={tableData} keyExtractor={item => item.id.toString()} renderItem={renderItem} showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}} /> </View> </View> ); }; const tableData = [ { id: 1, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 2, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 3, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 4, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 5, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 6, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 7, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, { id: 8, predictedMonth: 'February, 2024', taskName: 'Fuel Price Approval', startDate: '27-Dec-2023', endDate: '27-Jan-2024', created: '17-Jan-2024', status: 'Pending with Stakeholders for Review', }, ]; const styles = StyleSheet.create({ container: { marginTop: hp('1%'), borderWidth: hp('0.05%'), marginHorizontal: hp('1%'), height: hp('30.5'), }, flatListContainer: { flex: 1, }, titleRow: { flexDirection: 'row', backgroundColor: '#E0E0E0', }, rowContainer: { flexDirection: 'row', borderBottomWidth: hp('0.05%'), borderColor: 'black', }, headerCell: { flex: 2, textAlign: 'center', color: 'black', borderRightWidth: hp('0.05%'), borderColor: 'black', fontSize: hp('1.2%'), fontFamily: FONT.SEMI_BOLD, borderBottomWidth: hp('0.05%'), padding: hp('0.5%'), }, cellTouch: { flex: 2, textAlign: 'center', color: 'black', borderRightWidth: hp('0.05%'), borderColor: 'black', fontSize: hp('1.2%'), padding: hp('0.5%'), }, cell: { flex: 2, textAlign: 'center', color: 'black', borderRightWidth: hp('0.05%'), borderColor: 'black', fontSize: hp('1.2%'), padding: hp('0.5%'), }, }); export default Services; |
0 Comments