MMPN
Mahesh M P Nair

B O M Builder Dashboard - Copy this React, Tailwind Component to your project

Create a BOM builder UI that resembles a dashboard with the following features: A top section showing statistics with the total parts, unmatched parts, unique parts, manufacturers, MPN, lifecycle statuses (such as End of Life, Not RoHS compliant, Risk, High Risk, and Obsolete). Each statistic should be displayed in a colored card. A central section displaying part details in a table format with the following columns: Quantity, Name, Reference Designator (RefDes), Part Number, Description, Status, State, Version, Last Updated, MPN, Manufacturer, Compliance, Lifecycle, Availability (with star rating), Design Risk, Email Notification, Price Range, and Price. The table should have colored highlights for critical status (e.g., Red for high risk parts, Green for compliant/active parts) and allow sorting based on these columns. On the right, a detailed sidebar should show a selected part's information, including MPN, Manufacturer, Description, Category, Compliance, Datasheet (PDF), Status, Lifecycle status, a design risk score, availability, pricing graphs, vendor options, and lead time details. Include a graph to show market availability trends and price fluctuations. At the bottom, include an "Alternate Parts" section with a pie chart showing part availability from various manufacturers, followed by a list of functional equivalent parts with ratings and status information. The color scheme should be dark themed, similar to the image, with highlights for critical statuses (e.g., Red, Green, and Orange for risk indicators)

Prompt
Component Preview

About

BOMBuilderDashboard - A dark-themed UI with stats, detailed tables, and sidebars for parts info, pricing graphs, and alternate parts. B. Get free template!

Share

Last updated 1 month ago