feat(dashboard): create skeleton dashboard page

[cillynder]

Description

Creates a skeleton dashboard page that displays columns of units, which will later have task list items under each column. The button in #455 also now properly links to the new page.

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Tested by using docker-compose containers in development/ of doubtfire-deploy to verify layout changes.

Testing Checklist:

• Tested in latest Chrome
• Tested in latest Safari
• Tested in latest Firefox

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have requested a review from @macite and @jakerenzella on the Pull Request

[owens-hub-git]

I ran this locally on my machine shown below:

Looks great and fits really well with the existing OnTrack system. One issue I encountered was a visual bug where longer unit codes would cut the later part of a unit shown here:

This may not be an issue if unit codes are within certain length requirements.
I can see you have already got the tasks div below ready for future tasklist component.

Mobile view also looks good, but I need some closure whether we are doing the same scroll to the left and right to see units instead of up and down for units.

UI routing works and I can see the code follows good practice with the rest of the codebase.
Lastly, will the select units button be there as it wasn't in the high fidelity images?
well done

[cillynder]

Thanks for the review!

• I'm going to truncate the unit code instead of letting it overflow like that, should solve the issue (most unit codes are not that long anyway usually)
• Good point about mobile; I'm probably going to stack the mobile view vertically somehow, will look into how that's gonna go as the main focus at the moment is desktop
• Yes the select units will likely still be there to keep a consistent header across the interface; it was omitted in the high fidelity designs for the sake of brevity

[owens-hub-git]

Thanks for the review!

• I'm going to truncate the unit code instead of letting it overflow like that, should solve the issue (most unit codes are not that long anyway usually)
• Good point about mobile; I'm probably going to stack the mobile view vertically somehow, will look into how that's gonna go as the main focus at the moment is desktop
• Yes the select units will likely still be there to keep a consistent header across the interface; it was omitted in the high fidelity designs for the sake of brevity

Awesome, thanks for the response and everything looks good from my end

[Labiba33]

Hi! I tested this locally on my machine and the dashboard loads well without any issues. The structure looks clean and consistent with the existing codebase, and it provides a solid foundation for integrating the task list component.
I also checked how it behaves with different data, and everything renders as expected. One small suggestion would be to handle longer unit codes (for example, by truncating them or ensuring they wrap properly) so they don’t affect the layout. It would also be good to double-check the mobile responsiveness to make sure the UI remains consistent across different screen sizes.Overall, everything looks good to me.

[cillynder]

I've truncated the unit code so the buttons don't get pushed out anymore. Also removed some old leftover testing code (oops)

[owens-hub-git]

Awesome, looks good to me and answered my previous question perfectly. Probably best to get rid of 'yop' haha
Good job

[owens-hub-git]

@BrianDangDev need to merge this for cross-unit please