gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-07 21:48:14 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dashboard Fixes

Browse source
This commit is contained in:
jveebs 2023-04-25 16:38:51 -04:00
parent fdf6697549
commit b768d83f3c
12 changed files with 51 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/BudgetBuddyIcon.ico Normal file
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
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

BIN
src/assets/BudgetBuddyLogoWhite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

23
src/components/AddExpenseForm.js
View file

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

3
src/components/ExpenseTotal.js
View file

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

2
src/components/FormInputGroup.js
View file

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

28
src/components/LoanCalculator.js
View file

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

2
src/components/NavBar.js
View file

@ -22,7 +22,7 @@ export default function NavBar() {
}, []); }, []);
return ( 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"> <Link href="/" className="nav-brand" underline="none">
<img src={logo} className="logo w-100"/> <img src={logo} className="logo w-100"/>
<Typography <Typography

4
src/components/Remaining.js
View file

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

28
src/pages/Dashboard.jsx
View file

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

2
src/styles.css
View file

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