Tasks for EcoPackables

tasks.md

Introduction

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.

Step 1: Understanding the Dashboard 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

Step 2: Scaffolding /enterprise/dashboard

• Use the current product's /dashboard and its other routes as your primary inspiration.

Step 3: Scaffolding /enterprise/dashboard/clients

• For this, create a data table using ShadCNN.
• Employ best practices to match the scaffolded layout.

Step 4: Scaffolding /enterprise/dashboard/messages

• Design a list or list items for messages.
• Use the Messages component in the slash dashboard route for inspiration.

Step 5: Proceeding with Other Routes under /enterprise/dashboard

• If you get to here, talk to Braden before proceeding.
• After completing the above routes, continue to scaffold:
  • Products
  • Quotes
  • Orders
  • Files

Most importantly, keep in touch with Braden throughout for answering questions. This document is noncomprehensive

Section 2: Design Guidelines and Resources

Incorporating ShadCN TailwindCSS Design Inspiration

Resource 1: ShadCN UI's Documentation

• 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

Resource 2: ShadCN's Taxonomy Project

• 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:

• for /products, take inspiration from the categories section listed in the / and /categories . this should hopefully reduce time you spend coding 
• for /quotes, you are making a data table. The four cards on the top are clickable
  • (for reference) when clicked, the four cards will make the table filter down to only the rows that say "RFQ to Review", "RFQs Sent", "RFQs Returned", "Quote Sent"
• the same applies for /orders
• for /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