water-sys/app/screens/BalanceScreen.tsx

// 余额管理
import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Modal, SafeAreaView, StatusBar, Platform } from 'react-native';
import fontSize from '../utils/fontsizeUtils';
import widthUtils from '../utils/widthUtils';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../App';
import RechargeScreen from './RechargeScreen';
import BackIcon from '../components/BackIcon';

type BalanceScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  'Balance'
>;

export const BalanceScreen = () => {
  const navigation = useNavigation<BalanceScreenNavigationProp>();
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOpenModal = () => {
    setIsModalVisible(true);
  };

  const handleCloseModal = () => {
    setIsModalVisible(false);
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <View style={styles.safeAreaContent}>
        <View style={styles.header}>
          <TouchableOpacity
            style={styles.backButton}
            onPress={() => navigation.goBack()}
          >
            <BackIcon size={fontSize(22)} />
          </TouchableOpacity>
          <Text style={styles.headerTitle}>Mon Solde</Text>
          <View style={styles.placeholder} />
        </View>
        
        <ScrollView style={styles.container}>
          <View style={styles.balanceCard}>
            <View style={styles.sunriseGradientContainer}>
              <View style={styles.timeContainer}>
                <View style={styles.timeContainer2}>
                </View>
              </View>
              <View style={styles.balanceWidget}>
                <Text style={styles.balanceText}>Mon Solde</Text>
                <Image
                  source={require('../../assets/img/image_11d1b9c.png')}
                  style={styles.balanceImage}
                />
              </View>
            </View>
            <View style={styles.balanceDetailsContainer}>
              <View style={styles.totalBalanceCard}>
                <View style={styles.cardContainer}>
                  <View style={styles.financialInfoContainer}>
                    <Text style={styles.largeBlackText}>650,000</Text>
                    <View style={styles.svgContainer}>
                      {/* SVG or icon replacement */}
                    </View>
                  </View>
                  <View style={styles.totalSoldInfoContainer}>
                    <Text style={styles.totalSoldeText}>Solde Total (FCFA)</Text>
                    <View style={styles.totalBalanceInfoContainer}>
                      <View style={styles.verticalCenteredTextBox}>
                        <Text style={styles.highlightedText}>50,000</Text>
                        <Text style={styles.expirationInfo}>Bientôt expiré (FCFA)</Text>
                      </View>
                      <View style={styles.deadlineInfoContainer}>
                        <Text style={styles.deadlineText}>2025-05-09</Text>
                        <Text style={styles.expirationInfo}>Date limite</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View style={[styles.buttonContainer, { backgroundColor: '#FF8000', alignSelf: 'center' }]}>
                  <TouchableOpacity style={styles.button} onPress={handleOpenModal}>
                    <Text style={styles.buttonText}>Rechargez maintenant</Text>
                  </TouchableOpacity>
                </View>
              </View>
            
              <View style={styles.transactionDetailsContainer}>
                <View style={styles.balanceDetailContainer}>
                  <Text style={styles.balanceDetailTitle}>Détail du solde</Text>
                  <View style={styles.transactionDetailsContainer1}>
                    <View style={styles.transactionHistoryList}>
                      {/* Repeated Transaction Details */}
                      <View style={styles.transactionDetailsPanel}>
                        <View style={styles.transactionDetailsRow}>
                          <Text style={styles.transactionDescriptionBold}>
                            Frais de transport
                          </Text>
                          <Text style={styles.transactionAmountDisplay}>-58 FCFA</Text>
                        </View>
                        <View style={styles.transactionInfoRow}>
                          <Text style={styles.transactionDate}>2025-02-12</Text>
                          <Text style={styles.shipmentReference}>BR-11-00010</Text>
                        </View>
                      </View>
                      {/* Additional transaction panels can be added here */}
                    </View>

                    <View style={styles.transactionHistoryList}>
                      {/* Repeated Transaction Details */}
                      <View style={styles.transactionDetailsPanel}>
                        <View style={styles.transactionDetailsRow}>
                          <Text style={styles.transactionDescriptionBold}>
                            Frais de transport
                          </Text>
                          <Text style={styles.transactionAmountDisplay}>-58 FCFA</Text>
                        </View>
                        <View style={styles.transactionInfoRow}>
                          <Text style={styles.transactionDate}>2025-02-12</Text>
                          <Text style={styles.shipmentReference}>BR-11-00010</Text>
                        </View>
                      </View>
                      {/* Additional transaction panels can be added here */}
                    </View>
                    <View style={styles.transactionHistoryList}>
                      {/* Repeated Transaction Details */}
                      <View style={styles.transactionDetailsPanel}>
                        <View style={styles.transactionDetailsRow}>
                          <Text style={styles.transactionDescriptionBold}>
                            Frais de transport
                          </Text>
                          <Text style={styles.transactionAmountDisplay}>-58 FCFA</Text>
                        </View>
                        <View style={styles.transactionInfoRow}>
                          <Text style={styles.transactionDate}>2025-02-12</Text>
                          <Text style={styles.shipmentReference}>BR-11-00010</Text>
                        </View>
                      </View>
                      {/* Additional transaction panels can be added here */}
                    </View>
                    <View style={styles.transactionHistoryList}>
                      {/* Repeated Transaction Details */}
                      <View style={styles.transactionDetailsPanel}>
                        <View style={styles.transactionDetailsRow}>
                          <Text style={styles.transactionDescriptionBold}>
                            Frais de transport
                          </Text>
                          <Text style={styles.transactionAmountDisplay}>-58 FCFA</Text>
                        </View>
                        <View style={styles.transactionInfoRow}>
                          <Text style={styles.transactionDate}>2025-02-12</Text>
                          <Text style={styles.shipmentReference}>BR-11-00010</Text>
                        </View>
                      </View>
                      {/* Additional transaction panels can be added here */}
                    </View>
                    <View style={styles.transactionHistoryList}>
                      {/* Repeated Transaction Details */}
                      <View style={styles.transactionDetailsPanel}>
                        <View style={styles.transactionDetailsRow}>
                          <Text style={styles.transactionDescriptionBold}>
                            Frais de transport
                          </Text>
                          <Text style={styles.transactionAmountDisplay}>-58 FCFA</Text>
                        </View>
                        <View style={styles.transactionInfoRow}>
                          <Text style={styles.transactionDate}>2025-02-12</Text>
                          <Text style={styles.shipmentReference}>BR-11-00010</Text>
                        </View>
                      </View>
                      {/* Additional transaction panels can be added here */}
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </ScrollView>
        
        <Modal
          animationType="slide"
          transparent={true}
          visible={isModalVisible}
          onRequestClose={handleCloseModal}
        >
          <View style={styles.modalContainer}>
            <View style={styles.modalContent}>
              <RechargeScreen onClose={handleCloseModal} />
            </View>
          </View>
        </Modal>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: 0,
  },
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    paddingVertical: 10,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  backButton: {
    padding: 5,
  },
  headerTitle: {
    fontSize: fontSize(18),
    fontWeight: '600',
    textAlign: 'center',
  },
  placeholder: {
    width: widthUtils(24, 24).width,
  },
  balanceCard: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    backgroundColor: '#f0f0f0',
  },
  sunriseGradientContainer: {
    backgroundColor: 'linear-gradient(180deg, rgba(255, 119, 0, 1) 0%, rgba(255, 77, 0, 1) 100%)',
    flexDirection: 'column',
    alignItems: 'stretch',
  },
  timeContainer: {
    height: widthUtils(43, 43).height,
    paddingTop: 21,
  },
  timeContainer2: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  timeContainer1: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  timeDisplay: {
    fontSize: fontSize(17),
    fontWeight: 'bold',
    color: 'white',
  },
  timeIndicatorContainer: {
    width: widthUtils(10, 124).width,
    height: widthUtils(10, 124).height,
  },
  timeDisplayContainer: {
    width: widthUtils(13,153).width,
    height: widthUtils(13,153).height,
  },
  balanceWidget: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 9,
  },
  balanceText: {
    fontSize: fontSize(32),
    fontWeight: 'bold',
    color: 'white',
  },
  balanceImage: {
    width: widthUtils(139, 139).width,
    height: widthUtils(139, 139).height,
  },
  balanceDetailsContainer: {
    marginTop: -53,
    flexDirection: 'column',
  },
  totalBalanceCard: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 20,
  },
  cardContainer: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    shadowColor: 'rgba(186, 186, 186, 0.25)',
    shadowOffset: { width: 2, height: 4 },
    shadowOpacity: 0.7,
  },
  financialInfoContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  largeBlackText: {
    fontSize: fontSize(36),
    fontWeight: 'bold',
    color: 'black',
  },
  svgContainer: {
    width: widthUtils(24, 24).width,
    height: widthUtils(24, 24).height,
    color: '#019847',
  },
  totalSoldInfoContainer: {
    marginTop: 7,
  },
  totalSoldeText: {
    fontSize: fontSize(14),
    color: '#7c7c7c',
  },
  totalBalanceInfoContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 22,
  },
  verticalCenteredTextBox: {
    flexDirection: 'column',
    justifyContent: 'center',
    width: '54.21%',
  },
  highlightedText: {
    fontSize: fontSize(20),
    fontWeight: 'bold',
    color: '#fe1e00',
  },
  expirationInfo: {
    fontSize: fontSize(14),
    color: '#7c7c7c',
  },
  deadlineInfoContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    width: '45.79%',
  },
  deadlineText: {
    fontSize: fontSize(20),
    fontWeight: 'bold',
    color: 'black',
  },
  transactionDetailsContainer: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 20,
  },
  balanceDetailContainer: {
    marginTop: 37,
  },
  balanceDetailTitle: {
    fontSize: fontSize(20),
    fontWeight: 'bold',
    color: 'black',
    marginBottom: 10,
  },
  transactionDetailsContainer1: {
    flexDirection: 'column',
  },
  transactionHistoryList: {
    flexDirection: 'column',
  },
  transactionDetailsPanel: {
    flexDirection: 'column',
    padding: 15.5,
    borderBottomWidth: 1,
    borderBottomColor: '#dddddd',
    borderStyle: 'dashed',
    backgroundColor: '#FFFFFF',
  },
  transactionDetailsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  transactionDescriptionBold: {
    fontSize: fontSize(15),
    fontWeight: 'bold',
    color: 'black',
  },
  transactionAmountDisplay: {
    fontSize: fontSize(24),
    fontWeight: 'bold',
    color: '#002fa7',
  },
  transactionInfoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 7,
  },
  transactionDate: {
    fontSize: fontSize(13),
    color: '#7f7e7e',
  },
  shipmentReference: {
    fontSize: fontSize(13),
    color: '#353029',
  },
  buttonContainer: {
    borderRadius: 25,
    width: widthUtils(50, 300).width,
    height: widthUtils(50, 300).height,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 30,
  },
  button: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 25,
  },
  buttonText: {
    fontSize: fontSize(16),
    fontWeight: '600',
    color: 'white',
    textAlign: 'center',
  },
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    height: '90%',
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
});