feat: Complete Shiplogic integration with mobile-optimized ops workflow

**Shiplogic API Integration:** - Fixed API base URL configuration (removed /api suffix) - Implemented comprehensive request/response logging for rates and shipments endpoints - Fixed PDF fetching: API returns S3 URLs, now downloads actual PDFs from S3 - Added tests and mock API responses for local development (routes/shiplogic-mock.php) **Courier Service Enhancements:** - Added redownloadShipmentPdfs() public method for re-downloading corrupted PDFs - Enhanced error logging with full request/response bodies for debugging - Proper binary PDF storage using Laravel Storage facade - URL and S3 download handling for Shiplogic API responses **Workflow & Operations:** - Changed to manual "Ready for Collection" button instead of automatic move - Operators now: scan QR → apply labels → click "Ready for Collection" → moves to Awaiting Collection - Removed duplicate PDF attachments to Trello (was adding twice from two listeners) - Fixed NotifySlackOnShipmentCreated to only handle Slack notifications **Mobile-Optimized Ops Page:** - Removed QR code display from order detail page - Implemented responsive single-column layout for mobile phones - Large touch-friendly buttons (full width, increased padding) - Bold typography for better readability on small screens - Larger input fields and tracking number displays - Clear step-by-step instructions for warehouse operators - Re-download PDF button for damaged/corrupted labels **New Features:** - POST /ops/orders/{uuid}/ready-for-collection endpoint - Re-download PDFs functionality accessible from awaiting_collection and in_transit states - Full audit logging for all operations via ops interface - Proper error handling and user feedback **Testing:** - Added ShipmentCreationTest with mock HTTP client - Created comprehensive testing guide (SHIPLOGIC_TESTING.md) - Mock API routes for local development without hitting live API
2026-01-03 16:13:20 +02:00
parent b8cc8bd421
commit 2a10f9af38
90 changed files with 11794 additions and 381 deletions
@@ -44,7 +44,8 @@

    .form-group input,
    .form-group textarea,
