text: //Alpha X Software Company
  //Mindula Dilthushan
  //21-07-05
  import React, {Component} from "react";
  import {StyleSheet, View, Image, Text,TouchableOpacity} from "react-native";
  import {VictoryPie} from "victory-native";
  import center from "native-base/src/theme/components/center";
  
  export default class DashBoardPage extends Component {
      constructor(props) {
          super(props);
          this.state = {};
      }
  
      render() {
          return (
              <View style={styles.container}>
                  <View style={styles.rect}>
                      <View style={styles.imageRow}>
                          <Image
                              source={require("../assets/images/home.png")}
                              resizeMode="contain"
                              style={styles.image}>
                          </Image><Text style={styles.txtHome} onPress={() => {
                          this.props.navigation.navigate('HomePage');
                      }}> </Text>
                          <Text style={styles.home}>DashBoard</Text>
                          <Image
                              source={require("../assets/images/notifi.png")}
                              resizeMode="contain"
                              style={styles.logo}>
                          </Image>
                      </View>
                  </View>
                  <Text style={styles.listOfAccounts}>List of accounts</Text>
  
                  <View style={styles.TopRow}>
                      <TouchableOpacity style={styles.cashSection}
                            onPress={() => {
                                this.props.navigation.navigate('CashPage');
                            }}>
                          <Text style={styles.lblCash}
                                onPress={() => {
                                    this.props.navigation.navigate('IncomePage');
                                }}>CASH</Text>
                          <Text style={styles.totCash}>Rs. 1000.00</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                          style={styles.bankSection}
                          onPress={() => {
                              this.props.navigation.navigate('BankMain');
                          }}>
                          <Text style={styles.lblBank}
                               >BANK</Text>
                          <Text style={styles.totBank}>Rs. 1000.00</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                          style={styles.savingSection}
                          onPress={() => {
                              this.props.navigation.navigate('SavingPage');
                          }}>
                          <Text style={styles.lblSaving}
                                >SAVINGES</Text>
                          <Text style={styles.totSaving}>Rs. 1000.00</Text>
                      </TouchableOpacity>
                  </View>
  
                  <View style={styles.BottomRow}>
                      <TouchableOpacity
                          style={styles.creditSection}
                          onPress={() => {
                              this.props.navigation.navigate('CreditPage');
                          }}>
                          <Text style={styles.lblCredit}
                                >CREDIT CARD</Text>
                          <Text style={styles.totCredit}>Rs. 1000.00</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                          style={styles.debitSection}
                          onPress={() => {
                              this.props.navigation.navigate('DebitCardPage');
                          }}>
                          <Text style={styles.lblDebit}
                               >DEBIT CARD</Text>
                          <Text style={styles.totDebit}>Rs. 1000.00</Text>
                      </TouchableOpacity>
                      <TouchableOpacity style={styles.addAccountSection}>
                          <Text style={styles.lblAddAcc}>Add {"\n"}Account </Text>
                          <Image
                              source={require("../assets/images/add_127px.png")}
                              style={styles.add}>
                          </Image>
                      </TouchableOpacity>
                  </View>
  
                  <View style={styles.chartData}>
                      <VictoryPie style={styles.chartDataDetails}
                          width={350}
                          data={[
                              {x: "Cash", y: 25},
                              {x: "Bank", y: 40},
                              {x: "Saving", y: 25},
                              {x: "Credit", y: 42},
                              {x: "Debit", y: 27},
                          ]}
                          colorScale={[
                              "rgba(249, 202, 36,1.0)",
                              "rgba(255, 107, 107,1.0)",
                              "rgba(243, 156, 18,1.0)",
                              "rgba(38, 222, 129,1.0)",
                              "rgba(0, 168, 255,1.0)"
                          ]}
                      />
                  </View>
  
  
              </View>
          )
      }
  }
  
  
  const styles = StyleSheet.create({
  
      container: {
          flex: 1,
          backgroundColor: "rgb(255,255,255)",
      },
      rect: {
          width: 380,
          height: 55,
          backgroundColor: "rgb(130,130,130)",
          flexDirection: "row",
          marginTop: 24,
          alignSelf: "center",
          borderRadius: 10
      },
      txtHome: {
          right: 22,
          bottom: 10,
          fontSize: 30,
          fontWeight: "bold",
          color: "rgb(255,255,255)"
      },
      image: {
          width: 30,
          height: 30,
          bottom: 2
      },
      logo: {
          width: 30,
          height: 30,
          left: 200,
          bottom: 5
      },
      home: {
          fontFamily: "roboto-regular",
          color: "rgb(255,255,255)",
          left: 100,
          fontWeight: "bold",
          fontSize: 19,
          shadowColor: "#000000",
          shadowOffset: {
              width: 0,
              height: 2,
          },
          shadowOpacity: 0.23,
          shadowRadius: 2.62,
          elevation: 10
      },
      imageRow: {
          height: 50,
          flexDirection: "row",
          flex: 1,
          marginRight: 273,
          marginLeft: 11,
          marginTop: 16
      },
      listOfAccounts: {
          fontFamily: "roboto-regular",
          color: "rgba(0,0,0,1)",
          marginTop: 30,
          marginLeft: 20,
          fontSize: 20
      },
  
      TopRow: {
          height: 40,
          flexDirection: "row",
          marginTop: 10,
          marginLeft: 20
      },
  
      //Start Cash Section----------------------------------
      cashSection: {
          width: 120,
          height: 50,
          backgroundColor: "rgba(249, 202, 36,1.0)",
          borderRadius: 7,
          elevation: 10
      },
      lblCash: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 15,
          marginTop: 6,
          marginLeft: 10
      },
      totCash: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          marginTop: 2,
          marginLeft: 10,
          elevation: 10
      },
      //End Cash Section------------------------------------
  
      //Start Bank Section----------------------------------
      bankSection: {
          width: 120,
          height: 50,
          backgroundColor: "rgba(255, 107, 107,1.0)",
          borderRadius: 7,
          left: 10,
          elevation: 10
      },
      lblBank: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 15,
          marginTop: 6,
          marginLeft: 10,
          elevation: 10
      },
      totBank: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          marginTop: 2,
          marginLeft: 10
      },
      //End Bank Section------------------------------------
  
      //Start Saving Section--------------------------------
      savingSection: {
          width: 120,
          height: 50,
          backgroundColor: "rgba(243, 156, 18,1.0)",
          borderRadius: 7,
          left: 20,
          elevation: 10
      },
      lblSaving: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 15,
          marginTop: 6,
          marginLeft: 10
      },
      totSaving: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          marginTop: 2,
          marginLeft: 10,
          elevation: 10
      },
      //End Saving Section----------------------------------
  
      BottomRow: {
          height: 40,
          flexDirection: "row",
          marginTop: 25,
          marginLeft: 20
      },
  
      //Start Credit Section----------------------------------
      creditSection: {
          width: 120,
          height: 50,
          backgroundColor: "rgba(38, 222, 129,1.0)",
          borderRadius: 7,
          elevation: 10
      },
      lblCredit: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 15,
          marginTop: 6,
          marginLeft: 10
      },
      totCredit: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          marginTop: 2,
          marginLeft: 10
      },
      //End Credit Section------------------------------------
  
      //Start Debit Section----------------------------------
      debitSection: {
          width: 120,
          height: 50,
          backgroundColor: "rgba(0, 168, 255,1.0)",
          borderRadius: 7,
          left: 10,
          elevation: 10
      },
      lblDebit: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 15,
          marginTop: 6,
          marginLeft: 10
      },
      totDebit: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          marginTop: 2,
          marginLeft: 10
      },
      //End Debit Section------------------------------------
  
      //Start Saving Section--------------------------------
      addAccountSection: {
          width: 120,
          height: 50,
          backgroundColor: "rgba(205, 132, 241,1.0)",
          borderRadius: 7,
          left: 20,
          elevation: 15
      },
      lblAddAcc: {
          fontFamily: "roboto-regular",
          color: "rgba(255,255,255,1)",
          fontSize: 15,
          marginTop: 6,
          marginLeft: 10
      },
      add: {
          width: 30,
          height: 30,
          bottom: 35,
          left: 80
      },
      //End Saving Section----------------------------------
  
      //Start Chart Section---------------------------------
      chartData: {
          justifyContent:'center',
          alignItems:'center',
          top:40,
          width:370,
          height:350,
          left:20,
          borderRadius:20,
          backgroundColor: "rgb(255,255,255)",
          elevation: 10
      }
      //End Chart Section---------------------------------
  
  });
  