Changed design in production quantity page

app/Filament/Pages/ProductionQuantityPage.php

@@ -20,6 +20,8 @@ use Route;
 use Illuminate\Support\Facades\Request;
 use Filament\Notifications\Notification;
 use Illuminate\Support\Facades\Auth;
+use Livewire\Attributes\On;
+
 
 class ProductionQuantityPage extends Page implements HasForms
 {
@@ -321,7 +323,8 @@ class ProductionQuantityPage extends Page implements HasForms
                     ->label('Production Order')
                     ->reactive()
                     ->required()
-                    ->columnSpan(1)
+                    //->columnSpan(1)
+                    ->columnSpan(['default' => 1, 'sm' => 1])
                     ->afterStateUpdated(function ($state, callable $get, callable $set): void {
                         $set('item_code', null);
                         $set('item_id', null);
@@ -335,16 +338,16 @@ class ProductionQuantityPage extends Page implements HasForms
                         // }
                     }),
 
-                    TextInput::make('item_code')
+                    // TextInput::make('item_code')
-                    ->label('Item Code')
+                    // ->label('Item Code')
-                    ->columnSpan(1)
+                    // ->columnSpan(1)
-                    ->autofocus(true)
+                    // ->autofocus(true)
-                    //->reactive()
+                    // //->reactive()
-                    ->live(onBlur: true) // avoids per-keystroke triggering
+                    // ->live(onBlur: true) // avoids per-keystroke triggering
-                    ->default(fn () => $this->clear_qr)
+                    // ->default(fn () => $this->clear_qr)
-                    ->extraAttributes([
+                    // ->extraAttributes([
-                        'wire:keydown.enter' => 'processAllValues($event.target.value)',
+                    //     'wire:keydown.enter' => 'processAllValues($event.target.value)',
-                    ]),
+                    // ]),
 
                     Hidden::make('serial_number')
                     ->required(),
@@ -358,7 +361,8 @@ class ProductionQuantityPage extends Page implements HasForms
                     TextInput::make('recent_qr')
                     ->label('Last scanned QR')
                     ->reactive()
-                    ->columnSpan(1)
+                    ->columnSpan(['default' => 1, 'sm' => 2])
+                    //->columnSpan(2)
                     // ->default(function () {
                     //     // Get the latest 'item_id' foreign key from 'production_quantities' table
                     //     $latestProductionQuantity = ProductionQuantity::latest()->first();
@@ -387,11 +391,19 @@ class ProductionQuantityPage extends Page implements HasForms
                     Hidden::make('operator_id')
                     ->default(Filament::auth()->user()->name),
             ])
-            ->columns(7);
+           // ->columns(6);
+           ->columns(['default' => 1, 'sm' => 7]);
     }
 
 
     // Method to process the value when Enter is pressed
+
+    #[On('handleQrScan')]
+    public function handleQrScan($value)
+    {
+        $this->processAllValues($value);
+    }
+
     public function processAllValues($formQRData)
     {
 
@@ -421,6 +433,11 @@ class ProductionQuantityPage extends Page implements HasForms
             $this->recQr = $itemCode && $serialNumber ? "{$itemCode} | {$serialNumber}" : null;
         }
 
+        Notification::make()
+                ->title("Scanned the valid QR code is $formQRData)")
+                ->info()
+                ->send();
+
 
         if (empty($formQRData)) {
             $this->form->fill([

resources/views/filament/pages/production-quantity.blade.php

@@ -7,10 +7,55 @@
         {{ $this->form }}
     </div>
 
+    {{-- <input
+    type="text"
+    id="qr-scan-input"
+    class="border border-gray-300 rounded px-4 py-2 text-sm w-full"
+    placeholder="Scan QR Code & Press Enter"
+    autocomplete="off"
+    autofocus
+/> --}}
+<div class="mb-4">
+    <label for="qr-scan-input" class="block text-sm font-medium text-gray-700 mb-2">
+        SCAN QR CODE
+    </label>
+    <input
+        type="text"
+        id="qr-scan-input"
+        class="border border-gray-300 rounded px-4 py-2 text-sm w-full"
+        placeholder="Scan QR Code & Press Enter"
+        autocomplete="off"
+        autofocus
+    />
+</div>
+
+
+@push('scripts')
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const scanInput = document.getElementById('qr-scan-input');
+        if (!scanInput) return;
+
+        scanInput.addEventListener('keydown', function (event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+
+                const value = scanInput.value.trim();
+
+                if (value !== '') {
+                    Livewire.dispatch('handleQrScan', { value: value });
+                    scanInput.value = '';
+                }
+            }
+        });
+    });
+</script>
+@endpush
+
+
     {{-- Render the chart widget below the form --}}
     <div class="mt-6">
         @livewire(\App\Filament\Widgets\ItemOverview::class)
-
     </div>
 
 </div>