feat(ui): design dashboard

[dev-bre]

The first iteration of the dashboard page should fairly simple but eye catching.
I would think having cards showing some stats against how many flags / segments / rules have been created. how many flags are enabled.

Once we have the basic stuff, we might expand with some more in depth analytics, charts, etc.

[Zeeshnhmd]

Hey @dev-bre I would love to work on this issue. But before starting I have some questions to ask.

1. Do you have any design in mind? If not please provide a design so that I can give a pixel-perfect design.
2. Can I use module.scss for the following design?

Thank you.

[dev-bre]

Hi, didn't think of a design yet, but for the first iteration, having like 3 cards showing some stats in terms of:
Number flags and the percentage of active flags
Number of segments
Number of rules

And maybe a History of actions like an audit list
Added new flag on (date)
Removed flag on (date)
...

All these data can be hardcoded for the scope of this task.

I was looking at this dashboard design and looks pretty cool:
https://justboil.me/tailwind-admin-templates/free-react-dashboard/

For now I would focus on the style of the 3 cards. Maybe also the style of that sidebar, the colour contrast there looks amazing.

Please use Tailwind CSS and not any other styling logic , I would like to keep consistency.

Sounds good, for me to assign this to you?

[Zeeshnhmd]

Yes, you can assign this to me.

[dev-bre]

@Zeeshnhmd do you have an idea when you can start working on it? if you still want to?

[dev-bre]

@Zeeshnhmd can you please let me know if you are still interested in this task? Otherwise I can reassign it?

[Zeeshnhmd]

You'll get it by Sunday EOD

[dev-bre]

no rush at all. just wanted to make sure you were still up for it! all good thanks a lot.

[dev-bre]

Any update on this one @Zeeshnhmd?

[Zeeshnhmd]

Hey, slipped my mind I'll try to deliver this task this weekend.

[dev-bre]

Thanks a lot.

[Zeeshnhmd]

@dev-bre Dude, there is something wrong with your tailwind configuration it requires restarting the app whenever I am changing or applying a class to elements.

How can we fix this?

we can connect over Discord to see the issue.

[dev-bre]

there is an additional npm script you can use in the package.json which reloads the TW changes:

"dev:start-tw:watch": "cd ./packages/ui && npm run build:tw:watch"

just run:

npm run dev:start-tw:watch

and you will good to go. I will update the readme for this.

[Zeeshnhmd]

Do i need to run this inside the UI folder or root folder?

[dev-bre]

root folder from another terminal window.

…

On Sat, 12 Aug 2023 at 10:23, Zeeshan Ahmad ***@***.***> wrote: Do i need to run this inside the UI folder or root folder? — Reply to this email directly, view it on GitHub <#30 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAG5GAHXVFLZOKKZSN476YTXU5DSJANCNFSM6AAAAAA2TJJLTM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Zeeshnhmd]

No its not working.
Steps I have followed:-

1. Add this script in root package.json "dev:start-tw:watch": "cd ./packages/ui && npm run build:tw:watch".
2. And then run this script npm run dev:start-tw:watch in the root folder in another terminal

[dev-bre]

the script is already in the root of package.json, you dont have to add it. Please make sure to sync with the latest main branch.

[Zeeshnhmd]

Have a look at the UI let me know if you need any changes.

[dev-bre]

Looks really good @Zeeshnhmd thanks for the effort.

[Zeeshnhmd]

Ok then I will raise a PR for this.

[Zeeshnhmd]

PR raised please have a look.