I'll recreate this Ecomflow stock inventory management UI as accurately as possible using Next.js and Tailwind CSS.
I've recreated the Ecomflow stock inventory management UI as shown in the Figma frame. The implementation includes:
Left Sidebar:
- Ecomflow logo
- Navigation menu with the active "Stock inbounds" item
- Settings dropdown with sub-items
- User section at the bottom
Main Content:
- Header section with the title "Restock made simple" and description
- Status cards showing different counts (all showing 0)
- Search bar and filter buttons
- "New Stock Inbound" button with the green color and plus icon
Data Table:
- Column headers with sort indicators
- Five rows with different statuses (Upload, Packing list received, Waiting for stock, etc.)
- Status badges with appropriate colors
- Download buttons for each row
- Re-upload button with info
- Information tooltip explaining why re-upload is needed
- Pagination controls at the bottom with page navigation
Interactive Elements:
- Tooltip explaining "Why Re-upload the Packing List?" with detailed information
- Row selection indicator showing "1 of 100 row(s) selected"
- Page navigation controls with first, previous, next, and last buttons
- Rows per page selector set to 10
The implementation follows a clean, professional design with attention to details like:
- Proper spacing and alignment of elements
- Accurate color matching for status indicators
- Responsive layout that maintains the design integrity
- Proper iconography matching the original design
- Attention to typographic details like font weights and sizes
You can now preview and interact with this UI. The table is fully structured with all the elements from the original design, including the status badges, action buttons, and the informational tooltip that appears for the "Packing list received" row.
What do we want to build
Stock Co-Pilot acts like a cockpit for brand owners—showing them exactly what to order and when. It’s all about giving them full insights, they can see everything at a glance and make smart decisions without the stress.
How it works
Stock Levels: You can see exactly how many items you have left to sell for every product
Reorder Alerts: The system looks at how fast your products are selling and how long your factory takes to deliver (lead time). It adds a little extra time as a safety buffer, then tells you when it’s time to place a new order so you don’t run out of stock.
Days Left: It calculates how many days of sales you have before your stock hits zero, based on your current sales pace. For example, if you’re selling 10 units a day and have 50 left, it’ll say “5 days.”
Featuring Best Sellers: Your top-selling products get highlighted in the dashboard. This lets you quickly see what’s moving fastest and prioritize keeping those items in stock.
Peak Expectations: You can set up alerts for busy sales periods—like Mother’s Day, Black Friday, Christmas, Valentine’s Day, or a big summer sale. Tell the system when these events are and how much extra stock you expect to need (e.g., 50% more sales), and it’ll tweak the reorder alerts and days-left estimates to make sure you’re ready for the rush.
Featuring Best Sellers: Your top-selling products get highlighted in the dashboard. This lets you quickly see what’s moving fastest and prioritize keeping those items in stock, since they’re the ones driving your sales.
Auto-Reorder (Later Addition): Eventually, we’ll add a button that writes a reorder message for you. You can choose how much stock to order—like enough for 1 month, 2 months, or a custom amount you type in. Once you approve it, we draft the message you can send to the factory.
Analytics Dashboard: You’ll get a clear view of everything—stock levels, sales trends, and reorder needs—split up by product and factory. It’s all in one place, easy to understand.
Also above but I think the most important data for the quick analytics insights:
- Stock Levels: You can see exactly how many items you have left to sell for every product
- Reorder Alerts: The system looks at how fast your products are selling and how long your factory takes to deliver (lead time). It adds a little extra time as a safety buffer, then tells you when it’s time to place a new order so you don’t run out of stock.
- Days Left: It calculates how many days of sales you have before your stock hits zero, based on your current sales pace. For example, if you’re selling 10 units a day and have 50 left, it’ll say “5 days.”
- Featuring Best Sellers + Runway: Your top-selling products get highlighted in the dashboard. This lets you quickly see what’s moving fastest and prioritize keeping those items in stock.
Bestsellers tab:
- Bestsellers sales volume
- Bestsellers runway sales + warnings
I'll create a Stock Co-Pilot dashboard based on your requirements. This will be a comprehensive inventory management system that gives brand owners clear insights into their stock levels, reordering needs, and sales performance.
I've created a comprehensive Stock Co-Pilot dashboard that addresses all the requirements you specified. This dashboard serves as a "cockpit" for brand owners, providing them with clear insights into their inventory management needs.
Key Features Implemented:
Stock Level Monitoring
- Visual indicators showing current stock levels across all products
- Color-coded status badges (Healthy, Low Stock, Critical, Out of Stock)
- Progress bars showing distribution of inventory health
Reorder Alert System
- Smart alerts based on sales velocity and lead times
- Priority-based reordering recommendations
- Lead time analysis by supplier
- Bulk order opportunities
Days Left Calculations
- Clear display of runway for each product based on current sales pace
- Visual warnings when stock is running low
- Projected stockout dates
Best Sellers Highlights
- Dedicated tab for top-performing products
- Sales volume and revenue metrics
- Stock status of best sellers with runway indicators
- Contribution analysis showing how much of your business relies on top products
Peak Period Planning
- Upcoming peak periods with countdown timers
- Sales increase expectations for each period
- Preparation recommendations
Analytics Dashboard
- Sales and stock trend visualization
- Inventory health metrics (turnover rate, days on hand, stockout rate)
- Category and supplier performance analysis
The dashboard is organized into four main tabs:
- Overview - A high-level summary of your inventory status
- Best Sellers - Focus on your top-performing products
- Reorder Alerts - Products that need attention and reordering
- Analytics - Deeper insights into inventory performance
This interface gives brand owners everything they need to make smart inventory decisions without the stress, helping them avoid stockouts of critical products while optimizing their inventory investment.