Sprint 3 🔨

package.json

@@ -44,6 +44,7 @@
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.34.0",
     "react-native-svg": "^15.5.0",
+    "react-native-table-component": "^1.2.2",
     "react-native-web": "~0.19.10",
     "styled-components": "^6.1.12",
     "victory-native": "^37.0.3-next.0"

src/components/Pesquisar2/index.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import * as S from './styles';
+import React, { useEffect, useState } from 'react';
+
+type SearchProps = {
+    color?: string;
+    image?: string;
+    text?: string;
+    height: string;
+    width: string;
+    setups: string[];
+    func: (txt: string) => void;
+    values: string;
+};
+
+
+const Pesquisar2: React.FC<SearchProps> = ({ color, text, width, setups, func }) => {
+    const [value, setValue] = useState("");
+    const [bool, setBool] = useState("");
+
+    useEffect(() => {
+        func(value);
+    }, [value]);
+
+    return (
+        <S.Container height={(value!='')&&(value!=bool) ? "200px" : "0px"} width={width}>
+            <S.InputBox height="32px" width={"100%"} color={color}>
+                <S.StyledInput placeholderTextColor= "#000000" value={value} secureTextEntry={false} placeholder={text} onChangeText={(v) => {setValue(v);console.log(v);}}></S.StyledInput>
+                <S.StyledImage source={require("public/assets/images/lupa_preta.png")}/>
+            </S.InputBox>
+            <S.OptionsDiv height={'180px'}>
+                {(value != '') ?
+                    setups.map((option,index) => (
+                        option.toLocaleUpperCase().includes(value.toLocaleUpperCase())&&option.toLocaleUpperCase()!=value.toLocaleUpperCase() ?
+                        <S.Option key={index} onPress={async () => 
+                            {setValue(option);
+                            setBool(option);
+                            console.log(bool)}}
+                            ><S.StyledText color="#000000">{option}</S.StyledText></S.Option>
+                        : null
+                    ))
+                    : null}
+            </S.OptionsDiv>
+
+        </S.Container>
+    );
+};
+
+export default Pesquisar2;

src/components/Pesquisar2/styles.ts

@@ -0,0 +1,66 @@
+import { Text, TextInput, ImageBackground, TouchableOpacity, View, ScrollView } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+interface StyledProps {
+    height?: string;
+    color?: string;
+    width?: string;
+};
+
+export const StyledInput = styled(TextInput)`
+    width: 90%;
+    padding-left: 16px;
+    color: #000000;
+`;
+
+export const OptionsDiv = styled(ScrollView)<StyledProps>`
+  width: 100%;
+  background-color: #ebebeb;
+  display: flex;
+  height: ${({height}) => height};
+  flex-direction: column;
+`;
+
+export const Option = styled(TouchableOpacity)``;
+
+export const Container = styled(View)<StyledProps>`
+    display: flex;
+    height: ${({height}) => height};
+    width: ${({width}) => width};;
+    margin-top: 32px;
+    margin-bottom: 16px;
+    border-radius: 32px 32px 0px 0px;
+    background-color: ${({color}) => color};
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+`;
+
+export const InputBox = styled(View)<StyledProps>`
+    display: flex;
+    height: ${({height}) => height};
+    width: ${({width}) => width};;
+    margin-top: 32px;
+    border-radius: 32px;
+    background-color: ${({color}) => color};
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+`;
+
+export const StyledText = styled(Text)<{ color?: string }>`
+  ${({ theme, color }) => css`
+    font-size: 20px;
+    font-weight: 400;
+    color: ${color || `${theme.colors.black}`};
+  `}
+`;
+
+export const StyledImage = styled(ImageBackground)`
+  margin-top: 4px;
+  margin-left: 8px;
+  flex: 1;
+  width: 82%;
+  height: 82%;
+  gap: 0px;
+`;

