feat: Add Blade templates for ops QR interface (Phase 2)
Create state-driven UI templates: Main Template (ops/order-detail.blade.php): - Display order summary with status, type, customer, date - Render QR code SVG for shop-floor access - Conditionally include state-specific action forms - Show order items, packing details, shipment info Action Templates: - ops/actions/packing.blade.php: Form to input weight/dimensions - ops/actions/inspection.blade.php: Pass/Fail inspection with optional notes - ops/actions/read-only.blade.php: Status display for read-only states Error Pages: - ops/order-not-found.blade.php: Invalid/expired QR token - ops/unauthorized.blade.php: Insufficient permissions All forms use AJAX submission with confirmation dialogs
This commit is contained in:
twotalesanimation
@@ -0,0 +1,81 @@
|
|||||||
|
<!-- Inspection Actions -->
|
||||||
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">🔍 Inspection</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- Inspection Passed -->
|
||||||
|
<div class="border-2 border-green-200 rounded-lg p-4">
|
||||||
|
<h3 class="text-lg font-semibold text-green-700 mb-3">✓ Passed Inspection</h3>
|
||||||
|
<p class="text-gray-600 mb-4">Quality check completed - proceed to packing</p>
|
||||||
|
|
||||||
|
<form action="{{ route('ops.order.inspection-passed', $order) }}" method="POST">
|
||||||
|
@csrf
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200"
|
||||||
|
>
|
||||||
|
Mark as Passed
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Inspection Failed -->
|
||||||
|
<div class="border-2 border-red-200 rounded-lg p-4">
|
||||||
|
<h3 class="text-lg font-semibold text-red-700 mb-3">✗ Flag Issue</h3>
|
||||||
|
<p class="text-gray-600 mb-4">Quality issue detected - needs review</p>
|
||||||
|
|
||||||
|
<form id="inspectionFailedForm" action="{{ route('ops.order.inspection-failed', $order) }}" method="POST" class="space-y-3">
|
||||||
|
@csrf
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
name="issue_description"
|
||||||
|
required
|
||||||
|
maxlength="500"
|
||||||
|
rows="3"
|
||||||
|
placeholder="Describe the quality issue..."
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||||
|
></textarea>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200"
|
||||||
|
>
|
||||||
|
Flag & Move to Review
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('inspectionFailedForm').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!confirm('Flag this order for review? It will be moved to review status.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(this);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(this.action, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
},
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
alert('✓ Issue flagged - order moved to review');
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
alert('Error: ' + (data.message || data.error || 'Unknown error'));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('Error submitting form: ' + error.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,135 @@
|
|||||||
|
<!-- Packing Action Form -->
|
||||||
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">📦 Confirm Packing</h2>
|
||||||
|
|
||||||
|
<form id="packingForm" action="{{ route('ops.order.pack', $order) }}" method="POST" class="space-y-4">
|
||||||
|
@csrf
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||||
|
<!-- Width -->
|
||||||
|
<div>
|
||||||
|
<label for="width" class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Width (cm)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="width"
|
||||||
|
name="width"
|
||||||
|
step="0.1"
|
||||||
|
min="1"
|
||||||
|
required
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="e.g., 30"
|
||||||
|
>
|
||||||
|
@error('width')
|
||||||
|
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||||
|
@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Length -->
|
||||||
|
<div>
|
||||||
|
<label for="length" class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Length (cm)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="length"
|
||||||
|
name="length"
|
||||||
|
step="0.1"
|
||||||
|
min="1"
|
||||||
|
required
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="e.g., 40"
|
||||||
|
>
|
||||||
|
@error('length')
|
||||||
|
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||||
|
@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Height -->
|
||||||
|
<div>
|
||||||
|
<label for="height" class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Height (cm)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="height"
|
||||||
|
name="height"
|
||||||
|
step="0.1"
|
||||||
|
min="1"
|
||||||
|
required
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="e.g., 10"
|
||||||
|
>
|
||||||
|
@error('height')
|
||||||
|
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||||
|
@enderror
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Weight -->
|
||||||
|
<div>
|
||||||
|
<label for="weight" class="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Weight (kg)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="weight"
|
||||||
|
name="weight"
|
||||||
|
step="0.1"
|
||||||
|
min="0.1"
|
||||||
|
required
|
||||||
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="e.g., 2.5"
|
||||||
|
>
|
||||||
|
@error('weight')
|
||||||
|
<p class="text-red-600 text-xs mt-1">{{ $message }}</p>
|
||||||
|
@enderror
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Submit Button -->
|
||||||
|
<div class="flex gap-3 mt-6">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition duration-200"
|
||||||
|
>
|
||||||
|
✓ Confirm Packed
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="reset"
|
||||||
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-6 rounded-lg transition duration-200"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('packingForm').addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const formData = new FormData(this);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(this.action, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
},
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
alert('✓ Order packed successfully!');
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
alert('Error: ' + (data.message || data.error || 'Unknown error'));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('Error submitting form: ' + error.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
<!-- Read-Only State -->
|
||||||
|
<div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-6 mb-8">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-1">
|
||||||
|
<h2 class="text-2xl font-bold text-blue-900 mb-2">📋 Order Status: Read-Only</h2>
|
||||||
|
<p class="text-blue-800 mb-4">
|
||||||
|
This order is in the <strong>{{ str_replace('_', ' ', ucfirst($order->status)) }}</strong> phase.
|
||||||
|
No actions are available at this stage.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
@if($order->status === 'ready_to_ship')
|
||||||
|
<div class="bg-white border-l-4 border-blue-500 p-4 rounded">
|
||||||
|
<p class="text-gray-700">
|
||||||
|
<strong>Next Step:</strong> Move Trello card to "Ready to Ship" to trigger automatic shipment creation.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@elseif($order->status === 'awaiting_collection')
|
||||||
|
<div class="bg-white border-l-4 border-blue-500 p-4 rounded">
|
||||||
|
<p class="text-gray-700">
|
||||||
|
<strong>Status:</strong> Parcel is awaiting collection from courier.
|
||||||
|
</p>
|
||||||
|
@if($order->courier_waybill_id)
|
||||||
|
<p class="text-gray-700 mt-2">
|
||||||
|
<strong>Waybill:</strong> <code class="bg-gray-100 px-2 py-1 rounded">{{ $order->courier_waybill_id }}</code>
|
||||||
|
</p>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
@elseif($order->status === 'in_transit')
|
||||||
|
<div class="bg-white border-l-4 border-green-500 p-4 rounded">
|
||||||
|
<p class="text-gray-700">
|
||||||
|
<strong>Status:</strong> Parcel is in transit to the customer.
|
||||||
|
</p>
|
||||||
|
@if($order->courier_tracking_number)
|
||||||
|
<p class="text-gray-700 mt-2">
|
||||||
|
<strong>Tracking:</strong> <code class="bg-gray-100 px-2 py-1 rounded">{{ $order->courier_tracking_number }}</code>
|
||||||
|
</p>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div class="bg-white border-l-4 border-gray-500 p-4 rounded">
|
||||||
|
<p class="text-gray-700">
|
||||||
|
The order is progressing through the fulfillment pipeline.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-3xl font-bold mb-2">Order {{ $order->order_number }}</h1>
|
||||||
|
<p class="text-gray-600">{{ $order->uuid }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Summary Card -->
|
||||||
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Status</p>
|
||||||
|
<p class="text-lg font-semibold capitalize">{{ str_replace('_', ' ', $order->status) }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Order Type</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->is_custom_order ? 'Custom' : 'Standard' }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Customer</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->user->name ?? 'N/A' }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Created</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->created_at->format('M d, Y') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- QR Code -->
|
||||||
|
<div class="border-t pt-6">
|
||||||
|
<p class="text-sm text-gray-600 mb-3">Scan to access this order:</p>
|
||||||
|
<div class="inline-block bg-gray-50 p-4 rounded border">
|
||||||
|
{!! file_get_contents(storage_path("app/public/qr-codes/{$order->uuid}.svg")) !!}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- State-Specific Actions -->
|
||||||
|
@if($order->status === 'inspection')
|
||||||
|
@include('ops.actions.inspection')
|
||||||
|
@elseif($order->status === 'packing' || $order->status === 'printing')
|
||||||
|
@include('ops.actions.packing')
|
||||||
|
@elseif(in_array($order->status, ['ready_to_ship', 'awaiting_collection', 'in_transit']))
|
||||||
|
@include('ops.actions.read-only')
|
||||||
|
@else
|
||||||
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||||
|
<p class="text-yellow-800">No actions available for this order status.</p>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<!-- Order Items -->
|
||||||
|
<div class="mt-8 bg-white rounded-lg shadow-md p-6">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">Order Items</h2>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b">
|
||||||
|
<th class="text-left py-3 px-4">Product</th>
|
||||||
|
<th class="text-left py-3 px-4">Type</th>
|
||||||
|
<th class="text-left py-3 px-4">Quantity</th>
|
||||||
|
<th class="text-left py-3 px-4">Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@forelse($order->items as $item)
|
||||||
|
<tr class="border-b hover:bg-gray-50">
|
||||||
|
<td class="py-3 px-4">{{ $item->product->name ?? 'N/A' }}</td>
|
||||||
|
<td class="py-3 px-4">{{ $item->product_type ?? 'N/A' }}</td>
|
||||||
|
<td class="py-3 px-4">{{ $item->quantity }}</td>
|
||||||
|
<td class="py-3 px-4">R{{ number_format($item->unit_price * $item->quantity, 2) }}</td>
|
||||||
|
</tr>
|
||||||
|
@empty
|
||||||
|
<tr>
|
||||||
|
<td colspan="4" class="py-3 px-4 text-center text-gray-500">No items</td>
|
||||||
|
</tr>
|
||||||
|
@endforelse
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Packing Details (if available) -->
|
||||||
|
@if($order->packing_completed_at)
|
||||||
|
<div class="mt-8 bg-white rounded-lg shadow-md p-6">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">Packing Details</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Width</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->packing_width }} cm</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Length</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->packing_length }} cm</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Weight</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->packing_weight }} kg</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Packed At</p>
|
||||||
|
<p class="text-lg font-semibold">{{ $order->packing_completed_at->format('M d, H:i') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<!-- Shipment Details (if available) -->
|
||||||
|
@if($order->courier_waybill_id)
|
||||||
|
<div class="mt-8 bg-white rounded-lg shadow-md p-6">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">Shipment Details</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Waybill ID</p>
|
||||||
|
<p class="text-lg font-semibold font-mono">{{ $order->courier_waybill_id }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Tracking Number</p>
|
||||||
|
<p class="text-lg font-semibold font-mono">{{ $order->courier_tracking_number ?? 'N/A' }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-600">Status</p>
|
||||||
|
<p class="text-lg font-semibold capitalize">{{ str_replace('_', ' ', $order->courier_status ?? 'pending') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
<div class="bg-red-50 border-2 border-red-200 rounded-lg p-8 text-center">
|
||||||
|
<h1 class="text-4xl font-bold text-red-900 mb-3">❌ Order Not Found</h1>
|
||||||
|
<p class="text-red-700 mb-6 text-lg">
|
||||||
|
The QR code token is invalid or the order does not exist.
|
||||||
|
</p>
|
||||||
|
<a href="{{ route('home') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded">
|
||||||
|
Return Home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
<div class="bg-yellow-50 border-2 border-yellow-200 rounded-lg p-8 text-center">
|
||||||
|
<h1 class="text-4xl font-bold text-yellow-900 mb-3">🔒 Access Denied</h1>
|
||||||
|
<p class="text-yellow-700 mb-6 text-lg">
|
||||||
|
You do not have permission to access this page. Only operations staff can view QR-based order interfaces.
|
||||||
|
</p>
|
||||||
|
@if(auth()->check())
|
||||||
|
<p class="text-gray-600 mb-6">
|
||||||
|
Logged in as: <strong>{{ auth()->user()->name }}</strong>
|
||||||
|
</p>
|
||||||
|
@endif
|
||||||
|
<a href="{{ route('home') }}" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded">
|
||||||
|
Return Home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
Reference in New Issue
Block a user