Used AI to restructure the razor pages into distinct nodes.

Pages/Nodes/FluviusUploadNode.razor

@@ -1 +1,103 @@
- <!-- html/razor layout specifically for the first fluvious block and also the code specific for this block. It should feedback to the shared data arrays in home.  -->
+ @using Radzen
+@using Radzen.Blazor
+@using BattSim.Models
+@using BattSim.Services
+
+<div class="pipeline-box @GetPipelineStepClasses(StepData)">
+    <div class="box-header" @onclick="ToggleBox">
+        <div class="step-number">1</div>
+        <div class="step-title">Fluvius Data</div>
+        <div class="status-indicator"></div>
+    </div>
+    <div class="box-content">
+        <div class="box-content-inner">
+            <p class="box-description">Upload je Fluvius kwartierdata om te beginnen</p>
+            
+            <div class="form-section">
+                <div class="file-input-wrapper">
+                    <InputFile type="file" id="fileUpload" accept=".csv" onchange="async (e) => await OnFileUploaded(e)" />
+                    <label for="fileUpload" class="file-input-label">
+                        @if (StepData.isProcessing)
+                        {
+                            <div class="loading-indicator">
+                                <div class="spinner"></div>
+                                <span style="margin-left: 10px;">Data aan het inladen...</span>
+                            </div>
+                        }
+                        else
+                        {
+                            @if (FluviusDataRaw.Length == 0)
+                            {
+                                <text>Kies CSV bestand</text>
+                            }
+                            else
+                            {
+                                <text>OK @FluviusDataRaw.Length kwartieren geladen</text>
+                            }
+                        }
+                    </label>
+                    @if (FluviusDataRaw.Length > 0 && !StepData.isProcessing)
+                    {
+                        <p class="file-name">@UploadedFileName</p>
+                    }
+                </div>
+            </div>
+            
+            @if (StepData.Completed)
+            {
+                <div class="success-message">
+                    Data succesvol ingeladen en verwerkt!
+                </div>
+            }
+            @if (UploadError != null)
+            {
+                <div class="error-message">
+                    @UploadError
+                </div>
+            }
+            
+            <div class="info-text">
+                <p><strong>Tip:</strong> Download een volledig jaar aan kwartierdata voor de meest accurate resultaten.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public EnergyData[] FluviusDataRaw { get; set; } = [];
+    
+    [Parameter]
+    public PipelineStep StepData { get; set; }
+    
+    [Parameter]
+    public string UploadedFileName { get; set; } = string.Empty;
+    
+    [Parameter]
+    public string? UploadError { get; set; }
+    
+    [Parameter]
+    public EventCallback<InputFileChangeEventArgs> OnFileUploadedCallback { get; set; }
+    
+    [Parameter]
+    public EventCallback OnToggleBoxCallback { get; set; }
+    
+    private string GetPipelineStepClasses(PipelineStep step)
+    {
+        var classes = new List<string>();
+        if (step.Expanded) classes.Add("expanded");
+        if (step.Completed) classes.Add("completed");
+        if (step.isProcessing) classes.Add("running");
+        return string.Join(" ", classes);
+    }
+    
+    private async Task OnFileUploaded(InputFileChangeEventArgs e)
+    {
+        await OnFileUploadedCallback.InvokeAsync(e);
+    }
+    
+    private void ToggleBox()
+    {
+        OnToggleBoxCallback.InvokeAsync();
+    }
+}