water-sys/app/screens/BalanceScreen.tsx

// 余额管理
import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Modal } 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';

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 (
    <>
      <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>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  backButton: {
    padding: 5,
  },
  backButtonText: {
    fontSize: fontSize(24),
    color: '#000',
  },
  title: {
    fontSize: fontSize(18),
    fontWeight: '600',
    color: '#000',
    marginLeft: 15,
  },
  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,
  },
});