From 77ea6d18306e1b8e023d05481fb0fbb107049154 Mon Sep 17 00:00:00 2001 From: Aryan Isaac Bhobe <bhobe.ai@gmail.com> Date: Sun, 28 Apr 2024 18:08:50 +0100 Subject: [PATCH 1/3] Modal for information about 50/30/20 --- firebase.json | 1 + src/components/goals/MoreInfo.tsx | 41 +++++++++++++++++++ .../goal setting tile/GoalSettingTile.tsx | 22 +++++++++- 3 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/components/goals/MoreInfo.tsx diff --git a/firebase.json b/firebase.json index bb65dde..46763f5 100644 --- a/firebase.json +++ b/firebase.json @@ -28,6 +28,7 @@ "port": 9099 }, "firestore": { + "port": 8080 } } } diff --git a/src/components/goals/MoreInfo.tsx b/src/components/goals/MoreInfo.tsx new file mode 100644 index 0000000..4622333 --- /dev/null +++ b/src/components/goals/MoreInfo.tsx @@ -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> +} \ No newline at end of file diff --git a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx index 31f445d..ef5ea2a 100644 --- a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx +++ b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx @@ -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 {CSVUpload, 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"}> 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"> From 600a41ed07d1f0f89d45e13a0ca3d98ed8c7e7d7 Mon Sep 17 00:00:00 2001 From: Aryan Isaac Bhobe <bhobe.ai@gmail.com> Date: Sun, 28 Apr 2024 18:11:18 +0100 Subject: [PATCH 2/3] Modal for information about 50/30/20 --- src/pages/dashboard/goal setting tile/GoalSettingTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx index ef5ea2a..cf0ba86 100644 --- a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx +++ b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx @@ -3,7 +3,7 @@ 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 {CSVUpload, stopDragging} from "../../../components/transactions/CSVUpload.tsx"; +import {stopDragging} from "../../../components/transactions/CSVUpload.tsx"; import {MoreInfo} from "../../../components/goals/MoreInfo.tsx"; From f7b90048800f6f01cc23a064c18279a80b0d2c86 Mon Sep 17 00:00:00 2001 From: Aryan Isaac Bhobe <bhobe.ai@gmail.com> Date: Sun, 28 Apr 2024 20:22:00 +0100 Subject: [PATCH 3/3] fixed modal dragging --- src/pages/dashboard/goal setting tile/GoalSettingTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx index cf0ba86..ae3e972 100644 --- a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx +++ b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx @@ -38,7 +38,7 @@ export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () => 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>