{ "name": "spendo", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.19.3", "@react-native-firebase/app": "^18.5.0", "@react-native-firebase/auth": "^18.5.0", "@react-native-firebase/firestore": "^18.5.0", "@react-navigation/bottom-tabs": "^6.5.9", "@react-navigation/native": "^6.1.8", "@react-navigation/native-stack": "^6.9.14", "@reduxjs/toolkit": "^1.9.7", "react": "18.2.0", "react-native": "0.72.5", "react-native-chart-kit": "^6.12.0", "react-native-gesture-handler": "^2.13.1", "react-native-safe-area-context": "^4.7.2", "react-native-screens": "^3.25.0", "react-native-svg": "^13.14.0", "react-native-vector-icons": "^10.0.0", "react-redux": "^8.1.3", "redux-persist": "^6.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-native-vector-icons": "^6.4.15", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } } /** * @format */ import {AppRegistry} from 'react-native'; import App from './src/App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); { "name": "spendo", "displayName": "Spendo" } import React, {useEffect} from 'react'; import {StatusBar} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {Provider} from 'react-redux'; import {PersistGate} from 'redux-persist/integration/react'; import {store, persistor} from './redux/store'; import RootNavigator from './navigation/RootNavigator'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import {Colors} from './constants/styles'; const App = () => { return ( ); }; export default App; export const Colors = { primary: '#3498db', // Blue for primary actions and highlights secondary: '#2ecc71', // Green for positive indicators (income, savings) danger: '#e74c3c', // Red for negative indicators (expenses, alerts) warning: '#f39c12', // Orange for warnings background: '#f5f5f5', // Light gray for backgrounds card: '#ffffff', // White for cards text: '#2c3e50', // Dark blue-gray for text textLight: '#7f8c8d', // Light gray for secondary text border: '#dfe6e9', // Light gray for borders shadow: '#000000', // Black for shadows investment: '#9b59b6', // Purple for investments inactive: '#bdc3c7', // Light gray for inactive elements }; export const Typography = { fontSizeSmall: 12, fontSizeRegular: 14, fontSizeMedium: 16, fontSizeLarge: 18, fontSizeXLarge: 24, fontSizeXXLarge: 32, fontWeightLight: '300', fontWeightRegular: '400', fontWeightMedium: '500', fontWeightBold: '700', }; export const Spacing = { xs: 4, s: 8, m: 16, l: 24, xl: 32, xxl: 48, }; export const BorderRadius = { small: 4, medium: 8, large: 16, round: 999, }; export const Shadow = { small: { shadowColor: Colors.shadow, shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.1, shadowRadius: 3, elevation: 2, }, medium: { shadowColor: Colors.shadow, shadowOffset: { width: 0, height: 4, }, shadowOpacity: 0.15, shadowRadius: 6, elevation: 4, }, large: { shadowColor: Colors.shadow, shadowOffset: { width: 0, height: 8, }, shadowOpacity: 0.2, shadowRadius: 12, elevation: 8, }, }; import {configureStore, combineReducers} from '@reduxjs/toolkit'; import {persistStore, persistReducer} from 'redux-persist'; import AsyncStorage from '@react-native-async-storage/async-storage'; import authReducer from './slices/authSlice'; import incomeReducer from './slices/incomeSlice'; import expenseReducer from './slices/expenseSlice'; import investmentReducer from './slices/investmentSlice'; import alertReducer from './slices/alertSlice'; import statsReducer from './slices/statsSlice'; const persistConfig = { key: 'root', storage: AsyncStorage, whitelist: ['auth'], // Only persist auth state }; const rootReducer = combineReducers({ auth: authReducer, income: incomeReducer, expense: expenseReducer, investment: investmentReducer, alert: alertReducer, stats: statsReducer, }); const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false, }), }); export const persistor = persistStore(store); export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit'; import auth from '@react-native-firebase/auth'; import firestore from '@react-native-firebase/firestore'; interface User { uid: string; email: string | null; username: string | null; } interface AuthState { user: User | null; isLoading: boolean; error: string | null; } const initialState: AuthState = { user: null, isLoading: false, error: null, }; export const registerUser = createAsyncThunk( 'auth/registerUser', async ( { email, password, username, }: {email: string; password: string; username: string}, {rejectWithValue}, ) => { try { const userCredential = await auth().createUserWithEmailAndPassword( email, password, ); // Create user profile in Firestore await firestore().collection('users').doc(userCredential.user.uid).set({ email, username, createdAt: firestore.FieldValue.serverTimestamp(), }); return { uid: userCredential.user.uid, email: userCredential.user.email, username, }; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const loginUser = createAsyncThunk( 'auth/loginUser', async ( {email, password}: {email: string; password: string}, {rejectWithValue}, ) => { try { const userCredential = await auth().signInWithEmailAndPassword( email, password, ); // Get user profile from Firestore const userDoc = await firestore() .collection('users') .doc(userCredential.user.uid) .get(); const userData = userDoc.data(); return { uid: userCredential.user.uid, email: userCredential.user.email, username: userData?.username || null, }; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const logoutUser = createAsyncThunk( 'auth/logoutUser', async (_, {rejectWithValue}) => { try { await auth().signOut(); return null; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const updateUserProfile = createAsyncThunk( 'auth/updateUserProfile', async ( { uid, username, email, }: {uid: string; username?: string; email?: string}, {rejectWithValue}, ) => { try { const updateData: {username?: string; email?: string} = {}; if (username) { updateData.username = username; } if (email) { updateData.email = email; // Update email in Firebase Auth await auth().currentUser?.updateEmail(email); } // Update in Firestore await firestore().collection('users').doc(uid).update(updateData); return {uid, ...updateData}; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const updatePassword = createAsyncThunk( 'auth/updatePassword', async ( {newPassword}: {newPassword: string}, {rejectWithValue}, ) => { try { const user = auth().currentUser; if (!user) { throw new Error('User not authenticated'); } await user.updatePassword(newPassword); return true; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const resetPassword = createAsyncThunk( 'auth/resetPassword', async ({email}: {email: string}, {rejectWithValue}) => { try { await auth().sendPasswordResetEmail(email); return true; } catch (error: any) { return rejectWithValue(error.message); } }, ); const authSlice = createSlice({ name: 'auth', initialState, reducers: { clearError: state => { state.error = null; }, }, extraReducers: builder => { builder // Register .addCase(registerUser.pending, state => { state.isLoading = true; state.error = null; }) .addCase(registerUser.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.user = action.payload; }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Login .addCase(loginUser.pending, state => { state.isLoading = true; state.error = null; }) .addCase(loginUser.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.user = action.payload; }) .addCase(loginUser.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Logout .addCase(logoutUser.pending, state => { state.isLoading = true; }) .addCase(logoutUser.fulfilled, state => { state.isLoading = false; state.user = null; }) .addCase(logoutUser.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Update Profile .addCase(updateUserProfile.pending, state => { state.isLoading = true; state.error = null; }) .addCase(updateUserProfile.fulfilled, (state, action) => { state.isLoading = false; if (state.user && action.payload) { state.user = {...state.user, ...action.payload}; } }) .addCase(updateUserProfile.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Update Password .addCase(updatePassword.pending, state => { state.isLoading = true; state.error = null; }) .addCase(updatePassword.fulfilled, state => { state.isLoading = false; }) .addCase(updatePassword.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Reset Password .addCase(resetPassword.pending, state => { state.isLoading = true; state.error = null; }) .addCase(resetPassword.fulfilled, state => { state.isLoading = false; }) .addCase(resetPassword.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }); }, }); export const {clearError} = authSlice.actions; export default authSlice.reducer; import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit'; import firestore from '@react-native-firebase/firestore'; import {RootState} from '../store'; export interface Income { id: string; amount: number; description: string; date: string; category: string; } interface IncomeState { items: Income[]; isLoading: boolean; error: string | null; totalIncome: number; } const initialState: IncomeState = { items: [], isLoading: false, error: null, totalIncome: 0, }; export const fetchIncomes = createAsyncThunk( 'income/fetchIncomes', async (_, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const incomesSnapshot = await firestore() .collection('users') .doc(auth.user.uid) .collection('incomes') .orderBy('date', 'desc') .get(); const incomes = incomesSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data(), })) as Income[]; return incomes; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const addIncome = createAsyncThunk( 'income/addIncome', async ( income: Omit, {getState, rejectWithValue, dispatch}, ) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const incomeRef = await firestore() .collection('users') .doc(auth.user.uid) .collection('incomes') .add({ ...income, date: income.date || new Date().toISOString(), }); const newIncome: Income = { id: incomeRef.id, ...income, }; // Refresh stats after adding income dispatch(fetchIncomes()); return newIncome; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const deleteIncome = createAsyncThunk( 'income/deleteIncome', async (id: string, {getState, rejectWithValue, dispatch}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } await firestore() .collection('users') .doc(auth.user.uid) .collection('incomes') .doc(id) .delete(); // Refresh stats after deleting income dispatch(fetchIncomes()); return id; } catch (error: any) { return rejectWithValue(error.message); } }, ); const incomeSlice = createSlice({ name: 'income', initialState, reducers: {}, extraReducers: builder => { builder // Fetch Incomes .addCase(fetchIncomes.pending, state => { state.isLoading = true; state.error = null; }) .addCase( fetchIncomes.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = action.payload; state.totalIncome = action.payload.reduce( (sum, income) => sum + income.amount, 0, ); }, ) .addCase(fetchIncomes.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Add Income .addCase(addIncome.pending, state => { state.isLoading = true; state.error = null; }) .addCase(addIncome.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = [action.payload, ...state.items]; state.totalIncome += action.payload.amount; }) .addCase(addIncome.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Delete Income .addCase(deleteIncome.pending, state => { state.isLoading = true; state.error = null; }) .addCase(deleteIncome.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; const deletedIncome = state.items.find( income => income.id === action.payload, ); if (deletedIncome) { state.totalIncome -= deletedIncome.amount; } state.items = state.items.filter(income => income.id !== action.payload); }) .addCase(deleteIncome.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }); }, }); export default incomeSlice.reducer; import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit'; import firestore from '@react-native-firebase/firestore'; import {RootState} from '../store'; export interface Expense { id: string; amount: number; description: string; date: string; category: string; } interface ExpenseState { items: Expense[]; isLoading: boolean; error: string | null; totalExpense: number; } const initialState: ExpenseState = { items: [], isLoading: false, error: null, totalExpense: 0, }; export const fetchExpenses = createAsyncThunk( 'expense/fetchExpenses', async (_, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const expensesSnapshot = await firestore() .collection('users') .doc(auth.user.uid) .collection('expenses') .orderBy('date', 'desc') .get(); const expenses = expensesSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data(), })) as Expense[]; return expenses; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const addExpense = createAsyncThunk( 'expense/addExpense', async ( expense: Omit, {getState, rejectWithValue, dispatch}, ) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const expenseRef = await firestore() .collection('users') .doc(auth.user.uid) .collection('expenses') .add({ ...expense, date: expense.date || new Date().toISOString(), }); const newExpense: Expense = { id: expenseRef.id, ...expense, }; // Refresh stats after adding expense dispatch(fetchExpenses()); return newExpense; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const deleteExpense = createAsyncThunk( 'expense/deleteExpense', async (id: string, {getState, rejectWithValue, dispatch}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } await firestore() .collection('users') .doc(auth.user.uid) .collection('expenses') .doc(id) .delete(); // Refresh stats after deleting expense dispatch(fetchExpenses()); return id; } catch (error: any) { return rejectWithValue(error.message); } }, ); const expenseSlice = createSlice({ name: 'expense', initialState, reducers: {}, extraReducers: builder => { builder // Fetch Expenses .addCase(fetchExpenses.pending, state => { state.isLoading = true; state.error = null; }) .addCase( fetchExpenses.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = action.payload; state.totalExpense = action.payload.reduce( (sum, expense) => sum + expense.amount, 0, ); }, ) .addCase(fetchExpenses.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Add Expense .addCase(addExpense.pending, state => { state.isLoading = true; state.error = null; }) .addCase( addExpense.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = [action.payload, ...state.items]; state.totalExpense += action.payload.amount; }, ) .addCase(addExpense.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Delete Expense .addCase(deleteExpense.pending, state => { state.isLoading = true; state.error = null; }) .addCase( deleteExpense.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; const deletedExpense = state.items.find( expense => expense.id === action.payload, ); if (deletedExpense) { state.totalExpense -= deletedExpense.amount; } state.items = state.items.filter( expense => expense.id !== action.payload, ); }, ) .addCase(deleteExpense.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }); }, }); export default expenseSlice.reducer; import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit'; import firestore from '@react-native-firebase/firestore'; import {RootState} from '../store'; export interface Investment { id: string; amount: number; description: string; date: string; type: string; // 'Bank' | 'Gold' | 'Crypto' | etc. } interface InvestmentState { items: Investment[]; isLoading: boolean; error: string | null; totalInvestment: number; } const initialState: InvestmentState = { items: [], isLoading: false, error: null, totalInvestment: 0, }; export const fetchInvestments = createAsyncThunk( 'investment/fetchInvestments', async (_, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const investmentsSnapshot = await firestore() .collection('users') .doc(auth.user.uid) .collection('investments') .orderBy('date', 'desc') .get(); const investments = investmentsSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data(), })) as Investment[]; return investments; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const addInvestment = createAsyncThunk( 'investment/addInvestment', async ( investment: Omit, {getState, rejectWithValue, dispatch}, ) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const investmentRef = await firestore() .collection('users') .doc(auth.user.uid) .collection('investments') .add({ ...investment, date: investment.date || new Date().toISOString(), }); const newInvestment: Investment = { id: investmentRef.id, ...investment, }; // Refresh stats after adding investment dispatch(fetchInvestments()); return newInvestment; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const deleteInvestment = createAsyncThunk( 'investment/deleteInvestment', async (id: string, {getState, rejectWithValue, dispatch}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } await firestore() .collection('users') .doc(auth.user.uid) .collection('investments') .doc(id) .delete(); // Refresh stats after deleting investment dispatch(fetchInvestments()); return id; } catch (error: any) { return rejectWithValue(error.message); } }, ); const investmentSlice = createSlice({ name: 'investment', initialState, reducers: {}, extraReducers: builder => { builder // Fetch Investments .addCase(fetchInvestments.pending, state => { state.isLoading = true; state.error = null; }) .addCase( fetchInvestments.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = action.payload; state.totalInvestment = action.payload.reduce( (sum, investment) => sum + investment.amount, 0, ); }, ) .addCase(fetchInvestments.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Add Investment .addCase(addInvestment.pending, state => { state.isLoading = true; state.error = null; }) .addCase( addInvestment.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = [action.payload, ...state.items]; state.totalInvestment += action.payload.amount; }, ) .addCase(addInvestment.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Delete Investment .addCase(deleteInvestment.pending, state => { state.isLoading = true; state.error = null; }) .addCase( deleteInvestment.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; const deletedInvestment = state.items.find( investment => investment.id === action.payload, ); if (deletedInvestment) { state.totalInvestment -= deletedInvestment.amount; } state.items = state.items.filter( investment => investment.id !== action.payload, ); }, ) .addCase(deleteInvestment.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }); }, }); export default investmentSlice.reducer; import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit'; import firestore from '@react-native-firebase/firestore'; import {RootState} from '../store'; export interface Alert { id: string; message: string; type: 'expense_increase' | 'income_decrease' | 'savings_decrease'; date: string; read: boolean; } interface AlertState { items: Alert[]; isLoading: boolean; error: string | null; unreadCount: number; } const initialState: AlertState = { items: [], isLoading: false, error: null, unreadCount: 0, }; export const fetchAlerts = createAsyncThunk( 'alert/fetchAlerts', async (_, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const alertsSnapshot = await firestore() .collection('users') .doc(auth.user.uid) .collection('alerts') .orderBy('date', 'desc') .get(); const alerts = alertsSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data(), })) as Alert[]; return alerts; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const markAlertAsRead = createAsyncThunk( 'alert/markAlertAsRead', async (id: string, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } await firestore() .collection('users') .doc(auth.user.uid) .collection('alerts') .doc(id) .update({ read: true, }); return id; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const markAllAlertsAsRead = createAsyncThunk( 'alert/markAllAlertsAsRead', async (_, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; const {alert} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } const batch = firestore().batch(); alert.items.forEach(item => { if (!item.read) { const alertRef = firestore() .collection('users') .doc(auth.user!.uid) .collection('alerts') .doc(item.id); batch.update(alertRef, {read: true}); } }); await batch.commit(); return true; } catch (error: any) { return rejectWithValue(error.message); } }, ); export const deleteAlert = createAsyncThunk( 'alert/deleteAlert', async (id: string, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } await firestore() .collection('users') .doc(auth.user.uid) .collection('alerts') .doc(id) .delete(); return id; } catch (error: any) { return rejectWithValue(error.message); } }, ); const alertSlice = createSlice({ name: 'alert', initialState, reducers: {}, extraReducers: builder => { builder // Fetch Alerts .addCase(fetchAlerts.pending, state => { state.isLoading = true; state.error = null; }) .addCase( fetchAlerts.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; state.items = action.payload; state.unreadCount = action.payload.filter(alert => !alert.read).length; }, ) .addCase(fetchAlerts.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Mark Alert as Read .addCase(markAlertAsRead.pending, state => { state.isLoading = true; state.error = null; }) .addCase( markAlertAsRead.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; const alertIndex = state.items.findIndex( alert => alert.id === action.payload, ); if (alertIndex !== -1) { const alert = state.items[alertIndex]; if (!alert.read) { state.items[alertIndex] = {...alert, read: true}; state.unreadCount -= 1; } } }, ) .addCase(markAlertAsRead.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Mark All Alerts as Read .addCase(markAllAlertsAsRead.pending, state => { state.isLoading = true; state.error = null; }) .addCase(markAllAlertsAsRead.fulfilled, state => { state.isLoading = false; state.items = state.items.map(alert => ({...alert, read: true})); state.unreadCount = 0; }) .addCase(markAllAlertsAsRead.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }) // Delete Alert .addCase(deleteAlert.pending, state => { state.isLoading = true; state.error = null; }) .addCase( deleteAlert.fulfilled, (state, action: PayloadAction) => { state.isLoading = false; const deletedAlert = state.items.find( alert => alert.id === action.payload, ); if (deletedAlert && !deletedAlert.read) { state.unreadCount -= 1; } state.items = state.items.filter( alert => alert.id !== action.payload, ); }, ) .addCase(deleteAlert.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }); }, }); export default alertSlice.reducer; import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit'; import firestore from '@react-native-firebase/firestore'; import {RootState} from '../store'; export interface MonthlyStats { month: string; // Format: 'YYYY-MM' income: number; expense: number; savings: number; investment: number; } interface StatsState { monthlyStats: MonthlyStats[]; isLoading: boolean; error: string | null; currentMonthStats: MonthlyStats | null; } const initialState: StatsState = { monthlyStats: [], isLoading: false, error: null, currentMonthStats: null, }; export const fetchMonthlyStats = createAsyncThunk( 'stats/fetchMonthlyStats', async (_, {getState, rejectWithValue}) => { try { const {auth} = getState() as RootState; if (!auth.user?.uid) { throw new Error('User not authenticated'); } // Get current month in YYYY-MM format const now = new Date(); const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`; // Get last 6 months const months = []; for (let i = 0; i < 6; i++) { const date = new Date(now.getFullYear(), now.getMonth() - i, 1); const monthStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`; months.push(monthStr); } // Get stats for each month const statsPromises = months.map(async month => { const startDate = new Date(`${month}-01T00:00:00.000Z`); const endMonth = parseInt(month.split('-')[1], 10); const endYear = parseInt(month.split('-')[0], 10); const endDate = new Date(endYear, endMonth, 0, 23, 59, 59, 999); // Last day of month // Get income for the month const incomeSnapshot = await firestore() .collection('users') .doc(auth.user!.uid) .collection('incomes') .where('date', '>=', startDate.toISOString()) .where('date', '<=', endDate.toISOString()) .get(); const income = incomeSnapshot.docs.reduce( (sum, doc) => sum + (doc.data().amount || 0), 0, ); // Get expenses for the month const expenseSnapshot = await firestore() .collection('users') .doc(auth.user!.uid) .collection('expenses') .where('date', '>=', startDate.toISOString()) .where('date', '<=', endDate.toISOString()) .get(); const expense = expenseSnapshot.docs.reduce( (sum, doc) => sum + (doc.data().amount || 0), 0, ); // Get investments for the month const investmentSnapshot = await firestore() .collection('users') .doc(auth.user!.uid) .collection('investments') .where('date', '>=', startDate.toISOString()) .where('date', '<=', endDate.toISOString()) .get(); const investment = investmentSnapshot.docs.reduce( (sum, doc) => sum + (doc.data().amount || 0), 0, ); // Calculate savings const savings = income - expense - investment; return { month, income, expense, savings, investment, }; }); const stats = await Promise.all(statsPromises); // Find current month stats const currentMonthStats = stats.find(stat => stat.month === currentMonth) || null; return { monthlyStats: stats, currentMonthStats, }; } catch (error: any) { return rejectWithValue(error.message); } }, ); const statsSlice = createSlice({ name: 'stats', initialState, reducers: {}, extraReducers: builder => { builder .addCase(fetchMonthlyStats.pending, state => { state.isLoading = true; state.error = null; }) .addCase(fetchMonthlyStats.fulfilled, (state, action) => { state.isLoading = false; state.monthlyStats = action.payload.monthlyStats; state.currentMonthStats = action.payload.currentMonthStats; }) .addCase(fetchMonthlyStats.rejected, (state, action) => { state.isLoading = false; state.error = action.payload as string; }); }, }); export default statsSlice.reducer; import React, {useEffect} from 'react'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {useSelector} from 'react-redux'; import {RootState} from '../redux/store'; import SplashScreen from '../screens/SplashScreen'; import LoginScreen from '../screens/auth/LoginScreen'; import RegisterScreen from '../screens/auth/RegisterScreen'; import ForgotPasswordScreen from '../screens/auth/ForgotPasswordScreen'; import MainTabNavigator from './MainTabNavigator'; const Stack = createNativeStackNavigator(); const RootNavigator = () => { const {user, isLoading} = useSelector((state: RootState) => state.auth); // If we're loading the auth state, show splash screen if (isLoading) { return ; } return ( {user ? ( // User is signed in ) : ( // User is not signed in <> )} ); }; export default RootNavigator; import React from 'react'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {useSelector} from 'react-redux'; import {RootState} from '../redux/store'; import HomeScreen from '../screens/main/HomeScreen'; import WalletScreen from '../screens/main/WalletScreen'; import InvestmentsScreen from '../screens/main/InvestmentsScreen'; import StatisticsScreen from '../screens/main/StatisticsScreen'; import SettingsScreen from '../screens/main/SettingsScreen'; import AlertsScreen from '../screens/main/AlertsScreen'; import EditProfileScreen from '../screens/main/EditProfileScreen'; import ChangePasswordScreen from '../screens/main/ChangePasswordScreen'; import {Colors} from '../constants/styles'; import {View, Text, StyleSheet} from 'react-native'; const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator(); // Stack navigators for each tab const HomeStack = () => ( ); const WalletStack = () => ( ); const InvestmentsStack = () => ( ); const StatisticsStack = () => ( ); const SettingsStack = () => ( ); const MainTabNavigator = () => { const {unreadCount} = useSelector((state: RootState) => state.alert); return ( ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ); }; export default MainTabNavigator; import React, {useEffect} from 'react'; import { View, Text, StyleSheet, Image, TouchableOpacity, StatusBar, } from 'react-native'; import {useNavigation} from '@react-navigation/native'; import {Colors, Typography, Spacing} from '../constants/styles'; const SplashScreen = () => { const navigation = useNavigation(); const handleGetStarted = () => { navigation.navigate('Login' as never); }; return ( Spendo Manage your money, master your life Track expenses, manage budgets, and grow your savings with Spendo. Get Started ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: Colors.background, padding: Spacing.l, justifyContent: 'space-between', }, logoContainer: { alignItems: 'center', marginTop: Spacing.xl, }, logoText: { fontSize: Typography.fontSizeXXLarge, fontWeight: Typography.fontWeightBold, color: Colors.primary, marginBottom: Spacing.xs, }, tagline: { fontSize: Typography.fontSizeMedium, color: Colors.textLight, textAlign: 'center', }, illustrationContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, illustration: { width: '100%', height: '70%', }, bottomContainer: { marginBottom: Spacing.xl, }, description: { fontSize: Typography.fontSizeRegular, color: Colors.text, textAlign: 'center', marginBottom: Spacing.l, }, getStartedButton: { backgroundColor: Colors.primary, paddingVertical: Spacing.m, borderRadius: 8, alignItems: 'center', }, getStartedButtonText: { color: 'white', fontSize: Typography.fontSizeMedium, fontWeight: Typography.fontWeightBold, }, }); export default SplashScreen; import React, {useState} from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, ActivityIndicator, Alert, KeyboardAvoidingView, Platform, } from 'react-native'; import {useNavigation} from '@react-navigation/native'; import {useDispatch, useSelector} from 'react-redux'; import {loginUser, clearError} from '../../redux/slices/authSlice'; import {Colors, Typography, Spacing, BorderRadius} from '../../constants/styles'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {AppDispatch, RootState} from '../../redux/store'; const LoginScreen = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const navigation = useNavigation(); const dispatch = useDispatch(); const {isLoading, error} = useSelector((state: RootState) => state.auth); const handleLogin = async () => { if (!email || !password) { Alert.alert('Error', 'Please fill in all fields'); return; } try { await dispatch(loginUser({email, password})).unwrap(); } catch (err) { // Error is handled in the auth slice } }; const navigateToRegister = () => { dispatch(clearError()); navigation.navigate('Register' as never); }; const navigateToForgotPassword = () => { dispatch(clearError()); navigation.navigate('ForgotPassword' as never); }; return ( Welcome Back Sign in to continue {error && ( {error} )} setShowPassword(!showPassword)}> Forgot Password? {isLoading ? ( ) : ( Login )} Don't have an account? Register ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: Colors.background, }, scrollContainer: { flexGrow: 1, padding: Spacing.l, justifyContent: 'center', }, header: { marginBottom: Spacing.xl, alignItems: 'center', }, title: { fontSize: Typography.fontSizeXLarge, fontWeight: Typography.fontWeightBold, color: Colors.text, marginBottom: Spacing.xs, }, subtitle: { fontSize: Typography.fontSizeRegular, color: Colors.textLight, }, errorContainer: { backgroundColor: Colors.danger + '20', // 20% opacity padding: Spacing.m, borderRadius: BorderRadius.medium, marginBottom: Spacing.m, }, errorText: { color: Colors.danger, fontSize: Typography.fontSizeRegular, textAlign: 'center', }, form: { marginBottom: Spacing.xl, }, inputContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.card, borderRadius: BorderRadius.medium, marginBottom: Spacing.m, borderWidth: 1, borderColor: Colors.border, }, inputIcon: { paddingHorizontal: Spacing.m, }, input: { flex: 1, paddingVertical: Spacing.m, color: Colors.text, fontSize: Typography.fontSizeRegular, }, passwordToggle: { padding: Spacing.m, }, forgotPasswordContainer: { alignItems: 'flex-end', marginBottom: Spacing.l, }, forgotPasswordText: { color: Colors.primary, fontSize: Typography.fontSizeRegular, }, loginButton: { backgroundColor: Colors.primary, paddingVertical: Spacing.m, borderRadius: BorderRadius.medium, alignItems: 'center', }, loginButtonText: { color: 'white', fontSize: Typography.fontSizeMedium, fontWeight: Typography.fontWeightBold, }, footer: { flexDirection: 'row', justifyContent: 'center', }, footerText: { color: Colors.text, fontSize: Typography.fontSizeRegular, }, registerText: { color: Colors.primary, fontSize: Typography.fontSizeRegular, fontWeight: Typography.fontWeightBold, }, }); export default LoginScreen; import React, {useState} from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, ActivityIndicator, Alert, KeyboardAvoidingView, Platform, } from 'react-native'; import {useNavigation} from '@react-navigation/native'; import {useDispatch, useSelector} from 'react-redux'; import {registerUser, clearError} from '../../redux/slices/authSlice'; import {Colors, Typography, Spacing, BorderRadius} from '../../constants/styles'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {AppDispatch, RootState} from '../../redux/store'; const RegisterScreen = () => { const [email, setEmail] = useState(''); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const navigation = useNavigation(); const dispatch = useDispatch(); const {isLoading, error} = useSelector((state: RootState) => state.auth); const handleRegister = async () => { if (!email || !username || !password || !confirmPassword) { Alert.alert('Error', 'Please fill in all fields'); return; } if (password !== confirmPassword) { Alert.alert('Error', 'Passwords do not match'); return; } try { await dispatch(registerUser({email, password, username})).unwrap(); } catch (err) { // Error is handled in the auth slice } }; const navigateToLogin = () => { dispatch(clearError()); navigation.navigate('Login' as never); }; return ( Create Account Sign up to get started {error && ( {error} )} setShowPassword(!showPassword)}> setShowConfirmPassword(!showConfirmPassword)}> {isLoading ? ( ) : ( Register )} Already have an account? Login ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: Colors.background, }, scrollContainer: { flexGrow: 1, padding: Spacing.l, justifyContent: 'center', }, header: { marginBottom: Spacing.xl, alignItems: 'center', }, title: { fontSize: Typography.fontSizeXLarge, fontWeight: Typography.fontWeightBold, color: Colors.text, marginBottom: Spacing.xs, }, subtitle: { fontSize: Typography.fontSizeRegular, color: Colors.textLight, }, errorContainer: { backgroundColor: Colors.danger + '20', // 20% opacity padding: Spacing.m, borderRadius: BorderRadius.medium, marginBottom: Spacing.m, }, errorText: { color: Colors.danger, fontSize: Typography.fontSizeRegular, textAlign: 'center', }, form: { marginBottom: Spacing.xl, }, inputContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.card, borderRadius: BorderRadius.medium, marginBottom: Spacing.m, borderWidth: 1, borderColor: Colors.border, }, inputIcon: { paddingHorizontal: Spacing.m, }, input: { flex: 1, paddingVertical: Spacing.m, color: Colors.text, fontSize: Typography.fontSizeRegular, }, passwordToggle: { padding: Spacing.m, }, registerButton: { backgroundColor: Colors.primary, paddingVertical: Spacing.m, borderRadius: BorderRadius.medium, alignItems: 'center', marginTop: Spacing.m, }, registerButtonText: { color: 'white', fontSize: Typography.fontSizeMedium, fontWeight: Typography.fontWeightBold, }, footer: { flexDirection: 'row', justifyContent: 'center', }, footerText: { color: Colors.text, fontSize: Typography.fontSizeRegular, }, loginText: { color: Colors.primary, fontSize: Typography.fontSizeRegular, fontWeight: Typography.fontWeightBold, }, }); export default RegisterScreen; import React, {useState} from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, ActivityIndicator, Alert, KeyboardAvoidingView, Platform, } from 'react-native'; import {useNavigation} from '@react-navigation/native'; import {useDispatch, useSelector} from 'react-redux'; import {resetPassword, clearError} from '../../redux/slices/authSlice'; import {Colors, Typography, Spacing, BorderRadius} from '../../constants/styles'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {AppDispatch, RootState} from '../../redux/store'; const ForgotPasswordScreen = () => { const [email, setEmail] = useState(''); const [resetSent, setResetSent] = useState(false); const navigation = useNavigation(); const dispatch = useDispatch(); const {isLoading, error} = useSelector((state: RootState) => state.auth); const handleResetPassword = async () => { if (!email) { Alert.alert('Error', 'Please enter your email address'); return; } try { await dispatch(resetPassword({email})).unwrap(); setResetSent(true); } catch (err) { // Error is handled in the auth slice } }; const navigateToLogin = () => { dispatch(clearError()); navigation.navigate('Login' as never); }; return ( Forgot Password Enter your email to receive a password reset link {error && ( {error} )} {resetSent ? ( Reset Email Sent We've sent a password reset link to your email address. Please check your inbox and follow the instructions. Back to Login ) : ( {isLoading ? ( ) : ( Reset Password )} )} {!resetSent && ( Remember your password? Login )} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: Colors.background, }, scrollContainer: { flexGrow: 1, padding: Spacing.l, justifyContent: 'center', }, backButton: { position: 'absolute', top: Spacing.l, left: Spacing.l, zIndex: 1, }, header: { marginBottom: Spacing.xl, alignItems: 'center', }, title: { fontSize: Typography.fontSizeXLarge, fontWeight: Typography.fontWeightBold, color: Colors.text, marginBottom: Spacing.xs, }, subtitle: { fontSize: Typography.fontSizeRegular, color: Colors.textLight, textAlign: 'center', }, errorContainer: { backgroundColor: Colors.danger + '20', // 20% opacity padding: Spacing.m, borderRadius: BorderRadius.medium, marginBottom: Spacing.m, }, errorText: { color: Colors.danger, fontSize: Typography.fontSizeRegular, textAlign: 'center', }, form: { marginBottom: Spacing.xl, }, inputContainer: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.card, borderRadius: BorderRadius.medium, marginBottom: Spacing.m, borderWidth: 1, borderColor: Colors.border, }, inputIcon: { paddingHorizontal: Spacing.m, }, input: { flex: 1, paddingVertical: Spacing.m, color: Colors.text, fontSize: Typography.fontSizeRegular, }, resetButton: { backgroundColor: Colors.primary, paddingVertical: Spacing.m, borderRadius: BorderRadius.medium, alignItems: 'center', marginTop: Spacing.m, }, resetButtonText: { color: 'white', fontSize: Typography.fontSizeMedium, fontWeight: Typography.fontWeightBold, }, footer: { flexDirection: 'row', justifyContent: 'center', }, footerText: { color: Colors.text, fontSize: Typography.fontSizeRegular, }, loginText: { color: Colors.primary, fontSize: Typography.fontSizeRegular, fontWeight: Typography.fontWeightBold, }, successContainer: { alignItems: 'center', padding: Spacing.l, }, successIcon: { marginBottom: Spacing.l, }, successTitle: { fontSize: Typography.fontSizeLarge, fontWeight: Typography.fontWeightBold, color: Colors.text, marginBottom: Spacing.m, }, successText: { fontSize: Typography.fontSizeRegular, color: Colors.textLight, textAlign: 'center', marginBottom: Spacing.xl, }, backToLoginButton: { backgroundColor: Colors.primary, paddingVertical: Spacing.m, paddingHorizontal: Spacing.xl, borderRadius: BorderRadius.medium, }, backToLoginText: { color: 'white', fontSize: Typography.fontSizeMedium, fontWeight: Typography.fontWeightBold, }, }); export default ForgotPasswordScreen; import React, {useEffect, useState} from 'react'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator, RefreshControl, } from 'react-