-    .form-group select {
+    .form-group select,
+    .address-search-group input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ddd;
@@ -60,7 +61,8 @@

    .form-group input:focus,
    .form-group textarea:focus,
-    .form-group select:focus {
+    .form-group select:focus,
+    .address-search-group input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(45, 80, 71, 0.1);
@@ -237,49 +239,67 @@
            <h2>Delivery Information</h2>

            <div class="form-group">
-                <label for="customer_name">Full Name</label>
-                <input type="text" id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
+                <label for="customer_name">Full Name<span style="color: red;">*</span></label>
+                <input type="text" id="customer_name" name="customer_name" value="{{ old('customer_name', Auth::check() ? Auth::user()->name : '') }}" required>
            </div>

            <div class="form-group">
-                <label for="customer_email">Email Address</label>
-                <input type="email" id="customer_email" name="customer_email" value="{{ old('customer_email') }}" required>
+                <label for="customer_email">Email Address<span style="color: red;">*</span></label>
+                <input type="email" id="customer_email" name="customer_email" value="{{ old('customer_email', Auth::check() ? Auth::user()->email : '') }}" required>
            </div>

            <div class="form-group">
-                <label for="customer_phone">Phone Number</label>
+                <label for="customer_phone">Phone Number<span style="color: red;">*</span></label>
                <input type="tel" id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}" required>
            </div>

+            <div class="form-group">
+                <label for="shipping_type">Address Type <span style="color: red;">*</span></label>
+                <select id="shipping_type" name="shipping_type" required>
+                    <option value="residential" {{ old('shipping_type') === 'residential' ? 'selected' : '' }}>Residential</option>
+                    <option value="business" {{ old('shipping_type') === 'business' ? 'selected' : '' }}>Business</option>
+                </select>
+            </div>
+
+            <div class="form-group" id="business_name_group" style="display: none;">
+                <label for="business_name">Business Name <span style="color: red;">*</span></label>
+                <input type="text" id="business_name" name="business_name" value="{{ old('business_name') }}" placeholder="Enter your business name">
+            </div>
+
            <div class="address-search-group">
-                <label for="address_search">Delivery Address</label>
+                
+                <label for="address_search">Delivery Address (Type to search)</label>
                <input type="text" id="address_search" placeholder="Start typing your address..." autocomplete="off">
                <button type="button" class="address-clear-btn" id="address_clear_btn">✕</button>
            </div>

-            <div id="address_fields_group" style="display: none;">
+            <div id="address_fields_group">
                <div class="form-group">
-                    <label for="shipping_street_address">Street Address</label>
-                    <input type="text" id="shipping_street_address" name="shipping_street_address" value="{{ old('shipping_street_address') }}" required>
+                    <label for="shipping_unit_number">Apartment / Unit / Building Number (Optional)</label>
+                    <input type="text" id="shipping_unit_number" name="shipping_unit_number" placeholder="e.g. Apt 101, Unit B, Building 3" value="{{ old('shipping_unit_number') }}">
                </div>
+                <div class="form-group">
+                    <label for="shipping_street_address">Street Address <span style="color: red;">*</span></label>
+                    <input type="text" id="shipping_street_address" name="shipping_street_address" value="{{ old('shipping_street_address') }}" required>
+                </div>               

                <div class="form-group">
-                    <label for="shipping_local_area">Suburb/Local Area</label>
+                    <label for="shipping_local_area">Suburb<span style="color: red;">*</span></label>
                    <input type="text" id="shipping_local_area" name="shipping_local_area" value="{{ old('shipping_local_area') }}" required>
                </div>

                <div class="form-group">
-                    <label for="shipping_city">City</label>
+                    <label for="shipping_city">City <span style="color: red;">*</span></label>
                    <input type="text" id="shipping_city" name="shipping_city" value="{{ old('shipping_city') }}" required>
                </div>

                <div class="form-group">
-                    <label for="shipping_zone">Province/Zone</label>
+                    <label for="shipping_zone">Province<span style="color: red;">*</span></label>
                    <input type="text" id="shipping_zone" name="shipping_zone" value="{{ old('shipping_zone') }}" required>
                </div>

                <div class="form-group">
-                    <label for="shipping_postcode">Postal Code</label>
+                    <label for="shipping_postcode">Postal Code <span style="color: red;">*</span></label>
                    <input type="text" id="shipping_postcode" name="shipping_postcode" value="{{ old('shipping_postcode') }}" required>
                </div>

@@ -287,14 +307,6 @@
                    <label for="shipping_country">Country</label>
                    <input type="text" id="shipping_country" name="shipping_country" value="ZA" readonly>
                </div>
-
-                <div class="form-group">
-                    <label for="shipping_type">Address Type</label>
-                    <select id="shipping_type" name="shipping_type" required>
-                        <option value="residential" {{ old('shipping_type') === 'residential' ? 'selected' : '' }}>Residential</option>
-                        <option value="business" {{ old('shipping_type') === 'business' ? 'selected' : '' }}>Business</option>
-                    </select>
-                </div>
            </div>

            <div class="form-group">
@@ -369,95 +381,181 @@
    </div>
 </div>

-<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_places.api_key') }}&libraries=places"></script>
+@php
+    $apiKey = config('services.google_places.api_key');
+@endphp
+
+@if(!$apiKey)
+    <div style="background: #fff3cd; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; color: #856404;">
+        <strong>⚠️ Configuration Issue:</strong> Google Places API key is not configured. Please add <code>GOOGLE_PLACES_API_KEY</code> to your .env file.
+    </div>
+@endif

 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    const addressSearchInput = document.getElementById('address_search');
-    const addressFieldsGroup = document.getElementById('address_fields_group');
-    const clearBtn = document.getElementById('address_clear_btn');
+    // console.log('Checkout page loaded');
+    // console.log('API Key configured:', {{ $apiKey ? 'true' : 'false' }});
+    // @if($apiKey)
+    //     console.log('API Key length:', {{ strlen($apiKey) }});
+    // @endif
+</script>

-    if (!addressSearchInput) return;
+@if($apiKey)
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $apiKey }}&loading=async&libraries=places&callback=initializeAddressAutocomplete"></script>
+    <!-- <script>
+  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+    key: "{{ $apiKey }}",
+    v: "weekly",

-    // Initialize Google Places Autocomplete
-    const autocomplete = new google.maps.places.Autocomplete(addressSearchInput, {
-        componentRestrictions: { country: 'za' },
-        types: ['geocode']
-    });
+  }); -->
+</script>

-    // Prevent form submission on Enter when autocomplete is open
-    addressSearchInput.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter' && document.querySelector('.pac-container:not([style*="display: none"])')) {
-            e.preventDefault();
-        }
-    });
-
-    // When place is selected
-    autocomplete.addListener('place_changed', function() {
-        const place = autocomplete.getPlace();
-        
-        if (!place.geometry) {
-            console.error('Place has no geometry');
-            return;
-        }
-
-        // Parse address components
-        const addressComponents = {};
-        place.address_components.forEach(component => {
-            addressComponents[component.types[0]] = component.long_name;
+    <script>
+        // Handle shipping type change
+        document.getElementById('shipping_type').addEventListener('change', function() {
+            const businessNameGroup = document.getElementById('business_name_group');
+            const businessNameInput = document.getElementById('business_name');
+            
+            if (this.value === 'business') {
+                businessNameGroup.style.display = 'block';
+                businessNameInput.setAttribute('required', 'required');
+            } else {
+                businessNameGroup.style.display = 'none';
+                businessNameInput.removeAttribute('required');
+                businessNameInput.value = '';
+            }
        });

-        // Populate form fields
-        document.getElementById('shipping_street_address').value = 
-            (addressComponents['street_number'] ? addressComponents['street_number'] + ' ' : '') +
-            (addressComponents['route'] || '');
-        
-        document.getElementById('shipping_local_area').value = 
-            addressComponents['sublocality'] || addressComponents['sublocality_level_1'] || '';
-        
-        document.getElementById('shipping_city').value = 
-            addressComponents['locality'] || addressComponents['administrative_area_level_2'] || '';
-        
-        document.getElementById('shipping_zone').value = 
-            addressComponents['administrative_area_level_1'] || '';
-        
-        document.getElementById('shipping_postcode').value = 
-            addressComponents['postal_code'] || '';
-        
-        document.getElementById('shipping_country').value = 
-            addressComponents['country'] || 'ZA';
+        // Check initial state on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            const shippingType = document.getElementById('shipping_type');
+            if (shippingType && shippingType.value === 'business') {
+                document.getElementById('business_name_group').style.display = 'block';
+            }
+        });

-        // Show address fields group
-        addressFieldsGroup.style.display = 'block';
-        
-        // Show clear button
-        clearBtn.classList.add('show');
-    });
+        function initializeAddressAutocomplete() {
+            console.log('✓ Google Maps API loaded');
+            
+            const addressSearchInput = document.getElementById('address_search');
+            const clearBtn = document.getElementById('address_clear_btn');

-    // Clear button functionality
-    clearBtn.addEventListener('click', function(e) {
-        e.preventDefault();
-        addressSearchInput.value = '';
-        addressSearchInput.focus();
-        clearBtn.classList.remove('show');
-        addressFieldsGroup.style.display = 'none';
-        
-        // Clear form fields
-        document.getElementById('shipping_street_address').value = '';
-        document.getElementById('shipping_local_area').value = '';
-        document.getElementById('shipping_city').value = '';
-        document.getElementById('shipping_zone').value = '';
-        document.getElementById('shipping_postcode').value = '';
-    });
+            if (!addressSearchInput) {
+                console.error('Address search input not found');
+                return;
+            }
+
+            try {
+                console.log('Initializing Google Places Autocomplete...');
+                
+                // Using modern Autocomplete with new API
+                const autocomplete = new google.maps.places.Autocomplete(addressSearchInput, {
+                    componentRestrictions: { country: 'za' },
+                    types: ['geocode']
+                });
+
+                console.log('✓ Google Places Autocomplete initialized');
+
+                // Prevent form submission on Enter when autocomplete dropdown is open
+                addressSearchInput.addEventListener('keydown', function(e) {
+                    const pacContainer = document.querySelector('.pac-container:not([style*="display: none"])');
+                    if (e.key === 'Enter' && pacContainer) {
+                        e.preventDefault();
+                    }
+                });
+
+                // When place is selected
+                autocomplete.addListener('place_changed', function() {
+                    const place = autocomplete.getPlace();
+                    
+                    if (!place.geometry) {
+                        console.warn('Selected place has no geometry');
+                        return;
+                    }
+
+                    console.log('✓ Address selected:', place.formatted_address);
+
+                    // Parse address components
+                    const addressComponents = {};
+                    place.address_components.forEach(component => {
+                        addressComponents[component.types[0]] = component.long_name;
+                    });
+
+                    // Debug: log all available components
+                    console.log('Address components available:', Object.keys(addressComponents));
+
+                    // Populate form fields
+                    document.getElementById('shipping_street_address').value = 
+                        (addressComponents['street_number'] ? addressComponents['street_number'] + ' ' : '') +
+                        (addressComponents['route'] || '');
+                    
+                    document.getElementById('shipping_local_area').value = 
+                        addressComponents['political'] || 
+                        addressComponents['sublocality'] || 
+                        addressComponents['sublocality_level_1'] || 
+                        addressComponents['sublocality_level_2'] || '';
+                    
+                    document.getElementById('shipping_city').value = 
+                        addressComponents['locality'] || addressComponents['administrative_area_level_2'] || '';
+                    
+                    document.getElementById('shipping_zone').value = 
+                        addressComponents['administrative_area_level_1'] || '';
+                    
+                    document.getElementById('shipping_postcode').value = 
+                        addressComponents['postal_code'] || '';
+                    
+                    document.getElementById('shipping_country').value = 
+                        addressComponents['country'] || 'ZA';
+
+                    // Show clear button
+                    clearBtn.classList.add('show');
+                });
+
+                // Clear button functionality
+                clearBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    addressSearchInput.value = '';
+                    addressSearchInput.focus();
+                    clearBtn.classList.remove('show');
+                    
+                    // Clear form fields
+                    document.getElementById('shipping_street_address').value = '';
+                    document.getElementById('shipping_unit_number').value = '';
+                    document.getElementById('shipping_local_area').value = '';
+                    document.getElementById('shipping_city').value = '';
+                    document.getElementById('shipping_zone').value = '';
+                    document.getElementById('shipping_postcode').value = '';
+                });
+            } catch (error) {
+                console.error('✗ Error initializing autocomplete:', error);
+                showAddressFieldsManually();
+            }
+        }
+
+        function showAddressFieldsManually() {
+            const addressSearchInput = document.getElementById('address_search');
+            if (addressSearchInput) {
+                addressSearchInput.style.display = 'none';
+                document.querySelector('label[for="address_search"]').style.display = 'none';
+                document.getElementById('address_clear_btn').style.display = 'none';
+                
+                const fieldsGroup = document.getElementById('address_fields_group');
+                if (fieldsGroup) {
+                    const notice = document.createElement('div');
+                    notice.style.cssText = 'background: #f0f0f0; padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; color: #666;';
+                    notice.innerHTML = '<strong>Note:</strong> Address search is not available. Please fill in your address details manually below.';
+                    fieldsGroup.parentNode.insertBefore(notice, fieldsGroup);
+                }
+            }
+        }
+
+        // If Google API doesn't load after 5 seconds, show fallback
+        setTimeout(() => {
+            if (typeof google === 'undefined') {
+                console.warn('Google Maps API failed to load');
+                showAddressFieldsManually();
+            }
+        }, 5000);
+    </script>
+@endif

-    // Show fields if form has old values (validation error)
-    const hasOldValues = 
-        document.getElementById('shipping_street_address').value ||
-        document.getElementById('shipping_city').value;
-    
-    if (hasOldValues) {
-        addressFieldsGroup.style.display = 'block';
-    }
-});
-</script>
@endsection
@@ -2,47 +2,180 @@
 <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>
+            <h2 class="text-2xl font-bold text-blue-900 mb-4">📋 Order Status: {{ str_replace('_', ' ', ucfirst($order->status)) }}</h2>
            
            @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.
+                <div class="bg-white border-l-4 border-blue-500 p-4 rounded mb-6">
+                    <p class="text-gray-700 font-semibold text-lg mb-4">
+                        ✓ Shipment created and ready to print labels/stickers
                    </p>
+                    
+                    <div class="space-y-3">
+                        <p class="text-gray-700 font-semibold">Next Steps:</p>
+                        <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                            <li>Print the shipment sticker label</li>
+                            <li>Print the shipment waybill/label</li>
+                            <li>Apply labels to parcel</li>
+                            <li>Move parcel to collection bay</li>
+                            <li>Click "Ready for Collection" button below</li>
+                        </ol>
+                    </div>
+
+                    <button 
+                        type="button"
+                        onclick="markReadyForCollection('{{ $order->uuid }}')"
+                        class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
+                    >
+                        ✓ Ready for Collection
+                    </button>
                </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.
