Added completed and empty invoice html table design
This commit is contained in:
dhanabalan
@@ -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>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
@@ -127,9 +7,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</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="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="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">
|
<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">{{ $index + 1 }}</td>
|
||||||
<td class="border px-4 py-2">{{ $row['code'] ?? 'N/A' }}</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['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['motor_scanned_status'] ?? '' }}</td>
|
||||||
<td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
|
<td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? '' }}</td>
|
||||||
<td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
|
<td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? '' }}</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_set'] ?? '' }}</td>
|
||||||
<td class="border px-4 py-2">{{ $row['scanned_status'] ?? 'N/A' }}</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['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['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>
|
</tr>
|
||||||
@empty
|
@empty
|
||||||
<tr>
|
<tr>
|
||||||
@@ -177,6 +151,11 @@
|
|||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</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> --}}
|
||||||
|
|||||||
Reference in New Issue
Block a user