fix: minor optical changes on the upload side

resources/views/components/layouts/app/sidebar.blade.php

@@ -16,7 +16,7 @@
                     <flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>{{ __('Übersicht') }}</flux:navlist.item>
                     <flux:navlist.item icon="magnifying-glass" :href="route('company-search')" :current="request()->routeIs('company-search')" wire:navigate>{{ __('Unternehmensauskunft') }}</flux:navlist.item>
                     <flux:navlist.item icon="shield-check" :href="route('transaction-review')" :current="request()->routeIs('transaction-review')" wire:navigate>{{ __('Transaktionsprüfung') }}</flux:navlist.item>
-                    <flux:navlist.item icon="arrow-up-tray" :href="route('upload')" :current="request()->routeIs('upload')" wire:navigate>{{ __('Datei-Upload') }}</flux:navlist.item>
+                    <flux:navlist.item icon="arrow-up-tray" :href="route('upload')" :current="request()->routeIs('upload')" wire:navigate>{{ __('Upload neuer Transaktionen') }}</flux:navlist.item>
                 </flux:navlist.group>
             </flux:navlist>
 

resources/views/livewire/upload/index.blade.php

@@ -7,11 +7,18 @@ new class extends Component
     //
 }; ?>
 
-<div class="min-h-screen bg-gray-50 dark:bg-zinc-900 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-2xl mx-auto">
-        <div class="bg-white dark:bg-zinc-800 shadow rounded-lg p-8">
-            <flux:heading size="xl" class="mb-2">{{ __('File Upload') }}</flux:heading>
-            <flux:subheading class="mb-8">{{ __('Upload files to the processing endpoint') }}</flux:subheading>
+<div class="flex flex-col gap-8">
+    <section class="rounded-3xl border border-slate-200/70 bg-white/95 p-8 shadow-sm backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/90">
+        <div class="max-w-2xl space-y-2">
+            <flux:heading size="xl">{{ __('Upload neuer Transaktionen als CSV Datei') }}</flux:heading>
+            <flux:text>
+                {{ __('Hochladen der Datei zur Verarbeitung durch die Trusted AI Plattform') }}
+            </flux:text>
+        </div>
+    </section>
+
+    <section class="rounded-3xl border border-zinc-200/70 bg-white/95 p-8 shadow-sm backdrop-blur dark:border-zinc-700/70 dark:bg-zinc-900/90">
+        <div class="max-w-2xl mx-auto">
 
             <div x-data="{
                 file: null,
@@ -137,5 +144,5 @@ new class extends Component
                 </ul>
             </div>
         </div>
-    </div>
+    </section>
 </div>

tests/Feature/Livewire/Upload/IndexTest.php

@@ -1,9 +1,6 @@
 <?php
 
 use App\Models\User;