src/components/SetupComponent/index.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import * as S from './styles';
+import React from 'react';
+import Setup from '@interfaces/Setup';
+
+type CardProps = {
+    color?: string;
+    text?: string;
+    height: string;
+    width: string;
+    setup: Setup;
+    warning: boolean;
+    reloader: boolean;
+    setReloader: (b: boolean) => void; 
+};
+
+const SetupComponent: React.FC<CardProps> = ({ height, width, setup, warning, reloader, setReloader}) => {
+    return(
+        <S.Container height={height} width={width}>
+            <S.HorizontalDiv height="100%" width="100%" paddingtop = {"0px"}>
+                <S.HorizontalDiv height="100%" width="30%" paddingtop = {"8px"}>
+                    <S.StyledText color="#ebebeb">{setup.name}</S.StyledText>
+                    <S.StyledText color="gray"> | date</S.StyledText>
+                </S.HorizontalDiv>
+                <S.HorizontalDiv height="100%" width="40%">
+                    {warning === true ? <S.StyledImage source={require("public/assets/images/warning.png")}/> : null}
+                    <S.Touch onPress={() => {
+                        setReloader(!reloader);
+                    }}>
+                        <S.StyledText color="#ebebeb">Editar</S.StyledText>
+                    </S.Touch>
+                </S.HorizontalDiv>
+            </S.HorizontalDiv>
+            <S.Line></S.Line>
+        </S.Container>
+    );
+};
+
+export default SetupComponent;

src/components/SetupComponent/styles.ts

@@ -0,0 +1,60 @@
+import { Text, TouchableOpacity, View, Image } from 'react-native';
+import styled from 'styled-components/native';
+
+interface StyledProps {
+  height?: string;
+  color?: string;
+  width?: string;
+  margintop?: string;
+  paddingtop?: string;
+};
+
+export const HorizontalDiv = styled(View)<StyledProps>`
+    display: flex;
+    height: ${({height}) => height};
+    width: ${({width}) => width};;
+    background-color: ${({color}) => color};
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    padding-top: ${({paddingtop}) => paddingtop};
+    padding-left: 16px;
+    padding-right: 16px;
+`;
+
+export const Touch = styled(TouchableOpacity)`
+  background-color: #1c0f13;
+  border-radius: 4px;
+  height: 32px;
+  width: 60px;
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const StyledImage = styled(Image)`
+  margin-top: 10px;
+`;
+
+export const Container = styled(View)<StyledProps>`
+  display: flex;
+  height: ${({height}) => height};
+  width: ${({width}) => width};
+  align-items: normal;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 12px;
+`;
+
+export const StyledText = styled(Text)<StyledProps>`
+  color: ${({color}) => color};
+`;
+
+
+export const Line = styled(Text)`
+  width: 100%;
+  height: 1px;
+  background-color: #897878;
+  margin-top: 16px;
+`;

src/components/SetupModal/index.tsx

@@ -0,0 +1,53 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+import * as S from './styles';
+import React, { useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+
+interface Props {
+    visible: boolean;
+    setVisible: (b: boolean) => void;
+}
+
+// Define your stack parameters (if not already defined)
+type RootStackParamList = {
+    Carteira_Real: {name: string};
+    Carteira_de_Estudos: undefined;
+    Estratégia_Real: undefined;
+    Novo_Aporte: undefined;
+    CreateSetup: {name: string};
+    Estratégia_Ideal: undefined;
+    Setup_Indicadores: undefined;
+    Ranking: undefined;
+    Perfil: undefined;
+  };
+
+  // Define a specific type for the navigation prop
+  type SideBarNavigationProp = StackNavigationProp<RootStackParamList, 'Carteira_Real'>;
+
+const SetupModal: React.FC<Props> = ({visible, setVisible}) => {
+    const navigation = useNavigation<SideBarNavigationProp>();
+
+    const [name, setName] = useState("");
+    const params = { name };
+
+    return(
+        <S.Wrapper visible={visible} transparent={true} animationType={"fade"} onRequestClose={() => setVisible(false)}>
+        <S.ModalContainer>
+        <S.Container  width="240px" height="140px">
+            <S.StyledText color="#ffa800">Insira o nome do novo setup</S.StyledText>
+            <S.StyledInput value={name} onChangeText={setName}/>
+            <S.Touch onPress={() => {
+                if(name !== ""){
+                    navigation.navigate("CreateSetup", params);
+                    setVisible(false);
+                }
+            }}>
+                <S.StyledText color="#ebebeb">CONTINUAR</S.StyledText>
+            </S.Touch>
+        </S.Container>
+        </S.ModalContainer>
+        </S.Wrapper>
+    );
+};
+
+export default SetupModal;

src/components/SetupModal/styles.ts

@@ -0,0 +1,63 @@
+import { Text, TouchableOpacity, Modal, TextInput, View } from 'react-native';
+import styled from 'styled-components/native';
+
+interface StyledProps {
+  height?: string;
+  color?: string;
+  width?: string;
+  margintop?: string;
+  paddingtop?: string;
+};
+
+
+export const Touch = styled(TouchableOpacity)`
+  background-color: #ffa800;
+  border-radius: 4px;
+  height: 32px;
+  width: 100px;
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Wrapper = styled(Modal)`
+
+`;
+
+export const ModalContainer = styled(View)`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
+`;
+
+export const Container = styled(View)<StyledProps>`
+  display: flex;
+  height: ${({height}) => height};
+  width: ${({width}) => width};
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: column;
+  margin-top: 12px;
+  border-radius: 4px;
+  background-color: #1c0f13;
+`;
+
+export const StyledText = styled(Text)<StyledProps>`
+  color: ${({color}) => color};
+`;
+
+export const StyledInput = styled(TextInput)`
+  background-color: #ebebeb;
+  width: 200px;
+  height: auto;
+  padding-left: 12px;
+`;
+
+export const Line = styled(Text)`
+  width: 100%;
+  height: 1px;
+  background-color: #897878;
+  margin-top: 16px;
+`;

