initial: bootstrap from BukidBountyApp base

resources/js/Pages/ShipmentDetail.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+import { usePageTitle } from '../composables/Core/usePageTitle';
+import { useNavigate } from '../composables/Core/useNavigate';
+import { useModal } from '../composables/Core/useModal';
+import LoadingSpinner from '../Components/LoadingSpinner.vue';
+import CardSimple from '../Components/Core/CardSimple.vue';
+import InputGroupButton from '../Components/Core/Forms/InputGroupButton.vue';
+
+const props = defineProps({
+    target: { type: String, required: true }
+});
+
+usePageTitle('Shipment Details');
+const { navigate } = useNavigate();
+const modal = useModal();
+
+const shipment = ref(null);
+const loading = ref(true);
+
+const fetchShipmentDetail = async () => {
+    loading.value = true;
+    try {
+        const response = await axios.post('/Shipments/List', { target: props.target });
+        // Simplified: filter from list for now
+        if (response.data.success) {
+            shipment.value = response.data.data.find(s => s.hashkey === props.target);
+        }
+    } catch (error) {
+        console.error('Failed to fetch shipment detail:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const updateStatus = async (newStatus) => {
+    try {
+        const response = await axios.post('/Shipments/Status/Update', {
+            target: props.target,
+            status: newStatus
+        });
+        if (response.data.success) {
+            shipment.value.status = newStatus;
+        }
+    } catch (error) {
+        modal.open({
+            title: 'Error',
+            body: 'Failed to update status'
+        });
+    }
+};
+
+onMounted(fetchShipmentDetail);
+</script>
+
+<template>
+    <div class="shipment-detail-page pb-5">
+        <div class="tf-container mt-4">
+            <InputGroupButton
+                text="Back to Shipments"
+                variant="text"
+                @click="navigate({ page: 'ShipmentList' })"
+                class="mb-4"
+            >
+                <i class="fas fa-chevron-left me-1"></i> Back to Shipments
+            </InputGroupButton>
+
+            <div v-if="loading" class="text-center py-5">
+                <LoadingSpinner />
+            </div>
+
+            <div v-else-if="!shipment" class="alert alert-danger">
+                Shipment not found.
+            </div>
+
+            <div v-else>
+                <CardSimple title="Track Shipment" class="mb-4">
+                    <template #headerAction>
+                        <span class="badge bg-primary px-3 py-2 rounded-pill">{{ shipment.status }}</span>
+                    </template>
+
+                    <div class="mb-4">
+                        <div class="small text-muted">Tracking Number</div>
+                        <div class="fw_5 h5">{{ shipment.tracking_number || 'Pending Assignment' }}</div>
+                    </div>
+
+                    <div class="row g-4 border-top pt-4">
+                        <div class="col-6">
+                            <div class="small text-muted mb-1">Customer</div>
+                            <div class="fw_5">{{ shipment.customer?.name }}</div>
+                            <div class="small">{{ shipment.destination_address }}</div>
+                        </div>
+                        <div class="col-6 text-end">
+                            <div class="small text-muted mb-1">Store</div>
+                            <div class="fw_5">{{ shipment.store?.name }}</div>
+                            <div class="small">Shipping Fee: ₱{{ shipment.shipping_fee }}</div>
+                        </div>
+                    </div>
+                </CardSimple>
+
+                <CardSimple title="Update Progress">
+                    <div class="d-flex flex-wrap gap-3">
+                        <InputGroupButton 
+                            v-if="shipment.status === 'PENDING'"
+                            text="Mark as Picked Up"
+                            variant="outline"
+                            size="sm"
+                            @click="updateStatus('PICKED_UP')" 
+                        />
+                        <InputGroupButton 
+                            v-if="shipment.status === 'PICKED_UP'"
+                            text="Mark as In Transit"
+                            variant="outline"
+                            size="sm"
+                            @click="updateStatus('IN_TRANSIT')" 
+                        />
+                        <InputGroupButton 
+                            v-if="shipment.status === 'IN_TRANSIT'"
+                            text="Mark as Delivered"
+                            variant="primary"
+                            size="sm"
+                            @click="updateStatus('DELIVERED')" 
+                        />
+                        <InputGroupButton 
+                            v-if="['PENDING', 'PICKED_UP', 'IN_TRANSIT'].includes(shipment.status)"
+                            text="Mark as Failed"
+                            variant="danger"
+                            size="sm"
+                            @click="updateStatus('FAILED')" 
+                        />
+                    </div>
+                </CardSimple>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.fw_5 { font-weight: 500; }
+</style>