Changed design in production quantity page

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>