<template>
    <div class="flex items-center justify-start gap-10">
        <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions finie</h1>
    </div>

    <UiDataTable
        :columns="columns"
        url="shipments"
        :query="{ isValid: true }"
        @row-click="goToShipment"
    />
</template>

<script setup lang="ts">
import {formatBovinShipments, formatWeights} from "~/utils/datatable-formatters";

const router = useRouter()
const columns = [
    {key: 'identificationNumber', label: 'Numero'},
    {key: 'shipmentDate', label: 'Date de livraison'},
    {key: 'customer', label: 'Client'},
    {key: 'address.fullAddress', label: 'Adresse'},
    {key: 'bovinShipments', label: 'Type', format:formatBovinShipments},
    {key: 'weights', label: 'Poids', format: formatWeights}
]
type ReceptionRow = {
    id?: number | string
}
const goToShipment = (row: ReceptionRow) => {
    const id = Number(row?.id)
    if (!Number.isFinite(id)) return
    router.push(`/shipment/update/${id}`)
}
</script>
