CC
Code Craka

Dashboard Overview - Copy this React, Tailwind Component to your project

Button Components: “Develop reusable button components for the Afilo Dashboard. Include the following types: • Primary Button: For main actions like ‘Submit’ or ‘Save’, styled with bg-primary-500 and text-white. • Secondary Button: For secondary actions like ‘Cancel’ or ‘Edit’, styled with bg-secondary-500 and text-white. • Danger Button: For critical actions like ‘Delete’, styled with bg-danger-50 and text-dark-900. Each button should have hover and active states for better interactivity.” 4. Promoters and Campaigns Page: “Design a Promoters page for the Afilo Dashboard that lists all promoters with details such as Name, Email, Total Sales, and Commission Earned. Include a filtering option at the top to filter promoters by date, sales, or commission. For the Campaigns page, provide a similar layout, showing all active and past campaigns with filters for date range, campaign status, and performance metrics. Ensure that both pages are styled consistently and are responsive.” 5. Charts and Data Visualization: “Build two chart components for the Afilo Dashboard to visualize affiliate analytics data. The first chart (Chart1) should display monthly sales performance, and the second chart (Chart2) should show customer growth over time. Use placeholders for dynamic data, which will be fetched via API in the future. Ensure the charts are styled with Tailwind CSS, support different color themes, and adjust gracefully for various screen sizes.” 6. Global Styles and Theming: “Implement global styles using Tailwind CSS for the Afilo Dashboard. Use custom colors like dark shades (#131a24, #212c3d), primary colors (#4d9488, #6cd0bf), and secondary colors (#5a88ff, #7ba0ff). Set a global font family to ‘Rubik’ and apply typography styles to headings, paragraphs, and buttons. Add utility classes for margins, paddings, and custom styles for components like cards, buttons, and tables.” 7. Footer and Additional Pages: “Create a footer for the Afilo Dashboard with links to Privacy Policy, Terms of Service, Contact Us, and a Newsletter Signup form. Also, build additional pages such as: • Referred Leads Page: Display a list of leads with filters for date range, lead source, and conversion status. • Reports Page: Provide detailed reports on affiliate activities, earnings, and performance metrics. Ensure that each page follows the overall design theme and is optimized for both desktop and mobile devices.”

Prompt

About

DashboardOverview - Create a responsive dashboard with a top nav, search bar, user info, key metrics cards, and dynamic charts, built. Download code free!

Share

Last updated 1 month ago