<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 réceptions en attente</h1>
    </div>
    <UiDataTable
        :columns="columns"
        url="receptions"
        :query="{ isValid: false }"
        @row-click="goToReception"
    />
</template>

<script setup lang="ts">
const router = useRouter()



const columns = [
    {key: 'supplier.name', label: 'Fournisseur', isSearchable:true},
    { key: 'address.fullAddress', label: 'Adresse', isSearchable: true },
    {key: 'carrier.name', label: 'Transporteur', isSearchable:true},
    {key: 'receptionType.label', label: 'Type', isSearchable:true, type:'selectTypeReception'},
    {key: 'licensePlate', label: 'Immatriculation', isSearchable:true, type:'licensePlate'},
]


type ReceptionRow = {
    id?: number | string
}
const goToReception = (row: ReceptionRow) => {
    const id = Number(row?.id)
    if (!Number.isFinite(id)) return
        router.push(`/reception/${id}`)
}
</script>
