mirror of
https://github.com/gabehf/BudgetBuddy.git
synced 2026-03-07 21:48:14 -08:00
Quick Transaction
This commit is contained in:
jveebs
parent
ab1db7dbae
commit
e90e8d413e
7 changed files with 299 additions and 105 deletions
|
|
@ -13,24 +13,7 @@ const AddExpenseForm = (props) => {
|
|||
const [transactionType, setTransactionType] = useState('expenses');
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
fetch('https://api.bb.gabefarrell.com/w/budget', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
getCategoryList();
|
||||
}
|
||||
})
|
||||
} catch(error) {
|
||||
console.error(error);
|
||||
}
|
||||
getCategoryList();
|
||||
}, [transactionType])
|
||||
|
||||
const toggleTransactionType = () => {
|
||||
|
|
@ -42,32 +25,43 @@ const AddExpenseForm = (props) => {
|
|||
}
|
||||
|
||||
const getCategoryList = () => {
|
||||
fetch('https://api.bb.gabefarrell.com/w/budget', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
let categories = [];
|
||||
|
||||
Object.values(data.expenses).map((transactions) => {
|
||||
transactions.forEach(transaction => {
|
||||
if (transaction.type == transactionType && !categories.includes(transaction.category)) {
|
||||
categories.push(transaction.category)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (categories.length == 0) categories = ["Uncategorized"];
|
||||
setCategoryList(categories);
|
||||
setCategory(categories[0])
|
||||
}
|
||||
})
|
||||
if (transactionType == "expenses") {
|
||||
fetch('https://api.bb.gabefarrell.com/w/budget', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
let categories = Object.keys(data.expenses_by_category).length > 0 ? Object.keys(data.expenses_by_category) : ["Uncategorized"];
|
||||
|
||||
setCategoryList(categories);
|
||||
setCategory(categories[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
fetch('https://api.bb.gabefarrell.com/w/income', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
let categories = Object.keys(data.income_by_category).length > 0 ? Object.keys(data.income_by_category) : ["Uncategorized"];
|
||||
|
||||
setCategoryList(categories);
|
||||
setCategory(categories[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (event) => {
|
||||
|
|
@ -91,8 +85,6 @@ const AddExpenseForm = (props) => {
|
|||
formData.append('whole', whole);
|
||||
formData.append('decimal', decimal);
|
||||
formData.append('type', transactionType)
|
||||
|
||||
console.log(transactionType);
|
||||
|
||||
try {
|
||||
fetch(`https://api.bb.gabefarrell.com/w/transactions?whole=${whole}&decimal=${decimal}¤cy=${currency}&category=${category}&type=${transactionType}`, {
|
||||
|
|
@ -113,7 +105,6 @@ const AddExpenseForm = (props) => {
|
|||
} catch(error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
setCost('');
|
||||
};
|
||||
|
||||
|
|
@ -128,6 +119,10 @@ const AddExpenseForm = (props) => {
|
|||
}
|
||||
}
|
||||
|
||||
const quickSet = (event) => {
|
||||
setCost(event.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='widget'>
|
||||
<h4>Add Transaction</h4>
|
||||
|
|
@ -159,19 +154,44 @@ const AddExpenseForm = (props) => {
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row mt-3'>
|
||||
<div className='col-sm'>
|
||||
<button type='submit' onClick={onSubmit} className='btn btn-primary' style={{marginRight:"12px"}}>
|
||||
Add {transactionType.substring(0, 1).toUpperCase() + transactionType.substring(1)}
|
||||
|
||||
<div className='row mt-2'>
|
||||
<div className='col'>
|
||||
<button className='btn btn-outline-success m-right' value={1} onClick={quickSet}>
|
||||
$1
|
||||
</button>
|
||||
<button className='btn btn-primary' onClick={handleAddCategory} style={{marginRight:"12px"}}>
|
||||
Add New Category
|
||||
<button className='btn btn-outline-success m-right' value={5} onClick={quickSet}>
|
||||
$5
|
||||
</button>
|
||||
<button onClick={toggleTransactionType}>
|
||||
{transactionType.toUpperCase()}
|
||||
<button className='btn btn-outline-success m-right' value={10} onClick={quickSet}>
|
||||
$10
|
||||
</button>
|
||||
<button className='btn btn-outline-success m-right' value={15} onClick={quickSet}>
|
||||
$15
|
||||
</button>
|
||||
<button className='btn btn-outline-success m-right' value={20} onClick={quickSet}>
|
||||
$20
|
||||
</button>
|
||||
<button className='btn btn-outline-success m-right' value={50} onClick={quickSet}>
|
||||
$50
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row mt-2'>
|
||||
<div className='col-sm'>
|
||||
<button className='btn btn-dark m-right' onClick={toggleTransactionType}>
|
||||
{transactionType.toUpperCase()}
|
||||
</button>
|
||||
<button type='submit' onClick={onSubmit} id="add-transaction-button" className='btn btn-primary m-right'>
|
||||
Add {transactionType.substring(0, 1).toUpperCase() + transactionType.substring(1)}
|
||||
</button>
|
||||
<button className='btn btn-primary' onClick={handleAddCategory}>
|
||||
Add New Category
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@ import { Minimize } from "@material-ui/icons";
|
|||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend);
|
||||
|
||||
export default function CategorizedExpenses() {
|
||||
export default function CategorizedExpenses(props) {
|
||||
const [chartData, setChartData] = useState(null);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
async function getChartData() {
|
||||
|
|
@ -25,30 +27,24 @@ export default function CategorizedExpenses() {
|
|||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
let categories = [];
|
||||
let values = [];
|
||||
|
||||
Object.values(data.expenses).map((transactions) => {
|
||||
let cost = 0;
|
||||
categories.push(transactions[0].category)
|
||||
transactions.forEach(transaction => {
|
||||
cost += calculateValue(transaction.amount);
|
||||
});
|
||||
|
||||
values.push(cost);
|
||||
});
|
||||
if (categories.length == 0) categories = [`No expenses`];
|
||||
|
||||
const chartData = {
|
||||
labels: categories,
|
||||
labels: Object.keys(data.expenses_by_category).length > 0 ? Object.keys(data.expenses_by_category) : ["No income."],
|
||||
datasets: [{
|
||||
data: values,
|
||||
data: Object.values(data.expenses_by_category).map((category) => {
|
||||
return calculateValue(category);
|
||||
}),
|
||||
label: "Category",
|
||||
backgroundColor: [
|
||||
'#FFC857',
|
||||
'#ED8146',
|
||||
'#5C919B',
|
||||
'#DB3A34',
|
||||
'#F6A54F',
|
||||
'#61B06E',
|
||||
'#8166CC',
|
||||
'#ED8146',
|
||||
'#B0BC63',
|
||||
'#5672C7',
|
||||
'#E45E3D'
|
||||
],
|
||||
borderColor: [
|
||||
"white"
|
||||
|
|
@ -68,7 +64,7 @@ export default function CategorizedExpenses() {
|
|||
}
|
||||
}
|
||||
getChartData();
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!chartData) {
|
||||
return <p>Loading...</p>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ import { Minimize } from "@material-ui/icons";
|
|||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend);
|
||||
|
||||
export default function CategorizedIncome() {
|
||||
export default function CategorizedExpenses(props) {
|
||||
const [chartData, setChartData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function getChartData() {
|
||||
try {
|
||||
fetch('https://api.bb.gabefarrell.com/w/budget', {
|
||||
fetch('https://api.bb.gabefarrell.com/w/income', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
|
|
@ -24,28 +24,33 @@ export default function CategorizedIncome() {
|
|||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
|
||||
} else {
|
||||
const chartData = {
|
||||
labels: Object.keys(data.income).length > 0 ? Object.keys(data.income) : [ "no income"],
|
||||
datasets: [
|
||||
{
|
||||
data: Object.values(data.income_by_category).map(category => {
|
||||
return calculateValue(category);
|
||||
}),
|
||||
backgroundColor: [
|
||||
'#FFC857',
|
||||
'#ED8146',
|
||||
'#DB3A34',
|
||||
'#5672C7',
|
||||
],
|
||||
borderColor: [
|
||||
"white"
|
||||
],
|
||||
borderWidth: 2,
|
||||
},
|
||||
],
|
||||
labels: Object.keys(data.income_by_category).length > 0 ? Object.keys(data.income_by_category) : ["No income."],
|
||||
datasets: [{
|
||||
data: Object.values(data.income_by_category).map((category) => {
|
||||
return calculateValue(category);
|
||||
}),
|
||||
label: "Total cost",
|
||||
backgroundColor: [
|
||||
'#61B06E',
|
||||
'#8166CC',
|
||||
'#ED8146',
|
||||
'#B0BC63',
|
||||
'#5672C7',
|
||||
'#E45E3D',
|
||||
'#FFC857',
|
||||
'#5C919B',
|
||||
'#DB3A34',
|
||||
'#F6A54F'
|
||||
],
|
||||
borderColor: [
|
||||
"white"
|
||||
],
|
||||
borderWidth: 2,
|
||||
}],
|
||||
}
|
||||
|
||||
setChartData(chartData);
|
||||
}
|
||||
})
|
||||
|
|
|
|||
168
src/components/QuickTransaction.js
Normal file
168
src/components/QuickTransaction.js
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { AppContext } from '../context/AppContext';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import './AddExpenseForm.css'
|
||||
import { getSessionKey } from '../utils/utils.js'
|
||||
|
||||
export default function QuickTransaction(props) {
|
||||
const { dispatch } = useContext(AppContext);
|
||||
|
||||
const [cost, setCost] = useState('');
|
||||
const [category, setCategory] = useState('');
|
||||
const [categoryList, setCategoryList] = useState([]);
|
||||
const [transactionType, setTransactionType] = useState('expenses');
|
||||
|
||||
useEffect(() => {
|
||||
getCategoryList();
|
||||
}, [transactionType])
|
||||
|
||||
const toggleTransactionType = () => {
|
||||
if (transactionType == "expenses") {
|
||||
setTransactionType("income");
|
||||
} else {
|
||||
setTransactionType("expenses");
|
||||
}
|
||||
}
|
||||
|
||||
const getCategoryList = () => {
|
||||
if (transactionType == "expenses") {
|
||||
fetch('https://api.bb.gabefarrell.com/w/budget', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
let categories = Object.keys(data.expenses_by_category).length > 0 ? Object.keys(data.expenses_by_category) : ["Uncategorized"];
|
||||
|
||||
setCategoryList(categories);
|
||||
setCategory(categories[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
fetch('https://api.bb.gabefarrell.com/w/income', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
let categories = Object.keys(data.income_by_category).length > 0 ? Object.keys(data.income_by_category) : ["Uncategorized"];
|
||||
|
||||
setCategoryList(categories);
|
||||
setCategory(categories[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
let currency = "USD"
|
||||
let whole = 0;
|
||||
let decimal = 0;
|
||||
|
||||
|
||||
if (cost.includes(".")) {
|
||||
whole = parseInt(cost.split(".")[0]);
|
||||
decimal = parseInt(cost.split(".")[1]);
|
||||
} else {
|
||||
whole = parseInt(cost);
|
||||
}
|
||||
formData.append('category', category)
|
||||
formData.append('currency', currency);
|
||||
formData.append('whole', whole);
|
||||
formData.append('decimal', decimal);
|
||||
formData.append('type', transactionType)
|
||||
|
||||
try {
|
||||
fetch(`https://api.bb.gabefarrell.com/w/transactions?whole=${whole}&decimal=${decimal}¤cy=${currency}&category=${category}&type=${transactionType}`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'x-session-key' : getSessionKey(),
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status != 200) {
|
||||
console.log(data.error);
|
||||
} else {
|
||||
|
||||
}
|
||||
})
|
||||
} catch(error) {
|
||||
console.error(error);
|
||||
}
|
||||
setCost('');
|
||||
};
|
||||
|
||||
const handleAddCategory = () => {
|
||||
const newCategory = prompt('Enter the new category name:');
|
||||
if (newCategory) {
|
||||
if (categoryList.indexOf(newCategory) == -1) {
|
||||
const newCategories = [...categoryList, newCategory];
|
||||
setCategoryList(newCategories);
|
||||
}
|
||||
setCategory(newCategory);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='widget'>
|
||||
<h4>Add Transaction</h4>
|
||||
<div className='row'>
|
||||
<div className='col-md col-lg-4'>
|
||||
<label htmlFor='cost'>Cost</label>
|
||||
<input
|
||||
required='required'
|
||||
type='number'
|
||||
className='form-control'
|
||||
id='cost'
|
||||
min="0.00"
|
||||
step=".01"
|
||||
value={cost}
|
||||
onChange={(event) => setCost(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='col-md col-lg-4'>
|
||||
<label htmlFor='category-select'>Category</label>
|
||||
<select className="form-select" id='category-select'
|
||||
value={category}
|
||||
onChange={(event) => setCategory(event.target.value)}>
|
||||
|
||||
{categoryList.map((category) => (
|
||||
<option key={category} value={category}>
|
||||
{category}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row mt-3'>
|
||||
<div className='col-sm'>
|
||||
<button type='submit' onClick={onSubmit} id="add-transaction-button" className='btn btn-primary' style={{marginRight:"12px"}}>
|
||||
Add {transactionType.substring(0, 1).toUpperCase() + transactionType.substring(1)}
|
||||
</button>
|
||||
<button className='btn btn-primary' onClick={handleAddCategory} style={{marginRight:"12px"}}>
|
||||
Add New Category
|
||||
</button>
|
||||
<button onClick={toggleTransactionType}>
|
||||
{transactionType.toUpperCase()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import React from 'react';
|
||||
import { useState } from 'react'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
import { AppProvider } from '../context/AppContext';
|
||||
|
|
@ -8,12 +9,14 @@ import ExpenseList from '../components/ExpenseList';
|
|||
import AddExpenseForm from '../components/AddExpenseForm';
|
||||
import RemainingBudget from '../components/Remaining';
|
||||
import AddIncome from '../components/AddIncome'
|
||||
import QuickTransaction from '../components/QuickTransaction'
|
||||
import CategorizedExpenses from '../components/CategorizedExpenses';
|
||||
import CategorizedIncome from '../components/CategorizedIncome';
|
||||
import { Typography } from '@mui/material';
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
|
||||
return (
|
||||
<AppProvider>
|
||||
<div className='container-fluid'>
|
||||
<div className='row align-items-stretch'>
|
||||
|
|
@ -30,21 +33,19 @@ export default function Dashboard() {
|
|||
|
||||
<div className='row mt-3'>
|
||||
<div className='col'>
|
||||
<ExpenseList />
|
||||
<AddExpenseForm/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row mt-3'>
|
||||
<div className='col'>
|
||||
<AddExpenseForm />
|
||||
<ExpenseList />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row mt-3'>
|
||||
<div className='col-12 col-lg-6'>
|
||||
<CategorizedExpenses type={"expenses"}/>
|
||||
<CategorizedExpenses/>
|
||||
</div>
|
||||
<div className='col-12 col-lg-6'>
|
||||
<CategorizedExpenses type={"income"}/>
|
||||
<CategorizedIncome/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,4 +48,8 @@ code {
|
|||
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
|
||||
background-color: #5672C7 !important;
|
||||
border-color: #4766C2 !important;
|
||||
}
|
||||
|
||||
.m-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -40,6 +40,6 @@ export function handleLogout() {
|
|||
window.location.href='/welcome';
|
||||
}
|
||||
|
||||
export function calculateValue(amount) {
|
||||
return amount.whole + amount.decimal * 0.01;
|
||||
export function calculateValue(category) {
|
||||
return category.whole + category.decimal * 0.01;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue