idea: My Budget Dashboard layout

[TreyWW]

Some sort of "my budget" dashboard like the ref image

[JonasFiechter]

Hi there @TreyWW, I am looking forward to engage in a promising project then I've found yours.

I wish to try solving on this one, front-end graphs are a bit challenging but I think I can give a shot.

Maybe it will raise some good questions about to solve like different currencies and maybe some DB in-model calcs.

[TreyWW]

Hi @JonasFiechter, thanks for showing an interest! Of course, I'll assign you to the issue. Feel free to ask about anything you struggle with

[JonasFiechter]

Ok, thanks, I will. :D

Should I wait a new branch for this improvement or we already have one?

[TreyWW]

Hi there @JonasFiechter, sorry I completely missed your second message the other day.

So this issue is for a "my budget" type dashboard. I'm completely fine with it being in the main dashboard though, at least it fills it up!

I'm just wondering if you're intending for this to be merged in to main now? I think it would be more beneficial to have this in a separate branch (like you mentioned before) just to keep it out until it's ready, would that be okay?

I've created feature/20-budgets-dashboard-layout if you'd like to put it in there instead of main.

I completely agree with your PR though; where you mention we should use a TDD approach, and structure this better and make sure it's planned rather than just rushed. Let me know how you'd like to continue, thanks I really appreciate your contribution

[JonasFiechter]

Good morning @TreyWW, don't worry pal, no problem at all.

That's fine for me to keep going under feature/20-budgets-dashboard-layout.

If there is no problem I would like to go on. It is being a honor to be useful.

[JonasFiechter]

Hi @TreyWW Unfortunately I couldn't work in the project the last few days, but I plan to finish the first steps by this weekend;

Do you have an Idea about what data should we bring to the dashboard, following the last template I've added some generic stuff like:

• Overview (with some cool graphic stuff about the actual month)
• Income / goal
• Expenses / goal
• Last transactions (the last model I've added the receipt column with a 'href' pointing to the receipt related to it)

So the amount of data shown and witch of then is crucial to at least know how the cards will be. If that's enough for now I'll start building the cards following the instructions you gave me, if not please, fell free to share.

I'll also provide a sketch with the template with the desired data into the cards for approval before start building;

[TreyWW]

Hey again @JonasFiechter, No problem at all about the break, its fine!

Details wise I think you've came up with some great ideas!

Yeah that should be enough to make a start, once drawings + prototypes are made it should be easier to spot if something should be added/changed but yeah that sounds great so far!

[JonasFiechter]

Hello! So, I got hands on into the requested styling changes and I've found easier just working into the template than drawing from scratch using other tools, well, in my opinion it became sober and elegant, and for the IDEA of predicting profit I've already added another card so that info can be shown.

We have also this canvas where I imagined how values will come from the view (it is not complete):

• https://app.eraser.io/workspace/jf1riQBLHD7cpv8wuDHM?origin=share Values to be shown could be the current month(simpler), or some date range (this would need a to change the context)

If approved, the next steps will be:

• Finish "last transactions" section to be able to show a list and maybe a expand button to show details
• Make all template responsive and refactor it
• Add model calls with the view to inject data into the context
• Take out the static values and grab context ones accordingly If not, please fell free to share and we'll go on with the changes needed;

[TreyWW]

That's amazing @JonasFiechter! I love it, really well planned out!!

There's no major issues that I can see so far. Anything you need help/feedback for?

If not then well done man, it's looking amazing

[JonasFiechter]

Thanks! I fell happy to know it fits well.

If values from Receipts and Invoice are enough so far, that's it.

To finish it I'll just work a little at the view and canva's JS, so we can get real values from models, and we should be good to go.

[TreyWW]

Amazing! How would you like to proceed?

If values from Receipts and Invoice are enough so far, that's it. Yeah it's fine to add them details but leave everything else as static/fake values

Thanks again man, you've done amazing

[JonasFiechter]

Ok, If we're ready for this first dashboard version, I'll just make a little refactor, clean the trash out and make the PR.

Would you like to mantain the JS script inside the HTML, or provide a separate module?

[TreyWW]

Separate module please, probably in frontend/static/js/.

What's the JS for, charts?

[JonasFiechter]

Ok then.

Yeah, it is temporarily inside the HTML, it provides the structure and the values. But I've take it almost ready from a template.

As I am willing to learn more about JS it will be a good opportunity to see how other devs will work on this.

[TreyWW]

100%, yeah i've not used JS much either so it's great that others are starting to use it!

[JonasFiechter]

Fine buddy, I'll separate JS script and make some code cleaning and make the PR.

That's fine for tomorrow?

[TreyWW]

Yeah, take your time. Thanks again, really appreciate it

[JonasFiechter]

You're welcome, it's been great working on this project!

[JonasFiechter]

Hi @TreyWW. I made some progress customizing the current chart using only Bokeh native methods, but I couldn't work on this as quickly as I wish, sorry about that. Anyways. Just to keep this Issue updated.

The cool thing about doing this way, is that we can receive styling args from the front-end configuration and the generate_chart method will handle changes very clearly without having to deal with regex or stuff like that.

There are just a few details like legends styling some labels fonts, etc. That I need to cover up. Below is a brief example of actual progress:

[JonasFiechter]

Hello @TreyWW. After these last changes I'll ask you to check the current layout and tell me if there are more changes needed for this Issue or if we can keep like this for now, if that's it I'll look for another issue, since there are new challenges coming in.