Your Job is to Provide UI Mockups of the EcoPackables Enterprise Dashboard, inspired by the design system of ShadCN UI and the provided Figma designs and existing routes.
- Familiarize yourself with the provided Figma designs. Here are the routes in question:
- Home - which will correspond to
/enterprise/dashboard
- Clients - which will correspond to
/enterprise/dashboard/clients
- Messages - which will correspond to
/enterprise/dashboard/messages
- Products - which will correspond to
/enterprise/dashboard/products
- Quotes - which will correspond to
/enterprise/dashboard/quotes
- Orders - which will correspond to
/enterprise/dashboard/orders
- Files - which will correspond to
/enterprise/dashboard/files
- Home - which will correspond to
- Use the current product's
/dashboard
and its other routes as your primary inspiration.
- Design a list or list items for messages.
- Use the Messages component in the slash dashboard route for inspiration.
- If you get to here, talk to Braden before proceeding.
- After completing the above routes, continue to scaffold:
Most importantly, keep in touch with Braden throughout for answering questions. This document is noncomprehensive
Incorporating ShadCN TailwindCSS Design Inspiration
- Visit the official ShadCN documentation: ShadCN
- View ShadCN example components: ShadCN Example Components
- Refer to the ShadCN UI GitHub Repository for examples and documentation: ShadCN UI GitHub Repo
Feel free to copy and paste from these as needed
- Investigate the Taxonomy Project that utilizes ShadCN's components in a real-world setting.
- Browse the project here: Taxonomy Project
- Review the GitHub repository: Taxonomy GitHub Repo
Feel free to copy and paste from these as needed
Some extra pointers for the other routes:
/products
, take inspiration from the categories section listed in the/
and/categories
. this should hopefully reduce time you spend coding/quotes
, you are making a data table. The four cards on the top are clickable/orders
/files
, the design of the list can either be inspired from your previous design, or could also be another data table. If you are comfortable making data tables, a data table would be preferred