From 2c83ac33c8d5cf5191131a8633ff86a14395b807 Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Sat, 6 Dec 2025 01:31:23 +0400
Subject: [PATCH] fix: show individual storage slots for instant customization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of grouping similar storage slots together:
- Show each storage slot individually for instant customization
- Each NVMe 1, NVMe 2, etc. gets its own section
- Properly displays the preselected drive in each slot
- Shows exact configuration from WHMCS (6 individual drives)

This will now show:
- NVMe 1: Crucial T705 4TB
- NVMe 2: Crucial T705 4TB
- NVMe 3: Crucial T705 4TB
- NVMe 4: Crucial T705 4TB
- NVMe 5: Kioxia CM7-V 3.2TB
- NVMe 6: Kioxia CM7-V 3.2TB

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../new-baremetal.html                        | 66 +++++++++++++------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html b/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html
index 74902bb..2119fe8 100644
--- a/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html	
+++ b/Documents/Vibe Coding Projects/dedicatednodes-redesign/dedicatednodes-bare-metal/new-baremetal.html	
@@ -4596,27 +4596,55 @@ var wpcf7 = {
                      }
                 }
 
-                // Group storage options by signature (content similarity)
-                // This allows us to separate "Consumer Gen4 Slots" from "Enterprise Gen5 Slots" automatically
-                const storageGroups = {};
-                const groupOrder = []; // Preserve order
+                // For instant customization, don't group - show each slot individually
+                // For custom servers, group similar slots together
+                if (isInstant) {
+                    // Show each storage slot individually
+                    groups.storage.forEach((opt, index) => {
+                        const label = document.createElement('div');
+                        label.className = 'section-label';
+                        label.style.marginTop = '1.5rem';
+                        label.textContent = `💿 ${opt.label}`;
+                        container.appendChild(label);
 
-                groups.storage.forEach(opt => {
-                    // Create a signature based on available values.
-                    // We use a simplified signature: text + price of all options
-                    // We trim and lowercase to be robust against minor scraping diffs
-                    const signature = opt.values.map(v => v.text.trim().toLowerCase() + '|' + v.price).join('||');
-                    
-                    if (!storageGroups[signature]) {
-                        storageGroups[signature] = [];
-                        groupOrder.push(signature);
-                    }
-                    storageGroups[signature].push(opt);
-                });
+                        // Create visualizer for this single slot
+                        const visualContainer = document.createElement('div');
+                        visualContainer.className = 'storage-slots-container';
+                        const uniqueSuffix = '-instant-s' + index;
 
-                // Render each group
-                groupOrder.forEach((sig, groupIndex) => {
-                    const groupOpts = storageGroups[sig];
+                        visualContainer.innerHTML = `
+                             <div class="slots-header">
+                                 <span>Slot: <strong>${opt.label}</strong></span>
+                                 <span id="dynamic-slots-status${uniqueSuffix}" style="color:var(--success); font-size:0.75rem;">Configured</span>
+                             </div>
+                             <div class="slots-visual" id="dynamic-slots-visual${uniqueSuffix}">
+                                 <div class="drive-slot filled"></div>
+                             </div>
+                        `;
+                        container.appendChild(visualContainer);
+
+                        // Create individual option grid for this slot
+                        container.appendChild(createOptionGrid(opt, true, -1, isInstant, preselected));
+                    });
+                } else {
+                    // Group storage options by signature for custom servers
+                    const storageGroups = {};
+                    const groupOrder = []; // Preserve order
+
+                    groups.storage.forEach(opt => {
+                        // Create a signature based on available values
+                        const signature = opt.values.map(v => v.text.trim().toLowerCase() + '|' + v.price).join('||');
+
+                        if (!storageGroups[signature]) {
+                            storageGroups[signature] = [];
+                            groupOrder.push(signature);
+                        }
+                        storageGroups[signature].push(opt);
+                    });
+
+                    // Render each group
+                    groupOrder.forEach((sig, groupIndex) => {
+                        const groupOpts = storageGroups[sig];
                     const firstOpt = groupOpts[0];
                     
                     const label = document.createElement('div');