+                <div class="bg-white border-l-4 border-blue-500 p-4 rounded mb-6">
+                    <p class="text-gray-700 font-semibold text-lg mb-4">
+                        📦 Parcel 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 class="text-gray-700 mt-4">
+                            <strong>Waybill:</strong> <code class="bg-gray-100 px-3 py-2 rounded block mt-2 text-base break-all">{{ $order->courier_waybill_id }}</code>
                        </p>
                    @endif
+                    
+                    <!-- Re-download PDFs Button -->
+                    @if($order->courier_shipment_id)
+                        <button 
+                            type="button"
+                            onclick="redownloadPdfs('{{ $order->uuid }}')"
+                            class="mt-6 w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
+                        >
+                            🔄 Re-download Shipment PDFs
+                        </button>
+                        <p class="text-gray-600 text-sm mt-3">If labels are damaged, re-download them.</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.
+                <div class="bg-white border-l-4 border-green-500 p-4 rounded mb-6">
+                    <p class="text-gray-700 font-semibold text-lg mb-4">
+                        ✈️ Parcel in transit to 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 class="text-gray-700 mt-4">
+                            <strong>Tracking Number:</strong> <code class="bg-gray-100 px-3 py-2 rounded block mt-2 text-base break-all">{{ $order->courier_tracking_number }}</code>
                        </p>
                    @endif
+                    
+                    <!-- Re-download PDFs Button -->
+                    @if($order->courier_shipment_id)
+                        <button 
+                            type="button"
+                            onclick="redownloadPdfs('{{ $order->uuid }}')"
+                            class="mt-6 w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
+                        >
+                            🔄 Re-download Shipment PDFs
+                        </button>
+                        <p class="text-gray-600 text-sm mt-3">If labels are damaged, re-download them.</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 class="text-gray-700 font-semibold text-lg">
+                        Order is processing through the fulfillment pipeline
                    </p>
                </div>
            @endif
        </div>
    </div>
 </div>
