Admin Shop Pages: Dashboard Page

[sonylomo]

Description

Refer to this Figma Design for the Dashboard Page.

Please use Shadcn for the Data Table and Recharts for charts. Otherwise, please use Tailwind CSS styles.

Tasks

• Implement the designs referenced above
• Make it responsive on mobile if possible

[sonylomo]

This issue was partially fixed by PR #199, however it still needs a lot of UI work and is still open to anyone who wants to complete the dashboard page.

[Avinashshiyani]

Refer to this Figma Design for the Dashboard Page.

Please use Shadcn for the Data Table and Recharts for charts. Otherwise, please use Tailwind CSS styles.

Tasks

• Implement the designs referenced above
• Make it responsive on mobile if possible

Dashboard Page Conversion Proposal

Proposal Overview

Hello team,

I propose converting the Figma design to Tailwind CSS to ensure consistency and achieve a polished UI implementation. I'm ready to take on this task.

Implementation Details

Tools & Technologies:

• 🎨 Figma: Source of the original design.
• 🛠️ Tailwind CSS: Used for efficient and consistent UI development.

Approach

1. Conversion Strategy: Translate Figma designs into Tailwind CSS utility classes for seamless integration.

2. Responsive Design: Implement responsive layouts using Tailwind CSS utilities for optimal viewing on all devices.

Next Steps

I'm eager to proceed with this task and welcome your feedback or questions.

Best regards,
Avinash

[sonylomo]

Hey @Avinashshiyani 👋🏾

As referenced in the comment, we already have Figma designs for the project and use TailwindCSS for implementation.

If you'd like to pick this issue up and implement the referenced Figma design, we are more than happy to receive your contribution. 🙂

[Avinashshiyani]

Hey @Avinashshiyani 👋🏾

As referenced in the comment, we already have Figma designs for the project and use TailwindCSS for implementation.

If you'd like to pick this issue up and implement the referenced Figma design, we are more than happy to receive your contribution. 🙂

So thanks for giving me this chance @sonylomo and i am waiting for the asign for this role

[Avinashshiyani]

Web Page Preview

Hi Team,

I've created a web page based on our Git repository and converted our Figma design into Tailwind CSS using React. You can check it out ⬇️

Could you please take a look and let me know if it aligns with our vision? Specifically, I'd appreciate feedback on:

• Design and layout
• Responsiveness across devices
• Integration of Figma design into the page

Thanks a lot!

Best,
Avinash

[sonylomo]

Web Page Preview

Hi Team,

I've created a web page based on our Git repository and converted our Figma design into Tailwind CSS using React. You can check it out ⬇️

Could you please take a look and let me know if it aligns with our vision? Specifically, I'd appreciate feedback on:

• Design and layout
• Responsiveness across devices
• Integration of Figma design into the page

Thanks a lot!

Best,
Avinash

I think you might have misunderstood the issue.

We DON'T need new Figma designs.

We WANT you to write ReactJS code to implement OUR Figma designs.

If that's what you've done, then please make a Pull Request to the Dev branch. 🙂

[Avinashshiyani]

Web Page Preview

Hi Team,

I've created a web page based on our Git repository and converted our Figma design into Tailwind CSS using React. You can check it out ⬇️

Could you please take a look and let me know if it aligns with our vision? Specifically, I'd appreciate feedback on:

• Design and layout
• Responsiveness across devices
• Integration of Figma design into the page

Thanks a lot!

Best,
Avinash

I think you might have misunderstood the issue.

We DON'T need new Figma designs.

We WANT you to write ReactJS code to implement OUR Figma designs.

If that's what you've done, then please make a Pull Request to the Dev branch. 🙂

I have converted figma to react I just wanted the feedback that it's propely going or not 😅 it's react code only 😇.
It's half done after fully done I will create a pull request.

[sonylomo]

You're doing great so far...keep going 😁🙌🏾💃🏾

[Avinashshiyani]

✨ Update on Figma to Tailwind Conversion ✨

Hi @sonylomo

Just wanted to share a quick update with you! 😊

The Figma to Tailwind conversion page is almost ready. We're about 90% done and are in the final stages of completion. 💪

Stay tuned for the finishing touches! 🚀

Best regards,
Avinash

---

If you have any questions or suggestions, feel free to drop a comment here. 👇