VK
Vic Kipyego

Dashboard - Copy this React, Tailwind Component to your project

"Create a UI for a Flask App Builder (FAB) project dashboard that displays procurement notices by status using charts. The UI should include the following elements: Dashboard Layout: A navigation bar at the top with links to different categories. A left hand side menu with sections for 'Procurement' and other possible categories. The main content area displaying a chart that shows procurement notices grouped by their status. Chart View: A bar chart titled 'Procurement Notices by Status' that displays the total count of procurement notices for each status (e.g., Open, Closed, Awarded). The chart should allow filtering and sorting by different statuses. The data is grouped by a column named 'status' from the database, and each status type should be color coded for clarity. Procurement Notices Table: A table view below the chart, listing individual procurement notices with columns for 'Status,' 'Description,' and any other relevant fields. Each row should include an action button (e.g., 'View Details') to drill down into more information about that procurement notice. User Management Section: An admin login section that allows the admin to log in and manage users. Admin can create, edit, and delete procurement notices from the dashboard. Styling: Use a clean, modern design with icons for chart categories and tooltips for additional information. The chart should use a color scheme that distinguishes each status type clearly, with a responsive layout that adjusts to different screen sizes. Generate the HTML, CSS, and JavaScript necessary for this dashboard UI."

Prompt
Component Preview

About

Dashboard - A procurement dashboard with a top nav, side menu, status charts, a detailed table, and user management, built with React. Get code instantly!

Share

Last updated 1 month ago