-use Illuminate\Http\UploadedFile;
-use Illuminate\Support\Facades\Http;
-use Illuminate\Support\Facades\Storage;
 use Livewire\Volt\Volt;
 
 it('requires authentication to access upload page', function () {
@@ -17,89 +14,87 @@ it('can render upload page when authenticated', function () {
 
     $this->actingAs($user);
 
-    $component = Volt::test('upload.index');
+    $response = $this->get('/upload');
 
-    $component
-        ->assertSee('File Upload')
+    $response
+        ->assertOk()
+        ->assertSee('Upload neuer Transaktionen als CSV Datei')
+        ->assertSee('Hochladen der Datei zur Verarbeitung durch die Trusted AI Plattform')
         ->assertSee('Select File')
         ->assertSee('Maximum file size: 50 MB')
-        ->assertSee('https://upload.trai.mcs.local/api/upload');
+        ->assertSee('https://upload.trai.mcs.local/api/upload')
+        ->assertSee('Upload File')
+        ->assertSee('Clear');
 });
 
-it('can upload file successfully', function () {
-    Http::fake([
-        'https://upload.trai.mcs.local/api/upload' => Http::response('Success', 200),
-    ]);
-
+it('displays file input with correct attributes', function () {
     $user = User::factory()->create();
+
     $this->actingAs($user);
 
-    Storage::fake('local');
+    $response = $this->get('/upload');
 
-    $file = UploadedFile::fake()->create('document.pdf', 100);
-
-    Volt::test('upload.index')
-        ->set('file', $file)
-        ->call('upload')
-        ->assertSet('uploadStatus', 'success')
-        ->assertSet('uploadMessage', 'File uploaded successfully!')
-        ->assertSet('file', null);
+    $response
+        ->assertOk()
+        ->assertSee('type="file"', false)
+        ->assertSee('id="file-upload"', false)
+        ->assertSee('x-ref="fileInput"', false)
+        ->assertSee('@change="selectFile"', false);
 });
 
-it('validates file is required', function () {
+it('displays alpine.js data structure', function () {
     $user = User::factory()->create();
+
     $this->actingAs($user);
 
-    Volt::test('upload.index')
-        ->set('file', null)
-        ->call('upload')
-        ->assertHasErrors(['file' => 'required']);
+    $response = $this->get('/upload');
+
+    $response
+        ->assertOk()
+        ->assertSee('x-data', false)
+        ->assertSee('file: null', false)
+        ->assertSee('uploading: false', false)
+        ->assertSee('uploadStatus: null', false);
 });
 
-it('validates file size limit', function () {
+it('displays upload button with loading states', function () {
     $user = User::factory()->create();
+
     $this->actingAs($user);
 
-    Storage::fake('local');
+    $response = $this->get('/upload');
 
-    $file = UploadedFile::fake()->create('large.pdf', 51201); // Exceeds 50MB
-
-    Volt::test('upload.index')
-        ->set('file', $file)
-        ->call('upload')
-        ->assertHasErrors('file');
+    $response
+        ->assertOk()
+        ->assertSee('x-show="!uploading"', false)
+        ->assertSee('Upload File')
+        ->assertSee('x-show="uploading"', false)
+        ->assertSee('Uploading...');
 });
 
-it('handles upload errors gracefully', function () {
-    Http::fake([
-        'https://upload.trai.mcs.local/api/upload' => Http::response('Server Error', 500),
-    ]);
-
+it('displays progress bar for upload state', function () {
     $user = User::factory()->create();
+
     $this->actingAs($user);
 
-    Storage::fake('local');
+    $response = $this->get('/upload');
 
-    $file = UploadedFile::fake()->create('document.pdf', 100);
-
-    Volt::test('upload.index')
-        ->set('file', $file)
-        ->call('upload')
-        ->assertSet('uploadStatus', 'error')
-        ->assertSee('Upload failed');
+    $response
+        ->assertOk()
+        ->assertSee('x-show="uploading"', false)
+        ->assertSee('Please wait while your file is being uploaded...');
 });
 
-it('can clear selected file', function () {
+it('displays callout for upload status messages', function () {
     $user = User::factory()->create();
+
     $this->actingAs($user);
 
-    Storage::fake('local');
+    $response = $this->get('/upload');
 
-    $file = UploadedFile::fake()->create('document.pdf', 100);
-
-    Volt::test('upload.index')
-        ->set('file', $file)
-        ->assertSet('file', fn ($value) => $value !== null)
-        ->set('file', null)
-        ->assertSet('file', null);
+    $response
+        ->assertOk()
+        ->assertSee('x-show="uploadStatus"', false)
+        ->assertSee('x-bind:variant', false)
+        ->assertSee('x-text="uploadMessage"', false);
 });

tests/Feature/NavigationTest.php

@@ -7,6 +7,6 @@ it('displays upload link in navigation for authenticated users', function () {
 
     $this->actingAs($user)
         ->get('/dashboard')
-        ->assertSee('Datei-Upload')
+        ->assertSee('Upload neuer Transaktionen')
         ->assertSee(route('upload'));
 });