From bb6b92df100ac2a1d14326bd0c00fbabee14dad9 Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Fri, 2 Jan 2026 18:57:21 +0200
Subject: [PATCH] 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
---
 .../views/ops/actions/inspection.blade.php    |  81 +++++++++++
 resources/views/ops/actions/packing.blade.php | 135 ++++++++++++++++++
 .../views/ops/actions/read-only.blade.php     |  48 +++++++
 resources/views/ops/order-detail.blade.php    | 131 +++++++++++++++++
 resources/views/ops/order-not-found.blade.php |  15 ++
 resources/views/ops/unauthorized.blade.php    |  20 +++
 6 files changed, 430 insertions(+)
 create mode 100644 resources/views/ops/actions/inspection.blade.php
 create mode 100644 resources/views/ops/actions/packing.blade.php
 create mode 100644 resources/views/ops/actions/read-only.blade.php
 create mode 100644 resources/views/ops/order-detail.blade.php
 create mode 100644 resources/views/ops/order-not-found.blade.php
 create mode 100644 resources/views/ops/unauthorized.blade.php

diff --git a/resources/views/ops/actions/inspection.blade.php b/resources/views/ops/actions/inspection.blade.php
new file mode 100644
index 0000000..33a7bf7
--- /dev/null
+++ b/resources/views/ops/actions/inspection.blade.php
@@ -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>
diff --git a/resources/views/ops/actions/packing.blade.php b/resources/views/ops/actions/packing.blade.php
new file mode 100644
index 0000000..219342d
--- /dev/null
+++ b/resources/views/ops/actions/packing.blade.php
@@ -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>
diff --git a/resources/views/ops/actions/read-only.blade.php b/resources/views/ops/actions/read-only.blade.php
new file mode 100644
index 0000000..a523370
--- /dev/null
+++ b/resources/views/ops/actions/read-only.blade.php
@@ -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>
diff --git a/resources/views/ops/order-detail.blade.php b/resources/views/ops/order-detail.blade.php
new file mode 100644
index 0000000..b9d998a
--- /dev/null
+++ b/resources/views/ops/order-detail.blade.php
@@ -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
diff --git a/resources/views/ops/order-not-found.blade.php b/resources/views/ops/order-not-found.blade.php
new file mode 100644
index 0000000..9a499cf
--- /dev/null
+++ b/resources/views/ops/order-not-found.blade.php
@@ -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
diff --git a/resources/views/ops/unauthorized.blade.php b/resources/views/ops/unauthorized.blade.php
new file mode 100644
index 0000000..d436371
--- /dev/null
+++ b/resources/views/ops/unauthorized.blade.php
@@ -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