Skip to content

E
expensetracker
Commit f4825239 authored by Farhani's avatar Farhani
Browse files
Options

Set latest value

parent 691b2826
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 974 deletions
mymoneymanager/components/AddModal.js 0 → 100644
View file @ f4825239
import React, { Component } from 'react';
import {
AppRegistry, FlatList, StyleSheet, Text, View, Image, Alert, Platform, TouchableHighlight, Dimensions, TextInput
} from 'react-native';
import Modal from 'react-native-modalbox';
import Button from 'react-native-button';
var screen = Dimensions.get('window');
export default class AddModal extends Component{
constructor(props) {
super (props);
}
render() {
return (
<Modal style={{
justifyContent:'center',
borderRadius: Platform.OS==='android' ? 0:30,
shadowRadius: 10,
width: screen.width - 80,
height: 280
}}
position='center'
backdrop={true}
onClosed={()=>{
alert("Modal closed");
}}
>
<Text>Edit category</Text>
</Modal>
);
}
}
mymoneymanager/package.json
View file @ f4825239
......@@ -32,7 +32,9 @@
"react-native-alert-pro": "^1.1.2",
"react-native-androw": "^0.0.34",
"react-native-btr": "^2.2.0",
"react-native-button": "^3.0.1",
"react-native-chonse-select": "^1.0.5",
"react-native-config": "^1.4.11",
"react-native-customisable-alert": "^0.1.20",
"react-native-dropdown-select-list": "^1.0.23",
"react-native-elements": "^3.4.2",
......@@ -43,6 +45,7 @@
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^14.0.0",
"react-native-modalbox": "^2.0.2",
"react-native-modern-datepicker": "^1.0.0-beta.91",
"react-native-pager-view": "^6.0.0",
"react-native-paper": "^4.12.5",
......@@ -51,6 +54,7 @@
"react-native-progress-bar-animated": "^1.0.6",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-reanimated": "^2.10.0",
"react-native-redux-alert": "^1.0.5",
"react-native-safe-area-context": "^4.4.0",
"react-native-screens": "^3.17.0",
"react-native-select-dropdown": "^3.0.1",
......@@ -59,9 +63,12 @@
"react-native-switch-selector": "^2.2.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.2.0",
"react-native-version-check": "^3.4.3",
"react-native-virtualized-view": "^1.0.0",
"react-navigation-drawer": "^2.7.2",
"react-prop-types": "^0.4.0"
"react-prop-types": "^0.4.0",
"react-redux": "^8.0.5",
"redux": "^4.2.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
......
mymoneymanager/screens/categories/index.js
View file @ f4825239
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { Button, View, StyleSheet, Pressable, Modal, Alert, TextInput, Text,Image, Linking, SectionList, TouchableOpacity, ScrollView} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
......@@ -9,8 +9,16 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
import Icon from 'react-native-vector-icons/FontAwesome';
import {showAlert, closeAlert} from 'react-native-customisable-alert';
import AlertPro from "react-native-alert-pro";
import { render } from "react-dom";
import Animated from "react-native-reanimated";
// import {openDatabase} from 'react-native-sqlite-storage';
// import { TextInput } from "react-native-gesture-handler";
// const db = openDatabase({
// name:"rn_sqlite",
// });
const plus = require ('../../images/plus.png');
const more = require('../../images/more.png');
const cutlery = require ('../../images/cutlery.png');
......@@ -35,9 +43,29 @@ const grant = require ('../../images/grant.png');
const onPress = () => console.log('press');
export default function CategoriesScreen({ navigation }) {
state = {
modalVisible:false
};
setModalVisible = (visible)=>{
this.setState ({modalVisible:visible});
}
const addCategoryAlert = () =>
Alert.alert(
"Add new category",
"Category added"
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "SAVE", onPress: () => console.log("SAVE Pressed") }
]
);
{/* const editButtonAlert = () =>
const editButtonAlert = () =>
Alert.alert(
"Edit Category",
......@@ -48,9 +76,9 @@ export default function CategoriesScreen({ navigation }) {
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
{ text: "SAVE", onPress: () => console.log("SAVE Pressed") }
]
); */} {/*onPress={editButtonAlert}*/}
);
const deleteButtonAlert = () =>
Alert.alert(
......@@ -68,6 +96,8 @@ export default function CategoriesScreen({ navigation }) {
{cancelable:false}
);
const INCOME={
title: 'Income Categories',
data:[
......@@ -156,122 +186,52 @@ export default function CategoriesScreen({ navigation }) {
]
}
// onPress={deleteButtonAlert}
// state = {
// modalVisible: false
// };
// setModalVisible(visible) {
// this.setState({ modalVisible: visible });
// }
//const [modalVisible, setModalVisible] = useState(false);
// <Modal
// animationType="slide"
// transparent={true}
// visible={modalVisible}
// onRequestClose={() => {
// Alert.alert("Modal has been closed.");
// setModalVisible(modalVisible);
// }}
// ></Modal>
// const ModalPoup = ({visible, children}) => {
// const [showModal, setShowModal] = React.useState(visible);
// React.useEffect (() => {
// toggleModal();
// }, [visible]);
// const toggleModal = ()=> {
// if (visible){
// setShowModal(true);
// }else{
// setShowModal(false);
// }
// };
// return (
// <Modal transparent visible={showModal}>
// <View style = {styles.modalBackGround}>
// <View style={[styles.modalContainer]}>{children}</View>
// </View>
// </Modal>);
// };
// const [visible,setVisible] = React.useState(false);
const renderItem = ({item}) => {
return(
<View style={{flexDirection:'column', justifyContent:'space-between'}}>
<View style={[styles.item]}>
<View style={{borderWidth:0.5,borderColor:'grey',borderRadius:100, width:50, height:50}}>
<Image source={item.image} style={[styles.img,{marginHorizontal:10, marginVertical:10}]}/></View>
<Text style ={{fontSize:19, fontWeight:'300',color:'black', marginHorizontal:15, marginVertical:15}}>{item.type}</Text>
<View style={{flexDirection:'row', justifyContent:'flex-end', marginLeft:'auto', marginVertical:15}}>
<TouchableOpacity style ={{backgroundColor:'#e8f4f8', width:25, height:25,marginHorizontal: 0,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}>
<MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
<TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginHorizontal:5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}>
<MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity></View>
</View>
{/* onPress={() => this.AlertPro.open()} */}
{/* <AlertPro
ref={ref => {
this.AlertPro = ref;
}}
onConfirm={() => this.AlertPro.close()}
title="Delete this category?"
message="Deleting this category will also delete all records and budgets for this category. Are you sure?"
textCancel="Cancel"
textConfirm="Delete"
customStyles={{
mask: {
backgroundColor: "transparent"
},
container: {
borderWidth: 1,
borderColor: "white",
shadowColor: "#000000",
shadowOpacity: 0.2,
shadowRadius: 10,
elevation:7
},
buttonCancel: {
backgroundColor: "red"
},
buttonConfirm: {
backgroundColor: "dodgerblue"
}
}}
/> */}
<View style={[styles.item]}>
<View style={{borderWidth:0.5,borderColor:'grey',borderRadius:100, width:50, height:50}}>
<Image source={item.image} style={[styles.img,{marginHorizontal:10, marginVertical:10}]}/></View>
<Text style ={{fontSize:19, fontWeight:'300',color:'black', marginHorizontal:15, marginVertical:15}}>{item.type}</Text>
<View style={{flexDirection:'row', justifyContent:'flex-end', marginLeft:'auto', marginVertical:15}}>
<TouchableOpacity style ={{backgroundColor:'#e8f4f8', width:25, height:25,marginHorizontal: 0,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={editButtonAlert}>
<MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/>
</TouchableOpacity>
<TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginHorizontal:5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}>
<MaterialCommunityIcons name="delete" size={20} color="red"/>
</TouchableOpacity>
</View>
</View>
</View>
)
}
return (
return (
<View style = {[styles.container]}>
{/* <View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={{fontSize:19, fontWeight:'600', color:'black', marginTop:10}}>Delete this category?</Text>
<Text style={styles.modalText}>Deleting this category will also delete all records and budgets for this category. Are you sure?</Text>
<View style={{flexDirection:'row'}}>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>NO</Text>
</Pressable>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>YES</Text>
</Pressable>
</View>
</View>
</View>
</Modal>
<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => setModalVisible(true)}
>
<Text style={styles.textStyle}>Show Modal</Text>
</Pressable>
</View> */}
<SectionList
sections={[INCOME, EXPENSE]}
keyExtractor={(item, index) => item + index}
......@@ -283,214 +243,21 @@ export default function CategoriesScreen({ navigation }) {
</View>
)}
/>
<TouchableOpacity style={{backgroundColor:'white', elevation:7, width:70, height:70,justifyContent:'center', alignItems:'center', position:'absolute', borderRadius:100, bottom:20, left:310, marginTop:210}}>
<Image style={{width:30, height:30}} source = {plus}></Image>
</TouchableOpacity>
</View>
// {/* <View style = {[styles.containerTop,{marginTop:10}]}>
// <ScrollView showsVerticalScrollIndicator = {false}>
// <View>
// <Text style={[styles.textStyle,{marginVertical:5}]}>Income categories</Text>
// <View style={[styles.dividerLine,{}]}></View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Image style={{width:25, height: 25}} source={allowance}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Allowance</Text>
// <View style={{flexDirection: 'row', marginHorizontal:140, marginVertical:9, justifyContent:'space-between'}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Ionics name="trophy" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Awards</Text>
// <View style={{flexDirection: 'row', marginHorizontal:161, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#ff8000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <MaterialCommunityIcons name="ticket" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Coupons</Text>
// <View style={{flexDirection: 'row', marginHorizontal:150, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#8b0000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <MaterialCommunityIcons name="cash-refund" size={29} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Refunds</Text>
// <View style={{flexDirection: 'row', marginHorizontal:155, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
{/* <ModalPoup visible={visible}>
<View style={{alignItems:'center'}}>
<View style={styles.header}>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Image style={{width:25, height:25}} source={salary}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Salary</Text>
// <View style={{flexDirection: 'row', marginHorizontal:171, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Image style={{width:27,height:27}} source={rent}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Rental</Text>
// <View style={{flexDirection: 'row', marginHorizontal:168, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <MaterialCommunityIcons name="sale" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Sale</Text>
// <View style={{flexDirection: 'row', marginHorizontal:184, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
</View>
<Image source= {plus} style={{width:30, height:30}}/>
// <View style={{marginTop:15}}>
// <Text style={[styles.textStyle,{ }]}>Expense categories</Text>
// <View style={[styles.dividerLine,{marginVertical:5}]}></View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Ionics name="cart" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Shopping</Text>
// <View style={{flexDirection: 'row', marginHorizontal:147, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Icon name="graduation-cap" size={25} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Education</Text>
// <View style={{flexDirection: 'row', marginHorizontal:142, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#ff8000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Ionics name="bus" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Transportation</Text>
// <View style={{flexDirection: 'row', marginHorizontal:108, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#8b0000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Ionics name="fast-food" size={30} color="white" style={{marginVertical:0, marginHorizontal:5}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Food</Text>
// <View style={{flexDirection: 'row', marginHorizontal:178, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Ionics name="call" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}
// />
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Telephone</Text>
// <View style={{flexDirection: 'row', marginHorizontal:139, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <MaterialCommunityIcons name="receipt" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}
// />
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Bills</Text>
// <View style={{flexDirection: 'row', marginHorizontal:185, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
</View></ModalPoup> */}
// <View style ={{flexDirection:'row', marginVertical:10}}>
// <View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, marginVertical:6}}>
// <Icon name="medkit" size={28} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
// </View>
// <View style ={{flexDirection:'row', justifyContent:'flex-start', marginHorizontal:20}}>
// <Text style ={{fontSize:19, marginVertical:17, color:'black'}}>Health</Text>
// <View style={{flexDirection: 'row', marginHorizontal:167, marginVertical:9}}>
// <TouchableOpacity style ={{backgroundColor:'#e8f4f8', marginTop:10, width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}}><MaterialCommunityIcons name="square-edit-outline" size={20} color="#5eb5ce"/></TouchableOpacity>
// <TouchableOpacity style ={{backgroundColor:'#ffd8d8', marginTop:10, marginHorizontal: 5,width:25, height:25,justifyContent:"center",alignItems:'center', borderRadius:4, elevation:4}} onPress={deleteButtonAlert}><MaterialCommunityIcons name="delete" size={20} color="red"/></TouchableOpacity>
// </View>
// </View>
// </View>
<TouchableOpacity style={{backgroundColor:'white', elevation:7, width:70, height:70,justifyContent:'center', alignItems:'center', position:'absolute', borderRadius:100, bottom:20, left:310, marginTop:210}} onPress={addCategoryAlert}>
<Image style={{width:30, height:30}} source = {plus}></Image>
</TouchableOpacity>
// </ScrollView>
// </View>
// */}
// </View>
</View>
);
}
// }
\ No newline at end of file
}
mymoneymanager/screens/categories/style.js
View file @ f4825239
......@@ -138,7 +138,28 @@ const styles = StyleSheet.create ({
marginTop:15,
textAlign: "center",
fontSize:18,
}
},
modalBackGround:{
flex:1,
backgroundColor:'rgba(0,0,0,0.5)',
justifyContent:'center',
alignItems:'center'
},
modalContainer:{
width:"80%",
backgroundColor:'white',
paddingHorizontal:20,
paddingVertical:30,
borderRadius:20,
elevation:20,
},
header:{
width:'100%',
height:40,
alignItems:'flex-end',
justifyContent:'center',
},
});
export default styles;
\ No newline at end of file
mymoneymanager/screens/currency/index.js
View file @ f4825239
......@@ -35,28 +35,28 @@ const CURRENCY = [
},
{
id:'4',
title:'EUR',
name:'Euro',
title:'AUD',
name:'Australian Dollar',
},
{
id:'5',
title:'EUR',
name:'Euro',
title:'IDR',
name:'Indonesian Rupiah',
},
{
id:'6',
title:'EUR',
name:'Euro',
title:'MXN',
name:'Mexican Peso',
},
{
id:'7',
title:'EUR',
name:'Euro',
title:'QAR',
name:'Qatari rial',
},
{
id:'8',
title:'EUR',
name:'Euro',
title:'THB',
name:'Thai Baht',
},
]
......@@ -83,63 +83,12 @@ const renderItem = ({ item }) => (
value={searchQuery}
/>*/}
export default function CurrencyScreen({navigation}){
return (
<View style={{ flex: 1, backgroundColor:'white'}}>
<SafeAreaView>
{/* <View style = {{flexDirection:'row', justifyContent:'flex-end', marginRight:10}}>
<Text style ={{marginTop:10,fontSize:15, color:'dodgerblue'}}>Default</Text>
</View>
<View style = {{flexDirection:'row', marginTop:5}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>USD</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
</View>
<Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>United States Dollar</Text>
<View style={styles.dividerLine}></View>
<View style = {{flexDirection:'row', marginTop:5}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>USD</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity onPress={() => navigation.navigate("editcurrency")}><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
</View>
<Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>United States Dollar</Text>
<View style={styles.dividerLine}></View>
<View style = {{flexDirection:'row', marginTop:5}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>MYR</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
</View>
<Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>Malaysian Ringgit</Text>
<View style={styles.dividerLine}></View>
<View style = {{flexDirection:'row', marginTop:5}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>KRW</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
</View>
<Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>South Korean Won</Text>
<View style={styles.dividerLine}></View>
<View style = {{flexDirection:'row', marginTop:5}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>SGD</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
</View>
<Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>Singapore Dollar</Text>
<View style={styles.dividerLine}></View>
<View style = {{flexDirection:'row', marginTop:5}}>
<Text style = {[styles.textStyle,{marginTop:0, marginHorizontal:50, fontWeight:'500'}]}>EUR</Text>
<View style = {{flexDirection:'column', marginVertical:3}}>
<TouchableOpacity><Image style={{width:15, height:20, marginHorizontal:200, marginTop:5}} source={greater} ></Image></TouchableOpacity></View>
</View>
<Text style ={[styles.textStyle,{marginTop:0, marginHorizontal:50, color:'grey'}]}>Euro</Text>
<View style={styles.dividerLine}></View>
<TouchableOpacity style={{backgroundColor:'dodgerblue', elevation:3, width:70, height:70, justifyContent:'center', alignItems:'center', borderRadius:100, bottom:20, left:300, marginTop:210}} onPress={() => navigation.navigate("addcurrency")}>
<Image style={{width:20, height:20}} source = {plus}></Image>
</TouchableOpacity> */}
<FlatList
data={CURRENCY}
renderItem={renderItem}
......
mymoneymanager/screens/home/index.js
View file @ f4825239
import React, {useState} from 'react';
import { Button, SafeAreaView, View,Text, Image, TouchableOpacity, Linking, Alert, SectionList,ScrollView} from 'react-native';
import {RefreshControl, Button, SafeAreaView, View,Text, Image, TouchableOpacity, Linking, Alert, SectionList,ScrollView, KeyboardAvoidingView} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import styles from '../home/style';
......@@ -15,7 +15,7 @@ import { NavigationContainer } from '../sidebar/index';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';
import Iconn from 'react-native-vector-icons/';
// import Iconn from 'react-native-vector-icons/';
const logo = require ('../../images/pic.png');
const cutlery = require ('../../images/cutlery.png');
......@@ -46,8 +46,8 @@ const edu = require ('../../images/education.png');
const Stack = createNativeStackNavigator();
// const navigation = useNavigation();
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
const onPress = () => console.log('press');
const addTransactions = () => {
navigation.navigate('Transactions', {
name: 'Add Transaction',
......@@ -225,8 +225,6 @@ const DATE3 ={
)
}
export default function DashboardScreen({ navigation }) {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
......@@ -300,230 +298,6 @@ export default function DashboardScreen({ navigation }) {
<Image style={{width:30, height:30}} source = {plus}></Image>
</TouchableOpacity></View>
</SafeAreaView>
{/* <ScrollView showsVerticalScrollIndicator = {false}>
<SafeAreaView>
<Text style={[styles.textStyle,{marginTop:35, marginHorizontal:20,}]}>Oct 11, Tuesday</Text>
<View style={styles.horizontalLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row', marginHorizontal:20}}>
<View style={{backgroundColor:'#8b0000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Ionics name="fast-food" size={30} color="white" style={{marginVertical:0, marginHorizontal:5}}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Food</Text>
<View style={{backgroundColor: 'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1, }}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Ionics name="card-outline" size={20} color="#838383" style={{marginVertical:0, marginHorizontal:2}}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Card</Text>
</View>
</View>
</View>
<View style={{flexDirection:'column'}}>
<Text style={[styles.textStyle2, {marginHorizontal:50}]}>-RM30.00</Text>
<Text style={{marginHorizontal:45, fontSize:15}}>Rp99,069.53</Text>
</View>
</View>
</View>
</TouchableOpacity>
<View style = {{flexDirection:'row', marginBottom:29}}>
</View>
<Text style={[styles.textStyle,{marginHorizontal:20}]}>Oct 12, Wednesday</Text>
<View style={styles.horizontalLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row', marginHorizontal:20}}>
<View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40 }}>
<Image style={{width:25, height:25}} source={salary}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Allowance</Text>
<View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<FontAwesome name="money" size={20} color="#838383" style={{marginVertical:0, marginHorizontal:2}}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
</View>
</View>
</View>
<View style={{flexDirection:'column'}}>
<Text style={[styles.textStyle2, {marginHorizontal:47, color: 'green'}]}>RM600.00</Text>
<Text style={{marginHorizontal:45, fontSize:15}}></Text>
</View>
</View>
</View>
</TouchableOpacity>
<View style={styles.dividerLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row', marginHorizontal:20}}>
<View style={{backgroundColor:'#ff8000', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40, }}>
<Ionics name="bus" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Transportation</Text>
<View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:25, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<AntDesign name="wallet" size={20} color="#838383" style={{marginVertical:1, marginHorizontal:2}}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Wallet</Text>
</View>
</View>
</View>
<Text style={[styles.textStyle2, {marginHorizontal:44, color: 'red'}]}>-RM600.00</Text>
</View>
</View>
</TouchableOpacity>
<View style = {{flexDirection:'row', marginBottom:29}}>
</View>
<Text style={[styles.textStyle,{marginHorizontal:20}]}>Oct 13, Thursday</Text>
<View style={styles.horizontalLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row',marginHorizontal:20}}>
<View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Icon name="medkit" size={28} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Health</Text>
<View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Image style={{marginHorizontal:3,width:20, height:20}} source={cash}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
</View>
</View>
</View>
<Text style={[styles.textStyle2, {marginHorizontal:50, color: 'red'}]}>-RM70.00</Text>
</View>
</View>
</TouchableOpacity>
<View style={styles.dividerLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row',marginHorizontal:20}}>
<View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Ionics name="cart" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Shopping</Text>
<View style={{backgroundColor: 'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:25, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Image style={[styles.cardPic,{marginHorizontal:3, marginVertical:0, width: 20, height:20}]} source={wallet}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Wallet</Text>
</View>
</View>
</View>
<View style={{flexDirection:'column'}}>
<Text style={[styles.textStyle2, {marginHorizontal:45, color: 'red'}]}>-RM100.00</Text>
<Text style={{marginHorizontal:40, fontSize:15}}>$1,981,390.55</Text>
</View>
</View>
</View>
</TouchableOpacity>
<View style={styles.dividerLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row',marginHorizontal:20}}>
<View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Ionics name="trophy" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row', }}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Awards</Text>
<View style={{backgroundColor:'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Image style={{marginHorizontal:3,width:20, height:20}} source={cash}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
</View>
</View>
</View>
<Text style={[styles.textStyle2, {marginHorizontal:55, color: 'green'}]}>RM60.00</Text>
</View>
</View>
</TouchableOpacity>
<View style = {{flexDirection:'row', marginBottom:29}}>
</View>
<Text style={[styles.textStyle,{marginHorizontal:20}]}>Oct 14, Friday</Text>
<View style={styles.horizontalLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row',marginHorizontal:20}}>
<View style={{backgroundColor:'#ff74af', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Icon name="medkit" size={28} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Health</Text>
<View style={{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Image style={{marginHorizontal:3,width:20, height:20}} source={cash}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
</View>
</View>
</View>
<Text style={[styles.textStyle2, {marginHorizontal:50, color: 'red'}]}>-RM70.00</Text>
</View>
</View>
</TouchableOpacity>
<View style={styles.dividerLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row',marginHorizontal:20}}>
<View style={{backgroundColor:'#e63e00', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Ionics name="cart" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row'}}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Shopping</Text>
<View style={{backgroundColor: 'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:25, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Image style={[styles.cardPic,{marginHorizontal:3, marginVertical:0, width: 20, height:20}]} source={wallet}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Wallet</Text>
</View>
</View>
</View>
<Text style={[styles.textStyle2, {marginHorizontal:45, color: 'red'}]}>-RM100.00</Text>
</View>
</View>
</TouchableOpacity>
<View style={styles.dividerLine}></View>
<TouchableOpacity>
<View style={{flexDirection:'row',marginHorizontal:20}}>
<View style={{backgroundColor:'#00468b', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:25, width:40, height:40}}>
<Ionics name="trophy" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}/>
</View>
<View style={{flexDirection:'row', }}>
<View style ={{justifyContent:'space-between', marginHorizontal:7, width:'50%'}}>
<Text style={[styles.textStyle, {marginHorizontal:1}]}>Awards</Text>
<View style={{backgroundColor:'transparent', borderWidth: 1, borderColor:'lightgrey',borderRadius:4, width:27, height:23, flexDirection:'row', justifyContent:'flex-start', marginTop:1}}>
<View style={{justifyContent:'space-between', flexDirection:'row'}}>
<Image style={[styles.cardPic,{marginHorizontal:3, marginVertical:0, width: 20, height:20}]} source={cash}/>
<Text style={[styles.textStyle1 ,{marginHorizontal:3}]}>Cash</Text>
</View>
</View>
</View>
<Text style={[styles.textStyle2, {marginHorizontal:55, color: 'green'}]}>RM60.00</Text>
</View>
</View>
</TouchableOpacity>
</SafeAreaView>
</ScrollView>
*/}
{/* <TouchableOpacity style={{backgroundColor:'dodgerblue', elevation:3, width:70, height:70, position:'absolute', justifyContent:'center', alignItems:'center', borderRadius:100, bottom:20, left:300}} onPress={() => navigation.navigate("Transactions")}>
<Image style={{width:20, height:20}} source = {plus}></Image>
</TouchableOpacity> */}
</View>
);
};
mymoneymanager/screens/sidebar/index.js
View file @ f4825239
......@@ -259,14 +259,16 @@ const DrawerNavigator = () => {
},
drawerIcon: ({focused, size}) => (
<View style={{ justifyContent:'space-between'}}>
<Ionics name="notifications-outline" size={20} color="grey"/>
<Switch value={switchOn} style= {{}} onValueChange={(toggleSwitch) => {
<Ionics name="notifications-outline" size={20} color="grey"
/>
),
}}/>
{/* <Switch value={switchOn} style= {{}} onValueChange={(toggleSwitch) => {
setSwitchOn(!switchOn)
}}/>
</View>
),
}} />
}}/> */}
{/*<Drawer.Screen component={LoginScreen} name='Login'options={{
title: 'Login',
......
mymoneymanager/screens/transactions/index.js
View file @ f4825239
import React, { useEffect, useRef, useState, memo, Component } from "react";
import { KeyboardAvoidingView,Button, View, Text, SectionList, Image, TouchableOpacity, TextInput, FlatList, ScrollView, SafeAreaView} from 'react-native';
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback,Button, View, Text, SectionList, Image, TouchableOpacity, TextInput, FlatList, ScrollView, SafeAreaView} from 'react-native';
import DashboardScreen from '../home';
import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
......@@ -11,6 +11,8 @@ import moment from 'moment/moment';
import SelectDropdown from 'react-native-select-dropdown';
import Select, {SelectItem} from '@redmin_delishaj/react-native-select';
import {Dropdown} from 'react-native-material-dropdown';
import { createStore, combineReducers } from 'redux';
import { alertReducer } from 'react-native-redux-alert';
// import PropTypes from "prop-types";
// import {Picker} from '@react-native-picker/picker';
// import RNPickerSelect from 'react-native-picker-select';
......@@ -52,12 +54,19 @@ const onPress = () => console.log('press');
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
const todayTime = moment().utcOffset('+08.00').format('LT');
// const addTransactions = () =>{
// navigation.navigate('dashboard',{
// name:'Edit Transactions',
// });
// };
const ACC = [
{
id:'0',
title:'Cash',
icon:'cash-outline',
balance:'RM600.00',
},
{
id:'1',
......@@ -198,333 +207,21 @@ const EXP = [
// const [selectedLanguage, setSelectedLanguage] = useState();
const renderItem = ({ item }) => (
<SafeAreaView>
<View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
<TouchableOpacity style={{flexDirection:'row',marginBottom:10}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:100,width:40, height:40, marginLeft:10, marginRight:10,justifyContent:'space-between'}}>
<Ionics name={item.icon} size={25} color="#838383" style={{marginHorizontal:7, marginTop:6}}></Ionics></View>
<View style={{flexDirection:'row', justifyContent:'space-between',width:'45%'}}>
<Text style={{marginHorizontal:13, fontSize:18, marginTop:10, fontWeight:'600', color:'black', width:'145%'}}>{item.title}</Text>
<Text style={{fontSize:18,fontWeight:'600', color:'#006ad1', marginTop:10, marginRight:25}}>{item.balance}</Text>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
);
const renderItem1 = ({ item }) => (
<SafeAreaView>
<View style= {{}}>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
<View style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}}>
<Image source={item.image} style={styles.img}/></View>
</View>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
<Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
</View>
</View>
</SafeAreaView>
);
const renderItem2 = ({item}) =>(
<SafeAreaView>
<View style= {{}}>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
<View style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}}>
<Image source={item.image} style={styles.img}/></View>
</View>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
<Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
</View>
</View>
</SafeAreaView>
);
const YourAccount = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
{/* <Text style={{fontSize:20, fontWeight:'600', marginTop:20, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
<View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
<Image style={{width:40, height:40, marginHorizontal:4, marginTop:4}} source={cash}></Image></View>
<View style={{flexDirection:'row', justifyContent:'space-between',}}>
<Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Cash</Text>
<Text style={{marginHorizontal:140, fontSize:18, marginVertical:10, fontWeight:'600', color:'green'}}>RM300.50</Text>
</View>
</TouchableOpacity>
</View>
<View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,marginTop:20}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
<Image style={[styles.img,{marginHorizontal:4, marginTop:4}]} source={card}></Image></View>
<View style={{flexDirection:'row', justifyContent:'space-between',}}>
<Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Card</Text>
<Text style={{marginHorizontal:140, fontSize:18, marginVertical:10, fontWeight:'600', color:'red'}}>-RM300.50</Text>
</View>
</TouchableOpacity>
</View>
<View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,marginTop:20}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
<Image style={[styles.img,{marginHorizontal:5, marginTop:4}]} source={wallet}></Image></View>
<View style={{flexDirection:'row', justifyContent:'space-between',}}>
<Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Wallet</Text>
<Text style={{marginHorizontal:134, fontSize:18, marginVertical:10, fontWeight:'600', color:'green'}}>RM300.50</Text>
</View>
</TouchableOpacity>
</View>
<View style={{justifyContent:'flex-start', flexDirection:'row', marginHorizontal:15,marginTop:20}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:4,width:50, height:50, marginLeft:10, marginRight:10,}}>
<Image style={[styles.img,{marginHorizontal:4, marginTop:4}]} source={debit}></Image></View>
<View style={{flexDirection:'row', justifyContent:'space-between',}}>
<Text style={{marginHorizontal:13, fontSize:18, marginVertical:10, fontWeight:'600', color:'black'}}>Debit</Text>
<Text style={{marginHorizontal:140, fontSize:18, marginVertical:10, fontWeight:'600', color:'green'}}>RM300.50</Text>
</View>
</TouchableOpacity>
</View>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}
/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
</View> */}
<FlatList
data={ACC}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}
/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
</View>
</SafeAreaView>
const IncomeCategory = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
{/* <View style={{justifyContent:'center', flexDirection:'column', marginHorizontal:35}}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}} onPress={onPress}>
<View style={{backgroundColor:'#00468b', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Ionics name="trophy" size={50} color="white" style={{marginVertical:5, marginHorizontal:5}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginHorizontal:5, marginVertical:12}}>Awards</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#ff8000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<MaterialCommunityIcons name="ticket" size={50} color="white" style={{marginVertical:4, marginHorizontal:5}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row',justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginVertical:12}}>Coupons</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#e63e00', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Image style={{width:40, height:40, marginHorizontal:10, marginTop:7, justifyContent:'center', marginBottom:26}} source={allowance}/>
<View style={{flexDirection:'column', width:'110%'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16}}>Allowance</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#8b0000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<MaterialCommunityIcons name="cash-refund" size={50} color="white" style={{marginVertical:0, marginHorizontal:5}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginVertical:20, marginHorizontal:2}}>Refunds</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
<Image style={{width:40, height:40, marginHorizontal:10, marginTop:42, justifyContent:'center', marginBottom:20}} source={salary}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16}}>Salary</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
<Image style={{width:45, height: 45, marginHorizontal:10, marginTop:38, justifyContent:'center', marginBottom:20}} source={rent}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16}}>Rental</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#ff74af', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<MaterialCommunityIcons name="sale" size={50} color="white" style={{marginVertical:3, marginHorizontal:5}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginVertical:12, marginHorizontal:15}}>Sale</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
</View>
*/}
<FlatList
data={INC}
renderItem={renderItem1}
keyExtractor={item => item.id}
numColumns={3}
/>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
</View>
</SafeAreaView>
const ExpenseCategory = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
{/* <View style={{justifyContent:'center', flexDirection:'column', marginHorizontal:35}}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#e63e00', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Ionics name="cart" size={50} color="white" style={{marginVertical:5, marginHorizontal:5}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginHorizontal:0, marginVertical:12}}>Shopping</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#00468b', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Icon name="graduation-cap" size={39} color="white" style={{marginVertical:10, marginHorizontal:5}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row',justifyContent:'flex-start',}}>
<Text style={{color:'black', fontSize:16, marginVertical:12}}>Education</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#ff8000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Ionics name="bus" size={50} color="white" style={{marginVertical:3, marginHorizontal:5}}/>
<View style={{flexDirection:'column', width:'110%'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16}}>Transportation</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#8b0000', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Ionics name="fast-food" size={45} color="white" style={{marginVertical:5, marginHorizontal:6}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginVertical:20, marginHorizontal:2}}>Food</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#228b22', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
<Ionics name="call" size={45} color="white" style={{marginTop:25, marginHorizontal:6}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start', marginTop:10}}>
<Text style={{color:'black', fontSize:16,}}>Telephone</Text>
</View>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#663399', elevation:8, justifyContent:'center', alignItems:'center', borderRadius:100, width:60, height:60, marginVertical:6}}>
<MaterialCommunityIcons name="receipt" size={30} color="white" style={{marginVertical:0, marginHorizontal:0}}
/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16}}>Bills</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
<TouchableOpacity style={{flexDirection:'row',justifyContent:'flex-start'}}>
<View style={{backgroundColor:'#ff74af', elevation:8, borderRadius:100, width:60, height:60, marginVertical:6}}>
<Icon name="medkit" size={40} color="white" style={{marginTop:7, marginHorizontal:9}}/>
<View style={{flexDirection:'column'}}>
<View style={{flexDirection:'row', justifyContent:'flex-start'}}>
<Text style={{color:'black', fontSize:16, marginVertical:15, marginHorizontal:8}}>Health</Text>
</View>
</View>
</View>
</TouchableOpacity>
</View>
</View> */}
<FlatList
data={EXP}
renderItem={renderItem2}
keyExtractor={item => item.id}
numColumns={3}
/>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
</View>
</SafeAreaView>
// this.setState(function(state, props){
// return{
// counter: state.counter + props.increment
// };
// });
const Transactions =()=> {
const [strAccSelected, setStrAccSelected] = useState('Account');
const [imgAccSelected, setImgAccSelected] = useState (wallet);
const [strCatSelected, setStrCatSelected] = useState('Category');
const [imgCatSelected, setImgCatSelected] = useState(tag);
//const [selectedLanguage, setSelectedLanguage] = useState();
const [text, onChangeText] = React.useState(null);
const [number, onChangeNumber] = React.useState(null);
......@@ -565,15 +262,15 @@ const Transactions =()=> {
const [selected, setSelected] = React.useState("");
const config: SelectConfig = {
fontSize: 18,
backgroundColor: 'white',
textColor: 'black',
selectedBackgroundColor: 'lightgrey',
selectedTextColor: 'grey',
selectedFontWeight: 'bold',
placeholderTextColor:'grey'
}
// const config: SelectConfig = {
// fontSize: 18,
// backgroundColor: 'white',
// textColor: 'black',
// selectedBackgroundColor: 'lightgrey',
// selectedTextColor: 'grey',
// selectedFontWeight: 'bold',
// placeholderTextColor:'grey'
// }
const currList = [
{text:'RM',value:'RM'},
......@@ -590,8 +287,97 @@ const Transactions =()=> {
const [selectedItem, setSelectedItem] = useState('');
const [income, setIncome] = useState(INC);
const [expense, setExpense] = useState(false);
const [selectAcc, setSelectAcc] = useState(false);
const renderItem = ({ item }) => (
<SafeAreaView>
<View style={{justifyContent:'space-between', flexDirection:'row', marginHorizontal:15, width:'110%'}}>
<TouchableOpacity style={{flexDirection:'row',marginBottom:10}} onPress={()=>{setStrAccSelected(item.title),setImgAccSelected(item.image)}}>
<View style = {{backgroundColor: 'transparent', borderWidth:1, borderColor:'lightgrey',borderRadius:100,width:40, height:40, marginLeft:10, marginRight:10,justifyContent:'space-between'}}>
<Ionics name={item.icon} size={25} color="#838383" style={{marginHorizontal:7, marginTop:6}}></Ionics></View>
<View style={{flexDirection:'row', justifyContent:'space-between',width:'45%'}}>
<Text style={{marginHorizontal:13, fontSize:18, marginTop:10, fontWeight:'600', color:'black', width:'145%'}}>{item.title}</Text>
<Text style={{fontSize:18,fontWeight:'600', color:'#006ad1', marginTop:10, marginRight:25}}>{item.balance}</Text>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
);
const renderItem1 = ({ item }) => (
<SafeAreaView>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
<TouchableOpacity style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}} onPress={()=>{setStrCatSelected(item.type), setImgCatSelected(item.image)}}>
<Image source={item.image} style={styles.img}/>
</TouchableOpacity>
</View>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
<Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
</View>
</SafeAreaView>
);
const renderItem2 = ({item}) =>(
<SafeAreaView>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10, width:100, marginHorizontal:14}}>
<TouchableOpacity style={{borderWidth:0.7, borderColor:'grey', borderRadius:100,width:50, height:50,}} onPress={()=>{setStrCatSelected(item.type), setImgCatSelected(item.image)}}>
<Image source={item.image} style={styles.img}/>
</TouchableOpacity>
</View>
<View style={{flex:1,flexDirection: 'column',alignItems: 'center',paddingLeft: 10,}}>
<Text style={{marginBottom:20, fontSize:16, color:'grey'}}>{item.type}</Text>
</View>
</SafeAreaView>
);
const YourAccount = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
<FlatList
data={ACC}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:200,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}
/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW ACCOUNT</Text>
</View>
</SafeAreaView>
const IncomeCategory = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
<FlatList
data={INC}
renderItem={renderItem1}
keyExtractor={item => item.id}
numColumns={3}
/>
<TouchableOpacity style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
</TouchableOpacity>
</SafeAreaView>
const ExpenseCategory = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select a category</Text>
<FlatList
data={EXP}
renderItem={renderItem2}
keyExtractor={item => item.id}
numColumns={3}
/>
<TouchableOpacity style ={{flexDirection:'row', backgroundColor:'transparent', width:205,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:95, marginTop:30, marginBottom:20}}>
<Ionics name="add-circle-outline" size={30} color="grey" style={{marginVertical:13, marginHorizontal:5}}/>
<Text style={[styles.textStyle, {marginTop:18, color:'grey', marginHorizontal:5}]}>ADD NEW CATEGORY</Text>
</TouchableOpacity>
</SafeAreaView>
return (
<View style= {styles.container}>
......@@ -642,8 +428,8 @@ const Transactions =()=> {
<YourAccount/>
</RBSheet>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:0}}>
<Ionics name="wallet" size={30} color="grey" style={{marginHorizontal:25, marginTop:10}}/>
<Text style={[styles.textStyle, {marginTop:15}]}>Account</Text>
<Image source={imgAccSelected} style={{width:35, height:35, marginHorizontal:20, marginTop:10}}></Image>
<Text style={[styles.textStyle, {marginTop:17}]}>{strAccSelected}</Text>
</View>
</TouchableOpacity>
<View style = {{flexDirection:'row', marginHorizontal:0,}}>
......@@ -674,25 +460,31 @@ const Transactions =()=> {
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:10}}>
<Ionics name="pricetag" size={30} color="grey" style={{marginHorizontal:25, marginTop:10}}/>
<Text style={[styles.textStyle, {marginTop:17}]}>Category</Text>
<Image source={imgCatSelected} style={{width:30, height:30, marginTop:15, marginHorizontal:20}}/>
<Text style={[styles.textStyle, {marginTop:17}]}>{strCatSelected}</Text>
</View>
</TouchableOpacity>
</View>
</View>
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:370, height:120, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:13, marginTop:10}}>
<TextInput style={{marginTop:3, fontSize:15, marginHorizontal: 20}} onChangeText={onChangeText} value={text} placeholder="Add Notes" placeholderTextColor={'grey'} fontSize={20}/>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
<View style ={{flexDirection:'row'}}>
<View style ={{flexDirection:'row',}}>
<Select
data={currList}
onSelect={value => setSelectedItem(value)}
value={selectedItem}
config={config}
// config={config}
width={110}
borderRadius={6}
borderColor={'grey'}
borderWidth={1.5}
placeholder="RM"
dropdownHeight={'auto'}
dropdownStyle={{elevation:7,marginHorizontal:15,}}
......@@ -754,7 +546,8 @@ const Transactions =()=> {
</View>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop:50}}>
<TouchableOpacity style={styles.saveButton} onPress>
<TouchableOpacity style={styles.saveButton}>
{/* onPress ={() => navigation.navigate("Dashboard")} */}
<Text style={{color:'white', fontWeight:'bold'}}>ADD</Text>
</TouchableOpacity>
</View>
......
mymoneymanager/screens/wishlists/index.js
View file @ f4825239
......@@ -7,6 +7,7 @@ import { NavigationContainer } from '../sidebar/index';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context';
const insurance = require ('../../images/insurance.png');
const car = require ('../../images/car.png');
const home = require ('../../images/home.png');
const tree = require ('../../images/tree.png');
......@@ -39,33 +40,33 @@ const handleButtonPress = () => {
id:'1',
title:'New Home',
image:require('../../images/home.png'),
date:'',
saved:'',
goal:'',
date:'01/04/2024',
saved:'RM300',
goal:'RM70,000',
},
{
id:'2',
title:'Holiday Trip',
image:require('../../images/tree.png'),
date:'',
saved:'',
goal:'',
date:'01/04/2024',
saved:'RM300',
goal:'RM70,000',
},
{
id:'3',
title:'Emergency Fund',
// image:require('../../images/tree.png'),
date:'',
saved:'',
goal:'',
image:require('../../images/insurance.png'),
date:'01/04/2024',
saved:'RM300',
goal:'RM70,000',
},
{
id:'4',
title:'Education',
// image:require('../../images/tree.png'),
date:'',
saved:'',
goal:'',
image:require ('../../images/education.png'),
date:'01/04/2024',
saved:'RM300',
goal:'RM70,000',
},
];
......
mymoneymanager/yarn.lock
View file @ f4825239
......@@ -733,6 +733,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
version "7.20.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
dependencies:
regenerator-runtime "^0.13.11"
"@babel/template@^7.0.0", "@babel/template@^7.18.10", "@babel/template@^7.3.3":
version "7.18.10"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
......@@ -1539,6 +1546,14 @@
resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
"@types/hoist-non-react-statics@^3.3.1":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/invariant@^2.2.35":
version "2.2.35"
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
......@@ -1627,6 +1642,11 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
"@types/use-sync-external-store@^0.0.3":
version "0.0.3"
resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
"@types/yargs-parser@*":
version "21.0.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
......@@ -5347,11 +5367,21 @@ lodash.isequal@4.5.0, lodash.isequal@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
lodash.isfunction@^3.0.9:
version "3.0.9"
resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
integrity sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==
lodash.ismatch@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
integrity sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==
lodash.isnil@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/lodash.isnil/-/lodash.isnil-4.0.0.tgz#49e28cd559013458c814c5479d3c663a21bfaa6c"
integrity sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==
lodash.isstring@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
......@@ -6617,7 +6647,7 @@ react-freeze@^1.0.0:
resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.1.0:
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.1.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
......@@ -6658,6 +6688,13 @@ react-native-btr@^2.2.0:
react-native-radio-buttons-group "^2.2.11"
react-native-vector-icons "^9.2.0"
react-native-button@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/react-native-button/-/react-native-button-3.0.1.tgz#89de59b6ee23f6cb4451c4ebe311cc14fb02c65a"
integrity sha512-Tkj7PwATNEXPOX4ubE+P8WnyJMenywU6Es/Bk2r2aR15204+AxSOEB3sp7JDP44LI+tUMetjudNBRRuKQOmoPw==
dependencies:
prop-types "^15.5.10"
react-native-chonse-select@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/react-native-chonse-select/-/react-native-chonse-select-1.0.5.tgz#c066c1981397f4251dda0c246bf4d7dc9d843ca8"
......@@ -6673,6 +6710,11 @@ react-native-codegen@^0.70.6:
jscodeshift "^0.13.1"
nullthrows "^1.1.1"
react-native-config@^1.4.11:
version "1.4.11"
resolved "https://registry.yarnpkg.com/react-native-config/-/react-native-config-1.4.11.tgz#f9ea08a8dffbe3fd4f2187d80d2594756526dee8"
integrity sha512-PdBFnfR3pljUNrJu4B2wiJ9TbAiz1J1WcG5KP8AFBqZi8ve5MV/CTCDnANaGrqhOxkBDJV73D/SrMENHe7TKBg==
react-native-customisable-alert@^0.1.20:
version "0.1.20"
resolved "https://registry.yarnpkg.com/react-native-customisable-alert/-/react-native-customisable-alert-0.1.20.tgz#af733b95e47ee4c98b98b3a065a4fd6c38d45e4c"
......@@ -6811,6 +6853,13 @@ react-native-modal@^13.0.1:
prop-types "^15.6.2"
react-native-animatable "1.3.3"
react-native-modalbox@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-native-modalbox/-/react-native-modalbox-2.0.2.tgz#8a7b3d2e7be79b5d1cb9530b2c6bc535b1bc8c66"
integrity sha512-uSuoZ+siPPNqWGyw8NXhA/Aots7mOx2+qijFoeovequY0kczZEPZDd0ARHbzg+1cE3H3AATJEwGdkVA8lUxs0g==
dependencies:
prop-types "^15.5.10"
react-native-modern-datepicker@^1.0.0-beta.91:
version "1.0.0-beta.91"
resolved "https://registry.yarnpkg.com/react-native-modern-datepicker/-/react-native-modern-datepicker-1.0.0-beta.91.tgz#11e65f9685743bda4e5af64388f39059adcaf110"
......@@ -6885,6 +6934,13 @@ react-native-reanimated@^2.10.0:
setimmediate "^1.0.5"
string-hash-64 "^1.0.3"
react-native-redux-alert@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/react-native-redux-alert/-/react-native-redux-alert-1.0.5.tgz#89fc5d81656e8791c91d1e0b26bc8264b156385b"
integrity sha512-CDd1nEBOQKKR58nTSsfWENEitRI+XaQFwWkOVYMourg6tgB2wDQhuNXziN3GawgA0T5BlgmgLVnjTtrhGuQtlg==
dependencies:
prop-types "^15.7.2"
react-native-safe-area-context@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.0.tgz#481c6815cc3d72e563b9d3fbfe2454180e86dd22"
......@@ -6955,6 +7011,16 @@ react-native-vector-icons@^9.2.0:
prop-types "^15.7.2"
yargs "^16.1.1"
react-native-version-check@^3.4.3:
version "3.4.3"
resolved "https://registry.yarnpkg.com/react-native-version-check/-/react-native-version-check-3.4.3.tgz#598a1a65d5edca6fe9acc6eba61b7b2e6ae77a25"
integrity sha512-E1FyaPR+sDwZAUzehV8q1tQQ8uZAS0pM49HEaXeYw+MHaf2mF8GFUPi3z2bwwN+kV2QHnCpRuPp4lcV6TVOuKw==
dependencies:
lodash.isfunction "^3.0.9"
lodash.isnil "^4.0.0"
lodash.pick "^4.4.0"
semver "^6.1.1"
react-native-virtualized-view@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-native-virtualized-view/-/react-native-virtualized-view-1.0.0.tgz#fd2129f1309d1ff4b9e869d5050e803640ca64c5"
......@@ -7010,6 +7076,18 @@ react-prop-types@^0.4.0:
dependencies:
warning "^3.0.0"
react-redux@^8.0.5:
version "8.0.5"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
dependencies:
"@babel/runtime" "^7.12.1"
"@types/hoist-non-react-statics" "^3.3.1"
"@types/use-sync-external-store" "^0.0.3"
hoist-non-react-statics "^3.3.2"
react-is "^18.0.0"
use-sync-external-store "^1.0.0"
react-refresh@^0.4.0:
version "0.4.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
......@@ -7135,6 +7213,13 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"
redux@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
dependencies:
"@babel/runtime" "^7.9.2"
regenerate-unicode-properties@^10.1.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
......@@ -7147,6 +7232,11 @@ regenerate@^1.4.2:
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
regenerator-runtime@^0.13.11:
version "0.13.11"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4:
version "0.13.9"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment