mirror of
https://github.com/gabehf/BudgetBuddy.git
synced 2026-03-07 21:48:14 -08:00
Merge branch 'main' of https://github.com/jacobmveber-01839764/BudgetBuddy
This commit is contained in:
danielq65
commit
8843186df4
11 changed files with 34 additions and 33 deletions
BIN
public/BudgetBuddyIcon.ico
Normal file
BIN
public/BudgetBuddyIcon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 226 KiB |
|
|
@ -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
Normal file
BIN
src/assets/BudgetBuddyLogoWhite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@ 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="" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
|
||||
<FormInputGroup text="Interest Rate %" placeholder="" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
|
||||
<FormInputGroup text="Loan Duration in Years" placeholder="" 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>
|
||||
|
|
@ -44,4 +44,4 @@ const LoanCalculator = () => {
|
|||
)
|
||||
};
|
||||
|
||||
export default LoanCalculator;
|
||||
export default LoanCalculator;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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> */}
|
||||
|
|
@ -121,7 +121,7 @@ export default function Remaining() {
|
|||
required />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
|
@ -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 widget d-flex align-items-center justify-content-between'>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue