Update the existing Executive Commercial Summary dashboard (do not rebuild or change layout). Keep all current filters and KPIs exactly as they are. Apply the following improvements and adjustments based on leadership feedback to make the dashboard more actionable while maintaining a clean, balanced layout.

Replace the Daily Operational Throughput chart with a new chart titled “Cumulative Progress Toward Period Goal.” This should display cumulative totals for Ordered, Shipped, and Produced pounds across the selected time range, along with additional dashed lines for cumulative Forecast and cumulative Budget to show pacing toward goals. The tooltip for each date should show cumulative totals for all five series as well as the variance from Forecast and Budget. Keep a clear legend and consistent line styling (solid for actuals, dashed for targets). This chart should provide a broader, period-level view of operational throughput rather than day-to-day noise.

Next to this, keep the Performance vs Forecast chart but update it so that the Budget line is always included alongside Actual and Forecast. Do not add Budget as a selectable metric—display all three together. The chart should continue allowing drilldown by metric (Ordered, Shipped, Produced). Ensure consistent axes and formatting with the new cumulative chart.

Improve the Inventory vs Order Backlog section by adding a new table next to it titled “Product Balance Watchlist (Next 5 Days).” This table should display products that are projected to face constraints within the next five days. Include columns for Product, FG Inventory (today), Backlog (total next 5 days), Scheduled Production (next 5 days), and Projected Shortfall (Backlog − [FG Inventory + Scheduled Production]). Only show products where the shortfall is greater than zero. Add simple risk-level color cues based on shortfall severity and make each row expandable or hoverable to reveal a 5-day mini-trend for that product. Clicking a product filters the main Inventory vs Backlog chart to that product.

Next to the Order Lifecycle Analysis chart, add a table titled “Customer Order Pipeline Summary.” This table should list each customer with columns for Open, Shipped, Invoiced, Cancelled, and % Open = Open ÷ (Open + Shipped + Invoiced + Cancelled). Sort customers by % Open descending by default. Clicking a customer filters the lifecycle chart to that customer, and clicking chart elements filters the table.

Add a compact “At-Risk Orders” section below these lifecycle visuals. On the left, include a stacked bar chart where the x-axis is Promise Date and each bar shows late open orders segmented into 1–3 days late, 4–7 days late, and 8+ days late using light amber to red. On the right, include a collapsible table of those late orders showing Order #, Customer, Promise Date, Days Late, Current Status, Order Pounds, and Branch. Clicking any bar filters the table; default the table collapsed to save space.

Keep the Detailed Data View at the bottom unchanged, but make it respond to filtering from any of the new tables and charts. Ensure spacing and card proportions remain consistent so the dashboard remains well-balanced on a single scroll view.

index.html

@@ -263,23 +263,22 @@
         </div>
 <!-- First Chart Row -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-            <!-- Daily Operational Throughput -->
+            <!-- Cumulative Progress Toward Period Goal -->
             <div class="bg-white p-4 rounded-lg shadow-md">
                 <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-lg font-semibold text-gray-800">Daily Operational Throughput</h2>
+                    <h2 class="text-lg font-semibold text-gray-800">Cumulative Progress Toward Period Goal</h2>
                     <div class="flex space-x-2">
                         <button class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">Reset</button>
                     </div>
                 </div>
                 <div class="chart-container">
-                    <canvas id="throughputChart"></canvas>
+                    <canvas id="cumulativeChart"></canvas>
                 </div>
             </div>
-
-            <!-- Performance vs Forecast -->
+            <!-- Performance vs Forecast & Budget -->
             <div class="bg-white p-4 rounded-lg shadow-md">
                 <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-lg font-semibold text-gray-800">Performance vs Forecast</h2>
+                    <h2 class="text-lg font-semibold text-gray-800">Performance vs Forecast & Budget</h2>
                     <div class="flex space-x-2">
                         <select id="metricToggle" class="text-xs border border-gray-300 rounded px-2 py-1">
                             <option>Ordered</option>
@@ -293,24 +292,57 @@
                     <canvas id="forecastChart"></canvas>
                 </div>
             </div>
-        </div>
+</div>
 
         <!-- Second Chart Row -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-            <!-- Inventory vs Order Backlog -->
-            <div class="bg-white p-4 rounded-lg shadow-md">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-lg font-semibold text-gray-800">Inventory vs Order Backlog</h2>
-                    <div class="flex space-x-2">
-                        <button class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">Reset</button>
+            <!-- Inventory Management -->
+            <div class="grid grid-cols-1 gap-4">
+                <div class="bg-white p-4 rounded-lg shadow-md">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-semibold text-gray-800">Inventory vs Order Backlog</h2>
+                        <div class="flex space-x-2">
+                            <button class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">Reset</button>
+                        </div>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="inventoryChart"></canvas>
                     </div>
                 </div>
-                <div class="chart-container">
-                    <canvas id="inventoryChart"></canvas>
+                <div class="bg-white p-4 rounded-lg shadow-md">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Product Balance Watchlist (Next 5 Days)</h2>
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50">
+                                <tr>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">FG Inventory</th>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Backlog</th>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled Prod</th>
+                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projected Shortfall</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200">
+                                <tr class="hover:bg-gray-50 cursor-pointer" onclick="filterInventoryChart('Premium')">
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Premium</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">12,500</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">18,200</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">4,800</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-red-700">800</td>
+                                </tr>
+                                <tr class="hover:bg-gray-50 cursor-pointer" onclick="filterInventoryChart('Custom')">
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Custom</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">8,700</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">11,500</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">3,200</td>
+                                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-amber-600">400</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
-
-            <!-- Financial Performance Breakdown -->
+<!-- Financial Performance Breakdown -->
             <div class="bg-white p-4 rounded-lg shadow-md">
                 <div class="flex justify-between items-center mb-4">
                     <h2 class="text-lg font-semibold text-gray-800">Financial Performance Breakdown</h2>
@@ -327,74 +359,121 @@
                 </div>
             </div>
         </div>
-
         <!-- Order Lifecycle Analysis -->
-        <div class="bg-white p-4 rounded-lg shadow-md mb-6">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-lg font-semibold text-gray-800">Order Lifecycle Analysis</h2>
-                <div class="flex space-x-2">
-                    <button class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">Reset</button>
-                </div>
-            </div>
-            <div class="chart-container">
-                <canvas id="lifecycleChart"></canvas>
-            </div>
-        </div>
-        <!-- At-Risk Orders -->
-        <div class="bg-white p-4 rounded-lg shadow-md mb-6">
-            <h2 class="text-lg font-semibold text-gray-800 mb-4">At-Risk Orders</h2>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <!-- Chart -->
-                <div>
-                    <div class="chart-container">
-                        <canvas id="atRiskChart"></canvas>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            <div class="bg-white p-4 rounded-lg shadow-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-semibold text-gray-800">Order Lifecycle Analysis</h2>
+                    <div class="flex space-x-2">
+                        <button class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">Reset</button>
                     </div>
                 </div>
-                <!-- Table -->
+                <div class="chart-container">
+                    <canvas id="lifecycleChart"></canvas>
+                </div>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow-md">
+                <h2 class="text-lg font-semibold text-gray-800 mb-4">Customer Order Pipeline Summary</h2>
                 <div class="overflow-x-auto">
                     <table class="min-w-full divide-y divide-gray-200">
                         <thead class="bg-gray-50">
                             <tr>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order #</th>
                                 <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Promise Date</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Days Late</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pounds</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Open</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shipped</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoiced</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cancelled</th>
+                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">% Open</th>
                             </tr>
                         </thead>
                         <tbody class="bg-white divide-y divide-gray-200">
-                            <tr>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">ORD-1001</td>
+                            <tr class="hover:bg-gray-50 cursor-pointer" onclick="filterLifecycleChart('Acme Corp')">
                                 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Acme Corp</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2023-06-05</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-red-600 font-medium">3</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Open</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">5,200</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">25</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">18</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">15</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-amber-600">42%</td>
                             </tr>
-                            <tr>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">ORD-1002</td>
+                            <tr class="hover:bg-gray-50 cursor-pointer" onclick="filterLifecycleChart('Beta LLC')">
                                 <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Beta LLC</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2023-06-03</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-red-800 font-medium">5</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Processing</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">8,400</td>
-                            </tr>
-                            <tr>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">ORD-1003</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Gamma Inc</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2023-05-30</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-red-900 font-medium">9</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Open</td>
-                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">12,700</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">12</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">22</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">18</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">1</td>
+                                <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-blue-600">23%</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
         </div>
-
-        <!-- Detailed Data View -->
+        <!-- At-Risk Orders -->
+        <div class="bg-white p-4 rounded-lg shadow-md mb-6">
+            <h2 class="text-lg font-semibold text-gray-800 mb-4">At-Risk Orders</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Chart -->
+                <div>
+                    <div class="chart-container">
+                        <canvas id="atRiskChart"></canvas>
+                    </div>
+                </div>
+                <!-- Collapsible Table -->
+                <div>
+                    <button id="toggleRiskTable" class="w-full px-4 py-2 bg-gray-100 text-left font-medium text-gray-800 hover:bg-gray-200 flex justify-between items-center mb-2">
+                        <span>Late Orders Detail View</span>
+                        <i data-feather="chevron-down" class="transform transition-transform duration-200"></i>
+                    </button>
+                    <div id="riskTableContent" class="collapsible-content">
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead class="bg-gray-50">
+                                    <tr>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order #</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Promise Date</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Days Late</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pounds</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Branch</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-white divide-y divide-gray-200">
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">ORD-1001</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Acme Corp</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2023-06-05</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-red-600 font-medium">3</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Open</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">5,200</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">North</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">ORD-1002</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Beta LLC</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2023-06-03</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-red-800 font-medium">5</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Processing</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">8,400</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">South</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">ORD-1003</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Gamma Inc</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">2023-05-30</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-red-900 font-medium">9</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">Open</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">12,700</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">West</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+<!-- Detailed Data View -->
 <div class="bg-white rounded-lg shadow-md overflow-hidden">
             <button id="toggleTable" class="w-full px-4 py-3 bg-gray-100 text-left font-medium text-gray-800 hover:bg-gray-200 flex justify-between items-center">
                 <span>Detailed Data View</span>
@@ -455,84 +534,131 @@
             document.getElementById('endDate').valueAsDate = today;
 
 feather.replace();
-            
-            // Toggle table visibility
+            // Toggle table visibilities
             const toggleTable = document.getElementById('toggleTable');
             const tableContent = document.getElementById('tableContent');
-            const chevron = toggleTable.querySelector('i');
+            const tableChevron = toggleTable.querySelector('i');
             
             toggleTable.addEventListener('click', function() {
                 tableContent.classList.toggle('expanded');
                 const isExpanded = tableContent.classList.contains('expanded');
-                chevron.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+                tableChevron.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
             });
 
-            // Sample data for charts (in a real app, this would come from an API)
-            const dates = Array.from({length: 30}, (_, i) => `Day ${i+1}`);
+            const toggleRiskTable = document.getElementById('toggleRiskTable');
+            const riskTableContent = document.getElementById('riskTableContent');
+            const riskChevron = toggleRiskTable.querySelector('i');
             
-            // Throughput Chart
-            const throughputCtx = document.getElementById('throughputChart').getContext('2d');
-            const throughputChart = new Chart(throughputCtx, {
-                type: 'line',
-                data: {
-                    labels: dates,
-                    datasets: [
-                        {
-                            label: 'Ordered',
-                            data: Array.from({length: 30}, () => Math.floor(Math.random() * 50000) + 30000),
-                            borderColor: '#001f3f',
-                            backgroundColor: 'transparent',
-                            tension: 0.1
-                        },
-                        {
-                            label: 'Shipped',
-                            data: Array.from({length: 30}, () => Math.floor(Math.random() * 45000) + 28000),
-                            borderColor: '#0074D9',
-                            backgroundColor: 'transparent',
-                            tension: 0.1
-                        },
-                        {
-                            label: 'Produced',
-                            data: Array.from({length: 30}, () => Math.floor(Math.random() * 48000) + 29000),
-                            borderColor: '#7FDBFF',
-                            backgroundColor: 'transparent',
-                            tension: 0.1
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            ticks: {
-                                callback: function(value) {
-                                    return (value / 1000) + 'k';
-                                }
-                            },
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.05)'
+            toggleRiskTable.addEventListener('click', function() {
+                riskTableContent.classList.toggle('expanded');
+                const isExpanded = riskTableContent.classList.contains('expanded');
+                riskChevron.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+            });
+
+            // Filter functions
+            function filterInventoryChart(product) {
+                console.log(`Filtering inventory chart for ${product}`);
+                // In a real app, this would update the chart data
+            }
+
+            function filterLifecycleChart(customer) {
+                console.log(`Filtering lifecycle chart for ${customer}`);
+                // In a real app, this would update the chart data
+            }
+// Sample data for charts (in a real app, this would come from an API)
+            const dates = Array.from({length: 30}, (_, i) => `Day ${i+1}`);
+        // Cumulative Progress Chart
+        const cumulativeCtx = document.getElementById('cumulativeChart').getContext('2d');
+        const cumulativeChart = new Chart(cumulativeCtx, {
+            type: 'line',
+            data: {
+                labels: dates,
+                datasets: [
+                    {
+                        label: 'Cumulative Ordered',
+                        data: Array.from({length: 30}, (_, i) => 30000 * (i + 1) + Math.floor(Math.random() * 100000)),
+                        borderColor: '#001f3f',
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        tension: 0.1
+                    },
+                    {
+                        label: 'Cumulative Shipped',
+                        data: Array.from({length: 30}, (_, i) => 28000 * (i + 1) + Math.floor(Math.random() * 90000)),
+                        borderColor: '#0074D9',
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        tension: 0.1
+                    },
+                    {
+                        label: 'Cumulative Produced',
+                        data: Array.from({length: 30}, (_, i) => 29000 * (i + 1) + Math.floor(Math.random() * 95000)),
+                        borderColor: '#7FDBFF',
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        tension: 0.1
+                    },
+                    {
+                        label: 'Cumulative Forecast',
+                        data: Array.from({length: 30}, (_, i) => 32000 * (i + 1)),
+                        borderColor: '#001f3f',
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        tension: 0.1
+                    },
+                    {
+                        label: 'Cumulative Budget',
+                        data: Array.from({length: 30}, (_, i) => 30000 * (i + 1)),
+                        borderColor: '#2ECC40',
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        tension: 0.1
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: function(value) {
+                                return (value / 1000) + 'k';
                             }
                         },
-                        x: {
-                            grid: {
-                                display: false
-                            }
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.05)'
                         }
                     },
-                    plugins: {
-                        tooltip: {
-                            callbacks: {
-                                label: function(context) {
-                                    return context.dataset.label + ': ' + context.raw.toLocaleString() + ' lbs';
+                    x: {
+                        grid: {
+                            display: false
+                        }
+                    }
+                },
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                let label = context.dataset.label || '';
+                                label += ': ' + context.raw.toLocaleString() + ' lbs';
+                                if (context.datasetIndex < 3) {
+                                    const variance = context.raw - context.chart.data.datasets[3].data[context.dataIndex];
+                                    label += '\nvs Forecast: ' + (variance >= 0 ? '+' : '') + (variance / 1000).toFixed(1) + 'k';
+                                    
+                                    const budgetVariance = context.raw - context.chart.data.datasets[4].data[context.dataIndex];
+                                    label += '\nvs Budget: ' + (budgetVariance >= 0 ? '+' : '') + (budgetVariance / 1000).toFixed(1) + 'k';
                                 }
+                                return label;
                             }
                         }
                     }
                 }
-            });
-
+            }
+        });
             // Forecast Chart
             const forecastCtx = document.getElementById('forecastChart').getContext('2d');
             const forecastChart = new Chart(forecastCtx, {
@@ -545,6 +671,7 @@ feather.replace();
                             data: Array.from({length: 30}, () => Math.floor(Math.random() * 50000) + 30000),
                             borderColor: '#001f3f',
                             backgroundColor: 'transparent',
+                            borderWidth: 2,
                             tension: 0.1
                         },
                         {
@@ -552,12 +679,22 @@ feather.replace();
                             data: Array.from({length: 30}, () => Math.floor(Math.random() * 48000) + 32000),
                             borderColor: '#001f3f',
                             backgroundColor: 'transparent',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            tension: 0.1
+                        },
+                        {
+                            label: 'Budget Ordered',
+                            data: Array.from({length: 30}, () => Math.floor(Math.random() * 47000) + 31000),
+                            borderColor: '#2ECC40',
+                            backgroundColor: 'transparent',
+                            borderWidth: 2,
                             borderDash: [5, 5],
                             tension: 0.1
                         }
                     ]
                 },
-                options: {
+options: {
                     responsive: true,
                     maintainAspectRatio: false,
                     scales: {
@@ -876,23 +1013,23 @@ const lifecycleChart = new Chart(lifecycleCtx, {
                     }
                 }
             });
-
             // Update forecast chart when metric changes
             document.getElementById('metricToggle').addEventListener('change', function() {
                 const metric = this.value;
                 
-                // Update dataset labels and data based on selected metric
+                // Update all dataset labels and data based on selected metric
                 forecastChart.data.datasets[0].label = 'Actual ' + metric;
                 forecastChart.data.datasets[1].label = 'Forecast ' + metric;
+                forecastChart.data.datasets[2].label = 'Budget ' + metric;
                 
                 // Generate new random data for the selected metric
                 forecastChart.data.datasets[0].data = Array.from({length: 30}, () => Math.floor(Math.random() * 50000) + 30000);
                 forecastChart.data.datasets[1].data = Array.from({length: 30}, () => Math.floor(Math.random() * 48000) + 32000);
+                forecastChart.data.datasets[2].data = Array.from({length: 30}, () => Math.floor(Math.random() * 47000) + 31000);
                 
                 forecastChart.update();
             });
-
-            // Update financial chart when view changes
+// Update financial chart when view changes
             document.getElementById('financialViewToggle').addEventListener('change', function() {
                 const view = this.value;
                 
@@ -916,7 +1053,6 @@ const lifecycleChart = new Chart(lifecycleCtx, {
                 
                 financialChart.update();
             });
-
             // Date range filter handler
             const dateInputs = document.querySelectorAll('#startDate, #endDate');
             dateInputs.forEach(input => {
@@ -929,7 +1065,7 @@ const lifecycleChart = new Chart(lifecycleCtx, {
                         console.log(`Date range changed: ${startDate} to ${endDate}`);
                         
                         // Update all charts with new date range
-                        throughputChart.update();
+                        cumulativeChart.update();
                         forecastChart.update();
                         inventoryChart.update();
                         financialChart.update();
@@ -938,7 +1074,7 @@ const lifecycleChart = new Chart(lifecycleCtx, {
                     }
                 });
             });
-        });
+});
 </script>
 </body>
 </html>