gabehf
/
BudgetBuddy
mirror of https://github.com/gabehf/BudgetBuddy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dashboard Fixes

Browse Source
main
jveebs 3 years ago
parent fdf6697549
commit b768d83f3c
12 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File

BIN
public/BudgetBuddyIcon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/BudgetBuddyLogo.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 226 KiB

2
public/index.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/BudgetBuddyLogo.ico" />
<link rel="icon" href="%PUBLIC_URL%/BudgetBuddyIcon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta

BIN
src/assets/BudgetBuddyLogoWhite.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

23
src/components/AddExpenseForm.js
Unescape View File

@ -126,8 +126,9 @@ const AddExpenseForm = (props) => {
return (
<div className='widget'>
<h4>Add Transaction</h4>
<div style={{height: "85%"}} className='d-flex flex-column justify-content-between'>
<div className='row'>
<div className='col-md col-lg-4'>
<div className='col'>
<label htmlFor='cost'>Cost</label>
<input
required='required'
@ -140,7 +141,7 @@ const AddExpenseForm = (props) => {
onChange={(event) => setCost(event.target.value)}
/>
</div>
<div className='col-md col-lg-4'>
<div className='col'>
<label htmlFor='category-select'>Category</label>
<select className="form-select" id='category-select'
value={category}
@ -154,9 +155,9 @@ const AddExpenseForm = (props) => {
</select>
</div>
</div>
<div className='row mt-2'>
<div className='col'>
<div className='row'>
<div className='btn-group mt-2' role="group">
<button className='btn btn-outline-success m-right' value={1} onClick={quickSet}>
$1
</button>
@ -178,20 +179,20 @@ const AddExpenseForm = (props) => {
</div>
</div>
<div className='row mt-2'>
<div className='row'>
<div className='col-sm'>
<button className='btn btn-dark m-right' onClick={toggleTransactionType}>
<button className='btn btn-dark m-right mt-2' 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 type='submit' onClick={onSubmit} id="add-transaction-button" className='btn btn-primary m-right mt-2'>
Add Transaction
</button>
<button className='btn btn-primary' onClick={handleAddCategory}>
<button className='btn btn-primary mt-2' onClick={handleAddCategory}>
Add New Category
</button>
</div>
</div>
</div>
</div>
);
};

3
src/components/ExpenseTotal.js
Unescape View File

@ -24,7 +24,8 @@ const ExpenseTotal = () => {
return (
<div className='widget p-4'>
<img src={logo} className='expenseTotalIcon'></img>
{//<img src={logo} className='expenseTotalIcon'></img>
}
<span className='widgetText'>This Month's Expenses: ${expense}</span>
</div>
);

2
src/components/FormInputGroup.js
Unescape View File

@ -2,7 +2,7 @@ import React from "react";
const FormInputGroup = ({text, placeholder, value, onInput}) => {
return (
<div className="input-group mb-4">
<div className="input-group mt-3">
<label className="input-group-text">{text}</label>
<input type="number" className="form-control" placeholder={placeholder} value={value} onInput={onInput} />
</div>

28
src/components/LoanCalculator.js
Unescape View File

@ -26,19 +26,25 @@ const LoanCalculator = () => {
return (
<div className="widget">
<h4 className="mb-5">Loan Calculator</h4>
<h4 className="mb-0">Loan Calculator</h4>
<form onSubmit={(event) => event.preventDefault()}>
<FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
<FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
<FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
<h4 className="alert alert-info fw-bold">
Monthly Payment: ${monthlyPayment.toFixed(2)}
<h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
<h5>Interest Paid: ${interestPaid.toFixed(2)}</h5>
</h4>
<button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button>
<div className="row align-items-center">
<div className="col mb-3">
<FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
<FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
<FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
</div>
<div className="col">
<h5 className="alert alert-info fw-bold mt-3">
Monthly Payment: ${monthlyPayment.toFixed(2)}
<h6 className="mt-4">Principal Paid: ${loanAmount}</h6>
<h6>Interest Paid: ${interestPaid.toFixed(2)}</h6>
</h5>
</div>
</div>
<button type="submit" className="btn btn-primary btn-lg w-100 center" onClick={calculateMonthlyPayment}>Calculate</button>
</form>
</div>
)

2
src/components/NavBar.js
Unescape View File

@ -22,7 +22,7 @@ export default function NavBar() {
}, []);
return (
<Toolbar position="sticky" className="navbar bar py-3 px-4">
<Toolbar position="sticky" className="navbar mb-2 py-3 px-4">
<Link href="/" className="nav-brand" underline="none">
<img src={logo} className="logo w-100"/>
<Typography

4
src/components/Remaining.js
Unescape View File

@ -103,7 +103,7 @@ export default function Remaining() {
});
}
return (
<>
<div className='widget d-flex align-items-center justify-content-between'>
{/* <img src={logo}></img>
<span>Current Balance: ${data}</span> */}
{/* <button onClick={apiGet()}> TEST</button> */}
@ -118,7 +118,7 @@ export default function Remaining() {
required />
<button type="submit">Submit</button>
</form>
</>
</div>
);
};

28
src/pages/Dashboard.jsx
Unescape View File

@ -19,36 +19,36 @@ export default function Dashboard() {
return (
<AppProvider>
<div className='container-fluid'>
<div>
<div className='row align-items-stretch'>
<div className='col-sm'>
<div className='col mb-3'>
<FetchAPI />
</div>
<div className='col-sm widget d-flex align-items-center justify-content-between'>
<div className='col mb-3'>
<RemainingBudget />
</div>
<div className='col-sm'>
{/* <ExpenseTotal /> */}
<div className='col mb-3'>
<ExpenseTotal />
</div>
</div>
<div className='row mt-3'>
<div className='col'>
<div className='row'>
<div className='col-12 col-xl-4 mb-3'>
<AddExpenseForm/>
</div>
<div className='col'>
<ExpenseList />
<div className='col-12 col-xl-8 mb-3'>
<LoanCalculator/>
</div>
</div>
<div className='row mt-3'>
<div className='col-12 col-md-12 col-lg-4'>
<LoanCalculator/>
<div className='row'>
<div className='col-12 col-md-12 col-lg-4 mb-3'>
<ExpenseList />
</div>
<div className='col-12 col-lg-4'>
<div className='col-12 col-lg-4 mb-3'>
<CategorizedExpenses/>
</div>
<div className='col-12 col-lg-4'>
<div className='col-12 col-lg-4 mb-3'>
<CategorizedIncome/>
</div>
</div>

2
src/styles.css
Unescape View File

@ -5,6 +5,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #EFEFE6 !important;
}
code {
@ -13,7 +14,6 @@ code {
}
.app {
background-color: #EFEFE6;
color: #191910;
min-height: 100vh;
}

Write Preview
Loading…
Cancel
Save