diff --git a/resources/views/livewire/invoice-data-table.blade.php b/resources/views/livewire/invoice-data-table.blade.php
index c00730a3b..88e64a30a 100644
--- a/resources/views/livewire/invoice-data-table.blade.php
+++ b/resources/views/livewire/invoice-data-table.blade.php
@@ -1,123 +1,3 @@
-{{-- <div>
-    <div class="mb-4">
-        <h2 class="text-lg font-bold text-gray-800">INVOICE DATA TABLE</h2>
-        <div class="mt-2">
-            <hr class="border-t-2 border-gray-300">
-        </div>
-    </div>
-
-    <div class="overflow-x-auto overflow-y-visible">
-        <table class="min-w-[1500px] text-sm text-center border border-gray-300">
-            <thead class="bg-gray-100 font-bold">
-                <tr>
-                    <th class="border px-4 py-2 min-w-[100px]">No</th>
-                    <th class="border px-4 py-2 min-w-[200px]">Material Code</th>
-                    <th class="border px-4 py-2 min-w-[250px]">Serial Number</th>
-                    <th class="border px-4 py-2 min-w-[200px]">Motor Scanned Status</th>
-                    <th class="border px-4 py-2 min-w-[200px]">Pump Scanned Status</th>
-                    <th class="border px-4 py-2 min-w-[250px]">Capacitor Scanned Status</th>
-                    <th class="border px-4 py-2 min-w-[200px]">Scanned Status Set</th>
-                    <th class="border px-4 py-2 min-w-[250px]">Panel Box Supplier</th>
-                    <th class="border px-4 py-2 min-w-[250px]">Panel Box Serial Number</th>
-                    <th class="border px-4 py-2 min-w-[200px]">Scanned Status</th>
-                </tr>
-            </thead>
-            <tbody>
-                @forelse ($invoiceData as $index => $row)
-                    <tr class="border-t">
-                        <td class="border px-4 py-2">{{ $index + 1 }}</td>
-
-                        <td class="border px-4 py-2">{{ $row['code'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['serial_number'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? 'N/A' }}</td>
-                        <td class="border px-4 py-2">{{ $row['scanned_status'] ?? 'N/A' }}</td>
-                    </tr>
-                @empty
-                    <tr>
-                        <td colspan="10" class="text-center py-4 text-gray-500">No data available.</td>
-                    </tr>
-                @endforelse
-            </tbody>
-        </table>
-    </div>
-</div>
-
-<script>
-    window.addEventListener('load-data', event => {
-        Livewire.emit('loadData', event.detail.invoiceNumber);
-    });
-</script> --}}
-
-
-
-{{-- this is code for input box inisde the data grid --}}
-
-
-{{-- <div>
-    <div class="mb-4">
-        <h2 class="text-lg font-bold text-gray-800">INVOICE DATA TABLE</h2>
-        <div class="mt-2">
-            <hr class="border-t-2 border-gray-300">
-        </div>
-    </div>
-
-    <input
-        type="text"
-        wire:model.defer="invoiceNumber"
-        wire:keydown.enter="loadData"
-        placeholder="Enter invoice number and press Enter"
-        class="border rounded px-3 py-2 mb-4"
-    />
-
-    @if($hasSearched)
-        <div class="overflow-x-auto overflow-y-visible">
-            <table class="min-w-[1500px] text-sm text-center border border-gray-300">
-                <thead class="bg-gray-100 font-bold">
-                    <tr>
-                        <th class="border px-4 py-2 min-w-[100px]">No</th>
-                        <th class="border px-4 py-2 min-w-[200px]">Material Code</th>
-                        <th class="border px-4 py-2 min-w-[250px]">Serial Number</th>
-                        <th class="border px-4 py-2 min-w-[200px]">Motor Scanned Status</th>
-                        <th class="border px-4 py-2 min-w-[200px]">Pump Scanned Status</th>
-                        <th class="border px-4 py-2 min-w-[250px]">Capacitor Scanned Status</th>
-                        <th class="border px-4 py-2 min-w-[200px]">Scanned Status Set</th>
-                        <th class="border px-4 py-2 min-w-[250px]">Panel Box Supplier</th>
-                        <th class="border px-4 py-2 min-w-[250px]">Panel Box Serial Number</th>
-                        <th class="border px-4 py-2 min-w-[200px]">Scanned Status</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @forelse ($invoiceData as $index => $row)
-                        <tr class="border-t">
-                            <td class="border px-4 py-2">{{ $index + 1 }}</td>
-                            <td class="border px-4 py-2">{{ $row['code'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['serial_number'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['scanned_status'] ?? 'N/A' }}</td>
-                        </tr>
-                    @empty
-                        <tr>
-                            <td colspan="10" class="text-center py-4 text-gray-500">
-                                No data found for invoice number <strong>{{ $invoiceNumber }}</strong>.
-                            </td>
-                        </tr>
-                    @endforelse
-                </tbody>
-            </table>
-        </div>
-    @endif
-</div> --}}
-
 
 <div>
     <div class="mb-4">
@@ -127,9 +7,23 @@
         </div>
     </div>
 
-    @if($hasSearched)
+    {{-- Modal for completed invoice--}}
+    @if ($completedInvoice)
+        <div class="text-center text-red-500">
+            <p>Completed the scanning process for invoice number <strong>{{ $invoiceNumber }}</strong>.</p>
+        </div>
+    @endif
 
-        <div class="overflow-x-auto overflow-y-visible">
+    {{-- Modal for empty invoice--}}
+    @if ($emptyInvoice)
+        <div class="text-center text-red-500">
+            <p>No data found for invoice number <strong>{{ $invoiceNumber }}</strong>.</p>
+        </div>
+    @endif
+
+    {{-- Modal for serial invoice--}}
+    @if ($hasSearched)
+        <div class="overflow-x-auto overflow-y-visible" style="height: 385px;">
             {{-- <table class="min-w-[1500px] text-sm text-center border border-gray-300"> --}}
                 {{-- <table class="table-fixed min-w-[1500px] text-sm text-center border border-gray-300"> --}}
             <table class="min-w-full text-sm text-center border border-gray-300">
@@ -155,15 +49,95 @@
                             <td class="border px-4 py-2">{{ $index + 1 }}</td>
                             <td class="border px-4 py-2">{{ $row['code'] ?? 'N/A' }}</td>
                             <td class="border px-4 py-2">{{ $row['serial_number'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['scanned_status'] ?? 'N/A' }}</td>
+                            <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['scanned_status'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['created_at'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['operator_id'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? '' }}</td>
+                            <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? '' }}</td>
+                        </tr>
+                    @empty
+                        <tr>
+                            <td colspan="10" class="text-center py-4 text-gray-500">
+                                No data found for invoice number <strong>{{ $invoiceNumber }}</strong>.
+                            </td>
+                        </tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
+    @endif
+
+    {{-- Modal for Capacitor Input --}}
+    <div>
+        <button wire:click="$set('showCapacitorInput', true)"></button>
+        @if($showCapacitorInput)
+            <div class="fixed inset-0 z-[9999] bg-black bg-opacity-50 flex items-center justify-center">
+                <div style="background:white; border:4px solid orange;" class="p-6 rounded-xl shadow-2xl w-[450px]">
+                    <h3 class="text-xl font-semibold text-orange-700 mb-4">
+                        Scan the Panel Box Supplier/Item Code/Serial Number
+                    </h3>
+
+                    <input
+                        type="text"
+                        id="capacitorInput"
+                        autocomplete="off"
+                        wire:model.defer="capacitorInput"
+                        wire:keydown.enter.prevent="processCapacitorInput"
+                        class="w-full border border-orange-300 rounded px-3 py-2 focus:outline-none focus:ring-0 focus:border-orange-300"
+                        placeholder="Scan the panel box QR code"
+                        {{-- autofocus --}}
+                        onload="this.focus(); this.select();"
+                        {{-- onfocus="this.select();" --}}
+                    />
+
+                    <div class="flex justify-end gap-2 mt-4">
+                        <button type="button" wire:click="cancelCapacitorInput"
+                        class="mt-6 ml-10 bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded transition">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+            {{-- Add this script to focus on the input --}}
+            <script>
+                document.getElementById('capacitorInput').focus();
+            </script>
+        @endif
+    </div>
+
+    {{-- Modal for material invoice--}}
+    @if($materialInvoice)
+        <div class="overflow-x-auto overflow-y-visible" style="height: 385px;">
+            {{-- <table class="min-w-[1500px] text-sm text-center border border-gray-300"> --}}
+                {{-- <table class="table-fixed min-w-[1500px] text-sm text-center border border-gray-300"> --}}
+            <table class="min-w-full text-sm text-center border border-gray-300">
+                <thead class="bg-gray-100 font-bold">
+                    <tr>
+                        <th class="border px-4 py-2">No</th>
+                        <th class="border px-4 py-2">Material Code</th>
+                        <th class="border px-4 py-2">Material Type</th>
+                        <th class="border px-4 py-2">Material Quantity</th>
+                        <th class="border px-4 py-2">Serial Number</th>
+                        <th class="border px-4 py-2">Batch Number</th>
+                        <th class="border px-4 py-2">TimeStamp</th>
+                        <th class="border px-4 py-2">Operator ID</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @forelse ($invoiceData as $index => $row)
+                        <tr class="border-t">
+                            <td class="border px-4 py-2">{{ $index + 1 }}</td>
+                            <td class="border px-4 py-2">{{ $row['code'] ?? 'N/A' }}</td>
+                            <td class="border px-4 py-2">{{ $row['material_type'] ?? 'N/A' }}</td>
+                            <td class="border px-4 py-2">{{ $row['quantity'] ?? 'N/A' }}</td>
+                            <td class="border px-4 py-2">{{ $row['serial_number'] ?? 'N/A' }}</td>
+                            <td class="border px-4 py-2">{{ $row['batch_number'] ?? 'N/A' }}</td>
                             <td class="border px-4 py-2">{{ $row['created_at'] ?? 'N/A' }}</td>
                             <td class="border px-4 py-2">{{ $row['operator_id'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? 'N/A' }}</td>
-                            <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? 'N/A' }}</td>
                         </tr>
                     @empty
                         <tr>
@@ -177,6 +151,11 @@
         </div>
     @endif
 </div>
-
-
-
+{{-- <script>
+    // Clear input and set focus on form load
+    document.addEventListener('DOMContentLoaded', function () {
+        const input = document.getElementById('capacitorInput');
+        input.value = ''; // Clear the input field
+        input.focus(); // Set focus to the input field
+    });
+</script> --}}