Untitled

mail@pastecode.io avatarunknown
plain_text
a month ago
8.8 kB
2
Indexable
Never
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import { ScrollView } from 'react-native-gesture-handler';
import { Button, Icon, PopUpMessageGradient } from '../../../components/ui';
import { useColors } from '../../../hooks/useColors';
import { CompanyRatingInfo } from '../../../components/business';
import { CurrencyChart, FinancialsChart, SpiderChart } from '../../../components/business/Chart';
import { GradientCardList } from '../../../components/ui/Market';

export const FundamentalScreen = () => {
  const { t } = useTranslation();
  const { colors }: any = useColors();
  const ratingData = [
    { name: 'Efficiency', score: 1.5 },
    { name: 'Liquidity', score: 2 },
    { name: 'Leverage', score: 2.3 },
    { name: 'Profitability', score: 4.4 },
    { name: 'Growth', score: 3.5 },
  ];
  const multipleData = [
    { name: 'P/E', value: 36.78 },
    { name: 'M/B', value: 24.89 },
    { name: 'PEG', value: 'n/a' },
    { name: 'P/S', value: 27.58 },
    { name: 'EV/EBITDA', value: -37.78 },
    { name: 'EV/NOP', value: 'n/a' },
  ];
  const dataFinancial = [
    { date: 'June 2021', sales: 10000000, profit: -11000000, netProfit: 4000000 },
    { date: 'Sep 2021', sales: 14000000, profit: 9000000, netProfit: -4000000 },
    { date: 'Dec 2021', sales: -10000000, profit: 12000000, netProfit: 6000000 },
    { date: 'Mar 2022', sales: 9000000, profit: -13000000, netProfit: 5000000 },
  ];
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggleExpansion = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <>
      <ScrollView height={100}>
        <PopUpMessageGradient
          key={'fundamentals'}
          text={t(
            'Fundamental analysis focuses on getting to know a company and understanding some of the factors that may affect its stock price, such as  financial health, management teams competency, industry trends, competitive positioning, and macroeconomic influences.',
          )}
          icon={<Icon name="warningGr" width={24} height={24} />}
          enableHiding={true}
        />
        <View margin-20>
          <SpiderChart />
          <CompanyRatingInfo data={ratingData} />
        </View>
        <View style={styles(colors).topBorder} />
        <View margin-20>
          <View row height={30}>
            <Icon name="checked" width={16} height={16} />
            <Text marginL-10>{t('Equity ratio: Strong')}</Text>
          </View>
          <View row height={30}>
            <Icon name="checked" width={16} height={16} />
            <Text marginL-10>{t('Equity ratio: Strong')}</Text>
          </View>
          <View row height={30}>
            <Icon name="warning64" width={16} height={16} />
            <Text marginL-10>{t('Equity ratio: Strong')}</Text>
          </View>
          <View row height={30}>
            <Icon name="checked" width={16} height={16} />
            <Text marginL-10>{t('Equity ratio: Strong')}</Text>
          </View>
          <View row height={30}>
            <Icon name="checked" width={16} height={16} />
            <Text marginL-10>{t('Equity ratio: Strong')}</Text>
          </View>
          <View row height={30}>
            <Icon name="checked" width={16} height={16} />
            <Text marginL-10>{t('Equity ratio: Strong')}</Text>
          </View>
        </View>
        <View marginL-20 marginB-16>
          <TouchableOpacity onPress={handleToggleExpansion}>
            <View row centerV style={styles(colors).toggleButton}>
              <Text style={styles(colors).viewAllText}>
                {isExpanded ? t('viewLess') : t('View all financial evaluation')}
              </Text>
              <Icon
                name={isExpanded ? 'upArrow' : 'arrowRight'}
                width={6}
                height={10}
                fill={colors.action}
                style={[styles(colors).iconStyle]}
              />
            </View>
          </TouchableOpacity>
        </View>

        <View style={styles(colors).bottomBorder} />

        <View padding-20>
          <Text>Multiples</Text>
          <View marginT-20>
            <GradientCardList
              data={multipleData}
              renderItem={({ item, index }) => (
                <View style={{ height: 70 }} key={index} center>
                  <Text center>{item.name}</Text>
                  <Text center marginT-10>
                    {item.value}
                  </Text>
                </View>
              )}
              onItemPress={index => console.log(index)}
              numColumns={3}
            />
          </View>
        </View>
        <View margin-20>
          <Text>{t('Foreign currency information')}</Text>
          <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <CurrencyChart />
          </View>
        </View>
        <View margin-20>
          <Text>{t('Company financials')}</Text>
          <View marginT-20 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <View margin-20>
              <FinancialsChart
                data={dataFinancial}
                barColors={[colors.elektricBlueDk, colors.brightNavyDk, colors.darkBlueGreyDk]}
                financialLabels={['Sales Revenue', 'Core Profit', 'Net Profit']}
              />
            </View>
            <TouchableOpacity marginL-10>
              <View marginL-10 row>
                <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text>
                <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} />
              </View>
            </TouchableOpacity>
          </View>
          <View marginT-20 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <View margin-20>
              <FinancialsChart
                data={dataFinancial}
                barColors={['rgba(175, 239, 189, 1)', 'rgba(38, 185, 176, 1)', 'rgba(162, 124, 242, 1)']}
                financialLabels={['Equities', 'Net Debth', 'Total Assets']}
              />
            </View>
            <TouchableOpacity marginL-10>
              <View marginL-10 row>
                <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text>
                <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} />
              </View>
            </TouchableOpacity>
          </View>
          <View marginT-20 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <View margin-20>
              <FinancialsChart
                data={dataFinancial}
                barColors={['rgba(162, 124, 242, 1)', 'rgba(112, 39, 185, 1)', 'rgba(48, 48, 135, 1)']}
                financialLabels={[
                  'Cash and Cash Equivalents at the Beginning od the Period',
                  'Cash and Cash Equivalents at the end of the Period',
                  'Cash Flows from Operating Activities',
                ]}
              />
            </View>
            <TouchableOpacity marginL-10>
              <View marginL-10 row>
                <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text>
                <Icon style={styles(colors).arrowStyle} name="arrowRight" width={6} height={10} fill={colors.action} />
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View row center marginT-20>
          <Button style={styles(colors).buttonSuccess} success label={t('BUY')} onPress={() => {}} />
          <Button style={styles(colors).buttonDanger} danger label={t('SELL')} onPress={() => {}} />
        </View>
      </ScrollView>
    </>
  );
};

const styles = (colors: any) =>
  StyleSheet.create({
    buttonSuccess: {
      width: 148,
      height: 48,
    },
    buttonDanger: {
      width: 148,
      height: 48,
      marginLeft: 16,
    },
    textColor: {
      color: colors.action,
      fontSize: 12,
      marginBottom: 20,
      marginLeft: 20,
    },
    arrowStyle: {
      marginLeft: 10,
      marginTop: 3,
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
      opacity: 0.4,
    },
    bottomBorder: {
      borderBottomWidth: 1,
      borderColor: colors.white20,
      opacity: 0.4,
    },
    topBorderNone: {
      borderTopWidth: 0,
    },
    textFontSize: {
      fontSize: 12,
    },
    toggleButton: {
      marginVertical: 10,
      fill: colors.action,
    },
    iconStyle: {
      marginHorizontal: 10,
      marginVertical: 8,
    },
    viewAllText: {
      color: colors.action,
    },
  });