src/components/SideBar/index.tsx

@@ -57,7 +57,7 @@ const SideBar: React.FC<CardProps> = ({ color, width, height, func, isOpen }) =>
                     <S.StyledImage source={require('public/assets/images/grafico.png')} />
                     <S.StyledText color='#ebebeb' size='24px'>Estratégia Ideal</S.StyledText>   
                 </S.IconText>
-                <S.IconText width={'100%'}>
+                <S.IconText width={'100%'} onPress={() => {func(!isOpen);navigation.navigate("Setup_Indicadores")}}>
                     <S.StyledImage source={require('public/assets/images/config.png')}/>
                     <S.StyledText color='#ebebeb' size='24px'>Setup de Indicadores</S.StyledText>   
                 </S.IconText>

src/components/StudyInvestimento/index.tsx

@@ -38,7 +38,14 @@ const StudyInvestimento: React.FC<CardProps> = ({ color, height, width, invest,
                     <S.StyledText color='#ebebeb' size='16px'>{invest.value} R$</S.StyledText>
                     <S.StyledText color='#ebebeb' size='16px'>Cotas - {invest.quota}</S.StyledText>
                 </S.VerticalDiv>
-                <S.Touch><S.StyledImage source={require("public/assets/images/SVGRepo_iconCarrier.png")} /></S.Touch>
+                <S.Touch onPress={async () => {
+                    try {
+                        UserService.TransferInvestment(invest.id);
+                        setReloader(!reloader);
+                    } catch(err) {
+                        console.log(err);
+                    };
+                }}><S.StyledImage source={require("public/assets/images/SVGRepo_iconCarrier.png")} /></S.Touch>
                 <S.VerticalDiv>
                     <S.Touch onPress={async () => {
                         console.log("Editar");