Skip to content

Commit

Permalink
Merge pull request #47 from Robert-M-Lucas/dev-SCRUM-75
Browse files Browse the repository at this point in the history
50/30/20 Modal
isaac-aryan authored Apr 28, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 5046936 + f7b9004 commit f569ffd
Showing 3 changed files with 64 additions and 2 deletions.
1 change: 1 addition & 0 deletions firebase.json
Original file line number Diff line number Diff line change
@@ -28,6 +28,7 @@
"port": 9099
},
"firestore": {
"port": 8080
}
}
}
41 changes: 41 additions & 0 deletions src/components/goals/MoreInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {Modal } from "react-bootstrap";

export function MoreInfo({ show, closeModal }: { show: boolean, closeModal: () => void }) {

return <Modal show={show} onHide={() => closeModal()}>

<Modal.Header closeButton>
<Modal.Title>About the 50/30/20 Principle</Modal.Title>
</Modal.Header>

<Modal.Body>
<h5>What is the 50/30/20 Principle?</h5>
<p>
Simply put, it is an intuitive and straightforward budget rule that can help you draw up a reasonable budget
you can stick to over time in order to meet your financial goals. <br/>
The rule is to split your after-tax income into three categories of spending: 50% on needs, 30% on wants, and 20% on savings.
</p>
<h5>Adaptable by Nature.</h5>
<p>
Of course, everyone’s situation is different and the 50/30/20 split may not work for you. If you feel like saving 20% is not realistic,
you could try and adjust the percentages and aim to save a smaller amount — 10% or 5% each month, for example.
</p>

<h5>Benefits:</h5>
<ul>
<li><b>Ease of Use:</b> The 50/30/20 rule offers a straightforward framework for budgeting, making it simple to comprehend and apply. You may distribute your income immediately without the need for intricate calculations.
Even the least financially-savvy person can adhere to these rules.</li>

<li><b>Prioritization of vital expenses:</b> You can make sure that you cover your fundamental needs without going over budget or taking on too much debt by giving these basics top priority. As these rules stipulate that half of your budget goes towards needs,
this plan helps make sure your essentials are more likely to be met.</li>

<li><b>Emphasis on savings goals:</b> By allocating 20% of your income to savings, you can set up an emergency fund, prepare for retirement, pay off debt, invest, or pursue other financial goals. By consistently saving this amount,
you establish sound financial practices and build a safety net for unforeseen costs or future goals.</li>
</ul>
</Modal.Body>

<Modal.Footer>

</Modal.Footer>
</Modal>
}
24 changes: 22 additions & 2 deletions src/pages/dashboard/goal setting tile/GoalSettingTile.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,9 @@ import {setUserPrefs, UserPrefs} from "../../../utils/user_prefs.ts";
import MultiRangeSlider, {ChangeResult} from "multi-range-slider-react";
import "./GoalsSettingTile.scss";
import {auth} from "../../../utils/firebase.ts";
import { stopDragging } from "../../../components/transactions/CSVUpload.tsx";
import {stopDragging} from "../../../components/transactions/CSVUpload.tsx";

import {MoreInfo} from "../../../components/goals/MoreInfo.tsx";

export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () => void): ReactNode {
const [minValue, setMinValue] = useState(
@@ -28,10 +30,28 @@ export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () =>
setMaxValue(max);
};

const [showInfoModal, setShowInfoModal] = useState(false);
function closeModal(setShow: React.Dispatch<React.SetStateAction<boolean>>) {
setShow(false);
}
const onInfoModalClose = () => closeModal(setShowInfoModal)

return <>
<div className={"card-header w-100 fw-bold"}>

<div className={"card-header w-100 fw-bold"} onPointerDown={showInfoModal ? stopDragging : undefined}>
Goals
<MoreInfo show={showInfoModal} closeModal={onInfoModalClose}/>
<div>
<button className={"btn me-2"} style={{'color': '#55599e', 'position':'relative'}}

onClick={() => setShowInfoModal(true)}
>
About 50/30/20...
</button>
</div>

</div>

<ul className="list-group list-group-flush w-100 d-flex card-body p-0">
<li className="list-group-item align-content-stretch" style={{height: "33%"}}>
<div className="row h-100">

0 comments on commit f569ffd

Please sign in to comment.