+
+<script>
+async function markReadyForCollection(orderUuid) {
+    if (!confirm('Mark order as ready for collection?')) {
+        return;
+    }
+    
+    const button = document.querySelector('[onclick*="markReadyForCollection"]');
+    button.disabled = true;
+    button.classList.add('opacity-50');
+    const originalText = button.innerText;
+    button.innerText = '⏳ Processing...';
+    
+    try {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
+                         document.querySelector('input[name="_token"]')?.value;
+        
+        if (!csrfToken) {
+            throw new Error('CSRF token not found on page');
+        }
+        
+        const response = await fetch(`/ops/orders/${orderUuid}/ready-for-collection`, {
+            method: 'POST',
+            headers: {
+                'X-CSRF-Token': csrfToken,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({}),
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            alert('✓ Order moved to Awaiting Collection');
+            location.reload();
+        } else {
+            alert('✗ Failed:\n' + data.message);
+        }
+    } catch (error) {
+        alert('✗ Error: ' + error.message);
+    } finally {
+        button.disabled = false;
+        button.classList.remove('opacity-50');
+        button.innerText = originalText;
+    }
+}
+
+async function redownloadPdfs(orderUuid) {
+    if (!confirm('Re-download shipment PDFs from Shiplogic API?')) {
+        return;
+    }
+    
+    const button = document.querySelector('[onclick*="redownloadPdfs"]');
+    button.disabled = true;
+    button.classList.add('opacity-50');
+    const originalText = button.innerText;
+    button.innerText = '⏳ Downloading...';
+    
+    try {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
+                         document.querySelector('input[name="_token"]')?.value;
+        
+        if (!csrfToken) {
+            throw new Error('CSRF token not found on page');
+        }
+        
+        const response = await fetch(`/ops/orders/${orderUuid}/redownload-pdfs`, {
+            method: 'POST',
+            headers: {
+                'X-CSRF-Token': csrfToken,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({}),
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            alert('✓ PDFs re-downloaded successfully!');
+            location.reload();
+        } else {
+            alert('✗ Failed to re-download PDFs:\n' + data.message);
+        }
+    } catch (error) {
+        alert('✗ Error: ' + error.message);
+    } finally {
+        button.disabled = false;
+        button.classList.remove('opacity-50');
+        button.innerText = originalText;
+    }
+}
+</script>
@@ -1,46 +1,31 @@
@extends('layouts.app')

@section('content')
-<div class="container mx-auto px-4 py-8">
-    <!-- Header -->
+<div class="w-full min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
+    <!-- Mobile-friendly 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>
+        <h1 class="text-4xl font-bold mb-2 break-words">{{ $order->order_number }}</h1>
+        <p class="text-gray-600 text-sm break-all">{{ $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 class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
            <div>
-                <p class="text-sm text-gray-600">Status</p>
-                <p class="text-lg font-semibold capitalize">{{ str_replace('_', ' ', $order->status) }}</p>
+                <p class="text-sm text-gray-600 font-semibold">Status</p>
+                <p class="text-xl font-bold capitalize mt-2">{{ 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>
+                <p class="text-sm text-gray-600 font-semibold">Order Type</p>
+                <p class="text-xl font-bold mt-2">{{ $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>
+                <p class="text-sm text-gray-600 font-semibold">Customer</p>
+                <p class="text-xl font-bold mt-2">{{ $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">
-            <div class="flex items-start justify-between mb-3">
-                <div>
-                    <p class="text-sm text-gray-600 mb-3">Scan to access this order:</p>
-                </div>
-                <a href="{{ route('ops.order.sticker.download', $order) }}" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
-                    📥 Download Sticker (A6 PDF)
-                </a>
-            </div>
-            <div class="inline-block bg-gray-50 p-4 rounded border">
-                {!! file_get_contents(storage_path("app/public/qr-codes/{$order->uuid}.svg")) !!}
+                <p class="text-sm text-gray-600 font-semibold">Created</p>
+                <p class="text-xl font-bold mt-2">{{ $order->created_at->format('M d, Y') }}</p>
            </div>
        </div>
    </div>