Skip to content

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

Change icon to image

parent f4825239
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 106 deletions
mymoneymanager/package.json
View file @ 113f09ef
......@@ -38,6 +38,7 @@
"react-native-customisable-alert": "^0.1.20",
"react-native-dropdown-select-list": "^1.0.23",
"react-native-elements": "^3.4.2",
"react-native-flatlist-picker": "^1.0.1",
"react-native-gesture-handler": "^2.7.0",
"react-native-hide-show-password-input": "^1.2.0",
"react-native-item-select": "^0.4.2",
......
mymoneymanager/screens/home/index.js
View file @ 113f09ef
......@@ -43,6 +43,10 @@ const coupon = require ('../../images/coupon.png');
const allowance = require ('../../images/salary.png');
const refund = require ('../../images/refund.png');
const edu = require ('../../images/education.png');
const walletacc = require ('../../images/walletacc.png');
const cashacc = require ('../../images/cashacc.png');
const debitacc = require ('../../images/debitacc.png');
const cardacc = require ('../../images/cardacc.png');
const Stack = createNativeStackNavigator();
// const navigation = useNavigation();
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
......@@ -69,7 +73,7 @@ const DATE ={
image:require('../../images/salary.png'),
account:'Card',
amount:'RM30.00',
icon:'card-outline',
image1:require ('../../images/cardacc.png')
},
{
id:"1",
......@@ -77,7 +81,7 @@ const DATE ={
image:require('../../images/medal.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
]
}
......@@ -91,7 +95,7 @@ const DATE ={
image:require('../../images/coupon.png'),
account:'Card',
amount:'RM30.00',
icon:'card-outline',
image1:require ('../../images/cardacc.png')
},
{
id:"3",
......@@ -99,7 +103,7 @@ const DATE ={
image:require('../../images/refund.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
{
id:"4",
......@@ -107,7 +111,7 @@ const DATE ={
image:require('../../images/cheque.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
]
}
......@@ -122,7 +126,7 @@ const DATE ={
account:'Card',
amount:'RM30.00',
amountCurrency:'Rp70,000',
icon:'card-outline',
image1:require ('../../images/cardacc.png')
},
{
id:"6",
......@@ -130,7 +134,7 @@ const DATE ={
image:require('../../images/sale.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
{
id:"7",
......@@ -138,7 +142,7 @@ const DATE ={
image:require('../../images/shoppingcart.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
]
}
......@@ -152,7 +156,7 @@ const DATE3 ={
image:require('../../images/education.png'),
account:'Card',
amount:'RM30.00',
icon:'cash-outline',
image1:require ('../../images/cardacc.png')
},
{
id:"9",
......@@ -160,7 +164,7 @@ const DATE3 ={
image:require('../../images/train.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
{
id:"10",
......@@ -168,7 +172,7 @@ const DATE3 ={
image:require('../../images/cutlery.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
{
id:"11",
......@@ -176,7 +180,7 @@ const DATE3 ={
image:require('../../images/phone.png'),
account:'Wallet',
amount:'RM100.00',
icon:'wallet-outline'
image1:require ('../../images/walletacc.png')
},
{
id:"12",
......@@ -184,15 +188,15 @@ const DATE3 ={
image:require('../../images/bill.png'),
account:'Cash',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/cashacc.png')
},
{
id:"13",
type:"Health",
image:require('../../images/firstaidkit.png'),
account:'Cash',
account:'Debit',
amount:'RM100.00',
icon:'cash-outline'
image1:require ('../../images/debitacc.png')
},
]
}
......@@ -208,7 +212,7 @@ const DATE3 ={
<View style={{marginBottom:15}}>
<Text style={[styles.textStyle1, {marginHorizontal:10}]}>{item.type}</Text>
<View style={{flexDirection:'row'}}>
<Ionics name={item.icon} size={20} color="#838383" style={{marginHorizontal:10}}></Ionics>
<Image source={item.image1} style={{marginHorizontal:10, width:20, height:20}}/>
<Text style={[styles.textStyle2, {marginHorizontal:0, marginVertical:3}]}>{item.account}</Text>
</View>
</View>
......
mymoneymanager/screens/transactions/index.js
View file @ 113f09ef
import React, { useEffect, useRef, useState, memo, Component } from "react";
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback,Button, View, Text, SectionList, Image, TouchableOpacity, TextInput, FlatList, ScrollView, SafeAreaView} from 'react-native';
import { KeyboardAvoidingView, Keyboard, TouchableWithoutFeedback, Picker,Button, View, Text, Image, TouchableOpacity, TextInput, FlatList, SafeAreaView} from 'react-native';
import DashboardScreen from '../home';
import styles from './style';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
......@@ -11,45 +11,52 @@ 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 FlatlistPicker from 'react-native-flatlist-picker';
// import Picker from "react-native-picker-select";
// 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';
// import SelectList from 'react-native-dropdown-select-list';
// import ReactNativeItemSelect from 'react-native-item-select';
const rent = require ('../../images/rent.png');
const card = require ('../../images/visa.png');
const salary = require ('../../images/cheque.png');
const motor = require('../../images/car.png');
const wallet = require ('../../images/wallet1.png');
const cash = require ('../../images/money.png');
const cart = require ('../../images/shoppingcart.png');
const health = require ('../../images/firstaidkit.png');
const sale = require ('../../images/sale.png');
const awards = require ('../../images/medal.png');
const less = require ('../../images/less.png');
const greater = require('../../images/greater.png');
const calendar = require('../../images/calendar.png');
const plus = require ('../../images/plus.png');
// const rent = require ('../../images/rent.png');
// const card = require ('../../images/visa.png');
// const salary = require ('../../images/cheque.png');
// const motor = require('../../images/car.png');
// const wallet = require ('../../images/wallet1.png');
// const cash = require ('../../images/money.png');
// const cart = require ('../../images/shoppingcart.png');
// const health = require ('../../images/firstaidkit.png');
// const sale = require ('../../images/sale.png');
// const awards = require ('../../images/medal.png');
// const less = require ('../../images/less.png');
// const greater = require('../../images/greater.png');
// const calendar = require('../../images/calendar.png');
// const plus = require ('../../images/plus.png');
const acc = require ('../../images/acc.png');
const tag = require ('../../images/tag.png');
const clear = require ('../../images/clear.png');
const debit = require('../../images/debit.png');
const addacc = require ('../../images/addacc.png');
const more = require('../../images/more.png');
const cutlery = require ('../../images/cutlery.png');
const edit = require ('../../images/pencil.png');
const bin = require ('../../images/delete.png');
const transport = require ('../../images/car.png');
const bill = require('../../images/bill.png');
const phone = require ('../../images/phone.png');
const allowance = require ('../../images/salary.png');
const refund = require ('../../images/refund.png');
const coupon = require ('../../images/coupon.png');
// const clear = require ('../../images/clear.png');
// const debit = require('../../images/debit.png');
// const addacc = require ('../../images/addacc.png');
// const more = require('../../images/more.png');
// const cutlery = require ('../../images/cutlery.png');
// const edit = require ('../../images/pencil.png');
// const bin = require ('../../images/delete.png');
// const transport = require ('../../images/car.png');
// const bill = require('../../images/bill.png');
// const phone = require ('../../images/phone.png');
// const allowance = require ('../../images/salary.png');
// const refund = require ('../../images/refund.png');
// const coupon = require ('../../images/coupon.png');
const drop = require ('../../images/drop.png');
const tickmark = require ('../../images/tickmark.png');
// const tickmark = require ('../../images/tickmark.png');
// const walletacc = require ('../../images/walletacc.png');
// const cashacc = require ('../../images/cashacc.png');
// const debitacc = require ('../../images/debitacc.png');
// const cardacc = require ('../../images/cardacc.png');
const onPress = () => console.log('press');
const todayDate = moment().utcOffset('+08.00').format('MMM DD, YYYY');
const todayTime = moment().utcOffset('+08.00').format('LT');
......@@ -64,26 +71,26 @@ const ACC = [
{
id:'0',
title:'Cash',
icon:'cash-outline',
image:require ('../../images/cashacc.png'),
balance:'RM600.00',
},
{
id:'1',
title:'Card',
icon:'card-outline',
image:require ('../../images/cardacc.png'),
balance:'RM600.00',
},
{
id:'2',
title:'Wallet',
icon:'wallet-outline',
image:require ('../../images/walletacc.png'),
balance:'RM600.00',
},
{
id:'3',
title:'Debit',
icon:'card-sharp',
image:require ('../../images/debitacc.png'),
balance:'RM600.00',
},
];
......@@ -213,15 +220,26 @@ const EXP = [
// };
// });
const CURRENCY = [
{label:'RM',value:'RM'},
// {label:'USD',value:'USD'},
// {label:'KRW',value:'KRW'},
// {label:'EURO',value:'EURO'},
// {label:'RM',value:'RM'},
// {label:'USD',value:'USD'},
// {label:'KRW',value:'KRW'},
// {label:'EURO',value:'EURO'},
];
const Transactions =()=> {
const [strAccSelected, setStrAccSelected] = useState('Account');
const [imgAccSelected, setImgAccSelected] = useState (wallet);
const [imgAccSelected, setImgAccSelected] = useState (acc);
const [strCatSelected, setStrCatSelected] = useState('Category');
const [imgCatSelected, setImgCatSelected] = useState(tag);
const [strCurrSelected, setStrCurrSelected] = useState('RM');
// const [isFocus, setIsFocus] = useState(false);
// const [selected, setSelected] = React.useState("");
//const [selectedLanguage, setSelectedLanguage] = useState();
const [text, onChangeText] = React.useState(null);
const [number, onChangeNumber] = React.useState(null);
......@@ -260,44 +278,37 @@ const Transactions =()=> {
hideTimePicker();
};
const [selected, setSelected] = React.useState("");
// const [selectedItem, setSelectedItem] = useState('');
// const config: SelectConfig = {
// fontSize: 18,
// backgroundColor: 'white',
// textColor: 'black',
// selectedBackgroundColor: 'lightgrey',
// selectedTextColor: 'grey',
// selectedFontWeight: 'bold',
// placeholderTextColor:'grey'
// }
const [income, setIncome] = useState(INC);
const currList = [
{text:'RM',value:'RM'},
{text:'USD',value:'USD'},
{text:'KRW',value:'KRW'},
{text:'EURO',value:'EURO'},
// {text:'RM',value:'RM'},
// {text:'USD',value:'USD'},
// {text:'KRW',value:'KRW'},
// {text:'EURO',value:'EURO'},
];
const [expense, setExpense] = useState(false);
// const [selectAcc, setSelectAcc] = useState(false);
const [selectedItem, setSelectedItem] = useState('');
// const [blnPicker, setBlnPicker] = useState(true);
const [income, setIncome] = useState(INC);
// const blnPicker = () => {
// setBlnPicker(true);
// };
const [expense, setExpense] = useState(false);
const [selectAcc, setSelectAcc] = useState(false);
const renderCurrency = ({ item }) => (
<SafeAreaView>
<TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>{setStrCurrSelected(item.label)}}>
<Text style={{marginTop:22, fontSize:25, marginHorizontal:5}}>{item.label}</Text>
<Image style={{width:15, height:15, marginHorizontal:33, marginTop:30}} source={drop}></Image>
</TouchableOpacity>
</SafeAreaView>
);
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>
<Image style={{width:25,height:25, marginHorizontal:7, marginTop:6}} source={item.image}/></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>
......@@ -333,6 +344,7 @@ const Transactions =()=> {
</SafeAreaView>
);
const YourAccount = () =>
<SafeAreaView>
<Text style={{fontSize:20, fontWeight:'600', marginTop:10, justifyContent:'center', marginHorizontal:125, marginBottom:20}}>Select an account</Text>
......@@ -342,11 +354,11 @@ const Transactions =()=> {
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}}>
<TouchableOpacity 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>
</TouchableOpacity>
</SafeAreaView>
const IncomeCategory = () =>
......@@ -379,6 +391,49 @@ const Transactions =()=> {
</TouchableOpacity>
</SafeAreaView>
// onPress={()=>{setStrCurrSelected}}
// const showTimePicker = () => {
// setTimePickerVisibility(true);
// };
{/* <DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/> <DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>*/}
const ListCurrency = () => {
if (setBlnPicker){
return(
<FlatList
data={CURRENCY}
renderItem={renderCurrency}
keyExtractor={item => item.id}
/>
// {/* <FlatlistPicker
// data={CURRENCY}
// renderItem={renderCurrency}
// keyExtractor={item => item.id}
// containerStyle={styles.containerBox}
// dropdownStyle={{width:180}}
// dropdownTextStyle={{fontSize: 15}}
// /> */}
);
};
};
return (
<View style= {styles.container}>
<View style = {{flexDirection:'row', justifyContent:'flex-start', width:'100%', marginTop:30}}>
......@@ -428,7 +483,7 @@ const Transactions =()=> {
<YourAccount/>
</RBSheet>
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:0}}>
<Image source={imgAccSelected} style={{width:35, height:35, marginHorizontal:20, marginTop:10}}></Image>
<Image source={imgAccSelected} style={{width:30, height:30, marginHorizontal:23, marginTop:13}}></Image>
<Text style={[styles.textStyle, {marginTop:17}]}>{strAccSelected}</Text>
</View>
</TouchableOpacity>
......@@ -460,43 +515,39 @@ const Transactions =()=> {
<View style ={{flexDirection:'row', backgroundColor:'transparent', width:180,height:60, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginHorizontal:10}}>
<Image source={imgCatSelected} style={{width:30, height:30, marginTop:15, marginHorizontal:20}}/>
<Image source={imgCatSelected} style={{width:25, height:25, marginTop:15, marginHorizontal:15}}/>
<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',}}>
<Select
data={currList}
onSelect={value => setSelectedItem(value)}
value={selectedItem}
// config={config}
width={110}
borderRadius={6}
borderColor={'grey'}
borderWidth={1.5}
placeholder="RM"
dropdownHeight={'auto'}
dropdownStyle={{elevation:7,marginHorizontal:15,}}
// defaultOption={{text:'RM', value:'RM'}}
/>
<View style ={{flexDirection:'row',backgroundColor:'transparent', width:270, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10}}>
<TouchableOpacity style ={{flexDirection:'row',backgroundColor:'transparent', width:100, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:13}} onPress={()=>{}}>
<Text style={{marginTop:22, fontSize:25, marginHorizontal:5}}>{strCurrSelected}</Text>
<Image style={{width:15, height:15, marginHorizontal:33, marginTop:30}} source={drop}></Image>
</TouchableOpacity>
{/*
<TouchableOpacity>
<Flatlist
data={CURRENCY}
renderItem={renderCurrency}
keyExtractor={item => item.id}
/>
</TouchableOpacity> */}
<View style ={{flexDirection:'row',backgroundColor:'transparent', width:"65%", height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginRight:10}}>
<TextInput style={{marginTop:7, fontSize:15, marginHorizontal:5}} onChangeNumber={onChangeNumber} value={number} placeholder="0" placeholderTextColor={'grey'} keyboardType="numeric" fontSize={30}></TextInput>
</View>
{/* <TouchableOpacity style= {{flexDirection:'row'}}>
{/* <TouchableOpacity style= {{flexDirection:'row'}}>
<View style={{flexDirection:'row',backgroundColor:'transparent', width:90, height:80, borderWidth:1.5, borderColor:'grey', borderRadius:6, marginTop:10, marginHorizontal:12}}>
<Text style={[styles.textStyle, {marginTop:18, fontSize:30, marginHorizontal: 15,}]}>RM</Text>
<Image style={{width:10, height:10, marginTop:32,}} source={drop}></Image>
......@@ -530,8 +581,8 @@ const Transactions =()=> {
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirmDate}
onCancel={hideDatePicker}/>
onCancel={hideDatePicker}
/>
<Text style ={[styles.textStyle,{marginHorizontal:52, marginTop:3,}]}>{confirmDate}</Text>
</TouchableOpacity>
......
mymoneymanager/screens/transactions/style.js
View file @ 113f09ef
......@@ -85,5 +85,19 @@ const styles = StyleSheet.create ({
marginHorizontal:9,
marginTop:9,
},
containerBox:{
borderWidth: 1,
borderColor: '#CECECE',
width: 250,
height: 50,
alignSelf: 'center',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
marginTop: 30,
padding: 5,
},
});
export default styles;
\ No newline at end of file
mymoneymanager/yarn.lock
View file @ 113f09ef
......@@ -6743,6 +6743,14 @@ react-native-elements@^3.4.2:
react-native-ratings "8.0.4"
react-native-size-matters "^0.3.1"
react-native-flatlist-picker@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-native-flatlist-picker/-/react-native-flatlist-picker-1.0.1.tgz#eeac38f06939e655aa4eb50a711476a8ce3efe86"
integrity sha512-IXgnce/pHRU2+tlozQt+qqviabQEALJ4mXSF0//Ud1nm74QbhRP//h5mCzdWAhOTAsfQ07vTQP6pzV8YDksmaQ==
dependencies:
prop-types "^15.6.0"
react-native-vector-icons "^6.6.0"
react-native-gesture-handler@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.7.0.tgz#53ad828add926c8e025f68ea581758c0f8893054"
......@@ -6989,6 +6997,15 @@ react-native-tab-view@^3.1.1:
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz#1f8d7a835ab4f5b1b1407ec8dddc1053b53fa3c6"
integrity sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw==
react-native-vector-icons@^6.6.0:
version "6.7.0"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-6.7.0.tgz#8871ba52ef8e98878ba7a932847f96b6dfc1c137"
integrity sha512-LKdwqDIGVxV1+4HnmFIPaok9hba3WyTQ7H2Wj5RFv54zIdIjixrAiV9VD/Ej9Mc5/rUhTpmMiIVF3LVmVYD7dg==
dependencies:
lodash "^4.17.15"
prop-types "^15.7.2"
yargs "^15.0.2"
react-native-vector-icons@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-7.1.0.tgz#145487d617b2a81d395d2cf64e6e065fcab3a454"
......
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