make a demand portal website where the first screen is a general view of the sites + equipments, the second is where the manager of each site is going to fill the total demand for the next year to be checked by the global team afterwards. next there will be a screen to aggregate the detailed information of each site + equipment with the requested demand, the stock, POs made and delivery. make sure that the global request can be detailed per vendor, so the user will enter the total demand for the next year but can choose how many is from each vendor available. after the the sites send each demand request, the global team will analyse and divide each one by months during the whole year. there needs to be a screen where he can set each month value to each demand and vendor
I'll create a comprehensive demand portal website for managing equipment demand across multiple sites. This will include all the screens you mentioned with proper data flow and vendor management.
I've created a comprehensive demand portal website with all the screens you requested. Here's what each screen does:
/)/site-demand)/aggregated-view)/global-analysis)The system provides a complete workflow from initial demand entry by site managers to final monthly planning by the global team, with full vendor management and tracking capabilities throughout the process.
Generate a clean, responsive HTML/CSS/JavaScript portal for annual tyre-demand planning with the following features:
Landing/Dashboard
Displays a map or list of all operational sites.
For each site, show basic equipment counts and current stock levels.
A navigation bar with links to “My Demand,” “Vendor Allocation,” and “Reports.”
My Demand (Site Manager)
On page load, require the user to select their site and equipment group.
Show a form: “Total Tyre Demand for Year YYYY” (numeric input) plus a 12-month breakdown (twelve inputs labeled Jan–Dec).
Include validation (sum of months = total) and a “Save” button.
After saving, show a confirmation summary and a “Edit” option.
Vendor Allocation (Global Manager)
List each site’s submitted total demand in a table with columns: Site, Equipment, Total Demand, Allocated (sum of vendor assignments), Remaining.
For each row, provide an “Allocate Tyres” action that opens a modal or inline form: vendor dropdown + allocated quantity. Allow adding multiple vendors per site/equipment.
Update the table in real time as allocations are entered.
PO & Delivery Tracker
A consolidated view of all purchase orders and deliveries. Columns: Site, Equipment, Vendor, PO #, Qty Ordered, Qty Delivered, Consumption YTD.
Filters by site, vendor, or month.
Status badges for “Ordered,” “In Transit,” “Delivered,” “Consumed.”
Reports & Aggregation
An exportable table or chart that aggregates: demand vs. allocation vs. stock vs. PO vs. delivery vs. consumption.
Show month-by-month line chart of totals across all sites.
General Requirements
Mobile-friendly, responsive layout.
Use semantic HTML5, a modern CSS framework (e.g. Bootstrap or Tailwind), and minimal vanilla JS.
Deliver a complete HTML/CSS/JS scaffold with placeholder data
I'll create a comprehensive, responsive HTML/CSS/JavaScript portal for annual tyre-demand planning. This will be a complete single-page application with all the features you requested.
index.html
This comprehensive HTML portal includes all the features you requested:
The portal is ready to use immediately and can be easily extended with backend integration, additional features, or custom styling. All data is stored in a JavaScript object that can be easily connected to a real database or API.