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
2026-01-02 18:57:21 +02:00
parent 74525e8955
commit bb6b92df10
6 changed files with 430 additions and 0 deletions
@@ -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>